From 6cd23e71bcf0a9857c58f2a5054f81e08cd327c8 Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Fri, 22 May 2026 17:11:53 +0200
Subject: [PATCH 01/11] feat(variables): store slice, schema, design-file
 persistence (Phase 1 step 1)

Introduces the document-level Variables data model that ^FN/^FV round-trip
will build on. No UI, no parser/generator changes yet.

- new Variable type + zod schema in src/types/Variable.ts
- variableId? added to labelObjectBaseSchema
- store: variables state, addVariable/updateVariable/removeVariable
  (removeVariable strips variableId across all pages and groups)
- designFile: optional variables array, omitted when empty for back-compat
- useDesignFileActions passes variables through save/load
---
 src/hooks/useDesignFileActions.ts |   5 +-
 src/lib/designFile.test.ts        |  49 ++++++++++
 src/lib/designFile.ts             |  31 +++++-
 src/store/labelStore.test.ts      | 154 ++++++++++++++++++++++++++++++
 src/store/labelStore.ts           | 104 +++++++++++++++++++-
 src/types/Group.ts                |  27 ++++++
 src/types/ObjectType.ts           |   5 +
 src/types/Variable.ts             |  35 +++++++
 8 files changed, 402 insertions(+), 8 deletions(-)
 create mode 100644 src/types/Variable.ts

diff --git a/src/hooks/useDesignFileActions.ts b/src/hooks/useDesignFileActions.ts
index dedba464..5b5532ca 100644
--- a/src/hooks/useDesignFileActions.ts
+++ b/src/hooks/useDesignFileActions.ts
@@ -7,6 +7,7 @@ import { readFileAsText } from "../lib/readFile";
 export function useDesignFileActions() {
   const label = useLabelStore((s) => s.label);
   const pages = useLabelStore((s) => s.pages);
+  const variables = useLabelStore((s) => s.variables);
   const loadDesign = useLabelStore((s) => s.loadDesign);
   const [loadError, setLoadError] = useState<string | null>(null);
   const loadInputRef = useRef<HTMLInputElement>(null);
@@ -16,7 +17,7 @@ export function useDesignFileActions() {
   };
 
   const handleSave = () => {
-    const data = serializeDesign(label, pages);
+    const data = serializeDesign(label, pages, variables);
     triggerDownload(new Blob([data], { type: "application/json" }), "label.json");
   };
 
@@ -40,7 +41,7 @@ export function useDesignFileActions() {
     }
 
     setLoadError(null);
-    loadDesign(result.value.label, result.value.pages);
+    loadDesign(result.value.label, result.value.pages, result.value.variables);
   };
 
   return {
diff --git a/src/lib/designFile.test.ts b/src/lib/designFile.test.ts
index 8bce73c5..002718a2 100644
--- a/src/lib/designFile.test.ts
+++ b/src/lib/designFile.test.ts
@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { parseDesignFile, serializeDesign } from './designFile';
 import type { LabelObject } from '../types/Group';
+import type { Variable } from '../types/Variable';
 
 const SAMPLE_OBJECTS: LabelObject[] = [
   {
@@ -156,4 +157,52 @@ describe('parseDesignFile', () => {
     if (result.ok) return;
     expect(result.error).toBe('invalid_schema');
   });
+
+  it('roundtrips variables when present', () => {
+    const variables: Variable[] = [
+      { id: 'v1', name: 'sku', fnNumber: 1, defaultValue: 'ABC' },
+      { id: 'v2', name: 'qty', fnNumber: 2, defaultValue: '0', comment: 'Quantity' },
+    ];
+    const json = serializeDesign(
+      { widthMm: 100, heightMm: 60, dpmm: 8 },
+      [{ objects: SAMPLE_OBJECTS }],
+      variables,
+    );
+    const result = parseDesignFile(json);
+    expect(result.ok).toBe(true);
+    if (!result.ok) return;
+    expect(result.value.variables).toEqual(variables);
+  });
+
+  it('omits the variables key from JSON when empty (back-compat with older app versions)', () => {
+    const json = serializeDesign(
+      { widthMm: 100, heightMm: 60, dpmm: 8 },
+      [{ objects: SAMPLE_OBJECTS }],
+      [],
+    );
+    const parsed = JSON.parse(json) as Record<string, unknown>;
+    expect(parsed).not.toHaveProperty('variables');
+  });
+
+  it('defaults to empty variables when the JSON lacks the field', () => {
+    const json = serializeDesign(
+      { widthMm: 100, heightMm: 60, dpmm: 8 },
+      [{ objects: SAMPLE_OBJECTS }],
+    );
+    const result = parseDesignFile(json);
+    expect(result.ok).toBe(true);
+    if (!result.ok) return;
+    expect(result.value.variables).toEqual([]);
+  });
+
+  it('legacy { label, objects } shape loads with empty variables', () => {
+    const legacyJson = JSON.stringify({
+      label: { widthMm: 100, heightMm: 60, dpmm: 8 },
+      objects: SAMPLE_OBJECTS,
+    });
+    const result = parseDesignFile(legacyJson);
+    expect(result.ok).toBe(true);
+    if (!result.ok) return;
+    expect(result.value.variables).toEqual([]);
+  });
 });
diff --git a/src/lib/designFile.ts b/src/lib/designFile.ts
index fda43583..cc0fbae1 100644
--- a/src/lib/designFile.ts
+++ b/src/lib/designFile.ts
@@ -1,11 +1,16 @@
 import { z } from "zod";
 import { labelConfigSchema, labelObjectBaseSchema, type LabelConfig } from "../types/ObjectType";
+import { variableSchema, type Variable } from "../types/Variable";
 import type { LabelObject } from "../types/Group";
 import { ok, err, type Result } from "./result";
 
 export type DesignFileError = "parse_error" | "invalid_schema";
 export interface DesignFilePage { objects: LabelObject[] }
-export interface DesignFile { label: LabelConfig; pages: DesignFilePage[] }
+export interface DesignFile {
+  label: LabelConfig;
+  pages: DesignFilePage[];
+  variables: Variable[];
+}
 
 // Two distinct shapes share the base fields:
 //   * leaves carry `props` and have no `children`,
@@ -34,6 +39,8 @@ const pageSchema = z.object({ objects: z.array(labelObjectSchema) });
 const designFileSchema = z.object({
   label: labelConfigSchema,
   pages: z.array(pageSchema),
+  // Optional so designs saved before the variables feature still load.
+  variables: z.array(variableSchema).optional(),
 });
 
 const legacyDesignFileSchema = z.object({
@@ -54,7 +61,11 @@ export function parseDesignFile(text: string): Result<DesignFile, DesignFileErro
     // LabelObject[] is a discriminated union with typed props; Zod cannot
     // verify them without per-type schemas, so the cast here is intentional.
     // The registry handles unknown prop shapes gracefully at runtime.
-    return ok(current.data as unknown as DesignFile);
+    return ok({
+      label: current.data.label,
+      pages: current.data.pages as unknown as DesignFilePage[],
+      variables: current.data.variables ?? [],
+    });
   }
 
   // Legacy: { label, objects } from before multi-page support.
@@ -64,14 +75,26 @@ export function parseDesignFile(text: string): Result<DesignFile, DesignFileErro
     return ok({
       label: legacy.data.label,
       pages: [{ objects: legacy.data.objects as unknown as LabelObject[] }],
+      variables: [],
     });
   }
 
   return err("invalid_schema");
 }
 
-export function serializeDesign(label: LabelConfig, pages: DesignFilePage[]): string {
-  return JSON.stringify({ label, pages }, null, 2);
+export function serializeDesign(
+  label: LabelConfig,
+  pages: DesignFilePage[],
+  variables: Variable[] = [],
+): string {
+  // Omit `variables` from the output when empty so older versions of the
+  // app that lack the field can keep round-tripping designs untouched.
+  const payload: { label: LabelConfig; pages: DesignFilePage[]; variables?: Variable[] } = {
+    label,
+    pages,
+  };
+  if (variables.length > 0) payload.variables = variables;
+  return JSON.stringify(payload, null, 2);
 }
 
 export const designFileErrors: Record<DesignFileError, string> = {
diff --git a/src/store/labelStore.test.ts b/src/store/labelStore.test.ts
index c6482cce..d13298a1 100644
--- a/src/store/labelStore.test.ts
+++ b/src/store/labelStore.test.ts
@@ -39,6 +39,7 @@ function reset() {
     selectedIds: [],
     clipboard: [],
     pasteCount: 0,
+    variables: [],
     previewMode: { status: 'idle' },
     canvasSettings: {
       showGrid: false,
@@ -1147,3 +1148,156 @@ describe('migrateLegacy — v2→v3 circle→ellipse', () => {
     expect(migrated.pages[0]?.objects[0]).toEqual(persisted.pages[0]?.objects[0]);
   });
 });
+
+describe('variables', () => {
+  beforeEach(reset);
+
+  it('addVariable assigns sequential fnNumbers starting at 1', () => {
+    const id1 = state().addVariable({ name: 'sku' });
+    const id2 = state().addVariable({ name: 'qty' });
+    expect(id1).not.toBeNull();
+    expect(id2).not.toBeNull();
+    const vars = state().variables;
+    expect(vars).toHaveLength(2);
+    expect(vars[0]?.fnNumber).toBe(1);
+    expect(vars[1]?.fnNumber).toBe(2);
+  });
+
+  it('addVariable fills the lowest free fnNumber when earlier ones were taken explicitly', () => {
+    state().addVariable({ name: 'a', fnNumber: 3 });
+    state().addVariable({ name: 'b', fnNumber: 1 });
+    const id = state().addVariable({ name: 'c' });
+    expect(id).not.toBeNull();
+    const c = state().variables.find((v) => v.name === 'c');
+    expect(c?.fnNumber).toBe(2);
+  });
+
+  it('addVariable rejects duplicate names', () => {
+    state().addVariable({ name: 'sku' });
+    const dup = state().addVariable({ name: 'sku' });
+    expect(dup).toBeNull();
+    expect(state().variables).toHaveLength(1);
+  });
+
+  it('addVariable rejects duplicate fnNumbers', () => {
+    state().addVariable({ name: 'a', fnNumber: 5 });
+    const dup = state().addVariable({ name: 'b', fnNumber: 5 });
+    expect(dup).toBeNull();
+    expect(state().variables).toHaveLength(1);
+  });
+
+  it('addVariable rejects fnNumbers outside 1-99', () => {
+    expect(state().addVariable({ name: 'a', fnNumber: 0 })).toBeNull();
+    expect(state().addVariable({ name: 'b', fnNumber: 100 })).toBeNull();
+    expect(state().variables).toHaveLength(0);
+  });
+
+  it('addVariable rejects empty / whitespace-only names', () => {
+    expect(state().addVariable({ name: '' })).toBeNull();
+    expect(state().addVariable({ name: '   ' })).toBeNull();
+    expect(state().variables).toHaveLength(0);
+  });
+
+  it('addVariable trims the name', () => {
+    state().addVariable({ name: '  sku  ' });
+    expect(state().variables[0]?.name).toBe('sku');
+  });
+
+  it('updateVariable patches fields when valid', () => {
+    const id = defined(state().addVariable({ name: 'sku', defaultValue: 'x' }));
+    state().updateVariable(id, { defaultValue: 'y' });
+    expect(state().variables[0]?.defaultValue).toBe('y');
+  });
+
+  it('updateVariable rejects renaming to an existing name', () => {
+    state().addVariable({ name: 'a' });
+    const id = defined(state().addVariable({ name: 'b' }));
+    state().updateVariable(id, { name: 'a' });
+    expect(state().variables.find((v) => v.id === id)?.name).toBe('b');
+  });
+
+  it('updateVariable rejects fnNumber collisions', () => {
+    state().addVariable({ name: 'a', fnNumber: 1 });
+    const id = defined(state().addVariable({ name: 'b', fnNumber: 2 }));
+    state().updateVariable(id, { fnNumber: 1 });
+    expect(state().variables.find((v) => v.id === id)?.fnNumber).toBe(2);
+  });
+
+  it('removeVariable strips variableId from every bound field across pages', () => {
+    const varId = defined(state().addVariable({ name: 'sku', defaultValue: 'X' }));
+    useLabelStore.setState({
+      pages: [
+        {
+          objects: [
+            {
+              id: 'obj-1',
+              type: 'text',
+              x: 0,
+              y: 0,
+              rotation: 0,
+              variableId: varId,
+              props: { content: 'X', fontHeight: 30, fontWidth: 30, rotation: 'N' },
+            } as LabelObject,
+          ],
+        },
+        {
+          objects: [
+            {
+              id: 'grp-1',
+              type: 'group',
+              x: 0,
+              y: 0,
+              rotation: 0,
+              children: [
+                {
+                  id: 'obj-2',
+                  type: 'text',
+                  x: 0,
+                  y: 0,
+                  rotation: 0,
+                  variableId: varId,
+                  props: { content: 'X', fontHeight: 30, fontWidth: 30, rotation: 'N' },
+                } as LabelObject,
+              ],
+            } as LabelObject,
+          ],
+        },
+      ],
+    });
+
+    state().removeVariable(varId);
+
+    expect(state().variables).toHaveLength(0);
+    const page0 = state().pages[0]?.objects[0] as LabelObject & { variableId?: string };
+    expect(page0.variableId).toBeUndefined();
+    const group = state().pages[1]?.objects[0];
+    if (!group || !isGroup(group)) throw new Error('expected group');
+    const inner = group.children[0] as LabelObject & { variableId?: string };
+    expect(inner.variableId).toBeUndefined();
+  });
+
+  it('removeVariable leaves pages untouched when no field referenced the variable', () => {
+    const varId = defined(state().addVariable({ name: 'sku' }));
+    const pagesBefore = state().pages;
+    state().removeVariable(varId);
+    expect(state().pages).toBe(pagesBefore);
+  });
+
+  it('loadDesign replaces the variable list', () => {
+    state().addVariable({ name: 'a' });
+    state().loadDesign(
+      { widthMm: 50, heightMm: 30, dpmm: 8 },
+      [{ objects: [] }],
+      [{ id: 'v1', name: 'fresh', fnNumber: 7, defaultValue: '' }],
+    );
+    expect(state().variables).toEqual([
+      { id: 'v1', name: 'fresh', fnNumber: 7, defaultValue: '' },
+    ]);
+  });
+
+  it('loadDesign resets variables to empty when none supplied', () => {
+    state().addVariable({ name: 'a' });
+    state().loadDesign({ widthMm: 50, heightMm: 30, dpmm: 8 }, [{ objects: [] }]);
+    expect(state().variables).toEqual([]);
+  });
+});
diff --git a/src/store/labelStore.ts b/src/store/labelStore.ts
index 07266d0b..11152f0d 100644
--- a/src/store/labelStore.ts
+++ b/src/store/labelStore.ts
@@ -12,6 +12,7 @@ import {
   findObjectById,
   findAncestors,
   isSelfOrDescendant,
+  stripVariableIdFromObjects,
   type GroupObject,
   type LabelObject,
 } from '../types/Group';
@@ -19,8 +20,16 @@ import { locales } from '../locales';
 import type { LocaleCode } from '../locales';
 import { isDefaultLabelaryHost, fetchPreview, labelaryErrorMessage } from '../lib/labelary';
 import { generateZPL } from '../lib/zplGenerator';
+import {
+  nextFreeFnNumber,
+  FN_NUMBER_MIN,
+  FN_NUMBER_MAX,
+  type Variable,
+  type VariableInput,
+} from '../types/Variable';
 
 export type { ObjectChanges };
+export type { Variable, VariableInput };
 
 export interface Page {
   objects: LabelObject[];
@@ -142,6 +151,11 @@ interface LabelState {
   clipboard: LabelObject[];
   pasteCount: number;
 
+  /** Document-level template variables. Fields reference them via
+   *  `variableId`; export emits `^FN{fnNumber}^FD{defaultValue}^FS`.
+   *  Order is user-controlled and surfaces in the Variables panel. */
+  variables: Variable[];
+
   addObject: (
     type: string,
     position?: { x: number; y: number },
@@ -185,8 +199,22 @@ interface LabelState {
   setThirdPartyEnabled: (service: 'labelary', enabled: boolean) => void;
   acknowledgeLabelaryNotice: () => void;
   setCanvasSettings: (settings: Partial<CanvasSettings>) => void;
-  loadDesign: (label: LabelConfig, pages: Page[]) => void;
+  loadDesign: (label: LabelConfig, pages: Page[], variables?: Variable[]) => void;
   appendPages: (pages: Page[]) => void;
+
+  /** Create a new variable. Returns the new id, or null when all 99
+   *  `^FN` slots are taken (or the supplied fnNumber is out of range /
+   *  already used). Callers should surface null to the user. */
+  addVariable: (input: VariableInput) => string | null;
+  /** Patch fields on an existing variable. Validates uniqueness of
+   *  `name` and `fnNumber` and clamps `fnNumber` to [1, 99]; rejects
+   *  silently (no-op) on conflict so callers don't have to handle errors
+   *  for every keystroke. */
+  updateVariable: (id: string, changes: Partial<Omit<Variable, 'id'>>) => void;
+  /** Delete a variable and unbind every field that referenced it across
+   *  every page. The field's own content prop (kept since binding) takes
+   *  over on render/export. */
+  removeVariable: (id: string) => void;
   moveObjectForward: (id: string) => void;
   moveObjectBackward: (id: string) => void;
   moveObjectToFront: (id: string) => void;
@@ -409,6 +437,7 @@ export const useLabelStore = create<LabelState>()(
       selectedIds: [],
       clipboard: [],
       pasteCount: 0,
+      variables: [],
       locale: detectLocale(),
       theme: detectInitialTheme(),
       thirdParty: thirdPartyDefaults(),
@@ -792,7 +821,7 @@ export const useLabelStore = create<LabelState>()(
           });
         }),
 
-      loadDesign: (label, pages) =>
+      loadDesign: (label, pages, variables) =>
         set((state) => {
           if (selectPreviewLocksEditor(state)) return {};
           return {
@@ -800,6 +829,7 @@ export const useLabelStore = create<LabelState>()(
             pages: pages.length > 0 ? pages : [{ objects: [] }],
             currentPageIndex: 0,
             selectedIds: [],
+            variables: variables ?? [],
           };
         }),
 
@@ -915,6 +945,74 @@ export const useLabelStore = create<LabelState>()(
           return { currentPageIndex: index, selectedIds: [] };
         }),
 
+      addVariable: (input) => {
+        const state = get();
+        if (selectPreviewLocksEditor(state)) return null;
+        const trimmedName = input.name.trim();
+        if (trimmedName === '') return null;
+        if (state.variables.some((v) => v.name === trimmedName)) return null;
+
+        let fnNumber: number;
+        if (input.fnNumber !== undefined) {
+          if (input.fnNumber < FN_NUMBER_MIN || input.fnNumber > FN_NUMBER_MAX) return null;
+          if (state.variables.some((v) => v.fnNumber === input.fnNumber)) return null;
+          fnNumber = input.fnNumber;
+        } else {
+          const next = nextFreeFnNumber(state.variables.map((v) => v.fnNumber));
+          if (next === null) return null;
+          fnNumber = next;
+        }
+
+        const variable: Variable = {
+          id: crypto.randomUUID(),
+          name: trimmedName,
+          fnNumber,
+          defaultValue: input.defaultValue ?? '',
+          ...(input.comment !== undefined ? { comment: input.comment } : {}),
+        };
+        set((s) => ({ variables: [...s.variables, variable] }));
+        return variable.id;
+      },
+
+      updateVariable: (id, changes) =>
+        set((state) => {
+          if (selectPreviewLocksEditor(state)) return {};
+          const existing = state.variables.find((v) => v.id === id);
+          if (!existing) return {};
+
+          if (changes.name !== undefined) {
+            const trimmed = changes.name.trim();
+            if (trimmed === '') return {};
+            if (state.variables.some((v) => v.id !== id && v.name === trimmed)) return {};
+            changes = { ...changes, name: trimmed };
+          }
+          if (changes.fnNumber !== undefined) {
+            if (changes.fnNumber < FN_NUMBER_MIN || changes.fnNumber > FN_NUMBER_MAX) return {};
+            if (state.variables.some((v) => v.id !== id && v.fnNumber === changes.fnNumber)) return {};
+          }
+
+          return {
+            variables: state.variables.map((v) => (v.id === id ? { ...v, ...changes } : v)),
+          };
+        }),
+
+      removeVariable: (id) =>
+        set((state) => {
+          if (selectPreviewLocksEditor(state)) return {};
+          if (!state.variables.some((v) => v.id === id)) return {};
+          let pagesChanged = false;
+          const nextPages = state.pages.map((p) => {
+            const stripped = stripVariableIdFromObjects(p.objects, id);
+            if (stripped === p.objects) return p;
+            pagesChanged = true;
+            return { ...p, objects: stripped };
+          });
+          return {
+            variables: state.variables.filter((v) => v.id !== id),
+            ...(pagesChanged ? { pages: nextPages } : {}),
+          };
+        }),
+
       enterPreviewMode: async () => {
         const state = get();
         if (state.previewMode.status === 'loading' || state.previewMode.status === 'active') {
@@ -982,6 +1080,7 @@ export const useLabelStore = create<LabelState>()(
         // first run's env value and quietly defeat later build flips.
         labelaryNoticeAcknowledged: state.labelaryNoticeAcknowledged,
         canvasSettings: state.canvasSettings,
+        variables: state.variables,
       }),
     }
     ),
@@ -990,6 +1089,7 @@ export const useLabelStore = create<LabelState>()(
         label: state.label,
         pages: state.pages,
         currentPageIndex: state.currentPageIndex,
+        variables: state.variables,
       }),
     }
   )
diff --git a/src/types/Group.ts b/src/types/Group.ts
index 48173ee3..d205593c 100644
--- a/src/types/Group.ts
+++ b/src/types/Group.ts
@@ -131,6 +131,33 @@ export function mapObjectById(
   return changed ? next : objects;
 }
 
+/**
+ * Returns a new tree with every leaf's `variableId` cleared when it matches
+ * `variableId`. Recurses into groups. Identity-preserving like
+ * `mapObjectById`: subtrees that hold no matching binding keep their
+ * original references so the store can short-circuit the page update.
+ */
+export function stripVariableIdFromObjects(
+  objects: LabelObject[],
+  variableId: string,
+): LabelObject[] {
+  let changed = false;
+  const next = objects.map((o) => {
+    if (isGroup(o)) {
+      const newChildren = stripVariableIdFromObjects(o.children, variableId);
+      if (newChildren === o.children) return o;
+      changed = true;
+      return { ...o, children: newChildren };
+    }
+    if (o.variableId !== variableId) return o;
+    changed = true;
+    const cleared: LabelObject = { ...o };
+    delete cleared.variableId;
+    return cleared;
+  });
+  return changed ? next : objects;
+}
+
 /**
  * Returns the tree with `id` removed and the removed node, or `null`
  * for the node when nothing matched. Used by reparenting flows that
diff --git a/src/types/ObjectType.ts b/src/types/ObjectType.ts
index f969d3e6..4ce84696 100644
--- a/src/types/ObjectType.ts
+++ b/src/types/ObjectType.ts
@@ -112,6 +112,11 @@ export const labelObjectBaseSchema = z.object({
    *  Leaves currently fall back to their registry label; the field lives
    *  on the base so naming leaves later is a UI-only change. */
   name: z.string().optional(),
+  /** When set, the field's render/export content comes from the referenced
+   *  Variable's defaultValue (or future data source). The field's own
+   *  content prop is kept as fallback when the binding is removed.
+   *  Exported as `^FN{n}^FD{default}^FS` instead of plain `^FD{content}^FS`. */
+  variableId: z.string().optional(),
 });
 
 export type LabelObjectBase = z.infer<typeof labelObjectBaseSchema>;
diff --git a/src/types/Variable.ts b/src/types/Variable.ts
new file mode 100644
index 00000000..61e7a13b
--- /dev/null
+++ b/src/types/Variable.ts
@@ -0,0 +1,35 @@
+import { z } from "zod";
+
+/** Hard bounds on `^FN` numbers in classic ZPL: 1-99. Newer firmware allows
+ *  more, but staying inside the historical range keeps output portable. */
+export const FN_NUMBER_MIN = 1;
+export const FN_NUMBER_MAX = 99;
+
+export const variableSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  fnNumber: z.number().int().min(FN_NUMBER_MIN).max(FN_NUMBER_MAX),
+  defaultValue: z.string(),
+  comment: z.string().optional(),
+});
+
+export type Variable = z.infer<typeof variableSchema>;
+
+export interface VariableInput {
+  name: string;
+  defaultValue?: string;
+  /** Explicit slot. When omitted, the store assigns the next free number. */
+  fnNumber?: number;
+  comment?: string;
+}
+
+/** Returns the lowest unused fnNumber in [1, 99], or null when all 99 slots
+ *  are taken. Callers should surface the null case to the UI rather than
+ *  silently dropping the add. */
+export function nextFreeFnNumber(used: readonly number[]): number | null {
+  const taken = new Set(used);
+  for (let n = FN_NUMBER_MIN; n <= FN_NUMBER_MAX; n++) {
+    if (!taken.has(n)) return n;
+  }
+  return null;
+}

From b60599e677a17ec1ec79947f0663137300d733d2 Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Fri, 22 May 2026 17:31:46 +0200
Subject: [PATCH 02/11] feat(variables): ^FN/^FV round-trip in parser,
 generator and importer (Phase 1 step 2)

Text and barcode emitters now consult ctx.variables: when an object
carries variableId pointing at a known variable, the field block becomes
^FN{n}^FD{default}^FS so the printer treats it as a template slot.
Parser walks the same path in reverse and reconstructs Variables from
^FN slots, deriving names from immediately-preceding ^FX comments.

- ZplEmitContext.variables threaded from generator into every emitter
- fdFieldFor helper in zplHelpers wraps fdField with FN handling
- 9 emitters (text + 8 barcode types) switched to fdFieldFor
- Parser: ^FN handler + flushField binding, accumulator returned in ParsedZPL
- variableNameFromComment + shared uniqueVariableName helper
- zplImportService merges variables across multi-page blocks by fnNumber
  with id remap so bindings survive the merge
- ZplImportModal threads importedVariables into loadDesign;
  append-mode intentionally drops them (no merge dialog yet)
- All callers of generate(Multi)PageZPL and printLabel pass variables
- 12 new tests: parser binding, generator emission, round-trip,
  orphan handling, out-of-range ^FN
---
 src/components/Output/ZPLOutput.tsx      |  3 +-
 src/components/Output/ZplImportModal.tsx | 23 +++++--
 src/hooks/useZplImportExport.ts          |  7 ++-
 src/lib/printPreview.ts                  |  9 ++-
 src/lib/zplGenerator.test.ts             | 53 +++++++++++++++++
 src/lib/zplGenerator.ts                  | 17 ++++--
 src/lib/zplImportService.ts              | 49 ++++++++++++++-
 src/lib/zplParser.test.ts                | 39 ++++++++++++
 src/lib/zplParser.ts                     | 76 +++++++++++++++++++++++-
 src/registry/aztec.tsx                   |  6 +-
 src/registry/barcode1d.tsx               |  6 +-
 src/registry/codablock.tsx               |  6 +-
 src/registry/datamatrix.tsx              |  6 +-
 src/registry/gs1databar.tsx              |  6 +-
 src/registry/micropdf417.tsx             |  6 +-
 src/registry/pdf417.tsx                  |  6 +-
 src/registry/qrcode.tsx                  | 10 +++-
 src/registry/text.tsx                    |  4 +-
 src/registry/zplHelpers.ts               | 24 ++++++++
 src/store/labelStore.test.ts             |  6 +-
 src/store/labelStore.ts                  |  2 +-
 src/types/ObjectType.ts                  | 15 +++--
 src/types/Variable.ts                    | 15 +++++
 23 files changed, 340 insertions(+), 54 deletions(-)

