@snowcone-app/canvas 0.17.2 → 0.18.0

package/dist/{template-fields-Z9x13sjM.js → template-fields-DgoBtajp.js}

@@ -1,118 +1,143 @@
-import { useCallback as C, useEffect as et, useMemo as $, useRef as A, useState as _ } from "react";
-import { u as G, c as T, b as H, g as z } from "./EditorContext-CGkfmbgo.js";
-import { c as nt, y as P, T as B, I as J, z as ot } from "./FontAnalyzer-CLv7_msL.js";
-import { U as rt } from "./UnifiedFontService-Dsu5cwfT.js";
-import { a as it, o as E, b as h, n as at, l as b, u as L, c as st } from "./CanvasStateV1-BG2hEc3-.js";
-const X = nt("useCommands");
-function Bt() {
-  const t = G(), {
+import { jsxs as rt, jsx as _ } from "react/jsx-runtime";
+import { p as z, o as P, U as it } from "./MenuButton-CeoEAtzP.js";
+import { d as at, u as Q, c as T, b as $, g as L } from "./EditorContext-5QpqAhjh.js";
+import { useCallback as w, useEffect as st, useMemo as H, useRef as R, useState as X } from "react";
+import { c as ct, y as K, T as B, I as Z, z as lt } from "./FontAnalyzer-DIlqmyuf.js";
+import { a as dt, o as E, b as f, n as ft, l as b, u as V, c as ht } from "./CanvasStateV1-Bq48qhv5.js";
+const _t = () => {
+  const { undo: t, redo: e, canUndo: n, canRedo: o } = at();
+  return /* @__PURE__ */ rt("div", { className: "sc-undo-redo", style: { display: "inline-flex", gap: 4 }, children: [
+    /* @__PURE__ */ _(
+      z,
+      {
+        icon: P.undo,
+        onClick: t,
+        disabled: !n,
+        tooltip: "Undo",
+        "aria-label": "Undo"
+      }
+    ),
+    /* @__PURE__ */ _(
+      z,
+      {
+        icon: P.redo,
+        onClick: e,
+        disabled: !o,
+        tooltip: "Redo",
+        "aria-label": "Redo"
+      }
+    )
+  ] });
+}, j = ct("useCommands");
+function zt() {
+  const t = Q(), {
     undo: e,
     redo: n,
-    canUndo: r,
+    canUndo: o,
     canRedo: i,
-    executeElementUpdate: o,
+    executeElementUpdate: r,
     executeAddElement: a,
     executeRemoveElement: s,
     executeReorderElement: l,
     executeCommandBatch: c,
     executeCreateArtboard: m,
     executeDeleteArtboard: u,
-    executeUpdateArtboard: d
-  } = t, g = C(() => {
-    X.warn("[useCommands] clearHistory is not yet implemented in EditorContext");
-  }, []), N = C((k) => {
-    X.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext");
+    executeUpdateArtboard: h
+  } = t, g = w(() => {
+    j.warn("[useCommands] clearHistory is not yet implemented in EditorContext");
+  }, []), N = w((k) => {
+    j.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext");
   }, []);
   return {
     // Undo/Redo
     undo: e,
     redo: n,
-    canUndo: r,
+    canUndo: o,
     canRedo: i,
     // History management
     clearHistory: g,
     clearArtboardHistory: N,
     // Command execution
-    executeElementUpdate: o,
+    executeElementUpdate: r,
     executeAddElement: a,
     executeRemoveElement: s,
     executeReorderElement: l,
     executeCreateArtboard: m,
     executeDeleteArtboard: u,
-    executeUpdateArtboard: d,
+    executeUpdateArtboard: h,
     // Batch execution
     executeCommandBatch: c
   };
 }
-function Mt() {
-  const { selectedElement: t } = G();
+function Pt() {
+  const { selectedElement: t } = Q();
   return t ?? null;
 }
-const ct = 3e3, K = {
+const mt = 3e3, G = {
   text: "useTextBinding",
   image: "useImageBinding",
   font: "useFontBinding"
-}, lt = {
+}, ut = {
   text: "setText",
   image: "setImageUrl",
   font: "setFontFamily"
-}, ft = {
+}, gt = {
   text: "text",
   image: "image",
   font: "text"
-}, v = /* @__PURE__ */ new Set();
-function V(t) {
-  return t instanceof B ? "text" : t instanceof J ? "image" : "other";
+}, S = /* @__PURE__ */ new Set();
+function J(t) {
+  return t instanceof B ? "text" : t instanceof Z ? "image" : "other";
 }
-function ht(t, e, n) {
-  const r = `[${K[t]}]`, i = `the binding is dead (isConnected: false, ${lt[t]} is a no-op)`, o = ft[t], a = n.getAllByName(e);
+function pt(t, e, n) {
+  const o = `[${G[t]}]`, i = `the binding is dead (isConnected: false, ${ut[t]} is a no-op)`, r = gt[t], a = n.getAllByName(e);
   if (a.length > 0) {
-    const c = [...new Set(a.map(V))], m = o === "text" ? "image" : "text", u = c.length === 1 && c[0] === m ? ` Bind it with ${K[m]}("${e}") instead.` : "";
-    return `${r} the layer named "${e}" is ${c.join("/")}, not ${o} — ${i}.${u}`;
+    const c = [...new Set(a.map(J))], m = r === "text" ? "image" : "text", u = c.length === 1 && c[0] === m ? ` Bind it with ${G[m]}("${e}") instead.` : "";
+    return `${o} the layer named "${e}" is ${c.join("/")}, not ${r} — ${i}.${u}`;
   }
-  const s = n.getAll().filter((c) => c.name).map((c) => `"${c.name}" (${V(c)})`), l = s.length ? `Named layers on this canvas: ${s.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 `${r} no ${o} layer named "${e}" exists — ${i}. ${l}`;
+  const s = n.getAll().filter((c) => c.name).map((c) => `"${c.name}" (${J(c)})`), l = s.length ? `Named layers on this canvas: ${s.join(", ")}. Check the name for a typo.` : `No element on this canvas has a name — name one via design().${r}(…, { name: '${e}' }) or the element's \`name\` property.`;
+  return `${o} no ${r} layer named "${e}" exists — ${i}. ${l}`;
 }
-function M(t, e, n, r) {
-  et(() => {
+function U(t, e, n, o) {
+  st(() => {
     var a;
-    if (r || typeof P > "u" || ((a = P.env) == null ? void 0 : a.NODE_ENV) === "production") return;
+    if (o || typeof K > "u" || ((a = K.env) == null ? void 0 : a.NODE_ENV) === "production") return;
     const i = `${t}:${e}`;
-    if (v.has(i)) return;
-    const o = setTimeout(() => {
-      v.has(i) || (v.add(i), console.warn(ht(t, e, n)));
-    }, ct);
-    return () => clearTimeout(o);
-  }, [t, e, n, r]);
-}
-const dt = () => {
-}, mt = [];
-function Ut(t) {
-  const { elementStore: e } = T(), { executeElementUpdate: n } = H(), r = $(() => e.getAllByName(t).filter((a) => a instanceof B), [e, t]), i = C(
-    (o) => {
-      for (const a of r) {
+    if (S.has(i)) return;
+    const r = setTimeout(() => {
+      S.has(i) || (S.add(i), console.warn(pt(t, e, n)));
+    }, mt);
+    return () => clearTimeout(r);
+  }, [t, e, n, o]);
+}
+const yt = () => {
+}, bt = [];
+function Lt(t) {
+  const { elementStore: e } = T(), { executeElementUpdate: n } = $(), o = H(() => e.getAllByName(t).filter((a) => a instanceof B), [e, t]), i = w(
+    (r) => {
+      for (const a of o) {
         const s = a.clone();
-        s.setText(o), n(a, s);
+        s.setText(r), n(a, s);
       }
     },
-    [r, n]
+    [o, n]
   );
-  return M("text", t, e, r.length > 0), r.length === 0 ? { text: "", setText: dt, element: null, elements: mt, isConnected: !1 } : {
-    text: r[0].getText(),
+  return U("text", t, e, o.length > 0), o.length === 0 ? { text: "", setText: yt, element: null, elements: bt, isConnected: !1 } : {
+    text: o[0].getText(),
     setText: i,
-    element: r[0],
-    elements: r,
+    element: o[0],
+    elements: o,
     isConnected: !0
   };
 }
-const ut = () => {
-}, gt = [];
-function pt(t, e, n) {
-  const r = t / e;
-  if (n >= r) {
-    const i = e, o = i * n, a = t / o;
+const xt = () => {
+}, Ct = [];
+function wt(t, e, n) {
+  const o = t / e;
+  if (n >= o) {
+    const i = e, r = i * n, a = t / r;
     return {
-      width: o,
+      width: r,
       height: i,
       cropX: (1 - a) / 2,
       cropY: 0,
@@ -120,10 +145,10 @@ function pt(t, e, n) {
       cropHeight: 1
     };
   } else {
-    const i = t, o = i / n, a = e / o;
+    const i = t, r = i / n, a = e / r;
     return {
       width: i,
-      height: o,
+      height: r,
       cropX: 0,
       cropY: (1 - a) / 2,
       cropWidth: 1,
@@ -131,42 +156,42 @@ function pt(t, e, n) {
     };
   }
 }
-function Wt(t, e) {
-  const n = (e == null ? void 0 : e.fit) ?? "cover", { elementStore: r, setElements: i } = T(), { executeElementUpdate: o } = H(), a = $(() => r.getAllByName(t).filter((g) => g instanceof J), [r, t]), s = A(/* @__PURE__ */ new Map());
-  for (const d of a)
-    if (!s.current.has(d.id)) {
-      const g = d.transformData;
-      s.current.set(d.id, {
+function Xt(t, e) {
+  const n = (e == null ? void 0 : e.fit) ?? "cover", { elementStore: o, setElements: i } = T(), { executeElementUpdate: r } = $(), a = H(() => o.getAllByName(t).filter((g) => g instanceof Z), [o, t]), s = R(/* @__PURE__ */ new Map());
+  for (const h of a)
+    if (!s.current.has(h.id)) {
+      const g = h.transformData;
+      s.current.set(h.id, {
         width: g.width * g.cropWidth,
         height: g.height * g.cropHeight
       });
     }
-  const l = A(a);
+  const l = R(a);
   l.current = a;
-  const c = A(o);
-  c.current = o;
-  const m = A(i);
+  const c = R(r);
+  c.current = r;
+  const m = R(i);
   m.current = i;
-  const u = C(
-    (d) => {
+  const u = w(
+    (h) => {
       const g = l.current, N = c.current;
       for (const k of g) {
         const W = s.current.get(k.id);
         if (!W) continue;
         const { width: I, height: Y } = W, p = k.clone();
-        p.imageLoaded = !1, p.imageElement = null, p.isCropping = !1, p.imageUrl = d, n === "cover" ? (p.preserveDimensions = !0, p.onLoadCallback = (f) => {
-          const D = f.imageAspectRatio || 1, y = pt(I, Y, D);
-          f.transformData.width = y.width, f.transformData.height = y.height, f.transformData.cropX = y.cropX, f.transformData.cropY = y.cropY, f.transformData.cropWidth = y.cropWidth, f.transformData.cropHeight = y.cropHeight, N(k, f);
-        }) : (p.preserveDimensions = !1, p.onLoadCallback = (f) => {
-          const D = f.transformData.width, y = f.transformData.height, S = Math.min(I / D, Y / y, 1);
-          S < 1 && (f.transformData.width = D * S, f.transformData.height = y * S), f.transformData.cropX = 0, f.transformData.cropY = 0, f.transformData.cropWidth = 1, f.transformData.cropHeight = 1, N(k, f);
-        }), p.loadImage(d);
+        p.imageLoaded = !1, p.imageElement = null, p.isCropping = !1, p.imageUrl = h, n === "cover" ? (p.preserveDimensions = !0, p.onLoadCallback = (d) => {
+          const D = d.imageAspectRatio || 1, y = wt(I, Y, D);
+          d.transformData.width = y.width, d.transformData.height = y.height, d.transformData.cropX = y.cropX, d.transformData.cropY = y.cropY, d.transformData.cropWidth = y.cropWidth, d.transformData.cropHeight = y.cropHeight, N(k, d);
+        }) : (p.preserveDimensions = !1, p.onLoadCallback = (d) => {
+          const D = d.transformData.width, y = d.transformData.height, v = Math.min(I / D, Y / y, 1);
+          v < 1 && (d.transformData.width = D * v, d.transformData.height = y * v), d.transformData.cropX = 0, d.transformData.cropY = 0, d.transformData.cropWidth = 1, d.transformData.cropHeight = 1, N(k, d);
+        }), p.loadImage(h);
       }
     },
     [n]
     // Stable deps only — imageElements/executeElementUpdate/setElements accessed via refs
   );
-  return M("image", t, r, a.length > 0), a.length === 0 ? { imageUrl: "", setImageUrl: ut, element: null, elements: gt, isConnected: !1 } : {
+  return U("image", t, o, a.length > 0), a.length === 0 ? { imageUrl: "", setImageUrl: xt, element: null, elements: Ct, isConnected: !1 } : {
     imageUrl: a[0].imageUrl,
     setImageUrl: u,
     element: a[0],
@@ -174,164 +199,164 @@ function Wt(t, e) {
     isConnected: !0
   };
 }
-const yt = [];
-function R(t) {
+const kt = [];
+function A(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 x(t, e) {
-  return typeof t == "string" && R(t) === e;
+  return typeof t == "string" && A(t) === e;
 }
-function q(t, e) {
-  var r, i, o;
+function tt(t, e) {
+  var o, i, r;
   const n = t;
-  return x(n.color, e) || x((r = n.transformData) == null ? void 0 : r.fillColor, e) || x((i = n.transformData) == null ? void 0 : i.strokeColor, e) || ((o = n.stroke) == null ? void 0 : o.enabled) === !0 && x(n.stroke.color, e);
+  return x(n.color, e) || x((o = n.transformData) == null ? void 0 : o.fillColor, e) || x((i = n.transformData) == null ? void 0 : i.strokeColor, e) || ((r = n.stroke) == null ? void 0 : r.enabled) === !0 && x(n.stroke.color, e);
 }
-function bt(t, e, n) {
+function Et(t, e, n) {
   var a, s, l;
-  if (!q(t, e)) return null;
-  const r = t.clone(), i = t, o = r;
-  return x(i.color, e) && (typeof o.setColor == "function" ? o.setColor(n) : o.color = n), x((a = i.transformData) == null ? void 0 : a.fillColor, e) && (o.transformData = { ...o.transformData, fillColor: n }), x((s = i.transformData) == null ? void 0 : s.strokeColor, e) && (o.transformData = { ...o.transformData, strokeColor: n }), ((l = i.stroke) == null ? void 0 : l.enabled) === !0 && x(i.stroke.color, e) && (o.stroke = { ...o.stroke, color: n }), r;
-}
-function It(t) {
-  const { elementStore: e } = T(), { executeElementUpdate: n } = H(), [r, i] = _(() => R(t)), [o, a] = _(t);
-  t !== o && (a(t), i(R(t)));
-  const s = $(
-    () => e.getAll().filter((c) => q(c, r)),
-    [e, r]
-  ), l = C(
+  if (!tt(t, e)) return null;
+  const o = t.clone(), i = t, r = o;
+  return x(i.color, e) && (typeof r.setColor == "function" ? r.setColor(n) : r.color = n), x((a = i.transformData) == null ? void 0 : a.fillColor, e) && (r.transformData = { ...r.transformData, fillColor: n }), x((s = i.transformData) == null ? void 0 : s.strokeColor, e) && (r.transformData = { ...r.transformData, strokeColor: n }), ((l = i.stroke) == null ? void 0 : l.enabled) === !0 && x(i.stroke.color, e) && (r.stroke = { ...r.stroke, color: n }), o;
+}
+function Kt(t) {
+  const { elementStore: e } = T(), { executeElementUpdate: n } = $(), [o, i] = X(() => A(t)), [r, a] = X(t);
+  t !== r && (a(t), i(A(t)));
+  const s = H(
+    () => e.getAll().filter((c) => tt(c, o)),
+    [e, o]
+  ), l = w(
     (c) => {
-      const m = R(c);
-      if (m !== r) {
+      const m = A(c);
+      if (m !== o) {
         for (const u of e.getAll()) {
-          const d = bt(u, r, c);
-          d && n(u, d);
+          const h = Et(u, o, c);
+          h && n(u, h);
         }
         i(m);
       }
     },
-    [e, r, n]
+    [e, o, n]
   );
-  return s.length === 0 ? { color: r, setColor: l, elements: yt, isConnected: !1 } : { color: r, setColor: l, elements: s, isConnected: !0 };
-}
-const xt = () => {
-}, wt = [];
-function Yt(t) {
-  const { elementStore: e } = T(), { executeElementUpdate: n } = H(), r = $(() => e.getAllByName(t).filter((a) => a instanceof B), [e, t]), i = C(
-    (o) => {
-      rt.loadGoogleFontByName(o);
-      for (const a of r) {
-        if (a.fontFamily === o) continue;
-        ot.clearCache(a.fontFamily);
+  return s.length === 0 ? { color: o, setColor: l, elements: kt, isConnected: !1 } : { color: o, setColor: l, elements: s, isConnected: !0 };
+}
+const Tt = () => {
+}, Nt = [];
+function Vt(t) {
+  const { elementStore: e } = T(), { executeElementUpdate: n } = $(), o = H(() => e.getAllByName(t).filter((a) => a instanceof B), [e, t]), i = w(
+    (r) => {
+      it.loadGoogleFontByName(r);
+      for (const a of o) {
+        if (a.fontFamily === r) continue;
+        lt.clearCache(a.fontFamily);
         const s = a.clone();
-        s.fontFamily = o, n(a, s);
+        s.fontFamily = r, n(a, s);
       }
     },
-    [r, n]
+    [o, n]
   );
-  return M("font", t, e, r.length > 0), r.length === 0 ? { fontFamily: "", setFontFamily: xt, element: null, elements: wt, isConnected: !1 } : {
-    fontFamily: r[0].fontFamily,
+  return U("font", t, e, o.length > 0), o.length === 0 ? { fontFamily: "", setFontFamily: Tt, element: null, elements: Nt, isConnected: !1 } : {
+    fontFamily: o[0].fontFamily,
     setFontFamily: i,
-    element: r[0],
-    elements: r,
+    element: o[0],
+    elements: o,
     isConnected: !0
   };
 }
-function _t(t) {
+function jt(t) {
   const { elementStore: e } = T();
   return t ? e.getByName(t) ?? null : null;
 }
-const Ct = 1;
-function w(t) {
+const Dt = 1;
+function C(t) {
   return typeof t == "number" && Number.isFinite(t) ? Math.round(t * 100) / 100 : t;
 }
-function Q(t) {
+function et(t) {
   return {
     ...t,
-    ...t.x !== void 0 && { x: w(t.x) },
-    ...t.y !== void 0 && { y: w(t.y) },
-    ...t.width !== void 0 && { width: w(t.width) },
-    ...t.height !== void 0 && { height: w(t.height) },
-    ...t.rotation !== void 0 && { rotation: w(t.rotation) }
+    ...t.x !== void 0 && { x: C(t.x) },
+    ...t.y !== void 0 && { y: C(t.y) },
+    ...t.width !== void 0 && { width: C(t.width) },
+    ...t.height !== void 0 && { height: C(t.height) },
+    ...t.rotation !== void 0 && { rotation: C(t.rotation) }
   };
 }
-function kt(t) {
-  var r;
-  const e = (r = t.artboards) != null && r.length ? t.artboards : [{ name: "Front", width: 800, height: 800 }], n = e.map(() => []);
+function Rt(t) {
+  var o;
+  const e = (o = t.artboards) != null && o.length ? t.artboards : [{ name: "Front", width: 800, height: 800 }], n = e.map(() => []);
   for (const i of t.elements || []) {
-    const o = i == null ? void 0 : i.artboard, a = typeof o == "string" ? e.findIndex((s) => (s.name || "Front") === o) : -1;
-    n[a >= 0 ? a : 0].push(Et(i));
+    const r = i == null ? void 0 : i.artboard, a = typeof r == "string" ? e.findIndex((s) => (s.name || "Front") === r) : -1;
+    n[a >= 0 ? a : 0].push(At(i));
   }
   return {
-    schemaVersion: Ct,
-    artboards: e.map((i, o) => ({
-      id: `artboard-${o + 1}`,
+    schemaVersion: Dt,
+    artboards: e.map((i, r) => ({
+      id: `artboard-${r + 1}`,
       name: i.name || "Front",
       x: 0,
       y: 0,
-      width: w(i.width || 800),
-      height: w(i.height || 800),
+      width: C(i.width || 800),
+      height: C(i.height || 800),
       backgroundColor: i.backgroundColor || "transparent",
       // Pass the artboard's flag through — the server worker only paints the
       // background when this is true. Hardcoding `false` here silently dropped
       // explicitly-set artboard backgrounds from every realtime mockup while
       // the editor kept showing them (WYSIWYG drift).
       exportBackground: i.exportBackground ?? !1,
-      elements: n[o],
+      elements: n[r],
       distressTexture: i.distressTexture,
       imageMask: i.imageMask
     }))
   };
 }
-function Et(t) {
+function At(t) {
   const e = t.type || t.transformType;
   if (e === "image")
-    return Tt(t);
-  const { artboard: n, ...r } = t;
-  return Q({
-    ...r,
+    return $t(t);
+  const { artboard: n, ...o } = t;
+  return et({
+    ...o,
     type: e
   });
 }
-function Tt(t) {
+function $t(t) {
   var c;
-  const e = t.transformData || {}, n = t.masks && t.masks.length > 0, r = e.width || 0, i = e.height || 0, o = n ? r : r * (e.cropWidth ?? 1), a = n ? i : i * (e.cropHeight ?? 1), s = {
+  const e = t.transformData || {}, n = t.masks && t.masks.length > 0, o = e.width || 0, i = e.height || 0, r = n ? o : o * (e.cropWidth ?? 1), a = n ? i : i * (e.cropHeight ?? 1), s = {
     id: t.id,
     type: "image",
     x: t.x || 0,
     y: t.y || 0,
-    width: o,
+    width: r,
     height: a,
     rotation: t.rotation || 0,
     imageUrl: t.imageUrl,
     imageAspectRatio: t.imageAspectRatio
   };
-  return !n && (e.cropX !== 0 || e.cropY !== 0 || e.cropWidth !== 1 || e.cropHeight !== 1) && (s.cropX = e.cropX, s.cropY = e.cropY, s.cropWidth = e.cropWidth, s.cropHeight = e.cropHeight, s.needsCropPixelConversion = !0), e.flipHorizontal && (s.flipHorizontal = e.flipHorizontal), e.flipVertical && (s.flipVertical = e.flipVertical), e.borderRadius && (s.borderRadius = e.borderRadius), t.opacity !== void 0 && (s.opacity = t.opacity), t.distressEffect && (s.distressEffect = t.distressEffect), ((c = t.masks) == null ? void 0 : c.length) > 0 && (s.masks = t.masks), t.blendMode && (s.blendMode = t.blendMode), t.knockoutParts && (s.knockoutParts = t.knockoutParts), t.stroke && (s.stroke = t.stroke), Q(s);
+  return !n && (e.cropX !== 0 || e.cropY !== 0 || e.cropWidth !== 1 || e.cropHeight !== 1) && (s.cropX = e.cropX, s.cropY = e.cropY, s.cropWidth = e.cropWidth, s.cropHeight = e.cropHeight, s.needsCropPixelConversion = !0), e.flipHorizontal && (s.flipHorizontal = e.flipHorizontal), e.flipVertical && (s.flipVertical = e.flipVertical), e.borderRadius && (s.borderRadius = e.borderRadius), t.opacity !== void 0 && (s.opacity = t.opacity), t.distressEffect && (s.distressEffect = t.distressEffect), ((c = t.masks) == null ? void 0 : c.length) > 0 && (s.masks = t.masks), t.blendMode && (s.blendMode = t.blendMode), t.knockoutParts && (s.knockoutParts = t.knockoutParts), t.stroke && (s.stroke = t.stroke), et(s);
 }
-const j = "center", Z = Symbol.for("snowcone.canvas.layerToken");
-function zt(t) {
-  return typeof t == "object" && t !== null && t[Z] === !0 && typeof t.name == "string" && (t.kind === "text" || t.kind === "image");
+const q = "center", nt = Symbol.for("snowcone.canvas.layerToken");
+function Gt(t) {
+  return typeof t == "object" && t !== null && t[nt] === !0 && typeof t.name == "string" && (t.kind === "text" || t.kind === "image");
 }
-function Nt(t, e) {
-  return Object.freeze({ kind: t, name: e, [Z]: !0 });
+function Ht(t, e) {
+  return Object.freeze({ kind: t, name: e, [nt]: !0 });
 }
 function O(t) {
   const e = t.transformType;
   return e === "image" ? "image" : e === "shape" || e === "group" || e === "path" ? null : "text";
 }
-function Dt(t) {
+function vt(t) {
   return t === "top-left" || t === "left" || t === "bottom-left" ? "left" : t === "top-right" || t === "right" || t === "bottom-right" ? "right" : "center";
 }
-function At(t) {
+function St(t) {
   return t === "top-left" || t === "top" || t === "top-right" ? "top" : t === "bottom-left" || t === "bottom" || t === "bottom-right" ? "bottom" : "middle";
 }
-function F(t, e, n, r, i, o) {
-  const a = Dt(t), s = At(t), l = a === "left" ? e / 2 + o : a === "right" ? r - e / 2 - o : r / 2, c = s === "top" ? n / 2 + o : s === "bottom" ? i - n / 2 - o : i / 2;
+function F(t, e, n, o, i, r) {
+  const a = vt(t), s = St(t), l = a === "left" ? e / 2 + r : a === "right" ? o - e / 2 - r : o / 2, c = s === "top" ? n / 2 + r : s === "bottom" ? i - n / 2 - r : i / 2;
   return { x: l, y: c };
 }
-function Rt(t, e, n) {
-  const r = e / n;
-  if (t >= r) {
+function Ft(t, e, n) {
+  const o = e / n;
+  if (t >= o) {
     const a = n * t, s = e / a;
     return {
       width: a,
@@ -342,17 +367,17 @@ function Rt(t, e, n) {
       cropHeight: 1
     };
   }
-  const i = e / t, o = n / i;
+  const i = e / t, r = n / i;
   return {
     width: e,
     height: i,
     cropX: 0,
-    cropY: (1 - o) / 2,
+    cropY: (1 - r) / 2,
     cropWidth: 1,
-    cropHeight: o
+    cropHeight: r
   };
 }
-class U {
+class M {
   constructor(e) {
     if (this.els = [], this.idCounter = 0, !(e.width > 0) || !(e.height > 0))
       throw new Error("design(): artboard width and height must be positive numbers");
@@ -377,25 +402,25 @@ class U {
     const n = e.artboards.find((i) => i.name === e.activeArtboard) ?? e.artboards[0];
     if (!n)
       throw new Error("DesignBuilder.fromState(): state has no artboards");
-    const r = new U({
+    const o = new M({
       name: n.name,
       width: n.width,
       height: n.height,
       backgroundColor: n.backgroundColor
     });
     for (const i of e.elements)
-      i.artboard && i.artboard !== n.name || r.els.push({ ...i });
-    return r;
+      i.artboard && i.artboard !== n.name || o.els.push({ ...i });
+    return o;
   }
   nextId(e) {
     return `${e}-${++this.idCounter}`;
   }
   background(e, n = {}) {
-    const { width: r, height: i } = this.artboard;
-    let o;
+    const { width: o, height: i } = this.artboard;
+    let r;
     if (n.aspectRatio && n.aspectRatio > 0) {
-      const s = Rt(n.aspectRatio, r, i);
-      o = {
+      const s = Ft(n.aspectRatio, o, i);
+      r = {
         type: "image",
         width: s.width,
         height: s.height,
@@ -408,9 +433,9 @@ class U {
         borderRadius: 0
       };
     } else
-      o = {
+      r = {
         type: "image",
-        width: r,
+        width: o,
         height: i,
         cropX: 0,
         cropY: 0,
@@ -423,19 +448,19 @@ class U {
     const a = {
       id: this.nextId("bg"),
       transformType: "image",
-      x: r / 2,
+      x: o / 2,
       y: i / 2,
       rotation: 0,
       opacity: n.opacity ?? 1,
       imageUrl: e,
       imageAspectRatio: n.aspectRatio,
-      transformData: o,
+      transformData: r,
       name: n.name ?? "Background"
     };
     return this.els.unshift(a), this;
   }
   image(e, n = {}) {
-    const { width: r, height: i } = this.artboard, o = n.width ?? Math.round(r / 3), a = n.height ?? (n.aspectRatio ? Math.round(o / n.aspectRatio) : o), { x: s, y: l } = F(n.anchor ?? j, o, a, r, i, n.padding ?? 0), c = {
+    const { width: o, height: i } = this.artboard, r = n.width ?? Math.round(o / 3), a = n.height ?? (n.aspectRatio ? Math.round(r / n.aspectRatio) : r), { x: s, y: l } = F(n.anchor ?? q, r, a, o, i, n.padding ?? 0), c = {
       id: this.nextId("img"),
       transformType: "image",
       x: s,
@@ -446,7 +471,7 @@ class U {
       imageAspectRatio: n.aspectRatio,
       transformData: {
         type: "image",
-        width: o,
+        width: r,
         height: a,
         cropX: 0,
         cropY: 0,
@@ -461,14 +486,14 @@ class U {
     return this.els.push(c), this;
   }
   text(e, n = {}) {
-    const { width: r, height: i } = this.artboard, o = n.fontSize ?? Math.round(this.artboard.height / 12), { x: a, y: s } = F(n.anchor ?? "top", 0, o, r, i, n.padding ?? Math.round(i / 20)), l = {
+    const { width: o, height: i } = this.artboard, r = n.fontSize ?? Math.round(this.artboard.height / 12), { x: a, y: s } = F(n.anchor ?? "top", 0, r, o, i, n.padding ?? Math.round(i / 20)), l = {
       id: this.nextId("text"),
       transformType: "custom",
       x: a,
       y: s,
       rotation: n.rotation ?? 0,
       text: e,
-      fontSize: o,
+      fontSize: r,
       fontFamily: n.fontFamily ?? "Anton",
       color: n.color ?? "#ffffff",
       textAlign: n.textAlign ?? "center",
@@ -496,21 +521,21 @@ class U {
   layer(e) {
     const n = this.els.find((i) => i.name === e);
     if (!n) {
-      const i = this.layerNamesOfKind("text"), o = this.layerNamesOfKind("image");
-      throw new z(
+      const i = this.layerNamesOfKind("text"), r = this.layerNamesOfKind("image");
+      throw new L(
         "E_LAYER_NOT_FOUND",
-        `no layer "${e}" in this design. Text layers: ${JSON.stringify(i)}; image layers: ${JSON.stringify(o)}. Fix the name, or add the layer first — e.g. design(…).text('…', { name: '${e}' }).`,
-        { layerName: e, validNames: [...i, ...o], textNames: i, imageNames: o, docSlug: "embed-mode" }
+        `no layer "${e}" in this design. Text layers: ${JSON.stringify(i)}; image layers: ${JSON.stringify(r)}. Fix the name, or add the layer first — e.g. design(…).text('…', { name: '${e}' }).`,
+        { layerName: e, validNames: [...i, ...r], textNames: i, imageNames: r, docSlug: "embed-mode" }
       );
     }
-    const r = O(n);
-    if (!r)
-      throw new z(
+    const o = O(n);
+    if (!o)
+      throw new L(
         "E_LAYER_WRONG_KIND",
         `layer "${e}" is a ${n.transformType} element — only text and image layers are bindable. Bindable layers: ${JSON.stringify([...this.layerNamesOfKind("text"), ...this.layerNamesOfKind("image")])}.`,
         { layerName: e, actualType: n.transformType, docSlug: "embed-mode" }
       );
-    return Nt(r, e);
+    return Ht(o, e);
   }
   /** Names of bindable layers of one kind, in stack order. @internal */
   layerNamesOfKind(e) {
@@ -518,7 +543,7 @@ class U {
   }
   /** An anchored vector shape. */
   shape(e, n = {}) {
-    const { width: r, height: i } = this.artboard, o = n.size ?? Math.round(r / 6), a = typeof o == "number" ? o : o.width, s = typeof o == "number" ? o : o.height, { x: l, y: c } = F(n.anchor ?? j, a, s, r, i, n.padding ?? 0), m = {
+    const { width: o, height: i } = this.artboard, r = n.size ?? Math.round(o / 6), a = typeof r == "number" ? r : r.width, s = typeof r == "number" ? r : r.height, { x: l, y: c } = F(n.anchor ?? q, a, s, o, i, n.padding ?? 0), m = {
       type: "shape",
       shapeType: e,
       width: a,
@@ -565,78 +590,79 @@ class U {
   /** Server-render payload for `RenderSession.renderState(placement, …)`.
    *  Equivalent to `serializeStateForServer(design.toJSON())`. */
   toServerRequest() {
-    return kt(this.toJSON());
+    return Rt(this.toJSON());
   }
 }
-function Pt(t) {
-  return new U(t);
+function Jt(t) {
+  return new M(t);
 }
-function Lt(t) {
+function qt(t) {
   return O(t);
 }
-const tt = "personalization", $t = it("type", [
+const ot = "personalization", Ot = dt("type", [
   E({
     type: b("text"),
-    name: h().min(1),
-    label: h(),
-    placeholder: h().optional(),
-    maxLength: at().int().positive().optional(),
-    group: h().optional()
+    name: f().min(1),
+    label: f(),
+    placeholder: f().optional(),
+    maxLength: ft().int().positive().optional(),
+    group: f().optional()
   }),
   E({
     type: b("image"),
-    name: h().min(1),
-    label: h(),
-    placeholder: h().optional(),
-    fit: L([b("cover"), b("contain")]).optional(),
-    group: h().optional()
+    name: f().min(1),
+    label: f(),
+    placeholder: f().optional(),
+    fit: V([b("cover"), b("contain")]).optional(),
+    group: f().optional()
   }),
   E({
     type: b("color"),
-    color: h().min(1),
-    label: h(),
-    group: h().optional()
+    color: f().min(1),
+    label: f(),
+    group: f().optional()
   }),
   E({
     type: b("select"),
-    name: h().min(1),
-    label: h(),
-    property: L([b("text"), b("imageUrl"), b("fontFamily")]),
-    options: st(E({ label: h(), value: h() })).min(1),
-    group: h().optional()
+    name: f().min(1),
+    label: f(),
+    property: V([b("text"), b("imageUrl"), b("fontFamily")]),
+    options: ht(E({ label: f(), value: f() })).min(1),
+    group: f().optional()
   })
 ]);
-function Xt(t) {
+function Qt(t) {
   if (!t || typeof t != "object") return [];
-  const e = t[tt];
+  const e = t[ot];
   if (!Array.isArray(e)) return [];
   const n = [];
-  for (const r of e) {
-    if (!r || typeof r != "object") continue;
-    const i = "type" in r ? r : { ...r, type: "text" }, o = $t.safeParse(i);
-    o.success && n.push(o.data);
+  for (const o of e) {
+    if (!o || typeof o != "object") continue;
+    const i = "type" in o ? o : { ...o, type: "text" }, r = Ot.safeParse(i);
+    r.success && n.push(r.data);
   }
   return n;
 }
-function Kt(t, e) {
-  return { ...t, [tt]: e };
+function Zt(t, e) {
+  return { ...t, [ot]: e };
 }
 export {
-  Ct as C,
-  U as D,
-  tt as T,
-  Bt as a,
-  _t as b,
-  Yt as c,
-  Pt as d,
-  Wt as e,
-  Mt as f,
-  Ut as g,
-  zt as i,
-  Lt as l,
-  Xt as r,
-  kt as s,
-  It as u,
-  Kt as w
+  Dt as C,
+  M as D,
+  ot as T,
+  _t as U,
+  zt as a,
+  jt as b,
+  Vt as c,
+  Jt as d,
+  Xt as e,
+  Pt as f,
+  Lt as g,
+  Gt as i,
+  qt as l,
+  Qt as r,
+  Rt as s,
+  Kt as u,
+  Zt as w
 };
-//# sourceMappingURL=template-fields-Z9x13sjM.js.map
+//# sourceMappingURL=template-fields-DgoBtajp.js.map