Merge pull request #109 from u8array/feat/printer-modal-tab3-sl-clock-mode

Feat/printer modal tab3 sl clock mode

Author: u8array

src/components/PrinterSettings/ClockAndTimeTab.tsx

@@ -4,28 +4,52 @@ import { useLabelStore } from "../../store/labelStore";
 import { inputCls, labelCls } from "../ui/formStyles";
 import {
   CLOCK_FORMAT_VALUES,
+  CLOCK_LANGUAGE_VALUES,
+  CLOCK_MODE_VALUES,
+  CLOCK_TOLERANCE_DEFAULT,
+  CLOCK_TOLERANCE_RANGE,
   isClockFormat,
+  isClockLanguage,
+  isClockMode,
   type ClockFormat,
+  type ClockLanguage,
+  type ClockMode,
 } from "../../types/ObjectType";
 import {
+  BoundedIntControl,
   ZplCommandLabel,
   ZplEnumSelect,
+  ZplEnumSubSelect,
   ZplField,
+  ZplSubField,
 } from "./zplFieldPrimitives";
 
 type LocClockTime = ReturnType<typeof useT>["printerSettings"]["clockTime"];
 
-/** Explicit value → locale-key map. `satisfies` makes both a
- *  missing enum-value entry (here) and a missing locale key (in
- *  the locale shape) compile errors — the earlier template-literal
- *  helper used an `as`-cast that bypassed the second direction. */
+/** Explicit value → locale-key maps for all three enums in this
+ *  tab. `satisfies` makes both a missing enum-value entry (here)
+ *  and a missing locale key (in the locale shape) compile errors. */
 const CLOCK_FORMAT_LABEL_KEYS = {
   '0': 'clockFormat0',
   '1': 'clockFormat1',
   '2': 'clockFormat2',
   '3': 'clockFormat3',
 } as const satisfies Record<ClockFormat, keyof LocClockTime>;
 
+const CLOCK_MODE_LABEL_KEYS = {
+  S: 'clockModeS',
+  T: 'clockModeT',
+  TOL: 'clockModeTOL',
+} as const satisfies Record<ClockMode, keyof LocClockTime>;
+
+const CLOCK_LANGUAGE_LABEL_KEYS = {
+  '1': 'clockLanguage1', '2': 'clockLanguage2', '3': 'clockLanguage3',
+  '4': 'clockLanguage4', '5': 'clockLanguage5', '6': 'clockLanguage6',
+  '7': 'clockLanguage7', '8': 'clockLanguage8', '9': 'clockLanguage9',
+  '10': 'clockLanguage10', '11': 'clockLanguage11', '12': 'clockLanguage12',
+  '13': 'clockLanguage13',
+} as const satisfies Record<ClockLanguage, keyof LocClockTime>;
+
 /** Tab 3 of the Printer Settings Modal — clock/time setup commands.
  *  All three live in the Setup-Script output (EEPROM-persistent),
  *  not the per-label ZPL block. ^ST is modelled as a static user-
@@ -37,6 +61,7 @@ export function ClockAndTimeTab() {
   const setLabelConfig = useLabelStore((s) => s.setLabelConfig);
   const loc = t.printerSettings.clockTime;
   const clockId = useId();
+  const modeId = useId();
 
   return (
     <div className="flex flex-col gap-4">
@@ -70,6 +95,65 @@ export function ClockAndTimeTab() {
         defaultLabel={t.printerSettings.defaultOption}
         optionLabel={(m) => loc[CLOCK_FORMAT_LABEL_KEYS[m]]}
       />
+
+      {/* All three ^SL inputs live under one parent tag — mode +
+          (conditional) tolerance share the first positional slot,
+          language is the second. ZplSubField keeps the per-row
+          labels without duplicating the ^SL command tag (same
+          pattern as ^KN name+description in IdentityTab and ^PR
+          triple in PrintQualityTab). */}
+      <ZplField>
+        <ZplCommandLabel text={loc.clockMode} command="^SL" htmlFor={modeId} />
+        <select
+          id={modeId}
+          className={inputCls}
+          value={label.clockMode ?? ""}
+          onChange={(e) => {
+            const v = e.target.value;
+            const nextMode = isClockMode(v) ? v : undefined;
+            // Schema's cross-field rule pairs `clockMode === 'TOL'`
+            // with a defined `clockTolerance` (and vice versa). Seed
+            // the default the moment the user picks TOL, and clear
+            // the tolerance the moment they leave TOL — without
+            // this the store would briefly hold an invalid combo
+            // (TOL without tolerance) which the schema rejects.
+            const nextTolerance = nextMode === 'TOL'
+              ? label.clockTolerance ?? CLOCK_TOLERANCE_DEFAULT
+              : undefined;
+            setLabelConfig({ clockMode: nextMode, clockTolerance: nextTolerance });
+          }}
+        >
+          <option value="">{t.printerSettings.defaultOption}</option>
+          {CLOCK_MODE_VALUES.map((m) => (
+            <option key={m} value={m}>{loc[CLOCK_MODE_LABEL_KEYS[m]]}</option>
+          ))}
+        </select>
+        {label.clockMode === 'TOL' && (
+          <ZplSubField label={loc.clockTolerance}>
+            {(id) => (
+              <BoundedIntControl
+                id={id}
+                min={CLOCK_TOLERANCE_RANGE.min}
+                max={CLOCK_TOLERANCE_RANGE.max}
+                value={label.clockTolerance}
+                onChange={(v) => setLabelConfig({ clockTolerance: v })}
+              />
+            )}
+          </ZplSubField>
+        )}
+        <ZplEnumSubSelect
+          label={loc.clockLanguage}
+          values={CLOCK_LANGUAGE_VALUES}
+          isValid={isClockLanguage}
+          value={label.clockLanguage}
+          onChange={(v) => setLabelConfig({ clockLanguage: v })}
+          defaultLabel={t.printerSettings.defaultOption}
+          optionLabel={(m) => `${m} – ${loc[CLOCK_LANGUAGE_LABEL_KEYS[m]]}`}
+        />
+        <span className={`${labelCls} normal-case tracking-normal text-muted/70`}>
+          {loc.clockSlPersistenceHint}
+        </span>
+      </ZplField>
     </div>
   );
 }

