feat(variables): template-aware bindings (counts + rename ripple)

VariablesPanel's per-row binding count now includes `«name»`
template references in addition to single-bind `variableId`
references, so the user sees real usage of each Variable across
both binding styles. De-duped per object — a field that carries
both `variableId === V` and `«V»` in its content counts as one
place, not two.

updateVariable rewrites every `«oldName»` marker in every
object's content to `«newName»` when a Variable is renamed —
without this ripple, renames would silently dangle the templates
(resolve to literal text). Identity-preserving at the leaf level
so React memoisation downstream stays effective for objects whose
content didn't carry the renamed name.

Reuses the shared `getObjectStringContent` helper from
variableBinding.ts so the content-reading shape check stays in
one place.

3 new tests cover the rename ripple (multiple markers, identity
preservation, no-op when name unchanged).

Author: u8array

src/components/Variables/VariablesPanel.tsx

@@ -22,7 +22,8 @@ import { ConfirmDialog } from '../ui/ConfirmDialog';
 import { FieldLabel } from '../ui/FieldLabel';
 import { useT } from '../../lib/useT';
 import type { Translations } from '../../locales';
-import { getVariableSource, type VariableSource } from '../../lib/variableBinding';
+import { getObjectStringContent, getVariableSource, type VariableSource } from '../../lib/variableBinding';
+import { extractTemplateRefs } from '../../lib/fnTemplate';
 import { VariableSourceBadge } from './VariableSourceBadge';
 
 export function VariablesPanel() {
@@ -487,18 +488,36 @@ function formatDeleteMessage(
 }
 
 /** 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. */
+ *  variable, either via single-bind `variableId` OR via inline
+ *  `«name»` template markers in their content. Returns a Map keyed by
+ *  variable.id. Variables with no bindings are absent; 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 byName = new Map(variables.map((v) => [v.name, v.id]));
   const counts = new Map<string, number>();
   for (const page of pages) {
     for (const obj of walkObjects(page.objects)) {
+      // De-dupe per OBJECT across both binding styles: a field with
+      // both `variableId === V` and `«V»` in its content counts as
+      // one usage of V, not two. Mirrors how the user thinks about
+      // "where is V used" — one field = one place.
+      const refsInThisObj = new Set<string>();
       if (obj.variableId && known.has(obj.variableId)) {
-        counts.set(obj.variableId, (counts.get(obj.variableId) ?? 0) + 1);
+        refsInThisObj.add(obj.variableId);
+      }
+      const c = getObjectStringContent(obj);
+      if (c !== undefined) {
+        for (const name of extractTemplateRefs(c)) {
+          const id = byName.get(name);
+          if (id) refsInThisObj.add(id);
+        }
+      }
+      for (const id of refsInThisObj) {
+        counts.set(id, (counts.get(id) ?? 0) + 1);
       }
     }
   }

src/store/labelStore.templates.test.ts

@@ -0,0 +1,80 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { useLabelStore } from "./labelStore";
+import type { LabelObject } from "../types/Group";
+
+const newTextObj = (id: string, content: string): LabelObject =>
+  ({
+    id,
+    type: "text",
+    x: 0,
+    y: 0,
+    rotation: 0,
+    props: {
+      content,
+      fontHeight: 20,
+      fontWidth: 0,
+      rotation: "N",
+    },
+  }) as unknown as LabelObject;
+
+describe("labelStore — template marker rename ripple", () => {
+  beforeEach(() => {
+    useLabelStore.setState({
+      variables: [],
+      pages: [{ objects: [] }],
+      currentPageIndex: 0,
+    } as Partial<ReturnType<typeof useLabelStore.getState>>);
+  });
+
+  it("rewrites every «oldName» marker when a variable is renamed", () => {
+    const id = useLabelStore.getState().addVariable({ name: "sku" });
+    expect(id).not.toBeNull();
+    useLabelStore.setState({
+      pages: [
+        {
+          objects: [
+            newTextObj("a", "lone «sku»"),
+            newTextObj("b", "two «sku» and «sku» again"),
+            newTextObj("c", "untouched literal"),
+          ],
+        },
+      ],
+    } as Partial<ReturnType<typeof useLabelStore.getState>>);
+
+    useLabelStore.getState().updateVariable(id!, { name: "product" });
+
+    const objs = useLabelStore.getState().pages[0]!.objects as LabelObject[];
+    expect((objs[0] as { props: { content: string } }).props.content)
+      .toBe("lone «product»");
+    expect((objs[1] as { props: { content: string } }).props.content)
+      .toBe("two «product» and «product» again");
+    expect((objs[2] as { props: { content: string } }).props.content)
+      .toBe("untouched literal");
+  });
+
+  it("preserves object identity when the rename does not touch a leaf", () => {
+    const id = useLabelStore.getState().addVariable({ name: "sku" });
+    const before = newTextObj("a", "no markers here");
+    useLabelStore.setState({
+      pages: [{ objects: [before] }],
+    } as Partial<ReturnType<typeof useLabelStore.getState>>);
+
+    useLabelStore.getState().updateVariable(id!, { name: "product" });
+
+    const after = useLabelStore.getState().pages[0]!.objects[0];
+    expect(after).toBe(before);
+  });
+
+  it("leaves markers untouched when the rename target name is unchanged", () => {
+    const id = useLabelStore.getState().addVariable({ name: "sku" });
+    const obj = newTextObj("a", "value: «sku»");
+    useLabelStore.setState({
+      pages: [{ objects: [obj] }],
+    } as Partial<ReturnType<typeof useLabelStore.getState>>);
+
+    useLabelStore.getState().updateVariable(id!, { name: "sku" });
+
+    const after = useLabelStore.getState().pages[0]!.objects[0];
+    expect(after).toBe(obj);
+  });
+});

src/store/labelStore.ts

@@ -19,6 +19,8 @@ import {
 } from '../types/Group';
 import { locales } from '../locales';
 import type { LocaleCode } from '../locales';
+import { renameTemplateMarker } from '../lib/fnTemplate';
+import { getObjectStringContent } from '../lib/variableBinding';
 import { isDefaultLabelaryHost, fetchPreview, labelaryErrorMessage } from '../lib/labelary';
 import {
   nextFreeFnNumber,
@@ -57,6 +59,35 @@ function isLockBypass(changes: ObjectChanges): boolean {
   return keys.length > 0 && keys.every((k) => LOCK_BYPASS_KEYS.has(k));
 }
 
+/** Apply `renameTemplateMarker` to every leaf's `content` in a subtree.
+ *  Identity-preserving: returns the same array (and same node refs)
+ *  when no markers needed rewriting, so React memoisation downstream
+ *  stays effective for the common case where the rename touched no
+ *  templates. */
+function rewriteTemplateMarkers(
+  objects: LabelObject[],
+  oldName: string,
+  newName: string,
+): LabelObject[] {
+  let changed = false;
+  const next = objects.map((obj) => {
+    if (isGroup(obj)) {
+      const nextChildren = rewriteTemplateMarkers(obj.children, oldName, newName);
+      if (nextChildren === obj.children) return obj;
+      changed = true;
+      return { ...obj, children: nextChildren };
+    }
+    const content = getObjectStringContent(obj);
+    if (content === undefined) return obj;
+    const renamed = renameTemplateMarker(content, oldName, newName);
+    if (renamed === content) return obj;
+    changed = true;
+    const props = (obj as { props: object }).props;
+    return { ...obj, props: { ...props, content: renamed } } as LabelObject;
+  });
+  return changed ? next : objects;
+}
+
 function applyObjectChanges(
   obj: LabelObject,
   changes: ObjectChanges,
@@ -1109,9 +1140,23 @@ export const useLabelStore = create<LabelState>()(
             if (state.variables.some((v) => v.id !== id && v.fnNumber === changes.fnNumber)) return {};
           }
 
-          return {
+          const next: Partial<typeof state> = {
             variables: state.variables.map((v) => (v.id === id ? { ...v, ...changes } : v)),
           };
+          // Rename ripple: when the variable's name changes, every
+          // `«oldName»` marker in any object's content needs to point
+          // at the new name. Without this the templates dangle (resolve
+          // to literal text) and the user has no obvious way to fix
+          // them other than re-typing.
+          if (changes.name !== undefined && changes.name !== existing.name) {
+            const oldName = existing.name;
+            const newName = changes.name;
+            next.pages = state.pages.map((page) => ({
+              ...page,
+              objects: rewriteTemplateMarkers(page.objects, oldName, newName),
+            }));
+          }
+          return next;
         }),
 
       setVariables: (variables) =>