diff --git a/src/components/Output/ZPLOutput.tsx b/src/components/Output/ZPLOutput.tsx
index 1eb65052..0809f585 100644
--- a/src/components/Output/ZPLOutput.tsx
+++ b/src/components/Output/ZPLOutput.tsx
@@ -15,6 +15,7 @@ export function ZPLOutput({ collapsed, onCollapse, onExpand }: Props) {
   const t = useT();
   const label = useLabelStore((s) => s.label);
   const pages = useLabelStore((s) => s.pages);
+  const variables = useLabelStore((s) => s.variables);
   const labelaryEnabled = useLabelStore((s) => s.thirdParty.labelary);
   const noticeRequired = useLabelStore(selectLabelaryNoticeRequired);
   const previewMode = useLabelStore((s) => s.previewMode);
@@ -24,7 +25,7 @@ export function ZPLOutput({ collapsed, onCollapse, onExpand }: Props) {
   const [showNotice, setShowNotice] = useState(false);
 
   const hasObjects = pages.some((p) => p.objects.length > 0);
-  const zpl = hasObjects ? generateMultiPageZPL(label, pages) : '';
+  const zpl = hasObjects ? generateMultiPageZPL(label, pages, variables) : '';
 
   const previewActive =
     previewMode.status === 'loading' || previewMode.status === 'active';
diff --git a/src/components/Output/ZplImportModal.tsx b/src/components/Output/ZplImportModal.tsx
index 277e51bb..a0539032 100644
--- a/src/components/Output/ZplImportModal.tsx
+++ b/src/components/Output/ZplImportModal.tsx
@@ -4,6 +4,7 @@ import { importZplText } from '../../lib/zplImportService';
 import { readFileAsText } from '../../lib/readFile';
 import { useLabelStore, type Page } from '../../store/labelStore';
 import type { LabelConfig } from '../../types/ObjectType';
+import type { Variable } from '../../types/Variable';
 import { formatReportAsText, type ImportReport, type ImportResult } from '../../lib/importReport';
 import { ImportSummaryBody } from './ImportSummary';
 import { useT } from '../../lib/useT';
@@ -33,14 +34,21 @@ export function ZplImportModal({ onClose }: Props) {
   const hasExistingContent =
     pages.length > 1 || (pages[0]?.objects.length ?? 0) > 0;
 
-  const applyImport = (labelConfig: Partial<LabelConfig>, importedPages: Page[]) => {
+  const applyImport = (
+    labelConfig: Partial<LabelConfig>,
+    importedPages: Page[],
+    importedVariables: Variable[],
+  ) => {
     if (appendMode && hasExistingContent) {
       // Keep the current label config: the user opted to keep the
       // existing design's dimensions, so any imported ^PW/^LL is
-      // intentionally discarded.
+      // intentionally discarded. Imported variables are dropped too —
+      // append-mode preserves the current Variables tab; merging here
+      // would risk name/fnNumber collisions the user can't see in the
+      // dialog. Round-trip from a saved design uses Save/Load, not Append.
       appendPages(importedPages);
     } else {
-      loadDesign({ ...label, ...labelConfig }, importedPages);
+      loadDesign({ ...label, ...labelConfig }, importedPages, importedVariables);
     }
   };
 
@@ -62,13 +70,18 @@ export function ZplImportModal({ onClose }: Props) {
   // source-specific error they surface; everything past that point is
   // identical, so it lives here.
   const processImport = (text: string) => {
-    const { labelConfig, pages: importedPages, report } = importZplText(text, label.dpmm);
+    const {
+      labelConfig,
+      pages: importedPages,
+      variables: importedVariables,
+      report,
+    } = importZplText(text, label.dpmm);
     const totalObjects = importedPages.reduce((s, p) => s + p.objects.length, 0);
     if (totalObjects === 0 && Object.keys(labelConfig).length === 0) {
       setError('No supported objects found in the ZPL code.');
       return;
     }
-    applyImport(labelConfig, importedPages);
+    applyImport(labelConfig, importedPages, importedVariables);
     finishImport(totalObjects, report);
   };
 
diff --git a/src/hooks/useZplImportExport.ts b/src/hooks/useZplImportExport.ts
index df7fdb2f..4efb54a2 100644
--- a/src/hooks/useZplImportExport.ts
+++ b/src/hooks/useZplImportExport.ts
@@ -8,13 +8,14 @@ import { labelaryErrorMessage } from "../lib/labelary";
 export function useZplImportExport() {
   const label = useLabelStore((s) => s.label);
   const pages = useLabelStore((s) => s.pages);
+  const variables = useLabelStore((s) => s.variables);
   const objects = useCurrentObjects();
   const [showZplImport, setShowZplImport] = useState(false);
   const [showZebraPrint, setShowZebraPrint] = useState(false);
   const [printError, setPrintError] = useState<string | null>(null);
 
   const handleDownload = () => {
-    const zpl = generateMultiPageZPL(label, pages);
+    const zpl = generateMultiPageZPL(label, pages, variables);
     triggerDownload(new Blob([zpl], { type: "text/plain" }), "label.zpl");
   };
 
@@ -22,7 +23,7 @@ export function useZplImportExport() {
   // only the current page so the preview matches what the user sees.
   const handlePrint = async () => {
     try {
-      await printLabel(label, objects);
+      await printLabel(label, objects, variables);
     } catch (e) {
       setPrintError(labelaryErrorMessage(e));
     }
@@ -35,7 +36,7 @@ export function useZplImportExport() {
     showZebraPrint,
     openZebraPrint: () => setShowZebraPrint(true),
     closeZebraPrint: () => setShowZebraPrint(false),
-    currentZpl: () => generateMultiPageZPL(label, pages),
+    currentZpl: () => generateMultiPageZPL(label, pages, variables),
     printError,
     dismissPrintError: () => setPrintError(null),
     handleDownload,
diff --git a/src/lib/printPreview.ts b/src/lib/printPreview.ts
index e205c928..2a439a63 100644
--- a/src/lib/printPreview.ts
+++ b/src/lib/printPreview.ts
@@ -2,6 +2,7 @@ import { generateZPL } from "./zplGenerator";
 import { fetchPreview } from "./labelary";
 import type { LabelConfig } from "../types/ObjectType";
 import type { LabelObject } from "../types/Group";
+import type { Variable } from "../types/Variable";
 
 export function buildLoadingHtml(): string {
   return `<html><head><style>
@@ -20,7 +21,11 @@ export function buildPrintHtml(imageUrl: string): string {
   </html>`;
 }
 
-export async function printLabel(label: LabelConfig, objects: LabelObject[]): Promise<void> {
+export async function printLabel(
+  label: LabelConfig,
+  objects: LabelObject[],
+  variables: readonly Variable[] = [],
+): Promise<void> {
   // Open the window synchronously (inside the user-click call stack) so browsers
   // don't treat it as a popup. Fill it in once the Labelary preview arrives.
   const win = window.open("", "_blank");
@@ -29,7 +34,7 @@ export async function printLabel(label: LabelConfig, objects: LabelObject[]): Pr
   win.document.close();
 
   try {
-    const zpl = generateZPL(label, objects);
+    const zpl = generateZPL(label, objects, variables);
     const url = await fetchPreview(zpl, label);
     win.document.open();
     win.document.write(buildPrintHtml(url));
diff --git a/src/lib/zplGenerator.test.ts b/src/lib/zplGenerator.test.ts
index 15973df1..2fea936c 100644
--- a/src/lib/zplGenerator.test.ts
+++ b/src/lib/zplGenerator.test.ts
@@ -747,3 +747,56 @@ describe('generateZPL — groups', () => {
     expect(zpl).not.toContain('Hidden');
   });
 });
+
+describe('generateZPL — variable bindings', () => {
+  const variable = {
+    id: 'var-1',
+    name: 'sku',
+    fnNumber: 7,
+    defaultValue: 'ABC-123',
+  };
+
+  const textObj = {
+    id: 'obj-1',
+    type: 'text',
+    x: 50,
+    y: 50,
+    rotation: 0,
+    variableId: 'var-1',
+    props: {
+      content: 'placeholder',
+      fontHeight: 30,
+      fontWidth: 0,
+      rotation: 'N',
+    },
+  } as unknown as LabelObject;
+
+  it('emits ^FN{n} before the field and uses the variable default as ^FD payload', () => {
+    const zpl = generateZPL(BASE_LABEL, [textObj], [variable]);
+    expect(zpl).toContain('^FN7^FDABC-123^FS');
+    expect(zpl).not.toContain('placeholder');
+  });
+
+  it('falls back to literal content when no variables are supplied', () => {
+    const zpl = generateZPL(BASE_LABEL, [textObj]);
+    expect(zpl).toContain('placeholder');
+    expect(zpl).not.toContain('^FN');
+  });
+
+  it('falls back to literal content when the binding is orphaned', () => {
+    const zpl = generateZPL(BASE_LABEL, [textObj], [
+      { ...variable, id: 'different-id' },
+    ]);
+    expect(zpl).toContain('placeholder');
+    expect(zpl).not.toContain('^FN');
+  });
+
+  it('round-trips a bound text field through parse → variables stay consistent', () => {
+    const out = generateZPL(BASE_LABEL, [textObj], [variable]);
+    const { variables, objects } = parseZPL(out);
+    expect(variables).toHaveLength(1);
+    expect(variables[0]?.fnNumber).toBe(7);
+    expect(variables[0]?.defaultValue).toBe('ABC-123');
+    expect(objects[0]?.variableId).toBe(variables[0]?.id);
+  });
+});
diff --git a/src/lib/zplGenerator.ts b/src/lib/zplGenerator.ts
index 909ebd72..5234236b 100644
--- a/src/lib/zplGenerator.ts
+++ b/src/lib/zplGenerator.ts
@@ -3,6 +3,7 @@ import { ObjectRegistry } from '../registry';
 import { stripZplCommandChars } from '../registry/zplHelpers';
 import type { CustomFontMapping, LabelConfig } from '../types/ObjectType';
 import type { Page } from '../store/labelStore';
+import type { Variable } from '../types/Variable';
 import { isGroup, type LabelObject } from '../types/Group';
 import { getFontBytes } from './fontCache';
 import type { ImageProps } from '../registry/image';
@@ -82,11 +83,19 @@ function formatGraphicUpload(p: ImageProps): string | undefined {
  * Concatenates `generateZPL` output for every page. Each page becomes its own
  * `^XA...^XZ` block; printers process the blocks as separate labels.
  */
-export function generateMultiPageZPL(label: LabelConfig, pages: Page[]): string {
-  return pages.map((p) => generateZPL(label, p.objects)).join('\n');
+export function generateMultiPageZPL(
+  label: LabelConfig,
+  pages: Page[],
+  variables: readonly Variable[] = [],
+): string {
+  return pages.map((p) => generateZPL(label, p.objects, variables)).join('\n');
 }
 
-export function generateZPL(label: LabelConfig, objects: LabelObject[]): string {
+export function generateZPL(
+  label: LabelConfig,
+  objects: LabelObject[],
+  variables: readonly Variable[] = [],
+): string {
   const widthDots = mmToDots(label.widthMm, label.dpmm);
   const heightDots = mmToDots(label.heightMm, label.dpmm);
 
@@ -220,7 +229,7 @@ export function generateZPL(label: LabelConfig, objects: LabelObject[]): string
   const emitLeaf = (obj: LabelObject): string[] => {
     if (obj.includeInExport === false) return [];
     if (isGroup(obj)) return obj.children.flatMap(emitLeaf);
-    const zpl = ObjectRegistry[obj.type]?.toZPL(obj, { label }) ?? '';
+    const zpl = ObjectRegistry[obj.type]?.toZPL(obj, { label, variables }) ?? '';
     return obj.comment
       ? [`^FX${stripZplCommandChars(obj.comment)}\n${zpl}`]
       : [zpl];
diff --git a/src/lib/zplImportService.ts b/src/lib/zplImportService.ts
index db3f2ab9..991a6c32 100644
--- a/src/lib/zplImportService.ts
+++ b/src/lib/zplImportService.ts
@@ -1,10 +1,12 @@
 import { parseZPL, type ImportFinding, type ImportFindingKind, type ImportReport } from "./zplParser";
 import type { LabelConfig } from "../types/ObjectType";
 import type { LabelObject } from "../types/Group";
+import { uniqueVariableName, type Variable } from "../types/Variable";
 
 export interface ZplImportResult {
   labelConfig: Partial<LabelConfig>;
   pages: { objects: LabelObject[] }[];
+  variables: Variable[];
   report: ImportReport;
 }
 
@@ -29,6 +31,7 @@ export function importZplText(zpl: string, dpmm: number): ZplImportResult {
     return {
       labelConfig: {},
       pages: [],
+      variables: [],
       report: { findings: [], partial: [], browserLimit: [], unknown: [] },
     };
   }
@@ -36,9 +39,35 @@ export function importZplText(zpl: string, dpmm: number): ZplImportResult {
   let labelConfig: Partial<LabelConfig> = {};
   const pages: { objects: LabelObject[] }[] = [];
   const findings: ImportFinding[] = [];
+  // Variables are document-level, but the parser reconstructs them per
+  // block. Merge across blocks by fnNumber (same slot used on multiple
+  // pages → one Variable) and rewire later blocks' object references
+  // onto the first block's Variable so the binding survives the merge.
+  const variables: Variable[] = [];
+  const variablesByFn = new Map<number, Variable>();
 
   blocks.forEach((block, i) => {
     const result = parseZPL(block, dpmm);
+    const idRemap = new Map<string, string>();
+    for (const v of result.variables) {
+      const existing = variablesByFn.get(v.fnNumber);
+      if (existing) {
+        idRemap.set(v.id, existing.id);
+      } else {
+        const remappedName = uniqueVariableName(v.name, variables);
+        const kept: Variable = { ...v, name: remappedName };
+        variables.push(kept);
+        variablesByFn.set(kept.fnNumber, kept);
+        if (kept.name !== v.name) idRemap.set(v.id, kept.id);
+      }
+    }
+    // Apply id remap to this block's objects so their `variableId`
+    // points at the merged Variable rather than the orphaned per-block
+    // entry. Walks into groups for completeness even though the parser
+    // doesn't currently produce groups.
+    if (idRemap.size > 0) {
+      rewireBindings(result.objects, idRemap);
+    }
     pages.push({ objects: result.objects });
     if (i === 0) {
       labelConfig = result.labelConfig;
@@ -63,5 +92,23 @@ export function importZplText(zpl: string, dpmm: number): ZplImportResult {
     unknown: dedupBy('unknown'),
   };
 
-  return { labelConfig, pages, report };
+  return { labelConfig, pages, variables, report };
+}
+
+/** In-place rewrite of `variableId` references on freshly-parsed objects
+ *  (not yet in the store, so mutation is safe). Lets the importer dedupe
+ *  cross-block variables without re-walking the tree to construct
+ *  immutable copies. */
+function rewireBindings(
+  objects: LabelObject[],
+  idRemap: ReadonlyMap<string, string>,
+): void {
+  for (const obj of objects) {
+    if (obj.variableId && idRemap.has(obj.variableId)) {
+      obj.variableId = idRemap.get(obj.variableId);
+    }
+    if (obj.type === "group" && "children" in obj) {
+      rewireBindings(obj.children, idRemap);
+    }
+  }
 }
diff --git a/src/lib/zplParser.test.ts b/src/lib/zplParser.test.ts
index 68d54d2b..c8fdb4db 100644
--- a/src/lib/zplParser.test.ts
+++ b/src/lib/zplParser.test.ts
@@ -1276,3 +1276,42 @@ describe('parseZPL — ^FO with justification parameter', () => {
     expect(props(objects[0]).content).toBe('Justified');
   });
 });
+
+describe('^FN / template variables', () => {
+  it('creates a Variable for each distinct ^FN and binds the field', () => {
+    const zpl = '^XA^FO10,20^A0N,30,30^FN1^FDDefault^FS^XZ';
+    const { objects, variables } = parseZPL(zpl);
+    expect(variables).toHaveLength(1);
+    expect(variables[0]?.fnNumber).toBe(1);
+    expect(variables[0]?.defaultValue).toBe('Default');
+    expect(variables[0]?.name).toBe('field_1');
+    expect(objects[0]?.variableId).toBe(variables[0]?.id);
+  });
+
+  it('derives the Variable name from a preceding ^FX comment', () => {
+    const zpl = '^XA^FXField: Customer Name^FO10,20^A0N,30,30^FN1^FDJohn^FS^XZ';
+    const { variables } = parseZPL(zpl);
+    expect(variables[0]?.name).toBe('Customer_Name');
+  });
+
+  it('reuses the same Variable when multiple fields share an fnNumber', () => {
+    const zpl =
+      '^XA' +
+      '^FO10,20^A0N,30,30^FN1^FDA^FS' +
+      '^FO10,60^A0N,30,30^FN1^FDA^FS' +
+      '^XZ';
+    const { objects, variables } = parseZPL(zpl);
+    expect(variables).toHaveLength(1);
+    const [a, b] = objects;
+    expect(a?.variableId).toBe(variables[0]?.id);
+    expect(b?.variableId).toBe(variables[0]?.id);
+  });
+
+  it('ignores out-of-range ^FN numbers and records a partial finding', () => {
+    const zpl = '^XA^FO10,20^A0N,30,30^FN0^FDIgnored^FS^XZ';
+    const { variables, objects, importReport } = parseZPL(zpl);
+    expect(variables).toHaveLength(0);
+    expect(objects[0]?.variableId).toBeUndefined();
+    expect(importReport.partial).toContain('^FN');
+  });
+});
diff --git a/src/lib/zplParser.ts b/src/lib/zplParser.ts
index 0f806e25..324b53b5 100644
--- a/src/lib/zplParser.ts
+++ b/src/lib/zplParser.ts
@@ -1,4 +1,10 @@
 import type { CustomFontMapping, LabelConfig } from "../types/ObjectType";
+import {
+  FN_NUMBER_MIN,
+  FN_NUMBER_MAX,
+  uniqueVariableName,
+  type Variable,
+} from "../types/Variable";
 import { zplAnchorToModel } from "../components/Canvas/textPositionTransforms";
 import { computeTextRenderMetrics } from "../components/Canvas/textRenderMetrics";
 import type { LabelObject } from "../types/Group";
@@ -72,6 +78,11 @@ export interface ImportReport {
 export interface ParsedZPL {
   labelConfig: Partial<LabelConfig>;
   objects: LabelObject[];
+  /** Template variables reconstructed from `^FN` slots. The parser creates
+   *  one entry per distinct fnNumber it sees and points every bound
+   *  object's `variableId` at the matching entry. Empty when no `^FN`
+   *  appeared in the block. */
+  variables: Variable[];
   /** All commands that were not fully imported (browserLimit + unknown).
    *  Kept for backward compatibility; prefer importReport for categorised access. */
   skipped: string[];
@@ -122,6 +133,21 @@ function makeObj(
   } as unknown as LabelObject;
 }
 
+/** Derive a Variable name from a `^FX` comment that landed just before the
+ *  `^FN`. Strips well-known annotation prefixes (`Field:`, `Variable:`,
+ *  `Var:`) so a comment like "Field: Customer Name" becomes `Customer_Name`.
+ *  Returns null when the comment is missing or sanitises to empty — the
+ *  caller falls back to `field_{n}`. */
+function variableNameFromComment(comment: string | undefined): string | null {
+  if (!comment) return null;
+  const cleaned = comment
+    .replace(/^\s*(field|variable|var)\s*[:-]\s*/i, "")
+    .trim()
+    .replace(/\s+/g, "_");
+  return cleaned === "" ? null : cleaned;
+}
+
+
 /**
  * Map a ^CI N parameter to a TextDecoder label. Most labels printed by this
  * app use ^CI28 (UTF-8); ^CI27 is Windows-1252 (Zebra default for many EU
@@ -496,12 +522,19 @@ export function parseZPL(zpl: string, dpmm = 8): ParsedZPL {
   const tokens = tokenize(zpl);
   const objects: LabelObject[] = [];
   const labelConfig: Partial<LabelConfig> = {};
+  const variables: Variable[] = [];
   const skipped: string[] = [];
   const partialCmds = new Set<string>(); // deduplicates partial-import command codes
   const browserLimit: string[] = [];
   const unknown: string[] = [];
   let pendingComment: string | undefined;
 
+  /** `^FN{n}` slot pending application to the next field flushed. Snapshot
+   *  of `pendingComment` is kept separately so a later `^FX` that lands
+   *  between `^FN` and `^FS` doesn't pollute the variable's auto-name. */
+  let pendingFn: number | null = null;
+  let pendingFnComment: string | undefined;
+
   /** Consume and return the pending ^FX comment, then clear it. */
   const takeComment = (): string | undefined => {
     const c = pendingComment;
@@ -922,6 +955,31 @@ export function parseZPL(zpl: string, dpmm = 8): ParsedZPL {
         break;
     }
 
+    // Apply the pending `^FN{n}` slot (if any) to the field we just
+    // pushed. Reuse an existing Variable when its fnNumber matches —
+    // ZPL templates often reference the same slot multiple times,
+    // and the binding should funnel to one Variable, not duplicates.
+    if (pendingFn !== null) {
+      const justPushed = objects[objects.length - 1];
+      if (justPushed) {
+        let variable = variables.find((v) => v.fnNumber === pendingFn);
+        if (!variable) {
+          const fallback = `field_${pendingFn}`;
+          const base = variableNameFromComment(pendingFnComment) ?? fallback;
+          variable = {
+            id: crypto.randomUUID(),
+            name: uniqueVariableName(base, variables),
+            fnNumber: pendingFn,
+            defaultValue: content,
+          };
+          variables.push(variable);
+        }
+        justPushed.variableId = variable.id;
+      }
+      pendingFn = null;
+      pendingFnComment = undefined;
+    }
+
     fieldType = null;
     pendingFD = null;
     frActive = false;
@@ -1793,9 +1851,20 @@ export function parseZPL(zpl: string, dpmm = 8): ParsedZPL {
       if (!enc.supported) partialCmds.add(`^CI${int(p[0])}`);
     },
 
-    // These commands carry no canvas-design information and are silently
-    // discarded so they do not pollute importReport.unknown.
-    FN: noop, // field number — variable data placeholder (template feature)
+    // ^FN{n}: declares that the next field is a template slot. The
+    // accompanying ^FD payload becomes the slot's default value at
+    // flushField time. Out-of-range numbers (Zebra accepts 0/100+ on
+    // newer firmware, but our model caps at 99) are ignored so they
+    // don't poison the binding.
+    FN: (p) => {
+      const n = int(p[0]);
+      if (n < FN_NUMBER_MIN || n > FN_NUMBER_MAX) {
+        partialCmds.add("^FN");
+        return;
+      }
+      pendingFn = n;
+      pendingFnComment = pendingComment;
+    },
     FV: noop, // field variable — supplies data for ^FN at print time
     FC: noop, // field clock — inserts date/time (requires printer RTC)
     FE: noop, // field concatenation — appends data to current field
@@ -1884,6 +1953,7 @@ export function parseZPL(zpl: string, dpmm = 8): ParsedZPL {
   return {
     labelConfig,
     objects,
+    variables,
     skipped,
     importReport: {
       findings,
diff --git a/src/registry/aztec.tsx b/src/registry/aztec.tsx
index 262fd882..faf65fe4 100644
--- a/src/registry/aztec.tsx
+++ b/src/registry/aztec.tsx
@@ -1,7 +1,7 @@
 import type { ObjectTypeDefinition } from "../types/ObjectType";
 import { useT } from "../lib/useT";
 import { inputCls, labelCls } from "../components/Properties/styles";
-import { fieldPos, fdField } from "./zplHelpers";
+import { fieldPos, fdFieldFor } from "./zplHelpers";
 import { commitUniformScaleTransform } from "./transformHelpers";
 import { type ZplRotation } from "./rotation";
 import { RotationSelect } from "../components/Properties/RotationSelect";
@@ -35,7 +35,7 @@ export const aztec: ObjectTypeDefinition<AztecProps> = {
 
   commitTransform: commitUniformScaleTransform('magnification', MAGNIFICATION_MIN, MAGNIFICATION_MAX),
 
-  toZPL: (obj) => {
+  toZPL: (obj, ctx) => {
     const p = obj.props;
     // ^B0 a,b,c,d,e,f,g = orientation, magnification, ecic, errorControl,
     // menuSymbol, numberOfSymbols, structuredID. ecLevel=0 is Zebra's
@@ -43,7 +43,7 @@ export const aztec: ObjectTypeDefinition<AztecProps> = {
     return [
       fieldPos(obj),
       `^B0${p.rotation},${p.magnification},N,${p.ecLevel}`,
-      fdField(p.content),
+      fdFieldFor(obj, p.content, ctx),
     ].join("");
   },
 
diff --git a/src/registry/barcode1d.tsx b/src/registry/barcode1d.tsx
index a04f960c..1906e8fd 100644
--- a/src/registry/barcode1d.tsx
+++ b/src/registry/barcode1d.tsx
@@ -2,7 +2,7 @@ import type { ObjectTypeDefinition, ObjectGroup, LabelObjectBase } from '../type
 import { useT } from '../lib/useT';
 import type { Translations } from '../locales';
 import { inputCls, labelCls } from '../components/Properties/styles';
-import { fieldPos, fdField } from './zplHelpers';
+import { fieldPos, fdFieldFor } from './zplHelpers';
 import { commitBarcodeWidthHeightTransform } from './transformHelpers';
 import { filterContent, type ContentSpec } from './contentSpec';
 import { type ZplRotation } from './rotation';
@@ -79,7 +79,7 @@ export function createBarcode1D(config: Barcode1DConfig): ObjectTypeDefinition<B
       ? undefined
       : commitBarcodeWidthHeightTransform,
 
-    toZPL: (obj: LabelObjectBase & { props: Barcode1DProps }) => {
+    toZPL: (obj: LabelObjectBase & { props: Barcode1DProps }, ctx) => {
       // Normalize printInterpretation for symbologies that have no HRI in ZPL
       // (e.g. ^BR). This protects against legacy saved objects that still carry
       // printInterpretation: true from emitting an out-of-spec interpretation flag.
@@ -93,7 +93,7 @@ export function createBarcode1D(config: Barcode1DConfig): ObjectTypeDefinition<B
         byCmd,
         fieldPos(obj),
         config.zplCommand(p),
-        fdField(p.content),
+        fdFieldFor(obj, p.content, ctx),
       ].filter(Boolean).join('');
     },
 
diff --git a/src/registry/codablock.tsx b/src/registry/codablock.tsx
index b325a655..e5a5104d 100644
--- a/src/registry/codablock.tsx
+++ b/src/registry/codablock.tsx
@@ -1,7 +1,7 @@
 import type { ObjectTypeDefinition } from "../types/ObjectType";
 import { useT } from "../lib/useT";
 import { inputCls, labelCls } from "../components/Properties/styles";
-import { fieldPos, fdField } from "./zplHelpers";
+import { fieldPos, fdFieldFor } from "./zplHelpers";
 import { commitStacked2DTransform } from "./transformHelpers";
 import { type ZplRotation } from "./rotation";
 import { RotationSelect } from "../components/Properties/RotationSelect";
@@ -30,14 +30,14 @@ export const codablock: ObjectTypeDefinition<CodablockProps> = {
 
   commitTransform: commitStacked2DTransform,
 
-  toZPL: (obj) => {
+  toZPL: (obj, ctx) => {
     const p = obj.props;
     // ^BB{orientation},{rowHeight},{security},{numCharsPerRow},{numRows},{mode}
     return [
       `^BY${p.moduleWidth}`,
       fieldPos(obj),
       `^BB${p.rotation},${p.rowHeight},${p.securityLevel}`,
-      fdField(p.content),
+      fdFieldFor(obj, p.content, ctx),
     ]
       .filter(Boolean)
       .join("");
diff --git a/src/registry/datamatrix.tsx b/src/registry/datamatrix.tsx
index b72f4d04..613eaa0b 100644
--- a/src/registry/datamatrix.tsx
+++ b/src/registry/datamatrix.tsx
@@ -1,7 +1,7 @@
 import type { ObjectTypeDefinition } from '../types/ObjectType';
 import { useT } from '../lib/useT';
 import { inputCls, labelCls } from '../components/Properties/styles';
-import { fieldPos, fdField } from './zplHelpers';
+import { fieldPos, fdFieldFor } from './zplHelpers';
 import { commitUniformScaleTransform } from './transformHelpers';
 import { type ZplRotation } from './rotation';
 import { RotationSelect } from '../components/Properties/RotationSelect';
@@ -31,12 +31,12 @@ export const datamatrix: ObjectTypeDefinition<DataMatrixProps> = {
 
   commitTransform: commitUniformScaleTransform('dimension', DIMENSION_MIN, DIMENSION_MAX),
 
-  toZPL: (obj) => {
+  toZPL: (obj, ctx) => {
     const p = obj.props;
     return [
       fieldPos(obj),
       `^BX${p.rotation},${p.dimension},${p.quality}`,
-      fdField(p.content),
+      fdFieldFor(obj, p.content, ctx),
     ].join('');
   },
 
diff --git a/src/registry/gs1databar.tsx b/src/registry/gs1databar.tsx
index 1645b225..27015432 100644
--- a/src/registry/gs1databar.tsx
+++ b/src/registry/gs1databar.tsx
@@ -1,7 +1,7 @@
 import type { ObjectTypeDefinition, LabelObjectBase } from '../types/ObjectType';
 import { useT } from '../lib/useT';
 import { inputCls, labelCls } from '../components/Properties/styles';
-import { fieldPos, fdField } from './zplHelpers';
+import { fieldPos, fdFieldFor } from './zplHelpers';
 import { filterContent } from './contentSpec';
 import { type ZplRotation } from './rotation';
 import { RotationSelect } from '../components/Properties/RotationSelect';
@@ -50,12 +50,12 @@ export const gs1databar: ObjectTypeDefinition<Gs1DatabarProps> = {
   defaultSize: { width: 300, height: 120 },
   heightLocked: true,
 
-  toZPL: (obj: LabelObjectBase & { props: Gs1DatabarProps }) => {
+  toZPL: (obj: LabelObjectBase & { props: Gs1DatabarProps }, ctx) => {
     const p = obj.props;
     // ^BRo,s,m,sep,h[,sg] — segments must only be present for Expanded Stacked (7).
     // Including segments on sym 1–6 makes Labelary stack the symbol (wrong rendering).
     const segs = p.symbology === 7 ? `,${p.segments ?? GS1_DATABAR_DEFAULT_SEGMENTS}` : '';
-    return `^BY${p.moduleWidth}${fieldPos(obj)}^BR${p.rotation},${p.symbology},${p.moduleWidth},2,${ZPL_HEIGHT_PLACEHOLDER}${segs}${fdField(p.content)}`;
+    return `^BY${p.moduleWidth}${fieldPos(obj)}^BR${p.rotation},${p.symbology},${p.moduleWidth},2,${ZPL_HEIGHT_PLACEHOLDER}${segs}${fdFieldFor(obj, p.content, ctx)}`;
   },
 
   PropertiesPanel: ({ obj, onChange }) => {
diff --git a/src/registry/micropdf417.tsx b/src/registry/micropdf417.tsx
index 3e41218b..a5393033 100644
--- a/src/registry/micropdf417.tsx
+++ b/src/registry/micropdf417.tsx
@@ -1,7 +1,7 @@
 import type { ObjectTypeDefinition } from "../types/ObjectType";
 import { useT } from "../lib/useT";
 import { inputCls, labelCls } from "../components/Properties/styles";
-import { fieldPos, fdField } from "./zplHelpers";
+import { fieldPos, fdFieldFor } from "./zplHelpers";
 import { commitStacked2DTransform } from "./transformHelpers";
 import { type ZplRotation } from "./rotation";
 import { RotationSelect } from "../components/Properties/RotationSelect";
@@ -30,14 +30,14 @@ export const micropdf417: ObjectTypeDefinition<MicroPdf417Props> = {
 
   commitTransform: commitStacked2DTransform,
 
-  toZPL: (obj) => {
+  toZPL: (obj, ctx) => {
     const p = obj.props;
     // ^BF{orientation},{rowHeight},{mode}
     return [
       `^BY${p.moduleWidth}`,
       fieldPos(obj),
       `^BF${p.rotation},${p.rowHeight},${p.mode}`,
-      fdField(p.content),
+      fdFieldFor(obj, p.content, ctx),
     ]
       .filter(Boolean)
       .join("");
diff --git a/src/registry/pdf417.tsx b/src/registry/pdf417.tsx
index 4364e992..854356b7 100644
--- a/src/registry/pdf417.tsx
+++ b/src/registry/pdf417.tsx
@@ -1,7 +1,7 @@
 import type { ObjectTypeDefinition } from "../types/ObjectType";
 import { useT } from "../lib/useT";
 import { inputCls, labelCls } from "../components/Properties/styles";
-import { fieldPos, fdField } from "./zplHelpers";
+import { fieldPos, fdFieldFor } from "./zplHelpers";
 import { commitStacked2DTransform } from "./transformHelpers";
 import { type ZplRotation } from "./rotation";
 import { RotationSelect } from "../components/Properties/RotationSelect";
@@ -32,13 +32,13 @@ export const pdf417: ObjectTypeDefinition<Pdf417Props> = {
 
   commitTransform: commitStacked2DTransform,
 
-  toZPL: (obj) => {
+  toZPL: (obj, ctx) => {
     const p = obj.props;
     return [
       `^BY${p.moduleWidth}`,
       fieldPos(obj),
       `^B7${p.rotation},${p.rowHeight},${p.securityLevel},${p.columns},,,`,
-      fdField(p.content),
+      fdFieldFor(obj, p.content, ctx),
     ]
       .filter(Boolean)
       .join("");
diff --git a/src/registry/qrcode.tsx b/src/registry/qrcode.tsx
index e9519430..64d1848e 100644
--- a/src/registry/qrcode.tsx
+++ b/src/registry/qrcode.tsx
@@ -1,7 +1,7 @@
 import type { ObjectTypeDefinition } from '../types/ObjectType';
 import { useT } from '../lib/useT';
 import { inputCls, labelCls } from '../components/Properties/styles';
-import { fieldPos, fdField } from './zplHelpers';
+import { fieldPos, fdFieldFor } from './zplHelpers';
 import { commitUniformScaleTransform } from './transformHelpers';
 import { type ZplRotation } from './rotation';
 import { RotationSelect } from '../components/Properties/RotationSelect';
@@ -31,12 +31,16 @@ export const qrcode: ObjectTypeDefinition<QrCodeProps> = {
 
   commitTransform: commitUniformScaleTransform('magnification', MAGNIFICATION_MIN, MAGNIFICATION_MAX),
 
-  toZPL: (obj) => {
+  toZPL: (obj, ctx) => {
     const p = obj.props;
+    // ZPL prefixes the QR payload with `{ec}A,` inside ^FD. When the field
+    // is bound to a variable, the variable's defaultValue stands in for the
+    // full payload including that prefix — Phase 1 keeps fdFieldFor honest
+    // and one-shot; smarter QR-data-only binding is a Phase 2 concern.
     return [
       fieldPos(obj),
       `^BQ${p.rotation},2,${p.magnification}`,
-      fdField(`${p.errorCorrection}A,${p.content}`),
+      fdFieldFor(obj, `${p.errorCorrection}A,${p.content}`, ctx),
     ].join('');
   },
 
diff --git a/src/registry/text.tsx b/src/registry/text.tsx
index 8c7d6288..7b298f4d 100644
--- a/src/registry/text.tsx
+++ b/src/registry/text.tsx
@@ -2,7 +2,7 @@ import { useRef, useState, useCallback } from "react";
 import type { ObjectTypeDefinition } from "../types/ObjectType";
 import { useT } from "../lib/useT";
 import { buttonCls, inputCls, labelCls } from "../components/Properties/styles";
-import { textFieldPos, fdField, resolveFontCmd, wrapReverse } from "./zplHelpers";
+import { textFieldPos, fdFieldFor, resolveFontCmd, wrapReverse } from "./zplHelpers";
 import { effectiveScale } from "./transformHelpers";
 import { getFont, loadFontFile } from "../lib/fontCache";
 import { getAvailableFontIds, stripDrivePrefix } from "../lib/customFonts";
@@ -68,7 +68,7 @@ export const text: ObjectTypeDefinition<TextProps> = {
     const fbCmd = p.blockWidth
       ? `^FB${p.blockWidth},${p.blockLines ?? 1},${p.blockLineSpacing ?? 0},${p.blockJustify ?? "L"},0`
       : "";
-    const body = [textFieldPos(obj), fontCmd, fbCmd, fdField(p.content)]
+    const body = [textFieldPos(obj), fontCmd, fbCmd, fdFieldFor(obj, p.content, ctx)]
       .filter(Boolean)
       .join("");
     return wrapReverse(p.reverse, body);
diff --git a/src/registry/zplHelpers.ts b/src/registry/zplHelpers.ts
index 70c5d4a7..2edc8ab3 100644
--- a/src/registry/zplHelpers.ts
+++ b/src/registry/zplHelpers.ts
@@ -107,3 +107,27 @@ export function fdField(payload: string): string {
   const escaped = payload.replace(/[\^~_]/g, hex);
   return `^FH${FH_DELIM}^FD${escaped}^FS`;
 }
+
+/**
+ * Emit the content block for a bindable field. When `obj.variableId`
+ * points at a known variable in `ctx.variables`, the block becomes
+ * `^FN{n}` followed by `fdField(default)` — the printer treats it as a
+ * template slot whose default mirrors the editor canvas. Otherwise
+ * falls back to the plain `fdField(content)` path, so emitters can
+ * unconditionally route through here.
+ *
+ * Orphan bindings (variableId set but not in the variables list) fall
+ * back to literal content too — keeps export stable when a partial
+ * state slips through (mid-edit, malformed import).
+ */
+export function fdFieldFor(
+  obj: LabelObjectBase,
+  content: string,
+  ctx?: ZplEmitContext,
+): string {
+  const id = obj.variableId;
+  if (!id || !ctx?.variables) return fdField(content);
+  const variable = ctx.variables.find((v) => v.id === id);
+  if (!variable) return fdField(content);
+  return `^FN${variable.fnNumber}${fdField(variable.defaultValue)}`;
+}
diff --git a/src/store/labelStore.test.ts b/src/store/labelStore.test.ts
index d13298a1..d2346128 100644
--- a/src/store/labelStore.test.ts
+++ b/src/store/labelStore.test.ts
@@ -1268,12 +1268,10 @@ describe('variables', () => {
     state().removeVariable(varId);
 
     expect(state().variables).toHaveLength(0);
-    const page0 = state().pages[0]?.objects[0] as LabelObject & { variableId?: string };
-    expect(page0.variableId).toBeUndefined();
+    expect(state().pages[0]?.objects[0]?.variableId).toBeUndefined();
     const group = state().pages[1]?.objects[0];
     if (!group || !isGroup(group)) throw new Error('expected group');
-    const inner = group.children[0] as LabelObject & { variableId?: string };
-    expect(inner.variableId).toBeUndefined();
+    expect(group.children[0]?.variableId).toBeUndefined();
   });
 
   it('removeVariable leaves pages untouched when no field referenced the variable', () => {
diff --git a/src/store/labelStore.ts b/src/store/labelStore.ts
index 11152f0d..b877c4c5 100644
--- a/src/store/labelStore.ts
+++ b/src/store/labelStore.ts
@@ -1019,7 +1019,7 @@ export const useLabelStore = create<LabelState>()(
           return;
         }
         const objs = currentObjects(state);
-        const zpl = generateZPL(state.label, objs);
+        const zpl = generateZPL(state.label, objs, state.variables);
         // Toggling preview off then on for a side-by-side pixel compare
         // shouldn't burn an API call when nothing changed.
         const cachedUrl = previewCache.get(zpl);
diff --git a/src/types/ObjectType.ts b/src/types/ObjectType.ts
index 4ce84696..0b776950 100644
--- a/src/types/ObjectType.ts
+++ b/src/types/ObjectType.ts
@@ -1,5 +1,6 @@
 import type React from 'react';
 import { z } from 'zod';
+import type { Variable } from './Variable';
 
 /** A single font mapping. Three row shapes are supported so the editor
  *  can stay 1:1 with what the printer renders:
@@ -139,12 +140,18 @@ export interface TransformContext {
 }
 
 /** Context passed to `toZPL` so leaf emit functions can reach
- *  label-wide state (default font ID, ^CW alias map, etc.). Optional —
- *  most types ignore it; only text/serial currently care about the
- *  default font fallback. Tests calling `toZPL` directly can omit
- *  `ctx` and get the no-default-context branch. */
+ *  label-wide state (default font ID, ^CW alias map, variables, etc.).
+ *  Optional — most types ignore it; text/serial use it for the default
+ *  font fallback, text/barcode emitters consult `variables` when an
+ *  object's `variableId` is set. Tests calling `toZPL` directly can omit
+ *  `ctx` and get the no-binding / no-default-context branches. */
 export interface ZplEmitContext {
   label: LabelConfig;
+  /** Document-level variables. When a field carries `variableId` pointing
+   *  at one of these, the emitter writes `^FN{n}^FD{default}^FS` so the
+   *  printer treats the field as a template slot. Absent / empty: every
+   *  field emits its own literal content. */
+  variables?: readonly Variable[];
 }
 
 export interface ObjectTypeDefinition<P extends object = object> {
diff --git a/src/types/Variable.ts b/src/types/Variable.ts
index 61e7a13b..65f2fb21 100644
--- a/src/types/Variable.ts
+++ b/src/types/Variable.ts
@@ -33,3 +33,18 @@ export function nextFreeFnNumber(used: readonly number[]): number | null {
   }
   return null;
 }
+
+/** Append `_2`, `_3`, … to `base` until it no longer collides with any
+ *  existing variable's name. Shared between the parser (auto-naming from
+ *  ^FX comments) and the importer (merging across multi-page blocks)
+ *  so both paths produce the same disambiguation pattern. */
+export function uniqueVariableName(
+  base: string,
+  existing: readonly Variable[],
+): string {
+  const taken = new Set(existing.map((v) => v.name));
+  if (!taken.has(base)) return base;
+  let i = 2;
+  while (taken.has(`${base}_${i}`)) i++;
+  return `${base}_${i}`;
+}

From 8ecc161d8610f644b37cf9d42f3ee981d47443bd Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Fri, 22 May 2026 17:43:40 +0200
Subject: [PATCH 03/11] feat(variables): VariablesPanel component (Phase 1 step
 3a)

Standalone CRUD UI for document variables: add, rename, change ^FN slot,
edit default value, delete with confirm. Not yet wired into the right
sidebar tabs (that lands in step 3c). Hardcoded English copy marked for
locale extraction in step 3d.

- inline name/slot/default editors with commit-on-blur to avoid store
  thrashing on each keystroke
- per-row error hint when the store rejects an update (name/slot
  collision, out-of-range slot)
- delete dialog surfaces binding count so the user knows what gets
  unbound
- add button auto-picks the lowest free var_N name and ^FN slot via
  the existing nextFreeFnNumber helper
---
 src/components/Variables/VariablesPanel.tsx | 295 ++++++++++++++++++++
 1 file changed, 295 insertions(+)
 create mode 100644 src/components/Variables/VariablesPanel.tsx

diff --git a/src/components/Variables/VariablesPanel.tsx b/src/components/Variables/VariablesPanel.tsx
new file mode 100644
index 00000000..c16f6da6
--- /dev/null
+++ b/src/components/Variables/VariablesPanel.tsx
@@ -0,0 +1,295 @@
+import { useState, type ChangeEvent } from 'react';
+import { PlusIcon, TrashIcon } from '@heroicons/react/16/solid';
+import { useLabelStore } from '../../store/labelStore';
+import {
+  FN_NUMBER_MIN,
+  FN_NUMBER_MAX,
+  nextFreeFnNumber,
+  type Variable,
+} from '../../types/Variable';
+import { walkObjects, type LabelObject } from '../../types/Group';
+import { inputCls, labelCls } from '../Properties/styles';
+import { ConfirmDialog } from '../ui/ConfirmDialog';
+
+/* i18n: literal strings in this file are scheduled for locale extraction in
+ *  Phase 1 step 3d. Keep them in one place so the sweep is mechanical. */
+const COPY = {
+  panelHint:
+    'Variables hold defaults that ZPL ^FN/^FV slots reference at print time. Bind a text or barcode field from its Properties tab.',
+  add: 'Add variable',
+  empty: 'No variables yet.',
+  nameLabel: 'Name',
+  fnLabel: 'Slot',
+  defaultLabel: 'Default',
+  removeAria: (name: string) => `Remove variable ${name}`,
+  bindingsBadge: (n: number) => (n === 1 ? '1 binding' : `${n} bindings`),
+  noBindings: 'unused',
+  deleteMessage: (name: string, count: number) =>
+    count === 0
+      ? `Delete variable "${name}"? It is not bound to any field.`
+      : `Delete variable "${name}"? It is bound to ${count} field${count === 1 ? '' : 's'}; they will be unbound and fall back to their last literal value.`,
+  deleteConfirm: 'Delete',
+  deleteCancel: 'Cancel',
+  noSlotsLeft: 'All 99 slots are taken.',
+  nameInUse: 'Name already in use.',
+  slotInUse: 'Slot already in use.',
+} as const;
+
+export function VariablesPanel() {
+  const variables = useLabelStore((s) => s.variables);
+  const pages = useLabelStore((s) => s.pages);
+  const addVariable = useLabelStore((s) => s.addVariable);
+  const updateVariable = useLabelStore((s) => s.updateVariable);
+  const removeVariable = useLabelStore((s) => s.removeVariable);
+
+  const [pendingDelete, setPendingDelete] = useState<Variable | null>(null);
+
+  // Per-row local rejection state. The store silently no-ops invalid
+  // updates (collision / range), so the input would visually snap back
+  // without explanation. Tracking the rejection here lets us flash a
+  // one-line hint under the offending input.
+  const [rowError, setRowError] = useState<Record<string, string>>({});
+  /** Panel-wide message for the one case that has no row to attach to:
+   *  add-variable rejected because all 99 slots are taken. */
+  const [panelError, setPanelError] = useState<string | null>(null);
+
+  const bindingCounts = countBindings(pages, variables);
+  const allSlotsTaken =
+    nextFreeFnNumber(variables.map((v) => v.fnNumber)) === null;
+
+  const handleAdd = () => {
+    const base = nextDefaultName(variables);
+    const id = addVariable({ name: base });
+    if (id === null) {
+      // Name collisions on a fresh `var_n` are essentially impossible
+      // since `n` is unique; the only realistic null path is exhausted
+      // ^FN slots.
+      setPanelError(COPY.noSlotsLeft);
+      return;
+    }
+    setPanelError(null);
+  };
+
+  const setRowMsg = (id: string, msg: string) =>
+    setRowError((prev) => ({ ...prev, [id]: msg }));
+
+  const tryUpdate = (id: string, changes: Partial<Variable>, errKey: string) => {
+    const before = variables.find((v) => v.id === id);
+    updateVariable(id, changes);
+    const after = useLabelStore.getState().variables.find((v) => v.id === id);
+    // The store applies updates by reference replacement; if nothing
+    // changed the rejection happened (uniqueness / range). `before` is a
+    // snapshot of the pre-update entry, so reference equality means the
+    // store kept the old one verbatim.
+    if (before && after === before) {
+      setRowMsg(id, errKey);
+    } else {
+      setRowError((prev) => {
+        if (!(id in prev)) return prev;
+        // Rebuild without the cleared key — dynamic delete is linted out
+        // for hot-paths; this rebuild is fine for a per-row state update.
+        const next: Record<string, string> = {};
+        for (const [k, msg] of Object.entries(prev)) {
+          if (k !== id) next[k] = msg;
+        }
+        return next;
+      });
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      <p className="font-mono text-[10px] text-muted leading-relaxed">
+        {COPY.panelHint}
+      </p>
+
+      {variables.length === 0 ? (
+        <p className="font-mono text-[10px] text-muted italic">{COPY.empty}</p>
+      ) : (
+        <ul className="flex flex-col gap-3">
+          {variables.map((v) => (
+            <VariableRow
+              key={v.id}
+              variable={v}
+              bindings={bindingCounts.get(v.id) ?? 0}
+              error={rowError[v.id]}
+              onChangeName={(name) =>
+                tryUpdate(v.id, { name }, COPY.nameInUse)
+              }
+              onChangeFnNumber={(fnNumber) =>
+                tryUpdate(v.id, { fnNumber }, COPY.slotInUse)
+              }
+              onChangeDefault={(defaultValue) =>
+                tryUpdate(v.id, { defaultValue }, '')
+              }
+              onRequestDelete={() => setPendingDelete(v)}
+            />
+          ))}
+        </ul>
+      )}
+
+      <button
+        onClick={handleAdd}
+        disabled={allSlotsTaken}
+        className="flex items-center gap-1.5 px-2 py-1.5 rounded text-xs font-mono border border-dashed border-border text-muted hover:text-text hover:border-border-2 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+      >
+        <PlusIcon className="w-3.5 h-3.5" />
+        {COPY.add}
+      </button>
+
+      {panelError && (
+        <p className="font-mono text-[10px] text-amber-400">{panelError}</p>
+      )}
+
+      {pendingDelete && (
+        <ConfirmDialog
+          message={COPY.deleteMessage(
+            pendingDelete.name,
+            bindingCounts.get(pendingDelete.id) ?? 0,
+          )}
+          confirmLabel={COPY.deleteConfirm}
+          cancelLabel={COPY.deleteCancel}
+          destructive
+          onConfirm={() => {
+            removeVariable(pendingDelete.id);
+            setPendingDelete(null);
+          }}
+          onCancel={() => setPendingDelete(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+interface RowProps {
+  variable: Variable;
+  bindings: number;
+  error?: string;
+  onChangeName: (next: string) => void;
+  onChangeFnNumber: (next: number) => void;
+  onChangeDefault: (next: string) => void;
+  onRequestDelete: () => void;
+}
+
+function VariableRow({
+  variable,
+  bindings,
+  error,
+  onChangeName,
+  onChangeFnNumber,
+  onChangeDefault,
+  onRequestDelete,
+}: RowProps) {
+  // Mirror inputs locally so the user can transiently type invalid values
+  // (empty name, mid-edit number) without the store snapping them back on
+  // each keystroke. Commit on blur. Known limitation: an external store
+  // update to the same id (undo, file load) does not flow back into this
+  // local mirror — the user would need to blur and re-focus. Accepted
+  // for Phase 1 because the alternative (effect-based sync) introduced
+  // focus-stealing and setState-in-render bugs.
+  const [name, setName] = useState(variable.name);
+  const [fn, setFn] = useState(String(variable.fnNumber));
+  const [def, setDef] = useState(variable.defaultValue);
+
+  const commitName = () => {
+    const trimmed = name.trim();
+    if (trimmed === '' || trimmed === variable.name) {
+      setName(variable.name);
+      return;
+    }
+    onChangeName(trimmed);
+  };
+
+  const commitFn = () => {
+    const n = parseInt(fn, 10);
+    if (Number.isNaN(n) || n === variable.fnNumber) {
+      setFn(String(variable.fnNumber));
+      return;
+    }
+    onChangeFnNumber(n);
+  };
+
+  const commitDef = () => {
+    if (def === variable.defaultValue) return;
+    onChangeDefault(def);
+  };
+
+  return (
+    <li className="flex flex-col gap-1.5">
+      <div className="flex items-end gap-2">
+        <div className="flex-1 flex flex-col gap-0.5">
+          <label className={labelCls}>{COPY.nameLabel}</label>
+          <input
+            className={inputCls}
+            value={name}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+            onBlur={commitName}
+          />
+        </div>
+        <div className="w-14 flex flex-col gap-0.5">
+          <label className={labelCls}>{COPY.fnLabel}</label>
+          <input
+            type="number"
+            min={FN_NUMBER_MIN}
+            max={FN_NUMBER_MAX}
+            className={inputCls}
+            value={fn}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => setFn(e.target.value)}
+            onBlur={commitFn}
+          />
+        </div>
+        <button
+          onClick={onRequestDelete}
+          aria-label={COPY.removeAria(variable.name)}
+          className="p-1.5 rounded text-muted hover:text-amber-400 hover:bg-surface-2 transition-colors"
+        >
+          <TrashIcon className="w-3.5 h-3.5" />
+        </button>
+      </div>
+      <div className="flex flex-col gap-0.5">
+        <label className={labelCls}>{COPY.defaultLabel}</label>
+        <input
+          className={inputCls}
+          value={def}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setDef(e.target.value)}
+          onBlur={commitDef}
+        />
+      </div>
+      <div className="flex justify-between items-center font-mono text-[9px] uppercase tracking-wider text-muted">
+        <span>
+          {bindings === 0 ? COPY.noBindings : COPY.bindingsBadge(bindings)}
+        </span>
+        {error && <span className="text-amber-400">{error}</span>}
+      </div>
+    </li>
+  );
+}
+
+/** Walk every page (groups too) and tally how many fields reference each
+ *  variable. Returns a Map keyed by variable.id. Variables with no
+ *  bindings are absent from the map; callers default to 0. */
+function countBindings(
+  pages: { objects: LabelObject[] }[],
+  variables: readonly Variable[],
+): Map<string, number> {
+  const known = new Set(variables.map((v) => v.id));
+  const counts = new Map<string, number>();
+  for (const page of pages) {
+    for (const obj of walkObjects(page.objects)) {
+      if (obj.variableId && known.has(obj.variableId)) {
+        counts.set(obj.variableId, (counts.get(obj.variableId) ?? 0) + 1);
+      }
+    }
+  }
+  return counts;
+}
+
+/** `var_{n}` where n is the lowest integer that yields a unique name.
+ *  Keeps the user from having to type a name to add an entry while still
+ *  giving each one a distinct default. */
+function nextDefaultName(existing: readonly Variable[]): string {
+  const taken = new Set(existing.map((v) => v.name));
+  let i = 1;
+  while (taken.has(`var_${i}`)) i++;
+  return `var_${i}`;
+}

From a306a08886b5b6f008408ee58141593868b4e7fa Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Fri, 22 May 2026 17:54:59 +0200
Subject: [PATCH 04/11] feat(variables): icon-only right-sidebar tabs with
 Variables tab (Phase 1 step 3c)

Extract the four right-sidebar tabs (Properties, Layers, Variables, Fonts)
into a dedicated RightSidebar component. Switch from text-only tabs to
icon-only with title + aria-label tooltips, fitting four tabs into the
256px column without truncation. AppShell loses ~40 lines of tab markup.

- new RightSidebar component owns rightTab state and panel routing
- icons: AdjustmentsHorizontalIcon (properties), RectangleStackIcon
  (layers), VariableIcon (variables), inline AaIcon (fonts, no fitting
  heroicon available)
- AppShell delegates to RightSidebar via canvasRef prop
- Variables tab label is a literal English fallback marked for locale
  extraction in step 3d
---
 src/components/AppShell.tsx                  | 45 +-----------
 src/components/RightSidebar/AaIcon.tsx       | 31 ++++++++
 src/components/RightSidebar/RightSidebar.tsx | 74 ++++++++++++++++++++
 3 files changed, 107 insertions(+), 43 deletions(-)
 create mode 100644 src/components/RightSidebar/AaIcon.tsx
 create mode 100644 src/components/RightSidebar/RightSidebar.tsx

diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index 07a62fb4..c5eea6be 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -3,9 +3,7 @@ import { DndContext, PointerSensor, useSensor, useSensors } from "@dnd-kit/core"
 import { ObjectPalette } from "./Palette/ObjectPalette";
 import { LabelCanvas } from "./Canvas/LabelCanvas";
 import type { LabelCanvasHandle } from "./Canvas/LabelCanvas";
-import { PropertiesPanel } from "./Properties/PropertiesPanel";
-import { LayersPanel } from "./Properties/LayersPanel";
-import { FontManager } from "./Fonts/FontManager";
+import { RightSidebar } from "./RightSidebar/RightSidebar";
 import { ZPLOutput } from "./Output/ZPLOutput";
 import { ZplImportModal } from "./Output/ZplImportModal";
 import { PrintToZebraDialog } from "./Output/PrintToZebraDialog";
@@ -66,7 +64,6 @@ export function AppShell() {
   const canvasSettings = useLabelStore((s) => s.canvasSettings);
   const setCanvasSettings = useLabelStore((s) => s.setCanvasSettings);
   const { showGrid, snapEnabled, snapSizeMm, unit } = canvasSettings;
-  const [rightTab, setRightTab] = useState<"properties" | "layers" | "fonts">("properties");
 
   const canUndo = pastStates.length > 0;
   const canRedo = futureStates.length > 0;
@@ -290,45 +287,7 @@ export function AppShell() {
           />
         </main>
 
-        <aside className="w-64 shrink-0 border-l border-border bg-surface flex flex-col">
-          <div className="flex shrink-0 border-b border-border">
-            <button
-              onClick={() => setRightTab("properties")}
-              className={`flex-1 py-2 text-xs font-medium transition-colors ${
-                rightTab === "properties"
-                  ? "text-accent border-b-2 border-accent"
-                  : "text-muted hover:text-text"
-              }`}
-            >
-              {t.layers.propertiesTab}
-            </button>
-            <button
-              onClick={() => setRightTab("layers")}
-              className={`flex-1 py-2 text-xs font-medium transition-colors ${
-                rightTab === "layers"
-                  ? "text-accent border-b-2 border-accent"
-                  : "text-muted hover:text-text"
-              }`}
-            >
-              {t.layers.layersTab}
-            </button>
-            <button
-              onClick={() => setRightTab("fonts")}
-              className={`flex-1 py-2 text-xs font-medium transition-colors ${
-                rightTab === "fonts"
-                  ? "text-accent border-b-2 border-accent"
-                  : "text-muted hover:text-text"
-              }`}
-            >
-              {t.layers.fontsTab}
-            </button>
-          </div>
-          <div className="flex-1 overflow-y-auto">
-            {rightTab === "properties" && <PropertiesPanel canvasRef={canvasRef} />}
-            {rightTab === "layers" && <LayersPanel />}
-            {rightTab === "fonts" && <FontManager />}
-          </div>
-        </aside>
+        <RightSidebar canvasRef={canvasRef} />
       </div>
       </DndContext>
 
diff --git a/src/components/RightSidebar/AaIcon.tsx b/src/components/RightSidebar/AaIcon.tsx
new file mode 100644
index 00000000..beb8bea4
--- /dev/null
+++ b/src/components/RightSidebar/AaIcon.tsx
@@ -0,0 +1,31 @@
+/**
+ * Compact "Aa" glyph used as the Fonts tab icon. Heroicons has no
+ * typography-themed icon at the right weight, so we inline a 16×16 SVG
+ * that mirrors their stroke / fill aesthetic (currentColor, solid
+ * sans glyphs centred on the viewBox). Sized in `em` via the `w-3.5
+ * h-3.5` Tailwind utilities applied at the call site, matching every
+ * other heroicon used in the tab strip.
+ */
+export function AaIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true"
+      className={className}
+    >
+      <text
+        x="50%"
+        y="55%"
+        textAnchor="middle"
+        dominantBaseline="middle"
+        fontFamily="system-ui, sans-serif"
+        fontSize="11"
+        fontWeight="700"
+        fontStyle="normal"
+      >
+        Aa
+      </text>
+    </svg>
+  );
+}
diff --git a/src/components/RightSidebar/RightSidebar.tsx b/src/components/RightSidebar/RightSidebar.tsx
new file mode 100644
index 00000000..e52cc2e1
--- /dev/null
+++ b/src/components/RightSidebar/RightSidebar.tsx
@@ -0,0 +1,74 @@
+import { useState, type ComponentType, type RefObject } from 'react';
+import {
+  AdjustmentsHorizontalIcon,
+  RectangleStackIcon,
+  VariableIcon,
+} from '@heroicons/react/16/solid';
+import { PropertiesPanel } from '../Properties/PropertiesPanel';
+import { LayersPanel } from '../Properties/LayersPanel';
+import { FontManager } from '../Fonts/FontManager';
+import { VariablesPanel } from '../Variables/VariablesPanel';
+import { useT } from '../../lib/useT';
+import type { LabelCanvasHandle } from '../Canvas/LabelCanvas';
+import { AaIcon } from './AaIcon';
+
+type TabId = 'properties' | 'layers' | 'variables' | 'fonts';
+
+interface Props {
+  canvasRef: RefObject<LabelCanvasHandle | null>;
+}
+
+interface TabDef {
+  id: TabId;
+  /** Tooltip + aria-label. Icons in the strip are otherwise unlabelled. */
+  label: string;
+  Icon: ComponentType<{ className?: string }>;
+}
+
+export function RightSidebar({ canvasRef }: Props) {
+  const t = useT();
+  const [tab, setTab] = useState<TabId>('properties');
+
+  // Ordering rule: selection scope first (Properties), then document-wide
+  // concerns by usage frequency (Layers, Variables, Fonts).
+  const tabs: TabDef[] = [
+    { id: 'properties', label: t.layers.propertiesTab, Icon: AdjustmentsHorizontalIcon },
+    { id: 'layers', label: t.layers.layersTab, Icon: RectangleStackIcon },
+    // i18n: variables tab label gets a locale key in Phase 1 step 3d.
+    { id: 'variables', label: 'Variables', Icon: VariableIcon },
+    { id: 'fonts', label: t.layers.fontsTab, Icon: AaIcon },
+  ];
+
+  return (
+    <aside className="w-64 shrink-0 border-l border-border bg-surface flex flex-col">
+      <div className="flex shrink-0 border-b border-border" role="tablist">
+        {tabs.map(({ id, label, Icon }) => {
+          const active = tab === id;
+          return (
+            <button
+              key={id}
+              role="tab"
+              aria-selected={active}
+              aria-label={label}
+              title={label}
+              onClick={() => setTab(id)}
+              className={`flex-1 flex items-center justify-center py-2 transition-colors ${
+                active
+                  ? 'text-accent border-b-2 border-accent'
+                  : 'text-muted hover:text-text'
+              }`}
+            >
+              <Icon className="w-4 h-4" />
+            </button>
+          );
+        })}
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        {tab === 'properties' && <PropertiesPanel canvasRef={canvasRef} />}
+        {tab === 'layers' && <LayersPanel />}
+        {tab === 'variables' && <VariablesPanel />}
+        {tab === 'fonts' && <FontManager />}
+      </div>
+    </aside>
+  );
+}

From e78dcde86330246850db35d02e992943b79df76e Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Fri, 22 May 2026 18:56:57 +0200
Subject: [PATCH 05/11] feat(variables): per-field info tooltips, ZPL jargon
 out of always-visible copy

Move ZPL command codes (^FN, ^FD, ^FV) into per-field info tooltips so
the panel reads cleanly for users who don't need to know about printer
internals. Power users still see them on hover. Panel hint at the top
drops ZPL jargon entirely.

- new FieldLabel helper renders label + InformationCircleIcon (matches
  existing PropertiesPanel pattern)
- name/slot/default each get a short 'what this is for' explanation
- panel hint rewritten to plain language

Locale extraction stays deferred to the end-of-branch sweep (see
docs/variables-plan.local.md).
---
 src/components/Variables/VariablesPanel.tsx | 36 ++++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/Variables/VariablesPanel.tsx b/src/components/Variables/VariablesPanel.tsx
index c16f6da6..7ba4d3d4 100644
--- a/src/components/Variables/VariablesPanel.tsx
+++ b/src/components/Variables/VariablesPanel.tsx
@@ -1,5 +1,9 @@
 import { useState, type ChangeEvent } from 'react';
-import { PlusIcon, TrashIcon } from '@heroicons/react/16/solid';
+import {
+  InformationCircleIcon,
+  PlusIcon,
+  TrashIcon,
+} from '@heroicons/react/16/solid';
 import { useLabelStore } from '../../store/labelStore';
 import {
   FN_NUMBER_MIN,
@@ -15,12 +19,18 @@ import { ConfirmDialog } from '../ui/ConfirmDialog';
  *  Phase 1 step 3d. Keep them in one place so the sweep is mechanical. */
 const COPY = {
   panelHint:
-    'Variables hold defaults that ZPL ^FN/^FV slots reference at print time. Bind a text or barcode field from its Properties tab.',
+    'Variables hold default values for fields you bind from the Properties tab. The bound value is what the printer renders.',
   add: 'Add variable',
   empty: 'No variables yet.',
   nameLabel: 'Name',
+  nameHelp:
+    'Free-text identifier shown in the Properties dropdown when binding a field. For you, not the printer.',
   fnLabel: 'Slot',
+  fnHelp:
+    'ZPL ^FN slot number (1-99) the printer uses to address this variable. Auto-assigned; only change when integrating with a system that injects data via ^FV at print time.',
   defaultLabel: 'Default',
+  defaultHelp:
+    'Value rendered on the canvas and emitted as the ZPL ^FD payload. External systems can override it at print time.',
   removeAria: (name: string) => `Remove variable ${name}`,
   bindingsBadge: (n: number) => (n === 1 ? '1 binding' : `${n} bindings`),
   noBindings: 'unused',
@@ -161,6 +171,22 @@ export function VariablesPanel() {
   );
 }
 
+/** Label + InformationCircleIcon with `title` tooltip. Matches the
+ *  pattern already in PropertiesPanel.tsx so info hints look consistent
+ *  across the right sidebar. ZPL command codes live only in the
+ *  tooltips, never in the always-visible label text. */
+function FieldLabel({ text, help }: { text: string; help: string }) {
+  return (
+    <span className={`${labelCls} flex items-center gap-1`}>
+      {text}
+      <InformationCircleIcon
+        className="w-3 h-3 text-muted/60 cursor-help"
+        title={help}
+      />
+    </span>
+  );
+}
+
 interface RowProps {
   variable: Variable;
   bindings: number;
@@ -218,7 +244,7 @@ function VariableRow({
     <li className="flex flex-col gap-1.5">
       <div className="flex items-end gap-2">
         <div className="flex-1 flex flex-col gap-0.5">
-          <label className={labelCls}>{COPY.nameLabel}</label>
+          <FieldLabel text={COPY.nameLabel} help={COPY.nameHelp} />
           <input
             className={inputCls}
             value={name}
@@ -227,7 +253,7 @@ function VariableRow({
           />
         </div>
         <div className="w-14 flex flex-col gap-0.5">
-          <label className={labelCls}>{COPY.fnLabel}</label>
+          <FieldLabel text={COPY.fnLabel} help={COPY.fnHelp} />
           <input
             type="number"
             min={FN_NUMBER_MIN}
@@ -247,7 +273,7 @@ function VariableRow({
         </button>
       </div>
       <div className="flex flex-col gap-0.5">
-        <label className={labelCls}>{COPY.defaultLabel}</label>
+        <FieldLabel text={COPY.defaultLabel} help={COPY.defaultHelp} />
         <input
           className={inputCls}
           value={def}

From 0c79dba473becb786b31ef4b88528e1e7d8ee11f Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Fri, 22 May 2026 19:39:25 +0200
Subject: [PATCH 06/11] feat(variables): bind/unbind control in Properties
 (Phase 1 step 3b)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Text and barcode fields show a 'Variable' dropdown in their Properties
panel: pick an existing variable to bind, 'Create new…' to define one
inline (seeded with the field's current content), or unbind via X.
Binding writes obj.variableId; the generator already swaps in the
variable's default at ^FN/^FD emit time.

- ObjectTypeDefinition gets a bindable flag; text + 8 barcode types
  opt in, mirroring which registries actually wire fdFieldFor
- new VariableBindingControl component handles dropdown + inline-create
  flow, error states (slot exhaustion, name collision)
- PropertiesPanel renders it above the per-type section when
  definition.bindable, only for leaves
- orphan binding (variableId pointing at deleted variable) treated as
  unbound in the UI — emitter already falls back to literal content
---
 src/components/Properties/PropertiesPanel.tsx |  14 ++
 .../Variables/VariableBindingControl.tsx      | 177 ++++++++++++++++++
 src/registry/aztec.tsx                        |   1 +
 src/registry/barcode1d.tsx                    |   1 +
 src/registry/codablock.tsx                    |   1 +
 src/registry/datamatrix.tsx                   |   1 +
 src/registry/gs1databar.tsx                   |   1 +
 src/registry/micropdf417.tsx                  |   1 +
 src/registry/pdf417.tsx                       |   1 +
 src/registry/qrcode.tsx                       |   1 +
 src/registry/text.tsx                         |   1 +
 src/types/ObjectType.ts                       |   8 +
 12 files changed, 208 insertions(+)
 create mode 100644 src/components/Variables/VariableBindingControl.tsx

diff --git a/src/components/Properties/PropertiesPanel.tsx b/src/components/Properties/PropertiesPanel.tsx
index f483574f..09c4d2c1 100644
--- a/src/components/Properties/PropertiesPanel.tsx
+++ b/src/components/Properties/PropertiesPanel.tsx
@@ -20,6 +20,7 @@ import { useT } from "../../lib/useT";
 import { parseIntOrUndef } from "../../lib/inputParse";
 import { CollapsibleSection } from "../ui/CollapsibleSection";
 import { AlignButtons } from "./AlignButtons";
+import { VariableBindingControl } from "../Variables/VariableBindingControl";
 import { inputCls, labelCls } from "./styles";
 import type { LabelConfig } from "../../types/ObjectType";
 import {
@@ -204,6 +205,19 @@ export function PropertiesPanel({ canvasRef }: PropertiesPanelProps) {
 
         <div className="border-t border-border" />
 
+        {/* Variable binding: shown for types that emit a ^FD content
+            block (text + barcodes minus serial). Sits above TypePanel
+            so binding state is visible before users dive into type
+            specifics; the type panel's content input becomes
+            redundant once a binding is active (default value lives in
+            the Variables tab). */}
+        {definition?.bindable && !groupRow && (
+          <>
+            <VariableBindingControl obj={obj} />
+            <div className="border-t border-border" />
+          </>
+        )}
+
         {/* Per-type panel: only leaves have a registry entry, so TypePanel
             is never present for groups. The isGroup guard narrows obj for
             TypeScript at the call site since registry panels expect the
diff --git a/src/components/Variables/VariableBindingControl.tsx b/src/components/Variables/VariableBindingControl.tsx
new file mode 100644
index 00000000..b314de1a
--- /dev/null
+++ b/src/components/Variables/VariableBindingControl.tsx
@@ -0,0 +1,177 @@
+import { useState, type ChangeEvent } from 'react';
+import { InformationCircleIcon, XMarkIcon } from '@heroicons/react/16/solid';
+import { useLabelStore } from '../../store/labelStore';
+import type { LabelObject } from '../../types/Group';
+import { inputCls, labelCls } from '../Properties/styles';
+
+/* i18n: literal strings here belong to the end-of-branch locale sweep;
+ *  see docs/variables-plan.local.md. */
+const COPY = {
+  label: 'Variable',
+  help:
+    'Bind this field to a Variable. The field will display the variable\'s default value and emit it as a ZPL ^FN slot at print time.',
+  unbound: 'Not bound',
+  createNew: '+ Create new variable…',
+  unbindAria: 'Unbind variable',
+  newNamePlaceholder: 'Name for new variable',
+  cancel: 'Cancel',
+  create: 'Create',
+  noSlotsLeft: 'All 99 ^FN slots are taken; remove an unused variable first.',
+  nameRequired: 'Name required.',
+  nameInUse: 'Name already in use.',
+} as const;
+
+const CREATE_NEW_SENTINEL = '__create_new__';
+
+interface Props {
+  obj: LabelObject;
+}
+
+export function VariableBindingControl({ obj }: Props) {
+  const variables = useLabelStore((s) => s.variables);
+  const updateObject = useLabelStore((s) => s.updateObject);
+  const addVariable = useLabelStore((s) => s.addVariable);
+
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const boundId = obj.variableId;
+  // Bound to a variable that no longer exists (race after delete with
+  // pending undo, or partial state from a manual edit). Treat as unbound
+  // so the dropdown doesn't show a phantom selection; the orphan is
+  // already harmless at emit time (fdFieldFor falls back to literal).
+  const boundVariable = boundId
+    ? variables.find((v) => v.id === boundId)
+    : undefined;
+
+  const handleSelect = (e: ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value;
+    setError(null);
+    if (value === '') {
+      // 'Not bound' picked: clear any existing binding.
+      if (boundId) updateObject(obj.id, { variableId: undefined });
+      return;
+    }
+    if (value === CREATE_NEW_SENTINEL) {
+      setCreating(true);
+      setNewName('');
+      return;
+    }
+    updateObject(obj.id, { variableId: value });
+  };
+
+  const commitCreate = () => {
+    const trimmed = newName.trim();
+    if (trimmed === '') {
+      setError(COPY.nameRequired);
+      return;
+    }
+    // Seed the new variable's default with whatever literal content the
+    // field is currently carrying — preserves the canvas state across
+    // the binding transition. For barcodes/qr the prop key isn't
+    // 'content' for every type, but every bindable type's first ^FD
+    // emission comes from `props.content` (see registry implementations).
+    const defaultValue =
+      typeof (obj as { props?: { content?: unknown } }).props?.content === 'string'
+        ? ((obj as { props: { content: string } }).props.content)
+        : '';
+    const id = addVariable({ name: trimmed, defaultValue });
+    if (id === null) {
+      // Two reasons addVariable returns null: name collision or no free
+      // ^FN slot. Distinguish via the variables list so the user knows
+      // which to fix.
+      setError(
+        variables.some((v) => v.name === trimmed)
+          ? COPY.nameInUse
+          : COPY.noSlotsLeft,
+      );
+      return;
+    }
+    updateObject(obj.id, { variableId: id });
+    setCreating(false);
+    setNewName('');
+    setError(null);
+  };
+
+  const cancelCreate = () => {
+    setCreating(false);
+    setNewName('');
+    setError(null);
+  };
+
+  return (
+    <div className="flex flex-col gap-1">
+      <span className={`${labelCls} flex items-center gap-1`}>
+        {COPY.label}
+        <InformationCircleIcon
+          className="w-3 h-3 text-muted/60 cursor-help"
+          title={COPY.help}
+        />
+      </span>
+
+      {creating ? (
+        <div className="flex flex-col gap-1">
+          <input
+            autoFocus
+            className={inputCls}
+            placeholder={COPY.newNamePlaceholder}
+            value={newName}
+            onChange={(e) => {
+              setNewName(e.target.value);
+              if (error) setError(null);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') commitCreate();
+              if (e.key === 'Escape') cancelCreate();
+            }}
+          />
+          <div className="flex gap-2">
+            <button
+              onClick={commitCreate}
+              className="px-2 py-1 rounded text-xs font-mono bg-accent text-bg hover:opacity-90 transition-opacity"
+            >
+              {COPY.create}
+            </button>
+            <button
+              onClick={cancelCreate}
+              className="px-2 py-1 rounded text-xs font-mono text-muted hover:text-text transition-colors"
+            >
+              {COPY.cancel}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="flex items-center gap-1.5">
+          <select
+            className={`${inputCls} flex-1`}
+            value={boundVariable?.id ?? ''}
+            onChange={handleSelect}
+          >
+            <option value="">{COPY.unbound}</option>
+            {variables.map((v) => (
+              <option key={v.id} value={v.id}>
+                {v.name}
+              </option>
+            ))}
+            <option value={CREATE_NEW_SENTINEL}>{COPY.createNew}</option>
+          </select>
+          {boundVariable && (
+            <button
+              onClick={() => updateObject(obj.id, { variableId: undefined })}
+              aria-label={COPY.unbindAria}
+              title={COPY.unbindAria}
+              className="p-1 rounded text-muted hover:text-amber-400 hover:bg-surface-2 transition-colors"
+            >
+              <XMarkIcon className="w-3.5 h-3.5" />
+            </button>
+          )}
+        </div>
+      )}
+
+      {error && (
+        <p className="font-mono text-[10px] text-amber-400">{error}</p>
+      )}
+    </div>
+  );
+}
diff --git a/src/registry/aztec.tsx b/src/registry/aztec.tsx
index faf65fe4..d6bd5dd1 100644
--- a/src/registry/aztec.tsx
+++ b/src/registry/aztec.tsx
@@ -25,6 +25,7 @@ export const aztec: ObjectTypeDefinition<AztecProps> = {
   label: "Aztec",
   icon: "◇",
   group: "code-2d",
+  bindable: true,
   defaultProps: {
     content: "1234567890",
     magnification: 4,
diff --git a/src/registry/barcode1d.tsx b/src/registry/barcode1d.tsx
index 1906e8fd..aeaae6e4 100644
--- a/src/registry/barcode1d.tsx
+++ b/src/registry/barcode1d.tsx
@@ -59,6 +59,7 @@ export function createBarcode1D(config: Barcode1DConfig): ObjectTypeDefinition<B
     label: config.label,
     icon: config.icon,
     group: config.group,
+    bindable: true,
     defaultProps: {
       content: config.defaultContent,
       height: 100,
diff --git a/src/registry/codablock.tsx b/src/registry/codablock.tsx
index e5a5104d..8c215184 100644
--- a/src/registry/codablock.tsx
+++ b/src/registry/codablock.tsx
@@ -19,6 +19,7 @@ export const codablock: ObjectTypeDefinition<CodablockProps> = {
   label: "CODABLOCK",
   icon: "▥B",
   group: "code-2d",
+  bindable: true,
   defaultProps: {
     content: "1234567890",
     moduleWidth: 2,
diff --git a/src/registry/datamatrix.tsx b/src/registry/datamatrix.tsx
index 613eaa0b..b3ccdc63 100644
--- a/src/registry/datamatrix.tsx
+++ b/src/registry/datamatrix.tsx
@@ -21,6 +21,7 @@ export const datamatrix: ObjectTypeDefinition<DataMatrixProps> = {
   label: 'DataMatrix',
   icon: '▦',
   group: 'code-2d',
+  bindable: true,
   defaultProps: {
     content: '1234567890',
     dimension: 5,
diff --git a/src/registry/gs1databar.tsx b/src/registry/gs1databar.tsx
index 27015432..a330a51c 100644
--- a/src/registry/gs1databar.tsx
+++ b/src/registry/gs1databar.tsx
@@ -41,6 +41,7 @@ export const gs1databar: ObjectTypeDefinition<Gs1DatabarProps> = {
   label: 'GS1 Databar',
   icon: 'GS1',
   group: 'code-1d',
+  bindable: true,
   defaultProps: {
     content: '0112345678901',
     moduleWidth: 2,
diff --git a/src/registry/micropdf417.tsx b/src/registry/micropdf417.tsx
index a5393033..ede26df4 100644
--- a/src/registry/micropdf417.tsx
+++ b/src/registry/micropdf417.tsx
@@ -19,6 +19,7 @@ export const micropdf417: ObjectTypeDefinition<MicroPdf417Props> = {
   label: "MicroPDF417",
   icon: "▤",
   group: "code-2d",
+  bindable: true,
   defaultProps: {
     content: "1234",
     moduleWidth: 2,
diff --git a/src/registry/pdf417.tsx b/src/registry/pdf417.tsx
index 854356b7..4402c72c 100644
--- a/src/registry/pdf417.tsx
+++ b/src/registry/pdf417.tsx
@@ -20,6 +20,7 @@ export const pdf417: ObjectTypeDefinition<Pdf417Props> = {
   label: "PDF417",
   icon: "▥",
   group: "code-2d",
+  bindable: true,
   defaultProps: {
     content: "1234567890",
     rowHeight: 2,
diff --git a/src/registry/qrcode.tsx b/src/registry/qrcode.tsx
index 64d1848e..f3da1dfc 100644
--- a/src/registry/qrcode.tsx
+++ b/src/registry/qrcode.tsx
@@ -21,6 +21,7 @@ export const qrcode: ObjectTypeDefinition<QrCodeProps> = {
   label: 'QR Code',
   icon: '⬚',
   group: 'code-2d',
+  bindable: true,
   defaultProps: {
     content: 'https://example.com',
     magnification: 4,
diff --git a/src/registry/text.tsx b/src/registry/text.tsx
index 7b298f4d..9c8d176a 100644
--- a/src/registry/text.tsx
+++ b/src/registry/text.tsx
@@ -38,6 +38,7 @@ export const text: ObjectTypeDefinition<TextProps> = {
   label: "Text",
   icon: "T",
   group: "text" as const,
+  bindable: true,
   defaultProps: {
     content: "Text",
     fontHeight: 30,
diff --git a/src/types/ObjectType.ts b/src/types/ObjectType.ts
index 0b776950..88124ddc 100644
--- a/src/types/ObjectType.ts
+++ b/src/types/ObjectType.ts
@@ -174,6 +174,14 @@ export interface ObjectTypeDefinition<P extends object = object> {
    * renderer suppresses the text so the designer matches the print output.
    */
   interpretationLocked?: boolean;
+  /**
+   * True when the type emits a ^FD content block via `fdFieldFor` and can
+   * therefore be bound to a Variable. The Properties panel uses this to
+   * decide whether to render the bind-to-variable control. Mirrors which
+   * registry modules actually wire fdFieldFor in their toZPL — keep them
+   * in sync.
+   */
+  bindable?: boolean;
   /**
    * Marks types whose resize must keep a 1:1 aspect ratio. The transformer
    * restricts to corner anchors and forces the resize bbox to stay square,

From 40f46acba6d7f6400ea0d55047178c175ea0e68b Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Fri, 22 May 2026 20:47:09 +0200
Subject: [PATCH 07/11] =?UTF-8?q?feat(variables):=20Model=20A=20canvas=20?=
 =?UTF-8?q?=E2=80=94=20bound=20fields=20render=20the=20variable=20default?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously the canvas kept rendering props.content for bound fields,
which left the user editing a variable in the Variables tab without
seeing the change anywhere in the designer. Now the dispatcher patches
props.content with the bound variable's defaultValue before any
per-type renderer runs, so the canvas previews exactly what the printer
will print (absent a runtime ^FV override).

- new pure helper lib/variableBinding.ts: lookupBoundVariable +
  applyBindingToObject (generic, identity-preserving)
- KonvaObject dispatcher applies it once, all 9 bindable renderers
  inherit the swap without per-type changes
- VariableBindingControl now previews the bound default below the
  dropdown with a 'edit in Variables tab' hint, so the relationship
  between the Properties pane and the Variables panel is explicit
---
 src/components/Canvas/KonvaObject.tsx         | 23 ++++++----
 .../Variables/VariableBindingControl.tsx      | 23 +++++++---
 src/lib/variableBinding.ts                    | 45 +++++++++++++++++++
 3 files changed, 76 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/variableBinding.ts

diff --git a/src/components/Canvas/KonvaObject.tsx b/src/components/Canvas/KonvaObject.tsx
index 19eab610..c0651cd8 100644
--- a/src/components/Canvas/KonvaObject.tsx
+++ b/src/components/Canvas/KonvaObject.tsx
@@ -9,6 +9,7 @@ import { outlineInset } from "../../lib/shapeGeometry";
 import { reverseShapeStyle } from "./reverseShapeStyle";
 import { useColorScheme } from "../../lib/useColorScheme";
 import { useLabelStore } from "../../store/labelStore";
+import { applyBindingToObject } from "../../lib/variableBinding";
 import { ZPL_FONT_HEIGHT_TO_CSS_RATIO } from "./textPositionTransforms";
 import { getTextRenderMetrics } from "./textRenderMetrics";
 import { selectionHandlers, type KonvaObjectProps } from "./konvaObjectProps";
@@ -105,15 +106,19 @@ const BARCODE_TYPES = new Set([
 ]);
 
 export function KonvaObject(props_: Props) {
-  // Pass `obj` explicitly after the spread so each per-type renderer
-  // receives the narrowed type (LineLabelObject, ImageLabelObject)
-  // rather than the wide LabelObject. Without the explicit prop the
-  // spread would re-widen and the renderer would need a runtime cast.
-  const { obj } = props_;
-  if (obj.type === "line") return <LineObject {...props_} obj={obj} />;
-  if (obj.type === "image") return <ImageObject {...props_} obj={obj} />;
-  if (BARCODE_TYPES.has(obj.type)) return <BarcodeObject {...props_} />;
-  return <KonvaObjectInner {...props_} />;
+  // Substitute the bound variable's defaultValue into `props.content`
+  // before any per-type renderer touches the obj. Keeps Konva blissfully
+  // unaware of the binding mechanism: every shape draws what the printer
+  // would print absent a runtime ^FV override. `applyBindingToObject`
+  // is identity-preserving when the obj isn't bound, so memoisation
+  // downstream isn't affected for the common case.
+  const variables = useLabelStore((s) => s.variables);
+  const obj = applyBindingToObject(props_.obj, variables);
+  const renderProps = obj === props_.obj ? props_ : { ...props_, obj };
+  if (obj.type === "line") return <LineObject {...renderProps} obj={obj} />;
+  if (obj.type === "image") return <ImageObject {...renderProps} obj={obj} />;
+  if (BARCODE_TYPES.has(obj.type)) return <BarcodeObject {...renderProps} />;
+  return <KonvaObjectInner {...renderProps} />;
 }
 
 /**
diff --git a/src/components/Variables/VariableBindingControl.tsx b/src/components/Variables/VariableBindingControl.tsx
index b314de1a..9fe83344 100644
--- a/src/components/Variables/VariableBindingControl.tsx
+++ b/src/components/Variables/VariableBindingControl.tsx
@@ -19,6 +19,8 @@ const COPY = {
   noSlotsLeft: 'All 99 ^FN slots are taken; remove an unused variable first.',
   nameRequired: 'Name required.',
   nameInUse: 'Name already in use.',
+  boundHint: 'Default editable in the Variables tab.',
+  emptyDefault: '(empty)',
 } as const;
 
 const CREATE_NEW_SENTINEL = '__create_new__';
@@ -69,13 +71,11 @@ export function VariableBindingControl({ obj }: Props) {
     }
     // Seed the new variable's default with whatever literal content the
     // field is currently carrying — preserves the canvas state across
-    // the binding transition. For barcodes/qr the prop key isn't
-    // 'content' for every type, but every bindable type's first ^FD
-    // emission comes from `props.content` (see registry implementations).
+    // the binding transition. Every bindable type's first ^FD emission
+    // comes from `props.content` (see registry implementations).
+    const props = (obj as { props?: { content?: unknown } }).props;
     const defaultValue =
-      typeof (obj as { props?: { content?: unknown } }).props?.content === 'string'
-        ? ((obj as { props: { content: string } }).props.content)
-        : '';
+      typeof props?.content === 'string' ? props.content : '';
     const id = addVariable({ name: trimmed, defaultValue });
     if (id === null) {
       // Two reasons addVariable returns null: name collision or no free
@@ -172,6 +172,17 @@ export function VariableBindingControl({ obj }: Props) {
       {error && (
         <p className="font-mono text-[10px] text-amber-400">{error}</p>
       )}
+
+      {boundVariable && !creating && (
+        <p className="font-mono text-[10px] text-muted leading-relaxed">
+          <span className="text-text">
+            {boundVariable.defaultValue === ''
+              ? COPY.emptyDefault
+              : `"${boundVariable.defaultValue}"`}
+          </span>{' '}
+          {COPY.boundHint}
+        </p>
+      )}
     </div>
   );
 }
diff --git a/src/lib/variableBinding.ts b/src/lib/variableBinding.ts
new file mode 100644
index 00000000..f36718a1
--- /dev/null
+++ b/src/lib/variableBinding.ts
@@ -0,0 +1,45 @@
+import type { LabelObject } from "../types/Group";
+import type { Variable } from "../types/Variable";
+
+/**
+ * Resolve an object's `variableId` against the variable list and return
+ * the bound Variable, or `undefined` when the object is unbound or its
+ * binding points at a variable that no longer exists (orphan).
+ */
+export function lookupBoundVariable(
+  obj: LabelObject,
+  variables: readonly Variable[],
+): Variable | undefined {
+  if (!obj.variableId) return undefined;
+  return variables.find((v) => v.id === obj.variableId);
+}
+
+/**
+ * Return `obj` with `props.content` swapped for the bound Variable's
+ * `defaultValue`, so canvas renderers preview what the printer will
+ * actually print absent a runtime `^FV` override. Identity-preserving:
+ * returns the same reference when the object isn't bound or already
+ * carries the resolved value, so React's referential-equality
+ * optimisations stay effective.
+ *
+ * Every bindable type today exposes `props.content` (text + 8 barcode
+ * types — see `bindable: true` in the registry). Non-bindable types
+ * never have a `variableId`, so the early return covers them.
+ */
+export function applyBindingToObject<T extends LabelObject>(
+  obj: T,
+  variables: readonly Variable[],
+): T {
+  const variable = lookupBoundVariable(obj, variables);
+  if (!variable) return obj;
+  const props = (obj as { props?: { content?: unknown } }).props;
+  if (!props || typeof props.content !== "string") return obj;
+  if (props.content === variable.defaultValue) return obj;
+  // The discriminated union doesn't narrow through a spread, so we cast
+  // back to T. Runtime shape preserves the original variant — only
+  // `props.content` changes.
+  return {
+    ...obj,
+    props: { ...props, content: variable.defaultValue },
+  } as unknown as T;
+}

From ca8477a5f9868a5c1deb5828ff94cee30361ebf3 Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Fri, 22 May 2026 22:00:21 +0200
Subject: [PATCH 08/11] fix(variables): UX polish from browser-test pass
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Collected fixes after live-testing the Phase 1 feature in the browser:

- B1: per-type CONTENT input mirrors bound variable defaultValue and
  redirects edits into updateVariable, so canvas / CONTENT input /
  Variables tab tell one consistent story (PropertiesPanel patches
  the obj it hands to TypePanel + intercepts onChange).
- B4: VariableBindingControl dropdown options read
  `{name} — "{default}"` (truncated at 24 chars; empty default shows
  as `(empty)`) so users pick the right binding without remembering
  which variable holds what.
- B5: LayerRow shows a small VariableIcon badge between the type icon
  and the row label when the leaf is bound, with the variable name
  as a hover tooltip.
- Polish A: PropertiesPanel wraps VariableBindingControl in a
  CollapsibleSection. defaultOpen={!!obj.variableId} — unbound fields
  hide the binding UI behind a chevron (less jargon for beginners),
  bound fields stay expanded. Separate localStorage ids per state.
- Polish C: Variables-tab empty state adds a one-line example
  ('sequential SKUs, batch numbers, customer names') instead of just
  'No variables yet.'. Panel hint also tightened — extended help
  belongs in the planned hover-help system (see plan-doc).
---
 src/components/Properties/LayerRow.tsx        | 17 +++++
 src/components/Properties/PropertiesPanel.tsx | 68 ++++++++++++++-----
 .../Variables/VariableBindingControl.tsx      | 29 +++++---
 src/components/Variables/VariablesPanel.tsx   | 36 ++++------
 src/components/ui/FieldLabel.tsx              | 22 ++++++
 src/lib/zplImportService.ts                   |  8 ++-
 6 files changed, 127 insertions(+), 53 deletions(-)
 create mode 100644 src/components/ui/FieldLabel.tsx

diff --git a/src/components/Properties/LayerRow.tsx b/src/components/Properties/LayerRow.tsx
index b8d58659..c2943c9a 100644
--- a/src/components/Properties/LayerRow.tsx
+++ b/src/components/Properties/LayerRow.tsx
@@ -8,10 +8,13 @@ import {
   ChevronRightIcon,
   ChevronDownIcon,
   LinkSlashIcon,
+  VariableIcon,
 } from '@heroicons/react/16/solid';
 import { ObjectRegistry } from '../../registry';
 import { isGroup, type LabelObject } from '../../types/Group';
 import { useT } from '../../lib/useT';
+import { useLabelStore } from '../../store/labelStore';
+import { lookupBoundVariable } from '../../lib/variableBinding';
 import { DragHandleIcon } from '../ui/DragHandleIcon';
 import { INDENT_STEP } from './layerLayout';
 
@@ -68,6 +71,14 @@ export function LayerRow({
   const t = useT();
   const def = ObjectRegistry[obj.type];
   const groupRow = isGroup(obj);
+  // Variable badge: small {x} glyph next to the type icon when the leaf
+  // is bound, with the variable name as a tooltip. Lets the user scan
+  // the layers list for slot usage without selecting each row. The
+  // selector subscribes the row to variable changes — cheap because
+  // each row already re-renders on selection / visibility flips.
+  const boundVariable = useLabelStore((s) =>
+    lookupBoundVariable(obj, s.variables),
+  );
   // Inline-rename is currently only exposed for groups; leaves render
   // their registry label as a plain (non-editable) span. The single
   // groupRow check at the entry-point keeps the rest of the edit path
@@ -185,6 +196,12 @@ export function LayerRow({
       <span className="font-mono text-xs text-accent shrink-0 w-4 text-center">
         {groupRow ? '⊞' : def?.icon}
       </span>
+      {boundVariable && (
+        <VariableIcon
+          className="w-3 h-3 shrink-0 text-accent/70"
+          title={`Bound to ${boundVariable.name}`}
+        />
+      )}
       <div className="flex flex-col flex-1 min-w-0">
         {editing ? (
           <input
diff --git a/src/components/Properties/PropertiesPanel.tsx b/src/components/Properties/PropertiesPanel.tsx
index 09c4d2c1..cd1a7cc5 100644
--- a/src/components/Properties/PropertiesPanel.tsx
+++ b/src/components/Properties/PropertiesPanel.tsx
@@ -21,6 +21,7 @@ import { parseIntOrUndef } from "../../lib/inputParse";
 import { CollapsibleSection } from "../ui/CollapsibleSection";
 import { AlignButtons } from "./AlignButtons";
 import { VariableBindingControl } from "../Variables/VariableBindingControl";
+import { applyBindingToObject, lookupBoundVariable } from "../../lib/variableBinding";
 import { inputCls, labelCls } from "./styles";
 import type { LabelConfig } from "../../types/ObjectType";
 import {
@@ -41,6 +42,8 @@ export function PropertiesPanel({ canvasRef }: PropertiesPanelProps) {
   const {
     selectedIds,
     updateObject,
+    updateVariable,
+    variables,
     groupSelection,
     label,
     setLabelConfig,
@@ -206,14 +209,23 @@ export function PropertiesPanel({ canvasRef }: PropertiesPanelProps) {
         <div className="border-t border-border" />
 
         {/* Variable binding: shown for types that emit a ^FD content
-            block (text + barcodes minus serial). Sits above TypePanel
-            so binding state is visible before users dive into type
-            specifics; the type panel's content input becomes
-            redundant once a binding is active (default value lives in
-            the Variables tab). */}
+            block (text + barcodes minus serial). Collapsed by default
+            for unbound fields so beginners aren't distracted; opens
+            automatically when the field is already bound so the
+            binding state is visible without an extra click. The
+            CollapsibleSection persists the user's manual toggle
+            per-state in localStorage (separate ids for bound vs
+            unbound), so each preference sticks. */}
         {definition?.bindable && !groupRow && (
           <>
-            <VariableBindingControl obj={obj} />
+            <CollapsibleSection
+              id={obj.variableId ? 'properties-variable-bound' : 'properties-variable-unbound'}
+              // i18n: extracted in the end-of-branch locale sweep.
+              title="Variable"
+              defaultOpen={!!obj.variableId}
+            >
+              <VariableBindingControl obj={obj} />
+            </CollapsibleSection>
             <div className="border-t border-border" />
           </>
         )}
@@ -221,16 +233,40 @@ export function PropertiesPanel({ canvasRef }: PropertiesPanelProps) {
         {/* Per-type panel: only leaves have a registry entry, so TypePanel
             is never present for groups. The isGroup guard narrows obj for
             TypeScript at the call site since registry panels expect the
-            leaf shape (props field present). */}
-        {TypePanel && !groupRow && (
-          <>
-            <TypePanel
-              obj={obj}
-              onChange={(props) => updateObject(obj.id, { props })}
-            />
-            <div className="border-t border-border" />
-          </>
-        )}
+            leaf shape (props field present).
+
+            When a binding is active we hand TypePanel a patched obj where
+            props.content is the variable's defaultValue (so the CONTENT
+            input mirrors the canvas) and we re-route content edits into
+            updateVariable so typing into the per-type input directly
+            edits the variable's default. Non-content props (fontHeight,
+            rotation, …) keep flowing to updateObject untouched. */}
+        {TypePanel && !groupRow && (() => {
+          const boundVariable = lookupBoundVariable(obj, variables);
+          const patchedObj = boundVariable
+            ? applyBindingToObject(obj, variables)
+            : obj;
+          const handleChange = boundVariable
+            ? (props: object) => {
+                const next = { ...(props as Record<string, unknown>) };
+                if (typeof next.content === 'string') {
+                  updateVariable(boundVariable.id, {
+                    defaultValue: next.content,
+                  });
+                  delete next.content;
+                }
+                if (Object.keys(next).length > 0) {
+                  updateObject(obj.id, { props: next });
+                }
+              }
+            : (props: object) => updateObject(obj.id, { props });
+          return (
+            <>
+              <TypePanel obj={patchedObj} onChange={handleChange} />
+              <div className="border-t border-border" />
+            </>
+          );
+        })()}
 
         {/* Comment (^FX) — leaves only: groups emit no ZPL of their own
             so the comment would never reach the output. */}
diff --git a/src/components/Variables/VariableBindingControl.tsx b/src/components/Variables/VariableBindingControl.tsx
index 9fe83344..760dcc81 100644
--- a/src/components/Variables/VariableBindingControl.tsx
+++ b/src/components/Variables/VariableBindingControl.tsx
@@ -1,8 +1,9 @@
 import { useState, type ChangeEvent } from 'react';
-import { InformationCircleIcon, XMarkIcon } from '@heroicons/react/16/solid';
+import { XMarkIcon } from '@heroicons/react/16/solid';
 import { useLabelStore } from '../../store/labelStore';
 import type { LabelObject } from '../../types/Group';
-import { inputCls, labelCls } from '../Properties/styles';
+import { inputCls } from '../Properties/styles';
+import { FieldLabel } from '../ui/FieldLabel';
 
 /* i18n: literal strings here belong to the end-of-branch locale sweep;
  *  see docs/variables-plan.local.md. */
@@ -102,13 +103,7 @@ export function VariableBindingControl({ obj }: Props) {
 
   return (
     <div className="flex flex-col gap-1">
-      <span className={`${labelCls} flex items-center gap-1`}>
-        {COPY.label}
-        <InformationCircleIcon
-          className="w-3 h-3 text-muted/60 cursor-help"
-          title={COPY.help}
-        />
-      </span>
+      <FieldLabel text={COPY.label} help={COPY.help} />
 
       {creating ? (
         <div className="flex flex-col gap-1">
@@ -151,7 +146,7 @@ export function VariableBindingControl({ obj }: Props) {
             <option value="">{COPY.unbound}</option>
             {variables.map((v) => (
               <option key={v.id} value={v.id}>
-                {v.name}
+                {formatVariableOption(v.name, v.defaultValue)}
               </option>
             ))}
             <option value={CREATE_NEW_SENTINEL}>{COPY.createNew}</option>
@@ -186,3 +181,17 @@ export function VariableBindingControl({ obj }: Props) {
     </div>
   );
 }
+
+/** Render `{name} — "{default}"`, truncating long defaults so the
+ *  <option> stays scannable in narrow dropdowns. Empty default is
+ *  surfaced as `{name} — (empty)` rather than a trailing em-dash so
+ *  users see the state explicitly. */
+const OPTION_DEFAULT_MAX = 24;
+function formatVariableOption(name: string, defaultValue: string): string {
+  if (defaultValue === '') return `${name} — (empty)`;
+  const truncated =
+    defaultValue.length > OPTION_DEFAULT_MAX
+      ? `${defaultValue.slice(0, OPTION_DEFAULT_MAX)}…`
+      : defaultValue;
+  return `${name} — "${truncated}"`;
+}
diff --git a/src/components/Variables/VariablesPanel.tsx b/src/components/Variables/VariablesPanel.tsx
index 7ba4d3d4..410fc6d3 100644
--- a/src/components/Variables/VariablesPanel.tsx
+++ b/src/components/Variables/VariablesPanel.tsx
@@ -1,9 +1,5 @@
 import { useState, type ChangeEvent } from 'react';
-import {
-  InformationCircleIcon,
-  PlusIcon,
-  TrashIcon,
-} from '@heroicons/react/16/solid';
+import { PlusIcon, TrashIcon } from '@heroicons/react/16/solid';
 import { useLabelStore } from '../../store/labelStore';
 import {
   FN_NUMBER_MIN,
@@ -12,16 +8,19 @@ import {
   type Variable,
 } from '../../types/Variable';
 import { walkObjects, type LabelObject } from '../../types/Group';
-import { inputCls, labelCls } from '../Properties/styles';
+import { inputCls } from '../Properties/styles';
 import { ConfirmDialog } from '../ui/ConfirmDialog';
+import { FieldLabel } from '../ui/FieldLabel';
 
 /* i18n: literal strings in this file are scheduled for locale extraction in
  *  Phase 1 step 3d. Keep them in one place so the sweep is mechanical. */
 const COPY = {
   panelHint:
-    'Variables hold default values for fields you bind from the Properties tab. The bound value is what the printer renders.',
+    'Defaults that get filled in at print time. Bind a field from its Properties tab.',
   add: 'Add variable',
   empty: 'No variables yet.',
+  emptyExample:
+    'Useful for sequential SKUs, batch numbers, or customer names.',
   nameLabel: 'Name',
   nameHelp:
     'Free-text identifier shown in the Properties dropdown when binding a field. For you, not the printer.',
@@ -114,7 +113,12 @@ export function VariablesPanel() {
       </p>
 
       {variables.length === 0 ? (
-        <p className="font-mono text-[10px] text-muted italic">{COPY.empty}</p>
+        <div className="flex flex-col gap-2">
+          <p className="font-mono text-[10px] text-muted italic">{COPY.empty}</p>
+          <p className="font-mono text-[10px] text-muted leading-relaxed">
+            {COPY.emptyExample}
+          </p>
+        </div>
       ) : (
         <ul className="flex flex-col gap-3">
           {variables.map((v) => (
@@ -171,22 +175,6 @@ export function VariablesPanel() {
   );
 }
 
-/** Label + InformationCircleIcon with `title` tooltip. Matches the
- *  pattern already in PropertiesPanel.tsx so info hints look consistent
- *  across the right sidebar. ZPL command codes live only in the
- *  tooltips, never in the always-visible label text. */
-function FieldLabel({ text, help }: { text: string; help: string }) {
-  return (
-    <span className={`${labelCls} flex items-center gap-1`}>
-      {text}
-      <InformationCircleIcon
-        className="w-3 h-3 text-muted/60 cursor-help"
-        title={help}
-      />
-    </span>
-  );
-}
-
 interface RowProps {
   variable: Variable;
   bindings: number;
diff --git a/src/components/ui/FieldLabel.tsx b/src/components/ui/FieldLabel.tsx
new file mode 100644
index 00000000..88be5a5e
--- /dev/null
+++ b/src/components/ui/FieldLabel.tsx
@@ -0,0 +1,22 @@
+import { InformationCircleIcon } from '@heroicons/react/16/solid';
+import { labelCls } from '../Properties/styles';
+
+/** Section / input label styled like the rest of the right sidebar
+ *  (small-caps muted text), optionally with a hover-help info icon.
+ *  Centralises the icon + sizing + cursor styling so every panel
+ *  shares the same look. ZPL command codes belong only in the help
+ *  string, never in the visible label text. */
+export function FieldLabel({ text, help }: { text: string; help?: string }) {
+  if (!help) {
+    return <span className={labelCls}>{text}</span>;
+  }
+  return (
+    <span className={`${labelCls} flex items-center gap-1`}>
+      {text}
+      <InformationCircleIcon
+        className="w-3 h-3 text-muted/60 cursor-help"
+        title={help}
+      />
+    </span>
+  );
+}
diff --git a/src/lib/zplImportService.ts b/src/lib/zplImportService.ts
index 991a6c32..5ef8d7f3 100644
--- a/src/lib/zplImportService.ts
+++ b/src/lib/zplImportService.ts
@@ -54,11 +54,13 @@ export function importZplText(zpl: string, dpmm: number): ZplImportResult {
       if (existing) {
         idRemap.set(v.id, existing.id);
       } else {
-        const remappedName = uniqueVariableName(v.name, variables);
-        const kept: Variable = { ...v, name: remappedName };
+        // New fnNumber: keep the entry but disambiguate the name if a
+        // prior block has the same (e.g. two `field_1` derived from
+        // different blocks). No id remap — the spread reuses v.id, and
+        // the block's objects already reference that id.
+        const kept: Variable = { ...v, name: uniqueVariableName(v.name, variables) };
         variables.push(kept);
         variablesByFn.set(kept.fnNumber, kept);
-        if (kept.name !== v.name) idRemap.set(v.id, kept.id);
       }
     }
     // Apply id remap to this block's objects so their `variableId`

From a8be0ab33a73d5f40a47c2e7d2d6871d2da3e49c Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Fri, 22 May 2026 22:54:50 +0200
Subject: [PATCH 09/11] i18n(variables): extract all Variables UI strings to
 t.variables.*
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Locale sweep across all 32 supported languages, completing Phase 1's
deferred i18n work. New keys live in a top-level `variables` block
plus a `variablesTab` key in the `layers` block (where the other
sidebar tab labels sit).

Migrated COPY constants → t.variables.X in:
- VariablesPanel.tsx (panel hint, empty-state, row labels + tooltips,
  delete-confirm template, error messages, parameterised badges)
- VariableBindingControl.tsx (section title + tooltip, dropdown
  placeholders, inline-create flow, bound preview)
- PropertiesPanel.tsx (Variable section title)
- RightSidebar.tsx (Variables tab tooltip)

Parameterised strings use the existing `Fmt` suffix convention with
`{name}`/`{n}` placeholders, consistent with multipleSelectedFmt
elsewhere in the locale.

Tooling notes (gitignored .local. scripts):
- add_locale_key.local.py extended with block_indent + block-scoped
  presence checks so anchors like `empty` or `cancel` that exist in
  multiple sibling blocks land in the intended one. Also accepts
  array-of-configs for batch addition (chains anchors automatically).
- add_variables_block.local.py is a one-off helper that seeded the
  `variables: {}` skeleton in all 32 locales before the key sweep.
---
 src/components/Properties/PropertiesPanel.tsx |   3 +-
 src/components/RightSidebar/RightSidebar.tsx  |   3 +-
 .../Variables/VariableBindingControl.tsx      |  67 +++++-------
 src/components/Variables/VariablesPanel.tsx   | 100 ++++++++----------
 src/locales/ar.ts                             |  36 +++++++
 src/locales/bg.ts                             |  36 +++++++
 src/locales/cs.ts                             |  36 +++++++
 src/locales/da.ts                             |  36 +++++++
 src/locales/de.ts                             |  36 +++++++
 src/locales/el.ts                             |  36 +++++++
 src/locales/en.ts                             |  36 +++++++
 src/locales/es.ts                             |  36 +++++++
 src/locales/et.ts                             |  36 +++++++
 src/locales/fa.ts                             |  36 +++++++
 src/locales/fi.ts                             |  36 +++++++
 src/locales/fr.ts                             |  36 +++++++
 src/locales/he.ts                             |  36 +++++++
 src/locales/hr.ts                             |  36 +++++++
 src/locales/hu.ts                             |  36 +++++++
 src/locales/it.ts                             |  36 +++++++
 src/locales/ja.ts                             |  36 +++++++
 src/locales/ko.ts                             |  36 +++++++
 src/locales/lt.ts                             |  36 +++++++
 src/locales/lv.ts                             |  36 +++++++
 src/locales/nl.ts                             |  36 +++++++
 src/locales/no.ts                             |  36 +++++++
 src/locales/pl.ts                             |  36 +++++++
 src/locales/pt.ts                             |  36 +++++++
 src/locales/ro.ts                             |  36 +++++++
 src/locales/sk.ts                             |  36 +++++++
 src/locales/sl.ts                             |  36 +++++++
 src/locales/sr.ts                             |  36 +++++++
 src/locales/sv.ts                             |  36 +++++++
 src/locales/tr.ts                             |  36 +++++++
 src/locales/zh-hans.ts                        |  36 +++++++
 src/locales/zh-hant.ts                        |  36 +++++++
 36 files changed, 1227 insertions(+), 98 deletions(-)

diff --git a/src/components/Properties/PropertiesPanel.tsx b/src/components/Properties/PropertiesPanel.tsx
index cd1a7cc5..f8a6cce9 100644
--- a/src/components/Properties/PropertiesPanel.tsx
+++ b/src/components/Properties/PropertiesPanel.tsx
@@ -220,8 +220,7 @@ export function PropertiesPanel({ canvasRef }: PropertiesPanelProps) {
           <>
             <CollapsibleSection
               id={obj.variableId ? 'properties-variable-bound' : 'properties-variable-unbound'}
-              // i18n: extracted in the end-of-branch locale sweep.
-              title="Variable"
+              title={t.variables.sectionTitle}
               defaultOpen={!!obj.variableId}
             >
               <VariableBindingControl obj={obj} />
diff --git a/src/components/RightSidebar/RightSidebar.tsx b/src/components/RightSidebar/RightSidebar.tsx
index e52cc2e1..81d3dc45 100644
--- a/src/components/RightSidebar/RightSidebar.tsx
+++ b/src/components/RightSidebar/RightSidebar.tsx
@@ -34,8 +34,7 @@ export function RightSidebar({ canvasRef }: Props) {
   const tabs: TabDef[] = [
     { id: 'properties', label: t.layers.propertiesTab, Icon: AdjustmentsHorizontalIcon },
     { id: 'layers', label: t.layers.layersTab, Icon: RectangleStackIcon },
-    // i18n: variables tab label gets a locale key in Phase 1 step 3d.
-    { id: 'variables', label: 'Variables', Icon: VariableIcon },
+    { id: 'variables', label: t.layers.variablesTab, Icon: VariableIcon },
     { id: 'fonts', label: t.layers.fontsTab, Icon: AaIcon },
   ];
 
diff --git a/src/components/Variables/VariableBindingControl.tsx b/src/components/Variables/VariableBindingControl.tsx
index 760dcc81..cc121bf7 100644
--- a/src/components/Variables/VariableBindingControl.tsx
+++ b/src/components/Variables/VariableBindingControl.tsx
@@ -4,25 +4,7 @@ import { useLabelStore } from '../../store/labelStore';
 import type { LabelObject } from '../../types/Group';
 import { inputCls } from '../Properties/styles';
 import { FieldLabel } from '../ui/FieldLabel';
-
-/* i18n: literal strings here belong to the end-of-branch locale sweep;
- *  see docs/variables-plan.local.md. */
-const COPY = {
-  label: 'Variable',
-  help:
-    'Bind this field to a Variable. The field will display the variable\'s default value and emit it as a ZPL ^FN slot at print time.',
-  unbound: 'Not bound',
-  createNew: '+ Create new variable…',
-  unbindAria: 'Unbind variable',
-  newNamePlaceholder: 'Name for new variable',
-  cancel: 'Cancel',
-  create: 'Create',
-  noSlotsLeft: 'All 99 ^FN slots are taken; remove an unused variable first.',
-  nameRequired: 'Name required.',
-  nameInUse: 'Name already in use.',
-  boundHint: 'Default editable in the Variables tab.',
-  emptyDefault: '(empty)',
-} as const;
+import { useT } from '../../lib/useT';
 
 const CREATE_NEW_SENTINEL = '__create_new__';
 
@@ -31,6 +13,8 @@ interface Props {
 }
 
 export function VariableBindingControl({ obj }: Props) {
+  const t = useT();
+  const tv = t.variables;
   const variables = useLabelStore((s) => s.variables);
   const updateObject = useLabelStore((s) => s.updateObject);
   const addVariable = useLabelStore((s) => s.addVariable);
@@ -67,7 +51,7 @@ export function VariableBindingControl({ obj }: Props) {
   const commitCreate = () => {
     const trimmed = newName.trim();
     if (trimmed === '') {
-      setError(COPY.nameRequired);
+      setError(tv.nameRequired);
       return;
     }
     // Seed the new variable's default with whatever literal content the
@@ -84,8 +68,8 @@ export function VariableBindingControl({ obj }: Props) {
       // which to fix.
       setError(
         variables.some((v) => v.name === trimmed)
-          ? COPY.nameInUse
-          : COPY.noSlotsLeft,
+          ? tv.nameInUse
+          : tv.noSlotsLeft,
       );
       return;
     }
@@ -103,14 +87,14 @@ export function VariableBindingControl({ obj }: Props) {
 
   return (
     <div className="flex flex-col gap-1">
-      <FieldLabel text={COPY.label} help={COPY.help} />
+      <FieldLabel text={tv.sectionTitle} help={tv.bindingHelp} />
 
       {creating ? (
         <div className="flex flex-col gap-1">
           <input
             autoFocus
             className={inputCls}
-            placeholder={COPY.newNamePlaceholder}
+            placeholder={tv.newNamePlaceholder}
             value={newName}
             onChange={(e) => {
               setNewName(e.target.value);
@@ -126,13 +110,13 @@ export function VariableBindingControl({ obj }: Props) {
               onClick={commitCreate}
               className="px-2 py-1 rounded text-xs font-mono bg-accent text-bg hover:opacity-90 transition-opacity"
             >
-              {COPY.create}
+              {tv.create}
             </button>
             <button
               onClick={cancelCreate}
               className="px-2 py-1 rounded text-xs font-mono text-muted hover:text-text transition-colors"
             >
-              {COPY.cancel}
+              {tv.cancel}
             </button>
           </div>
         </div>
@@ -143,19 +127,19 @@ export function VariableBindingControl({ obj }: Props) {
             value={boundVariable?.id ?? ''}
             onChange={handleSelect}
           >
-            <option value="">{COPY.unbound}</option>
-            {variables.map((v) => (
-              <option key={v.id} value={v.id}>
-                {formatVariableOption(v.name, v.defaultValue)}
+            <option value="">{tv.notBound}</option>
+            {variables.map((entry) => (
+              <option key={entry.id} value={entry.id}>
+                {formatVariableOption(entry.name, entry.defaultValue, tv.emptyDefault)}
               </option>
             ))}
-            <option value={CREATE_NEW_SENTINEL}>{COPY.createNew}</option>
+            <option value={CREATE_NEW_SENTINEL}>{tv.createNew}</option>
           </select>
           {boundVariable && (
             <button
               onClick={() => updateObject(obj.id, { variableId: undefined })}
-              aria-label={COPY.unbindAria}
-              title={COPY.unbindAria}
+              aria-label={tv.unbindAria}
+              title={tv.unbindAria}
               className="p-1 rounded text-muted hover:text-amber-400 hover:bg-surface-2 transition-colors"
             >
               <XMarkIcon className="w-3.5 h-3.5" />
@@ -172,10 +156,10 @@ export function VariableBindingControl({ obj }: Props) {
         <p className="font-mono text-[10px] text-muted leading-relaxed">
           <span className="text-text">
             {boundVariable.defaultValue === ''
-              ? COPY.emptyDefault
+              ? tv.emptyDefault
               : `"${boundVariable.defaultValue}"`}
           </span>{' '}
-          {COPY.boundHint}
+          {tv.boundHint}
         </p>
       )}
     </div>
@@ -183,12 +167,15 @@ export function VariableBindingControl({ obj }: Props) {
 }
 
 /** Render `{name} — "{default}"`, truncating long defaults so the
- *  <option> stays scannable in narrow dropdowns. Empty default is
- *  surfaced as `{name} — (empty)` rather than a trailing em-dash so
- *  users see the state explicitly. */
+ *  <option> stays scannable in narrow dropdowns. Empty default uses
+ *  the locale's `emptyDefault` label so users see the state explicitly. */
 const OPTION_DEFAULT_MAX = 24;
-function formatVariableOption(name: string, defaultValue: string): string {
-  if (defaultValue === '') return `${name} — (empty)`;
+function formatVariableOption(
+  name: string,
+  defaultValue: string,
+  emptyLabel: string,
+): string {
+  if (defaultValue === '') return `${name} — ${emptyLabel}`;
   const truncated =
     defaultValue.length > OPTION_DEFAULT_MAX
       ? `${defaultValue.slice(0, OPTION_DEFAULT_MAX)}…`
diff --git a/src/components/Variables/VariablesPanel.tsx b/src/components/Variables/VariablesPanel.tsx
index 410fc6d3..6b4cb49e 100644
--- a/src/components/Variables/VariablesPanel.tsx
+++ b/src/components/Variables/VariablesPanel.tsx
@@ -11,40 +11,12 @@ import { walkObjects, type LabelObject } from '../../types/Group';
 import { inputCls } from '../Properties/styles';
 import { ConfirmDialog } from '../ui/ConfirmDialog';
 import { FieldLabel } from '../ui/FieldLabel';
-
-/* i18n: literal strings in this file are scheduled for locale extraction in
- *  Phase 1 step 3d. Keep them in one place so the sweep is mechanical. */
-const COPY = {
-  panelHint:
-    'Defaults that get filled in at print time. Bind a field from its Properties tab.',
-  add: 'Add variable',
-  empty: 'No variables yet.',
-  emptyExample:
-    'Useful for sequential SKUs, batch numbers, or customer names.',
-  nameLabel: 'Name',
-  nameHelp:
-    'Free-text identifier shown in the Properties dropdown when binding a field. For you, not the printer.',
-  fnLabel: 'Slot',
-  fnHelp:
-    'ZPL ^FN slot number (1-99) the printer uses to address this variable. Auto-assigned; only change when integrating with a system that injects data via ^FV at print time.',
-  defaultLabel: 'Default',
-  defaultHelp:
-    'Value rendered on the canvas and emitted as the ZPL ^FD payload. External systems can override it at print time.',
-  removeAria: (name: string) => `Remove variable ${name}`,
-  bindingsBadge: (n: number) => (n === 1 ? '1 binding' : `${n} bindings`),
-  noBindings: 'unused',
-  deleteMessage: (name: string, count: number) =>
-    count === 0
-      ? `Delete variable "${name}"? It is not bound to any field.`
-      : `Delete variable "${name}"? It is bound to ${count} field${count === 1 ? '' : 's'}; they will be unbound and fall back to their last literal value.`,
-  deleteConfirm: 'Delete',
-  deleteCancel: 'Cancel',
-  noSlotsLeft: 'All 99 slots are taken.',
-  nameInUse: 'Name already in use.',
-  slotInUse: 'Slot already in use.',
-} as const;
+import { useT } from '../../lib/useT';
+import type { Translations } from '../../locales';
 
 export function VariablesPanel() {
+  const t = useT();
+  const tv = t.variables;
   const variables = useLabelStore((s) => s.variables);
   const pages = useLabelStore((s) => s.pages);
   const addVariable = useLabelStore((s) => s.addVariable);
@@ -73,7 +45,7 @@ export function VariablesPanel() {
       // Name collisions on a fresh `var_n` are essentially impossible
       // since `n` is unique; the only realistic null path is exhausted
       // ^FN slots.
-      setPanelError(COPY.noSlotsLeft);
+      setPanelError(tv.noSlotsLeft);
       return;
     }
     setPanelError(null);
@@ -109,34 +81,35 @@ export function VariablesPanel() {
   return (
     <div className="flex flex-col gap-3 p-3">
       <p className="font-mono text-[10px] text-muted leading-relaxed">
-        {COPY.panelHint}
+        {tv.panelHint}
       </p>
 
       {variables.length === 0 ? (
         <div className="flex flex-col gap-2">
-          <p className="font-mono text-[10px] text-muted italic">{COPY.empty}</p>
+          <p className="font-mono text-[10px] text-muted italic">{tv.empty}</p>
           <p className="font-mono text-[10px] text-muted leading-relaxed">
-            {COPY.emptyExample}
+            {tv.emptyExample}
           </p>
         </div>
       ) : (
         <ul className="flex flex-col gap-3">
-          {variables.map((v) => (
+          {variables.map((entry) => (
             <VariableRow
-              key={v.id}
-              variable={v}
-              bindings={bindingCounts.get(v.id) ?? 0}
-              error={rowError[v.id]}
+              key={entry.id}
+              variable={entry}
+              bindings={bindingCounts.get(entry.id) ?? 0}
+              error={rowError[entry.id]}
+              tv={tv}
               onChangeName={(name) =>
-                tryUpdate(v.id, { name }, COPY.nameInUse)
+                tryUpdate(entry.id, { name }, tv.nameInUse)
               }
               onChangeFnNumber={(fnNumber) =>
-                tryUpdate(v.id, { fnNumber }, COPY.slotInUse)
+                tryUpdate(entry.id, { fnNumber }, tv.slotInUse)
               }
               onChangeDefault={(defaultValue) =>
-                tryUpdate(v.id, { defaultValue }, '')
+                tryUpdate(entry.id, { defaultValue }, '')
               }
-              onRequestDelete={() => setPendingDelete(v)}
+              onRequestDelete={() => setPendingDelete(entry)}
             />
           ))}
         </ul>
@@ -148,7 +121,7 @@ export function VariablesPanel() {
         className="flex items-center gap-1.5 px-2 py-1.5 rounded text-xs font-mono border border-dashed border-border text-muted hover:text-text hover:border-border-2 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
       >
         <PlusIcon className="w-3.5 h-3.5" />
-        {COPY.add}
+        {tv.add}
       </button>
 
       {panelError && (
@@ -157,12 +130,13 @@ export function VariablesPanel() {
 
       {pendingDelete && (
         <ConfirmDialog
-          message={COPY.deleteMessage(
+          message={formatDeleteMessage(
+            tv,
             pendingDelete.name,
             bindingCounts.get(pendingDelete.id) ?? 0,
           )}
-          confirmLabel={COPY.deleteConfirm}
-          cancelLabel={COPY.deleteCancel}
+          confirmLabel={tv.confirmDelete}
+          cancelLabel={tv.cancel}
           destructive
           onConfirm={() => {
             removeVariable(pendingDelete.id);
@@ -179,6 +153,7 @@ interface RowProps {
   variable: Variable;
   bindings: number;
   error?: string;
+  tv: Translations['variables'];
   onChangeName: (next: string) => void;
   onChangeFnNumber: (next: number) => void;
   onChangeDefault: (next: string) => void;
@@ -189,6 +164,7 @@ function VariableRow({
   variable,
   bindings,
   error,
+  tv,
   onChangeName,
   onChangeFnNumber,
   onChangeDefault,
@@ -232,7 +208,7 @@ function VariableRow({
     <li className="flex flex-col gap-1.5">
       <div className="flex items-end gap-2">
         <div className="flex-1 flex flex-col gap-0.5">
-          <FieldLabel text={COPY.nameLabel} help={COPY.nameHelp} />
+          <FieldLabel text={tv.nameLabel} help={tv.nameHelp} />
           <input
             className={inputCls}
             value={name}
@@ -241,7 +217,7 @@ function VariableRow({
           />
         </div>
         <div className="w-14 flex flex-col gap-0.5">
-          <FieldLabel text={COPY.fnLabel} help={COPY.fnHelp} />
+          <FieldLabel text={tv.fnLabel} help={tv.fnHelp} />
           <input
             type="number"
             min={FN_NUMBER_MIN}
@@ -254,14 +230,14 @@ function VariableRow({
         </div>
         <button
           onClick={onRequestDelete}
-          aria-label={COPY.removeAria(variable.name)}
+          aria-label={tv.removeAriaFmt.replace('{name}', variable.name)}
           className="p-1.5 rounded text-muted hover:text-amber-400 hover:bg-surface-2 transition-colors"
         >
           <TrashIcon className="w-3.5 h-3.5" />
         </button>
       </div>
       <div className="flex flex-col gap-0.5">
-        <FieldLabel text={COPY.defaultLabel} help={COPY.defaultHelp} />
+        <FieldLabel text={tv.defaultLabel} help={tv.defaultHelp} />
         <input
           className={inputCls}
           value={def}
@@ -271,7 +247,11 @@ function VariableRow({
       </div>
       <div className="flex justify-between items-center font-mono text-[9px] uppercase tracking-wider text-muted">
         <span>
-          {bindings === 0 ? COPY.noBindings : COPY.bindingsBadge(bindings)}
+          {bindings === 0
+            ? tv.noBindings
+            : bindings === 1
+              ? tv.bindingsSingular
+              : tv.bindingsPluralFmt.replace('{n}', String(bindings))}
         </span>
         {error && <span className="text-amber-400">{error}</span>}
       </div>
@@ -279,6 +259,18 @@ function VariableRow({
   );
 }
 
+/** Build the delete-confirmation message from the parameterised locale
+ *  templates. Lives outside the component so the locale format is a
+ *  pure transformation, not a hook-bound side effect. */
+function formatDeleteMessage(
+  tv: Translations['variables'],
+  name: string,
+  count: number,
+): string {
+  const template = count === 0 ? tv.deleteUnboundFmt : tv.deleteBoundFmt;
+  return template.replace('{name}', name).replace('{n}', String(count));
+}
+
 /** Walk every page (groups too) and tally how many fields reference each
  *  variable. Returns a Map keyed by variable.id. Variables with no
  *  bindings are absent from the map; callers default to 0. */
diff --git a/src/locales/ar.ts b/src/locales/ar.ts
index 15459ca1..948a1ab9 100644
--- a/src/locales/ar.ts
+++ b/src/locales/ar.ts
@@ -440,6 +440,7 @@ const ar = {
     propertiesTab: 'الخصائص',
     layersTab: 'الطبقات',
     fontsTab: 'الخطوط',
+    variablesTab: 'المتغيرات',
     empty: 'لا توجد عناصر على الملصق',
     toFront: 'إحضار للأمام',
     forward: 'تقديم للأمام',
@@ -453,6 +454,41 @@ const ar = {
     show: 'إظهار',
     hide: 'إخفاء',
   },
+
+  variables: {
+    panelHint: 'قيم افتراضية تُملأ وقت الطباعة. اربط حقلاً من علامة التبويب الخصائص.',
+    add: 'إضافة متغير',
+    empty: 'لا توجد متغيرات بعد.',
+    emptyExample: 'مفيدة لأرقام SKU المتسلسلة وأرقام الدفعات وأسماء العملاء.',
+    nameLabel: 'الاسم',
+    nameHelp: 'معرّف نصي حر يظهر في القائمة المنسدلة بالخصائص عند ربط حقل. لك أنت، وليس للطابعة.',
+    fnLabel: 'الفتحة',
+    fnHelp: 'رقم فتحة ZPL ^FN (1-99) الذي يستخدمه الطابع لمعالجة هذا المتغير. يُعيَّن تلقائياً؛ غيّره فقط عند التكامل مع نظام يحقن البيانات عبر ^FV وقت الطباعة.',
+    defaultLabel: 'الافتراضي',
+    defaultHelp: 'القيمة المعروضة على القماش وتُصدر كحمولة ZPL ^FD. يمكن للأنظمة الخارجية تجاوزها وقت الطباعة.',
+    noBindings: 'غير مستخدم',
+    confirmDelete: 'حذف',
+    cancel: 'إلغاء',
+    noSlotsLeft: 'جميع الفتحات الـ99 مأخوذة.',
+    nameInUse: 'الاسم مستخدم بالفعل.',
+    slotInUse: 'الفتحة مستخدمة بالفعل.',
+    sectionTitle: 'متغير',
+    bindingHelp: 'اربط هذا الحقل بمتغير. سيعرض الحقل القيمة الافتراضية للمتغير ويُصدرها كفتحة ZPL ^FN وقت الطباعة.',
+    notBound: 'غير مرتبط',
+    createNew: '+ إنشاء متغير جديد…',
+    unbindAria: 'إلغاء ربط المتغير',
+    newNamePlaceholder: 'اسم للمتغير الجديد',
+    create: 'إنشاء',
+    nameRequired: 'الاسم مطلوب.',
+    boundHint: 'يمكن تحرير الافتراضي في علامة تبويب المتغيرات.',
+    emptyDefault: '(فارغ)',
+    removeAriaFmt: 'إزالة المتغير {name}',
+    bindingsSingular: 'ربط واحد',
+    bindingsPluralFmt: '{n} ارتباط',
+    deleteUnboundFmt: 'حذف المتغير "{name}"؟ غير مرتبط بأي حقل.',
+    deleteBoundFmt: 'حذف المتغير "{name}"؟ مرتبط بـ {n} حقول؛ ستُلغى ارتباطها وتعود إلى آخر قيمة حرفية.',
+    badgeBoundFmt: 'مرتبط بـ {name}',
+  },
   fonts: {
     heading: 'الخطوط',
     noFonts: 'لا توجد خطوط محملة',
diff --git a/src/locales/bg.ts b/src/locales/bg.ts
index ff08b956..868f81c0 100644
--- a/src/locales/bg.ts
+++ b/src/locales/bg.ts
@@ -440,6 +440,7 @@ const bg = {
     propertiesTab: 'Свойства',
     layersTab: 'Слоеве',
     fontsTab: 'Шрифтове',
+    variablesTab: 'Променливи',
     empty: 'Няма обекти върху етикета',
     toFront: 'Премести най-напред',
     forward: 'Премести напред',
@@ -453,6 +454,41 @@ const bg = {
     show: 'Покажи',
     hide: 'Скрий',
   },
+
+  variables: {
+    panelHint: 'Стойности по подразбиране, попълвани при печат. Свържете поле от раздел Свойства.',
+    add: 'Добави променлива',
+    empty: 'Все още няма променливи.',
+    emptyExample: 'Полезно за поредни SKU, партидни номера или имена на клиенти.',
+    nameLabel: 'Име',
+    nameHelp: 'Свободен идентификатор, показван в падащото меню в Свойства при свързване на поле. За вас, не за принтера.',
+    fnLabel: 'Слот',
+    fnHelp: 'Номер на слот ZPL ^FN (1-99), който принтерът използва за адресиране на тази променлива. Назначава се автоматично; променяйте го само при интеграция със система, която изпраща данни чрез ^FV при печат.',
+    defaultLabel: 'По подразбиране',
+    defaultHelp: 'Стойност, показвана върху платното и излъчвана като ZPL ^FD данни. Външни системи могат да я заместят при печат.',
+    noBindings: 'неизползвана',
+    confirmDelete: 'Изтрий',
+    cancel: 'Отказ',
+    noSlotsLeft: 'Всичките 99 слота са заети.',
+    nameInUse: 'Името вече се използва.',
+    slotInUse: 'Слотът вече се използва.',
+    sectionTitle: 'Променлива',
+    bindingHelp: 'Свържете това поле с променлива. Полето ще покаже стойността по подразбиране на променливата и ще я излъчи като ZPL ^FN слот при печат.',
+    notBound: 'Не е свързано',
+    createNew: '+ Създай нова променлива…',
+    unbindAria: 'Премахни връзката',
+    newNamePlaceholder: 'Име на новата променлива',
+    create: 'Създай',
+    nameRequired: 'Името е задължително.',
+    boundHint: 'Стойността по подразбиране се редактира в раздел Променливи.',
+    emptyDefault: '(празно)',
+    removeAriaFmt: 'Премахни променливата {name}',
+    bindingsSingular: '1 връзка',
+    bindingsPluralFmt: '{n} връзки',
+    deleteUnboundFmt: 'Изтриване на променливата "{name}"? Не е свързана с никое поле.',
+    deleteBoundFmt: 'Изтриване на променливата "{name}"? Свързана е с {n} полета; връзките ще се прекъснат и ще се върнат към последната буквална стойност.',
+    badgeBoundFmt: 'Свързано с {name}',
+  },
   fonts: {
     heading: 'Шрифтове',
     noFonts: 'Няма заредени шрифтове',
diff --git a/src/locales/cs.ts b/src/locales/cs.ts
index c3d8a65c..61acc39f 100644
--- a/src/locales/cs.ts
+++ b/src/locales/cs.ts
@@ -440,6 +440,7 @@ const cs = {
     propertiesTab: 'Vlastnosti',
     layersTab: 'Vrstvy',
     fontsTab: 'Písma',
+    variablesTab: 'Proměnné',
     empty: 'Na štítku nejsou žádné objekty',
     toFront: 'Přenést do popředí',
     forward: 'Posunout dopředu',
@@ -453,6 +454,41 @@ const cs = {
     show: 'Zobrazit',
     hide: 'Skrýt',
   },
+
+  variables: {
+    panelHint: 'Výchozí hodnoty doplňované při tisku. Provázat pole lze v záložce Vlastnosti.',
+    add: 'Přidat proměnnou',
+    empty: 'Zatím žádné proměnné.',
+    emptyExample: 'Hodí se na sekvenční SKU, čísla šarží nebo jména zákazníků.',
+    nameLabel: 'Název',
+    nameHelp: 'Volně psaný identifikátor zobrazený v rozbalovacím seznamu Vlastností při provazování pole. Pro vás, ne pro tiskárnu.',
+    fnLabel: 'Slot',
+    fnHelp: 'Číslo slotu ZPL ^FN (1-99), které tiskárna používá k adresování této proměnné. Přiřazeno automaticky; měňte jen při integraci se systémem, který data dodává přes ^FV při tisku.',
+    defaultLabel: 'Výchozí',
+    defaultHelp: 'Hodnota vykreslená na plátně a posílaná jako ^FD obsah ZPL. Externí systémy ji mohou přepsat při tisku.',
+    noBindings: 'nepoužito',
+    confirmDelete: 'Smazat',
+    cancel: 'Zrušit',
+    noSlotsLeft: 'Všech 99 slotů je obsazeno.',
+    nameInUse: 'Název už existuje.',
+    slotInUse: 'Slot už existuje.',
+    sectionTitle: 'Proměnná',
+    bindingHelp: 'Provázat toto pole s proměnnou. Pole zobrazí výchozí hodnotu proměnné a vypíše ji jako ^FN slot ZPL při tisku.',
+    notBound: 'Nepřipojeno',
+    createNew: '+ Vytvořit novou proměnnou…',
+    unbindAria: 'Odpojit proměnnou',
+    newNamePlaceholder: 'Název nové proměnné',
+    create: 'Vytvořit',
+    nameRequired: 'Název je povinný.',
+    boundHint: 'Výchozí hodnotu lze upravit v záložce Proměnné.',
+    emptyDefault: '(prázdné)',
+    removeAriaFmt: 'Odebrat proměnnou {name}',
+    bindingsSingular: '1 vazba',
+    bindingsPluralFmt: '{n} vazeb',
+    deleteUnboundFmt: 'Smazat proměnnou „{name}"? Není svázána s žádným polem.',
+    deleteBoundFmt: 'Smazat proměnnou „{name}"? Je svázána se {n} poli; svazby budou zrušeny a pole se vrátí k poslední doslovné hodnotě.',
+    badgeBoundFmt: 'Provázáno s {name}',
+  },
   fonts: {
     heading: 'Písma',
     noFonts: 'Žádná písma nenačtena',
diff --git a/src/locales/da.ts b/src/locales/da.ts
index 08a0ba37..4ca997b0 100644
--- a/src/locales/da.ts
+++ b/src/locales/da.ts
@@ -440,6 +440,7 @@ const da = {
     propertiesTab: 'Egenskaber',
     layersTab: 'Lag',
     fontsTab: 'Skrifttyper',
+    variablesTab: 'Variabler',
     empty: 'Ingen objekter på etiketten',
     toFront: 'Bring til forgrunden',
     forward: 'Flyt et lag frem',
@@ -453,6 +454,41 @@ const da = {
     show: 'Vis',
     hide: 'Skjul',
   },
+
+  variables: {
+    panelHint: 'Standardværdier, der udfyldes ved udskrivning. Bind et felt fra fanen Egenskaber.',
+    add: 'Tilføj variabel',
+    empty: 'Ingen variabler endnu.',
+    emptyExample: 'Nyttig til sekventielle SKU\\\'er, batchnumre eller kundenavne.',
+    nameLabel: 'Navn',
+    nameHelp: 'Frit valgt identifikator vist i rullemenuen Egenskaber, når du binder et felt. Til dig, ikke til printeren.',
+    fnLabel: 'Slot',
+    fnHelp: 'ZPL ^FN-pladsnummer (1-99), som printeren bruger til at adressere denne variabel. Tildeles automatisk; ændr kun ved integration med et system, der sender data via ^FV ved udskrift.',
+    defaultLabel: 'Standard',
+    defaultHelp: 'Værdien, der vises på lærredet og udsendes som ZPL ^FD-data. Eksterne systemer kan overskrive den ved udskrift.',
+    noBindings: 'ubrugt',
+    confirmDelete: 'Slet',
+    cancel: 'Annuller',
+    noSlotsLeft: 'Alle 99 pladser er taget.',
+    nameInUse: 'Navnet er allerede i brug.',
+    slotInUse: 'Pladsen er allerede i brug.',
+    sectionTitle: 'Variabel',
+    bindingHelp: 'Bind dette felt til en variabel. Feltet viser variablens standardværdi og udsender den som et ZPL ^FN-slot ved udskrift.',
+    notBound: 'Ikke bundet',
+    createNew: '+ Opret ny variabel…',
+    unbindAria: 'Frigør variabel',
+    newNamePlaceholder: 'Navn til ny variabel',
+    create: 'Opret',
+    nameRequired: 'Navn er påkrævet.',
+    boundHint: 'Standardværdien kan redigeres i Variabler-fanen.',
+    emptyDefault: '(tom)',
+    removeAriaFmt: 'Fjern variabel {name}',
+    bindingsSingular: '1 binding',
+    bindingsPluralFmt: '{n} bindinger',
+    deleteUnboundFmt: 'Slet variablen "{name}"? Den er ikke bundet til noget felt.',
+    deleteBoundFmt: 'Slet variablen "{name}"? Den er bundet til {n} felter; bindingerne fjernes, og felterne falder tilbage til den sidste bogstavelige værdi.',
+    badgeBoundFmt: 'Bundet til {name}',
+  },
   fonts: {
     heading: 'Skrifttyper',
     noFonts: 'Ingen skrifttyper indlæst',
diff --git a/src/locales/de.ts b/src/locales/de.ts
index 37852c8d..2c6663df 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -461,6 +461,7 @@ const de = {
     propertiesTab: 'Eigenschaften',
     layersTab: 'Ebenen',
     fontsTab: 'Schriften',
+    variablesTab: 'Variablen',
     empty: 'Keine Objekte auf dem Etikett',
     toFront: 'In den Vordergrund',
     forward: 'Eine Ebene nach vorne',
@@ -474,6 +475,41 @@ const de = {
     show: 'Einblenden',
     hide: 'Ausblenden',
   },
+
+  variables: {
+    panelHint: 'Standardwerte, die zur Druckzeit eingesetzt werden. Feld in der Eigenschaften-Tab binden.',
+    add: 'Variable hinzufügen',
+    empty: 'Noch keine Variablen.',
+    emptyExample: 'Praktisch für fortlaufende SKUs, Chargennummern oder Kundennamen.',
+    nameLabel: 'Name',
+    nameHelp: 'Frei wählbarer Bezeichner, im Eigenschaften-Dropdown beim Binden eines Felds sichtbar. Für dich, nicht den Drucker.',
+    fnLabel: 'Slot',
+    fnHelp: 'ZPL ^FN-Slot-Nummer (1-99), mit der der Drucker diese Variable adressiert. Automatisch vergeben; nur ändern bei Integration mit Systemen, die Daten via ^FV zur Druckzeit liefern.',
+    defaultLabel: 'Standard',
+    defaultHelp: 'Wert, der auf der Canvas dargestellt und als ZPL ^FD-Payload ausgegeben wird. Externe Systeme können ihn zur Druckzeit überschreiben.',
+    noBindings: 'ungenutzt',
+    confirmDelete: 'Löschen',
+    cancel: 'Abbrechen',
+    noSlotsLeft: 'Alle 99 Slots sind belegt.',
+    nameInUse: 'Name bereits in Benutzung.',
+    slotInUse: 'Slot bereits in Benutzung.',
+    sectionTitle: 'Variable',
+    bindingHelp: 'Dieses Feld an eine Variable binden. Das Feld zeigt den Standardwert der Variable und gibt ihn zur Druckzeit als ZPL ^FN-Slot aus.',
+    notBound: 'Nicht gebunden',
+    createNew: '+ Neue Variable erstellen…',
+    unbindAria: 'Variable lösen',
+    newNamePlaceholder: 'Name für neue Variable',
+    create: 'Erstellen',
+    nameRequired: 'Name erforderlich.',
+    boundHint: 'Standard im Variablen-Tab editierbar.',
+    emptyDefault: '(leer)',
+    removeAriaFmt: 'Variable {name} entfernen',
+    bindingsSingular: '1 Bindung',
+    bindingsPluralFmt: '{n} Bindungen',
+    deleteUnboundFmt: 'Variable „{name}" löschen? Sie ist an kein Feld gebunden.',
+    deleteBoundFmt: 'Variable „{name}" löschen? Sie ist an {n} Felder gebunden; die Bindungen werden gelöst, die Felder fallen auf ihren letzten Literal-Wert zurück.',
+    badgeBoundFmt: 'Gebunden an {name}',
+  },
   fonts: {
     heading: 'Schriften',
     noFonts: 'Keine Schriften geladen',
diff --git a/src/locales/el.ts b/src/locales/el.ts
index c05e8098..d08593ee 100644
--- a/src/locales/el.ts
+++ b/src/locales/el.ts
@@ -440,6 +440,7 @@ const el = {
     propertiesTab: 'Ιδιότητες',
     layersTab: 'Επίπεδα',
     fontsTab: 'Γραμματοσειρές',
+    variablesTab: 'Μεταβλητές',
     empty: 'Δεν υπάρχουν αντικείμενα στην ετικέτα',
     toFront: 'Μεταφορά στο μπροστά',
     forward: 'Ένα επίπεδο μπροστά',
@@ -453,6 +454,41 @@ const el = {
     show: 'Εμφάνιση',
     hide: 'Απόκρυψη',
   },
+
+  variables: {
+    panelHint: 'Προεπιλογές που συμπληρώνονται κατά την εκτύπωση. Συνδέστε ένα πεδίο από την καρτέλα Ιδιότητες.',
+    add: 'Προσθήκη μεταβλητής',
+    empty: 'Δεν υπάρχουν ακόμη μεταβλητές.',
+    emptyExample: 'Χρήσιμο για διαδοχικά SKU, αριθμούς παρτίδας ή ονόματα πελατών.',
+    nameLabel: 'Όνομα',
+    nameHelp: 'Ελεύθερο αναγνωριστικό που εμφανίζεται στην αναπτυσσόμενη λίστα Ιδιοτήτων κατά τη σύνδεση πεδίου. Για εσάς, όχι για τον εκτυπωτή.',
+    fnLabel: 'Υποδοχή',
+    fnHelp: 'Αριθμός υποδοχής ZPL ^FN (1-99) που χρησιμοποιεί ο εκτυπωτής για να διευθυνσιοδοτήσει αυτή τη μεταβλητή. Εκχωρείται αυτόματα· αλλάξτε τον μόνο όταν ενσωματώνεστε με σύστημα που στέλνει δεδομένα μέσω ^FV στην εκτύπωση.',
+    defaultLabel: 'Προεπιλογή',
+    defaultHelp: 'Η τιμή που εμφανίζεται στον καμβά και εκπέμπεται ως ZPL ^FD payload. Εξωτερικά συστήματα μπορούν να την αντικαταστήσουν κατά την εκτύπωση.',
+    noBindings: 'αχρησιμοποίητη',
+    confirmDelete: 'Διαγραφή',
+    cancel: 'Άκυρο',
+    noSlotsLeft: 'Και τα 99 slot είναι κατειλημμένα.',
+    nameInUse: 'Το όνομα χρησιμοποιείται ήδη.',
+    slotInUse: 'Η υποδοχή χρησιμοποιείται ήδη.',
+    sectionTitle: 'Μεταβλητή',
+    bindingHelp: 'Συνδέστε αυτό το πεδίο με μια μεταβλητή. Το πεδίο εμφανίζει την προεπιλεγμένη τιμή της μεταβλητής και την εκπέμπει ως ZPL ^FN slot κατά την εκτύπωση.',
+    notBound: 'Μη συνδεδεμένο',
+    createNew: '+ Δημιουργία νέας μεταβλητής…',
+    unbindAria: 'Αποσύνδεση μεταβλητής',
+    newNamePlaceholder: 'Όνομα νέας μεταβλητής',
+    create: 'Δημιουργία',
+    nameRequired: 'Απαιτείται όνομα.',
+    boundHint: 'Η προεπιλογή επεξεργάζεται στην καρτέλα Μεταβλητές.',
+    emptyDefault: '(κενό)',
+    removeAriaFmt: 'Κατάργηση μεταβλητής {name}',
+    bindingsSingular: '1 σύνδεση',
+    bindingsPluralFmt: '{n} συνδέσεις',
+    deleteUnboundFmt: 'Διαγραφή μεταβλητής "{name}"; Δεν είναι συνδεδεμένη με κανένα πεδίο.',
+    deleteBoundFmt: 'Διαγραφή μεταβλητής "{name}"; Είναι συνδεδεμένη με {n} πεδία· οι συνδέσεις θα αποσυνδεθούν και θα επιστρέψουν στην τελευταία κυριολεκτική τιμή τους.',
+    badgeBoundFmt: 'Συνδεδεμένο με {name}',
+  },
   fonts: {
     heading: 'Γραμματοσειρές',
     noFonts: 'Δεν φορτώθηκαν γραμματοσειρές',
diff --git a/src/locales/en.ts b/src/locales/en.ts
index c58dced9..be3b0144 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -461,6 +461,7 @@ const en = {
     propertiesTab: 'Properties',
     layersTab: 'Layers',
     fontsTab: 'Fonts',
+    variablesTab: 'Variables',
     empty: 'No objects on the label',
     toFront: 'Bring to Front',
     forward: 'Bring Forward',
@@ -474,6 +475,41 @@ const en = {
     show: 'Show',
     hide: 'Hide',
   },
+
+  variables: {
+    panelHint: 'Defaults that get filled in at print time. Bind a field from its Properties tab.',
+    add: 'Add variable',
+    empty: 'No variables yet.',
+    emptyExample: 'Useful for sequential SKUs, batch numbers, or customer names.',
+    nameLabel: 'Name',
+    nameHelp: 'Free-text identifier shown in the Properties dropdown when binding a field. For you, not the printer.',
+    fnLabel: 'Slot',
+    fnHelp: 'ZPL ^FN slot number (1-99) the printer uses to address this variable. Auto-assigned; only change when integrating with a system that injects data via ^FV at print time.',
+    defaultLabel: 'Default',
+    defaultHelp: 'Value rendered on the canvas and emitted as the ZPL ^FD payload. External systems can override it at print time.',
+    noBindings: 'unused',
+    confirmDelete: 'Delete',
+    cancel: 'Cancel',
+    noSlotsLeft: 'All 99 slots are taken.',
+    nameInUse: 'Name already in use.',
+    slotInUse: 'Slot already in use.',
+    sectionTitle: 'Variable',
+    bindingHelp: 'Bind this field to a Variable. The field will display the variable\\\'s default value and emit it as a ZPL ^FN slot at print time.',
+    notBound: 'Not bound',
+    createNew: '+ Create new variable…',
+    unbindAria: 'Unbind variable',
+    newNamePlaceholder: 'Name for new variable',
+    create: 'Create',
+    nameRequired: 'Name required.',
+    boundHint: 'Default editable in the Variables tab.',
+    emptyDefault: '(empty)',
+    removeAriaFmt: 'Remove variable {name}',
+    bindingsSingular: '1 binding',
+    bindingsPluralFmt: '{n} bindings',
+    deleteUnboundFmt: 'Delete variable "{name}"? It is not bound to any field.',
+    deleteBoundFmt: 'Delete variable "{name}"? It is bound to {n} fields; they will be unbound and fall back to their last literal value.',
+    badgeBoundFmt: 'Bound to {name}',
+  },
   fonts: {
     heading: 'Fonts',
     noFonts: 'No fonts loaded',
diff --git a/src/locales/es.ts b/src/locales/es.ts
index 9a10b3d4..bfa82e03 100644
--- a/src/locales/es.ts
+++ b/src/locales/es.ts
@@ -440,6 +440,7 @@ const es = {
     propertiesTab: 'Propiedades',
     layersTab: 'Capas',
     fontsTab: 'Fuentes',
+    variablesTab: 'Variables',
     empty: 'No hay objetos en la etiqueta',
     toFront: 'Traer al frente',
     forward: 'Avanzar una capa',
@@ -453,6 +454,41 @@ const es = {
     show: 'Mostrar',
     hide: 'Ocultar',
   },
+
+  variables: {
+    panelHint: 'Valores predeterminados que se rellenan al imprimir. Vincula un campo desde la pestaña Propiedades.',
+    add: 'Añadir variable',
+    empty: 'Aún no hay variables.',
+    emptyExample: 'Útil para SKU secuenciales, números de lote o nombres de clientes.',
+    nameLabel: 'Nombre',
+    nameHelp: 'Identificador libre que aparece en el desplegable de Propiedades al vincular un campo. Para ti, no para la impresora.',
+    fnLabel: 'Ranura',
+    fnHelp: 'Número de ranura ZPL ^FN (1-99) que la impresora usa para direccionar esta variable. Asignado automáticamente; cámbialo solo al integrar con un sistema que envía datos vía ^FV en el momento de imprimir.',
+    defaultLabel: 'Predeterminado',
+    defaultHelp: 'Valor mostrado en el lienzo y emitido como carga ZPL ^FD. Sistemas externos pueden sobrescribirlo al imprimir.',
+    noBindings: 'sin uso',
+    confirmDelete: 'Eliminar',
+    cancel: 'Cancelar',
+    noSlotsLeft: 'Las 99 ranuras están ocupadas.',
+    nameInUse: 'El nombre ya está en uso.',
+    slotInUse: 'La ranura ya está en uso.',
+    sectionTitle: 'Variable',
+    bindingHelp: 'Vincula este campo a una variable. El campo mostrará el valor predeterminado de la variable y lo emitirá como una ranura ZPL ^FN al imprimir.',
+    notBound: 'Sin vincular',
+    createNew: '+ Crear nueva variable…',
+    unbindAria: 'Desvincular variable',
+    newNamePlaceholder: 'Nombre de la nueva variable',
+    create: 'Crear',
+    nameRequired: 'Se requiere un nombre.',
+    boundHint: 'El valor predeterminado se edita en la pestaña Variables.',
+    emptyDefault: '(vacío)',
+    removeAriaFmt: 'Quitar variable {name}',
+    bindingsSingular: '1 vínculo',
+    bindingsPluralFmt: '{n} vínculos',
+    deleteUnboundFmt: '¿Eliminar la variable "{name}"? No está vinculada a ningún campo.',
+    deleteBoundFmt: '¿Eliminar la variable "{name}"? Está vinculada a {n} campos; se desvincularán y volverán a su último valor literal.',
+    badgeBoundFmt: 'Vinculado a {name}',
+  },
   fonts: {
     heading: 'Fuentes',
     noFonts: 'No hay fuentes cargadas',
diff --git a/src/locales/et.ts b/src/locales/et.ts
index f0d19418..9de54743 100644
--- a/src/locales/et.ts
+++ b/src/locales/et.ts
@@ -440,6 +440,7 @@ const et = {
     propertiesTab: 'Omadused',
     layersTab: 'Kihid',
     fontsTab: 'Fondid',
+    variablesTab: 'Muutujad',
     empty: 'Sildil pole objekte',
     toFront: 'Too ette',
     forward: 'Liiguta üks kiht ette',
@@ -453,6 +454,41 @@ const et = {
     show: 'Näita',
     hide: 'Peida',
   },
+
+  variables: {
+    panelHint: 'Vaikeväärtused, mis täidetakse trükkimise ajal. Seo väli omaduste vahekaardilt.',
+    add: 'Lisa muutuja',
+    empty: 'Veel pole muutujaid.',
+    emptyExample: 'Sobib järjestikuste SKU-de, partii numbrite või klientide nimede jaoks.',
+    nameLabel: 'Nimi',
+    nameHelp: 'Vabakujuline identifikaator, mis kuvatakse omaduste rippmenüüs välja sidumisel. Sulle, mitte printerile.',
+    fnLabel: 'Pesa',
+    fnHelp: 'ZPL ^FN pesa number (1-99), millega printer seda muutujat adresseerib. Määratakse automaatselt; muutke ainult süsteemiga integreerimisel, mis saadab andmeid ^FV kaudu trükkimise ajal.',
+    defaultLabel: 'Vaikimisi',
+    defaultHelp: 'Lõuendil kuvatav väärtus, mis edastatakse ZPL ^FD andmena. Välised süsteemid saavad selle trükkimise ajal asendada.',
+    noBindings: 'kasutamata',
+    confirmDelete: 'Kustuta',
+    cancel: 'Tühista',
+    noSlotsLeft: 'Kõik 99 pesa on hõivatud.',
+    nameInUse: 'Nimi on juba kasutusel.',
+    slotInUse: 'Pesa on juba kasutusel.',
+    sectionTitle: 'Muutuja',
+    bindingHelp: 'Seo see väli muutujaga. Väli kuvab muutuja vaikeväärtuse ja edastab selle ZPL ^FN pesana trükkimise ajal.',
+    notBound: 'Sidumata',
+    createNew: '+ Loo uus muutuja…',
+    unbindAria: 'Eemalda muutuja side',
+    newNamePlaceholder: 'Uue muutuja nimi',
+    create: 'Loo',
+    nameRequired: 'Nimi on kohustuslik.',
+    boundHint: 'Vaikeväärtust saab muuta muutujate vahekaardil.',
+    emptyDefault: '(tühi)',
+    removeAriaFmt: 'Eemalda muutuja {name}',
+    bindingsSingular: '1 sidumine',
+    bindingsPluralFmt: '{n} sidumist',
+    deleteUnboundFmt: 'Kustutada muutuja "{name}"? See pole seotud ühegi väljaga.',
+    deleteBoundFmt: 'Kustutada muutuja "{name}"? See on seotud {n} väljaga; sidemed eemaldatakse ja väljad pöörduvad tagasi viimase otsese väärtuse juurde.',
+    badgeBoundFmt: 'Seotud {name}-iga',
+  },
   fonts: {
     heading: 'Fondid',
     noFonts: 'Fonte pole laaditud',
diff --git a/src/locales/fa.ts b/src/locales/fa.ts
index 51397d4c..e97c1ada 100644
--- a/src/locales/fa.ts
+++ b/src/locales/fa.ts
@@ -440,6 +440,7 @@ const fa = {
     propertiesTab: 'ویژگی‌ها',
     layersTab: 'لایه‌ها',
     fontsTab: 'فونت‌ها',
+    variablesTab: 'متغیرها',
     empty: 'هیچ شیئی روی برچسب نیست',
     toFront: 'آوردن به جلو',
     forward: 'حرکت به جلو',
@@ -453,6 +454,41 @@ const fa = {
     show: 'نمایش',
     hide: 'پنهان',
   },
+
+  variables: {
+    panelHint: 'مقادیر پیش‌فرض که زمان چاپ پر می‌شوند. یک فیلد را از تب ویژگی‌ها متصل کنید.',
+    add: 'افزودن متغیر',
+    empty: 'هنوز متغیری وجود ندارد.',
+    emptyExample: 'برای SKUهای ترتیبی، شماره‌های دسته یا نام مشتریان مفید است.',
+    nameLabel: 'نام',
+    nameHelp: 'شناسه آزاد که هنگام اتصال یک فیلد در منوی کشویی ویژگی‌ها نمایش داده می‌شود. برای شما، نه چاپگر.',
+    fnLabel: 'اسلات',
+    fnHelp: 'شماره اسلات ZPL ^FN (۱-۹۹) که چاپگر برای آدرس‌دهی این متغیر استفاده می‌کند. خودکار اختصاص می‌یابد؛ فقط هنگام یکپارچه‌سازی با سیستمی که داده را زمان چاپ از طریق ^FV می‌فرستد تغییر دهید.',
+    defaultLabel: 'پیش‌فرض',
+    defaultHelp: 'مقداری که روی بوم رندر می‌شود و به‌عنوان بار داده‌ای ZPL ^FD ارسال می‌گردد. سیستم‌های خارجی می‌توانند زمان چاپ آن را بازنویسی کنند.',
+    noBindings: 'بدون استفاده',
+    confirmDelete: 'حذف',
+    cancel: 'لغو',
+    noSlotsLeft: 'همه ۹۹ اسلات اشغال‌اند.',
+    nameInUse: 'نام قبلاً استفاده شده است.',
+    slotInUse: 'اسلات قبلاً استفاده شده است.',
+    sectionTitle: 'متغیر',
+    bindingHelp: 'این فیلد را به یک متغیر متصل کنید. فیلد مقدار پیش‌فرض متغیر را نمایش می‌دهد و آن را به‌عنوان اسلات ZPL ^FN زمان چاپ ارسال می‌کند.',
+    notBound: 'متصل نیست',
+    createNew: '+ ایجاد متغیر جدید…',
+    unbindAria: 'قطع اتصال متغیر',
+    newNamePlaceholder: 'نام برای متغیر جدید',
+    create: 'ایجاد',
+    nameRequired: 'نام الزامی است.',
+    boundHint: 'پیش‌فرض در تب متغیرها قابل ویرایش است.',
+    emptyDefault: '(خالی)',
+    removeAriaFmt: 'حذف متغیر {name}',
+    bindingsSingular: '۱ اتصال',
+    bindingsPluralFmt: '{n} اتصال',
+    deleteUnboundFmt: 'متغیر «{name}» حذف شود؟ به هیچ فیلدی متصل نیست.',
+    deleteBoundFmt: 'متغیر «{name}» حذف شود؟ به {n} فیلد متصل است؛ اتصال‌ها قطع شده و به آخرین مقدار صریح بازمی‌گردند.',
+    badgeBoundFmt: 'متصل به {name}',
+  },
   fonts: {
     heading: 'فونت‌ها',
     noFonts: 'هیچ فونتی بارگذاری نشده',
diff --git a/src/locales/fi.ts b/src/locales/fi.ts
index 4a6e7afb..ed5f5ca1 100644
--- a/src/locales/fi.ts
+++ b/src/locales/fi.ts
@@ -440,6 +440,7 @@ const fi = {
     propertiesTab: 'Ominaisuudet',
     layersTab: 'Tasot',
     fontsTab: 'Fontit',
+    variablesTab: 'Muuttujat',
     empty: 'Etiketillä ei ole objekteja',
     toFront: 'Tuo eteen',
     forward: 'Siirrä taso eteenpäin',
@@ -453,6 +454,41 @@ const fi = {
     show: 'Näytä',
     hide: 'Piilota',
   },
+
+  variables: {
+    panelHint: 'Oletukset, jotka täytetään tulostushetkellä. Sido kenttä Ominaisuudet-välilehdestä.',
+    add: 'Lisää muuttuja',
+    empty: 'Ei vielä muuttujia.',
+    emptyExample: 'Hyödyllinen peräkkäisille SKU-koodeille, eränumeroille tai asiakasnimille.',
+    nameLabel: 'Nimi',
+    nameHelp: 'Vapaa tunniste, joka näkyy Ominaisuudet-pudotusvalikossa kenttää sidottaessa. Sinulle, ei tulostimelle.',
+    fnLabel: 'Paikka',
+    fnHelp: 'ZPL ^FN -paikkanumero (1-99), jolla tulostin osoittaa tämän muuttujan. Annetaan automaattisesti; muuta vain integroitaessa järjestelmään, joka syöttää tiedot ^FV:n kautta tulostuksen aikana.',
+    defaultLabel: 'Oletus',
+    defaultHelp: 'Arvo, joka näkyy alustalla ja lähetetään ZPL ^FD -tietona. Ulkoiset järjestelmät voivat ohittaa sen tulostushetkellä.',
+    noBindings: 'käyttämätön',
+    confirmDelete: 'Poista',
+    cancel: 'Peruuta',
+    noSlotsLeft: 'Kaikki 99 paikkaa on käytössä.',
+    nameInUse: 'Nimi on jo käytössä.',
+    slotInUse: 'Paikka on jo käytössä.',
+    sectionTitle: 'Muuttuja',
+    bindingHelp: 'Sido tämä kenttä muuttujaan. Kenttä näyttää muuttujan oletusarvon ja lähettää sen ZPL ^FN -paikkana tulostushetkellä.',
+    notBound: 'Ei sidottu',
+    createNew: '+ Luo uusi muuttuja…',
+    unbindAria: 'Pura muuttujan sidonta',
+    newNamePlaceholder: 'Uuden muuttujan nimi',
+    create: 'Luo',
+    nameRequired: 'Nimi vaaditaan.',
+    boundHint: 'Oletusta voi muokata Muuttujat-välilehdellä.',
+    emptyDefault: '(tyhjä)',
+    removeAriaFmt: 'Poista muuttuja {name}',
+    bindingsSingular: '1 sidonta',
+    bindingsPluralFmt: '{n} sidontaa',
+    deleteUnboundFmt: 'Poistetaanko muuttuja "{name}"? Sitä ei ole sidottu mihinkään kenttään.',
+    deleteBoundFmt: 'Poistetaanko muuttuja "{name}"? Se on sidottu {n} kenttään; sidonnat puretaan ja kentät palaavat viimeiseen kirjaimelliseen arvoonsa.',
+    badgeBoundFmt: 'Sidottu kohteeseen {name}',
+  },
   fonts: {
     heading: 'Fontit',
     noFonts: 'Ei ladattuja fontteja',
diff --git a/src/locales/fr.ts b/src/locales/fr.ts
index 4d7cb0db..b0655fcd 100644
--- a/src/locales/fr.ts
+++ b/src/locales/fr.ts
@@ -440,6 +440,7 @@ const fr = {
     propertiesTab: 'Propriétés',
     layersTab: 'Calques',
     fontsTab: 'Polices',
+    variablesTab: 'Variables',
     empty: "Aucun objet sur l'étiquette",
     toFront: 'Mettre au premier plan',
     forward: "Avancer d'un calque",
@@ -453,6 +454,41 @@ const fr = {
     show: 'Afficher',
     hide: 'Masquer',
   },
+
+  variables: {
+    panelHint: 'Valeurs par défaut renseignées à l\\\'impression. Liez un champ depuis l\\\'onglet Propriétés.',
+    add: 'Ajouter une variable',
+    empty: 'Aucune variable pour l\\\'instant.',
+    emptyExample: 'Pratique pour des SKU séquentiels, numéros de lot ou noms de clients.',
+    nameLabel: 'Nom',
+    nameHelp: 'Identifiant libre affiché dans le menu déroulant Propriétés lors de la liaison d\\\'un champ. Pour vous, pas pour l\\\'imprimante.',
+    fnLabel: 'Emplacement',
+    fnHelp: 'Numéro d\\\'emplacement ZPL ^FN (1-99) que l\\\'imprimante utilise pour adresser cette variable. Attribué automatiquement ; à modifier seulement pour s\\\'intégrer à un système qui injecte des données via ^FV à l\\\'impression.',
+    defaultLabel: 'Par défaut',
+    defaultHelp: 'Valeur affichée sur le canevas et émise comme charge utile ZPL ^FD. Des systèmes externes peuvent la remplacer à l\\\'impression.',
+    noBindings: 'non utilisée',
+    confirmDelete: 'Supprimer',
+    cancel: 'Annuler',
+    noSlotsLeft: 'Les 99 emplacements sont occupés.',
+    nameInUse: 'Nom déjà utilisé.',
+    slotInUse: 'Emplacement déjà utilisé.',
+    sectionTitle: 'Variable',
+    bindingHelp: 'Liez ce champ à une variable. Le champ affichera la valeur par défaut de la variable et l\\\'émettra comme un emplacement ZPL ^FN à l\\\'impression.',
+    notBound: 'Non lié',
+    createNew: '+ Créer une nouvelle variable…',
+    unbindAria: 'Délier la variable',
+    newNamePlaceholder: 'Nom de la nouvelle variable',
+    create: 'Créer',
+    nameRequired: 'Nom requis.',
+    boundHint: 'Valeur par défaut modifiable dans l\\\'onglet Variables.',
+    emptyDefault: '(vide)',
+    removeAriaFmt: 'Supprimer la variable {name}',
+    bindingsSingular: '1 liaison',
+    bindingsPluralFmt: '{n} liaisons',
+    deleteUnboundFmt: 'Supprimer la variable « {name} » ? Elle n\\\'est liée à aucun champ.',
+    deleteBoundFmt: 'Supprimer la variable « {name} » ? Elle est liée à {n} champs ; ils seront déliés et reviendront à leur dernière valeur littérale.',
+    badgeBoundFmt: 'Lié à {name}',
+  },
   fonts: {
     heading: 'Polices',
     noFonts: 'Aucune police chargée',
diff --git a/src/locales/he.ts b/src/locales/he.ts
index 01852054..6717e26e 100644
--- a/src/locales/he.ts
+++ b/src/locales/he.ts
@@ -440,6 +440,7 @@ const he = {
     propertiesTab: 'מאפיינים',
     layersTab: 'שכבות',
     fontsTab: 'גופנים',
+    variablesTab: 'משתנים',
     empty: 'אין אובייקטים על התווית',
     toFront: 'הבא לקדמה',
     forward: 'הבא קדימה',
@@ -453,6 +454,41 @@ const he = {
     show: 'הצג',
     hide: 'הסתר',
   },
+
+  variables: {
+    panelHint: 'ערכי ברירת מחדל שמתמלאים בעת ההדפסה. קשור שדה מלשונית המאפיינים.',
+    add: 'הוסף משתנה',
+    empty: 'אין משתנים עדיין.',
+    emptyExample: 'שימושי ל-SKU עוקבים, מספרי אצווה או שמות לקוחות.',
+    nameLabel: 'שם',
+    nameHelp: 'מזהה חופשי המוצג בתפריט הנפתח של המאפיינים בעת קישור שדה. בשבילך, לא למדפסת.',
+    fnLabel: 'חריץ',
+    fnHelp: 'מספר חריץ ZPL ^FN (1-99) שהמדפסת משתמשת בו לפנייה למשתנה זה. מוקצה אוטומטית; שנה רק כששילוב עם מערכת ששולחת נתונים דרך ^FV בזמן ההדפסה.',
+    defaultLabel: 'ברירת מחדל',
+    defaultHelp: 'ערך המוצג על הקנבס ונשלח כתוכן ZPL ^FD. מערכות חיצוניות יכולות לדרוס אותו בעת ההדפסה.',
+    noBindings: 'לא בשימוש',
+    confirmDelete: 'מחק',
+    cancel: 'ביטול',
+    noSlotsLeft: 'כל 99 החריצים תפוסים.',
+    nameInUse: 'השם כבר בשימוש.',
+    slotInUse: 'החריץ כבר בשימוש.',
+    sectionTitle: 'משתנה',
+    bindingHelp: 'קשר שדה זה למשתנה. השדה יציג את ערך ברירת המחדל של המשתנה וישלח אותו כחריץ ZPL ^FN בעת ההדפסה.',
+    notBound: 'לא קשור',
+    createNew: '+ צור משתנה חדש…',
+    unbindAria: 'בטל קישור משתנה',
+    newNamePlaceholder: 'שם למשתנה חדש',
+    create: 'צור',
+    nameRequired: 'נדרש שם.',
+    boundHint: 'ניתן לערוך את ברירת המחדל בלשונית המשתנים.',
+    emptyDefault: '(ריק)',
+    removeAriaFmt: 'הסר משתנה {name}',
+    bindingsSingular: 'קישור 1',
+    bindingsPluralFmt: '{n} קישורים',
+    deleteUnboundFmt: 'למחוק את המשתנה "{name}"? הוא אינו קשור לאף שדה.',
+    deleteBoundFmt: 'למחוק את המשתנה "{name}"? הוא קשור ל-{n} שדות; הקשרים יבוטלו והם יחזרו לערך המילולי האחרון שלהם.',
+    badgeBoundFmt: 'קשור ל-{name}',
+  },
   fonts: {
     heading: 'גופנים',
     noFonts: 'לא נטענו גופנים',
diff --git a/src/locales/hr.ts b/src/locales/hr.ts
index 49a39546..6f51f4e5 100644
--- a/src/locales/hr.ts
+++ b/src/locales/hr.ts
@@ -440,6 +440,7 @@ const hr = {
     propertiesTab: 'Svojstva',
     layersTab: 'Slojevi',
     fontsTab: 'Fontovi',
+    variablesTab: 'Varijable',
     empty: 'Nema objekata na naljepnici',
     toFront: 'Pomakni naprijed',
     forward: 'Jedan sloj naprijed',
@@ -453,6 +454,41 @@ const hr = {
     show: 'Prikaži',
     hide: 'Sakrij',
   },
+
+  variables: {
+    panelHint: 'Zadane vrijednosti koje se popunjavaju pri ispisu. Poveži polje s kartice Svojstva.',
+    add: 'Dodaj varijablu',
+    empty: 'Još nema varijabli.',
+    emptyExample: 'Korisno za sekvencijalne SKU, brojeve serija ili imena kupaca.',
+    nameLabel: 'Naziv',
+    nameHelp: 'Slobodni identifikator prikazan u padajućem izborniku Svojstva pri povezivanju polja. Za vas, ne za pisač.',
+    fnLabel: 'Utor',
+    fnHelp: 'Broj utora ZPL ^FN (1-99) koji pisač koristi za adresiranje ove varijable. Automatski dodijeljen; mijenjajte samo kod integracije sa sustavom koji šalje podatke putem ^FV pri ispisu.',
+    defaultLabel: 'Zadano',
+    defaultHelp: 'Vrijednost prikazana na platnu i poslana kao ZPL ^FD podatak. Vanjski sustavi je mogu prepisati pri ispisu.',
+    noBindings: 'neiskorišteno',
+    confirmDelete: 'Izbriši',
+    cancel: 'Odustani',
+    noSlotsLeft: 'Svih 99 utora je zauzeto.',
+    nameInUse: 'Naziv je već u upotrebi.',
+    slotInUse: 'Utor je već u upotrebi.',
+    sectionTitle: 'Varijabla',
+    bindingHelp: 'Poveži ovo polje s varijablom. Polje će prikazati zadanu vrijednost varijable i poslati je kao ZPL ^FN utor pri ispisu.',
+    notBound: 'Nije povezano',
+    createNew: '+ Stvori novu varijablu…',
+    unbindAria: 'Prekini vezu varijable',
+    newNamePlaceholder: 'Naziv nove varijable',
+    create: 'Stvori',
+    nameRequired: 'Naziv je obavezan.',
+    boundHint: 'Zadanu vrijednost možete urediti na kartici Varijable.',
+    emptyDefault: '(prazno)',
+    removeAriaFmt: 'Ukloni varijablu {name}',
+    bindingsSingular: '1 veza',
+    bindingsPluralFmt: '{n} veza',
+    deleteUnboundFmt: 'Izbrisati varijablu "{name}"? Nije povezana ni s jednim poljem.',
+    deleteBoundFmt: 'Izbrisati varijablu "{name}"? Povezana je s {n} polja; veze će biti prekinute, a polja će se vratiti na zadnju doslovnu vrijednost.',
+    badgeBoundFmt: 'Povezano s {name}',
+  },
   fonts: {
     heading: 'Fontovi',
     noFonts: 'Nema učitanih fontova',
diff --git a/src/locales/hu.ts b/src/locales/hu.ts
index 7f3f9800..b6eb6c5c 100644
--- a/src/locales/hu.ts
+++ b/src/locales/hu.ts
@@ -440,6 +440,7 @@ const hu = {
     propertiesTab: 'Tulajdonságok',
     layersTab: 'Rétegek',
     fontsTab: 'Betűtípusok',
+    variablesTab: 'Változók',
     empty: 'Nincsenek objektumok a címkén',
     toFront: 'Előre hozás',
     forward: 'Egy réteggel előre',
@@ -453,6 +454,41 @@ const hu = {
     show: 'Megjelenítés',
     hide: 'Elrejtés',
   },
+
+  variables: {
+    panelHint: 'Alapértelmezett értékek, amelyek nyomtatáskor töltődnek ki. Mezőt a Tulajdonságok lapon köthet hozzá.',
+    add: 'Változó hozzáadása',
+    empty: 'Még nincsenek változók.',
+    emptyExample: 'Sorszámozott SKU-khoz, gyártási tételszámokhoz vagy ügyfélnevekhez hasznos.',
+    nameLabel: 'Név',
+    nameHelp: 'Szabad szöveges azonosító, amely a Tulajdonságok legördülő menüben jelenik meg mező hozzákötésekor. Az ön számára, nem a nyomtatónak.',
+    fnLabel: 'Hely',
+    fnHelp: 'ZPL ^FN helyazonosító (1-99), amelyet a nyomtató ezen változó címzéséhez használ. Automatikusan kiosztva; csak akkor változtassa, ha olyan rendszerrel integrál, amely nyomtatáskor ^FV-vel küld adatokat.',
+    defaultLabel: 'Alapérték',
+    defaultHelp: 'A vászon megjelenített értéke, amely ZPL ^FD adatként kerül kibocsátásra. Külső rendszerek nyomtatáskor felülírhatják.',
+    noBindings: 'nincs használva',
+    confirmDelete: 'Törlés',
+    cancel: 'Mégse',
+    noSlotsLeft: 'Mind a 99 hely foglalt.',
+    nameInUse: 'A név már foglalt.',
+    slotInUse: 'A hely már foglalt.',
+    sectionTitle: 'Változó',
+    bindingHelp: 'Kösse ezt a mezőt egy változóhoz. A mező a változó alapértelmezett értékét jeleníti meg, és nyomtatáskor ZPL ^FN helyként küldi.',
+    notBound: 'Nincs összekötve',
+    createNew: '+ Új változó létrehozása…',
+    unbindAria: 'Változó kibontása',
+    newNamePlaceholder: 'Új változó neve',
+    create: 'Létrehozás',
+    nameRequired: 'Név megadása kötelező.',
+    boundHint: 'Az alapérték a Változók lapon szerkeszthető.',
+    emptyDefault: '(üres)',
+    removeAriaFmt: '{name} változó eltávolítása',
+    bindingsSingular: '1 kötés',
+    bindingsPluralFmt: '{n} kötés',
+    deleteUnboundFmt: 'Törölje a(z) „{name}" változót? Egyetlen mezőhöz sincs kötve.',
+    deleteBoundFmt: 'Törölje a(z) „{name}" változót? {n} mezőhöz van kötve; a kötések megszűnnek, és a mezők visszatérnek az utolsó konkrét értékükhöz.',
+    badgeBoundFmt: '{name} változóhoz kötve',
+  },
   fonts: {
     heading: 'Betűtípusok',
     noFonts: 'Nincs betöltött betűtípus',
diff --git a/src/locales/it.ts b/src/locales/it.ts
index 5ed5a71b..b8d82ade 100644
--- a/src/locales/it.ts
+++ b/src/locales/it.ts
@@ -440,6 +440,7 @@ const it = {
     propertiesTab: 'Proprietà',
     layersTab: 'Livelli',
     fontsTab: 'Caratteri',
+    variablesTab: 'Variabili',
     empty: "Nessun oggetto sull'etichetta",
     toFront: 'Porta in primo piano',
     forward: 'Sposta avanti',
@@ -453,6 +454,41 @@ const it = {
     show: 'Mostra',
     hide: 'Nascondi',
   },
+
+  variables: {
+    panelHint: 'Valori predefiniti compilati al momento della stampa. Collega un campo dalla scheda Proprietà.',
+    add: 'Aggiungi variabile',
+    empty: 'Nessuna variabile ancora.',
+    emptyExample: 'Utile per SKU sequenziali, numeri di lotto o nomi cliente.',
+    nameLabel: 'Nome',
+    nameHelp: 'Identificatore libero mostrato nel menu a tendina Proprietà quando colleghi un campo. Per te, non per la stampante.',
+    fnLabel: 'Slot',
+    fnHelp: 'Numero di slot ZPL ^FN (1-99) usato dalla stampante per indirizzare questa variabile. Assegnato automaticamente; modificalo solo per integrarti con un sistema che invia dati via ^FV in stampa.',
+    defaultLabel: 'Predefinito',
+    defaultHelp: 'Valore visualizzato sulla tela ed emesso come payload ZPL ^FD. Sistemi esterni possono sovrascriverlo in stampa.',
+    noBindings: 'non usata',
+    confirmDelete: 'Elimina',
+    cancel: 'Annulla',
+    noSlotsLeft: 'Tutti i 99 slot sono occupati.',
+    nameInUse: 'Nome già in uso.',
+    slotInUse: 'Slot già in uso.',
+    sectionTitle: 'Variabile',
+    bindingHelp: 'Collega questo campo a una variabile. Il campo mostrerà il valore predefinito della variabile e lo emetterà come slot ZPL ^FN in stampa.',
+    notBound: 'Non collegato',
+    createNew: '+ Crea nuova variabile…',
+    unbindAria: 'Scollega variabile',
+    newNamePlaceholder: 'Nome per la nuova variabile',
+    create: 'Crea',
+    nameRequired: 'Nome richiesto.',
+    boundHint: 'Il valore predefinito è modificabile nella scheda Variabili.',
+    emptyDefault: '(vuoto)',
+    removeAriaFmt: 'Rimuovi variabile {name}',
+    bindingsSingular: '1 collegamento',
+    bindingsPluralFmt: '{n} collegamenti',
+    deleteUnboundFmt: 'Eliminare la variabile "{name}"? Non è collegata a nessun campo.',
+    deleteBoundFmt: 'Eliminare la variabile "{name}"? È collegata a {n} campi; verranno scollegati e torneranno al loro ultimo valore letterale.',
+    badgeBoundFmt: 'Collegato a {name}',
+  },
   fonts: {
     heading: 'Caratteri',
     noFonts: 'Nessun carattere caricato',
diff --git a/src/locales/ja.ts b/src/locales/ja.ts
index 60654285..aa966324 100644
--- a/src/locales/ja.ts
+++ b/src/locales/ja.ts
@@ -440,6 +440,7 @@ const ja = {
     propertiesTab: 'プロパティ',
     layersTab: 'レイヤー',
     fontsTab: 'フォント',
+    variablesTab: '変数',
     empty: 'ラベルにオブジェクトがありません',
     toFront: '最前面へ',
     forward: '前面へ',
@@ -453,6 +454,41 @@ const ja = {
     show: '表示',
     hide: '非表示',
   },
+
+  variables: {
+    panelHint: '印刷時に挿入されるデフォルト値。プロパティタブからフィールドにバインドします。',
+    add: '変数を追加',
+    empty: '変数はまだありません。',
+    emptyExample: '連番のSKU、バッチ番号、顧客名などに便利です。',
+    nameLabel: '名前',
+    nameHelp: 'フィールドをバインドするときにプロパティのドロップダウンに表示される自由形式の識別子。プリンターではなくあなた向けです。',
+    fnLabel: 'スロット',
+    fnHelp: 'プリンタがこの変数をアドレス指定するために使うZPL ^FNスロット番号(1-99)。自動割り当てされます。印刷時に^FVでデータを注入するシステムと統合する場合のみ変更してください。',
+    defaultLabel: 'デフォルト',
+    defaultHelp: 'キャンバスに描画され、ZPL ^FDペイロードとして出力される値。外部システムは印刷時に上書きできます。',
+    noBindings: '未使用',
+    confirmDelete: '削除',
+    cancel: 'キャンセル',
+    noSlotsLeft: '99スロットすべて使用中です。',
+    nameInUse: '名前は既に使用されています。',
+    slotInUse: 'スロットは既に使用されています。',
+    sectionTitle: '変数',
+    bindingHelp: 'このフィールドを変数にバインドします。フィールドは変数のデフォルト値を表示し、印刷時にZPL ^FNスロットとして出力します。',
+    notBound: '未バインド',
+    createNew: '+ 新しい変数を作成…',
+    unbindAria: '変数のバインド解除',
+    newNamePlaceholder: '新しい変数の名前',
+    create: '作成',
+    nameRequired: '名前が必要です。',
+    boundHint: 'デフォルト値は変数タブで編集できます。',
+    emptyDefault: '(空)',
+    removeAriaFmt: '変数 {name} を削除',
+    bindingsSingular: 'バインド1件',
+    bindingsPluralFmt: 'バインド{n}件',
+    deleteUnboundFmt: '変数「{name}」を削除しますか?どのフィールドにもバインドされていません。',
+    deleteBoundFmt: '変数「{name}」を削除しますか?{n}個のフィールドにバインドされています。バインドが解除され、最後のリテラル値に戻ります。',
+    badgeBoundFmt: '{name} にバインド',
+  },
   fonts: {
     heading: 'フォント',
     noFonts: 'フォントが読み込まれていません',
diff --git a/src/locales/ko.ts b/src/locales/ko.ts
index 441fe93f..e25c990e 100644
--- a/src/locales/ko.ts
+++ b/src/locales/ko.ts
@@ -440,6 +440,7 @@ const ko = {
     propertiesTab: '속성',
     layersTab: '레이어',
     fontsTab: '글꼴',
+    variablesTab: '변수',
     empty: '레이블에 개체가 없습니다',
     toFront: '맨 앞으로',
     forward: '앞으로',
@@ -453,6 +454,41 @@ const ko = {
     show: '표시',
     hide: '숨기기',
   },
+
+  variables: {
+    panelHint: '인쇄 시 채워지는 기본값입니다. 속성 탭에서 필드를 바인딩하세요.',
+    add: '변수 추가',
+    empty: '아직 변수가 없습니다.',
+    emptyExample: '순차 SKU, 배치 번호 또는 고객 이름에 유용합니다.',
+    nameLabel: '이름',
+    nameHelp: '필드를 바인딩할 때 속성 드롭다운에 표시되는 자유 텍스트 식별자입니다. 프린터가 아닌 사용자용입니다.',
+    fnLabel: '슬롯',
+    fnHelp: '프린터가 이 변수를 지정할 때 사용하는 ZPL ^FN 슬롯 번호(1-99)입니다. 자동 할당됩니다. 인쇄 시 ^FV로 데이터를 전달하는 시스템과 통합할 때만 변경하세요.',
+    defaultLabel: '기본값',
+    defaultHelp: '캔버스에 표시되고 ZPL ^FD 페이로드로 출력되는 값입니다. 외부 시스템이 인쇄 시 재정의할 수 있습니다.',
+    noBindings: '사용 안 함',
+    confirmDelete: '삭제',
+    cancel: '취소',
+    noSlotsLeft: '99개 슬롯이 모두 사용 중입니다.',
+    nameInUse: '이미 사용 중인 이름입니다.',
+    slotInUse: '이미 사용 중인 슬롯입니다.',
+    sectionTitle: '변수',
+    bindingHelp: '이 필드를 변수에 바인딩합니다. 필드는 변수의 기본값을 표시하고 인쇄 시 ZPL ^FN 슬롯으로 출력합니다.',
+    notBound: '바인딩 안 됨',
+    createNew: '+ 새 변수 만들기…',
+    unbindAria: '변수 바인딩 해제',
+    newNamePlaceholder: '새 변수의 이름',
+    create: '만들기',
+    nameRequired: '이름이 필요합니다.',
+    boundHint: '기본값은 변수 탭에서 편집할 수 있습니다.',
+    emptyDefault: '(비어 있음)',
+    removeAriaFmt: '변수 {name} 제거',
+    bindingsSingular: '바인딩 1개',
+    bindingsPluralFmt: '바인딩 {n}개',
+    deleteUnboundFmt: '변수 "{name}"을(를) 삭제하시겠습니까? 어떤 필드에도 바인딩되어 있지 않습니다.',
+    deleteBoundFmt: '변수 "{name}"을(를) 삭제하시겠습니까? {n}개 필드에 바인딩되어 있습니다. 바인딩이 해제되며 마지막 리터럴 값으로 되돌아갑니다.',
+    badgeBoundFmt: '{name}에 바인딩됨',
+  },
   fonts: {
     heading: '글꼴',
     noFonts: '로드된 글꼴 없음',
diff --git a/src/locales/lt.ts b/src/locales/lt.ts
index 768e8d0e..cb1d01fb 100644
--- a/src/locales/lt.ts
+++ b/src/locales/lt.ts
@@ -440,6 +440,7 @@ const lt = {
     propertiesTab: 'Savybės',
     layersTab: 'Sluoksniai',
     fontsTab: 'Šriftai',
+    variablesTab: 'Kintamieji',
     empty: 'Etiketėje nėra objektų',
     toFront: 'Perkelti į priekį',
     forward: 'Vienas sluoksnis į priekį',
@@ -453,6 +454,41 @@ const lt = {
     show: 'Rodyti',
     hide: 'Slėpti',
   },
+
+  variables: {
+    panelHint: 'Numatytosios reikšmės, įrašomos spausdinant. Susiekite lauką iš Savybių kortelės.',
+    add: 'Pridėti kintamąjį',
+    empty: 'Kintamųjų dar nėra.',
+    emptyExample: 'Naudinga nuosekliems SKU, partijų numeriams arba klientų vardams.',
+    nameLabel: 'Pavadinimas',
+    nameHelp: 'Laisvas identifikatorius, rodomas Savybių išskleidžiamame meniu siejant lauką. Skirtas jums, ne spausdintuvui.',
+    fnLabel: 'Lizdas',
+    fnHelp: 'ZPL ^FN lizdo numeris (1-99), kuriuo spausdintuvas adresuoja šį kintamąjį. Priskiriamas automatiškai; keiskite tik integruojantis su sistema, kuri spausdinant siunčia duomenis per ^FV.',
+    defaultLabel: 'Numatytasis',
+    defaultHelp: 'Reikšmė, atvaizduojama drobėje ir siunčiama kaip ZPL ^FD turinys. Išorinės sistemos gali ją perrašyti spausdinant.',
+    noBindings: 'nenaudojama',
+    confirmDelete: 'Pašalinti',
+    cancel: 'Atšaukti',
+    noSlotsLeft: 'Visi 99 lizdai užimti.',
+    nameInUse: 'Pavadinimas jau naudojamas.',
+    slotInUse: 'Lizdas jau naudojamas.',
+    sectionTitle: 'Kintamasis',
+    bindingHelp: 'Susiekite šį lauką su kintamuoju. Laukas rodys numatytąją kintamojo reikšmę ir siųs ją kaip ZPL ^FN lizdą spausdinant.',
+    notBound: 'Nesusieta',
+    createNew: '+ Sukurti naują kintamąjį…',
+    unbindAria: 'Atsieti kintamąjį',
+    newNamePlaceholder: 'Naujo kintamojo pavadinimas',
+    create: 'Sukurti',
+    nameRequired: 'Pavadinimas privalomas.',
+    boundHint: 'Numatytąją reikšmę keiskite kintamųjų kortelėje.',
+    emptyDefault: '(tuščia)',
+    removeAriaFmt: 'Pašalinti kintamąjį {name}',
+    bindingsSingular: '1 susiejimas',
+    bindingsPluralFmt: '{n} susiejimų',
+    deleteUnboundFmt: 'Pašalinti kintamąjį „{name}"? Jis nesusietas su jokiu lauku.',
+    deleteBoundFmt: 'Pašalinti kintamąjį „{name}"? Susietas su {n} laukais; ryšiai bus nutraukti, o laukai grįš prie paskutinės pažodinės reikšmės.',
+    badgeBoundFmt: 'Susieta su {name}',
+  },
   fonts: {
     heading: 'Šriftai',
     noFonts: 'Nėra įkeltų šriftų',
diff --git a/src/locales/lv.ts b/src/locales/lv.ts
index 3dccb284..ae12e10f 100644
--- a/src/locales/lv.ts
+++ b/src/locales/lv.ts
@@ -440,6 +440,7 @@ const lv = {
     propertiesTab: 'Rekvizīti',
     layersTab: 'Slāņi',
     fontsTab: 'Fonti',
+    variablesTab: 'Mainīgie',
     empty: 'Etiķetē nav objektu',
     toFront: 'Pārvietot uz priekšu',
     forward: 'Pārvietot vienu slāni uz priekšu',
@@ -453,6 +454,41 @@ const lv = {
     show: 'Rādīt',
     hide: 'Slēpt',
   },
+
+  variables: {
+    panelHint: 'Noklusējuma vērtības, kas tiek aizpildītas drukāšanas laikā. Sasaistiet lauku no cilnes Rekvizīti.',
+    add: 'Pievienot mainīgo',
+    empty: 'Vēl nav mainīgo.',
+    emptyExample: 'Noderīgi secīgiem SKU, partijas numuriem vai klientu vārdiem.',
+    nameLabel: 'Nosaukums',
+    nameHelp: 'Brīvi izvēlēts identifikators, ko rāda Rekvizītu nolaižamajā sarakstā, sasaistot lauku. Jums, nevis printerim.',
+    fnLabel: 'Slots',
+    fnHelp: 'ZPL ^FN slota numurs (1-99), ko printeris izmanto šī mainīgā adresēšanai. Piešķirts automātiski; mainiet tikai, integrējoties ar sistēmu, kas drukāšanas laikā pārsūta datus, izmantojot ^FV.',
+    defaultLabel: 'Noklusējums',
+    defaultHelp: 'Vērtība, ko attēlo audeklā un nosūta kā ZPL ^FD datus. Ārējās sistēmas to var pārrakstīt drukāšanas laikā.',
+    noBindings: 'neizmantots',
+    confirmDelete: 'Dzēst',
+    cancel: 'Atcelt',
+    noSlotsLeft: 'Visi 99 sloti ir aizņemti.',
+    nameInUse: 'Nosaukums jau tiek izmantots.',
+    slotInUse: 'Slots jau tiek izmantots.',
+    sectionTitle: 'Mainīgais',
+    bindingHelp: 'Sasaistiet šo lauku ar mainīgo. Lauks rādīs mainīgā noklusējuma vērtību un nosūtīs to kā ZPL ^FN slotu drukāšanas laikā.',
+    notBound: 'Nav saistīts',
+    createNew: '+ Izveidot jaunu mainīgo…',
+    unbindAria: 'Atsaistīt mainīgo',
+    newNamePlaceholder: 'Jaunā mainīgā nosaukums',
+    create: 'Izveidot',
+    nameRequired: 'Nepieciešams nosaukums.',
+    boundHint: 'Noklusējumu var rediģēt mainīgo cilnē.',
+    emptyDefault: '(tukšs)',
+    removeAriaFmt: 'Noņemt mainīgo {name}',
+    bindingsSingular: '1 saite',
+    bindingsPluralFmt: '{n} saites',
+    deleteUnboundFmt: 'Dzēst mainīgo "{name}"? Tas nav saistīts ne ar vienu lauku.',
+    deleteBoundFmt: 'Dzēst mainīgo "{name}"? Tas ir saistīts ar {n} laukiem; saites tiks pārtrauktas, un lauki atgriezīsies pie pēdējās burtiskās vērtības.',
+    badgeBoundFmt: 'Saistīts ar {name}',
+  },
   fonts: {
     heading: 'Fonti',
     noFonts: 'Nav ielādētu fontu',
diff --git a/src/locales/nl.ts b/src/locales/nl.ts
index 5cdbcf2a..50bb7110 100644
--- a/src/locales/nl.ts
+++ b/src/locales/nl.ts
@@ -440,6 +440,7 @@ const nl = {
     propertiesTab: 'Eigenschappen',
     layersTab: 'Lagen',
     fontsTab: 'Lettertypen',
+    variablesTab: 'Variabelen',
     empty: 'Geen objecten op het etiket',
     toFront: 'Naar de voorgrond',
     forward: 'Één laag naar voren',
@@ -453,6 +454,41 @@ const nl = {
     show: 'Tonen',
     hide: 'Verbergen',
   },
+
+  variables: {
+    panelHint: 'Standaardwaarden die bij het printen worden ingevuld. Bind een veld via het tabblad Eigenschappen.',
+    add: 'Variabele toevoegen',
+    empty: 'Nog geen variabelen.',
+    emptyExample: 'Handig voor opvolgende SKU\\\'s, batchnummers of klantnamen.',
+    nameLabel: 'Naam',
+    nameHelp: 'Vrij identificeerteken dat in de vervolgkeuzelijst Eigenschappen verschijnt bij het binden van een veld. Voor jou, niet voor de printer.',
+    fnLabel: 'Slot',
+    fnHelp: 'ZPL ^FN-slotnummer (1-99) waarmee de printer deze variabele adresseert. Automatisch toegekend; alleen wijzigen bij integratie met een systeem dat gegevens via ^FV bij het printen aanlevert.',
+    defaultLabel: 'Standaard',
+    defaultHelp: 'Waarde die op het canvas wordt weergegeven en als ZPL ^FD-payload wordt uitgestuurd. Externe systemen kunnen deze bij het printen overschrijven.',
+    noBindings: 'ongebruikt',
+    confirmDelete: 'Verwijderen',
+    cancel: 'Annuleren',
+    noSlotsLeft: 'Alle 99 slots zijn bezet.',
+    nameInUse: 'Naam al in gebruik.',
+    slotInUse: 'Slot al in gebruik.',
+    sectionTitle: 'Variabele',
+    bindingHelp: 'Bind dit veld aan een variabele. Het veld toont de standaardwaarde van de variabele en stuurt deze als ZPL ^FN-slot bij het printen uit.',
+    notBound: 'Niet gebonden',
+    createNew: '+ Nieuwe variabele aanmaken…',
+    unbindAria: 'Variabele ontkoppelen',
+    newNamePlaceholder: 'Naam voor nieuwe variabele',
+    create: 'Aanmaken',
+    nameRequired: 'Naam vereist.',
+    boundHint: 'Standaardwaarde te bewerken op het tabblad Variabelen.',
+    emptyDefault: '(leeg)',
+    removeAriaFmt: 'Variabele {name} verwijderen',
+    bindingsSingular: '1 binding',
+    bindingsPluralFmt: '{n} bindings',
+    deleteUnboundFmt: 'Variabele "{name}" verwijderen? Niet aan een veld gebonden.',
+    deleteBoundFmt: 'Variabele "{name}" verwijderen? Gebonden aan {n} velden; ze worden ontkoppeld en vallen terug op hun laatste letterlijke waarde.',
+    badgeBoundFmt: 'Gebonden aan {name}',
+  },
   fonts: {
     heading: 'Lettertypen',
     noFonts: 'Geen lettertypen geladen',
diff --git a/src/locales/no.ts b/src/locales/no.ts
index 66184120..6e54acd7 100644
--- a/src/locales/no.ts
+++ b/src/locales/no.ts
@@ -440,6 +440,7 @@ const no = {
     propertiesTab: 'Egenskaper',
     layersTab: 'Lag',
     fontsTab: 'Skrifter',
+    variablesTab: 'Variabler',
     empty: 'Ingen objekter på etiketten',
     toFront: 'Flytt fremst',
     forward: 'Flytt ett lag fremover',
@@ -453,6 +454,41 @@ const no = {
     show: 'Vis',
     hide: 'Skjul',
   },
+
+  variables: {
+    panelHint: 'Standardverdier som fylles inn ved utskrift. Bind et felt fra Egenskaper-fanen.',
+    add: 'Legg til variabel',
+    empty: 'Ingen variabler ennå.',
+    emptyExample: 'Nyttig for sekvensielle SKU-er, batchnummer eller kundenavn.',
+    nameLabel: 'Navn',
+    nameHelp: 'Fri-tekst identifikator som vises i Egenskaper-rullegardinen når du binder et felt. For deg, ikke skriveren.',
+    fnLabel: 'Plass',
+    fnHelp: 'ZPL ^FN-plassnummer (1-99) som skriveren bruker for å adressere denne variabelen. Tildeles automatisk; endre kun ved integrasjon med et system som sender data via ^FV ved utskrift.',
+    defaultLabel: 'Standard',
+    defaultHelp: 'Verdien som vises på lerretet og sendes som ZPL ^FD-data. Eksterne systemer kan overstyre den ved utskrift.',
+    noBindings: 'ubrukt',
+    confirmDelete: 'Slett',
+    cancel: 'Avbryt',
+    noSlotsLeft: 'Alle 99 plassene er opptatt.',
+    nameInUse: 'Navnet er allerede i bruk.',
+    slotInUse: 'Plassen er allerede i bruk.',
+    sectionTitle: 'Variabel',
+    bindingHelp: 'Bind dette feltet til en variabel. Feltet viser variabelens standardverdi og sender den som en ZPL ^FN-plass ved utskrift.',
+    notBound: 'Ikke bundet',
+    createNew: '+ Opprett ny variabel…',
+    unbindAria: 'Frikoble variabel',
+    newNamePlaceholder: 'Navn på ny variabel',
+    create: 'Opprett',
+    nameRequired: 'Navn kreves.',
+    boundHint: 'Standardverdien kan redigeres i Variabler-fanen.',
+    emptyDefault: '(tom)',
+    removeAriaFmt: 'Fjern variabel {name}',
+    bindingsSingular: '1 binding',
+    bindingsPluralFmt: '{n} bindinger',
+    deleteUnboundFmt: 'Slett variabelen "{name}"? Den er ikke bundet til noe felt.',
+    deleteBoundFmt: 'Slett variabelen "{name}"? Den er bundet til {n} felter; bindingene fjernes og feltene faller tilbake til sin siste bokstavelige verdi.',
+    badgeBoundFmt: 'Bundet til {name}',
+  },
   fonts: {
     heading: 'Skrifter',
     noFonts: 'Ingen skrifter lastet',
diff --git a/src/locales/pl.ts b/src/locales/pl.ts
index e388e272..3a762964 100644
--- a/src/locales/pl.ts
+++ b/src/locales/pl.ts
@@ -440,6 +440,7 @@ const pl = {
     propertiesTab: 'Właściwości',
     layersTab: 'Warstwy',
     fontsTab: 'Czcionki',
+    variablesTab: 'Zmienne',
     empty: 'Brak obiektów na etykiecie',
     toFront: 'Przesuń na wierzch',
     forward: 'Przesuń do przodu',
@@ -453,6 +454,41 @@ const pl = {
     show: 'Pokaż',
     hide: 'Ukryj',
   },
+
+  variables: {
+    panelHint: 'Wartości domyślne wypełniane podczas druku. Powiąż pole z karty Właściwości.',
+    add: 'Dodaj zmienną',
+    empty: 'Brak zmiennych.',
+    emptyExample: 'Przydatne dla kolejnych SKU, numerów partii lub nazw klientów.',
+    nameLabel: 'Nazwa',
+    nameHelp: 'Dowolny identyfikator pokazywany na liście rozwijanej Właściwości przy wiązaniu pola. Dla ciebie, nie dla drukarki.',
+    fnLabel: 'Slot',
+    fnHelp: 'Numer slotu ZPL ^FN (1-99), którego drukarka używa do adresowania tej zmiennej. Przypisywany automatycznie; zmieniaj tylko przy integracji z systemem przesyłającym dane przez ^FV w trakcie druku.',
+    defaultLabel: 'Domyślny',
+    defaultHelp: 'Wartość renderowana na kanwie i emitowana jako ładunek ZPL ^FD. Systemy zewnętrzne mogą ją nadpisać podczas druku.',
+    noBindings: 'nieużywana',
+    confirmDelete: 'Usuń',
+    cancel: 'Anuluj',
+    noSlotsLeft: 'Wszystkie 99 slotów jest zajętych.',
+    nameInUse: 'Nazwa już używana.',
+    slotInUse: 'Slot już używany.',
+    sectionTitle: 'Zmienna',
+    bindingHelp: 'Powiąż to pole ze zmienną. Pole wyświetli wartość domyślną zmiennej i wyemituje ją jako slot ZPL ^FN podczas druku.',
+    notBound: 'Nie powiązano',
+    createNew: '+ Utwórz nową zmienną…',
+    unbindAria: 'Odepnij zmienną',
+    newNamePlaceholder: 'Nazwa nowej zmiennej',
+    create: 'Utwórz',
+    nameRequired: 'Nazwa wymagana.',
+    boundHint: 'Wartość domyślną można edytować w karcie Zmienne.',
+    emptyDefault: '(puste)',
+    removeAriaFmt: 'Usuń zmienną {name}',
+    bindingsSingular: '1 powiązanie',
+    bindingsPluralFmt: '{n} powiązań',
+    deleteUnboundFmt: 'Usunąć zmienną „{name}"? Nie jest powiązana z żadnym polem.',
+    deleteBoundFmt: 'Usunąć zmienną „{name}"? Powiązana z {n} polami; powiązania zostaną zerwane, a pola wrócą do ostatniej dosłownej wartości.',
+    badgeBoundFmt: 'Powiązano z {name}',
+  },
   fonts: {
     heading: 'Czcionki',
     noFonts: 'Brak załadowanych czcionek',
diff --git a/src/locales/pt.ts b/src/locales/pt.ts
index 2aec97eb..55c5b918 100644
--- a/src/locales/pt.ts
+++ b/src/locales/pt.ts
@@ -440,6 +440,7 @@ const pt = {
     propertiesTab: 'Propriedades',
     layersTab: 'Camadas',
     fontsTab: 'Fontes',
+    variablesTab: 'Variáveis',
     empty: 'Não há objetos na etiqueta',
     toFront: 'Trazer para a frente',
     forward: 'Avançar uma camada',
@@ -453,6 +454,41 @@ const pt = {
     show: 'Mostrar',
     hide: 'Ocultar',
   },
+
+  variables: {
+    panelHint: 'Valores padrão preenchidos no momento da impressão. Vincule um campo na aba Propriedades.',
+    add: 'Adicionar variável',
+    empty: 'Ainda não há variáveis.',
+    emptyExample: 'Útil para SKUs sequenciais, números de lote ou nomes de clientes.',
+    nameLabel: 'Nome',
+    nameHelp: 'Identificador livre exibido no menu suspenso de Propriedades ao vincular um campo. Para você, não para a impressora.',
+    fnLabel: 'Slot',
+    fnHelp: 'Número de slot ZPL ^FN (1-99) que a impressora usa para endereçar esta variável. Atribuído automaticamente; só altere ao integrar com um sistema que envia dados via ^FV na hora de imprimir.',
+    defaultLabel: 'Padrão',
+    defaultHelp: 'Valor renderizado na tela e emitido como conteúdo ZPL ^FD. Sistemas externos podem substituí-lo na impressão.',
+    noBindings: 'sem uso',
+    confirmDelete: 'Excluir',
+    cancel: 'Cancelar',
+    noSlotsLeft: 'Todos os 99 slots estão ocupados.',
+    nameInUse: 'Nome já em uso.',
+    slotInUse: 'Slot já em uso.',
+    sectionTitle: 'Variável',
+    bindingHelp: 'Vincule este campo a uma variável. O campo exibirá o valor padrão da variável e o emitirá como um slot ZPL ^FN na impressão.',
+    notBound: 'Sem vínculo',
+    createNew: '+ Criar nova variável…',
+    unbindAria: 'Desvincular variável',
+    newNamePlaceholder: 'Nome da nova variável',
+    create: 'Criar',
+    nameRequired: 'Nome obrigatório.',
+    boundHint: 'Valor padrão editável na aba Variáveis.',
+    emptyDefault: '(vazio)',
+    removeAriaFmt: 'Remover variável {name}',
+    bindingsSingular: '1 vínculo',
+    bindingsPluralFmt: '{n} vínculos',
+    deleteUnboundFmt: 'Excluir a variável "{name}"? Não está vinculada a nenhum campo.',
+    deleteBoundFmt: 'Excluir a variável "{name}"? Está vinculada a {n} campos; serão desvinculados e voltarão ao último valor literal.',
+    badgeBoundFmt: 'Vinculado a {name}',
+  },
   fonts: {
     heading: 'Fontes',
     noFonts: 'Nenhuma fonte carregada',
diff --git a/src/locales/ro.ts b/src/locales/ro.ts
index 4eb925c5..9e9f77a5 100644
--- a/src/locales/ro.ts
+++ b/src/locales/ro.ts
@@ -440,6 +440,7 @@ const ro = {
     propertiesTab: 'Proprietăți',
     layersTab: 'Straturi',
     fontsTab: 'Fonturi',
+    variablesTab: 'Variabile',
     empty: 'Nu există obiecte pe etichetă',
     toFront: 'Aduce în prim-plan',
     forward: 'Avansare un strat',
@@ -453,6 +454,41 @@ const ro = {
     show: 'Afișează',
     hide: 'Ascunde',
   },
+
+  variables: {
+    panelHint: 'Valori implicite completate la imprimare. Asociați un câmp din fila Proprietăți.',
+    add: 'Adaugă variabilă',
+    empty: 'Încă nu există variabile.',
+    emptyExample: 'Util pentru SKU-uri secvențiale, numere de lot sau nume de clienți.',
+    nameLabel: 'Nume',
+    nameHelp: 'Identificator liber afișat în meniul derulant Proprietăți la asocierea unui câmp. Pentru tine, nu pentru imprimantă.',
+    fnLabel: 'Slot',
+    fnHelp: 'Numărul slotului ZPL ^FN (1-99) folosit de imprimantă pentru a adresa această variabilă. Atribuit automat; modificați doar la integrarea cu un sistem care injectează date prin ^FV la imprimare.',
+    defaultLabel: 'Implicit',
+    defaultHelp: 'Valoarea redată pe pânză și emisă ca payload ZPL ^FD. Sistemele externe pot suprascrie la imprimare.',
+    noBindings: 'neutilizată',
+    confirmDelete: 'Șterge',
+    cancel: 'Anulează',
+    noSlotsLeft: 'Toate cele 99 sloturi sunt ocupate.',
+    nameInUse: 'Numele este deja folosit.',
+    slotInUse: 'Slotul este deja folosit.',
+    sectionTitle: 'Variabilă',
+    bindingHelp: 'Asociați acest câmp cu o variabilă. Câmpul va afișa valoarea implicită a variabilei și o va emite ca slot ZPL ^FN la imprimare.',
+    notBound: 'Neasociat',
+    createNew: '+ Creează variabilă nouă…',
+    unbindAria: 'Dezasociază variabila',
+    newNamePlaceholder: 'Numele variabilei noi',
+    create: 'Creează',
+    nameRequired: 'Nume necesar.',
+    boundHint: 'Valoarea implicită se editează în fila Variabile.',
+    emptyDefault: '(gol)',
+    removeAriaFmt: 'Eliminați variabila {name}',
+    bindingsSingular: '1 asociere',
+    bindingsPluralFmt: '{n} asocieri',
+    deleteUnboundFmt: 'Ștergeți variabila „{name}"? Nu este asociată cu niciun câmp.',
+    deleteBoundFmt: 'Ștergeți variabila „{name}"? Este asociată cu {n} câmpuri; vor fi dezasociate și vor reveni la ultima valoare literală.',
+    badgeBoundFmt: 'Asociat cu {name}',
+  },
   fonts: {
     heading: 'Fonturi',
     noFonts: 'Niciun font încărcat',
diff --git a/src/locales/sk.ts b/src/locales/sk.ts
index 98b87aa0..ea531e73 100644
--- a/src/locales/sk.ts
+++ b/src/locales/sk.ts
@@ -440,6 +440,7 @@ const sk = {
     propertiesTab: 'Vlastnosti',
     layersTab: 'Vrstvy',
     fontsTab: 'Písma',
+    variablesTab: 'Premenné',
     empty: 'Na štítku nie sú žiadne objekty',
     toFront: 'Preniesť do popredia',
     forward: 'Posunúť dopredu',
@@ -453,6 +454,41 @@ const sk = {
     show: 'Zobraziť',
     hide: 'Skryť',
   },
+
+  variables: {
+    panelHint: 'Predvolené hodnoty dopĺňané pri tlači. Naviažte pole zo záložky Vlastnosti.',
+    add: 'Pridať premennú',
+    empty: 'Zatiaľ žiadne premenné.',
+    emptyExample: 'Hodí sa na sekvenčné SKU, čísla šarží alebo mená zákazníkov.',
+    nameLabel: 'Názov',
+    nameHelp: 'Voľný identifikátor zobrazený v rozbaľovacom zozname Vlastnosti pri pripojení poľa. Pre vás, nie pre tlačiareň.',
+    fnLabel: 'Slot',
+    fnHelp: 'Číslo slotu ZPL ^FN (1-99), ktoré tlačiareň používa na adresovanie tejto premennej. Pridelené automaticky; meňte iba pri integrácii so systémom, ktorý posiela údaje cez ^FV pri tlači.',
+    defaultLabel: 'Predvolené',
+    defaultHelp: 'Hodnota vykreslená na plátne a odoslaná ako ZPL ^FD obsah. Externé systémy ju môžu prepísať pri tlači.',
+    noBindings: 'nepoužité',
+    confirmDelete: 'Odstrániť',
+    cancel: 'Zrušiť',
+    noSlotsLeft: 'Všetkých 99 slotov je obsadených.',
+    nameInUse: 'Názov sa už používa.',
+    slotInUse: 'Slot sa už používa.',
+    sectionTitle: 'Premenná',
+    bindingHelp: 'Naviažte toto pole na premennú. Pole zobrazí predvolenú hodnotu premennej a odošle ju ako ZPL ^FN slot pri tlači.',
+    notBound: 'Nepripojené',
+    createNew: '+ Vytvoriť novú premennú…',
+    unbindAria: 'Odpojiť premennú',
+    newNamePlaceholder: 'Názov novej premennej',
+    create: 'Vytvoriť',
+    nameRequired: 'Názov je povinný.',
+    boundHint: 'Predvolenú hodnotu možno upraviť v záložke Premenné.',
+    emptyDefault: '(prázdne)',
+    removeAriaFmt: 'Odstrániť premennú {name}',
+    bindingsSingular: '1 väzba',
+    bindingsPluralFmt: '{n} väzieb',
+    deleteUnboundFmt: 'Odstrániť premennú „{name}"? Nie je naviazaná na žiadne pole.',
+    deleteBoundFmt: 'Odstrániť premennú „{name}"? Je naviazaná na {n} polí; väzby sa zrušia a polia sa vrátia k poslednej doslovnej hodnote.',
+    badgeBoundFmt: 'Naviazané na {name}',
+  },
   fonts: {
     heading: 'Písma',
     noFonts: 'Žiadne písma nenačítané',
diff --git a/src/locales/sl.ts b/src/locales/sl.ts
index 995049c4..707aea06 100644
--- a/src/locales/sl.ts
+++ b/src/locales/sl.ts
@@ -440,6 +440,7 @@ const sl = {
     propertiesTab: 'Lastnosti',
     layersTab: 'Plasti',
     fontsTab: 'Pisave',
+    variablesTab: 'Spremenljivke',
     empty: 'Na nalepki ni predmetov',
     toFront: 'Premakni v ospredje',
     forward: 'Premakni eno plast naprej',
@@ -453,6 +454,41 @@ const sl = {
     show: 'Prikaži',
     hide: 'Skrij',
   },
+
+  variables: {
+    panelHint: 'Privzete vrednosti, ki se izpolnijo ob tiskanju. Polje povežite na zavihku Lastnosti.',
+    add: 'Dodaj spremenljivko',
+    empty: 'Še ni spremenljivk.',
+    emptyExample: 'Uporabno za zaporedne SKU, številke serij ali imena strank.',
+    nameLabel: 'Ime',
+    nameHelp: 'Prosti identifikator, prikazan v spustnem meniju Lastnosti pri povezovanju polja. Za vas, ne za tiskalnik.',
+    fnLabel: 'Reža',
+    fnHelp: 'Številka reže ZPL ^FN (1-99), s katero tiskalnik naslavlja to spremenljivko. Dodeljena samodejno; spremenite le pri integraciji s sistemom, ki pošilja podatke prek ^FV pri tiskanju.',
+    defaultLabel: 'Privzeto',
+    defaultHelp: 'Vrednost, prikazana na platnu in oddana kot tovor ZPL ^FD. Zunanji sistemi jo lahko prepišejo pri tiskanju.',
+    noBindings: 'neuporabljeno',
+    confirmDelete: 'Izbriši',
+    cancel: 'Prekliči',
+    noSlotsLeft: 'Vseh 99 rež je zasedenih.',
+    nameInUse: 'Ime je že v uporabi.',
+    slotInUse: 'Reža je že v uporabi.',
+    sectionTitle: 'Spremenljivka',
+    bindingHelp: 'Povežite to polje s spremenljivko. Polje bo prikazalo privzeto vrednost spremenljivke in jo poslalo kot režo ZPL ^FN pri tiskanju.',
+    notBound: 'Ni povezano',
+    createNew: '+ Ustvari novo spremenljivko…',
+    unbindAria: 'Razveži spremenljivko',
+    newNamePlaceholder: 'Ime nove spremenljivke',
+    create: 'Ustvari',
+    nameRequired: 'Potrebno je ime.',
+    boundHint: 'Privzeto vrednost lahko uredite na zavihku Spremenljivke.',
+    emptyDefault: '(prazno)',
+    removeAriaFmt: 'Odstrani spremenljivko {name}',
+    bindingsSingular: '1 vezava',
+    bindingsPluralFmt: '{n} vezav',
+    deleteUnboundFmt: 'Izbrišem spremenljivko "{name}"? Ni povezana z nobenim poljem.',
+    deleteBoundFmt: 'Izbrišem spremenljivko "{name}"? Povezana je z {n} polji; povezave bodo prekinjene in polja se bodo vrnila na zadnjo dobesedno vrednost.',
+    badgeBoundFmt: 'Povezano z {name}',
+  },
   fonts: {
     heading: 'Pisave',
     noFonts: 'Ni naloženih pisav',
diff --git a/src/locales/sr.ts b/src/locales/sr.ts
index 294ea3a9..3ffb8903 100644
--- a/src/locales/sr.ts
+++ b/src/locales/sr.ts
@@ -440,6 +440,7 @@ const sr = {
     propertiesTab: 'Svojstva',
     layersTab: 'Slojevi',
     fontsTab: 'Фонтови',
+    variablesTab: 'Променљиве',
     empty: 'Nema objekata na nalepnici',
     toFront: 'Pomeri napred',
     forward: 'Jedan sloj napred',
@@ -453,6 +454,41 @@ const sr = {
     show: 'Прикажи',
     hide: 'Сакриј',
   },
+
+  variables: {
+    panelHint: 'Подразумеване вредности које се попуњавају при штампању. Повежи поље са картице Својства.',
+    add: 'Додај променљиву',
+    empty: 'Још нема променљивих.',
+    emptyExample: 'Корисно за секвенцијалне SKU, бројеве серија или имена купаца.',
+    nameLabel: 'Назив',
+    nameHelp: 'Слободни идентификатор приказан у падајућем менију Својства при повезивању поља. За вас, не за штампач.',
+    fnLabel: 'Утор',
+    fnHelp: 'ZPL ^FN број утора (1-99) који штампач користи за адресирање ове променљиве. Аутоматски додељен; мењајте само при интеграцији са системом који шаље податке преко ^FV приликом штампе.',
+    defaultLabel: 'Подразумевано',
+    defaultHelp: 'Вредност приказана на платну и емитована као ZPL ^FD садржај. Спољни системи је могу преписати при штампи.',
+    noBindings: 'некоришћено',
+    confirmDelete: 'Обриши',
+    cancel: 'Откажи',
+    noSlotsLeft: 'Свих 99 утора је заузето.',
+    nameInUse: 'Назив је већ у употреби.',
+    slotInUse: 'Утор је већ у употреби.',
+    sectionTitle: 'Променљива',
+    bindingHelp: 'Повежи ово поље са променљивом. Поље ће приказати подразумевану вредност променљиве и послати је као ZPL ^FN утор при штампи.',
+    notBound: 'Није повезано',
+    createNew: '+ Направи нову променљиву…',
+    unbindAria: 'Прекини везу променљиве',
+    newNamePlaceholder: 'Назив нове променљиве',
+    create: 'Направи',
+    nameRequired: 'Назив је обавезан.',
+    boundHint: 'Подразумевану вредност уредите на картици Променљиве.',
+    emptyDefault: '(празно)',
+    removeAriaFmt: 'Уклони променљиву {name}',
+    bindingsSingular: '1 веза',
+    bindingsPluralFmt: '{n} веза',
+    deleteUnboundFmt: 'Обрисати променљиву „{name}"? Није повезана ни са једним пољем.',
+    deleteBoundFmt: 'Обрисати променљиву „{name}"? Повезана је са {n} поља; везе ће се прекинути и поља ће се вратити на последњу дословну вредност.',
+    badgeBoundFmt: 'Повезано са {name}',
+  },
   fonts: {
     heading: 'Фонтови',
     noFonts: 'Нема учитаних фонтова',
diff --git a/src/locales/sv.ts b/src/locales/sv.ts
index 1ebfbbe9..395f8516 100644
--- a/src/locales/sv.ts
+++ b/src/locales/sv.ts
@@ -440,6 +440,7 @@ const sv = {
     propertiesTab: 'Egenskaper',
     layersTab: 'Lager',
     fontsTab: 'Typsnitt',
+    variablesTab: 'Variabler',
     empty: 'Inga objekt på etiketten',
     toFront: 'Flytta längst fram',
     forward: 'Flytta ett lager framåt',
@@ -453,6 +454,41 @@ const sv = {
     show: 'Visa',
     hide: 'Dölj',
   },
+
+  variables: {
+    panelHint: 'Standardvärden som fylls i vid utskrift. Bind ett fält från fliken Egenskaper.',
+    add: 'Lägg till variabel',
+    empty: 'Inga variabler än.',
+    emptyExample: 'Användbart för sekventiella SKU:er, batchnummer eller kundnamn.',
+    nameLabel: 'Namn',
+    nameHelp: 'Fritt identifierare som visas i Egenskaper-rullgardinen vid bindning av ett fält. För dig, inte skrivaren.',
+    fnLabel: 'Plats',
+    fnHelp: 'ZPL ^FN-platsnummer (1-99) som skrivaren använder för att adressera den här variabeln. Tilldelas automatiskt; ändra endast vid integration med system som skickar data via ^FV vid utskrift.',
+    defaultLabel: 'Standard',
+    defaultHelp: 'Värde som renderas på arbetsytan och skickas som ZPL ^FD-data. Externa system kan åsidosätta det vid utskrift.',
+    noBindings: 'oanvänd',
+    confirmDelete: 'Ta bort',
+    cancel: 'Avbryt',
+    noSlotsLeft: 'Alla 99 platser är upptagna.',
+    nameInUse: 'Namnet används redan.',
+    slotInUse: 'Platsen används redan.',
+    sectionTitle: 'Variabel',
+    bindingHelp: 'Bind detta fält till en variabel. Fältet visar variabelns standardvärde och skickar det som en ZPL ^FN-plats vid utskrift.',
+    notBound: 'Ej bunden',
+    createNew: '+ Skapa ny variabel…',
+    unbindAria: 'Koppla från variabel',
+    newNamePlaceholder: 'Namn för ny variabel',
+    create: 'Skapa',
+    nameRequired: 'Namn krävs.',
+    boundHint: 'Standardvärdet redigeras i fliken Variabler.',
+    emptyDefault: '(tom)',
+    removeAriaFmt: 'Ta bort variabel {name}',
+    bindingsSingular: '1 bindning',
+    bindingsPluralFmt: '{n} bindningar',
+    deleteUnboundFmt: 'Ta bort variabeln "{name}"? Den är inte bunden till något fält.',
+    deleteBoundFmt: 'Ta bort variabeln "{name}"? Den är bunden till {n} fält; bindningarna tas bort och fälten återgår till sitt senaste bokstavliga värde.',
+    badgeBoundFmt: 'Bunden till {name}',
+  },
   fonts: {
     heading: 'Typsnitt',
     noFonts: 'Inga typsnitt laddade',
diff --git a/src/locales/tr.ts b/src/locales/tr.ts
index 589e55d2..428d8dc1 100644
--- a/src/locales/tr.ts
+++ b/src/locales/tr.ts
@@ -440,6 +440,7 @@ const tr = {
     propertiesTab: 'Özellikler',
     layersTab: 'Katmanlar',
     fontsTab: 'Yazı Tipleri',
+    variablesTab: 'Değişkenler',
     empty: 'Etikette nesne yok',
     toFront: 'Öne Getir',
     forward: 'İleriye Taşı',
@@ -453,6 +454,41 @@ const tr = {
     show: 'Göster',
     hide: 'Gizle',
   },
+
+  variables: {
+    panelHint: 'Yazdırma sırasında doldurulan varsayılan değerler. Bir alanı Özellikler sekmesinden bağlayın.',
+    add: 'Değişken ekle',
+    empty: 'Henüz değişken yok.',
+    emptyExample: 'Sıralı SKU\\\'lar, parti numaraları veya müşteri adları için kullanışlıdır.',
+    nameLabel: 'Ad',
+    nameHelp: 'Bir alanı bağlarken Özellikler açılır menüsünde gösterilen serbest tanımlayıcı. Yazıcı için değil, sizin için.',
+    fnLabel: 'Yuva',
+    fnHelp: 'Yazıcının bu değişkeni adreslemek için kullandığı ZPL ^FN yuva numarası (1-99). Otomatik atanır; yalnızca yazdırma sırasında ^FV ile veri enjekte eden bir sistemle entegre olurken değiştirin.',
+    defaultLabel: 'Varsayılan',
+    defaultHelp: 'Tuvalde gösterilen ve ZPL ^FD verisi olarak gönderilen değer. Harici sistemler yazdırma sırasında üzerine yazabilir.',
+    noBindings: 'kullanılmıyor',
+    confirmDelete: 'Sil',
+    cancel: 'İptal',
+    noSlotsLeft: 'Tüm 99 yuva dolu.',
+    nameInUse: 'Ad zaten kullanılıyor.',
+    slotInUse: 'Yuva zaten kullanılıyor.',
+    sectionTitle: 'Değişken',
+    bindingHelp: 'Bu alanı bir Değişkene bağlayın. Alan, değişkenin varsayılan değerini gösterir ve yazdırma sırasında ZPL ^FN yuvası olarak gönderir.',
+    notBound: 'Bağlı değil',
+    createNew: '+ Yeni değişken oluştur…',
+    unbindAria: 'Değişken bağını kaldır',
+    newNamePlaceholder: 'Yeni değişkenin adı',
+    create: 'Oluştur',
+    nameRequired: 'Ad gerekli.',
+    boundHint: 'Varsayılan, Değişkenler sekmesinde düzenlenebilir.',
+    emptyDefault: '(boş)',
+    removeAriaFmt: '{name} değişkenini kaldır',
+    bindingsSingular: '1 bağ',
+    bindingsPluralFmt: '{n} bağ',
+    deleteUnboundFmt: '"{name}" değişkeni silinsin mi? Hiçbir alana bağlı değil.',
+    deleteBoundFmt: '"{name}" değişkeni silinsin mi? {n} alana bağlı; bağlar kaldırılır ve alanlar son düz değerlerine geri döner.',
+    badgeBoundFmt: '{name} öğesine bağlı',
+  },
   fonts: {
     heading: 'Yazı Tipleri',
     noFonts: 'Yüklü yazı tipi yok',
diff --git a/src/locales/zh-hans.ts b/src/locales/zh-hans.ts
index 92c047e0..2e6312ec 100644
--- a/src/locales/zh-hans.ts
+++ b/src/locales/zh-hans.ts
@@ -440,6 +440,7 @@ const zhHans = {
     propertiesTab: '属性',
     layersTab: '图层',
     fontsTab: '字体',
+    variablesTab: '变量',
     empty: '标签上没有对象',
     toFront: '置于顶层',
     forward: '上移一层',
@@ -453,6 +454,41 @@ const zhHans = {
     show: '显示',
     hide: '隐藏',
   },
+
+  variables: {
+    panelHint: '在打印时填入的默认值。从属性面板绑定字段。',
+    add: '添加变量',
+    empty: '暂无变量。',
+    emptyExample: '适合连续的 SKU、批次号或客户名称。',
+    nameLabel: '名称',
+    nameHelp: '在绑定字段时显示在属性下拉框中的自由标识符。供你识别,与打印机无关。',
+    fnLabel: '槽位',
+    fnHelp: '打印机用于定位此变量的 ZPL ^FN 槽号(1-99)。自动分配;只有在与通过 ^FV 在打印时注入数据的系统集成时才修改。',
+    defaultLabel: '默认值',
+    defaultHelp: '在画布上渲染并作为 ZPL ^FD 数据输出的值。外部系统可在打印时覆盖。',
+    noBindings: '未使用',
+    confirmDelete: '删除',
+    cancel: '取消',
+    noSlotsLeft: '99 个槽位已全部占用。',
+    nameInUse: '名称已被使用。',
+    slotInUse: '槽位已被使用。',
+    sectionTitle: '变量',
+    bindingHelp: '将此字段绑定到变量。字段将显示变量的默认值,并在打印时作为 ZPL ^FN 槽输出。',
+    notBound: '未绑定',
+    createNew: '+ 创建新变量…',
+    unbindAria: '解除变量绑定',
+    newNamePlaceholder: '新变量名称',
+    create: '创建',
+    nameRequired: '需要名称。',
+    boundHint: '默认值可在变量标签页中编辑。',
+    emptyDefault: '(空)',
+    removeAriaFmt: '移除变量 {name}',
+    bindingsSingular: '1 个绑定',
+    bindingsPluralFmt: '{n} 个绑定',
+    deleteUnboundFmt: '删除变量 "{name}"?它未绑定到任何字段。',
+    deleteBoundFmt: '删除变量 "{name}"?它绑定到 {n} 个字段;将解除绑定并回退到最后的字面值。',
+    badgeBoundFmt: '已绑定到 {name}',
+  },
   fonts: {
     heading: '字体',
     noFonts: '未加载字体',
diff --git a/src/locales/zh-hant.ts b/src/locales/zh-hant.ts
index ba387c38..e1022c22 100644
--- a/src/locales/zh-hant.ts
+++ b/src/locales/zh-hant.ts
@@ -440,6 +440,7 @@ const zhHant = {
     propertiesTab: '屬性',
     layersTab: '圖層',
     fontsTab: '字體',
+    variablesTab: '變數',
     empty: '標籤上沒有物件',
     toFront: '移至最上層',
     forward: '上移一層',
@@ -453,6 +454,41 @@ const zhHant = {
     show: '顯示',
     hide: '隱藏',
   },
+
+  variables: {
+    panelHint: '在列印時填入的預設值。從屬性面板綁定欄位。',
+    add: '新增變數',
+    empty: '尚無變數。',
+    emptyExample: '適合連續的 SKU、批次號或客戶名稱。',
+    nameLabel: '名稱',
+    nameHelp: '在綁定欄位時顯示於屬性下拉選單中的自由識別字。供你識別,與印表機無關。',
+    fnLabel: '槽位',
+    fnHelp: '印表機用於定位此變數的 ZPL ^FN 槽號(1-99)。自動分配;僅在與透過 ^FV 在列印時注入資料的系統整合時才修改。',
+    defaultLabel: '預設值',
+    defaultHelp: '在畫布上渲染並作為 ZPL ^FD 資料輸出的值。外部系統可在列印時覆寫。',
+    noBindings: '未使用',
+    confirmDelete: '刪除',
+    cancel: '取消',
+    noSlotsLeft: '99 個槽位已全部佔用。',
+    nameInUse: '名稱已被使用。',
+    slotInUse: '槽位已被使用。',
+    sectionTitle: '變數',
+    bindingHelp: '將此欄位綁定到變數。欄位將顯示變數的預設值,並在列印時作為 ZPL ^FN 槽輸出。',
+    notBound: '未綁定',
+    createNew: '+ 建立新變數…',
+    unbindAria: '解除變數綁定',
+    newNamePlaceholder: '新變數名稱',
+    create: '建立',
+    nameRequired: '需要名稱。',
+    boundHint: '預設值可在變數標籤頁中編輯。',
+    emptyDefault: '(空)',
+    removeAriaFmt: '移除變數 {name}',
+    bindingsSingular: '1 個綁定',
+    bindingsPluralFmt: '{n} 個綁定',
+    deleteUnboundFmt: '刪除變數 "{name}"?它未綁定到任何欄位。',
+    deleteBoundFmt: '刪除變數 "{name}"?它綁定到 {n} 個欄位;將解除綁定並回退到最後的字面值。',
+    badgeBoundFmt: '已綁定到 {name}',
+  },
   fonts: {
     heading: '字體',
     noFonts: '未載入字體',

From 8c449b52292a78c6fabd94e4b3b85f2cd6269656 Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Fri, 22 May 2026 22:57:03 +0200
Subject: [PATCH 10/11] Update Readme.md

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f0be5e76..7075f9a9 100644
--- a/README.md
+++ b/README.md
@@ -64,7 +64,7 @@ The **ZPL output** panel at the bottom shows the generated ZPL. It updates in re
 
 File menu → **Import ZPL**: paste ZPL code directly, or open a `.zpl` file.
 
-> Import round-trips text, barcodes, shapes, images (including printer-stored and compressed graphics), and label-header settings. Features the editor has no equivalent for are dropped: variable template fields (`^FN`/`^FV`/`^FE`) and printer-side date/time stamps (`^FC`). Anything the parser doesn't recognize is skipped and listed in the import report.
+> Import round-trips text, barcodes, shapes, images (including printer-stored and compressed graphics), label-header settings, and template fields (`^FN`/`^FV` slots land in the **Variables** tab). Printer-side date/time stamps (`^FC`) have no editor equivalent and are dropped. Anything else the parser doesn't recognize is skipped and listed in the import report.
 
 ### Multiple labels (pages)
 
@@ -98,6 +98,7 @@ Both `.zpl` and `.json` round-trip cleanly. `.zpl` preserves all printable conte
 
 - Smart alignment and spacing guides
 - Layers panel with reordering
+- Variables: bind text and barcode fields to named defaults that emit as `^FN`/`^FV` slots, round-tripping with printer-side templates
 - 32 UI languages (auto-detected from browser)
 - Light / dark mode (follows OS setting)
 

From 3b332c781f7bfa01e016dc6b3ca078ffbe675c1d Mon Sep 17 00:00:00 2001
From: u8array <alexanderleinich1@gmail.com>
Date: Fri, 22 May 2026 23:11:34 +0200
Subject: [PATCH 11/11] style: drop em-dashes from new code + destructure-omit
 row-error key

Two style fixes folded together:
- em-dashes in new comments and UI strings replaced with colon/semicolon
  per repo writing-style convention; the Variable dropdown options now
  read `{name}: "{default}"`.
- row-error cleanup uses rest-spread destructure instead of a manual
  rebuild loop (Gemini PR-review suggestion #4). `void _drop`
  satisfies the unused-var lint.
---
 src/components/Output/ZplImportModal.tsx            |  2 +-
 src/components/Properties/LayerRow.tsx              |  2 +-
 src/components/Variables/VariableBindingControl.tsx |  8 ++++----
 src/components/Variables/VariablesPanel.tsx         | 12 +++++-------
 src/lib/variableBinding.ts                          |  4 ++--
 src/lib/zplImportService.ts                         |  2 +-
 6 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/Output/ZplImportModal.tsx b/src/components/Output/ZplImportModal.tsx
index a0539032..5b6d5df7 100644
--- a/src/components/Output/ZplImportModal.tsx
+++ b/src/components/Output/ZplImportModal.tsx
@@ -42,7 +42,7 @@ export function ZplImportModal({ onClose }: Props) {
     if (appendMode && hasExistingContent) {
       // Keep the current label config: the user opted to keep the
       // existing design's dimensions, so any imported ^PW/^LL is
-      // intentionally discarded. Imported variables are dropped too —
+      // intentionally discarded. Imported variables are dropped too:
       // append-mode preserves the current Variables tab; merging here
       // would risk name/fnNumber collisions the user can't see in the
       // dialog. Round-trip from a saved design uses Save/Load, not Append.
diff --git a/src/components/Properties/LayerRow.tsx b/src/components/Properties/LayerRow.tsx
index c2943c9a..fc4c9c91 100644
--- a/src/components/Properties/LayerRow.tsx
+++ b/src/components/Properties/LayerRow.tsx
@@ -74,7 +74,7 @@ export function LayerRow({
   // Variable badge: small {x} glyph next to the type icon when the leaf
   // is bound, with the variable name as a tooltip. Lets the user scan
   // the layers list for slot usage without selecting each row. The
-  // selector subscribes the row to variable changes — cheap because
+  // selector subscribes the row to variable changes; cheap because
   // each row already re-renders on selection / visibility flips.
   const boundVariable = useLabelStore((s) =>
     lookupBoundVariable(obj, s.variables),
diff --git a/src/components/Variables/VariableBindingControl.tsx b/src/components/Variables/VariableBindingControl.tsx
index cc121bf7..8cd69bf6 100644
--- a/src/components/Variables/VariableBindingControl.tsx
+++ b/src/components/Variables/VariableBindingControl.tsx
@@ -55,7 +55,7 @@ export function VariableBindingControl({ obj }: Props) {
       return;
     }
     // Seed the new variable's default with whatever literal content the
-    // field is currently carrying — preserves the canvas state across
+    // field is currently carrying, preserving the canvas state across
     // the binding transition. Every bindable type's first ^FD emission
     // comes from `props.content` (see registry implementations).
     const props = (obj as { props?: { content?: unknown } }).props;
@@ -166,7 +166,7 @@ export function VariableBindingControl({ obj }: Props) {
   );
 }
 
-/** Render `{name} — "{default}"`, truncating long defaults so the
+/** Render `{name}: "{default}"`, truncating long defaults so the
  *  <option> stays scannable in narrow dropdowns. Empty default uses
  *  the locale's `emptyDefault` label so users see the state explicitly. */
 const OPTION_DEFAULT_MAX = 24;
@@ -175,10 +175,10 @@ function formatVariableOption(
   defaultValue: string,
   emptyLabel: string,
 ): string {
-  if (defaultValue === '') return `${name} — ${emptyLabel}`;
+  if (defaultValue === '') return `${name}: ${emptyLabel}`;
   const truncated =
     defaultValue.length > OPTION_DEFAULT_MAX
       ? `${defaultValue.slice(0, OPTION_DEFAULT_MAX)}…`
       : defaultValue;
-  return `${name} — "${truncated}"`;
+  return `${name}: "${truncated}"`;
 }
diff --git a/src/components/Variables/VariablesPanel.tsx b/src/components/Variables/VariablesPanel.tsx
index 6b4cb49e..96dabc1e 100644
--- a/src/components/Variables/VariablesPanel.tsx
+++ b/src/components/Variables/VariablesPanel.tsx
@@ -67,12 +67,10 @@ export function VariablesPanel() {
     } else {
       setRowError((prev) => {
         if (!(id in prev)) return prev;
-        // Rebuild without the cleared key — dynamic delete is linted out
-        // for hot-paths; this rebuild is fine for a per-row state update.
-        const next: Record<string, string> = {};
-        for (const [k, msg] of Object.entries(prev)) {
-          if (k !== id) next[k] = msg;
-        }
+        // Destructure-omit the cleared key. Dynamic `delete` is linted
+        // out for hot-paths; rest-spread is the idiomatic alternative.
+        const { [id]: _drop, ...next } = prev;
+        void _drop;
         return next;
       });
     }
@@ -174,7 +172,7 @@ function VariableRow({
   // (empty name, mid-edit number) without the store snapping them back on
   // each keystroke. Commit on blur. Known limitation: an external store
   // update to the same id (undo, file load) does not flow back into this
-  // local mirror — the user would need to blur and re-focus. Accepted
+  // local mirror; the user would need to blur and re-focus. Accepted
   // for Phase 1 because the alternative (effect-based sync) introduced
   // focus-stealing and setState-in-render bugs.
   const [name, setName] = useState(variable.name);
diff --git a/src/lib/variableBinding.ts b/src/lib/variableBinding.ts
index f36718a1..4c418005 100644
--- a/src/lib/variableBinding.ts
+++ b/src/lib/variableBinding.ts
@@ -23,7 +23,7 @@ export function lookupBoundVariable(
  * optimisations stay effective.
  *
  * Every bindable type today exposes `props.content` (text + 8 barcode
- * types — see `bindable: true` in the registry). Non-bindable types
+ * types; see `bindable: true` in the registry). Non-bindable types
  * never have a `variableId`, so the early return covers them.
  */
 export function applyBindingToObject<T extends LabelObject>(
@@ -36,7 +36,7 @@ export function applyBindingToObject<T extends LabelObject>(
   if (!props || typeof props.content !== "string") return obj;
   if (props.content === variable.defaultValue) return obj;
   // The discriminated union doesn't narrow through a spread, so we cast
-  // back to T. Runtime shape preserves the original variant — only
+  // back to T. Runtime shape preserves the original variant; only
   // `props.content` changes.
   return {
     ...obj,
diff --git a/src/lib/zplImportService.ts b/src/lib/zplImportService.ts
index 5ef8d7f3..ccfd42c6 100644
--- a/src/lib/zplImportService.ts
+++ b/src/lib/zplImportService.ts
@@ -56,7 +56,7 @@ export function importZplText(zpl: string, dpmm: number): ZplImportResult {
       } else {
         // New fnNumber: keep the entry but disambiguate the name if a
         // prior block has the same (e.g. two `field_1` derived from
-        // different blocks). No id remap — the spread reuses v.id, and
+        // different blocks). No id remap, since the spread reuses v.id and
         // the block's objects already reference that id.
         const kept: Variable = { ...v, name: uniqueVariableName(v.name, variables) };
         variables.push(kept);