From bcdee2238f1436d43a3bcc918309888ee388b9a6 Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Thu, 7 May 2026 23:27:43 +0200
Subject: [PATCH 1/8] refactor(registry): use shared RotationSelect in text and
 serial

text.tsx and serial.tsx were the last two registries duplicating the
rotation-select markup inline (label + select with 4 hardcoded options).
Every other rotation-using registry already routes through the shared
RotationSelect component, which centralises the t.registry.text.rotation*
locale-key reuse so the cross-block access lives in one well-named place
instead of being spread across two more files.
---
 src/registry/serial.tsx | 18 +++++-------------
 src/registry/text.tsx   | 18 +++++-------------
 2 files changed, 10 insertions(+), 26 deletions(-)

diff --git a/src/registry/serial.tsx b/src/registry/serial.tsx
index 8673a724..fdd8fcae 100644
--- a/src/registry/serial.tsx
+++ b/src/registry/serial.tsx
@@ -3,6 +3,7 @@ import { useT } from '../lib/useT';
 import { inputCls, labelCls } from '../components/Properties/styles';
 import { fieldPos } from './zplHelpers';
 import { filterContent, type ContentSpec } from './contentSpec';
+import { RotationSelect } from '../components/Properties/RotationSelect';
 
 const serialSpec: ContentSpec = { charset: '0-9A-Za-z' };
 
