From 0a4fe2a268565f67460d99c08c4a3fa82a23f9d9 Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Sun, 24 May 2026 14:05:33 +0200
Subject: [PATCH 1/3] =?UTF-8?q?feat(zpl):=20^FC=20field=20clock=20?=
 =?UTF-8?q?=E2=80=94=20parser=20+=20generator=20+=20resolve?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds round-trip support for ZPL's `^FC` directive that lets a single
`^FD` payload reference printer-RTC values inline. ZPL ground form:

  ^XA
  ^FO50,50^A0N,30,30^FDDate %d/%m/%Y at %H:%M^FS
  ^XZ

Prints "Date 24/05/2026 at 09:07" using the printer's clock. The
`%`, `{`, `#` chars before a token letter are the dispatch chars set
via `^FC<date>,<time>,<tertiary>` (defaults).

Stored in our model as `«clock:T»` markers in `props.content` —
same `«…»` bracket family as the `«name»` variable markers from the
^FE feature, dispatched at resolve time by the `clock:` prefix.

Three layers:

  - lib/fcTemplate.ts: clock primitives (extract/resolve/tokens-to-
    markers / markers-to-tokens / pickClockChars). Tokens supported:
    Y / y / m / d / H / M / S / j. Julian day uses month-length
    summation so DST-spring-forward days don't round down by one.
    `markersToTokens` takes just the date char (firmware treats all
    three clock chars as the same RTC). `tokensToMarkers` guards
    against empty clock chars so malformed callers don't collapse
    to a `[]` char-class that silently matches nothing.
  - parser: tracks ^FC clock chars, scans ^FD for clock-char + token
    letter sequences, converts to `«clock:T»` markers after the ^FE
    FN-embed pass. Both ^FE embedChar and ^FC clockChars reset on
    every ^XA so multi-label streams don't leak format-scoped state.
  - generator: single tree walk collects both ^FE-template and ^FC-
    clock payloads, picks safe delimiter chars, emits ^FC only when
    ≠ defaults, leaves markers literal when no safe triple exists
    (same fail-safe as ^FE).

applyBindingToObject accepts an optional `now: Date` — lazy
allocation inside the clock branch so plain-text fields don't pay
for an unused Date construction. applyBindingToTree evaluates once
per tree pass and reuses across all leaves.

Schema-mode leaves `«clock:T»` markers literal (same intent as
`«name»` placeholders: show structure, not data).

28 new unit tests (fcTemplate primitives + parser/generator
roundtrip + binding integration with fixed `now` + DST Julian-day
edge cases + multi-label state-reset).
---
 docs/zpl-roadmap.md                   |   2 +-
 src/lib/fcTemplate.test.ts            | 130 +++++++++++++++++++
 src/lib/fcTemplate.ts                 | 178 ++++++++++++++++++++++++++
 src/lib/variableBinding.clock.test.ts |  51 ++++++++
 src/lib/variableBinding.ts            |  20 ++-
 src/lib/zplCommandSupport.ts          |   2 +-
 src/lib/zplGenerator.test.ts          |  49 +++++++
 src/lib/zplGenerator.ts               |  62 ++++++---
 src/lib/zplParser.ts                  |  50 ++++++--
 src/registry/zplHelpers.ts            |  22 ++--
 src/types/ObjectType.ts               |   7 +
 11 files changed, 532 insertions(+), 41 deletions(-)
 create mode 100644 src/lib/fcTemplate.test.ts
 create mode 100644 src/lib/fcTemplate.ts
 create mode 100644 src/lib/variableBinding.clock.test.ts

diff --git a/docs/zpl-roadmap.md b/docs/zpl-roadmap.md
index 11fb68a..01279c9 100644
--- a/docs/zpl-roadmap.md
+++ b/docs/zpl-roadmap.md
@@ -40,6 +40,7 @@ What's supported, what's next, what's planned.
 - [x] `^FN` — variable placeholder
 - [x] `^FV` — variable data
 - [x] `^FE` — field-number embed character
+- [x] `^FC` — field clock (date / time)
 - [x] `^BY` — barcode field default
 
 ### Text & fonts
@@ -143,7 +144,6 @@ Coming with a future native build.
 
 ### Real-time data
 
-- [ ] `^FC` — field clock (date / time)
 - [ ] `^SO` — RTC offset
 - [ ] `^ST` — set date & time
 
