fix(ui): F8-06 calculator polish — unified spinner UX, lock-infeasible on (0, 1), dropdown reset-changes

Owner review on PR #61:

- п.9 (option B). Hide the native spinner on EVERY numeric input in
  the calculator (DWSC blocks, armament, tech, planet MAT, custom
  load, lock value, modernization target tech) and drive every step
  through ArrowUp / ArrowDown. The column widths stay stable and the
  inputs read consistently across the whole row. The ship blocks
  keep the smart (0 ↔ 1) jump on ArrowUp/ArrowDown; armament steps
  ±1 with a JS handler instead of relying on the native spinner.
  Other inputs step by their natural grain (±0.001 for tech / lock,
  ±0.01 for MAT / load).
- п.10. Tech-level labels (`tech-val`) and the planet MAT label
  (`mat-val`) now read through the same `Ceil3` formatter as the
  derived results, so plain-text numeric values share the report's
  3-decimal tabular formatting. The design-area component receives
  `formatNumber` as a prop; the resolved (goal-seek) cell uses the
  same formatter, so the read-only computed value matches the rest
  of the row.
- п.12. `computeCalculator` now validates the back-solved block
  against the same DWSC rule the live validator enforces (`0` or
  `≥ 1`). When the solver lands in the `(0, 1)` gap (e.g. attack
  0.5 / weaponsTech 1.5 → weapons 0.333…) the lock is flagged
  infeasible — the lock input flips red and the claimed block is
  NOT back-solved into the invalid range, so the design preview
  keeps reading the user's own typed values instead of silently
  showing a sub-1 block.
- new. Selecting an existing ship class from the name datalist now
  loads it immediately. `change` fires only on blur in Firefox,
  which is why the previous behaviour looked delayed; switching the
  load to `oninput` with an `InputEvent.inputType` check makes the
  load synchronous everywhere (datalist replacement carries
  `"insertReplacementText"` in Chromium / WebKit, `undefined` in
  Firefox; keyboard typing always carries a typing `inputType`).
  Before loading we compare the live blocks to the previously
  loaded class (or to the empty defaults) and, if they differ, ask
  through a `window.confirm`. On decline we revert the name field
  and leave the design untouched.

Tests: calculator-tab and calc-model gain six cases (armament
step, tech/MAT formatter labels, lock infeasible on (0, 1) for
both attack→weapons and emptyMass→cargo, lock-value Arrow step,
dropdown immediate load + confirm-blocks-load + confirm-allows-load),
all 779 vitest tests green. docs/calculator-ux.md follows the new
behaviour.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

ui/frontend/tests/calculator-tab.test.ts

@@ -380,4 +380,183 @@ describe("calculator-tab", () => {
 			"true",
 		);
 	});