@@ -89,19 +90,10 @@ export const serial: ObjectTypeDefinition<SerialProps> = {
           </div>
         </div>
 
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>{t.registry.serial.rotation}</label>
-          <select
-            className={inputCls}
-            value={p.rotation}
-            onChange={(e) => onChange({ rotation: e.target.value as SerialProps['rotation'] })}
-          >
-            <option value="N">{t.registry.text.rotationN}</option>
-            <option value="R">{t.registry.text.rotationR}</option>
-            <option value="I">{t.registry.text.rotationI}</option>
-            <option value="B">{t.registry.text.rotationB}</option>
-          </select>
-        </div>
+        <RotationSelect
+          value={p.rotation}
+          onChange={(rotation) => onChange({ rotation })}
+        />
 
         <div className="flex flex-col gap-1">
           <label className={labelCls}>{t.registry.serial.zplMode}</label>
diff --git a/src/registry/text.tsx b/src/registry/text.tsx
index 863b2ac5..a5af5c12 100644
--- a/src/registry/text.tsx
+++ b/src/registry/text.tsx
@@ -5,6 +5,7 @@ import { inputCls, labelCls } from '../components/Properties/styles';
 import { fieldPos, fdField } from './zplHelpers';
 import { getFont, getAllFonts, loadFontFile } from '../lib/fontCache';
 import { useFontCacheVersion } from '../hooks/useFontCacheVersion';
+import { RotationSelect } from '../components/Properties/RotationSelect';
 
 export interface TextProps {
   content: string;
@@ -154,19 +155,10 @@ export const text: ObjectTypeDefinition<TextProps> = {
           </div>
         </div>
 
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>{t.registry.text.rotation}</label>
-          <select
-            className={inputCls}
-            value={p.rotation}
-            onChange={(e) => onChange({ rotation: e.target.value as TextProps['rotation'] })}
-          >
-            <option value="N">{t.registry.text.rotationN}</option>
-            <option value="R">{t.registry.text.rotationR}</option>
-            <option value="I">{t.registry.text.rotationI}</option>
-            <option value="B">{t.registry.text.rotationB}</option>
-          </select>
-        </div>
+        <RotationSelect
+          value={p.rotation}
+          onChange={(rotation) => onChange({ rotation })}
+        />
 
         <label className="flex items-center gap-2 cursor-pointer">
           <input

From af4e52e39f0cca8c1f20450cc08304f99e39faaa Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Thu, 7 May 2026 23:30:19 +0200
Subject: [PATCH 2/8] refactor(store): introduce getCurrentObjects helper

Adds a non-reactive sibling to useCurrentObjects so event handlers and
callbacks no longer have to spell out
`currentObjects(useLabelStore.getState())` every time. Replaces the
verbose form in useGlobalShortcuts, useCanvasLasso,
useKonvaTransformer, and the one-shot site in LabelCanvas. The
remaining LabelCanvas call sites that share a state snapshot across
multiple reads keep using `currentObjects(state)` directly, which
preserves the snapshot-consistency intent.
---
 src/components/Canvas/LabelCanvas.tsx              | 5 ++---
 src/components/Canvas/hooks/useCanvasLasso.ts      | 6 +++---
 src/components/Canvas/hooks/useKonvaTransformer.ts | 4 ++--
 src/hooks/useGlobalShortcuts.ts                    | 4 ++--
 src/store/labelStore.ts                            | 5 +++++
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/Canvas/LabelCanvas.tsx b/src/components/Canvas/LabelCanvas.tsx
index 63dff325..685f759a 100644
--- a/src/components/Canvas/LabelCanvas.tsx
+++ b/src/components/Canvas/LabelCanvas.tsx
@@ -8,7 +8,7 @@ import { useDroppable, useDndMonitor } from "@dnd-kit/core";
 import type { PaletteDragData } from "../../dnd/types";
 import { Stage, Layer, Group, Rect, Transformer } from "react-konva";
 import type Konva from "konva";
-import { useLabelStore, useCurrentObjects, currentObjects } from "../../store/labelStore";
+import { useLabelStore, useCurrentObjects, currentObjects, getCurrentObjects } from "../../store/labelStore";
 import { pxToDots, SCREEN_PX_PER_MM } from "../../lib/coordinates";
 import { SNAP_OPTIONS } from "../../lib/units";
 import type { Unit } from "../../lib/units";
@@ -325,8 +325,7 @@ export function LabelCanvas({
     const objId = node.id();
     if (!objId || !stageRef.current) return;
 
-    const objs = currentObjects(useLabelStore.getState());
-    const obj = objs.find((o) => o.id === objId);
+    const obj = getCurrentObjects().find((o) => o.id === objId);
     if (!obj) return;
 
     const stage = stageRef.current;
diff --git a/src/components/Canvas/hooks/useCanvasLasso.ts b/src/components/Canvas/hooks/useCanvasLasso.ts
index 44f403c4..d62a1549 100644
--- a/src/components/Canvas/hooks/useCanvasLasso.ts
+++ b/src/components/Canvas/hooks/useCanvasLasso.ts
@@ -1,6 +1,6 @@
 import { useState, useRef } from "react";
 import type Konva from "konva";
-import { useLabelStore, currentObjects } from "../../../store/labelStore";
+import { getCurrentObjects } from "../../../store/labelStore";
 import { getIdsIntersectingRect, type LassoRect } from "../lassoGeometry";
 
 interface Options {
@@ -58,14 +58,14 @@ export function useCanvasLasso({ containerRef, stageRef, spaceDown, selectObject
     lassoRectRef.current = null;
     setLasso(null);
     if (!rect || !stageRef.current) return;
-    const ids = currentObjects(useLabelStore.getState()).map((o) => o.id);
+    const ids = getCurrentObjects().map((o) => o.id);
     selectObjects(getIdsIntersectingRect(stageRef.current, ids, rect));
   };
 
   const onStageMouseDown = (e: Konva.KonvaEventObject<MouseEvent>) => {
     if (e.evt.button !== 0 || spaceDown) return;
     const targetId = e.target.id();
-    const onObject = currentObjects(useLabelStore.getState()).some((o) => o.id === targetId);
+    const onObject = getCurrentObjects().some((o) => o.id === targetId);
     if (onObject || e.target.getParent()?.className === "Transformer") return;
     const pos = stageRef.current?.getPointerPosition();
     if (!pos) return;
diff --git a/src/components/Canvas/hooks/useKonvaTransformer.ts b/src/components/Canvas/hooks/useKonvaTransformer.ts
index cb891cb7..cc87e44c 100644
--- a/src/components/Canvas/hooks/useKonvaTransformer.ts
+++ b/src/components/Canvas/hooks/useKonvaTransformer.ts
@@ -1,7 +1,7 @@
 import { useRef, useEffect } from "react";
 import type Konva from "konva";
 import { pxToDots } from "../../../lib/coordinates";
-import { useLabelStore, currentObjects } from "../../../store/labelStore";
+import { getCurrentObjects } from "../../../store/labelStore";
 import { BARCODE_1D_TYPES, STACKED_2D_TYPES, ObjectRegistry } from "../../../registry";
 import type { LabelObject } from "../../../registry";
 import type { ObjectChanges } from "../../../store/labelStore";
@@ -266,7 +266,7 @@ export function useKonvaTransformer({
     const nodeHeight = node.height();
     node.scaleX(1);
     node.scaleY(1);
-    const obj = currentObjects(useLabelStore.getState()).find((o) => o.id === singleId);
+    const obj = getCurrentObjects().find((o) => o.id === singleId);
     if (!obj) {
       cleanupTransformState();
       return;
diff --git a/src/hooks/useGlobalShortcuts.ts b/src/hooks/useGlobalShortcuts.ts
index 877fdf42..0a2ce7d5 100644
--- a/src/hooks/useGlobalShortcuts.ts
+++ b/src/hooks/useGlobalShortcuts.ts
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useLabelStore, useHistory, currentObjects } from "../store/labelStore";
+import { useLabelStore, useHistory, getCurrentObjects } from "../store/labelStore";
 import { nextRotation } from "../components/Canvas/rotationGeometry";
 
 export function useGlobalShortcuts() {
@@ -26,7 +26,7 @@ export function useGlobalShortcuts() {
       if (inInput) return;
       if (mod && e.code === "KeyA") {
         e.preventDefault();
-        selectObjects(currentObjects(useLabelStore.getState()).map((o) => o.id));
+        selectObjects(getCurrentObjects().map((o) => o.id));
         return;
       }
       if (mod && e.code === "KeyD") {
diff --git a/src/store/labelStore.ts b/src/store/labelStore.ts
index 33e497a3..208b7979 100644
--- a/src/store/labelStore.ts
+++ b/src/store/labelStore.ts
@@ -457,5 +457,10 @@ export const useLabelStore = create<LabelState>()(
 
 export const useCurrentObjects = () => useLabelStore(currentObjects);
 
+/** Non-reactive sibling of `useCurrentObjects` for use inside event handlers
+ *  and callbacks where a one-time read is wanted. */
+export const getCurrentObjects = (): LabelObject[] =>
+  currentObjects(useLabelStore.getState());
+
 // Undo / redo
 export const useHistory = () => useStore(useLabelStore.temporal);

From 223e507083dc4d09841fd25ced757566a208d60f Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Thu, 7 May 2026 23:35:32 +0200
Subject: [PATCH 3/8] refactor: drop ObjectRegistry any-cast and name the
 resize-min magic number
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ObjectTypeDefinition's P generic already defaults to `object`, so the
Record value type can simply be `ObjectTypeDefinition` without any
explicit `any` and the eslint-disable comment that came with it.

The bare `< 10` guard in useKonvaTransformer.boundBoxFunc becomes
MIN_RESIZE_BOX_PX with a comment explaining why we ignore newer boxes
that small (the user flicked past the object — keep the previous box
rather than collapsing it).
---
 src/components/Canvas/hooks/useKonvaTransformer.ts | 9 ++++++++-
 src/registry/index.ts                              | 3 +--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Canvas/hooks/useKonvaTransformer.ts b/src/components/Canvas/hooks/useKonvaTransformer.ts
index cc87e44c..fc104e08 100644
--- a/src/components/Canvas/hooks/useKonvaTransformer.ts
+++ b/src/components/Canvas/hooks/useKonvaTransformer.ts
@@ -22,6 +22,11 @@ import {
   type SnapRect,
 } from "../../../lib/snapGuides";
 
+/** Minimum bounding-box edge length during a resize, in stage pixels. Below
+ *  this the user is presumed to have flicked past the object and we keep the
+ *  previous box rather than collapsing it to a sliver. */
+const MIN_RESIZE_BOX_PX = 10;
+
 /** Pack a Konva clientRect into the SnapRect shape used by snap helpers. */
 function toSnapRect(id: string, rect: { x: number; y: number; width: number; height: number }): SnapRect {
   return { id, x: rect.x, y: rect.y, width: rect.width, height: rect.height };
@@ -231,7 +236,9 @@ export function useKonvaTransformer({
   };
 
   const boundBoxFunc = (oldBox: BoundingBox, newBox: BoundingBox): BoundingBox => {
-    if (newBox.width < 10 || newBox.height < 10) return oldBox;
+    if (newBox.width < MIN_RESIZE_BOX_PX || newBox.height < MIN_RESIZE_BOX_PX) {
+      return oldBox;
+    }
     if (isUniformScale) newBox = forceSquareBox(oldBox, newBox);
     const dotPx = scale / dpmm;
     let bbox = applyHeightSnap(oldBox, newBox, dotPx, transformAnchorRef.current);
diff --git a/src/registry/index.ts b/src/registry/index.ts
index be9c6d77..72510a8f 100644
--- a/src/registry/index.ts
+++ b/src/registry/index.ts
@@ -103,8 +103,7 @@ export const BARCODE_1D_TYPES = new Set([
 
 export const STACKED_2D_TYPES = new Set(['pdf417', 'micropdf417', 'codablock']);
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const ObjectRegistry: Record<string, ObjectTypeDefinition<any>> = {
+export const ObjectRegistry: Record<string, ObjectTypeDefinition> = {
   // text
   text,
   // code-1d (frequency order)

From 651dd8227f0a5682f01a8d9895e0d15b2cc5fe35 Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Thu, 7 May 2026 23:37:39 +0200
Subject: [PATCH 4/8] refactor(properties): extract NumberInput primitive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

text.tsx and serial.tsx had identical label+number-input markup for
their fontHeight/fontWidth pairs. Extracts a NumberInput component into
components/Properties/ that wraps the labelCls/inputCls layout and
applies clampMin when a min is set, so registry panels stop hand-rolling
the same boilerplate. Other registries can migrate their bare
`<input type="number">` usages to this primitive incrementally — out
of scope for this commit, which only consolidates the duplicated pair.
---
 src/components/Properties/NumberInput.tsx | 52 +++++++++++++++++++++++
 src/registry/serial.tsx                   | 33 ++++++--------
 src/registry/text.tsx                     | 33 ++++++--------
 3 files changed, 78 insertions(+), 40 deletions(-)
 create mode 100644 src/components/Properties/NumberInput.tsx

diff --git a/src/components/Properties/NumberInput.tsx b/src/components/Properties/NumberInput.tsx
new file mode 100644
index 00000000..3b86a581
--- /dev/null
+++ b/src/components/Properties/NumberInput.tsx
@@ -0,0 +1,52 @@
+import { clampMin } from '../../lib/inputParse';
+import { inputCls, labelCls } from './styles';
+
+interface NumberInputProps {
+  label: string;
+  value: number;
+  /** When set, the change handler receives a value clamped to at least `min`,
+   *  guarding against the empty/0 input collapse that bare Number() invites. */
+  min?: number;
+  max?: number;
+  onChange: (next: number) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+}
+
+/**
+ * Standard label + number input pair used by registry properties panels.
+ * Centralises the layout, the labelCls/inputCls coupling, and the
+ * empty-or-NaN-to-min sanitisation so individual registries don't repeat
+ * the boilerplate.
+ */
+export function NumberInput({
+  label,
+  value,
+  min,
+  max,
+  onChange,
+  disabled,
+  readOnly,
+}: NumberInputProps) {
+  return (
+    <div className="flex flex-col gap-1">
+      <label className={labelCls}>{label}</label>
+      <input
+        type="number"
+        className={inputCls}
+        value={value}
+        min={min}
+        max={max}
+        disabled={disabled}
+        readOnly={readOnly}
+        onChange={(e) => {
+          const next =
+            min !== undefined
+              ? clampMin(e.target.value, min)
+              : Number(e.target.value);
+          onChange(next);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/registry/serial.tsx b/src/registry/serial.tsx
index fdd8fcae..b81231d5 100644
--- a/src/registry/serial.tsx
+++ b/src/registry/serial.tsx
@@ -4,6 +4,7 @@ import { inputCls, labelCls } from '../components/Properties/styles';
 import { fieldPos } from './zplHelpers';
 import { filterContent, type ContentSpec } from './contentSpec';
 import { RotationSelect } from '../components/Properties/RotationSelect';
+import { NumberInput } from '../components/Properties/NumberInput';
 
 const serialSpec: ContentSpec = { charset: '0-9A-Za-z' };
 
@@ -68,26 +69,18 @@ export const serial: ObjectTypeDefinition<SerialProps> = {
         </div>
 
         <div className="grid grid-cols-2 gap-2">
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{t.registry.serial.fontHeight}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.fontHeight}
-              min={1}
-              onChange={(e) => onChange({ fontHeight: Number(e.target.value) })}
-            />
-          </div>
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{t.registry.serial.fontWidth}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.fontWidth}
-              min={0}
-              onChange={(e) => onChange({ fontWidth: Number(e.target.value) })}
-            />
-          </div>
+          <NumberInput
+            label={t.registry.serial.fontHeight}
+            value={p.fontHeight}
+            min={1}
+            onChange={(fontHeight) => onChange({ fontHeight })}
+          />
+          <NumberInput
+            label={t.registry.serial.fontWidth}
+            value={p.fontWidth}
+            min={0}
+            onChange={(fontWidth) => onChange({ fontWidth })}
+          />
         </div>
 
         <RotationSelect
diff --git a/src/registry/text.tsx b/src/registry/text.tsx
index a5af5c12..e1fbce41 100644
--- a/src/registry/text.tsx
+++ b/src/registry/text.tsx
@@ -6,6 +6,7 @@ import { fieldPos, fdField } from './zplHelpers';
 import { getFont, getAllFonts, loadFontFile } from '../lib/fontCache';
 import { useFontCacheVersion } from '../hooks/useFontCacheVersion';
 import { RotationSelect } from '../components/Properties/RotationSelect';
+import { NumberInput } from '../components/Properties/NumberInput';
 
 export interface TextProps {
   content: string;
@@ -133,26 +134,18 @@ export const text: ObjectTypeDefinition<TextProps> = {
         </div>
 
         <div className="grid grid-cols-2 gap-2">
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{t.registry.text.fontHeight}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.fontHeight}
-              min={1}
-              onChange={(e) => onChange({ fontHeight: Number(e.target.value) })}
-            />
-          </div>
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{t.registry.text.fontWidth}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.fontWidth}
-              min={0}
-              onChange={(e) => onChange({ fontWidth: Number(e.target.value) })}
-            />
-          </div>
+          <NumberInput
+            label={t.registry.text.fontHeight}
+            value={p.fontHeight}
+            min={1}
+            onChange={(fontHeight) => onChange({ fontHeight })}
+          />
+          <NumberInput
+            label={t.registry.text.fontWidth}
+            value={p.fontWidth}
+            min={0}
+            onChange={(fontWidth) => onChange({ fontWidth })}
+          />
         </div>
 
         <RotationSelect

From 3720ca4ae4754c93542a05c0efb6b68cb252aee5 Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Thu, 7 May 2026 23:42:29 +0200
Subject: [PATCH 5/8] fix(refactor): restore ObjectRegistry any-cast and the
 inlined objs ref
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CI surfaced two issues from the cleanup pass that local `tsc --noEmit`
missed because it ran against the looser root config:

1) Dropping the explicit `<any>` from ObjectTypeDefinition triggers
   function-parameter contravariance under tsconfig.app.json strict —
   ObjectTypeDefinition<EllipseProps>.toZPL is not assignable to one
   that takes `object`. Restore the `<any>` with a comment explaining
   why the eslint-disable is necessary.

2) The handleStageDragMove cleanup that switched to
   getCurrentObjects().find(...) accidentally dropped the `objs`
   binding still used a few lines later. Re-introduce the local.
---
 src/components/Canvas/LabelCanvas.tsx | 3 ++-
 src/registry/index.ts                 | 7 ++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Canvas/LabelCanvas.tsx b/src/components/Canvas/LabelCanvas.tsx
index 685f759a..59981fec 100644
--- a/src/components/Canvas/LabelCanvas.tsx
+++ b/src/components/Canvas/LabelCanvas.tsx
@@ -325,7 +325,8 @@ export function LabelCanvas({
     const objId = node.id();
     if (!objId || !stageRef.current) return;
 
-    const obj = getCurrentObjects().find((o) => o.id === objId);
+    const objs = getCurrentObjects();
+    const obj = objs.find((o) => o.id === objId);
     if (!obj) return;
 
     const stage = stageRef.current;
diff --git a/src/registry/index.ts b/src/registry/index.ts
index 72510a8f..99dc06ad 100644
--- a/src/registry/index.ts
+++ b/src/registry/index.ts
@@ -103,7 +103,12 @@ export const BARCODE_1D_TYPES = new Set([
 
 export const STACKED_2D_TYPES = new Set(['pdf417', 'micropdf417', 'codablock']);
 
-export const ObjectRegistry: Record<string, ObjectTypeDefinition> = {
+// `any` is necessary here: each registry entry is an `ObjectTypeDefinition<P>`
+// with a different concrete `P`. Using `object` instead of `any` triggers
+// function-parameter contravariance (toZPL expects a specific props shape),
+// which TS rejects under strict.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ObjectRegistry: Record<string, ObjectTypeDefinition<any>> = {
   // text
   text,
   // code-1d (frequency order)

From 75b84b924ea385e2ed56e95ada6482fc3f1af566 Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Thu, 7 May 2026 23:48:43 +0200
Subject: [PATCH 6/8] refactor(registry): migrate 1D/2D barcodes to NumberInput
 primitive

Sweeps the bare `<input type="number">` patterns in barcode1d, code128,
code39, ean13, qrcode, datamatrix, aztec, pdf417, micropdf417, codablock
to the shared NumberInput component. Each migration removes the
hand-rolled label+input wrapper and the duplicate
`Number(e.target.value)` plumbing, picking up clampMin sanitisation
where a `min` is set.
---
 src/registry/aztec.tsx       | 39 ++++++++-----------
 src/registry/barcode1d.tsx   | 39 ++++++++-----------
 src/registry/codablock.tsx   | 37 +++++++-----------
 src/registry/code128.tsx     | 35 +++++++----------
 src/registry/code39.tsx      | 35 +++++++----------
 src/registry/datamatrix.tsx  | 19 ++++-----
 src/registry/ean13.tsx       | 35 +++++++----------
 src/registry/micropdf417.tsx | 55 ++++++++++----------------
 src/registry/pdf417.tsx      | 75 ++++++++++++++----------------------
 src/registry/qrcode.tsx      | 19 ++++-----
 10 files changed, 152 insertions(+), 236 deletions(-)

diff --git a/src/registry/aztec.tsx b/src/registry/aztec.tsx
index 1b527886..70e59a80 100644
--- a/src/registry/aztec.tsx
+++ b/src/registry/aztec.tsx
@@ -4,6 +4,7 @@ import { inputCls, labelCls } from "../components/Properties/styles";
 import { fieldPos, fdField } from "./zplHelpers";
 import { type ZplRotation } from "./rotation";
 import { RotationSelect } from "../components/Properties/RotationSelect";
+import { NumberInput } from "../components/Properties/NumberInput";
 
 export interface AztecProps {
   content: string;
@@ -51,31 +52,21 @@ export const aztec: ObjectTypeDefinition<AztecProps> = {
           />
         </div>
 
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>{loc.magnification}</label>
-          <input
-            type="number"
-            className={inputCls}
-            value={p.magnification}
-            min={1}
-            max={10}
-            onChange={(e) =>
-              onChange({ magnification: Number(e.target.value) })
-            }
-          />
-        </div>
+        <NumberInput
+          label={loc.magnification}
+          value={p.magnification}
+          min={1}
+          max={10}
+          onChange={(magnification) => onChange({ magnification })}
+        />
 
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>{loc.ecLevel}</label>
-          <input
-            type="number"
-            className={inputCls}
-            value={p.ecLevel}
-            min={0}
-            max={232}
-            onChange={(e) => onChange({ ecLevel: Number(e.target.value) })}
-          />
-        </div>
+        <NumberInput
+          label={loc.ecLevel}
+          value={p.ecLevel}
+          min={0}
+          max={232}
+          onChange={(ecLevel) => onChange({ ecLevel })}
+        />
 
         <RotationSelect value={p.rotation} onChange={(rotation) => onChange({ rotation })} />
       </div>
diff --git a/src/registry/barcode1d.tsx b/src/registry/barcode1d.tsx
index 7d290913..32f76a94 100644
--- a/src/registry/barcode1d.tsx
+++ b/src/registry/barcode1d.tsx
@@ -6,6 +6,7 @@ import { commitHeightTransform } from './transformHelpers';
 import { filterContent, type ContentSpec } from './contentSpec';
 import { type ZplRotation } from './rotation';
 import { RotationSelect } from '../components/Properties/RotationSelect';
+import { NumberInput } from '../components/Properties/NumberInput';
 
 export interface Barcode1DProps {
   content: string;
@@ -104,30 +105,22 @@ export function createBarcode1D(config: Barcode1DConfig): ObjectTypeDefinition<B
             />
           </div>
 
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{loc.height}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.height}
-              min={1}
-              disabled={config.heightLocked}
-              readOnly={config.heightLocked}
-              onChange={(e) => onChange({ height: Number(e.target.value) })}
-            />
-          </div>
+          <NumberInput
+            label={loc.height}
+            value={p.height}
+            min={1}
+            disabled={config.heightLocked}
+            readOnly={config.heightLocked}
+            onChange={(height) => onChange({ height })}
+          />
 
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{loc.moduleWidth}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.moduleWidth}
-              min={1}
-              max={10}
-              onChange={(e) => onChange({ moduleWidth: Number(e.target.value) })}
-            />
-          </div>
+          <NumberInput
+            label={loc.moduleWidth}
+            value={p.moduleWidth}
+            min={1}
+            max={10}
+            onChange={(moduleWidth) => onChange({ moduleWidth })}
+          />
 
           {!config.interpretationLocked && (
             <label className="flex items-center gap-2 cursor-pointer">
diff --git a/src/registry/codablock.tsx b/src/registry/codablock.tsx
index ec36ba2b..b325a655 100644
--- a/src/registry/codablock.tsx
+++ b/src/registry/codablock.tsx
@@ -5,6 +5,7 @@ import { fieldPos, fdField } from "./zplHelpers";
 import { commitStacked2DTransform } from "./transformHelpers";
 import { type ZplRotation } from "./rotation";
 import { RotationSelect } from "../components/Properties/RotationSelect";
+import { NumberInput } from "../components/Properties/NumberInput";
 
 export interface CodablockProps {
   content: string;
@@ -58,29 +59,19 @@ export const codablock: ObjectTypeDefinition<CodablockProps> = {
         </div>
 
         <div className="grid grid-cols-2 gap-2">
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{loc.rowHeight}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.rowHeight}
-              min={1}
-              onChange={(e) => onChange({ rowHeight: Number(e.target.value) })}
-            />
-          </div>
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{loc.moduleWidth}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.moduleWidth}
-              min={1}
-              max={10}
-              onChange={(e) =>
-                onChange({ moduleWidth: Number(e.target.value) })
-              }
-            />
-          </div>
+          <NumberInput
+            label={loc.rowHeight}
+            value={p.rowHeight}
+            min={1}
+            onChange={(rowHeight) => onChange({ rowHeight })}
+          />
+          <NumberInput
+            label={loc.moduleWidth}
+            value={p.moduleWidth}
+            min={1}
+            max={10}
+            onChange={(moduleWidth) => onChange({ moduleWidth })}
+          />
         </div>
 
         <label className="flex items-center gap-2 cursor-pointer">
diff --git a/src/registry/code128.tsx b/src/registry/code128.tsx
index 3225bfbe..5430f446 100644
--- a/src/registry/code128.tsx
+++ b/src/registry/code128.tsx
@@ -5,6 +5,7 @@ import { fieldPos, fdField } from './zplHelpers';
 import { commitHeightTransform } from './transformHelpers';
 import { type ZplRotation } from './rotation';
 import { RotationSelect } from '../components/Properties/RotationSelect';
+import { NumberInput } from '../components/Properties/NumberInput';
 
 export interface Code128Props {
   content: string;
@@ -57,28 +58,20 @@ export const code128: ObjectTypeDefinition<Code128Props> = {
           />
         </div>
 
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>{t.registry.code128.height}</label>
-          <input
-            type="number"
-            className={inputCls}
-            value={p.height}
-            min={1}
-            onChange={(e) => onChange({ height: Number(e.target.value) })}
-          />
-        </div>
+        <NumberInput
+          label={t.registry.code128.height}
+          value={p.height}
+          min={1}
+          onChange={(height) => onChange({ height })}
+        />
 
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>{t.registry.code128.moduleWidth}</label>
-          <input
-            type="number"
-            className={inputCls}
-            value={p.moduleWidth}
-            min={1}
-            max={10}
-            onChange={(e) => onChange({ moduleWidth: Number(e.target.value) })}
-          />
-        </div>
+        <NumberInput
+          label={t.registry.code128.moduleWidth}
+          value={p.moduleWidth}
+          min={1}
+          max={10}
+          onChange={(moduleWidth) => onChange({ moduleWidth })}
+        />
 
         <div className="flex flex-col gap-2">
           <label className="flex items-center gap-2 cursor-pointer">
diff --git a/src/registry/code39.tsx b/src/registry/code39.tsx
index a57e0167..ed6b887e 100644
--- a/src/registry/code39.tsx
+++ b/src/registry/code39.tsx
@@ -6,6 +6,7 @@ import { commitHeightTransform } from './transformHelpers';
 import { filterContent, type ContentSpec } from './contentSpec';
 import { type ZplRotation } from './rotation';
 import { RotationSelect } from '../components/Properties/RotationSelect';
+import { NumberInput } from '../components/Properties/NumberInput';
 
 const code39Spec: ContentSpec = { charset: '0-9A-Za-z\\-. $/+%' };
 
@@ -60,28 +61,20 @@ export const code39: ObjectTypeDefinition<Code39Props> = {
           />
         </div>
 
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>{t.registry.code39.height}</label>
-          <input
-            type="number"
-            className={inputCls}
-            value={p.height}
-            min={1}
-            onChange={(e) => onChange({ height: Number(e.target.value) })}
-          />
-        </div>
+        <NumberInput
+          label={t.registry.code39.height}
+          value={p.height}
+          min={1}
+          onChange={(height) => onChange({ height })}
+        />
 
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>{t.registry.code39.moduleWidth}</label>
-          <input
-            type="number"
-            className={inputCls}
-            value={p.moduleWidth}
-            min={1}
-            max={10}
-            onChange={(e) => onChange({ moduleWidth: Number(e.target.value) })}
-          />
-        </div>
+        <NumberInput
+          label={t.registry.code39.moduleWidth}
+          value={p.moduleWidth}
+          min={1}
+          max={10}
+          onChange={(moduleWidth) => onChange({ moduleWidth })}
+        />
 
         <div className="flex flex-col gap-2">
           <label className="flex items-center gap-2 cursor-pointer">
diff --git a/src/registry/datamatrix.tsx b/src/registry/datamatrix.tsx
index 50232712..183c539c 100644
--- a/src/registry/datamatrix.tsx
+++ b/src/registry/datamatrix.tsx
@@ -5,6 +5,7 @@ import { fieldPos, fdField } from './zplHelpers';
 import { clamp } from './transformHelpers';
 import { type ZplRotation } from './rotation';
 import { RotationSelect } from '../components/Properties/RotationSelect';
+import { NumberInput } from '../components/Properties/NumberInput';
 
 export interface DataMatrixProps {
   content: string;
@@ -52,17 +53,13 @@ export const datamatrix: ObjectTypeDefinition<DataMatrixProps> = {
           />
         </div>
 
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>{t.registry.datamatrix.dimension}</label>
-          <input
-            type="number"
-            className={inputCls}
-            value={p.dimension}
-            min={1}
-            max={12}
-            onChange={(e) => onChange({ dimension: Number(e.target.value) })}
-          />
-        </div>
+        <NumberInput
+          label={t.registry.datamatrix.dimension}
+          value={p.dimension}
+          min={1}
+          max={12}
+          onChange={(dimension) => onChange({ dimension })}
+        />
 
         <div className="flex flex-col gap-1">
           <label className={labelCls}>{t.registry.datamatrix.quality}</label>
diff --git a/src/registry/ean13.tsx b/src/registry/ean13.tsx
index ea6894c8..1cc9d165 100644
--- a/src/registry/ean13.tsx
+++ b/src/registry/ean13.tsx
@@ -6,6 +6,7 @@ import { commitHeightTransform } from './transformHelpers';
 import { filterContent, type ContentSpec } from './contentSpec';
 import { type ZplRotation } from './rotation';
 import { RotationSelect } from '../components/Properties/RotationSelect';
+import { NumberInput } from '../components/Properties/NumberInput';
 
 const ean13Spec: ContentSpec = { charset: '0-9', maxLength: 12 };
 
@@ -59,28 +60,20 @@ export const ean13: ObjectTypeDefinition<Ean13Props> = {
           />
         </div>
 
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>{t.registry.ean13.height}</label>
-          <input
-            type="number"
-            className={inputCls}
-            value={p.height}
-            min={1}
-            onChange={(e) => onChange({ height: Number(e.target.value) })}
-          />
-        </div>
+        <NumberInput
+          label={t.registry.ean13.height}
+          value={p.height}
+          min={1}
+          onChange={(height) => onChange({ height })}
+        />
 
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>{t.registry.ean13.moduleWidth}</label>
-          <input
-            type="number"
-            className={inputCls}
-            value={p.moduleWidth}
-            min={1}
-            max={10}
-            onChange={(e) => onChange({ moduleWidth: Number(e.target.value) })}
-          />
-        </div>
+        <NumberInput
+          label={t.registry.ean13.moduleWidth}
+          value={p.moduleWidth}
+          min={1}
+          max={10}
+          onChange={(moduleWidth) => onChange({ moduleWidth })}
+        />
 
         <label className="flex items-center gap-2 cursor-pointer">
           <input
diff --git a/src/registry/micropdf417.tsx b/src/registry/micropdf417.tsx
index 9659a5dc..3e41218b 100644
--- a/src/registry/micropdf417.tsx
+++ b/src/registry/micropdf417.tsx
@@ -5,6 +5,7 @@ import { fieldPos, fdField } from "./zplHelpers";
 import { commitStacked2DTransform } from "./transformHelpers";
 import { type ZplRotation } from "./rotation";
 import { RotationSelect } from "../components/Properties/RotationSelect";
+import { NumberInput } from "../components/Properties/NumberInput";
 
 export interface MicroPdf417Props {
   content: string;
@@ -58,43 +59,29 @@ export const micropdf417: ObjectTypeDefinition<MicroPdf417Props> = {
         </div>
 
         <div className="grid grid-cols-2 gap-2">
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{loc.rowHeight}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.rowHeight}
-              min={1}
-              onChange={(e) => onChange({ rowHeight: Number(e.target.value) })}
-            />
-          </div>
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{loc.moduleWidth}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.moduleWidth}
-              min={1}
-              max={10}
-              onChange={(e) =>
-                onChange({ moduleWidth: Number(e.target.value) })
-              }
-            />
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>Mode</label>
-          <input
-            type="number"
-            className={inputCls}
-            value={p.mode}
-            min={0}
-            max={33}
-            onChange={(e) => onChange({ mode: Number(e.target.value) })}
+          <NumberInput
+            label={loc.rowHeight}
+            value={p.rowHeight}
+            min={1}
+            onChange={(rowHeight) => onChange({ rowHeight })}
+          />
+          <NumberInput
+            label={loc.moduleWidth}
+            value={p.moduleWidth}
+            min={1}
+            max={10}
+            onChange={(moduleWidth) => onChange({ moduleWidth })}
           />
         </div>
 
+        <NumberInput
+          label="Mode"
+          value={p.mode}
+          min={0}
+          max={33}
+          onChange={(mode) => onChange({ mode })}
+        />
+
         <RotationSelect value={p.rotation} onChange={(rotation) => onChange({ rotation })} />
       </div>
     );
diff --git a/src/registry/pdf417.tsx b/src/registry/pdf417.tsx
index cab3fad9..4364e992 100644
--- a/src/registry/pdf417.tsx
+++ b/src/registry/pdf417.tsx
@@ -5,6 +5,7 @@ import { fieldPos, fdField } from "./zplHelpers";
 import { commitStacked2DTransform } from "./transformHelpers";
 import { type ZplRotation } from "./rotation";
 import { RotationSelect } from "../components/Properties/RotationSelect";
+import { NumberInput } from "../components/Properties/NumberInput";
 
 export interface Pdf417Props {
   content: string;
@@ -59,56 +60,36 @@ export const pdf417: ObjectTypeDefinition<Pdf417Props> = {
         </div>
 
         <div className="grid grid-cols-2 gap-2">
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{loc.rowHeight}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.rowHeight}
-              min={1}
-              onChange={(e) => onChange({ rowHeight: Number(e.target.value) })}
-            />
-          </div>
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{loc.moduleWidth}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.moduleWidth}
-              min={1}
-              max={10}
-              onChange={(e) =>
-                onChange({ moduleWidth: Number(e.target.value) })
-              }
-            />
-          </div>
+          <NumberInput
+            label={loc.rowHeight}
+            value={p.rowHeight}
+            min={1}
+            onChange={(rowHeight) => onChange({ rowHeight })}
+          />
+          <NumberInput
+            label={loc.moduleWidth}
+            value={p.moduleWidth}
+            min={1}
+            max={10}
+            onChange={(moduleWidth) => onChange({ moduleWidth })}
+          />
         </div>
 
         <div className="grid grid-cols-2 gap-2">
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{loc.securityLevel}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.securityLevel}
-              min={0}
-              max={8}
-              onChange={(e) =>
-                onChange({ securityLevel: Number(e.target.value) })
-              }
-            />
-          </div>
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{loc.columns}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.columns}
-              min={0}
-              max={30}
-              onChange={(e) => onChange({ columns: Number(e.target.value) })}
-            />
-          </div>
+          <NumberInput
+            label={loc.securityLevel}
+            value={p.securityLevel}
+            min={0}
+            max={8}
+            onChange={(securityLevel) => onChange({ securityLevel })}
+          />
+          <NumberInput
+            label={loc.columns}
+            value={p.columns}
+            min={0}
+            max={30}
+            onChange={(columns) => onChange({ columns })}
+          />
         </div>
 
         <RotationSelect value={p.rotation} onChange={(rotation) => onChange({ rotation })} />
diff --git a/src/registry/qrcode.tsx b/src/registry/qrcode.tsx
index 4d2fb81b..8979c807 100644
--- a/src/registry/qrcode.tsx
+++ b/src/registry/qrcode.tsx
@@ -5,6 +5,7 @@ import { fieldPos, fdField } from './zplHelpers';
 import { clamp } from './transformHelpers';
 import { type ZplRotation } from './rotation';
 import { RotationSelect } from '../components/Properties/RotationSelect';
+import { NumberInput } from '../components/Properties/NumberInput';
 
 export interface QrCodeProps {
   content: string;
@@ -63,17 +64,13 @@ export const qrcode: ObjectTypeDefinition<QrCodeProps> = {
           />
         </div>
 
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>{t.registry.qrcode.magnification}</label>
-          <input
-            type="number"
-            className={inputCls}
-            value={p.magnification}
-            min={1}
-            max={10}
-            onChange={(e) => onChange({ magnification: Number(e.target.value) })}
-          />
-        </div>
+        <NumberInput
+          label={t.registry.qrcode.magnification}
+          value={p.magnification}
+          min={1}
+          max={10}
+          onChange={(magnification) => onChange({ magnification })}
+        />
 
         <div className="flex flex-col gap-1">
           <label className={labelCls}>{t.registry.qrcode.errorCorrection}</label>

From 200add22f87cb89a3a375ea1abd6411abe62e077 Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Thu, 7 May 2026 23:52:08 +0200
Subject: [PATCH 7/8] refactor(registry): NumberInput rollout in shapes,
 gs1databar, text/serial extras

Sweeps the remaining number inputs onto the shared NumberInput
primitive: box/ellipse/circle/line shape registries (which were already
on clampMin inline) plus gs1databar moduleWidth, text blockWidth/
blockLines/blockLineSpacing, and serial increment. Image widthDots
keeps its custom step={8} handler; gs1databar segments keeps its even-
snapping logic. The simple 1D barcodes (ean8, upca, upce, code93, etc.)
already route through barcode1d so they pick up the change for free.
---
 src/registry/box.tsx        | 68 ++++++++++++++-----------------------
 src/registry/circle.tsx     | 34 +++++++------------
 src/registry/ellipse.tsx    | 50 +++++++++++----------------
 src/registry/gs1databar.tsx | 19 +++++------
 src/registry/line.tsx       | 50 +++++++++++----------------
 src/registry/serial.tsx     | 16 ++++-----
 src/registry/text.tsx       | 46 ++++++++++---------------
 7 files changed, 108 insertions(+), 175 deletions(-)

diff --git a/src/registry/box.tsx b/src/registry/box.tsx
index 1c56847c..0dd71414 100644
--- a/src/registry/box.tsx
+++ b/src/registry/box.tsx
@@ -3,7 +3,7 @@ import { useT } from '../lib/useT';
 import { inputCls, labelCls } from '../components/Properties/styles';
 import { fieldPos } from './zplHelpers';
 import { commitWidthHeightTransform } from './transformHelpers';
-import { clampMin } from '../lib/inputParse';
+import { NumberInput } from '../components/Properties/NumberInput';
 
 export interface BoxProps {
   width: number;
@@ -49,26 +49,18 @@ export const box: ObjectTypeDefinition<BoxProps> = {
     return (
       <div className="flex flex-col gap-3">
         <div className="grid grid-cols-2 gap-2">
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{t.registry.box.width}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.width}
-              min={1}
-              onChange={(e) => onChange({ width: clampMin(e.target.value, 1) })}
-            />
-          </div>
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{t.registry.box.height}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.height}
-              min={1}
-              onChange={(e) => onChange({ height: clampMin(e.target.value, 1) })}
-            />
-          </div>
+          <NumberInput
+            label={t.registry.box.width}
+            value={p.width}
+            min={1}
+            onChange={(width) => onChange({ width })}
+          />
+          <NumberInput
+            label={t.registry.box.height}
+            value={p.height}
+            min={1}
+            onChange={(height) => onChange({ height })}
+          />
         </div>
 
         <label className="flex items-center gap-2 cursor-pointer">
@@ -82,16 +74,12 @@ export const box: ObjectTypeDefinition<BoxProps> = {
         </label>
 
         {!p.filled && (
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{t.registry.box.thickness}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.thickness}
-              min={1}
-              onChange={(e) => onChange({ thickness: clampMin(e.target.value, 1) })}
-            />
-          </div>
+          <NumberInput
+            label={t.registry.box.thickness}
+            value={p.thickness}
+            min={1}
+            onChange={(thickness) => onChange({ thickness })}
+          />
         )}
 
         <div className="grid grid-cols-2 gap-2">
@@ -106,17 +94,13 @@ export const box: ObjectTypeDefinition<BoxProps> = {
               <option value="W">{t.registry.box.colorW}</option>
             </select>
           </div>
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{t.registry.box.rounding}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.rounding}
-              min={0}
-              max={8}
-              onChange={(e) => onChange({ rounding: clampMin(e.target.value, 0) })}
-            />
-          </div>
+          <NumberInput
+            label={t.registry.box.rounding}
+            value={p.rounding}
+            min={0}
+            max={8}
+            onChange={(rounding) => onChange({ rounding })}
+          />
         </div>
 
         <label className="flex items-center gap-2 cursor-pointer">
diff --git a/src/registry/circle.tsx b/src/registry/circle.tsx
index e5748502..ecf2e0d6 100644
--- a/src/registry/circle.tsx
+++ b/src/registry/circle.tsx
@@ -1,7 +1,7 @@
 import type { ObjectTypeDefinition } from '../types/ObjectType';
 import { useT } from '../lib/useT';
-import { clampMin } from '../lib/inputParse';
 import { inputCls, labelCls } from '../components/Properties/styles';
+import { NumberInput } from '../components/Properties/NumberInput';
 import { fieldPos } from './zplHelpers';
 
 export interface CircleProps {
@@ -46,16 +46,12 @@ export const circle: ObjectTypeDefinition<CircleProps> = {
     const p = obj.props;
     return (
       <div className="flex flex-col gap-3">
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>{t.registry.circle.diameter}</label>
-          <input
-            type="number"
-            className={inputCls}
-            value={p.diameter}
-            min={1}
-            onChange={(e) => onChange({ diameter: clampMin(e.target.value, 1) })}
-          />
-        </div>
+        <NumberInput
+          label={t.registry.circle.diameter}
+          value={p.diameter}
+          min={1}
+          onChange={(diameter) => onChange({ diameter })}
+        />
 
         <label className="flex items-center gap-2 cursor-pointer">
           <input
@@ -68,16 +64,12 @@ export const circle: ObjectTypeDefinition<CircleProps> = {
         </label>
 
         {!p.filled && (
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{t.registry.circle.thickness}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.thickness}
-              min={1}
-              onChange={(e) => onChange({ thickness: clampMin(e.target.value, 1) })}
-            />
-          </div>
+          <NumberInput
+            label={t.registry.circle.thickness}
+            value={p.thickness}
+            min={1}
+            onChange={(thickness) => onChange({ thickness })}
+          />
         )}
 
         <div className="flex flex-col gap-1">
diff --git a/src/registry/ellipse.tsx b/src/registry/ellipse.tsx
index e5835c1e..e0489130 100644
--- a/src/registry/ellipse.tsx
+++ b/src/registry/ellipse.tsx
@@ -1,9 +1,9 @@
 import type { ObjectTypeDefinition } from '../types/ObjectType';
 import { useT } from '../lib/useT';
 import { inputCls, labelCls } from '../components/Properties/styles';
+import { NumberInput } from '../components/Properties/NumberInput';
 import { fieldPos } from './zplHelpers';
 import { commitWidthHeightTransform } from './transformHelpers';
-import { clampMin } from '../lib/inputParse';
 
 export interface EllipseProps {
   width: number;
@@ -45,26 +45,18 @@ export const ellipse: ObjectTypeDefinition<EllipseProps> = {
     return (
       <div className="flex flex-col gap-3">
         <div className="grid grid-cols-2 gap-2">
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{t.registry.ellipse.width}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.width}
-              min={1}
-              onChange={(e) => onChange({ width: clampMin(e.target.value, 1) })}
-            />
-          </div>
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{t.registry.ellipse.height}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.height}
-              min={1}
-              onChange={(e) => onChange({ height: clampMin(e.target.value, 1) })}
-            />
-          </div>
+          <NumberInput
+            label={t.registry.ellipse.width}
+            value={p.width}
+            min={1}
+            onChange={(width) => onChange({ width })}
+          />
+          <NumberInput
+            label={t.registry.ellipse.height}
+            value={p.height}
+            min={1}
+            onChange={(height) => onChange({ height })}
+          />
         </div>
 
         <label className="flex items-center gap-2 cursor-pointer">
@@ -78,16 +70,12 @@ export const ellipse: ObjectTypeDefinition<EllipseProps> = {
         </label>
 
         {!p.filled && (
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{t.registry.ellipse.thickness}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.thickness}
-              min={1}
-              onChange={(e) => onChange({ thickness: clampMin(e.target.value, 1) })}
-            />
-          </div>
+          <NumberInput
+            label={t.registry.ellipse.thickness}
+            value={p.thickness}
+            min={1}
+            onChange={(thickness) => onChange({ thickness })}
+          />
         )}
 
         <div className="flex flex-col gap-1">
diff --git a/src/registry/gs1databar.tsx b/src/registry/gs1databar.tsx
index ade94d8e..1645b225 100644
--- a/src/registry/gs1databar.tsx
+++ b/src/registry/gs1databar.tsx
@@ -5,6 +5,7 @@ import { fieldPos, fdField } from './zplHelpers';
 import { filterContent } from './contentSpec';
 import { type ZplRotation } from './rotation';
 import { RotationSelect } from '../components/Properties/RotationSelect';
+import { NumberInput } from '../components/Properties/NumberInput';
 import {
   GS1_DATABAR_DEFAULT_SEGMENTS,
   GS1_DATABAR_EXPANDED_SYMBOLOGIES,
@@ -77,17 +78,13 @@ export const gs1databar: ObjectTypeDefinition<Gs1DatabarProps> = {
           />
         </div>
 
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>{loc.moduleWidth}</label>
-          <input
-            type="number"
-            className={inputCls}
-            value={p.moduleWidth}
-            min={1}
-            max={10}
-            onChange={(e) => onChange({ moduleWidth: Number(e.target.value) })}
-          />
-        </div>
+        <NumberInput
+          label={loc.moduleWidth}
+          value={p.moduleWidth}
+          min={1}
+          max={10}
+          onChange={(moduleWidth) => onChange({ moduleWidth })}
+        />
 
         <div className="flex flex-col gap-1">
           <label className={labelCls}>{loc.symbology}</label>
diff --git a/src/registry/line.tsx b/src/registry/line.tsx
index 03fc9e3b..15bb5826 100644
--- a/src/registry/line.tsx
+++ b/src/registry/line.tsx
@@ -1,7 +1,7 @@
 import type { ObjectTypeDefinition } from '../types/ObjectType';
 import { useT } from '../lib/useT';
-import { clampMin } from '../lib/inputParse';
 import { inputCls, labelCls } from '../components/Properties/styles';
+import { NumberInput } from '../components/Properties/NumberInput';
 
 export interface LineProps {
   /** Angle in degrees, 0 = rightward horizontal, clockwise positive (screen coords). */
@@ -64,40 +64,28 @@ export const line: ObjectTypeDefinition<LineProps> = {
     return (
       <div className="flex flex-col gap-3">
         <div className="grid grid-cols-2 gap-2">
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{t.registry.line.length}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.length}
-              min={1}
-              onChange={(e) => onChange({ length: clampMin(e.target.value, 1) })}
-            />
-          </div>
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{t.registry.line.angle}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.angle}
-              min={-359}
-              max={359}
-              onChange={(e) => onChange({ angle: Number(e.target.value) })}
-            />
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-1">
-          <label className={labelCls}>{t.registry.line.thickness}</label>
-          <input
-            type="number"
-            className={inputCls}
-            value={p.thickness}
+          <NumberInput
+            label={t.registry.line.length}
+            value={p.length}
             min={1}
-            onChange={(e) => onChange({ thickness: clampMin(e.target.value, 1) })}
+            onChange={(length) => onChange({ length })}
+          />
+          <NumberInput
+            label={t.registry.line.angle}
+            value={p.angle}
+            min={-359}
+            max={359}
+            onChange={(angle) => onChange({ angle })}
           />
         </div>
 
+        <NumberInput
+          label={t.registry.line.thickness}
+          value={p.thickness}
+          min={1}
+          onChange={(thickness) => onChange({ thickness })}
+        />
+
         <div className="flex flex-col gap-1">
           <label className={labelCls}>{t.registry.line.color}</label>
           <select
diff --git a/src/registry/serial.tsx b/src/registry/serial.tsx
index b81231d5..43536aeb 100644
--- a/src/registry/serial.tsx
+++ b/src/registry/serial.tsx
@@ -56,16 +56,12 @@ export const serial: ObjectTypeDefinition<SerialProps> = {
               onChange={(e) => onChange({ content: filterContent(e.target.value, serialSpec) })}
             />
           </div>
-          <div className="flex flex-col gap-1">
-            <label className={labelCls}>{t.registry.serial.increment}</label>
-            <input
-              type="number"
-              className={inputCls}
-              value={p.increment}
-              min={1}
-              onChange={(e) => onChange({ increment: Number(e.target.value) })}
-            />
-          </div>
+          <NumberInput
+            label={t.registry.serial.increment}
+            value={p.increment}
+            min={1}
+            onChange={(increment) => onChange({ increment })}
+          />
         </div>
 
         <div className="grid grid-cols-2 gap-2">
diff --git a/src/registry/text.tsx b/src/registry/text.tsx
index e1fbce41..8f5650ca 100644
--- a/src/registry/text.tsx
+++ b/src/registry/text.tsx
@@ -179,26 +179,18 @@ export const text: ObjectTypeDefinition<TextProps> = {
         {!!p.blockWidth && (
           <>
             <div className="grid grid-cols-2 gap-2">
-              <div className="flex flex-col gap-1">
-                <label className={labelCls}>{t.registry.text.blockWidth}</label>
-                <input
-                  type="number"
-                  className={inputCls}
-                  value={p.blockWidth}
-                  min={1}
-                  onChange={(e) => onChange({ blockWidth: Number(e.target.value) })}
-                />
-              </div>
-              <div className="flex flex-col gap-1">
-                <label className={labelCls}>{t.registry.text.blockLines}</label>
-                <input
-                  type="number"
-                  className={inputCls}
-                  value={p.blockLines ?? 1}
-                  min={1}
-                  onChange={(e) => onChange({ blockLines: Number(e.target.value) })}
-                />
-              </div>
+              <NumberInput
+                label={t.registry.text.blockWidth}
+                value={p.blockWidth}
+                min={1}
+                onChange={(blockWidth) => onChange({ blockWidth })}
+              />
+              <NumberInput
+                label={t.registry.text.blockLines}
+                value={p.blockLines ?? 1}
+                min={1}
+                onChange={(blockLines) => onChange({ blockLines })}
+              />
             </div>
             <div className="grid grid-cols-2 gap-2">
               <div className="flex flex-col gap-1">
@@ -214,15 +206,11 @@ export const text: ObjectTypeDefinition<TextProps> = {
                   <option value="J">{t.registry.text.justifyJ}</option>
                 </select>
               </div>
-              <div className="flex flex-col gap-1">
-                <label className={labelCls}>{t.registry.text.blockLineSpacing}</label>
-                <input
-                  type="number"
-                  className={inputCls}
-                  value={p.blockLineSpacing ?? 0}
-                  onChange={(e) => onChange({ blockLineSpacing: Number(e.target.value) })}
-                />
-              </div>
+              <NumberInput
+                label={t.registry.text.blockLineSpacing}
+                value={p.blockLineSpacing ?? 0}
+                onChange={(blockLineSpacing) => onChange({ blockLineSpacing })}
+              />
             </div>
           </>
         )}

From b6b4454f09874c917398378c9ca6417708495d08 Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Fri, 8 May 2026 00:03:05 +0200
Subject: [PATCH 8/8] fix(NumberInput): enforce max and drop NaN before it
 reaches the store

Gemini surfaced two corner cases in the NumberInput change handler:
`max` was only an HTML hint, so the state could exceed it via paste/
keyboard, and a non-numeric paste with no `min` set would push NaN
into the model. Tightens the handler so neither leaks into the store.
---
 src/components/Properties/NumberInput.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Properties/NumberInput.tsx b/src/components/Properties/NumberInput.tsx
index 3b86a581..53654963 100644
--- a/src/components/Properties/NumberInput.tsx
+++ b/src/components/Properties/NumberInput.tsx
@@ -40,10 +40,13 @@ export function NumberInput({
         disabled={disabled}
         readOnly={readOnly}
         onChange={(e) => {
-          const next =
-            min !== undefined
-              ? clampMin(e.target.value, min)
-              : Number(e.target.value);
+          const raw = e.target.value;
+          let next = min !== undefined ? clampMin(raw, min) : Number(raw);
+          // Drop NaN before it corrupts the store. clampMin already returns
+          // `min` for unparsable input, so this only matters when `min` is
+          // undefined and the user pastes a non-numeric string.
+          if (isNaN(next)) return;
+          if (max !== undefined && next > max) next = max;
           onChange(next);
         }}
       />