src/components/PrinterSettings/MediaFeedTab.tsx

@@ -1,6 +1,5 @@
 import { useT } from "../../lib/useT";
 import { useLabelStore } from "../../store/labelStore";
-import { inputCls } from "../ui/formStyles";
 import {
   MAX_LABEL_LENGTH_RANGE,
   MEDIA_FEED_VALUES,
@@ -21,8 +20,8 @@ import {
   ZplCheckbox,
   ZplCommandLabel,
   ZplEnumSelect,
+  ZplEnumSubSelect,
   ZplField,
-  ZplSubField,
 } from "./zplFieldPrimitives";
 
 type LocMediaFeed = ReturnType<typeof useT>["printerSettings"]["mediaFeed"];
@@ -123,19 +122,23 @@ export function MediaFeedTab() {
       <ZplField>
         <ZplCommandLabel text={loc.mediaFeedHeading} command="^MF" />
         <div className="grid grid-cols-2 gap-2">
-          <FeedSubSelect
+          <ZplEnumSubSelect
             label={loc.mediaFeedPowerUp}
+            values={MEDIA_FEED_VALUES}
+            isValid={isMediaFeedMode}
             value={label.mediaFeedPowerUp}
             onChange={(v) => setLabelConfig({ mediaFeedPowerUp: v })}
             defaultLabel={t.printerSettings.defaultOption}
-            optionLabel={(m) => loc[FEED_LABEL_KEYS[m]]}
+            optionLabel={(m) => `${m} ${loc[FEED_LABEL_KEYS[m]]}`}
           />
-          <FeedSubSelect
+          <ZplEnumSubSelect
             label={loc.mediaFeedHeadClose}
+            values={MEDIA_FEED_VALUES}
+            isValid={isMediaFeedMode}
             value={label.mediaFeedHeadClose}
             onChange={(v) => setLabelConfig({ mediaFeedHeadClose: v })}
             defaultLabel={t.printerSettings.defaultOption}
-            optionLabel={(m) => loc[FEED_LABEL_KEYS[m]]}
+            optionLabel={(m) => `${m} ${loc[FEED_LABEL_KEYS[m]]}`}
           />
         </div>
       </ZplField>
@@ -150,43 +153,3 @@ export function MediaFeedTab() {
   );
 }
 
-/** Inner sub-select for the two ^MF positional params. Wraps a
- *  bare `<select>` in ZplSubField so the parent ^MF tag stays the
- *  single command label for both slots. ZplEnumSelect would render
- *  a redundant tag spot here. */
-function FeedSubSelect({
-  label,
-  value,
-  onChange,
-  defaultLabel,
-  optionLabel,
-}: {
-  label: string;
-  value: MediaFeedMode | undefined;
-  onChange: (v: MediaFeedMode | undefined) => void;
-  defaultLabel: string;
-  optionLabel: (m: MediaFeedMode) => string;
-}) {
-  return (
-    <ZplSubField label={label}>
-      {(id) => (
-        <select
-          id={id}
-          className={inputCls}
-          value={value ?? ""}
-          onChange={(e) => {
-            const raw = e.target.value;
-            onChange(isMediaFeedMode(raw) ? raw : undefined);
-          }}
-        >
-          <option value="">{defaultLabel}</option>
-          {MEDIA_FEED_VALUES.map((m) => (
-            <option key={m} value={m}>
-              {m} {optionLabel(m)}
-            </option>
-          ))}
-        </select>
-      )}
-    </ZplSubField>
-  );
-}

src/components/PrinterSettings/zplFieldPrimitives.tsx

@@ -128,6 +128,53 @@ export function BoundedIntControl({
   );
 }
 
+/** Inner enum-backed select for grids that share one parent ZPL
+ *  tag across multiple positional params (^MF pair, ^SL mode +
+ *  language). Same input shape as `ZplEnumSelect` minus the
+ *  `command` tag — the tag lives at the parent `ZplField` so
+ *  duplicating it on each sub-row would visually suggest two
+ *  separate commands. */
+export function ZplEnumSubSelect<T extends string>({
+  label,
+  values,
+  isValid,
+  value,
+  onChange,
+  defaultLabel,
+  optionLabel,
+}: {
+  label: string;
+  values: readonly T[];
+  isValid: (v: string) => v is T;
+  value: T | undefined;
+  onChange: (next: T | undefined) => void;
+  defaultLabel: string;
+  optionLabel: (v: T) => string;
+}) {
+  return (
+    <ZplSubField label={label}>
+      {(id) => (
+        <select
+          id={id}
+          className={inputCls}
+          value={value ?? ""}
+          onChange={(e) => {
+            const raw = e.target.value;
+            onChange(isValid(raw) ? raw : undefined);
+          }}
+        >
+          <option value="">{defaultLabel}</option>
+          {values.map((v) => (
+            <option key={v} value={v}>
+              {optionLabel(v)}
+            </option>
+          ))}
+        </select>
+      )}
+    </ZplSubField>
+  );
+}
+
 /** Generic enum-backed select row: label + ZPL-tag header + select
  *  with a leading "default" placeholder. Replaces the hand-rolled
  *  select scaffolding in MediaFeedTab and PrintQualityTab so the

src/lib/zplParser.ts

@@ -1,5 +1,6 @@
 import type { CustomFontMapping, LabelConfig } from "../types/ObjectType";
 import {
+  CLOCK_TOLERANCE_RANGE,
   DARKNESS_INSTANT_RANGE,
   DARKNESS_PERMANENT_RANGE,
   HEAD_TEST_INTERVAL_RANGE,
@@ -8,6 +9,7 @@ import {
   SPEED_RANGE,
   TEAR_OFF_ADJUST_RANGE,
   isClockFormat,
+  isClockLanguage,
   isMediaFeedMode,
   isMediaMode,
   isMediaTracking,
@@ -2066,9 +2068,36 @@ export function parseZPL(zpl: string, dpmm = 8): ParsedZPL {
         labelConfig.printerDescription = desc;
       }
     },
-    // ^SL belongs in Tab 3 Clock & Time (Mode S/T + Language
-    // 1-13), not Identity — handler will land with that follow-
-    // up PR. See memory:project_ticket_sl_clock_formatting.
+    // ^SL `a`,`b` — Set Mode and Language for ^FC clock fields.
+    // The `a` slot accepts three shapes: 'S' (Start-Time), 'T'
+    // (Time-Now), or numeric 1..999 (Time-Now with tolerance
+    // seconds). The schema models the three shapes as two
+    // fields (clockMode enum + clockTolerance numeric); the
+    // parser fans the wire value out into both.
+    SL(p) {
+      const a = strParam(p[0]);
+      if (a === "S" || a === "T") {
+        labelConfig.clockMode = a;
+        // Clear any tolerance left over from a previous ^SL parse —
+        // schema's cross-field rule forbids `tolerance && mode !== 'TOL'`,
+        // and the parser writes raw values without re-running the
+        // schema, so a stale tolerance from an earlier ^SL60,1 would
+        // make the persisted state un-saveable.
+        labelConfig.clockTolerance = undefined;
+      } else {
+        const tol = inRange(parseIntOrUndef(a), CLOCK_TOLERANCE_RANGE);
+        if (tol !== undefined) {
+          labelConfig.clockMode = "TOL";
+          labelConfig.clockTolerance = tol;
+        }
+      }
+      // Language only when the mode parse landed — orphan language
+      // (mode invalid, b valid) would be write-only state (emit
+      // gated on mode anchor, parser would silently re-drop).
+      if (labelConfig.clockMode === undefined) return;
+      const b = strParam(p[1]);
+      if (isClockLanguage(b)) labelConfig.clockLanguage = b;
+    },
 
     // ^CW {alias},{path} — register an alias for a printer-resident font.
     // Subsequent ^A{alias} fields resolve to {path} via the fontAliases