+
+	test("armament Arrow keys step the integer block by ±1 (clamped at 0)", async () => {
+		const ui = mount();
+		const armament = ui.getByTestId(
+			"calculator-block-armament",
+		) as HTMLInputElement;
+		armament.focus();
+		await fireEvent.keyDown(armament, { key: "ArrowUp" });
+		expect(armament).toHaveValue(1);
+		await fireEvent.keyDown(armament, { key: "ArrowUp" });
+		expect(armament).toHaveValue(2);
+		await fireEvent.keyDown(armament, { key: "ArrowDown" });
+		expect(armament).toHaveValue(1);
+		await fireEvent.keyDown(armament, { key: "ArrowDown" });
+		expect(armament).toHaveValue(0);
+		// Clamped at zero — another ArrowDown is a no-op.
+		await fireEvent.keyDown(armament, { key: "ArrowDown" });
+		expect(armament).toHaveValue(0);
+	});
+
+	test("renders unoverridden tech as a 3-decimal label (matches the report)", () => {
+		// Player drive tech 1.2 → "1.200" via the shared ceil3 formatter.
+		const ui = mount();
+		expect(ui.getByTestId("calculator-tech-value-drive")).toHaveTextContent(
+			"1.2",
+		);
+		// Stable column-aligned formatting (3 decimals) is what the report
+		// uses, so the tech labels read consistently.
+		const tech = ui.getByTestId("calculator-tech-value-drive");
+		expect(tech.textContent ?? "").toMatch(/^1\.20?0?$/);
+	});
+
+	test("planet MAT label renders through the 3-decimal formatter", () => {
+		const selection = new SelectionStore();
+		selection.selectPlanet(17);
+		const ui = mount({
+			report: makeReport({ planets: [LOCAL_PLANET] }),
+			selection,
+		});
+		// Planet MAT is 100 → "100" through the shared formatter; the
+		// label is monospaced + right-aligned via the existing `.mat-val`
+		// rule. Formatting check: no stray fractional digits on integers.
+		expect(
+			ui.getByTestId("calculator-planet-mat-value"),
+		).toHaveTextContent("100");
+	});
+
+	test("lock spinner step is replaced by ArrowUp/ArrowDown (±0.001)", async () => {
+		const ui = mount();
+		await setBlock(ui, "drive", 10);
+		await setBlock(ui, "shields", 5);
+		await setBlock(ui, "cargo", 5);
+		await fireEvent.click(ui.getByTestId("calculator-lock-attack"));
+		const locked = ui.getByTestId(
+			"calculator-locked-attack",
+		) as HTMLInputElement;
+		// Lock value is seeded from outputs.attack (0 with no weapons).
+		const start = Number(locked.value);
+		locked.focus();
+		await fireEvent.keyDown(locked, { key: "ArrowUp" });
+		expect(Number(locked.value)).toBeCloseTo(start + 0.001, 9);
+		await fireEvent.keyDown(locked, { key: "ArrowDown" });
+		expect(Number(locked.value)).toBeCloseTo(start, 9);
+	});
+
+	test("flags the lock as infeasible when the back-solved block falls in (0, 1)", async () => {
+		// attack lock → weapons = targetAttack / weaponsTech. weaponsTech
+		// is 1.5; a target of 0.5 would force weapons = 0.333… which
+		// fails the DWSC rule (must be 0 or ≥ 1).
+		const ui = mount();
+		await setBlock(ui, "drive", 10);
+		await setBlock(ui, "armament", 2);
+		await setBlock(ui, "weapons", 5);
+		await setBlock(ui, "shields", 5);
+		await setBlock(ui, "cargo", 5);
+		await fireEvent.click(ui.getByTestId("calculator-lock-attack"));
+		await fireEvent.input(ui.getByTestId("calculator-locked-attack"), {
+			target: { value: "0.5" },
+		});
+		const locked = ui.getByTestId("calculator-locked-attack");
+		expect(locked).toHaveAttribute(
+			"title",
+			expect.stringMatching(/cannot be reached/i),
+		);
+		// The claimed block is not back-solved into the invalid (0, 1)
+		// range — the weapons input keeps the user's typed value (5).
+		expect(ui.getByTestId("calculator-block-weapons")).toHaveValue(5);
+	});
+
+	test("dropdown selection loads the class immediately (no blur needed)", async () => {
+		const ui = mount({
+			report: makeReport({
+				localShipClass: [
+					{
+						name: "Scout",
+						drive: 3,
+						armament: 0,
+						weapons: 0,
+						shields: 2,
+						cargo: 1,
+					},
+				],
+			} as unknown as GameReport),
+		});
+		// A datalist option click sets the whole value at once — Firefox
+		// reports no `inputType`, Chromium reports "insertReplacementText".
+		// Simulate the latter; the calculator should load before any
+		// `change` event.
+		await fireEvent.input(ui.getByTestId("calculator-name"), {
+			target: { value: "Scout" },
+			inputType: "insertReplacementText",
+		});
+		expect(ui.getByTestId("calculator-block-drive")).toHaveValue(3);
+		expect(ui.getByTestId("calculator-block-shields")).toHaveValue(2);
+	});
+
+	test("dropdown selection asks before discarding manual edits", async () => {
+		const ui = mount({
+			report: makeReport({
+				localShipClass: [
+					{
+						name: "Scout",
+						drive: 3,
+						armament: 0,
+						weapons: 0,
+						shields: 2,
+						cargo: 1,
+					},
+				],
+			} as unknown as GameReport),
+		});
+		// The user has hand-edited the design.
+		await setBlock(ui, "drive", 7);
+		const confirm = vi.spyOn(window, "confirm").mockReturnValue(false);
+		await fireEvent.input(ui.getByTestId("calculator-name"), {
+			target: { value: "Scout" },
+			inputType: "insertReplacementText",
+		});
+		expect(confirm).toHaveBeenCalledTimes(1);
+		// The user said no — the manual edits stay.
+		expect(ui.getByTestId("calculator-block-drive")).toHaveValue(7);
+		// The name field is reverted to the previously loaded class (or
+		// empty), so the field does not pretend the load happened.
+		expect(ui.getByTestId("calculator-name")).toHaveValue("");
+
+		confirm.mockReturnValue(true);
+		await fireEvent.input(ui.getByTestId("calculator-name"), {
+			target: { value: "Scout" },
+			inputType: "insertReplacementText",
+		});
+		// Confirmed — the class is now loaded.
+		expect(ui.getByTestId("calculator-block-drive")).toHaveValue(3);
+		confirm.mockRestore();
+	});
+
+	test("dropdown selection loads silently when the design is clean", async () => {
+		const ui = mount({
+			report: makeReport({
+				localShipClass: [
+					{
+						name: "Scout",
+						drive: 3,
+						armament: 0,
+						weapons: 0,
+						shields: 2,
+						cargo: 1,
+					},
+				],
+			} as unknown as GameReport),
+		});
+		const confirm = vi.spyOn(window, "confirm");
+		await fireEvent.input(ui.getByTestId("calculator-name"), {
+			target: { value: "Scout" },
+			inputType: "insertReplacementText",
+		});
+		expect(confirm).not.toHaveBeenCalled();
+		expect(ui.getByTestId("calculator-block-drive")).toHaveValue(3);
+		confirm.mockRestore();
+	});
 });