fix(capture): type Length L and Thickness as inch inputs

Replace MeasurePanel steppers with number inputs. Commit on blur, change,
and Calculate snaps inches to nearest 1/8 via inToEighths. Calculate
enables when both drafts parse to > 0. Axis, mask, and scale math unchanged.

frontend/src/capture/MeasurePanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Capture } from './capture.types';
+  import { inToEighths, eighthsToIn } from './capture.types';
   import { fmtEighths } from './session';
   import PhotoStage from './PhotoStage.svelte';
 
@@ -11,9 +12,36 @@
   export let pngUrl: string | null;
 
   let calcBusy = false;
+  let lengthIn = state.lengthEighths === 0 ? '' : String(eighthsToIn(state.lengthEighths));
+  let thicknessIn = state.thicknessEighths === 0 ? '' : String(eighthsToIn(state.thicknessEighths));
+
+  const positiveInches = (raw: string): number | null => {
+    const inches = Number.parseFloat(raw);
+    return Number.isFinite(inches) && inches > 0 ? inches : null;
+  };
+
+  const commitLength = () => {
+    const inches = positiveInches(String(lengthIn));
+    const eighths = inches === null ? 0 : inToEighths(inches);
+    setLength(eighths);
+    lengthIn = eighths === 0 ? '' : String(eighthsToIn(eighths));
+  };
+  const commitThickness = () => {
+    const inches = positiveInches(String(thicknessIn));
+    const eighths = inches === null ? 0 : inToEighths(inches);
+    setThickness(eighths);
+    thicknessIn = eighths === 0 ? '' : String(eighthsToIn(eighths));
+  };
+
+  $: canCalc = positiveInches(String(lengthIn)) !== null && positiveInches(String(thicknessIn)) !== null;
+
   const doCalc = async () => {
     calcBusy = true;
-    try { await calculate(); } finally { calcBusy = false; }
+    try {
+      commitLength();
+      commitThickness();
+      await calculate();
+    } finally { calcBusy = false; }
   };
 </script>
 
@@ -30,19 +58,31 @@
   <div class="fields">
     <div class="field">
       <span class="label">Length L</span>
-      <div class="stepper">
+      <input
-        <button type="button" class="thumb" on:click={() => setLength(state.lengthEighths - 1)} aria-label="Length minus">−</button>
+        type="number"
-        <span class="v">{fmtEighths(state.lengthEighths)}</span>
+        aria-label="Length L"
-        <button type="button" class="thumb" on:click={() => setLength(state.lengthEighths + 1)} aria-label="Length plus">+</button>
+        inputmode="decimal"
-      </div>
+        step="0.125"
+        min="0"
+        placeholder="0"
+        bind:value={lengthIn}
+        on:blur={commitLength}
+        on:change={commitLength}
+      />
     </div>
     <div class="field">
       <span class="label">Thickness</span>
-      <div class="stepper">
+      <input
-        <button type="button" class="thumb" on:click={() => setThickness(state.thicknessEighths - 1)} aria-label="Thickness minus">−</button>
+        type="number"
-        <span class="v">{fmtEighths(state.thicknessEighths)}</span>
+        aria-label="Thickness"
-        <button type="button" class="thumb" on:click={() => setThickness(state.thicknessEighths + 1)} aria-label="Thickness plus">+</button>
+        inputmode="decimal"
-      </div>
+        step="0.125"
+        min="0"
+        placeholder="0"
+        bind:value={thicknessIn}
+        on:blur={commitThickness}
+        on:change={commitThickness}
+      />
     </div>
   </div>
 
@@ -51,7 +91,7 @@
     <button
       type="button"
       class="primary"
-      disabled={calcBusy || state.lengthEighths === 0 || state.thicknessEighths === 0}
+      disabled={calcBusy || !canCalc}
       on:click={doCalc}
     >
       {calcBusy ? 'Calculating…' : 'Calculate'}
@@ -84,12 +124,11 @@
   .fields { display: flex; gap: 16px; margin-top: 16px; }
   .field { flex: 1; }
   .label { display: block; font-size: 0.9rem; color: #aaa; margin-bottom: 8px; }
-  .stepper { display: flex; align-items: center; gap: 12px; }
+  .field input {
-  .thumb {
+    box-sizing: border-box; width: 100%; min-height: 52px; padding: 12px; font-size: 1rem;
-    width: 52px; height: 52px; border-radius: 50%; font-size: 1.7rem;
+    border-radius: 10px; border: 1px solid #444; background: #1d1d1d; color: #eee;
-    border: 1px solid #444; background: #1d1d1d; color: #eee; flex: none;
+    font-variant-numeric: tabular-nums;
   }
-  .v { flex: 1; text-align: center; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
   .row { display: flex; gap: 10px; margin-top: 20px; }
   .primary {
     flex: 2; padding: 14px; font-size: 1.05rem; border-radius: 10px; border: 0;

frontend/src/capture/measureInputs.test.ts

@@ -0,0 +1,42 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { test } from 'node:test';
+import { inToEighths } from './capture.types';
+
+const panelSrc = readFileSync(
+  join(dirname(fileURLToPath(import.meta.url)), 'MeasurePanel.svelte'),
+  'utf8',
+);
+
+test('MeasurePanel exposes typed number inputs for Length L and Thickness', () => {
+  const inputs = panelSrc.match(/<input\b[^>]*>/g) ?? [];
+  assert.ok(inputs.length >= 2, 'expected at least two <input> fields');
+  assert.ok(
+    inputs.some((el) => /type="number"/.test(el) && /aria-label="Length L"/.test(el)),
+    'Length L must be a type=number input',
+  );
+  assert.ok(
+    inputs.some((el) => /type="number"/.test(el) && /aria-label="Thickness"/.test(el)),
+    'Thickness must be a type=number input',
+  );
+  assert.equal(
+    panelSrc.includes('class="stepper"'),
+    false,
+    'stepper-only UI is the UAT fail; primary control must be typed input',
+  );
+  assert.equal(
+    /<span class="v">\{fmtEighths\(state\.lengthEighths\)\}<\/span>/.test(panelSrc),
+    false,
+    'Length must not be a read-only fmtEighths span',
+  );
+});
+
+test('typed inches snap to nearest 1/8 via inToEighths', () => {
+  assert.equal(inToEighths(12), 96);
+  assert.equal(inToEighths(12.1), 97);
+  assert.equal(inToEighths(0.06), 0);
+  assert.equal(inToEighths(0.07), 1);
+  assert.equal(inToEighths(1.999), 16);
+});