From 15bb3bfa60bff9aafe9b3b57fe6fdf1572961cda Mon Sep 17 00:00:00 2001
From: Bernard <63512176+BernardJen@users.noreply.github.com>
Date: Tue, 8 Sep 2026 17:46:42 +0200
Subject: [PATCH] feat(ui): jog step as 0.1 / 1 / 5 / 10 mm buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sighting a pen tip onto a printed crosshair goes 10 → 1 → 0.1 mm in turn,
and retyping a number field while watching the tip is the slow part. Fixed
presets, one button each, are what every 3D-printer control panel does and
what the operator asked for. Used in the Jog panel and inside the
registration wizard's point step, so both share one StepPicker.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 CHANGELOG.md                  |  9 +++++++++
 package-lock.json             |  4 ++--
 package.json                  |  2 +-
 src/ui/App.tsx                |  3 ++-
 src/ui/RegistrationWizard.tsx | 15 +++------------
 src/ui/StepPicker.tsx         | 30 ++++++++++++++++++++++++++++++
 6 files changed, 47 insertions(+), 16 deletions(-)
 create mode 100644 src/ui/StepPicker.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b1b6226..c9c3679 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.1] - 2026-09-08
+
+### Changed
+
+- Jog step is chosen with 0.1 / 1 / 5 / 10 mm buttons (the 3D-printer convention)
+  instead of a typed number, in the Jog panel and in the registration wizard.
+  Sighting a pen tip onto a crosshair goes 10 → 1 → 0.1 in turn; a button per
+  size beats retyping while watching the tip.
+
 ## [1.2.0] - 2026-09-08
 
 ### Changed
diff --git a/package-lock.json b/package-lock.json
index 02fc729..4696dff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "penplotter271",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "penplotter271",
-      "version": "1.2.0",
+      "version": "1.2.1",
       "dependencies": {
         "@types/ws": "^8.18.1",
         "konva": "^10.3.0",
diff --git a/package.json b/package.json
index 6204858..26e7edf 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "penplotter271",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.2.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index 68fa8c5..444ca80 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -6,6 +6,7 @@ import { loadCalibration, saveCalibration } from './calibrationStore';
 import { loadSession, saveSession, type Session, type PersistedArt } from './sessionStore';
 import { flattenSvg, ABORTED } from '../plot/svg';
 import { RegistrationWizard } from './RegistrationWizard';
+import { StepPicker } from './StepPicker';
 import { btn, btnPrimary, field } from './styles';
 import { imageToField, traceField, type FieldSource } from '../plot/raster';
 import { applyDetail } from '../plot/detail';
@@ -979,7 +980,7 @@ export function App() {
             </Section>
 
             <Section title="Jog">
-              <NumberField label="Step (mm)" value={jogStep} onChange={setJogStep} />
+              <StepPicker value={jogStep} onChange={setJogStep} />
               <div className="mt-2 grid w-44 grid-cols-3 gap-1 md:w-36">
                 <span />
                 <JogBtn label="↑" onPress={() => jogBy(0, -1)} disabled={!connected} />
diff --git a/src/ui/RegistrationWizard.tsx b/src/ui/RegistrationWizard.tsx
index eb8b014..d0f0a55 100644
--- a/src/ui/RegistrationWizard.tsx
+++ b/src/ui/RegistrationWizard.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useState } from 'react';
 import { fitRegistration } from '../plot/register';
 import type { CalibrationPoint, Placement, Point } from '../plot/types';
-import { btn, btnPrimary, field } from './styles';
+import { btn, btnPrimary } from './styles';
+import { StepPicker } from './StepPicker';
 
 /**
  * RMS residual above which the fit is flagged. A sighted pen tip repeats to
@@ -144,17 +145,7 @@ export function RegistrationWizard(p: RegistrationWizardProps) {
                   {p.penPos ? `${p.penPos.x.toFixed(2)}, ${p.penPos.y.toFixed(2)}` : '—'}
                 </span>
               </span>
-              <label className="flex items-center gap-1">
-                Step (mm)
-                <input
-                  type="number"
-                  className={`${field} w-16`}
-                  value={p.jogStep}
-                  step={0.1}
-                  min={0.01}
-                  onChange={(e) => p.setJogStep(Math.max(0.01, Number(e.target.value) || 0.01))}
-                />
-              </label>
+              <StepPicker value={p.jogStep} onChange={p.setJogStep} />
             </div>
             <div className="mt-2 grid w-36 grid-cols-3 gap-1">
               <span />
diff --git a/src/ui/StepPicker.tsx b/src/ui/StepPicker.tsx
new file mode 100644
index 0000000..61e8404
--- /dev/null
+++ b/src/ui/StepPicker.tsx
@@ -0,0 +1,30 @@
+/** Jog step presets, mm — the 3D-printer convention operators already know. */
+export const JOG_STEPS = [0.1, 1, 5, 10] as const;
+
+/**
+ * Step-size button group. Fixed presets rather than a free number: sighting a
+ * pen tip onto a crosshair is 10 → 1 → 0.1 mm in turn, and a button per size
+ * beats retyping a field while watching the tip.
+ */
+export function StepPicker(props: { value: number; onChange: (mm: number) => void }) {
+  return (
+    <div className="flex items-center gap-1 text-xs">
+      <span className="mr-1 text-slate-600">Step</span>
+      {JOG_STEPS.map((s) => (
+        <button
+          key={s}
+          className={`rounded border px-2 py-1 ${
+            props.value === s
+              ? 'border-blue-600 bg-blue-600 text-white'
+              : 'border-slate-300 bg-white hover:bg-slate-50'
+          }`}
+          onClick={() => props.onChange(s)}
+          aria-pressed={props.value === s}
+        >
+          {s}
+        </button>
+      ))}
+      <span className="text-slate-500">mm</span>
+    </div>
+  );
+}