diff --git a/src/lib/fcTemplate.test.ts b/src/lib/fcTemplate.test.ts
new file mode 100644
index 0000000..5cfb53b
--- /dev/null
+++ b/src/lib/fcTemplate.test.ts
@@ -0,0 +1,130 @@
+import { describe, it, expect } from "vitest";
+import {
+  hasClockMarkers,
+  extractClockTokens,
+  resolveClockMarkers,
+  tokensToMarkers,
+  markersToTokens,
+  pickClockChars,
+  isDefaultClockChars,
+  DEFAULT_CLOCK_CHARS,
+} from "./fcTemplate";
+
+// Fixed reference date used across formatter tests so the assertions
+// stay stable regardless of when the suite runs. 2026-03-14 13:09:42
+// is also a non-zero-padded day/month so the padding assertions bite.
+const NOW = new Date(2026, 2, 14, 13, 9, 42);
+
+describe("hasClockMarkers", () => {
+  it("matches a single «clock:T» marker", () => {
+    expect(hasClockMarkers("Date: «clock:d»")).toBe(true);
+  });
+  it("ignores variable markers", () => {
+    expect(hasClockMarkers("«var:sku»")).toBe(false);
+  });
+});
+
+describe("extractClockTokens", () => {
+  it("preserves source order + duplicates", () => {
+    expect(extractClockTokens("«clock:d»/«clock:m»/«clock:Y» «clock:d»"))
+      .toEqual(["d", "m", "Y", "d"]);
+  });
+});
+
+describe("resolveClockMarkers", () => {
+  it("substitutes each known token with the formatted current value", () => {
+    expect(resolveClockMarkers("«clock:Y»-«clock:m»-«clock:d»", NOW))
+      .toBe("2026-03-14");
+  });
+  it("pads single-digit components", () => {
+    expect(resolveClockMarkers("«clock:H»:«clock:M»:«clock:S»", NOW))
+      .toBe("13:09:42");
+  });
+  it("leaves unknown tokens literal", () => {
+    expect(resolveClockMarkers("«clock:Q»", NOW)).toBe("«clock:Q»");
+  });
+});
+
+describe("tokensToMarkers", () => {
+  it("converts default-char sequences to markers", () => {
+    expect(tokensToMarkers("Date %d/%m/%Y", DEFAULT_CLOCK_CHARS))
+      .toBe("Date «clock:d»/«clock:m»/«clock:Y»");
+  });
+  it("respects custom clock chars", () => {
+    expect(tokensToMarkers("@d/@m/@Y", { date: "@", time: "!", tertiary: "$" }))
+      .toBe("«clock:d»/«clock:m»/«clock:Y»");
+  });
+  it("treats all three clock chars equivalently for token recognition", () => {
+    // Tokens after the time and tertiary chars also get recognised —
+    // matches Zebra firmware behaviour where all three draw from the
+    // same RTC pool.
+    expect(tokensToMarkers("%d{H#Y", DEFAULT_CLOCK_CHARS))
+      .toBe("«clock:d»«clock:H»«clock:Y»");
+  });
+  it("leaves unknown letters after clock chars untouched", () => {
+    // `%Z` is timezone in strftime but not in our TOKEN_FORMATTERS yet.
+    expect(tokensToMarkers("%Z", DEFAULT_CLOCK_CHARS)).toBe("%Z");
+  });
+});
+
+describe("markersToTokens", () => {
+  it("emits the date char + token letter for every marker", () => {
+    expect(markersToTokens("«clock:d»/«clock:m»/«clock:Y»", DEFAULT_CLOCK_CHARS.date))
+      .toBe("%d/%m/%Y");
+  });
+  it("uses the supplied date char for all tokens", () => {
+    expect(markersToTokens("«clock:H»:«clock:M»", "@")).toBe("@H:@M");
+  });
+  it("leaves unknown token letters as literal markers", () => {
+    expect(markersToTokens("«clock:Q»", "%")).toBe("«clock:Q»");
+  });
+});
+
+describe("pickClockChars", () => {
+  it("returns defaults when no payload clashes", () => {
+    expect(pickClockChars(["plain text"])).toEqual(DEFAULT_CLOCK_CHARS);
+  });
+  it("falls back to alternates when any default appears in payloads", () => {
+    const r = pickClockChars(["100% match"]);
+    expect(r).not.toBeNull();
+    expect(r!.date).not.toBe("%");
+  });
+  it("returns null when every candidate for one slot clashes", () => {
+    // Saturate the date-candidate list — should bail.
+    expect(pickClockChars(["%$*+="])).toBeNull();
+  });
+});
+
+describe("Julian day formatter", () => {
+  it("treats Jan 1 as day 1", () => {
+    expect(resolveClockMarkers("«clock:j»", new Date(2026, 0, 1))).toBe("001");
+  });
+  it("treats Dec 31 of a non-leap year as 365", () => {
+    expect(resolveClockMarkers("«clock:j»", new Date(2026, 11, 31))).toBe("365");
+  });
+  it("treats Dec 31 of a leap year as 366", () => {
+    expect(resolveClockMarkers("«clock:j»", new Date(2024, 11, 31))).toBe("366");
+  });
+  it("doesn't off-by-one on a DST-spring-forward day", () => {
+    // 2026-03-29 is DST switch in central Europe. Julian day is the
+    // 88th day of a non-leap year (31+28+29 = 88). A naive ms-diff
+    // would give 87 because the day is 23 hours long.
+    expect(resolveClockMarkers("«clock:j»", new Date(2026, 2, 29))).toBe("088");
+  });
+});
+
+describe("tokensToMarkers safety", () => {
+  it("returns the payload unchanged when every clock char is empty", () => {
+    expect(tokensToMarkers("Date %d/%m", { date: "", time: "", tertiary: "" }))
+      .toBe("Date %d/%m");
+  });
+});
+
+describe("isDefaultClockChars", () => {
+  it("identifies the default triple", () => {
+    expect(isDefaultClockChars(DEFAULT_CLOCK_CHARS)).toBe(true);
+  });
+  it("rejects any deviation", () => {
+    expect(isDefaultClockChars({ date: "@", time: "{", tertiary: "#" })).toBe(false);
+  });
+});
diff --git a/src/lib/fcTemplate.ts b/src/lib/fcTemplate.ts
new file mode 100644
index 0000000..334a031
--- /dev/null
+++ b/src/lib/fcTemplate.ts
@@ -0,0 +1,178 @@
+/**
+ * `^FC` (Field Clock) tells the printer to substitute its RTC into
+ * specific positions of `^FD` field data. The clock chars set via
+ * `^FC<a>,<b>,<c>` (defaults `% { #`) act as token prefixes; each
+ * clock-char immediately followed by a single action letter becomes
+ * a date/time substitution at print time.
+ *
+ * In our model we represent the substitutions as `«clock:T»` markers
+ * — same `«…»` bracket family as the variable markers, dispatched
+ * by the `clock:` prefix at resolve time. Stays inside the marker
+ * vocabulary the canvas already understands.
+ *
+ * Render-time preview pulls from `new Date()` so the canvas shows
+ * what the printer would substitute right now. The print-time value
+ * is the printer's RTC, not ours — they may drift; the editor's job
+ * is only to communicate the *shape* of the substitution.
+ */
+
+/** Subset of strftime-ish tokens Zebra firmware recognises after a
+ *  clock char. Lowercase keys; resolver maps each to a current-date
+ *  formatter. Extend as Zebra spec coverage grows; unknown tokens
+ *  stay literal in both directions. */
+const TOKEN_FORMATTERS: Record<string, (d: Date) => string> = {
+  Y: (d) => String(d.getFullYear()),
+  y: (d) => String(d.getFullYear() % 100).padStart(2, "0"),
+  m: (d) => String(d.getMonth() + 1).padStart(2, "0"),
+  d: (d) => String(d.getDate()).padStart(2, "0"),
+  H: (d) => String(d.getHours()).padStart(2, "0"),
+  M: (d) => String(d.getMinutes()).padStart(2, "0"),
+  S: (d) => String(d.getSeconds()).padStart(2, "0"),
+  j: (d) => {
+    // Sum month-lengths in local time so DST transitions can't cause
+    // an off-by-one mid-spring/fall — `(d - jan0) / 86400000` would
+    // be 23 or 25 hours short of an integer day on the transition.
+    const monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+    const y = d.getFullYear();
+    const leap = (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0;
+    let n = d.getDate();
+    for (let i = 0; i < d.getMonth(); i++) {
+      n += monthDays[i]!;
+      if (i === 1 && leap) n += 1;
+    }
+    return String(n).padStart(3, "0");
+  },
+};
+
+/** Token letters this module understands, paired with the flat
+ *  locale key (`t.app.<key>`) the UI's token-picker uses for the
+ *  human-readable label. Exported here so the picker stays in lock-
+ *  step with the formatters — adding a new TOKEN_FORMATTERS entry
+ *  requires a matching CLOCK_TOKEN_LABELS row (TS narrowing forces
+ *  it), which in turn requires a locale-key add. */
+export const CLOCK_TOKEN_LABELS = [
+  { token: "Y", labelKey: "clockYear4" },
+  { token: "y", labelKey: "clockYear2" },
+  { token: "m", labelKey: "clockMonth" },
+  { token: "d", labelKey: "clockDay" },
+  { token: "H", labelKey: "clockHour24" },
+  { token: "M", labelKey: "clockMinute" },
+  { token: "S", labelKey: "clockSecond" },
+  { token: "j", labelKey: "clockJulianDay" },
+] as const satisfies readonly { token: keyof typeof TOKEN_FORMATTERS; labelKey: string }[];
+
+/** ZPL `^FC` clock chars — primary (date), secondary (time), tertiary.
+ *  Zebra defaults are `% { #`. Our generator picks an alt triple when
+ *  any default clashes with literal payload text. */
+export interface ClockChars {
+  date: string;
+  time: string;
+  tertiary: string;
+}
+
+export const DEFAULT_CLOCK_CHARS: ClockChars = { date: "%", time: "{", tertiary: "#" };
+
+const CLOCK_BODY = /«clock:([A-Za-z])»/;
+const clockRe = () => /«clock:([A-Za-z])»/g;
+
+/** True when `content` carries at least one `«clock:T»` marker. */
+export function hasClockMarkers(content: string): boolean {
+  return CLOCK_BODY.test(content);
+}
+
+/** Return every clock token letter referenced in `content`, in source
+ *  order with duplicates preserved (caller dedupes). */
+export function extractClockTokens(content: string): string[] {
+  return [...content.matchAll(clockRe())]
+    .map((m) => m[1])
+    .filter((t): t is string => t !== undefined);
+}
+
+/** Replace every `«clock:T»` marker with the current-date formatter's
+ *  output. Unknown tokens fall through as the literal marker text so
+ *  the user sees what didn't resolve. */
+export function resolveClockMarkers(content: string, now: Date): string {
+  return content.replace(clockRe(), (full, token: string) => {
+    const fmt = TOKEN_FORMATTERS[token];
+    return fmt ? fmt(now) : full;
+  });
+}
+
+/**
+ * Convert a ZPL `^FD` payload containing clock tokens (e.g. `%d/%m/%Y`)
+ * into our `«clock:T»` marker form. Only sequences where the clock
+ * char is immediately followed by a known TOKEN_FORMATTERS letter are
+ * converted — literals like `%foo` stay untouched.
+ *
+ * `chars` is whatever the most recent `^FC` set; the three chars are
+ * checked in order so an alternate set like `^FC@,!,~` works the same
+ * as defaults. Currently treats all three chars equivalently; Zebra's
+ * docs distinguish primary/secondary/tertiary for which RTC field they
+ * draw from, but in practice all behave as "the printer's now" so a
+ * single dispatch table is enough.
+ */
+export function tokensToMarkers(payload: string, chars: ClockChars): string {
+  // Defensive: drop empty / invalid chars so a `^FC,,` (all empty)
+  // doesn't collapse to a `[]` char-class that silently matches
+  // nothing. Valid input always yields three non-empty chars; this
+  // guard catches malformed callers (hand-edited state, future
+  // refactors) without crashing.
+  const escaped = [chars.date, chars.time, chars.tertiary]
+    .filter((c) => c.length > 0)
+    .map((c) => c.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+  if (escaped.length === 0) return payload;
+  const charClass = `[${escaped.join("")}]`;
+  const tokenLetters = Object.keys(TOKEN_FORMATTERS).join("");
+  const re = new RegExp(`${charClass}([${tokenLetters}])`, "g");
+  return payload.replace(re, (_full, token: string) => `«clock:${token}»`);
+}
+
+/**
+ * Convert our `«clock:T»` markers back to the ZPL clock-char + letter
+ * sequences. Takes only the date char (not the full ClockChars) —
+ * Zebra firmware treats all three clock chars as the same RTC, so we
+ * emit the date char for every marker. Signature reflects that.
+ */
+export function markersToTokens(content: string, dateChar: string): string {
+  return content.replace(clockRe(), (full, token: string) => {
+    if (!(token in TOKEN_FORMATTERS)) return full;
+    return `${dateChar}${token}`;
+  });
+}
+
+/**
+ * Pick a clock-char triple that doesn't clash with any literal payload
+ * text. Default `% { #` is preferred (matches ZPL's own default and
+ * needs no `^FC` directive). Each char is chosen independently from a
+ * ranked candidate list; returns `null` when every candidate for any
+ * slot clashes — caller should leave clock markers literal in the
+ * output to avoid producing ambiguous ZPL.
+ */
+const DATE_CANDIDATES = ["%", "$", "*", "+", "="] as const;
+const TIME_CANDIDATES = ["{", "<", "[", "(", "?"] as const;
+const TERT_CANDIDATES = ["#", "@", "|", "&", "!"] as const;
+
+function pickOne(candidates: readonly string[], payloads: readonly string[]): string | null {
+  for (const c of candidates) {
+    if (payloads.every((p) => !p.includes(c))) return c;
+  }
+  return null;
+}
+
+export function pickClockChars(payloads: readonly string[]): ClockChars | null {
+  const date = pickOne(DATE_CANDIDATES, payloads);
+  const time = pickOne(TIME_CANDIDATES, payloads);
+  const tertiary = pickOne(TERT_CANDIDATES, payloads);
+  if (!date || !time || !tertiary) return null;
+  return { date, time, tertiary };
+}
+
+/** True when the supplied chars equal Zebra defaults, in which case
+ *  no `^FC` directive is needed. */
+export function isDefaultClockChars(c: ClockChars): boolean {
+  return (
+    c.date === DEFAULT_CLOCK_CHARS.date &&
+    c.time === DEFAULT_CLOCK_CHARS.time &&
+    c.tertiary === DEFAULT_CLOCK_CHARS.tertiary
+  );
+}
diff --git a/src/lib/variableBinding.clock.test.ts b/src/lib/variableBinding.clock.test.ts
new file mode 100644
index 0000000..508ba52
--- /dev/null
+++ b/src/lib/variableBinding.clock.test.ts
@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { applyBindingToObject } from "./variableBinding";
+import type { LabelObject } from "../types/Group";
+
+const newTextObj = (content: string): LabelObject =>
+  ({
+    id: "t",
+    type: "text",
+    x: 0,
+    y: 0,
+    rotation: 0,
+    props: { content, fontHeight: 20, fontWidth: 0, rotation: "N" },
+  }) as unknown as LabelObject;
+
+// Fixed `now` so the assertions don't drift with wall-clock.
+const NOW = new Date(2026, 4, 24, 9, 7, 3); // 24 May 2026 09:07:03
+
+describe("applyBindingToObject — clock markers", () => {
+  it("substitutes clock markers using the supplied `now`", () => {
+    const obj = newTextObj("Printed «clock:d»/«clock:m»/«clock:Y» «clock:H»:«clock:M»");
+    const out = applyBindingToObject(obj, [], null, "preview", NOW);
+    expect((out as { props: { content: string } }).props.content)
+      .toBe("Printed 24/05/2026 09:07");
+  });
+
+  it("leaves clock markers literal in schema mode", () => {
+    const obj = newTextObj("Date «clock:d»");
+    const out = applyBindingToObject(obj, [], null, "schema", NOW);
+    expect((out as { props: { content: string } }).props.content)
+      .toBe("Date «clock:d»");
+  });
+
+  it("composes with variable markers (variable resolves first, then clock)", () => {
+    const obj = newTextObj("SKU «sku» on «clock:Y»-«clock:m»-«clock:d»");
+    const out = applyBindingToObject(
+      obj,
+      [{ id: "v", name: "sku", fnNumber: 1, defaultValue: "ABC-1" }],
+      null,
+      "preview",
+      NOW,
+    );
+    expect((out as { props: { content: string } }).props.content)
+      .toBe("SKU ABC-1 on 2026-05-24");
+  });
+
+  it("returns the same object reference when no markers are present", () => {
+    const obj = newTextObj("plain literal");
+    const out = applyBindingToObject(obj, [], null, "preview", NOW);
+    expect(out).toBe(obj);
+  });
+});
diff --git a/src/lib/variableBinding.ts b/src/lib/variableBinding.ts
index 5271cee..06d4955 100644
--- a/src/lib/variableBinding.ts
+++ b/src/lib/variableBinding.ts
@@ -1,6 +1,7 @@
 import type { LabelObject } from "../types/Group";
 import type { CsvMapping, Variable } from "../types/Variable";
 import { hasTemplateMarkers, resolveTemplateMarkers } from "./fnTemplate";
+import { hasClockMarkers, resolveClockMarkers } from "./fcTemplate";
 
 /**
  * Safely read an object's `props.content` as a string. Bindable
@@ -115,14 +116,18 @@ export function applyBindingToTree<T extends LabelObject>(
   variables: readonly Variable[],
   active: ActiveCsvRow | null,
   mode: RenderMode = "preview",
+  /** Reference time for clock markers — evaluated once per tree pass
+   *  here so every leaf sees the same instant, even on large labels. */
+  now?: Date,
 ): T[] {
+  const sharedNow = now ?? new Date();
   return objects.map((o) => {
     const asGroup = o as unknown as { type?: string; children?: readonly T[] };
     if (asGroup.type === "group" && Array.isArray(asGroup.children)) {
-      const nextChildren = applyBindingToTree(asGroup.children, variables, active, mode);
+      const nextChildren = applyBindingToTree(asGroup.children, variables, active, mode, sharedNow);
       return { ...o, children: nextChildren } as T;
     }
-    return applyBindingToObject(o, variables, active, mode);
+    return applyBindingToObject(o, variables, active, mode, sharedNow);
   });
 }
 
@@ -172,6 +177,10 @@ export function applyBindingToObject<T extends LabelObject>(
   variables: readonly Variable[],
   active: ActiveCsvRow | null = null,
   mode: RenderMode = "preview",
+  /** Reference time for `«clock:T»` resolution. Lazy-initialised
+   *  inside the clock branch so plain-text fields don't pay for an
+   *  unused `new Date()` allocation on every render. */
+  now?: Date,
 ): T {
   const content = getObjectStringContent(obj);
   if (content === undefined) return obj;
@@ -195,6 +204,13 @@ export function applyBindingToObject<T extends LabelObject>(
       return v ? resolveVariableValue(v, active, mode) : undefined;
     });
   }
