@snowcone-app/canvas 0.19.1 → 0.21.0

package/dist/template-fields-Dr3fMItw.js

@@ -1,329 +0,0 @@
-import { jsxs as q, jsx as M } from "react/jsx-runtime";
-import { p as O, o as P, U as J } from "./MenuButton-CeoEAtzP.js";
-import { d as Q, u as X, c as $, b as B } from "./EditorContext-5QpqAhjh.js";
-import { useCallback as D, useEffect as Z, useMemo as F, useRef as U, useState as W } from "react";
-import { c as ee, y as Y, T as w, I as G, z as te } from "./FontAnalyzer-DIlqmyuf.js";
-import { a as ne, o as E, b as f, n as oe, l as x, u as _, c as re } from "./CanvasStateV1-Bq48qhv5.js";
-const Ae = () => {
-  const { undo: t, redo: e, canUndo: r, canRedo: n } = Q();
-  return /* @__PURE__ */ q("div", { className: "sc-undo-redo", style: { display: "inline-flex", gap: 4 }, children: [
-    /* @__PURE__ */ M(
-      O,
-      {
-        icon: P.undo,
-        onClick: t,
-        disabled: !r,
-        tooltip: "Undo",
-        "aria-label": "Undo"
-      }
-    ),
-    /* @__PURE__ */ M(
-      O,
-      {
-        icon: P.redo,
-        onClick: e,
-        disabled: !n,
-        tooltip: "Redo",
-        "aria-label": "Redo"
-      }
-    )
-  ] });
-}, j = ee("useCommands");
-function Ue() {
-  const t = X(), {
-    undo: e,
-    redo: r,
-    canUndo: n,
-    canRedo: a,
-    executeElementUpdate: o,
-    executeAddElement: s,
-    executeRemoveElement: i,
-    executeReorderElement: m,
-    executeCommandBatch: c,
-    executeCreateArtboard: p,
-    executeDeleteArtboard: y,
-    executeUpdateArtboard: u
-  } = t, d = D(() => {
-    j.warn("[useCommands] clearHistory is not yet implemented in EditorContext");
-  }, []), T = D((b) => {
-    j.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext");
-  }, []);
-  return {
-    // Undo/Redo
-    undo: e,
-    redo: r,
-    canUndo: n,
-    canRedo: a,
-    // History management
-    clearHistory: d,
-    clearArtboardHistory: T,
-    // Command execution
-    executeElementUpdate: o,
-    executeAddElement: s,
-    executeRemoveElement: i,
-    executeReorderElement: m,
-    executeCreateArtboard: p,
-    executeDeleteArtboard: y,
-    executeUpdateArtboard: u,
-    // Batch execution
-    executeCommandBatch: c
-  };
-}
-function Ne() {
-  const { selectedElement: t } = X();
-  return t ?? null;
-}
-const se = 3e3, L = {
-  text: "useTextBinding",
-  image: "useImageBinding",
-  font: "useFontBinding"
-}, ae = {
-  text: "setText",
-  image: "setImageUrl",
-  font: "setFontFamily"
-}, ie = {
-  text: "text",
-  image: "image",
-  font: "text"
-}, R = /* @__PURE__ */ new Set();
-function z(t) {
-  return t instanceof w ? "text" : t instanceof G ? "image" : "other";
-}
-function ce(t, e, r) {
-  const n = `[${L[t]}]`, a = `the binding is dead (isConnected: false, ${ae[t]} is a no-op)`, o = ie[t], s = r.getAllByName(e);
-  if (s.length > 0) {
-    const c = [...new Set(s.map(z))], p = o === "text" ? "image" : "text", y = c.length === 1 && c[0] === p ? ` Bind it with ${L[p]}("${e}") instead.` : "";
-    return `${n} the layer named "${e}" is ${c.join("/")}, not ${o} — ${a}.${y}`;
-  }
-  const i = r.getAll().filter((c) => c.name).map((c) => `"${c.name}" (${z(c)})`), m = i.length ? `Named layers on this canvas: ${i.join(", ")}. Check the name for a typo.` : `No element on this canvas has a name — name one via design().${o}(…, { name: '${e}' }) or the element's \`name\` property.`;
-  return `${n} no ${o} layer named "${e}" exists — ${a}. ${m}`;
-}
-function k(t, e, r, n) {
-  Z(() => {
-    var s;
-    if (n || typeof Y > "u" || ((s = Y.env) == null ? void 0 : s.NODE_ENV) === "production") return;
-    const a = `${t}:${e}`;
-    if (R.has(a)) return;
-    const o = setTimeout(() => {
-      R.has(a) || (R.add(a), console.warn(ce(t, e, r)));
-    }, se);
-    return () => clearTimeout(o);
-  }, [t, e, r, n]);
-}
-const le = () => {
-}, fe = [];
-function Be(t) {
-  const { elementStore: e } = $(), { executeElementUpdate: r } = B(), n = F(() => e.getAllByName(t).filter((s) => s instanceof w), [e, t]), a = D(
-    (o) => {
-      for (const s of n) {
-        const i = s.clone();
-        i.setText(o), r(s, i);
-      }
-    },
-    [n, r]
-  );
-  return k("text", t, e, n.length > 0), n.length === 0 ? { text: "", setText: le, element: null, elements: fe, isConnected: !1 } : {
-    text: n[0].getText(),
-    setText: a,
-    element: n[0],
-    elements: n,
-    isConnected: !0
-  };
-}
-const me = () => {
-}, ue = [];
-function de(t, e, r) {
-  const n = t / e;
-  if (r >= n) {
-    const a = e, o = a * r, s = t / o;
-    return {
-      width: o,
-      height: a,
-      cropX: (1 - s) / 2,
-      cropY: 0,
-      cropWidth: s,
-      cropHeight: 1
-    };
-  } else {
-    const a = t, o = a / r, s = e / o;
-    return {
-      width: a,
-      height: o,
-      cropX: 0,
-      cropY: (1 - s) / 2,
-      cropWidth: 1,
-      cropHeight: s
-    };
-  }
-}
-function Fe(t, e) {
-  const r = (e == null ? void 0 : e.fit) ?? "cover", { elementStore: n, setElements: a } = $(), { executeElementUpdate: o } = B(), s = F(() => n.getAllByName(t).filter((d) => d instanceof G), [n, t]), i = U(/* @__PURE__ */ new Map());
-  for (const u of s)
-    if (!i.current.has(u.id)) {
-      const d = u.transformData;
-      i.current.set(u.id, {
-        width: d.width * d.cropWidth,
-        height: d.height * d.cropHeight
-      });
-    }
-  const m = U(s);
-  m.current = s;
-  const c = U(o);
-  c.current = o;
-  const p = U(a);
-  p.current = a;
-  const y = D(
-    (u) => {
-      const d = m.current, T = c.current;
-      for (const b of d) {
-        const H = i.current.get(b.id);
-        if (!H) continue;
-        const { width: S, height: I } = H, g = b.clone();
-        g.imageLoaded = !1, g.imageElement = null, g.isCropping = !1, g.imageUrl = u, r === "cover" ? (g.preserveDimensions = !0, g.onLoadCallback = (l) => {
-          const A = l.imageAspectRatio || 1, h = de(S, I, A);
-          l.transformData.width = h.width, l.transformData.height = h.height, l.transformData.cropX = h.cropX, l.transformData.cropY = h.cropY, l.transformData.cropWidth = h.cropWidth, l.transformData.cropHeight = h.cropHeight, T(b, l);
-        }) : (g.preserveDimensions = !1, g.onLoadCallback = (l) => {
-          const A = l.transformData.width, h = l.transformData.height, v = Math.min(S / A, I / h, 1);
-          v < 1 && (l.transformData.width = A * v, l.transformData.height = h * v), l.transformData.cropX = 0, l.transformData.cropY = 0, l.transformData.cropWidth = 1, l.transformData.cropHeight = 1, T(b, l);
-        }), g.loadImage(u);
-      }
-    },
-    [r]
-    // Stable deps only — imageElements/executeElementUpdate/setElements accessed via refs
-  );
-  return k("image", t, n, s.length > 0), s.length === 0 ? { imageUrl: "", setImageUrl: me, element: null, elements: ue, isConnected: !1 } : {
-    imageUrl: s[0].imageUrl,
-    setImageUrl: y,
-    element: s[0],
-    elements: s,
-    isConnected: !0
-  };
-}
-const pe = [];
-function N(t) {
-  let e = t.trim().toUpperCase();
-  return e.length === 4 && e.startsWith("#") && (e = "#" + e[1] + e[1] + e[2] + e[2] + e[3] + e[3]), e;
-}
-function C(t, e) {
-  return typeof t == "string" && N(t) === e;
-}
-function K(t, e) {
-  var n, a, o;
-  const r = t;
-  return C(r.color, e) || C((n = r.transformData) == null ? void 0 : n.fillColor, e) || C((a = r.transformData) == null ? void 0 : a.strokeColor, e) || ((o = r.stroke) == null ? void 0 : o.enabled) === !0 && C(r.stroke.color, e);
-}
-function ge(t, e, r) {
-  var s, i, m;
-  if (!K(t, e)) return null;
-  const n = t.clone(), a = t, o = n;
-  return C(a.color, e) && (typeof o.setColor == "function" ? o.setColor(r) : o.color = r), C((s = a.transformData) == null ? void 0 : s.fillColor, e) && (o.transformData = { ...o.transformData, fillColor: r }), C((i = a.transformData) == null ? void 0 : i.strokeColor, e) && (o.transformData = { ...o.transformData, strokeColor: r }), ((m = a.stroke) == null ? void 0 : m.enabled) === !0 && C(a.stroke.color, e) && (o.stroke = { ...o.stroke, color: r }), n;
-}
-function ve(t) {
-  const { elementStore: e } = $(), { executeElementUpdate: r } = B(), [n, a] = W(() => N(t)), [o, s] = W(t);
-  t !== o && (s(t), a(N(t)));
-  const i = F(
-    () => e.getAll().filter((c) => K(c, n)),
-    [e, n]
-  ), m = D(
-    (c) => {
-      const p = N(c);
-      if (p !== n) {
-        for (const y of e.getAll()) {
-          const u = ge(y, n, c);
-          u && r(y, u);
-        }
-        a(p);
-      }
-    },
-    [e, n, r]
-  );
-  return i.length === 0 ? { color: n, setColor: m, elements: pe, isConnected: !1 } : { color: n, setColor: m, elements: i, isConnected: !0 };
-}
-const he = () => {
-}, xe = [];
-function Re(t) {
-  const { elementStore: e } = $(), { executeElementUpdate: r } = B(), n = F(() => e.getAllByName(t).filter((s) => s instanceof w), [e, t]), a = D(
-    (o) => {
-      J.loadGoogleFontByName(o);
-      for (const s of n) {
-        if (s.fontFamily === o) continue;
-        te.clearCache(s.fontFamily);
-        const i = s.clone();
-        i.fontFamily = o, r(s, i);
-      }
-    },
-    [n, r]
-  );
-  return k("font", t, e, n.length > 0), n.length === 0 ? { fontFamily: "", setFontFamily: he, element: null, elements: xe, isConnected: !1 } : {
-    fontFamily: n[0].fontFamily,
-    setFontFamily: a,
-    element: n[0],
-    elements: n,
-    isConnected: !0
-  };
-}
-function we(t) {
-  const { elementStore: e } = $();
-  return t ? e.getByName(t) ?? null : null;
-}
-const V = "personalization", ye = ne("type", [
-  E({
-    type: x("text"),
-    name: f().min(1),
-    label: f(),
-    placeholder: f().optional(),
-    maxLength: oe().int().positive().optional(),
-    group: f().optional()
-  }),
-  E({
-    type: x("image"),
-    name: f().min(1),
-    label: f(),
-    placeholder: f().optional(),
-    fit: _([x("cover"), x("contain")]).optional(),
-    group: f().optional()
-  }),
-  E({
-    type: x("color"),
-    color: f().min(1),
-    label: f(),
-    group: f().optional()
-  }),
-  E({
-    type: x("select"),
-    name: f().min(1),
-    label: f(),
-    property: _([x("text"), x("imageUrl"), x("fontFamily")]),
-    options: re(E({ label: f(), value: f() })).min(1),
-    group: f().optional()
-  })
-]);
-function ke(t) {
-  if (!t || typeof t != "object") return [];
-  const e = t[V];
-  if (!Array.isArray(e)) return [];
-  const r = [];
-  for (const n of e) {
-    if (!n || typeof n != "object") continue;
-    const a = "type" in n ? n : { ...n, type: "text" }, o = ye.safeParse(a);
-    o.success && r.push(o.data);
-  }
-  return r;
-}
-function He(t, e) {
-  return { ...t, [V]: e };
-}
-export {
-  V as T,
-  Ae as U,
-  Ue as a,
-  we as b,
-  Re as c,
-  Fe as d,
-  Ne as e,
-  Be as f,
-  ke as r,
-  ve as u,
-  He as w
-};
-//# sourceMappingURL=template-fields-Dr3fMItw.js.map

