From 114e0b51165c7980f040491c4a3ae68d6a6a0dfd Mon Sep 17 00:00:00 2001
From: grokbot_ty <grokbot_ty@gitea.local>
Date: Mon, 14 Sep 2026 18:26:31 +0000
Subject: [PATCH] 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 | 73 ++++++++++++++++++------
 1 file changed, 56 insertions(+), 17 deletions(-)

diff --git a/frontend/src/capture/MeasurePanel.svelte b/frontend/src/capture/MeasurePanel.svelte
index 02081be..8469f45 100644
--- a/frontend/src/capture/MeasurePanel.svelte
+++ b/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">
-        <button type="button" class="thumb" on:click={() => setLength(state.lengthEighths - 1)} aria-label="Length minus">−</button>
-        <span class="v">{fmtEighths(state.lengthEighths)}</span>
-        <button type="button" class="thumb" on:click={() => setLength(state.lengthEighths + 1)} aria-label="Length plus">+</button>
-      </div>
+      <input
+        type="number"
+        aria-label="Length L"
+        inputmode="decimal"
+        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">
-        <button type="button" class="thumb" on:click={() => setThickness(state.thicknessEighths - 1)} aria-label="Thickness minus">−</button>
-        <span class="v">{fmtEighths(state.thicknessEighths)}</span>
-        <button type="button" class="thumb" on:click={() => setThickness(state.thicknessEighths + 1)} aria-label="Thickness plus">+</button>
-      </div>
+      <input
+        type="number"
+        aria-label="Thickness"
+        inputmode="decimal"
+        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; }
-  .thumb {
-    width: 52px; height: 52px; border-radius: 50%; font-size: 1.7rem;
-    border: 1px solid #444; background: #1d1d1d; color: #eee; flex: none;
+  .field input {
+    box-sizing: border-box; width: 100%; min-height: 52px; padding: 12px; font-size: 1rem;
+    border-radius: 10px; border: 1px solid #444; background: #1d1d1d; color: #eee;
+    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;