+  // ^FC clock markers resolve to the editor's current Date so the
+  // canvas previews what the printer would substitute right now.
+  // Schema mode leaves them as `«clock:T»` literals — same intent
+  // as schema-mode variable placeholders (show structure, not data).
+  if (mode === "preview" && hasClockMarkers(next)) {
+    next = resolveClockMarkers(next, now ?? new Date());
+  }
   if (next === content) return obj;
   // Discriminated union doesn't narrow through spread, cast back to T.
   const props = (obj as { props: object }).props;
diff --git a/src/lib/zplCommandSupport.ts b/src/lib/zplCommandSupport.ts
index 420302e..33b5115 100644
--- a/src/lib/zplCommandSupport.ts
+++ b/src/lib/zplCommandSupport.ts
@@ -50,7 +50,7 @@ export const ZPL_COMMANDS: readonly ZplCommandInfo[] = [
   { cmd: 'FX', status: 'structural', description: 'Comment field — ignored' },
   { cmd: 'FW', status: 'supported', description: 'Field orientation — sets default rotation for subsequent fields' },
   { cmd: 'FB', status: 'supported', description: 'Field block — multi-line text with word-wrap and justification' },
-  { cmd: 'FC', status: 'unsupported', description: 'Field clock — inserts date/time into field data' },
+  { cmd: 'FC', status: 'supported', description: 'Field clock — redefines the clock chars used for inline date/time tokens inside ^FD. Tokens import as «clock:T» markers; canvas previews the current date, generator round-trips through ^FC + tokens.' },
   { cmd: 'FE', status: 'supported', description: 'Field-number embed character — redefines the ^FN inline-embed delimiter (default #) used by ^FD/^FV. Imported embeds become «name» template markers; round-trips through generate.' },
   { cmd: 'FM', status: 'unsupported', description: 'Multiple field origin locations' },
   { cmd: 'FN', status: 'supported', description: 'Field number — variable field placeholder, lands in the Variables tab on import and emits as ^FN{slot} on export' },
diff --git a/src/lib/zplGenerator.test.ts b/src/lib/zplGenerator.test.ts
index 0b1e94c..3a60a3a 100644
--- a/src/lib/zplGenerator.test.ts
+++ b/src/lib/zplGenerator.test.ts
@@ -767,6 +767,55 @@ describe('generateZPL — parse/generate roundtrip', () => {
     expect(reparsed.variables.map((v) => v.fnNumber).sort()).toEqual([1, 2]);
   });
 
+  it('parses ^FD clock tokens into «clock:T» markers', () => {
+    const r = parseZPL('^XA^FO50,50^A0N,30,30^FDDate %d/%m/%Y^FS^XZ', 8);
+    const text = defined(r.objects.find((o) => o.type === 'text'));
+    expect(props(text).content).toBe('Date «clock:d»/«clock:m»/«clock:Y»');
+  });
+
+  it('respects a custom ^FC clock char on parse', () => {
+    const r = parseZPL('^XA^FC@^FO50,50^A0N,30,30^FDDate @d/@m/@Y^FS^XZ', 8);
+    const text = defined(r.objects.find((o) => o.type === 'text'));
+    expect(props(text).content).toBe('Date «clock:d»/«clock:m»/«clock:Y»');
+  });
+
+  it('round-trips a label with clock tokens (default chars)', () => {
+    const src = '^XA^FO50,50^A0N,30,30^FD%d/%m/%Y %H:%M^FS^XZ';
+    const original = parseZPL(src, 8);
+    const regenerated = generateZPL(BASE_LABEL, original.objects);
+    const reparsed = parseZPL(regenerated, 8);
+    const text = defined(reparsed.objects.find((o) => o.type === 'text'));
+    expect(props(text).content).toBe('«clock:d»/«clock:m»/«clock:Y» «clock:H»:«clock:M»');
+    // No ^FC line when defaults work — payload has no `%` `{` or `#`
+    // literals beyond the token positions.
+    expect(regenerated).not.toMatch(/\^FC/);
+  });
+
+  it('resets ^FC and ^FE state between sibling ^XA blocks', () => {
+    // Two back-to-back labels: first overrides ^FC/^FE chars, second
+    // uses defaults. Without an XA reset, the second label would
+    // parse with the leaked chars and misinterpret default tokens.
+    const r = parseZPL(
+      '^XA^FC@^FE!^FO50,50^A0N,30,30^FD@d !1!^FS^XZ' +
+      '^XA^FO50,50^A0N,30,30^FD%d #1#^FS^XZ',
+      8,
+    );
+    // parseZPL flattens pages into one objects array — second label's
+    // text is the second text object. Its `%d` should still parse as
+    // a clock token; if the leak existed, the parser would have stuck
+    // with `@` and left `%d` literal in the content.
+    const texts = r.objects.filter((o) => o.type === 'text');
+    expect(texts.length).toBeGreaterThanOrEqual(2);
+    expect(props(defined(texts[1])).content).toContain('«clock:d»');
+  });
+
+  it('emits ^FC<alt> when payload contains a literal %', () => {
+    const src = '^XA^FO50,50^A0N,30,30^FD100% match %Y^FS^XZ';
+    const original = parseZPL(src, 8);
+    const regenerated = generateZPL(BASE_LABEL, original.objects);
+    expect(regenerated).toMatch(/\^FC\$/);
+  });
+
   it('emits ^FE<alt> when payload contains a literal #', () => {
     // Pre-build state via the parser so variable ids are real.
     const r = parseZPL('^XA^FN1^FDfoo^FS^XZ', 8);
diff --git a/src/lib/zplGenerator.ts b/src/lib/zplGenerator.ts
index ad0b4a5..5eca01a 100644
--- a/src/lib/zplGenerator.ts
+++ b/src/lib/zplGenerator.ts
@@ -6,6 +6,11 @@ import {
   hasTemplateMarkers,
   pickEmbedChar,
 } from './fnTemplate';
+import {
+  hasClockMarkers,
+  pickClockChars,
+  isDefaultClockChars,
+} from './fcTemplate';
 import { getObjectStringContent } from './variableBinding';
 import type { CustomFontMapping, LabelConfig, ZplEmitContext } from '../types/ObjectType';
 import type { Variable } from '../types/Variable';
@@ -96,8 +101,11 @@ function planTemplateHeader(
   const varsByFn = new Map(variables.map((v) => [v.fnNumber, v]));
 
   const templatePayloads: string[] = [];
+  const clockPayloads: string[] = [];
   const templateFns = new Set<number>();
   const singleBindFns = new Set<number>();
+  // Single tree walk collects both ^FE-template and ^FC-clock payloads
+  // so the leaf set is flattened once, not twice.
   for (const leaf of flattenObjects(shifted)) {
     if (leaf.includeInExport === false) continue;
     if (leaf.variableId) {
@@ -105,31 +113,47 @@ function planTemplateHeader(
       if (v) singleBindFns.add(v.fnNumber);
     }
     const c = getObjectStringContent(leaf);
-    if (c === undefined || !hasTemplateMarkers(c)) continue;
-    templatePayloads.push(c);
-    for (const name of extractTemplateRefs(c)) {
-      const v = varsByName.get(name);
-      if (v) templateFns.add(v.fnNumber);
+    if (c === undefined) continue;
+    if (hasTemplateMarkers(c)) {
+      templatePayloads.push(c);
+      for (const name of extractTemplateRefs(c)) {
+        const v = varsByName.get(name);
+        if (v) templateFns.add(v.fnNumber);
+      }
     }
+    if (hasClockMarkers(c)) clockPayloads.push(c);
   }
   const pickedEmbedChar =
     templatePayloads.length > 0 ? pickEmbedChar(templatePayloads) : '#';
-  if (pickedEmbedChar === null) {
-    // Markers stay literal in the emitted ZPL.
-    return { headerLines: [], emitCtx: { label, variables } };
-  }
   const headerLines: string[] = [];
-  if (pickedEmbedChar !== '#') headerLines.push(`^FE${pickedEmbedChar}`);
-  for (const fn of [...templateFns].sort((a, b) => a - b)) {
-    if (singleBindFns.has(fn)) continue;
-    const v = varsByFn.get(fn);
-    if (!v) continue;
-    headerLines.push(`^FN${fn}${fdField(v.defaultValue)}`);
+  const emitCtx: ZplEmitContext = { label, variables };
+
+  if (pickedEmbedChar !== null) {
+    if (pickedEmbedChar !== '#') headerLines.push(`^FE${pickedEmbedChar}`);
+    for (const fn of [...templateFns].sort((a, b) => a - b)) {
+      if (singleBindFns.has(fn)) continue;
+      const v = varsByFn.get(fn);
+      if (!v) continue;
+      headerLines.push(`^FN${fn}${fdField(v.defaultValue)}`);
+    }
+    emitCtx.embedChar = pickedEmbedChar;
   }
-  return {
-    headerLines,
-    emitCtx: { label, variables, embedChar: pickedEmbedChar },
-  };
+
+  // ^FC clock chars run on the same fail-safe logic as ^FE: pick a
+  // triple that doesn't clash with any literal payload text, emit
+  // `^FC<a>,<b>,<c>` only when ≠ defaults, leave clock markers
+  // literal when no safe triple exists.
+  if (clockPayloads.length > 0) {
+    const picked = pickClockChars(clockPayloads);
+    if (picked) {
+      if (!isDefaultClockChars(picked)) {
+        headerLines.push(`^FC${picked.date},${picked.time},${picked.tertiary}`);
+      }
+      emitCtx.clockChars = picked;
+    }
+  }
+
+  return { headerLines, emitCtx };
 }
 
 /** Format a `~DY` line for a graphic-upload image. Mirrors the font-upload
diff --git a/src/lib/zplParser.ts b/src/lib/zplParser.ts
index ced4e1f..9916f90 100644
--- a/src/lib/zplParser.ts
+++ b/src/lib/zplParser.ts
@@ -6,6 +6,11 @@ import {
   type Variable,
 } from "../types/Variable";
 import { embedsToMarkers } from "./fnTemplate";
+import {
+  DEFAULT_CLOCK_CHARS,
+  tokensToMarkers,
+  type ClockChars,
+} from "./fcTemplate";
 import { zplAnchorToModel } from "../components/Canvas/textPositionTransforms";
 import { computeTextRenderMetrics } from "../components/Canvas/textRenderMetrics";
 import type { LabelObject } from "../types/Group";
@@ -564,6 +569,11 @@ export function parseZPL(zpl: string, dpmm = 8): ParsedZPL {
   // Programming Guide). Reset per parse is implicit — this `let` is
   // initialised once at the top of parseZPL.
   let embedChar = "#";
+  // ^FC field-clock chars. Same scoping as ^FE: format-scoped, default
+  // `% { #`, redefined by `^FC<date>,<time>,<tertiary>`. Tokens in ^FD
+  // that follow one of these chars become `«clock:T»` markers at
+  // flushField time, then re-emit as the same triplet on round-trip.
+  let clockChars: ClockChars = { ...DEFAULT_CLOCK_CHARS };
   let gsSymbology: Gs1DatabarProps["symbology"] = 1;
   let gsSegments: number | undefined = undefined;
   // ^BY barcode defaults
@@ -741,12 +751,14 @@ export function parseZPL(zpl: string, dpmm = 8): ParsedZPL {
     const rawDecoded = fhActive
       ? decodeFH(pendingFD, fhDelimiter, fhDecoder)
       : pendingFD;
-    // ^FE-style inline FN embeds (`#1#`, `#2,0,3#`, …) get rewritten
-    // into the canonical `«variableName»` marker form before the
-    // content reaches downstream code. Bootstrap a Variable for any
-    // referenced FN that has no existing entry — same auto-naming
-    // ("field_<n>") used by the single-bind ^FN path below.
-    const content = applyFnEmbeds(rawDecoded);
+    // Two marker conversions, in order:
+    //   1. ^FE-style FN embeds (`#1#` → `«variableName»`), bootstrap
+    //      Variables when the FN slot is new — same auto-naming as
+    //      the single-bind ^FN path below.
+    //   2. ^FC clock tokens (`%d`, `%Y`, …) → `«clock:T»`. Runs after
+    //      FN embeds so a payload like `%FN#1#%Y` resolves both.
+    const afterFn = applyFnEmbeds(rawDecoded);
+    const content = tokensToMarkers(afterFn, clockChars);
     const posType: "FT" | "FO" = positionIsFT ? "FT" : "FO";
     const comment = takeComment();
 
@@ -1946,8 +1958,15 @@ export function parseZPL(zpl: string, dpmm = 8): ParsedZPL {
     },
 
     // ── Ignored / structural ────────────────────────────────────────────────
-    // ^XA / ^XZ: label start/end — reset pending comment via empty rest
-    XA: resetComment,
+    // ^XA / ^XZ: label start/end. Reset format-scoped directives so a
+    // multi-label stream doesn't leak ^FE/^FC overrides from a prior
+    // ^XA…^XZ block into the next one — without this `^FC@^...^XZ^XA`
+    // would parse later default-char tokens differently.
+    XA: (p, rest) => {
+      embedChar = "#";
+      clockChars = { ...DEFAULT_CLOCK_CHARS };
+      resetComment(p, rest);
+    },
     XZ: resetComment,
     // ^FX: comment field — accumulate across consecutive ^FX lines so the
     // assembled text reaches the next field object as one multi-line comment.
@@ -1977,7 +1996,20 @@ export function parseZPL(zpl: string, dpmm = 8): ParsedZPL {
       pendingFnComment = pendingComment;
     },
     FV: noop, // field variable — supplies data for ^FN at print time
-    FC: noop, // field clock — inserts date/time (requires printer RTC)
+    FC: (p) => {
+      // ^FC<a>,<b>,<c>: redefine clock chars. Missing/empty slots
+      // keep their current value (Zebra spec: defaults persist when
+      // a parameter is omitted). `^` and `~` stay reserved.
+      const accept = (raw: string | undefined, current: string) => {
+        const c = raw?.[0];
+        return c && c !== "^" && c !== "~" ? c : current;
+      };
+      clockChars = {
+        date: accept(p[0], clockChars.date),
+        time: accept(p[1], clockChars.time),
+        tertiary: accept(p[2], clockChars.tertiary),
+      };
+    },
     FE: (p) => {
       // ^FE<char>: redefine the FN-embed delimiter used inside ^FD/^FV.
       // Single ASCII character; falls back to '#' when missing/invalid.
diff --git a/src/registry/zplHelpers.ts b/src/registry/zplHelpers.ts
index 7610a85..54c79ed 100644
--- a/src/registry/zplHelpers.ts
+++ b/src/registry/zplHelpers.ts
@@ -1,5 +1,6 @@
 import type { LabelObjectBase, ZplEmitContext } from "../types/ObjectType";
 import { hasTemplateMarkers, markersToEmbeds } from "../lib/fnTemplate";
+import { hasClockMarkers, markersToTokens } from "../lib/fcTemplate";
 import { modelToZplAnchor } from "../components/Canvas/textPositionTransforms";
 import { getTextRenderMetrics } from "../components/Canvas/textRenderMetrics";
 import type { LabelObject } from "../types/Group";
@@ -126,16 +127,19 @@ export function fdFieldFor(
   content: string,
   ctx?: ZplEmitContext,
 ): string {
-  // Template path: content carries `«name»` markers (^FE inline embeds).
-  // Convert to `#n#`-style embeds using the label-level embedChar; the
-  // generator emits the corresponding ^FN declarations at the label
-  // header. Skipped when `embedChar` is unset (the generator signals
-  // "no safe delimiter available, leave markers literal" — see
-  // generateZPL's templatesEmittable gate).
-  if (ctx?.variables && ctx.embedChar && hasTemplateMarkers(content)) {
-    const { payload } = markersToEmbeds(content, ctx.variables, ctx.embedChar);
-    return fdField(payload);
+  // Marker conversions, in order: ^FE FN-embeds first, then ^FC
+  // clock tokens. Each is gated on the corresponding ctx-set
+  // delimiter so the generator can signal "templates not emittable"
+  // by withholding the delimiter (markers then fall through as
+  // literal text in the output).
+  let payload = content;
+  if (ctx?.variables && ctx.embedChar && hasTemplateMarkers(payload)) {
+    payload = markersToEmbeds(payload, ctx.variables, ctx.embedChar).payload;
   }
+  if (ctx?.clockChars && hasClockMarkers(payload)) {
+    payload = markersToTokens(payload, ctx.clockChars.date);
+  }
+  if (payload !== content) return fdField(payload);
   const id = obj.variableId;
   if (!id || !ctx?.variables) return fdField(content);
   const variable = ctx.variables.find((v) => v.id === id);
diff --git a/src/types/ObjectType.ts b/src/types/ObjectType.ts
index efe7abb..580ea01 100644
--- a/src/types/ObjectType.ts
+++ b/src/types/ObjectType.ts
@@ -158,6 +158,13 @@ export interface ZplEmitContext {
    *  per-leaf emitters consult it when translating `«name»` markers
    *  back to `#n#` embed syntax. */
   embedChar?: string;
+  /** ^FC clock chars active for the current label. Defaults to
+   *  `% { #`; the label-level emitter picks an alternate triple when
+   *  defaults clash with literal payload text. Per-leaf emitters
+   *  consult it when translating `«clock:T»` markers back to
+   *  `<char><T>` token syntax. Absent when no field carries clock
+   *  markers — fdFieldFor leaves them literal in that case. */
+  clockChars?: { date: string; time: string; tertiary: string };
 }
 
 /**

From 5275ea534afc50ed861cd57fcf6930a9524a4cbd Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Sun, 24 May 2026 14:05:46 +0200
Subject: [PATCH 2/3] feat(ui): clock-token picker + colour-mirror content
 editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extend the existing variable-insert dropdown to also list ^FC clock
tokens (year/month/day/hour/minute/second/julian-day) below the
variables section. Picking a token splices its `«clock:T»` marker
into the input at the cursor, same insert flow as the variable
markers.

Replace the single-line `<input>` with an auto-growing `<textarea>`
(2-8 rows) layered over a colour-mirror that highlights `«…»`
markers in their type-specific colour — accent for variable
markers, cyan for clock markers, default for literal text. Mirror
geometry tracks the textarea exactly (shared CSS + scrollHeight-
based sizing) so the highlight stays aligned at every grow step.
Cursor + selection come from the native textarea; the mirror is
purely visual and aria-hidden so screen readers see only the
textarea value.

Picker consumes the canonical CLOCK_TOKEN_LABELS list from
lib/fcTemplate so the UI stays in lock-step with the resolver — a
new token added to TOKEN_FORMATTERS forces a matching CLOCK_TOKEN_
LABELS row (TS narrowing), which in turn forces a locale-key add.

Trigger button declares `aria-haspopup="menu"` + `aria-expanded`,
floats absolute in the top-right corner of the textarea so the
field keeps the full panel width.

Locale: 8 new flat keys on t.app (clockYear4 / clockYear2 /
clockMonth / clockDay / clockHour24 / clockMinute / clockSecond /
clockJulianDay) across all 32 locales.

Atomic-delete (Backspace removes a whole marker), marker right-
click context menu, expand-to-modal editor, and ^FB-specific UX
revamp are tracked in the project_ticket_template_editor_ux memory
note for a follow-up PR.
---
 .../Properties/TemplateContentInput.tsx       | 174 ++++++++++++++----
 src/locales/ar.ts                             |   8 +
 src/locales/bg.ts                             |   8 +
 src/locales/cs.ts                             |   8 +
 src/locales/da.ts                             |   8 +
 src/locales/de.ts                             |   8 +
 src/locales/el.ts                             |   8 +
 src/locales/en.ts                             |   8 +
 src/locales/es.ts                             |   8 +
 src/locales/et.ts                             |   8 +
 src/locales/fa.ts                             |   8 +
 src/locales/fi.ts                             |   8 +
 src/locales/fr.ts                             |   8 +
 src/locales/he.ts                             |   8 +
 src/locales/hr.ts                             |   8 +
 src/locales/hu.ts                             |   8 +
 src/locales/it.ts                             |   8 +
 src/locales/ja.ts                             |   8 +
 src/locales/ko.ts                             |   8 +
 src/locales/lt.ts                             |   8 +
 src/locales/lv.ts                             |   8 +
 src/locales/nl.ts                             |   8 +
 src/locales/no.ts                             |   8 +
 src/locales/pl.ts                             |   8 +
 src/locales/pt.ts                             |   8 +
 src/locales/ro.ts                             |   8 +
 src/locales/sk.ts                             |   8 +
 src/locales/sl.ts                             |   8 +
 src/locales/sr.ts                             |   8 +
 src/locales/sv.ts                             |   8 +
 src/locales/tr.ts                             |   8 +
 src/locales/zh-hans.ts                        |   8 +
 src/locales/zh-hant.ts                        |   8 +
 33 files changed, 396 insertions(+), 34 deletions(-)

diff --git a/src/components/Properties/TemplateContentInput.tsx b/src/components/Properties/TemplateContentInput.tsx
index 1b9912a..801c317 100644
--- a/src/components/Properties/TemplateContentInput.tsx
+++ b/src/components/Properties/TemplateContentInput.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, useLayoutEffect } from "react";
 import { useT } from "../../lib/useT";
 import { useLabelStore } from "../../store/labelStore";
-import { inputCls } from "./styles";
+import { CLOCK_TOKEN_LABELS } from "../../lib/fcTemplate";
 
 interface Props {
   value: string;
@@ -14,17 +14,57 @@ interface Props {
   maxLength?: number;
 }
 
+/** Tokenise content into literal / marker segments so the mirror layer
+ *  can colour markers without breaking literal text. Marker grammar
+ *  matches both variable markers (`«name»`) and clock markers
+ *  (`«clock:T»`) — same `«…»` family. */
+type Segment =
+  | { kind: "text"; text: string }
+  | { kind: "var" | "clock"; text: string };
+
+const MARKER_RE = /«([^»]+)»/g;
+
+function tokenise(content: string): Segment[] {
+  const out: Segment[] = [];
+  let last = 0;
+  for (const m of content.matchAll(MARKER_RE)) {
+    const idx = m.index ?? 0;
+    if (idx > last) out.push({ kind: "text", text: content.slice(last, idx) });
+    const body = m[1] ?? "";
+    out.push({ kind: body.startsWith("clock:") ? "clock" : "var", text: m[0] });
+    last = idx + m[0].length;
+  }
+  if (last < content.length) out.push({ kind: "text", text: content.slice(last) });
+  return out;
+}
+
 /**
- * Text input + "Insert variable" button. The button opens a small
- * dropdown listing every defined Variable; picking one splices its
- * `«name»` marker into the input at the current cursor position.
- * Templates resolve at render time via applyBindingToObject — see
- * lib/fnTemplate + lib/variableBinding.
+ * Multi-line content editor for bindable fields. Renders a textarea
+ * over a colour-mirror layer that highlights `«…»` markers in their
+ * type-specific colour (variable = accent, clock = cyan). Cursor and
+ * selection come from the native textarea; the mirror is purely
+ * visual.
+ *
+ * The textarea auto-grows from 1 to MAX_ROWS as content wraps or
+ * gains newlines. Newlines round-trip via the existing ^FB / `\&`
+ * mechanism in the parser/generator — outside a ^FB block they emit
+ * literally and are ignored by Zebra firmware, which is the spec-
+ * correct fallback.
  *
- * Used by Text and 1D-barcode properties panels in place of the
- * plain input so non-technical users can compose multi-variable
- * fields without typing the marker syntax by hand.
+ * The `{x}` button opens a dropdown listing every defined Variable
+ * plus the canonical clock tokens; picking either splices the marker
+ * into the textarea at the cursor.
  */
+const MIN_ROWS = 2;
+const MAX_ROWS = 8;
+const LINE_HEIGHT_PX = 20; // text-xs leading-5 ⇒ 20px
+// Shared geometry between textarea + mirror. Any visual delta here
+// causes per-char misalignment of the highlight against the cursor.
+// pr-7 reserves room for the absolute `{x}` button in the top-right
+// so first-line content doesn't slide under it.
+const SHARED_CLS =
+  "w-full bg-surface-2 border border-border rounded pl-2 pr-7 py-1 text-xs font-mono leading-5 whitespace-pre-wrap break-words";
+
 export function TemplateContentInput({
   value,
   onChange,
@@ -34,12 +74,29 @@ export function TemplateContentInput({
 }: Props) {
   const t = useT();
   const variables = useLabelStore((s) => s.variables);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const taRef = useRef<HTMLTextAreaElement>(null);
+  const mirrorRef = useRef<HTMLDivElement>(null);
   const rootRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
+  const segments = useMemo(() => tokenise(value), [value]);
+
+  // Auto-grow from MIN_ROWS up to MAX_ROWS based on actual rendered
+  // height (so visual word-wrap counts, not just \n count). Mirror
+  // matches the textarea exactly so the highlight layer stays
+  // aligned at every grow step.
+  useLayoutEffect(() => {
+    const ta = taRef.current;
+    const mirror = mirrorRef.current;
+    if (!ta || !mirror) return;
+    ta.style.height = "auto"; // reset so scrollHeight reflects content
+    const minH = MIN_ROWS * LINE_HEIGHT_PX + 8; // +8 = 2× py-1 padding
+    const maxH = MAX_ROWS * LINE_HEIGHT_PX + 8;
+    const h = Math.min(maxH, Math.max(minH, ta.scrollHeight));
+    ta.style.height = `${h}px`;
+    mirror.style.height = `${h}px`;
+  }, [value]);
 
-  // Click-outside + Esc close. Mounted only while open so the
-  // listeners don't fire for every other open menu in the panel.
+  // Click-outside + Esc close. Mounted only while open.
   useEffect(() => {
     if (!open) return;
     const onPointerDown = (e: PointerEvent) => {
@@ -56,55 +113,104 @@ export function TemplateContentInput({
     };
   }, [open]);
 
-  const insertMarker = (name: string) => {
-    const input = inputRef.current;
-    const marker = `«${name}»`;
-    const cursor = input?.selectionStart ?? value.length;
-    const end = input?.selectionEnd ?? cursor;
+  const insertMarker = (markerBody: string) => {
+    const ta = taRef.current;
+    const marker = `«${markerBody}»`;
+    const cursor = ta?.selectionStart ?? value.length;
+    const end = ta?.selectionEnd ?? cursor;
     const next = value.slice(0, cursor) + marker + value.slice(end);
     onChange(next);
     setOpen(false);
-    // Restore focus + place cursor right after the inserted marker.
     queueMicrotask(() => {
-      if (!input) return;
+      if (!ta) return;
       const pos = cursor + marker.length;
-      input.focus();
-      input.setSelectionRange(pos, pos);
+      ta.focus();
+      ta.setSelectionRange(pos, pos);
     });
   };
 
+  const syncScroll = () => {
+    const ta = taRef.current;
+    const mirror = mirrorRef.current;
+    if (!ta || !mirror) return;
+    mirror.scrollTop = ta.scrollTop;
+    mirror.scrollLeft = ta.scrollLeft;
+  };
+
   return (
-    <div ref={rootRef} className="relative flex gap-1">
-      <input
-        ref={inputRef}
-        className={`${inputCls} flex-1`}
+    <div ref={rootRef} className="relative">
+      {/* Visual layer: same geometry as the textarea, coloured marker
+          spans. Hidden from a11y so the screen-reader gets the
+          textarea value only. */}
+      <div
+        ref={mirrorRef}
+        className={`${SHARED_CLS} absolute inset-0 overflow-hidden pointer-events-none text-text`}
+        aria-hidden
+      >
+        {segments.map((s, i) =>
+          s.kind === "text" ? (
+            <span key={i}>{s.text}</span>
+          ) : s.kind === "var" ? (
+            <span key={i} className="text-accent">{s.text}</span>
+          ) : (
+            <span key={i} className="text-[#67c8e0]">{s.text}</span>
+          ),
+        )}
+        {value.endsWith("\n") ? " " : ""}
+      </div>
+      <textarea
+        ref={taRef}
+        className={`${SHARED_CLS} relative block resize-none overflow-y-hidden caret-text focus:border-accent focus:outline-none`}
+        style={{ color: "transparent", background: "transparent" }}
         value={value}
         maxLength={maxLength}
         placeholder={placeholder}
         onChange={(e) => onChange(sanitise ? sanitise(e.target.value) : e.target.value)}
+        onScroll={syncScroll}
+        spellCheck={false}
       />
+      {/* Button floats inside the textarea's top-right corner so the
+          input keeps the full panel width. Subtle background so it
+          stays legible when textarea content runs under it. */}
       <button
         type="button"
-        className="px-2 rounded border border-border bg-surface-2 text-xs font-mono text-muted hover:text-text hover:border-accent transition-colors"
+        className="absolute top-1 right-1 px-1.5 rounded text-[10px] font-mono bg-surface border border-border text-muted hover:text-text hover:border-accent transition-colors"
         title={t.app.insertVariable}
-        disabled={variables.length === 0}
+        aria-haspopup="menu"
+        aria-expanded={open}
         onClick={() => setOpen((o) => !o)}
       >
         {"{x}"}
       </button>
-      {open && variables.length > 0 && (
+      {open && (
         <div
-          className="absolute right-0 top-full mt-1 z-10 min-w-[8rem] max-h-48 overflow-y-auto rounded border border-border bg-surface shadow-lg"
+          className="absolute right-0 top-full mt-1 z-10 min-w-[10rem] max-h-64 overflow-y-auto rounded border border-border bg-surface shadow-lg"
           role="menu"
         >
-          {variables.map((v) => (
+          {variables.length > 0 && (
+            <>
+              {variables.map((v) => (
+                <button
+                  key={v.id}
+                  type="button"
+                  className="block w-full text-left px-2 py-1 text-xs font-mono text-accent hover:bg-surface-2 transition-colors"
+                  onClick={() => insertMarker(v.name)}
+                >
+                  «{v.name}»
+                </button>
+              ))}
+              <div className="border-t border-border my-1" />
+            </>
+          )}
+          {CLOCK_TOKEN_LABELS.map(({ token, labelKey }) => (
             <button
-              key={v.id}
+              key={token}
               type="button"
               className="block w-full text-left px-2 py-1 text-xs font-mono text-text hover:bg-surface-2 transition-colors"
-              onClick={() => insertMarker(v.name)}
+              onClick={() => insertMarker(`clock:${token}`)}
             >
-              «{v.name}»
+              <span className="text-[#67c8e0]">«clock:{token}»</span>{" "}
+              <span className="text-muted">{t.app[labelKey]}</span>
             </button>
           ))}
         </div>
diff --git a/src/locales/ar.ts b/src/locales/ar.ts
index 4920aca..5503a3d 100644
--- a/src/locales/ar.ts
+++ b/src/locales/ar.ts
@@ -139,6 +139,14 @@ const ar = {
     keepExistingPages: 'الاحتفاظ بالصفحات الحالية',
     chooseFile: 'اختيار ملف',
     insertVariable: 'إدراج متغير',
+    clockYear4: 'السنة (4 أرقام)',
+    clockYear2: 'السنة (رقمان)',
+    clockMonth: 'الشهر',
+    clockDay: 'اليوم',
+    clockHour24: 'ساعة (24)',
+    clockMinute: 'دقيقة',
+    clockSecond: 'ثانية',
+    clockJulianDay: 'اليوم اليولياني',
     exportZpl: 'تصدير ZPL',
     importCsvData: 'استيراد بيانات CSV',
     exportBatchZplFmt: 'تصدير ZPL دفعي ({n} ملصقات)',
diff --git a/src/locales/bg.ts b/src/locales/bg.ts
index dffacc5..a837a5e 100644
--- a/src/locales/bg.ts
+++ b/src/locales/bg.ts
@@ -139,6 +139,14 @@ const bg = {
     keepExistingPages: 'Запазване на съществуващите страници',
     chooseFile: 'Избор на файл',
     insertVariable: 'Вмъкване на променлива',
+    clockYear4: 'Година (4-цифрена)',
+    clockYear2: 'Година (2-цифрена)',
+    clockMonth: 'Месец',
+    clockDay: 'Ден',
+    clockHour24: 'Час (24ч)',
+    clockMinute: 'Минута',
+    clockSecond: 'Секунда',
+    clockJulianDay: 'Юлиански ден',
     exportZpl: 'Export ZPL',
     importCsvData: 'Импортиране на CSV данни',
     exportBatchZplFmt: 'Експорт на пакетен ZPL ({n} етикета)',
diff --git a/src/locales/cs.ts b/src/locales/cs.ts
index 7594d2a..75998c8 100644
--- a/src/locales/cs.ts
+++ b/src/locales/cs.ts
@@ -139,6 +139,14 @@ const cs = {
     keepExistingPages: 'Zachovat stávající stránky',
     chooseFile: 'Vybrat soubor',
     insertVariable: 'Vložit proměnnou',
+    clockYear4: 'Rok (4místný)',
+    clockYear2: 'Rok (2místný)',
+    clockMonth: 'Měsíc',
+    clockDay: 'Den',
+    clockHour24: 'Hodina (24h)',
+    clockMinute: 'Minuta',
+    clockSecond: 'Sekunda',
+    clockJulianDay: 'Juliánský den',
     exportZpl: 'Export ZPL',
     importCsvData: 'Importovat data CSV',
     exportBatchZplFmt: 'Exportovat dávkové ZPL ({n} etiket)',
diff --git a/src/locales/da.ts b/src/locales/da.ts
index ebef29e..e9931cd 100644
--- a/src/locales/da.ts
+++ b/src/locales/da.ts
@@ -139,6 +139,14 @@ const da = {
     keepExistingPages: 'Behold eksisterende sider',
     chooseFile: 'Vælg fil',
     insertVariable: 'Indsæt variabel',
+    clockYear4: 'År (4 cifre)',
+    clockYear2: 'År (2 cifre)',
+    clockMonth: 'Måned',
+    clockDay: 'Dag',
+    clockHour24: 'Time (24t)',
+    clockMinute: 'Minut',
+    clockSecond: 'Sekund',
+    clockJulianDay: 'Juliansk dag',
     exportZpl: 'Export ZPL',
     importCsvData: 'Importer CSV-data',
     exportBatchZplFmt: 'Eksportér batch-ZPL ({n} etiketter)',
diff --git a/src/locales/de.ts b/src/locales/de.ts
index 79c0487..e820ea7 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -139,6 +139,14 @@ const de = {
     keepExistingPages: 'Bestehende Seiten behalten',
     chooseFile: 'Datei wählen',
     insertVariable: 'Variable einfügen',
+    clockYear4: 'Jahr (4-stellig)',
+    clockYear2: 'Jahr (2-stellig)',
+    clockMonth: 'Monat',
+    clockDay: 'Tag',
+    clockHour24: 'Stunde (24h)',
+    clockMinute: 'Minute',
+    clockSecond: 'Sekunde',
+    clockJulianDay: 'Tag im Jahr',
     exportZpl: 'Export ZPL',
     importCsvData: 'CSV-Daten importieren',
     exportBatchZplFmt: 'Batch-ZPL exportieren ({n} Etiketten)',
diff --git a/src/locales/el.ts b/src/locales/el.ts
index c30c336..33f81f5 100644
--- a/src/locales/el.ts
+++ b/src/locales/el.ts
@@ -139,6 +139,14 @@ const el = {
     keepExistingPages: 'Διατήρηση υπαρχουσών σελίδων',
     chooseFile: 'Επιλογή αρχείου',
     insertVariable: 'Εισαγωγή μεταβλητής',
+    clockYear4: 'Έτος (4 ψηφία)',
+    clockYear2: 'Έτος (2 ψηφία)',
+    clockMonth: 'Μήνας',
+    clockDay: 'Ημέρα',
+    clockHour24: 'Ώρα (24ω)',
+    clockMinute: 'Λεπτό',
+    clockSecond: 'Δευτερόλεπτο',
+    clockJulianDay: 'Ημέρα του έτους',
     exportZpl: 'Export ZPL',
     importCsvData: 'Εισαγωγή δεδομένων CSV',
     exportBatchZplFmt: 'Εξαγωγή παρτίδας ZPL ({n} ετικέτες)',
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 22d1d95..13df47a 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -139,6 +139,14 @@ const en = {
     keepExistingPages: 'Keep existing pages',
     chooseFile: 'Choose file',
     insertVariable: 'Insert variable',
+    clockYear4: 'Year (4-digit)',
+    clockYear2: 'Year (2-digit)',
+    clockMonth: 'Month',
+    clockDay: 'Day',
+    clockHour24: 'Hour (24h)',
+    clockMinute: 'Minute',
+    clockSecond: 'Second',
+    clockJulianDay: 'Julian day',
     exportZpl: 'Export ZPL',
     importCsvData: 'Import CSV data',
     exportBatchZplFmt: 'Export batch ZPL ({n} labels)',
diff --git a/src/locales/es.ts b/src/locales/es.ts
index e6eefb0..783cf4d 100644
--- a/src/locales/es.ts
+++ b/src/locales/es.ts
@@ -139,6 +139,14 @@ const es = {
     keepExistingPages: 'Conservar páginas existentes',
     chooseFile: 'Elegir archivo',
     insertVariable: 'Insertar variable',
+    clockYear4: 'Año (4 dígitos)',
+    clockYear2: 'Año (2 dígitos)',
+    clockMonth: 'Mes',
+    clockDay: 'Día',
+    clockHour24: 'Hora (24h)',
+    clockMinute: 'Minuto',
+    clockSecond: 'Segundo',
+    clockJulianDay: 'Día juliano',
     exportZpl: 'Export ZPL',
     importCsvData: 'Importar datos CSV',
     exportBatchZplFmt: 'Exportar ZPL por lotes ({n} etiquetas)',
diff --git a/src/locales/et.ts b/src/locales/et.ts
index 70da018..b34fd53 100644
--- a/src/locales/et.ts
+++ b/src/locales/et.ts
@@ -139,6 +139,14 @@ const et = {
     keepExistingPages: 'Säilita olemasolevad lehed',
     chooseFile: 'Vali fail',
     insertVariable: 'Lisa muutuja',
+    clockYear4: 'Aasta (4 numbrit)',
+    clockYear2: 'Aasta (2 numbrit)',
+    clockMonth: 'Kuu',
+    clockDay: 'Päev',
+    clockHour24: 'Tund (24h)',
+    clockMinute: 'Minut',
+    clockSecond: 'Sekund',
+    clockJulianDay: 'Aastapäev',
     exportZpl: 'Export ZPL',
     importCsvData: 'Impordi CSV-andmed',
     exportBatchZplFmt: 'Ekspordi partii-ZPL ({n} silti)',
diff --git a/src/locales/fa.ts b/src/locales/fa.ts
index 4dc03d9..0c09677 100644
--- a/src/locales/fa.ts
+++ b/src/locales/fa.ts
@@ -139,6 +139,14 @@ const fa = {
     keepExistingPages: 'حفظ صفحات موجود',
     chooseFile: 'انتخاب فایل',
     insertVariable: 'درج متغیر',
+    clockYear4: 'سال (4 رقمی)',
+    clockYear2: 'سال (2 رقمی)',
+    clockMonth: 'ماه',
+    clockDay: 'روز',
+    clockHour24: 'ساعت (24)',
+    clockMinute: 'دقیقه',
+    clockSecond: 'ثانیه',
+    clockJulianDay: 'روز در سال',
     exportZpl: 'خروجی ZPL',
     importCsvData: 'وارد کردن داده‌های CSV',
     exportBatchZplFmt: 'خروجی ZPL دسته‌ای ({n} برچسب)',
diff --git a/src/locales/fi.ts b/src/locales/fi.ts
index c1ee580..9795cab 100644
--- a/src/locales/fi.ts
+++ b/src/locales/fi.ts
@@ -139,6 +139,14 @@ const fi = {
     keepExistingPages: 'Säilytä olemassa olevat sivut',
     chooseFile: 'Valitse tiedosto',
     insertVariable: 'Lisää muuttuja',
+    clockYear4: 'Vuosi (4-numeroinen)',
+    clockYear2: 'Vuosi (2-numeroinen)',
+    clockMonth: 'Kuukausi',
+    clockDay: 'Päivä',
+    clockHour24: 'Tunti (24h)',
+    clockMinute: 'Minuutti',
+    clockSecond: 'Sekunti',
+    clockJulianDay: 'Juliaaninen päivä',
     exportZpl: 'Export ZPL',
     importCsvData: 'Tuo CSV-tiedot',
     exportBatchZplFmt: 'Vie erä-ZPL ({n} etikettiä)',
diff --git a/src/locales/fr.ts b/src/locales/fr.ts
index 083e977..1e7d0b0 100644
--- a/src/locales/fr.ts
+++ b/src/locales/fr.ts
@@ -139,6 +139,14 @@ const fr = {
     keepExistingPages: 'Conserver les pages existantes',
     chooseFile: 'Choisir un fichier',
     insertVariable: 'Insérer une variable',
+    clockYear4: 'Année (4 chiffres)',
+    clockYear2: 'Année (2 chiffres)',
+    clockMonth: 'Mois',
+    clockDay: 'Jour',
+    clockHour24: 'Heure (24h)',
+    clockMinute: 'Minute',
+    clockSecond: 'Seconde',
+    clockJulianDay: 'Jour julien',
     exportZpl: 'Export ZPL',
     importCsvData: 'Importer des données CSV',
     exportBatchZplFmt: 'Exporter ZPL en lot ({n} étiquettes)',
diff --git a/src/locales/he.ts b/src/locales/he.ts
index 64e0553..6d8fbf4 100644
--- a/src/locales/he.ts
+++ b/src/locales/he.ts
@@ -139,6 +139,14 @@ const he = {
     keepExistingPages: 'שמור על דפים קיימים',
     chooseFile: 'בחר קובץ',
     insertVariable: 'הכנס משתנה',
+    clockYear4: 'שנה (4 ספרות)',
+    clockYear2: 'שנה (2 ספרות)',
+    clockMonth: 'חודש',
+    clockDay: 'יום',
+    clockHour24: 'שעה (24)',
+    clockMinute: 'דקה',
+    clockSecond: 'שנייה',
+    clockJulianDay: 'יום בשנה',
     exportZpl: 'ייצוא ZPL',
     importCsvData: 'ייבוא נתוני CSV',
     exportBatchZplFmt: 'ייצוא ZPL באצווה ({n} תוויות)',
diff --git a/src/locales/hr.ts b/src/locales/hr.ts
index 8d91e7d..96f4213 100644
--- a/src/locales/hr.ts
+++ b/src/locales/hr.ts
@@ -139,6 +139,14 @@ const hr = {
     keepExistingPages: 'Zadrži postojeće stranice',
     chooseFile: 'Odaberi datoteku',
     insertVariable: 'Umetni varijablu',
+    clockYear4: 'Godina (4 znamenke)',
+    clockYear2: 'Godina (2 znamenke)',
+    clockMonth: 'Mjesec',
+    clockDay: 'Dan',
+    clockHour24: 'Sat (24h)',
+    clockMinute: 'Minuta',
+    clockSecond: 'Sekunda',
+    clockJulianDay: 'Julijanski dan',
     exportZpl: 'Export ZPL',
     importCsvData: 'Uvoz CSV podataka',
     exportBatchZplFmt: 'Izvoz skupnog ZPL-a ({n} etiketa)',
diff --git a/src/locales/hu.ts b/src/locales/hu.ts
index ea2301d..d3e9028 100644
--- a/src/locales/hu.ts
+++ b/src/locales/hu.ts
@@ -139,6 +139,14 @@ const hu = {
     keepExistingPages: 'Meglévő oldalak megtartása',
     chooseFile: 'Fájl kiválasztása',
     insertVariable: 'Változó beszúrása',
+    clockYear4: 'Év (4 jegyű)',
+    clockYear2: 'Év (2 jegyű)',
+    clockMonth: 'Hónap',
+    clockDay: 'Nap',
+    clockHour24: 'Óra (24ó)',
+    clockMinute: 'Perc',
+    clockSecond: 'Másodperc',
+    clockJulianDay: 'Julián-nap',
     exportZpl: 'Export ZPL',
     importCsvData: 'CSV-adatok importálása',
     exportBatchZplFmt: 'Köteg ZPL exportálása ({n} címke)',
diff --git a/src/locales/it.ts b/src/locales/it.ts
index 1f6426d..8011831 100644
--- a/src/locales/it.ts
+++ b/src/locales/it.ts
@@ -139,6 +139,14 @@ const it = {
     keepExistingPages: 'Mantieni pagine esistenti',
     chooseFile: 'Scegli file',
     insertVariable: 'Inserisci variabile',
+    clockYear4: 'Anno (4 cifre)',
+    clockYear2: 'Anno (2 cifre)',
+    clockMonth: 'Mese',
+    clockDay: 'Giorno',
+    clockHour24: 'Ora (24h)',
+    clockMinute: 'Minuto',
+    clockSecond: 'Secondo',
+    clockJulianDay: 'Giorno giuliano',
     exportZpl: 'Export ZPL',
     importCsvData: 'Importa dati CSV',
     exportBatchZplFmt: 'Esporta ZPL in batch ({n} etichette)',
diff --git a/src/locales/ja.ts b/src/locales/ja.ts
index 7e057dc..4131c63 100644
--- a/src/locales/ja.ts
+++ b/src/locales/ja.ts
@@ -139,6 +139,14 @@ const ja = {
     keepExistingPages: '既存のページを保持',
     chooseFile: 'ファイルを選択',
     insertVariable: '変数を挿入',
+    clockYear4: '年 (4桁)',
+    clockYear2: '年 (2桁)',
+    clockMonth: '月',
+    clockDay: '日',
+    clockHour24: '時 (24時間)',
+    clockMinute: '分',
+    clockSecond: '秒',
+    clockJulianDay: '通算日',
     exportZpl: 'ZPL エクスポート',
     importCsvData: 'CSVデータをインポート',
     exportBatchZplFmt: 'バッチZPLをエクスポート ({n} ラベル)',
diff --git a/src/locales/ko.ts b/src/locales/ko.ts
index e307cf1..e0b9dda 100644
--- a/src/locales/ko.ts
+++ b/src/locales/ko.ts
@@ -139,6 +139,14 @@ const ko = {
     keepExistingPages: '기존 페이지 유지',
     chooseFile: '파일 선택',
     insertVariable: '변수 삽입',
+    clockYear4: '연도 (4자리)',
+    clockYear2: '연도 (2자리)',
+    clockMonth: '월',
+    clockDay: '일',
+    clockHour24: '시간 (24시)',
+    clockMinute: '분',
+    clockSecond: '초',
+    clockJulianDay: '통산일',
     exportZpl: 'ZPL 내보내기',
     importCsvData: 'CSV 데이터 가져오기',
     exportBatchZplFmt: '일괄 ZPL 내보내기 ({n}개 라벨)',
diff --git a/src/locales/lt.ts b/src/locales/lt.ts
index bb68e16..dc05dcd 100644
--- a/src/locales/lt.ts
+++ b/src/locales/lt.ts
@@ -139,6 +139,14 @@ const lt = {
     keepExistingPages: 'Išsaugoti esamus puslapius',
     chooseFile: 'Pasirinkti failą',
     insertVariable: 'Įterpti kintamąjį',
+    clockYear4: 'Metai (4 skaitmenys)',
+    clockYear2: 'Metai (2 skaitmenys)',
+    clockMonth: 'Mėnuo',
+    clockDay: 'Diena',
+    clockHour24: 'Valanda (24 val.)',
+    clockMinute: 'Minutė',
+    clockSecond: 'Sekundė',
+    clockJulianDay: 'Metų diena',
     exportZpl: 'Export ZPL',
     importCsvData: 'Importuoti CSV duomenis',
     exportBatchZplFmt: 'Eksportuoti paketinį ZPL ({n} etikečių)',
diff --git a/src/locales/lv.ts b/src/locales/lv.ts
index b5e6f00..f26029f 100644
--- a/src/locales/lv.ts
+++ b/src/locales/lv.ts
@@ -139,6 +139,14 @@ const lv = {
     keepExistingPages: 'Saglabāt esošās lapas',
     chooseFile: 'Izvēlēties failu',
     insertVariable: 'Ievietot mainīgo',
+    clockYear4: 'Gads (4 cipari)',
+    clockYear2: 'Gads (2 cipari)',
+    clockMonth: 'Mēnesis',
+    clockDay: 'Diena',
+    clockHour24: 'Stunda (24h)',
+    clockMinute: 'Minūte',
+    clockSecond: 'Sekunde',
+    clockJulianDay: 'Gada diena',
     exportZpl: 'Export ZPL',
     importCsvData: 'Importēt CSV datus',
     exportBatchZplFmt: 'Eksportēt pakešu ZPL ({n} etiķetes)',
diff --git a/src/locales/nl.ts b/src/locales/nl.ts
index c013acb..ddfd7ff 100644
--- a/src/locales/nl.ts
+++ b/src/locales/nl.ts
@@ -139,6 +139,14 @@ const nl = {
     keepExistingPages: 'Bestaande pagina\'s behouden',
     chooseFile: 'Bestand kiezen',
     insertVariable: 'Variabele invoegen',
+    clockYear4: 'Jaar (4 cijfers)',
+    clockYear2: 'Jaar (2 cijfers)',
+    clockMonth: 'Maand',
+    clockDay: 'Dag',
+    clockHour24: 'Uur (24u)',
+    clockMinute: 'Minuut',
+    clockSecond: 'Seconde',
+    clockJulianDay: 'Juliaanse dag',
     exportZpl: 'Export ZPL',
     importCsvData: 'CSV-gegevens importeren',
     exportBatchZplFmt: 'Batch-ZPL exporteren ({n} etiketten)',
diff --git a/src/locales/no.ts b/src/locales/no.ts
index 2955ab2..3ccbee7 100644
--- a/src/locales/no.ts
+++ b/src/locales/no.ts
@@ -139,6 +139,14 @@ const no = {
     keepExistingPages: 'Behold eksisterende sider',
     chooseFile: 'Velg fil',
     insertVariable: 'Sett inn variabel',
+    clockYear4: 'År (4 siffer)',
+    clockYear2: 'År (2 siffer)',
+    clockMonth: 'Måned',
+    clockDay: 'Dag',
+    clockHour24: 'Time (24t)',
+    clockMinute: 'Minutt',
+    clockSecond: 'Sekund',
+    clockJulianDay: 'Juliansk dag',
     exportZpl: 'Export ZPL',
     importCsvData: 'Importer CSV-data',
     exportBatchZplFmt: 'Eksporter batch-ZPL ({n} etiketter)',
diff --git a/src/locales/pl.ts b/src/locales/pl.ts
index 92444e6..a2cfa11 100644
--- a/src/locales/pl.ts
+++ b/src/locales/pl.ts
@@ -139,6 +139,14 @@ const pl = {
     keepExistingPages: 'Zachowaj istniejące strony',
     chooseFile: 'Wybierz plik',
     insertVariable: 'Wstaw zmienną',
+    clockYear4: 'Rok (4-cyfrowy)',
+    clockYear2: 'Rok (2-cyfrowy)',
+    clockMonth: 'Miesiąc',
+    clockDay: 'Dzień',
+    clockHour24: 'Godzina (24h)',
+    clockMinute: 'Minuta',
+    clockSecond: 'Sekunda',
+    clockJulianDay: 'Dzień juliański',
     exportZpl: 'Export ZPL',
     importCsvData: 'Importuj dane CSV',
     exportBatchZplFmt: 'Eksportuj wsadowy ZPL ({n} etykiet)',
diff --git a/src/locales/pt.ts b/src/locales/pt.ts
index 4cdf65e..50c4b54 100644
--- a/src/locales/pt.ts
+++ b/src/locales/pt.ts
@@ -139,6 +139,14 @@ const pt = {
     keepExistingPages: 'Manter páginas existentes',
     chooseFile: 'Escolher ficheiro',
     insertVariable: 'Inserir variável',
+    clockYear4: 'Ano (4 dígitos)',
+    clockYear2: 'Ano (2 dígitos)',
+    clockMonth: 'Mês',
+    clockDay: 'Dia',
+    clockHour24: 'Hora (24h)',
+    clockMinute: 'Minuto',
+    clockSecond: 'Segundo',
+    clockJulianDay: 'Dia juliano',
     exportZpl: 'Export ZPL',
     importCsvData: 'Importar dados CSV',
     exportBatchZplFmt: 'Exportar ZPL em lote ({n} etiquetas)',
diff --git a/src/locales/ro.ts b/src/locales/ro.ts
index 80e1977..447ecf6 100644
--- a/src/locales/ro.ts
+++ b/src/locales/ro.ts
@@ -139,6 +139,14 @@ const ro = {
     keepExistingPages: 'Păstrează paginile existente',
     chooseFile: 'Alege fișier',
     insertVariable: 'Inserează variabilă',
+    clockYear4: 'An (4 cifre)',
+    clockYear2: 'An (2 cifre)',
+    clockMonth: 'Lună',
+    clockDay: 'Zi',
+    clockHour24: 'Oră (24h)',
+    clockMinute: 'Minut',
+    clockSecond: 'Secundă',
+    clockJulianDay: 'Zi iuliană',
     exportZpl: 'Export ZPL',
     importCsvData: 'Importă date CSV',
     exportBatchZplFmt: 'Exportă ZPL în lot ({n} etichete)',
diff --git a/src/locales/sk.ts b/src/locales/sk.ts
index 902b6ea..07b6bbc 100644
--- a/src/locales/sk.ts
+++ b/src/locales/sk.ts
@@ -139,6 +139,14 @@ const sk = {
     keepExistingPages: 'Zachovať existujúce stránky',
     chooseFile: 'Vybrať súbor',
     insertVariable: 'Vložiť premennú',
+    clockYear4: 'Rok (4-miestny)',
+    clockYear2: 'Rok (2-miestny)',
+    clockMonth: 'Mesiac',
+    clockDay: 'Deň',
+    clockHour24: 'Hodina (24h)',
+    clockMinute: 'Minúta',
+    clockSecond: 'Sekunda',
+    clockJulianDay: 'Juliánsky deň',
     exportZpl: 'Export ZPL',
     importCsvData: 'Importovať údaje CSV',
     exportBatchZplFmt: 'Exportovať dávkové ZPL ({n} etikiet)',
diff --git a/src/locales/sl.ts b/src/locales/sl.ts
index 7bd2095..33047df 100644
--- a/src/locales/sl.ts
+++ b/src/locales/sl.ts
@@ -139,6 +139,14 @@ const sl = {
     keepExistingPages: 'Ohrani obstoječe strani',
     chooseFile: 'Izberi datoteko',
     insertVariable: 'Vstavi spremenljivko',
+    clockYear4: 'Leto (4-mestno)',
+    clockYear2: 'Leto (2-mestno)',
+    clockMonth: 'Mesec',
+    clockDay: 'Dan',
+    clockHour24: 'Ura (24h)',
+    clockMinute: 'Minuta',
+    clockSecond: 'Sekunda',
+    clockJulianDay: 'Julijanski dan',
     exportZpl: 'Export ZPL',
     importCsvData: 'Uvozi podatke CSV',
     exportBatchZplFmt: 'Izvozi paketni ZPL ({n} etiket)',
diff --git a/src/locales/sr.ts b/src/locales/sr.ts
index f3fe287..0c633d1 100644
--- a/src/locales/sr.ts
+++ b/src/locales/sr.ts
@@ -139,6 +139,14 @@ const sr = {
     keepExistingPages: 'Задржи постојеће странице',
     chooseFile: 'Изабери датотеку',
     insertVariable: 'Уметни променљиву',
+    clockYear4: 'Година (4 цифре)',
+    clockYear2: 'Година (2 цифре)',
+    clockMonth: 'Месец',
+    clockDay: 'Дан',
+    clockHour24: 'Сат (24ч)',
+    clockMinute: 'Минут',
+    clockSecond: 'Секунда',
+    clockJulianDay: 'Јулијански дан',
     exportZpl: 'Export ZPL',
     importCsvData: 'Увоз CSV података',
     exportBatchZplFmt: 'Извоз групног ZPL-а ({n} етикета)',
diff --git a/src/locales/sv.ts b/src/locales/sv.ts
index cf58a2b..83aa827 100644
--- a/src/locales/sv.ts
+++ b/src/locales/sv.ts
@@ -139,6 +139,14 @@ const sv = {
     keepExistingPages: 'Behåll befintliga sidor',
     chooseFile: 'Välj fil',
     insertVariable: 'Infoga variabel',
+    clockYear4: 'År (4 siffror)',
+    clockYear2: 'År (2 siffror)',
+    clockMonth: 'Månad',
+    clockDay: 'Dag',
+    clockHour24: 'Timme (24h)',
+    clockMinute: 'Minut',
+    clockSecond: 'Sekund',
+    clockJulianDay: 'Juliansk dag',
     exportZpl: 'Export ZPL',
     importCsvData: 'Importera CSV-data',
     exportBatchZplFmt: 'Exportera batch-ZPL ({n} etiketter)',
diff --git a/src/locales/tr.ts b/src/locales/tr.ts
index cd043db..c513779 100644
--- a/src/locales/tr.ts
+++ b/src/locales/tr.ts
@@ -139,6 +139,14 @@ const tr = {
     keepExistingPages: 'Mevcut sayfaları koru',
     chooseFile: 'Dosya seç',
     insertVariable: 'Değişken ekle',
+    clockYear4: 'Yıl (4 haneli)',
+    clockYear2: 'Yıl (2 haneli)',
+    clockMonth: 'Ay',
+    clockDay: 'Gün',
+    clockHour24: 'Saat (24s)',
+    clockMinute: 'Dakika',
+    clockSecond: 'Saniye',
+    clockJulianDay: 'Yılın günü',
     exportZpl: 'ZPL Dışa Aktar',
     importCsvData: 'CSV verisi içe aktar',
     exportBatchZplFmt: 'Toplu ZPL dışa aktar ({n} etiket)',
diff --git a/src/locales/zh-hans.ts b/src/locales/zh-hans.ts
index 7890804..5c62917 100644
--- a/src/locales/zh-hans.ts
+++ b/src/locales/zh-hans.ts
@@ -139,6 +139,14 @@ const zhHans = {
     keepExistingPages: '保留现有页面',
     chooseFile: '选择文件',
     insertVariable: '插入变量',
+    clockYear4: '年 (4位)',
+    clockYear2: '年 (2位)',
+    clockMonth: '月',
+    clockDay: '日',
+    clockHour24: '小时 (24时)',
+    clockMinute: '分',
+    clockSecond: '秒',
+    clockJulianDay: '年内天数',
     exportZpl: '导出 ZPL',
     importCsvData: '导入 CSV 数据',
     exportBatchZplFmt: '导出批量 ZPL ({n} 个标签)',
diff --git a/src/locales/zh-hant.ts b/src/locales/zh-hant.ts
index 86e1b51..a1b2309 100644
--- a/src/locales/zh-hant.ts
+++ b/src/locales/zh-hant.ts
@@ -139,6 +139,14 @@ const zhHant = {
     keepExistingPages: '保留現有頁面',
     chooseFile: '選擇檔案',
     insertVariable: '插入變數',
+    clockYear4: '年 (4位)',
+    clockYear2: '年 (2位)',
+    clockMonth: '月',
+    clockDay: '日',
+    clockHour24: '小時 (24時)',
+    clockMinute: '分',
+    clockSecond: '秒',
+    clockJulianDay: '年內天數',
     exportZpl: '匯出 ZPL',
     importCsvData: '匯入 CSV 資料',
     exportBatchZplFmt: '匯出批次 ZPL ({n} 個標籤)',

From 41aa12b71a93a9fabdfc2b21bd2f67c68280eb43 Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Sun, 24 May 2026 15:46:57 +0200
Subject: [PATCH 3/3] fix(editor): keep textarea scrollable past MAX_ROWS +
 theme the clock colour

Address gemini's PR #93 findings:

- overflow-y-hidden meant content past MAX_ROWS was unreachable
  (no scroll, no expand). Switch to overflow-y-auto with the
  scrollbar visually hidden so wheel/keyboard scrolling still works
  and the mirror layer stays pixel-aligned (a visible scrollbar
  would shift the textarea's text origin and break the highlight).
- Hardcoded `#67c8e0` clock-marker colour replaced with a themed
  --color-info CSS var. Light + dark palettes get distinct values
  so the clock highlight stays readable on both. Picker dropdown
  consumes the same token via `text-info`.
---
 src/components/Properties/TemplateContentInput.tsx | 11 ++++++++---
 src/index.css                                      |  5 +++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/Properties/TemplateContentInput.tsx b/src/components/Properties/TemplateContentInput.tsx
index 801c317..3e69997 100644
--- a/src/components/Properties/TemplateContentInput.tsx
+++ b/src/components/Properties/TemplateContentInput.tsx
@@ -153,14 +153,19 @@ export function TemplateContentInput({
           ) : s.kind === "var" ? (
             <span key={i} className="text-accent">{s.text}</span>
           ) : (
-            <span key={i} className="text-[#67c8e0]">{s.text}</span>
+            <span key={i} className="text-info">{s.text}</span>
           ),
         )}
         {value.endsWith("\n") ? " " : ""}
       </div>
       <textarea
         ref={taRef}
-        className={`${SHARED_CLS} relative block resize-none overflow-y-hidden caret-text focus:border-accent focus:outline-none`}
+        // overflow-y-auto so content beyond MAX_ROWS stays reachable;
+        // scrollbar visually hidden because the mirror layer doesn't
+        // reserve space for one — a visible scrollbar would shift the
+        // textarea's text origin and misalign the colour highlight.
+        // Wheel + keyboard scrolling stay functional via syncScroll.
+        className={`${SHARED_CLS} relative block resize-none overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden caret-text focus:border-accent focus:outline-none`}
         style={{ color: "transparent", background: "transparent" }}
         value={value}
         maxLength={maxLength}
@@ -209,7 +214,7 @@ export function TemplateContentInput({
               className="block w-full text-left px-2 py-1 text-xs font-mono text-text hover:bg-surface-2 transition-colors"
               onClick={() => insertMarker(`clock:${token}`)}
             >
-              <span className="text-[#67c8e0]">«clock:{token}»</span>{" "}
+              <span className="text-info">«clock:{token}»</span>{" "}
               <span className="text-muted">{t.app[labelKey]}</span>
             </button>
           ))}
diff --git a/src/index.css b/src/index.css
index 7b00dc2..fb4ac79 100644
--- a/src/index.css
+++ b/src/index.css
@@ -24,6 +24,10 @@
   --color-muted:     #666666;
   --color-accent:    #f59e0b;
   --color-accent-dim:#78490a;
+  /* Secondary highlight, e.g. clock-token markers in the content
+     editor — distinct from accent so the editor can colour-code
+     marker families without collision. */
+  --color-info:      #67c8e0;
 
   --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
   --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
@@ -43,6 +47,7 @@
   --color-muted:     #52525b;
   --color-accent:    #d97706;
   --color-accent-dim:#fef3c7;
+  --color-info:      #0e7490;
 }
 
 *, *::before, *::after {