package/dist/template-fields-Dr3fMItw.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"template-fields-Dr3fMItw.js","sources":["../src/components/embed/UndoRedoControls.tsx","../src/hooks/useCommands.ts","../src/hooks/useSelectedElement.ts","../src/hooks/useDeadBindingWarning.ts","../src/hooks/useTextBinding.ts","../src/hooks/useImageBinding.ts","../src/hooks/useColorBinding.ts","../src/hooks/useFontBinding.ts","../src/hooks/useElementByName.ts","../src/design/template-fields.ts"],"sourcesContent":["/**\n * UndoRedoControls — a tiny topbar control pair for undo/redo.\n *\n * Registered as the `undo-redo-controls` kit section (referenced by the\n * `pro-studio` preset) and wrapped by `Editor.History` (ADR-0085). Reads\n * command state from the NARROW history sub-context — not the fat\n * `useEditor()` — so it only re-renders when undo/redo availability actually\n * changes (re-render containment, D3).\n */\n\nimport React from 'react';\nimport { ToolbarButton } from '../ui/toolbar-button.js';\nimport { icons } from '../ui/icons.js';\nimport { useHistoryContext } from '../../contexts/HistoryContext.js';\n\nexport const UndoRedoControls: React.FC = () => {\n  const { undo, redo, canUndo, canRedo } = useHistoryContext();\n  return (\n    <div className=\"sc-undo-redo\" style={{ display: 'inline-flex', gap: 4 }}>\n      <ToolbarButton\n        icon={icons.undo}\n        onClick={undo}\n        disabled={!canUndo}\n        tooltip=\"Undo\"\n        aria-label=\"Undo\"\n      />\n      <ToolbarButton\n        icon={icons.redo}\n        onClick={redo}\n        disabled={!canRedo}\n        tooltip=\"Redo\"\n        aria-label=\"Redo\"\n      />\n    </div>\n  );\n};\n\nexport default UndoRedoControls;\n","/**\n * useCommands - Hook for undo/redo and command history operations\n *\n * Provides a clean interface to command history functionality\n * Must be used within EditorProvider\n *\n * @example\n * ```tsx\n * function UndoRedoToolbar() {\n *   const { undo, redo, canUndo, canRedo, clearHistory } = useCommands();\n *\n *   return (\n *     <div className=\"toolbar\">\n *       <button onClick={undo} disabled={!canUndo}>\n *         Undo (⌘Z)\n *       </button>\n *       <button onClick={redo} disabled={!canRedo}>\n *         Redo (⌘⇧Z)\n *       </button>\n *       <button onClick={clearHistory}>\n *         Clear History\n *       </button>\n *     </div>\n *   );\n * }\n * ```\n */\n\nimport { useCallback } from 'react';\nimport { useEditor } from '../contexts/EditorContext.js';\nimport { createLogger } from '../utils/logger.js';\n\nconst logger = createLogger('useCommands');\n\nexport interface UseCommandsReturn {\n  // Undo/Redo\n  undo: () => void;\n  redo: () => void;\n  canUndo: boolean;\n  canRedo: boolean;\n\n  // History management\n  clearHistory: () => void;\n  clearArtboardHistory: (artboardId: string) => void;\n\n  // Command execution\n  executeElementUpdate: ReturnType<typeof useEditor>['executeElementUpdate'];\n  executeAddElement: ReturnType<typeof useEditor>['executeAddElement'];\n  executeRemoveElement: ReturnType<typeof useEditor>['executeRemoveElement'];\n  executeReorderElement: ReturnType<typeof useEditor>['executeReorderElement'];\n  executeCreateArtboard: ReturnType<typeof useEditor>['executeCreateArtboard'];\n  executeDeleteArtboard: ReturnType<typeof useEditor>['executeDeleteArtboard'];\n  executeUpdateArtboard: ReturnType<typeof useEditor>['executeUpdateArtboard'];\n\n  // Batch execution\n  executeCommandBatch: (commands: Array<{ execute: () => void; undo: () => void }>) => void;\n}\n\n/**\n * Hook for accessing command history and undo/redo functionality\n * Must be used within EditorProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { undo, redo, canUndo, canRedo } = useCommands();\n *   const { selectedElement } = useEditor();\n *\n *   const handleDelete = () => {\n *     if (selectedElement) {\n *       executeRemoveElement(selectedElement);\n *     }\n *   };\n *\n *   return (\n *     <div>\n *       <button onClick={undo} disabled={!canUndo}>Undo</button>\n *       <button onClick={redo} disabled={!canRedo}>Redo</button>\n *       <button onClick={handleDelete}>Delete</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useCommands(): UseCommandsReturn {\n  const context = useEditor();\n\n  // Extract command history methods\n  const {\n    undo,\n    redo,\n    canUndo,\n    canRedo,\n    executeElementUpdate,\n    executeAddElement,\n    executeRemoveElement,\n    executeReorderElement,\n    executeCommandBatch,\n    executeCreateArtboard,\n    executeDeleteArtboard,\n    executeUpdateArtboard,\n  } = context;\n\n  // Clear all history (not exposed in EditorContext yet, so create a placeholder)\n  const clearHistory = useCallback(() => {\n    logger.warn('[useCommands] clearHistory is not yet implemented in EditorContext');\n  }, []);\n\n  // Clear artboard-specific history (not exposed in EditorContext yet, so create a placeholder)\n  const clearArtboardHistory = useCallback((_artboardId: string) => {\n    logger.warn('[useCommands] clearArtboardHistory is not yet implemented in EditorContext');\n  }, []);\n\n  return {\n    // Undo/Redo\n    undo,\n    redo,\n    canUndo,\n    canRedo,\n\n    // History management\n    clearHistory,\n    clearArtboardHistory,\n\n    // Command execution\n    executeElementUpdate,\n    executeAddElement,\n    executeRemoveElement,\n    executeReorderElement,\n    executeCreateArtboard,\n    executeDeleteArtboard,\n    executeUpdateArtboard,\n\n    // Batch execution\n    executeCommandBatch,\n  };\n}\n","import { useEditor } from '../contexts/EditorContext.js';\nimport type { EditorElement } from '../contexts/EditorContext.js';\n\n/**\n * Returns the currently selected element, or null if nothing is selected.\n *\n * This is a convenience wrapper around `useEditor()` that only extracts\n * selection state, keeping consumer components focused on what they need.\n *\n * @example\n * ```tsx\n * function PropertiesPanel() {\n *   const selected = useSelectedElement();\n *   if (!selected) return <p>Nothing selected</p>;\n *   return <p>Selected: {selected.id}</p>;\n * }\n * ```\n */\nexport function useSelectedElement(): EditorElement | null {\n  const { selectedElement } = useEditor();\n  return selectedElement ?? null;\n}\n","/**\n * useDeadBindingWarning - Dev-only diagnostic for \"dead\" binding hooks.\n *\n * `useTextBinding('typo')` / `useImageBinding('typo')` on a layer name that\n * matches no element returns `isConnected: false` with no-op setters — by\n * design. But with no diagnostic, a typo'd layer name produces a dead control\n * with ZERO console output (the silent-failure finding from the embed-SDK DX\n * evaluation). This hook emits a one-time, dev-only `console.warn` naming the\n * requested layer and listing the canvas's named layers — the same\n * silent-blank-guard pattern as the SDK's `warnImagelessElements` /\n * `[RealtimeEmbed]` validateEmbed warnings.\n *\n * Timing is settle-aware: elements may legitimately arrive late\n * (`initialElements` seeding, an async state load), so warning on first render\n * would false-fire constantly. The `ElementStore` is immutable — every mutation\n * hands the context a NEW store instance, which re-runs the effect — so the\n * grace timer re-arms on every element change and only fires once the element\n * set has been quiet for {@link DEAD_BINDING_GRACE_MS} with still no match.\n * Connecting (or unmounting — StrictMode's throwaway first mount included)\n * clears the pending timer.\n *\n * @module\n */\n\nimport { useEffect } from 'react';\nimport type { ElementStore, StoreElement } from '../core/ElementStore.js';\nimport { TextElement } from '../core/TextElement.js';\nimport { ImageElement } from '../core/ImageElement.js';\n\n/** The binding hook flavor (font binds to TEXT layers — see TARGET_KIND). */\nexport type BindingKind = 'text' | 'image' | 'font';\n\n/**\n * How long the element set must be SETTLED (no store changes) with the binding\n * still unmatched before the warning fires. Long enough for `initialElements`\n * seeding and async state loads to land; short enough to surface a typo well\n * before the user gives up on the dead control.\n */\nexport const DEAD_BINDING_GRACE_MS = 3000;\n\nconst HOOK_NAME: Record<BindingKind, string> = {\n  text: 'useTextBinding',\n  image: 'useImageBinding',\n  font: 'useFontBinding',\n};\n\nconst SETTER_NAME: Record<BindingKind, string> = {\n  text: 'setText',\n  image: 'setImageUrl',\n  font: 'setFontFamily',\n};\n\n/** The element flavor each hook actually matches (font targets text layers). */\nconst TARGET_KIND: Record<BindingKind, 'text' | 'image'> = {\n  text: 'text',\n  image: 'image',\n  font: 'text',\n};\n\n/** Layer names already warned about — the warning is one-time per page load. */\nconst warned = new Set<string>();\n\n/** Test-only: forget which dead bindings have already been warned about. */\nexport function resetDeadBindingWarnings(): void {\n  warned.clear();\n}\n\nfunction kindOf(el: StoreElement): string {\n  if (el instanceof TextElement) return 'text';\n  if (el instanceof ImageElement) return 'image';\n  return 'other';\n}\n\n/**\n * Build the dead-binding warning message. Exported for tests; the message\n * distinguishes the two failure shapes:\n *  - the name matches a layer of the WRONG type → point at the right hook\n *  - the name matches nothing → list the available named layers (or explain\n *    how to name one when none carry a name)\n */\nexport function deadBindingWarning(kind: BindingKind, name: string, store: ElementStore): string {\n  const tag = `[${HOOK_NAME[kind]}]`;\n  const dead = `the binding is dead (isConnected: false, ${SETTER_NAME[kind]} is a no-op)`;\n\n  const target = TARGET_KIND[kind];\n  const sameName = store.getAllByName(name);\n  if (sameName.length > 0) {\n    const kinds = [...new Set(sameName.map(kindOf))];\n    const other = target === 'text' ? 'image' : 'text';\n    const hint =\n      kinds.length === 1 && kinds[0] === other\n        ? ` Bind it with ${HOOK_NAME[other]}(\"${name}\") instead.`\n        : '';\n    return (\n      `${tag} the layer named \"${name}\" is ${kinds.join('/')}, not ${target} — ` +\n      `${dead}.${hint}`\n    );\n  }\n\n  const named = store\n    .getAll()\n    .filter((el) => el.name)\n    .map((el) => `\"${el.name}\" (${kindOf(el)})`);\n  const available = named.length\n    ? `Named layers on this canvas: ${named.join(', ')}. Check the name for a typo.`\n    : `No element on this canvas has a name — name one via design().${target}(…, ` +\n      `{ name: '${name}' }) or the element's \\`name\\` property.`;\n  return `${tag} no ${target} layer named \"${name}\" exists — ${dead}. ${available}`;\n}\n\n/**\n * Emit the one-time dead-binding warning once the element set settles with the\n * binding still disconnected. Used by `useTextBinding` / `useImageBinding`;\n * dev-only (compiled out of production via the `NODE_ENV` guard) and never\n * throws.\n */\nexport function useDeadBindingWarning(\n  kind: BindingKind,\n  name: string,\n  store: ElementStore,\n  isConnected: boolean,\n): void {\n  useEffect(() => {\n    if (isConnected) return;\n    if (typeof process === 'undefined' || process.env?.NODE_ENV === 'production') return;\n    const key = `${kind}:${name}`;\n    if (warned.has(key)) return;\n\n    // The store is immutable, so any element change re-runs this effect with a\n    // new instance — re-arming the timer. It fires only once the element set\n    // has been quiet for the full grace period with still no match.\n    const timer = setTimeout(() => {\n      if (warned.has(key)) return; // another component already warned for this name\n      warned.add(key);\n      console.warn(deadBindingWarning(kind, name, store));\n    }, DEAD_BINDING_GRACE_MS);\n    return () => clearTimeout(timer);\n  }, [kind, name, store, isConnected]);\n}\n","/**\n * useTextBinding - Bidirectional text binding between HTML inputs and canvas text elements.\n *\n * Links an external input to one or more canvas text elements by their `name` property.\n * Multiple elements can share the same name — `setText` updates all of them.\n * Changes flow both ways: input → canvas via `setText`, and canvas edits\n * propagate back through the element store re-render.\n *\n * @example\n * ```tsx\n * function NameInput() {\n *   const { text, setText, isConnected } = useTextBinding('headline');\n *   return (\n *     <input\n *       value={text}\n *       onChange={(e) => setText(e.target.value)}\n *       disabled={!isConnected}\n *     />\n *   );\n * }\n * ```\n *\n * @module\n */\n\nimport { useMemo, useCallback } from 'react';\nimport { useElementsContext } from '../contexts/ElementsContext.js';\nimport { useCommandContext } from '../contexts/CommandContext.js';\nimport { TextElement } from '../core/TextElement.js';\nimport type { EditorElement } from '../contexts/EditorContext.js';\nimport { useDeadBindingWarning } from './useDeadBindingWarning.js';\n\n/** Result returned by {@link useTextBinding}. */\nexport interface TextBindingResult {\n  /** Current plain text content (from first bound element). Empty string if disconnected. */\n  text: string;\n  /** Update text on all bound elements. No-op if disconnected. */\n  setText: (text: string) => void;\n  /** The first bound element, or null if no matching text element exists. */\n  element: EditorElement | null;\n  /** All bound text elements (empty array if disconnected). */\n  elements: readonly EditorElement[];\n  /** Whether at least one matching text element exists. */\n  isConnected: boolean;\n}\n\nconst NOOP = () => {};\nconst EMPTY: readonly EditorElement[] = [];\n\n/**\n * Bind an HTML input to canvas text elements by their `name` property.\n *\n * Multiple elements can share the same name — `setText` updates all of them.\n * Text is read from the first matching element (render order).\n *\n * Must be used within an `EditorProvider`.\n *\n * @param name - The element name to bind to.\n * @returns Text value, setter, element references, and connection status.\n */\nexport function useTextBinding(name: string): TextBindingResult {\n  const { elementStore } = useElementsContext();\n  const { executeElementUpdate } = useCommandContext();\n\n  const textElements = useMemo(() => {\n    const all = elementStore.getAllByName(name);\n    return all.filter((el): el is TextElement => el instanceof TextElement);\n  }, [elementStore, name]);\n\n  const setText = useCallback(\n    (newText: string) => {\n      for (const el of textElements) {\n        const cloned = el.clone() as TextElement;\n        cloned.setText(newText);\n        executeElementUpdate(el, cloned);\n      }\n    },\n    [textElements, executeElementUpdate],\n  );\n\n  // Dev-only: a name that never matches produces a dead control with no-op\n  // setters — warn once the element set settles so a typo isn't silent.\n  useDeadBindingWarning('text', name, elementStore, textElements.length > 0);\n\n  if (textElements.length === 0) {\n    return { text: '', setText: NOOP, element: null, elements: EMPTY, isConnected: false };\n  }\n\n  return {\n    text: textElements[0].getText(),\n    setText,\n    element: textElements[0],\n    elements: textElements,\n    isConnected: true,\n  };\n}\n","/**\n * useImageBinding - Bidirectional image URL binding between external inputs and canvas image elements.\n *\n * Links an external input to one or more canvas image elements by their `name` property.\n * Multiple elements can share the same name — `setImageUrl` updates all of them.\n * Changes flow both ways: input → canvas via `setImageUrl`, and canvas edits\n * propagate back through the element store re-render.\n *\n * @example\n * ```tsx\n * function LogoUpload() {\n *   const { imageUrl, setImageUrl, isConnected } = useImageBinding('logo');\n *   return (\n *     <input\n *       type=\"url\"\n *       value={imageUrl}\n *       onChange={(e) => setImageUrl(e.target.value)}\n *       disabled={!isConnected}\n *     />\n *   );\n * }\n * ```\n *\n * @module\n */\n\nimport { useMemo, useCallback, useRef } from 'react';\nimport { useElementsContext } from '../contexts/ElementsContext.js';\nimport { useCommandContext } from '../contexts/CommandContext.js';\nimport { ImageElement } from '../core/ImageElement.js';\nimport type { EditorElement } from '../contexts/EditorContext.js';\nimport { useDeadBindingWarning } from './useDeadBindingWarning.js';\n\n/** How the image fits the element bounds. */\nexport type ImageFitMode = 'cover' | 'contain';\n\n/** Options for {@link useImageBinding}. */\nexport interface ImageBindingOptions {\n  /** How the image fits the element bounds. Default: \"cover\". */\n  fit?: ImageFitMode;\n}\n\n/** Result returned by {@link useImageBinding}. */\nexport interface ImageBindingResult {\n  /** Current image URL (from first bound element). Empty string if disconnected. */\n  imageUrl: string;\n  /** Update image URL on all bound elements. No-op if disconnected. */\n  setImageUrl: (url: string) => void;\n  /** The first bound element, or null if no matching image element exists. */\n  element: EditorElement | null;\n  /** All bound image elements (empty array if disconnected). */\n  elements: readonly EditorElement[];\n  /** Whether at least one matching image element exists. */\n  isConnected: boolean;\n}\n\nconst NOOP = () => {};\nconst EMPTY: readonly EditorElement[] = [];\n\n/**\n * Calculate center-crop values so the visible area fills the original element bounds.\n */\nfunction coverCrop(\n  origWidth: number,\n  origHeight: number,\n  imageAspectRatio: number,\n) {\n  const placeholderAR = origWidth / origHeight;\n\n  if (imageAspectRatio >= placeholderAR) {\n    // Image is wider — match height, crop width\n    const frameHeight = origHeight;\n    const frameWidth = frameHeight * imageAspectRatio;\n    const cropWidth = origWidth / frameWidth;\n    return {\n      width: frameWidth,\n      height: frameHeight,\n      cropX: (1 - cropWidth) / 2,\n      cropY: 0,\n      cropWidth,\n      cropHeight: 1,\n    };\n  } else {\n    // Image is taller — match width, crop height\n    const frameWidth = origWidth;\n    const frameHeight = frameWidth / imageAspectRatio;\n    const cropHeight = origHeight / frameHeight;\n    return {\n      width: frameWidth,\n      height: frameHeight,\n      cropX: 0,\n      cropY: (1 - cropHeight) / 2,\n      cropWidth: 1,\n      cropHeight,\n    };\n  }\n}\n\n/**\n * Bind an external input to canvas image elements by their `name` property.\n *\n * Multiple elements can share the same name — `setImageUrl` updates all of them.\n * The image URL is read from the first matching element (render order).\n *\n * Must be used within an `EditorProvider`.\n *\n * @param name - The element name to bind to.\n * @param options - Optional configuration (fit mode, etc.).\n * @returns Image URL value, setter, element references, and connection status.\n */\nexport function useImageBinding(name: string, options?: ImageBindingOptions): ImageBindingResult {\n  const fit = options?.fit ?? 'cover';\n  const { elementStore, setElements } = useElementsContext();\n  const { executeElementUpdate } = useCommandContext();\n\n  const imageElements = useMemo(() => {\n    const all = elementStore.getAllByName(name);\n    return all.filter((el): el is ImageElement => el instanceof ImageElement);\n  }, [elementStore, name]);\n\n  // Capture the original placeholder dimensions once (from the first time we see each element).\n  // All subsequent image replacements fit within this fixed box.\n  const origDimsRef = useRef<Map<string, { width: number; height: number }>>(new Map());\n  for (const el of imageElements) {\n    if (!origDimsRef.current.has(el.id)) {\n      const td = el.transformData;\n      origDimsRef.current.set(el.id, {\n        width: td.width * td.cropWidth,\n        height: td.height * td.cropHeight,\n      });\n    }\n  }\n\n  // Use refs for values that change on every element update to keep setImageUrl stable.\n  // Without this, setImageUrl gets a new identity after every executeElementUpdate call,\n  // which causes infinite loops when used in useEffect dependency arrays.\n  const imageElementsRef = useRef(imageElements);\n  imageElementsRef.current = imageElements;\n  const executeRef = useRef(executeElementUpdate);\n  executeRef.current = executeElementUpdate;\n  const setElementsRef = useRef(setElements);\n  setElementsRef.current = setElements;\n\n  const setImageUrl = useCallback(\n    (url: string) => {\n      const currentElements = imageElementsRef.current;\n      const exec = executeRef.current;\n\n      for (const el of currentElements) {\n        const orig = origDimsRef.current.get(el.id);\n        if (!orig) continue;\n        const { width: origW, height: origH } = orig;\n\n        const cloned = el.clone() as ImageElement;\n        cloned.imageLoaded = false;\n        cloned.imageElement = null;\n        cloned.isCropping = false;\n        cloned.imageUrl = url;\n\n        if (fit === 'cover') {\n          cloned.preserveDimensions = true;\n\n          cloned.onLoadCallback = (loadedElement) => {\n            const imgAR = loadedElement.imageAspectRatio || 1;\n            const crop = coverCrop(origW, origH, imgAR);\n\n            loadedElement.transformData.width = crop.width;\n            loadedElement.transformData.height = crop.height;\n            loadedElement.transformData.cropX = crop.cropX;\n            loadedElement.transformData.cropY = crop.cropY;\n            loadedElement.transformData.cropWidth = crop.cropWidth;\n            loadedElement.transformData.cropHeight = crop.cropHeight;\n\n            // Single atomic update: command history + element store.\n            // This ensures auto-export only sees the final cropped state,\n            // not an intermediate unloaded state that would produce wrong mockups.\n            exec(el, loadedElement);\n          };\n        } else {\n          cloned.preserveDimensions = false;\n\n          cloned.onLoadCallback = (loadedElement) => {\n            const w = loadedElement.transformData.width;\n            const h = loadedElement.transformData.height;\n            const scale = Math.min(origW / w, origH / h, 1);\n            if (scale < 1) {\n              loadedElement.transformData.width = w * scale;\n              loadedElement.transformData.height = h * scale;\n            }\n            loadedElement.transformData.cropX = 0;\n            loadedElement.transformData.cropY = 0;\n            loadedElement.transformData.cropWidth = 1;\n            loadedElement.transformData.cropHeight = 1;\n\n            exec(el, loadedElement);\n          };\n        }\n\n        // Start loading — onLoadCallback will update the store via exec()\n        // once the image is ready with final dimensions/crop.\n        cloned.loadImage(url);\n      }\n    },\n    [fit], // Stable deps only — imageElements/executeElementUpdate/setElements accessed via refs\n  );\n\n  // Dev-only: a name that never matches produces a dead control with no-op\n  // setters — warn once the element set settles so a typo isn't silent.\n  useDeadBindingWarning('image', name, elementStore, imageElements.length > 0);\n\n  if (imageElements.length === 0) {\n    return { imageUrl: '', setImageUrl: NOOP, element: null, elements: EMPTY, isConnected: false };\n  }\n\n  return {\n    imageUrl: imageElements[0].imageUrl,\n    setImageUrl,\n    element: imageElements[0],\n    elements: imageElements,\n    isConnected: true,\n  };\n}\n","/**\n * useColorBinding - Bind an external color control to every element painted a given color.\n *\n * Unlike `useTextBinding` / `useImageBinding` (which bind by element `name`),\n * a color binding matches by VALUE: every element whose text color, shape\n * fill, path stroke color, or stroke-effect color equals the bound color is\n * updated together. This is how an editable template exposes \"Accent Color\" —\n * the designer picks a color once, and the buyer's swatch repaints every\n * element that used it.\n *\n * The hook tracks the *currently applied* color: after `setColor('#00FF00')`,\n * subsequent matches (and the next `setColor`) are computed against the new\n * color, so repeated changes keep following the same set of elements.\n *\n * @example\n * ```tsx\n * function AccentSwatch({ field }: { field: { color: string; label: string } }) {\n *   const { color, setColor, isConnected } = useColorBinding(field.color);\n *   return (\n *     <input\n *       type=\"color\"\n *       value={color}\n *       onChange={(e) => setColor(e.target.value)}\n *       disabled={!isConnected}\n *     />\n *   );\n * }\n * ```\n *\n * @module\n */\n\nimport { useMemo, useState, useCallback } from 'react';\nimport { useElementsContext } from '../contexts/ElementsContext.js';\nimport { useCommandContext } from '../contexts/CommandContext.js';\nimport type { EditorElement } from '../contexts/EditorContext.js';\n\n/** Result returned by {@link useColorBinding}. */\nexport interface ColorBindingResult {\n  /** The currently applied color (normalized uppercase hex). */\n  color: string;\n  /** Repaint all matching elements. No-op if the value is unchanged. */\n  setColor: (color: string) => void;\n  /** All elements currently matching the applied color. */\n  elements: readonly EditorElement[];\n  /** Whether at least one element currently carries the applied color. */\n  isConnected: boolean;\n}\n\nconst EMPTY: readonly EditorElement[] = [];\n\n/** Normalize any hex color to uppercase 6-digit form (#RGB → #RRGGBB). */\nfunction normalizeHex(color: string): string {\n  let hex = color.trim().toUpperCase();\n  if (hex.length === 4 && hex.startsWith('#')) {\n    hex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];\n  }\n  return hex;\n}\n\n/** The color-carrying slots a canvas element may have. */\ninterface ColorCarrier {\n  color?: unknown;\n  setColor?: (c: string) => void;\n  transformData?: { fillColor?: unknown; strokeColor?: unknown };\n  stroke?: { enabled?: boolean; color?: unknown };\n}\n\nfunction slotMatches(value: unknown, match: string): boolean {\n  return typeof value === 'string' && normalizeHex(value) === match;\n}\n\n/** Whether any color slot on the element equals `match` (normalized hex). */\nfunction elementMatchesColor(el: EditorElement, match: string): boolean {\n  const c = el as unknown as ColorCarrier;\n  return (\n    slotMatches(c.color, match) ||\n    slotMatches(c.transformData?.fillColor, match) ||\n    slotMatches(c.transformData?.strokeColor, match) ||\n    (c.stroke?.enabled === true && slotMatches(c.stroke.color, match))\n  );\n}\n\n/**\n * Repaint every matching slot on a clone of `el`. Returns the clone if any\n * slot matched, or null if the element doesn't carry the color.\n */\nfunction applyColorToClone(\n  el: EditorElement,\n  match: string,\n  newColor: string,\n): EditorElement | null {\n  if (!elementMatchesColor(el, match)) return null;\n\n  const cloned = el.clone() as EditorElement;\n  const src = el as unknown as ColorCarrier;\n  const dst = cloned as unknown as ColorCarrier;\n\n  // Text elements: use setColor so richText spans update too.\n  if (slotMatches(src.color, match)) {\n    if (typeof dst.setColor === 'function') {\n      dst.setColor(newColor);\n    } else {\n      dst.color = newColor;\n    }\n  }\n\n  // Shape/Path elements: fill and stroke colors live in transformData.\n  if (slotMatches(src.transformData?.fillColor, match)) {\n    dst.transformData = { ...dst.transformData, fillColor: newColor };\n  }\n  if (slotMatches(src.transformData?.strokeColor, match)) {\n    dst.transformData = { ...dst.transformData, strokeColor: newColor };\n  }\n\n  // Stroke effect (outline) color.\n  if (src.stroke?.enabled === true && slotMatches(src.stroke.color, match)) {\n    dst.stroke = { ...dst.stroke, color: newColor };\n  }\n\n  return cloned;\n}\n\n/**\n * Bind an external color control to all elements painted `originalColor`.\n *\n * Must be used within an `EditorProvider`.\n *\n * @param originalColor - The hex color to match (the template field's `color`).\n * @returns Applied color, setter, matching elements, and connection status.\n */\nexport function useColorBinding(originalColor: string): ColorBindingResult {\n  const { elementStore } = useElementsContext();\n  const { executeElementUpdate } = useCommandContext();\n\n  const [applied, setApplied] = useState(() => normalizeHex(originalColor));\n\n  // If the hook is re-bound to a different template field, restart tracking.\n  const [prevOriginal, setPrevOriginal] = useState(originalColor);\n  if (originalColor !== prevOriginal) {\n    setPrevOriginal(originalColor);\n    setApplied(normalizeHex(originalColor));\n  }\n\n  // ElementStore is immutable — every mutation hands the context a new store\n  // instance, so this memo recomputes whenever elements change.\n  const matching = useMemo(\n    () => elementStore.getAll().filter((el) => elementMatchesColor(el, applied)),\n    [elementStore, applied],\n  );\n\n  const setColor = useCallback(\n    (newColor: string) => {\n      const normalizedNew = normalizeHex(newColor);\n      if (normalizedNew === applied) return;\n\n      for (const el of elementStore.getAll()) {\n        const cloned = applyColorToClone(el, applied, newColor);\n        if (cloned) executeElementUpdate(el, cloned);\n      }\n      setApplied(normalizedNew);\n    },\n    [elementStore, applied, executeElementUpdate],\n  );\n\n  if (matching.length === 0) {\n    return { color: applied, setColor, elements: EMPTY, isConnected: false };\n  }\n\n  return { color: applied, setColor, elements: matching, isConnected: true };\n}\n","/**\n * useFontBinding - Bind an external font picker to canvas text elements.\n *\n * Links a control to one or more canvas TEXT elements by their `name` property\n * (same matching as `useTextBinding`). `setFontFamily` updates all of them and\n * loads the Google Font into the document, so a family the page hasn't used\n * yet still renders. This is how an editable template exposes a\n * designer-curated font choice (a `select` template field with\n * `property: 'fontFamily'`).\n *\n * Fonts must be on Google Fonts — the picker ecosystem is Google-only so\n * designs render identically across platforms (system fonts are deny-listed).\n *\n * @example\n * ```tsx\n * function FontPicker({ options }: { options: string[] }) {\n *   const { fontFamily, setFontFamily, isConnected } = useFontBinding('headline');\n *   if (!isConnected) return null;\n *   return (\n *     <select value={fontFamily} onChange={(e) => setFontFamily(e.target.value)}>\n *       {options.map((f) => <option key={f} value={f}>{f}</option>)}\n *     </select>\n *   );\n * }\n * ```\n *\n * @module\n */\n\nimport { useMemo, useCallback } from 'react';\nimport { useElementsContext } from '../contexts/ElementsContext.js';\nimport { useCommandContext } from '../contexts/CommandContext.js';\nimport { TextElement } from '../core/TextElement.js';\nimport type { EditorElement } from '../contexts/EditorContext.js';\nimport { FontAnalyzer } from '../utils/FontAnalyzer.js';\nimport { UnifiedFontService } from '../utils/UnifiedFontService.js';\nimport { useDeadBindingWarning } from './useDeadBindingWarning.js';\n\n/** Result returned by {@link useFontBinding}. */\nexport interface FontBindingResult {\n  /** Current font family (from first bound element). Empty string if disconnected. */\n  fontFamily: string;\n  /** Update the font family on all bound text elements. No-op if disconnected. */\n  setFontFamily: (fontFamily: string) => void;\n  /** The first bound element, or null if no matching text element exists. */\n  element: EditorElement | null;\n  /** All bound text elements (empty array if disconnected). */\n  elements: readonly EditorElement[];\n  /** Whether at least one matching text element exists. */\n  isConnected: boolean;\n}\n\nconst NOOP = () => {};\nconst EMPTY: readonly EditorElement[] = [];\n\n/**\n * Bind a font control to canvas text elements by their `name` property.\n *\n * Must be used within an `EditorProvider`.\n *\n * @param name - The element name to bind to.\n * @returns Font family, setter, element references, and connection status.\n */\nexport function useFontBinding(name: string): FontBindingResult {\n  const { elementStore } = useElementsContext();\n  const { executeElementUpdate } = useCommandContext();\n\n  const textElements = useMemo(() => {\n    const all = elementStore.getAllByName(name);\n    return all.filter((el): el is TextElement => el instanceof TextElement);\n  }, [elementStore, name]);\n\n  const setFontFamily = useCallback(\n    (newFamily: string) => {\n      // Make sure the family is actually available in the document — a buyer\n      // picking a font the page never used would otherwise see the fallback.\n      UnifiedFontService.loadGoogleFontByName(newFamily);\n\n      for (const el of textElements) {\n        if (el.fontFamily === newFamily) continue;\n        // Old-family glyph caches are per-font and large on iOS — drop them\n        // when switching, same as the editor's own font picker.\n        FontAnalyzer.clearCache(el.fontFamily);\n        const cloned = el.clone() as TextElement;\n        cloned.fontFamily = newFamily;\n        executeElementUpdate(el, cloned);\n      }\n    },\n    [textElements, executeElementUpdate],\n  );\n\n  useDeadBindingWarning('font', name, elementStore, textElements.length > 0);\n\n  if (textElements.length === 0) {\n    return { fontFamily: '', setFontFamily: NOOP, element: null, elements: EMPTY, isConnected: false };\n  }\n\n  return {\n    fontFamily: textElements[0].fontFamily,\n    setFontFamily,\n    element: textElements[0],\n    elements: textElements,\n    isConnected: true,\n  };\n}\n","/**\n * useElementByName - Look up an element by its `name` property.\n *\n * General-purpose complement to {@link useElementById}. Returns the first\n * element whose `name` matches, following render order.\n *\n * @example\n * ```tsx\n * function ElementInspector({ elementName }: { elementName: string }) {\n *   const element = useElementByName(elementName);\n *   if (!element) return <p>Element not found</p>;\n *   return <p>Position: ({element.x}, {element.y})</p>;\n * }\n * ```\n *\n * @module\n */\n\nimport { useElementsContext } from '../contexts/ElementsContext.js';\nimport type { EditorElement } from '../contexts/EditorContext.js';\n\n/**\n * Returns the first element matching the given name, or null.\n *\n * Must be used within an `EditorProvider`.\n *\n * @param name - The element name to look up, or null to skip the lookup.\n * @returns The matching element, or null if no element matches.\n */\nexport function useElementByName(name: string | null): EditorElement | null {\n  const { elementStore } = useElementsContext();\n  if (!name) return null;\n  return elementStore.getByName(name) ?? null;\n}\n","/**\n * Template fields — the manifest that turns a saved design into an editable template.\n *\n * An editable template is a saved canvas state plus a list of {@link TemplateField}s\n * describing which parts a buyer may change. Text and image fields reference\n * elements by their `name` property (the same names `useTextBinding` /\n * `useImageBinding` bind to); color fields match by value (`useColorBinding`).\n *\n * The fields are stored ON the state document itself under the\n * {@link TEMPLATE_FIELDS_KEY} key (`personalization`) — the same convention\n * snowcone.app's own editor uses, so a template authored in a host app\n * round-trips through Edit / Remix / the PDP unchanged:\n *\n * ```json\n * {\n *   \"elements\": [...],\n *   \"artboards\": [...],\n *   \"activeArtboard\": \"Front\",\n *   \"personalization\": [\n *     { \"type\": \"text\", \"name\": \"headline\", \"label\": \"Your name\" }\n *   ]\n * }\n * ```\n *\n * Write with {@link withTemplateFields}, read back with {@link readTemplateFields}.\n *\n * @module\n */\n\nimport { z } from 'zod';\nimport type { ImageFitMode } from '../hooks/useImageBinding.js';\n\n/** A buyer-editable text slot, bound to elements by their `name` property. */\nexport interface TemplateTextField {\n  type: 'text';\n  /** Element name (matches canvas layer `name` property). */\n  name: string;\n  /** Label shown to the buyer (e.g. \"Your name\"). */\n  label: string;\n  /** Placeholder text for the input. */\n  placeholder?: string;\n  /**\n   * Designer's length limit for the buyer's text — long names overflow fixed\n   * layouts. Intent, not enforcement: your control applies it (an input's\n   * `maxLength`); the canvas itself doesn't truncate.\n   */\n  maxLength?: number;\n  /** Optional grouping label — consecutive fields sharing a group render together. */\n  group?: string;\n}\n\n/** A buyer-swappable image slot, bound to elements by their `name` property. */\nexport interface TemplateImageField {\n  type: 'image';\n  /** Element name (matches canvas layer `name` property). */\n  name: string;\n  /** Label shown to the buyer (e.g. \"Upload your logo\"). */\n  label: string;\n  /** Placeholder text for the input. */\n  placeholder?: string;\n  /** How the buyer's image fits the original element bounds. Default: \"cover\". */\n  fit?: ImageFitMode;\n  /** Optional grouping label — consecutive fields sharing a group render together. */\n  group?: string;\n}\n\n/** A buyer-editable color, matched by value across all elements that use it. */\nexport interface TemplateColorField {\n  type: 'color';\n  /** Original hex color to match (e.g. \"#FF0000\"). */\n  color: string;\n  /** Label shown to the buyer (e.g. \"Accent color\"). */\n  label: string;\n  /** Optional grouping label — consecutive fields sharing a group render together. */\n  group?: string;\n}\n\n/**\n * A pick-one choice over designer-authored options — \"one of these 3 badges\",\n * a curated font list, preset text variants. Binds to elements by `name` and\n * swaps ONE property on them, chosen by `property`:\n *\n * - `'text'`       → apply via `useTextBinding(name).setText(value)`\n * - `'imageUrl'`   → apply via `useImageBinding(name).setImageUrl(value)`\n * - `'fontFamily'` → apply via `useFontBinding(name).setFontFamily(value)`\n *   (values must be Google Fonts families)\n */\nexport interface TemplateSelectField {\n  type: 'select';\n  /** Element name (matches canvas layer `name` property). */\n  name: string;\n  /** Label shown to the buyer (e.g. \"Badge\"). */\n  label: string;\n  /** Which property of the bound element(s) the chosen value sets. */\n  property: 'text' | 'imageUrl' | 'fontFamily';\n  /** The designer-authored choices, in display order. */\n  options: Array<{ label: string; value: string }>;\n  /** Optional grouping label — consecutive fields sharing a group render together. */\n  group?: string;\n}\n\n/** One buyer-editable aspect of a template. */\nexport type TemplateField =\n  | TemplateTextField\n  | TemplateImageField\n  | TemplateColorField\n  | TemplateSelectField;\n\n/**\n * The key template fields are stored under on the state document.\n * Kept as `personalization` for compatibility with designs saved on snowcone.app.\n */\nexport const TEMPLATE_FIELDS_KEY = 'personalization';\n\nconst templateFieldSchema = z.discriminatedUnion('type', [\n  z.object({\n    type: z.literal('text'),\n    name: z.string().min(1),\n    label: z.string(),\n    placeholder: z.string().optional(),\n    maxLength: z.number().int().positive().optional(),\n    group: z.string().optional(),\n  }),\n  z.object({\n    type: z.literal('image'),\n    name: z.string().min(1),\n    label: z.string(),\n    placeholder: z.string().optional(),\n    fit: z.union([z.literal('cover'), z.literal('contain')]).optional(),\n    group: z.string().optional(),\n  }),\n  z.object({\n    type: z.literal('color'),\n    color: z.string().min(1),\n    label: z.string(),\n    group: z.string().optional(),\n  }),\n  z.object({\n    type: z.literal('select'),\n    name: z.string().min(1),\n    label: z.string(),\n    property: z.union([z.literal('text'), z.literal('imageUrl'), z.literal('fontFamily')]),\n    options: z.array(z.object({ label: z.string(), value: z.string() })).min(1),\n    group: z.string().optional(),\n  }),\n]);\n\n/**\n * Read the template fields off a parsed state document.\n *\n * Accepts any JSON value — a `CanvasState` from `onChange`, a `CanvasStateV1`\n * document, or a raw `JSON.parse` of a stored state file. Legacy fields with\n * no `type` are normalized to text fields; malformed entries are dropped.\n * Returns `[]` when the document carries no fields (a plain, non-template design).\n */\nexport function readTemplateFields(state: unknown): TemplateField[] {\n  if (!state || typeof state !== 'object') return [];\n  const raw = (state as Record<string, unknown>)[TEMPLATE_FIELDS_KEY];\n  if (!Array.isArray(raw)) return [];\n\n  const fields: TemplateField[] = [];\n  for (const entry of raw) {\n    if (!entry || typeof entry !== 'object') continue;\n    const candidate = 'type' in entry ? entry : { ...entry, type: 'text' };\n    const parsed = templateFieldSchema.safeParse(candidate);\n    if (parsed.success) fields.push(parsed.data as TemplateField);\n  }\n  return fields;\n}\n\n/**\n * Attach template fields to a state document before persisting it.\n *\n * ```ts\n * onChange={(state) => setDraft(state)}\n * // …on save:\n * save(JSON.stringify(withTemplateFields(draft, fields)));\n * ```\n */\nexport function withTemplateFields<T extends object>(\n  state: T,\n  fields: TemplateField[],\n): T & { [TEMPLATE_FIELDS_KEY]: TemplateField[] } {\n  return { ...state, [TEMPLATE_FIELDS_KEY]: fields };\n}\n"],"names":["UndoRedoControls","undo","redo","canUndo","canRedo","useHistoryContext","jsxs","jsx","ToolbarButton","icons","logger","createLogger","useCommands","context","useEditor","executeElementUpdate","executeAddElement","executeRemoveElement","executeReorderElement","executeCommandBatch","executeCreateArtboard","executeDeleteArtboard","executeUpdateArtboard","clearHistory","useCallback","clearArtboardHistory","_artboardId","useSelectedElement","selectedElement","DEAD_BINDING_GRACE_MS","HOOK_NAME","SETTER_NAME","TARGET_KIND","warned","kindOf","el","TextElement","ImageElement","deadBindingWarning","kind","name","store","tag","dead","target","sameName","kinds","other","hint","named","available","useDeadBindingWarning","isConnected","useEffect","process","key","timer","NOOP","EMPTY","useTextBinding","elementStore","useElementsContext","useCommandContext","textElements","useMemo","setText","newText","cloned","coverCrop","origWidth","origHeight","imageAspectRatio","placeholderAR","frameHeight","frameWidth","cropWidth","cropHeight","useImageBinding","options","fit","setElements","imageElements","origDimsRef","useRef","td","imageElementsRef","executeRef","setElementsRef","setImageUrl","url","currentElements","exec","orig","origW","origH","loadedElement","imgAR","crop","w","scale","normalizeHex","color","hex","slotMatches","value","match","elementMatchesColor","c","_a","_b","_c","applyColorToClone","newColor","src","dst","useColorBinding","originalColor","applied","setApplied","useState","prevOriginal","setPrevOriginal","matching","setColor","normalizedNew","useFontBinding","setFontFamily","newFamily","UnifiedFontService","FontAnalyzer","useElementByName","TEMPLATE_FIELDS_KEY","templateFieldSchema","z.discriminatedUnion","z.object","z.literal","z.string","z.number","z.union","z.array","readTemplateFields","state","raw","fields","entry","candidate","parsed","withTemplateFields"],"mappings":"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"}