@snowcone-app/canvas 0.13.1 → 0.15.0

package/dist/{template-fields-IgDV7PRY.js → template-fields-coO73lV3.js}

@@ -1,29 +1,29 @@
 import { c as nt, y as K, z as Oe, I as Ht, T as Pt, C as Ye } from "./HybridHistoryManager-NL3zyEl4.js";
-import { jsxs as Z, jsx as w, Fragment as de } from "react/jsx-runtime";
-import { useCallback as P, useMemo as ot, useRef as F, useEffect as C, Component as Xe, useState as _, forwardRef as ue, useImperativeHandle as Ve } from "react";
-import { u as fe, T as _t, E as je, c as dt, b as At } from "./ThemeContext-Cl1JPVLZ.js";
-import { ag as te, ah as ee, a8 as Ke, a9 as re, a5 as Ge, O as qe, x as Je, y as Qe, H as Ze, G as _e, k as tr, q as er, a3 as rr, R as ne, s as nr, l as or, t as ar, r as ir, v as sr, u as cr, g as lr, X as dr, N as ur, a as fr, n as hr, ai as mr } from "./validation-BpmNOvuY.js";
+import { jsxs as Z, jsx as w, Fragment as ue } from "react/jsx-runtime";
+import { useCallback as P, useMemo as ot, useRef as M, useEffect as C, Component as Xe, useState as _, forwardRef as fe, useImperativeHandle as Ve } from "react";
+import { u as Wt, T as te, E as je, c as dt, b as At } from "./ThemeContext-Cl1JPVLZ.js";
+import { aq as ee, ar as re, ag as Ke, ah as ne, ad as Ge, W as qe, J as Je, K as Qe, Q as Ze, O as _e, p as tr, z as er, ab as rr, Y as oe, F as nr, q as or, G as ar, r as sr, v as ir, u as cr, g as lr, a2 as dr, V as ur, a as fr, w as hr, as as mr } from "./validation-BahKiJWj.js";
 import { C as Tt, E as gr } from "./ImportManager-eotl7r5d.js";
-import { d as pr, o as ct, s as $, n as br, l as Y, u as oe, a as yr } from "./schemas-B4UXytQB.js";
-const ae = nt("useCommands");
+import { a as pr, o as ct, b as $, n as br, l as Y, u as ae, c as yr } from "./CanvasStateV1-BQD8fCBU.js";
+const se = nt("useCommands");
 function xr() {
-  const e = fe(), {
+  const e = Wt(), {
     undo: t,
     redo: r,
     canUndo: o,
     canRedo: n,
     executeElementUpdate: a,
-    executeAddElement: i,
-    executeRemoveElement: s,
+    executeAddElement: s,
+    executeRemoveElement: i,
     executeReorderElement: c,
     executeCommandBatch: d,
     executeCreateArtboard: x,
     executeDeleteArtboard: I,
     executeUpdateArtboard: R
   } = e, k = P(() => {
-    ae.warn("[useCommands] clearHistory is not yet implemented in EditorContext");
+    se.warn("[useCommands] clearHistory is not yet implemented in EditorContext");
   }, []), T = P((p) => {
-    ae.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext");
+    se.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext");
   }, []);
   return {
     // Undo/Redo
@@ -36,8 +36,8 @@ function xr() {
     clearArtboardHistory: T,
     // Command execution
     executeElementUpdate: a,
-    executeAddElement: i,
-    executeRemoveElement: s,
+    executeAddElement: s,
+    executeRemoveElement: i,
     executeReorderElement: c,
     executeCreateArtboard: x,
     executeDeleteArtboard: I,
@@ -50,9 +50,9 @@ const vr = () => {
   const { undo: e, redo: t, canUndo: r, canRedo: o } = xr();
   return /* @__PURE__ */ Z("div", { className: "sc-undo-redo", style: { display: "inline-flex", gap: 4 }, children: [
     /* @__PURE__ */ w(
-      te,
+      ee,
       {
-        icon: ee.undo,
+        icon: re.undo,
         onClick: e,
         disabled: !r,
         tooltip: "Undo",
@@ -60,9 +60,9 @@ const vr = () => {
       }
     ),
     /* @__PURE__ */ w(
-      te,
+      ee,
       {
-        icon: ee.redo,
+        icon: re.redo,
         onClick: t,
         disabled: !o,
         tooltip: "Redo",
@@ -82,14 +82,14 @@ function wr() {
     ArtboardTabs: tr,
     ContextualToolbars: er,
     ZoomControls: rr,
-    MenuButton: ne,
+    MenuButton: oe,
     CropPanel: nr
-  }), re("add-element-menu", {
-    component: ne,
+  }), ne("add-element-menu", {
+    component: oe,
     label: "Add Element",
     icon: "gravity-ui:plus",
     position: "topbar"
-  }), re("undo-redo-controls", {
+  }), ne("undo-redo-controls", {
     component: vr,
     label: "Undo / Redo",
     icon: "lucide:undo-2",
@@ -97,7 +97,7 @@ function wr() {
   }));
 }
 function wt({ ids: e }) {
-  return !e || e.length === 0 ? null : /* @__PURE__ */ w(de, { children: e.map((t) => {
+  return !e || e.length === 0 ? null : /* @__PURE__ */ w(ue, { children: e.map((t) => {
     var n;
     if (t === lt) return null;
     const r = Ge(t);
@@ -112,10 +112,10 @@ function wt({ ids: e }) {
 function Er({ kit: e, canvas: t }) {
   var I, R, k, T;
   wr();
-  const r = e.layout.slots, o = !!((I = r.topbar) != null && I.some((p) => p !== lt)), n = !!((R = r.left) != null && R.some((p) => p !== lt)), a = !!((k = r.right) != null && k.some((p) => p !== lt)), i = !!((T = r.bottombar) != null && T.some((p) => p !== lt)), s = ot(
-    () => !o && !n && !a && !i,
-    [o, n, a, i]
-  ), c = F(null), d = o || n || a || i, x = F(!1);
+  const r = e.layout.slots, o = !!((I = r.topbar) != null && I.some((p) => p !== lt)), n = !!((R = r.left) != null && R.some((p) => p !== lt)), a = !!((k = r.right) != null && k.some((p) => p !== lt)), s = !!((T = r.bottombar) != null && T.some((p) => p !== lt)), i = ot(
+    () => !o && !n && !a && !s,
+    [o, n, a, s]
+  ), c = M(null), d = o || n || a || s, x = M(!1);
   return C(() => {
     var b;
     if (typeof K > "u" || ((b = K.env) == null ? void 0 : b.NODE_ENV) !== "development" || !d) return;
@@ -131,11 +131,11 @@ function Er({ kit: e, canvas: t }) {
       for (const v of E) N(v.contentRect.width);
     });
     return S.observe(p), () => S.disconnect();
-  }, [d, e.name]), s ? /* @__PURE__ */ w(de, { children: t }) : /* @__PURE__ */ Z("div", { ref: c, className: "sc-kit-layout", style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
+  }, [d, e.name]), i ? /* @__PURE__ */ w(ue, { children: t }) : /* @__PURE__ */ Z("div", { ref: c, className: "sc-kit-layout", style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
     o && /* @__PURE__ */ w(
       "div",
       {
-        className: "sc-kit-topbar toolbar",
+        className: "sc-kit-topbar sc-toolbar",
         style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", flexShrink: 0 },
         children: /* @__PURE__ */ w(wt, { ids: r.topbar })
       }
@@ -145,10 +145,10 @@ function Er({ kit: e, canvas: t }) {
       /* @__PURE__ */ w("div", { className: "sc-kit-canvas", style: { flex: 1, minWidth: 0, position: "relative" }, children: t }),
       a && /* @__PURE__ */ w("div", { className: "sc-kit-right", style: { flexShrink: 0, overflow: "auto" }, children: /* @__PURE__ */ w(wt, { ids: r.right }) })
     ] }),
-    i && /* @__PURE__ */ w(
+    s && /* @__PURE__ */ w(
       "div",
       {
-        className: "sc-kit-bottombar toolbar",
+        className: "sc-kit-bottombar sc-toolbar",
         style: { display: "flex", alignItems: "center", gap: 8, flexShrink: 0 },
         children: /* @__PURE__ */ w(wt, { ids: r.bottombar })
       }
@@ -238,12 +238,12 @@ class kr extends Xe {
 }
 const Sr = nt("useAutoExport");
 function Rr(e) {
-  const { config: t, historyManager: r, artboards: o, elements: n, onExport: a, onExportScheduled: i, isCanvasReady: s = !1 } = e, c = F(null), d = F(!1), x = F({
+  const { config: t, historyManager: r, artboards: o, elements: n, onExport: a, onExportScheduled: s, isCanvasReady: i = !1 } = e, c = M(null), d = M(!1), x = M({
     totalExports: 0,
     skippedExports: 0,
     lastExportTime: null,
     avgExportInterval: 0
-  }), [I, R] = _(x.current), k = F(a);
+  }), [I, R] = _(x.current), k = M(a);
   k.current = a, C(() => {
     const b = new or({
       ...ar,
@@ -259,17 +259,17 @@ function Rr(e) {
       b.destroy();
     };
   }, []), C(() => {
-    s && d.current && c.current && (d.current = !1, c.current.forceExport());
-  }, [s]), C(() => {
+    i && d.current && c.current && (d.current = !1, c.current.forceExport());
+  }, [i]), C(() => {
     c.current && t && c.current.updateConfig(t);
   }, [t == null ? void 0 : t.enabled, t == null ? void 0 : t.debounceMs, t == null ? void 0 : t.maxWaitMs]), C(() => {
-    c.current && i && c.current.onExportScheduled(i);
-  }, [i]), C(() => {
+    c.current && s && c.current.onExportScheduled(s);
+  }, [s]), C(() => {
     if (!r || !c.current)
       return;
     const b = r.onCommandExecuted(() => {
       if (c.current) {
-        if (!s) {
+        if (!i) {
           d.current = !0;
           return;
         }
@@ -279,18 +279,18 @@ function Rr(e) {
     return () => {
       b();
     };
-  }, [r, s]), C(() => {
+  }, [r, i]), C(() => {
     if (c.current) {
-      if (!s) {
+      if (!i) {
         d.current = !0;
         return;
       }
       c.current.scheduleExport();
     }
-  }, [n, o, s]), C(() => Oe((E) => {
-    if (!c.current || !s) return;
+  }, [n, o, i]), C(() => Oe((E) => {
+    if (!c.current || !i) return;
     n.some((W) => W.id === E) && c.current.scheduleExport();
-  }), [n, s]);
+  }), [n, i]);
   const T = P((b) => {
     c.current && c.current.updateConfig(b);
   }, []), p = P(async () => {
@@ -335,27 +335,27 @@ async function Ir(e) {
     new Promise((r) => setTimeout(r, 250))
   ]), me.debug(`Awaited ${t.length} font(s)`);
 }
-function Mr() {
+function Fr() {
   return new Promise((e) => requestAnimationFrame(() => e()));
 }
-function Fr(e) {
-  const { isCanvasReady: t, elements: r, hasInitialElements: o, initialElementsLoaded: n } = e, [a, i] = _(!1), s = F(!1);
+function Mr(e) {
+  const { isCanvasReady: t, elements: r, hasInitialElements: o, initialElementsLoaded: n } = e, [a, s] = _(!1), i = M(!1);
   return C(() => {
-    if (a || !t || o && !n || o && r.length === 0 || s.current) return;
-    s.current = !0;
+    if (a || !t || o && !n || o && r.length === 0 || i.current) return;
+    i.current = !0;
     let c = !1;
     return (async () => {
       try {
         const d = Cr(r);
-        if (d.length > 0 && (await Ir(d), c) || (await Mr(), c)) return;
-        i(!0);
+        if (d.length > 0 && (await Ir(d), c) || (await Fr(), c)) return;
+        s(!0);
       } catch (d) {
-        me.error("Error during content readiness check:", d), c || i(!0);
+        me.error("Error during content readiness check:", d), c || s(!0);
       } finally {
-        s.current = !1;
+        i.current = !1;
       }
     })(), () => {
-      c = !0, s.current = !1;
+      c = !0, i.current = !1;
     };
   }, [t, r, o, n, a]), a;
 }
@@ -386,9 +386,9 @@ function Dr(e) {
   return e && Tr[e] || "c";
 }
 function Nr(e, t) {
-  const r = t.scaleMode || "cover", o = (r === "contain" ? t.marginTop : 0) || 0, n = (r === "contain" ? t.marginRight : 0) || 0, a = (r === "contain" ? t.marginBottom : 0) || 0, i = (r === "contain" ? t.marginLeft : 0) || 0, s = t.width - i - n, c = t.height - o - a, d = s / e.width, x = c / e.height, I = r === "contain" ? Math.min(d, x) : Math.max(d, x), R = t.scale || 1, k = I * R, T = e.width * k, p = e.height * k, N = t.align || "c";
+  const r = t.scaleMode || "cover", o = (r === "contain" ? t.marginTop : 0) || 0, n = (r === "contain" ? t.marginRight : 0) || 0, a = (r === "contain" ? t.marginBottom : 0) || 0, s = (r === "contain" ? t.marginLeft : 0) || 0, i = t.width - s - n, c = t.height - o - a, d = i / e.width, x = c / e.height, I = r === "contain" ? Math.min(d, x) : Math.max(d, x), R = t.scale || 1, k = I * R, T = e.width * k, p = e.height * k, N = t.align || "c";
   let S = 0, b = 0;
-  const E = T - s, v = p - c;
+  const E = T - i, v = p - c;
   switch (N) {
     // Top row
     case "tl":
@@ -423,7 +423,7 @@ function Nr(e, t) {
       S = -E, b = -v;
       break;
   }
-  S += i, b += o;
+  S += s, b += o;
   const W = t.offsetX || 0, B = t.offsetY || 0, X = E, ut = v;
   return S += W * X, b += B * ut, S = Math.round(S), b = Math.round(b), {
     // Final scale to apply to artwork
@@ -482,11 +482,11 @@ function Pr(e, t) {
     const o = new Image();
     o.crossOrigin = "anonymous";
     let n = null, a = !1;
-    const i = () => {
+    const s = () => {
       n && (clearTimeout(n), n = null);
-    }, s = () => {
+    }, i = () => {
       if (a) return;
-      a = !0, i();
+      a = !0, s();
       const d = o.naturalWidth || o.width, x = o.naturalHeight || o.height;
       r({
         success: !0,
@@ -496,12 +496,12 @@ function Pr(e, t) {
         aspectRatio: x > 0 ? d / x : 1
       });
     }, c = (d) => {
-      a || (a = !0, i(), r({
+      a || (a = !0, s(), r({
         success: !1,
         error: new Error(d)
       }));
     };
-    o.onload = s, o.onerror = () => {
+    o.onload = i, o.onerror = () => {
       c(`Failed to load image: ${e}`);
     }, n = setTimeout(() => {
       c(`Image load timed out after ${t}ms: ${e}`);
@@ -528,10 +528,10 @@ async function Wr(e, t, r = {}, o = {}) {
     marginRight: t.marginRight,
     marginBottom: t.marginBottom,
     marginLeft: t.marginLeft
-  }, i = Nr(
+  }, s = Nr(
     { width: n.width, height: n.height },
     a
-  ), s = t.artboard.x + i.x, c = t.artboard.y + i.y, d = s + i.width / 2, x = c + i.height / 2;
+  ), i = t.artboard.x + s.x, c = t.artboard.y + s.y, d = i + s.width / 2, x = c + s.height / 2;
   return {
     success: !0,
     element: new Ht({
@@ -544,8 +544,8 @@ async function Wr(e, t, r = {}, o = {}) {
       // Don't recalculate dimensions on image load
       transformData: {
         type: "image",
-        width: i.width,
-        height: i.height,
+        width: s.width,
+        height: s.height,
         cropX: ((R = r.transformData) == null ? void 0 : R.cropX) ?? 0,
         cropY: ((k = r.transformData) == null ? void 0 : k.cropY) ?? 0,
         cropWidth: ((T = r.transformData) == null ? void 0 : T.cropWidth) ?? 1,
@@ -557,9 +557,9 @@ async function Wr(e, t, r = {}, o = {}) {
     }),
     placement: {
       artworkSize: { width: n.width, height: n.height },
-      finalSize: { width: i.width, height: i.height },
+      finalSize: { width: s.width, height: s.height },
       position: { x: d, y: x },
-      scale: i.scale
+      scale: s.scale
     }
   };
 }
@@ -573,17 +573,17 @@ function Nt(e, t, r, o) {
   const n = e * r, a = t * r;
   if (Math.max(n, a) <= o)
     return r;
-  const s = Math.max(e, t), c = o / s;
+  const i = Math.max(e, t), c = o / i;
   return Math.min(c, r);
 }
-const ge = ue((e, t) => {
+const ge = fe((e, t) => {
   const {
     exportConfig: r,
     imageConfig: o,
     layoutConfig: n,
     kit: a,
-    artboards: i,
-    activeArtboard: s,
+    artboards: s,
+    activeArtboard: i,
     onArtboardChange: c,
     initialElements: d,
     onChange: x,
@@ -601,15 +601,15 @@ const ge = ue((e, t) => {
     style: B,
     enableShortcuts: X,
     overlay: ut
-  } = e, zt = R, at = e.autoExportConfig ?? (r == null ? void 0 : r.autoExportConfig), tt = e.autoExportFormat ?? (r == null ? void 0 : r.format) ?? "dataUrl", kt = e.autoExportAll ?? (r == null ? void 0 : r.exportAll) ?? !1, G = e.exportScale ?? (r == null ? void 0 : r.scale) ?? 2, z = e.maxExportSize ?? (r == null ? void 0 : r.maxSize) ?? 4e3, ft = e.exportImageFormat ?? (r == null ? void 0 : r.imageFormat) ?? "png", ht = e.exportImageQuality ?? (r == null ? void 0 : r.imageQuality) ?? 0.92, L = e.initialImage ?? (o == null ? void 0 : o.src), Lt = e.initialImageAlignment ?? (o == null ? void 0 : o.alignment) ?? "center", Ot = e.initialImageScale ?? (o == null ? void 0 : o.scale) ?? 1, Yt = e.initialImageScaleMode ?? (o == null ? void 0 : o.scaleMode) ?? "cover", xe = e.width ?? (n == null ? void 0 : n.width) ?? 1200, ve = e.height ?? (n == null ? void 0 : n.height) ?? 1200, we = e.viewPadding ?? (n == null ? void 0 : n.viewPadding) ?? 0.9, Ee = e.artboardBorderRadius ?? (n == null ? void 0 : n.artboardBorderRadius) ?? 0, Ae = e.fixedMargin ?? (n == null ? void 0 : n.fixedMargin), ke = e.maxHeight ?? (n == null ? void 0 : n.maxHeight), Se = e.showRotationHandle ?? (n == null ? void 0 : n.showRotationHandle) ?? !0, Re = e.hideCanvas ?? (n == null ? void 0 : n.hideCanvas) ?? !1, Xt = e.canvasWrapperClassName ?? (n == null ? void 0 : n.canvasWrapperClassName), Vt = e.canvasWrapperStyle ?? (n == null ? void 0 : n.canvasWrapperStyle), Ce = e.canvasCutouts ?? (n == null ? void 0 : n.canvasCutouts), jt = e.pieceGuides, Ie = e.pieceFocus, Me = X ?? !0, it = ot(() => ir(a ?? "pro-studio"), [a]);
+  } = e, Lt = R, at = e.autoExportConfig ?? (r == null ? void 0 : r.autoExportConfig), tt = e.autoExportFormat ?? (r == null ? void 0 : r.format) ?? "dataUrl", kt = e.autoExportAll ?? (r == null ? void 0 : r.exportAll) ?? !1, G = e.exportScale ?? (r == null ? void 0 : r.scale) ?? 2, z = e.maxExportSize ?? (r == null ? void 0 : r.maxSize) ?? 4e3, ft = e.exportImageFormat ?? (r == null ? void 0 : r.imageFormat) ?? "png", ht = e.exportImageQuality ?? (r == null ? void 0 : r.imageQuality) ?? 0.92, L = e.initialImage ?? (o == null ? void 0 : o.src), Ot = e.initialImageAlignment ?? (o == null ? void 0 : o.alignment) ?? "center", Yt = e.initialImageScale ?? (o == null ? void 0 : o.scale) ?? 1, Xt = e.initialImageScaleMode ?? (o == null ? void 0 : o.scaleMode) ?? "cover", xe = e.width ?? (n == null ? void 0 : n.width) ?? 1200, ve = e.height ?? (n == null ? void 0 : n.height) ?? 1200, we = e.viewPadding ?? (n == null ? void 0 : n.viewPadding) ?? 0.9, Ee = e.artboardBorderRadius ?? (n == null ? void 0 : n.artboardBorderRadius) ?? 0, Ae = e.fixedMargin ?? (n == null ? void 0 : n.fixedMargin), ke = e.maxHeight ?? (n == null ? void 0 : n.maxHeight), Se = e.showRotationHandle ?? (n == null ? void 0 : n.showRotationHandle) ?? !0, Re = e.hideCanvas ?? (n == null ? void 0 : n.hideCanvas) ?? !1, Vt = e.canvasWrapperClassName ?? (n == null ? void 0 : n.canvasWrapperClassName), jt = e.canvasWrapperStyle ?? (n == null ? void 0 : n.canvasWrapperStyle), Ce = e.canvasCutouts ?? (n == null ? void 0 : n.canvasCutouts), Kt = e.pieceGuides, Ie = e.pieceFocus, Fe = X ?? !0, st = ot(() => sr(a ?? "pro-studio"), [a]);
   C(() => {
     var l;
-    if (typeof K < "u" && ((l = K.env) == null ? void 0 : l.NODE_ENV) === "development" && it) {
-      const u = sr(it);
+    if (typeof K < "u" && ((l = K.env) == null ? void 0 : l.NODE_ENV) === "development" && st) {
+      const u = ir(st);
       u.valid || J.warn("Kit validation warnings:", u.errors), u.warnings.length > 0 && J.warn("Kit validation warnings:", u.warnings);
     }
-  }, [it]);
-  const mt = F(E);
+  }, [st]);
+  const mt = M(E);
   mt.current = E;
   const U = P((l) => {
     var u;
@@ -621,13 +621,13 @@ const ge = ue((e, t) => {
   const {
     elements: q,
     setElements: gt,
-    selectedId: Kt,
-    artboardManager: M,
-    refreshArtboards: Fe,
+    selectedId: Gt,
+    artboardManager: F,
+    refreshArtboards: Me,
     historyManager: Te,
     isCanvasReady: St,
     setCanvasReady: pt
-  } = fe(), { createArtboard: De, selectArtboard: Ne, artboards: H } = cr(), { exportArtboard: et, exportAllArtboards: bt, exportArtboardAsBlob: rt, exportAllArtboardsAsBlobs: yt } = lr();
+  } = Wt(), { createArtboard: De, selectArtboard: Ne, artboards: H } = cr(), { exportArtboard: et, exportAllArtboards: bt, exportArtboardAsBlob: rt, exportAllArtboardsAsBlobs: yt } = lr();
   Ve(t, () => ({
     exportArtboards: async (l = {}) => {
       const u = l.format || tt, A = l.scale || G, f = l.all ?? !1;
@@ -641,12 +641,12 @@ const ge = ue((e, t) => {
       if (f) {
         const h = u === "blob" ? await yt(g) : await bt(g), y = {};
         for (const [D, O] of Object.entries(h)) {
-          const V = H.find((st) => st.id === D);
+          const V = H.find((it) => it.id === D);
           V && (y[V.name] = O);
         }
         return y;
       } else {
-        const h = M.getActiveArtboard();
+        const h = F.getActiveArtboard();
         if (!h)
           throw new Error("[SnowconeCanvas] No active artboard found");
         if (u === "blob") {
@@ -658,9 +658,9 @@ const ge = ue((e, t) => {
         }
       }
     }
-  }), [et, bt, rt, yt, tt, G, z, ft, ht, M, H]), C(() => {
+  }), [et, bt, rt, yt, tt, G, z, ft, ht, F, H]), C(() => {
     N && N(async () => {
-      const u = M.getActiveArtboard();
+      const u = F.getActiveArtboard();
       if (!u)
         throw new Error("[SnowconeCanvas] No active artboard found");
       const A = Nt(
@@ -671,14 +671,14 @@ const ge = ue((e, t) => {
       ), f = tt === "blob" ? await rt(u.id, { scale: A }) : await et(u.id, { scale: A });
       return { [u.name]: f };
     });
-  }, [N, et, rt, M, tt, G, z]);
-  const [Gt, xt] = _("idle"), [qt, Rt] = _(null), Ct = F(void 0), It = F(!1), Jt = F(!1), [Be, $e] = _(!1), He = F(0), Pe = F(0), Mt = F(!1);
+  }, [N, et, rt, F, tt, G, z]);
+  const [qt, xt] = _("idle"), [Jt, Rt] = _(null), Ct = M(void 0), It = M(!1), Qt = M(!1), [Be, $e] = _(!1), He = M(0), Pe = M(0), Ft = M(!1);
   C(() => {
     if (It.current) return;
     It.current = !0;
-    const l = i || [{ name: "Design", width: xe, height: ve }], u = M.getAllArtboards();
+    const l = s || [{ name: "Design", width: xe, height: ve }], u = F.getAllArtboards();
     if (u.length > 0) {
-      const A = l[0], f = u[0], m = jt ? "transparent" : void 0, g = (h) => h.exportBackground ?? (!!h.backgroundColor && h.backgroundColor !== "transparent");
+      const A = l[0], f = u[0], m = Kt ? "transparent" : void 0, g = (h) => h.exportBackground ?? (!!h.backgroundColor && h.backgroundColor !== "transparent");
       f.name = A.name, f.width = A.width, f.height = A.height, f.clipShape = A.clipShape, f.exportBackground = g(A), A.backgroundColor ? f.backgroundColor = A.backgroundColor : m && (f.backgroundColor = m);
       for (let h = 1; h < l.length; h++)
         De(l[h].width, l[h].height, {
@@ -687,20 +687,20 @@ const ge = ue((e, t) => {
           exportBackground: g(l[h]),
           clipShape: l[h].clipShape
         });
-      !s && l.length > 1 && M.setActiveArtboard(f.id);
+      !i && l.length > 1 && F.setActiveArtboard(f.id);
     }
-    Fe();
+    Me();
   }, []), C(() => {
-    if (!(!d || d.length === 0) && !Jt.current && It.current) {
-      Jt.current = !0, $e(!0);
+    if (!(!d || d.length === 0) && !Qt.current && It.current) {
+      Qt.current = !0, $e(!0);
       try {
-        const l = gr.createManyFromJSON(d), u = M.getAllArtboards();
+        const l = gr.createManyFromJSON(d), u = F.getAllArtboards();
         if (u.length > 0) {
           const f = new Map(u.map((m) => [m.name, m]));
           l.forEach((m, g) => {
             var D;
             const h = (D = d[g]) == null ? void 0 : D.artboard, y = h && f.get(h) || u[0];
-            M.addElementToArtboard(m.id, y.id);
+            F.addElementToArtboard(m.id, y.id);
           });
         }
         gt(l);
@@ -750,17 +750,17 @@ const ge = ue((e, t) => {
         });
       }
     }
-  }, [d, M, gt, U]), C(() => {
-    if (!s) {
-      Mt.current = !0;
+  }, [d, F, gt, U]), C(() => {
+    if (!i) {
+      Ft.current = !0;
       return;
     }
-    const l = H.find((u) => u.name === s);
+    const l = H.find((u) => u.name === i);
     if (l) {
-      const u = M.getActiveArtboard();
-      (u == null ? void 0 : u.name) !== s && Ne(l.id), Mt.current = !0;
+      const u = F.getActiveArtboard();
+      (u == null ? void 0 : u.name) !== i && Ne(l.id), Ft.current = !0;
     }
-  }, [s, H]), C(() => {
+  }, [i, H]), C(() => {
     if (!L || Ct.current === L) return;
     if (q.length > 0) {
       Ct.current = L;
@@ -769,12 +769,12 @@ const ge = ue((e, t) => {
     Ct.current = L, (async () => {
       xt("loading"), Rt(null);
       try {
-        const u = M.getAllArtboards();
+        const u = F.getAllArtboards();
         if (u.length === 0)
           throw new Error("No artboards available");
         const A = [];
         for (const f of u) {
-          const m = i == null ? void 0 : i.find((y) => y.name === f.name), g = (m == null ? void 0 : m.scaleMode) || Yt, h = await Wr(
+          const m = s == null ? void 0 : s.find((y) => y.name === f.name), g = (m == null ? void 0 : m.scaleMode) || Xt, h = await Wr(
             L,
             {
               artboard: {
@@ -783,8 +783,8 @@ const ge = ue((e, t) => {
                 x: f.x,
                 y: f.y
               },
-              alignment: (m == null ? void 0 : m.fitAlign) || Lt,
-              scale: Ot,
+              alignment: (m == null ? void 0 : m.fitAlign) || Ot,
+              scale: Yt,
               scaleMode: g,
               marginTop: m == null ? void 0 : m.fitMarginTop,
               marginRight: m == null ? void 0 : m.fitMarginRight,
@@ -792,7 +792,7 @@ const ge = ue((e, t) => {
               marginLeft: m == null ? void 0 : m.fitMarginLeft
             }
           );
-          h.success && h.element ? (M.addElementToArtboard(h.element.id, f.id), A.push(h.element)) : J.error("Failed to load image for artboard:", f.name, h.error);
+          h.success && h.element ? (F.addElementToArtboard(h.element.id, f.id), A.push(h.element)) : J.error("Failed to load image for artboard:", f.name, h.error);
         }
         if (A.length > 0)
           gt((f) => [...f, ...A]), xt("success"), S == null || S(L);
@@ -815,17 +815,17 @@ const ge = ue((e, t) => {
         });
       }
     })();
-  }, [L, Lt, Ot, Yt]);
-  const vt = F(I);
+  }, [L, Ot, Yt, Xt]);
+  const vt = M(I);
   vt.current = I, C(() => {
     var l;
-    (l = vt.current) == null || l.call(vt, Kt);
-  }, [Kt]);
-  const Qt = F(x);
-  Qt.current = x, C(() => {
-    const l = Qt.current;
+    (l = vt.current) == null || l.call(vt, Gt);
+  }, [Gt]);
+  const Zt = M(x);
+  Zt.current = x, C(() => {
+    const l = Zt.current;
     if (!l) return;
-    const u = M.getActiveArtboard(), A = {
+    const u = F.getActiveArtboard(), A = {
       // Stamp each element with the NAME of the artboard it lives on (the
       // manager is the membership source of truth). Without this the public
       // state is flat and a multi-placement design cannot round-trip: restore
@@ -833,7 +833,7 @@ const ge = ue((e, t) => {
       // states can't be derived from onChange. Pinned by
       // SnowconeCanvas.artboard-membership.test.tsx.
       elements: q.map((f) => {
-        const m = f.toJSON(), g = M.getArtboardForElement(f.id);
+        const m = f.toJSON(), g = F.getArtboardForElement(f.id);
         return g ? { ...m, artboard: g.name } : m;
       }),
       artboards: H.map((f) => ({
@@ -850,10 +850,10 @@ const ge = ue((e, t) => {
     };
     l(A);
   }, [q, H]), C(() => {
-    if (!c || !Mt.current) return;
-    const l = M.getActiveArtboard();
+    if (!c || !Ft.current) return;
+    const l = F.getActiveArtboard();
     l && c(l.name);
-  }, [M.getActiveArtboardId()]);
+  }, [F.getActiveArtboardId()]);
   const We = P(async () => {
     if (!k && !p) return;
     const l = ++Pe.current, u = Date.now();
@@ -863,7 +863,7 @@ const ge = ue((e, t) => {
         const h = Nt(g.width, g.height, G, z);
         A = Math.min(A, h);
       }
-    const f = M.getActiveArtboard(), m = (f == null ? void 0 : f.id) ?? "unknown";
+    const f = F.getActiveArtboard(), m = (f == null ? void 0 : f.id) ?? "unknown";
     p == null || p({ status: "rendering", artboardId: m }), He.current = u;
     try {
       let g;
@@ -877,11 +877,11 @@ const ge = ue((e, t) => {
           const y = await yt(h);
           g = {};
           for (const [D, O] of Object.entries(y)) {
-            const V = H.find((st) => st.id === D);
+            const V = H.find((it) => it.id === D);
             V && (g[V.name] = O);
           }
         } else {
-          const y = M.getActiveArtboard();
+          const y = F.getActiveArtboard();
           if (!y) return;
           const D = await rt(y.id, h);
           g = { [y.name]: D };
@@ -890,11 +890,11 @@ const ge = ue((e, t) => {
         const y = await bt(h);
         g = {};
         for (const [D, O] of Object.entries(y)) {
-          const V = H.find((st) => st.id === D);
+          const V = H.find((it) => it.id === D);
           V && (g[V.name] = O);
         }
       } else {
-        const y = M.getActiveArtboard();
+        const y = F.getActiveArtboard();
         if (!y) return;
         const D = await et(y.id, h);
         g = { [y.name]: D };
@@ -918,27 +918,27 @@ const ge = ue((e, t) => {
         recoverable: !0
       });
     }
-  }, [k, p, kt, tt, G, z, ft, ht, et, bt, rt, yt, H, M, q, at, U]);
+  }, [k, p, kt, tt, G, z, ft, ht, et, bt, rt, yt, H, F, q, at, U]);
   C(() => {
-    zt !== void 0 && zt > 0 && J.warn(
+    Lt !== void 0 && Lt > 0 && J.warn(
       "autoExportInterval is deprecated and ignored. Use autoExportConfig={{ enabled: true, debounceMs: 100, maxWaitMs: 1000 }} instead."
     );
   }, []), C(() => {
   }, [q]);
   const Ue = P(() => {
     if (T == null || T(), p) {
-      const l = M.getActiveArtboard();
+      const l = F.getActiveArtboard();
       p({ status: "scheduled", artboardId: (l == null ? void 0 : l.id) ?? "unknown" });
     }
-  }, [T, p, M]), ze = !!d && d.length > 0, Ft = Fr({
+  }, [T, p, F]), ze = !!d && d.length > 0, Mt = Mr({
     isCanvasReady: St,
     elements: q,
     hasInitialElements: ze,
     initialElementsLoaded: Be
-  }), Zt = F(!1);
+  }), _t = M(!1);
   C(() => {
-    Ft && !Zt.current && (Zt.current = !0, v == null || v());
-  }, [Ft, v]), Rr({
+    Mt && !_t.current && (_t.current = !0, v == null || v());
+  }, [Mt, v]), Rr({
     config: at ? {
       enabled: at.enabled ?? !0,
       debounceMs: at.debounceMs ?? 100,
@@ -952,7 +952,7 @@ const ge = ue((e, t) => {
     elements: q,
     onExport: We,
     onExportScheduled: Ue,
-    isCanvasReady: Ft
+    isCanvasReady: Mt
     // Gate exports until content is fully ready (fonts loaded, elements deserialized)
   }), C(() => {
     if (H.length > 0 && !St) {
@@ -972,7 +972,7 @@ const ge = ue((e, t) => {
       recoverable: !1
     });
   }, [U]);
-  return Gt === "loading" ? /* @__PURE__ */ w(
+  return qt === "loading" ? /* @__PURE__ */ w(
     "div",
     {
       className: W,
@@ -985,7 +985,7 @@ const ge = ue((e, t) => {
       },
       children: /* @__PURE__ */ w(dr, { size: 48 })
     }
-  ) : Gt === "error" && qt ? /* @__PURE__ */ w(
+  ) : qt === "error" && Jt ? /* @__PURE__ */ w(
     "div",
     {
       className: W,
@@ -998,12 +998,12 @@ const ge = ue((e, t) => {
         color: "var(--danger, #dc2626)",
         padding: "1rem"
       },
-      children: /* @__PURE__ */ Z("div", { className: "text-center", children: [
-        /* @__PURE__ */ w("div", { className: "font-medium", children: "Failed to load image" }),
-        /* @__PURE__ */ w("div", { className: "text-sm mt-1 opacity-70", children: qt.message })
+      children: /* @__PURE__ */ Z("div", { className: "sc:text-center", children: [
+        /* @__PURE__ */ w("div", { className: "sc:font-medium", children: "Failed to load image" }),
+        /* @__PURE__ */ w("div", { className: "sc:text-sm sc:mt-1 sc:opacity-70", children: Jt.message })
       ] })
     }
-  ) : /* @__PURE__ */ w(ur, { kit: it, children: /* @__PURE__ */ w("div", { className: `app-modern ${W || ""}`, style: { ...B, position: "relative" }, children: /* @__PURE__ */ Z(
+  ) : /* @__PURE__ */ w(ur, { kit: st, children: /* @__PURE__ */ w("div", { className: `sc-root ${W || ""}`, style: { ...B, position: "relative" }, children: /* @__PURE__ */ Z(
     kr,
     {
       onError: Le,
@@ -1056,13 +1056,13 @@ const ge = ue((e, t) => {
               fixedMargin: Ae,
               maxHeight: ke,
               showRotationHandle: Se,
-              enableShortcuts: Me,
+              enableShortcuts: Fe,
               canvasCutouts: Ce,
-              pieceGuides: jt,
+              pieceGuides: Kt,
               pieceFocus: Ie
             }
           );
-          return /* @__PURE__ */ w(Er, { kit: it, canvas: Xt || Vt ? /* @__PURE__ */ w("div", { className: Xt, style: Vt, children: l }) : l });
+          return /* @__PURE__ */ w(Er, { kit: st, canvas: Vt || jt ? /* @__PURE__ */ w("div", { className: Vt, style: jt, children: l }) : l });
         })(),
         ut
       ]
@@ -1070,13 +1070,17 @@ const ge = ue((e, t) => {
   ) }) });
 });
 ge.displayName = "SnowconeCanvasInner";
-const zr = ue((e, t) => {
+const zr = fe((e, t) => {
   var c;
-  const { inheritTheme: r, externalProvider: o, services: n } = e, a = e.viewPadding ?? ((c = e.layoutConfig) == null ? void 0 : c.viewPadding), i = /* @__PURE__ */ w(ge, { ref: t, ...e }), s = o ? /* @__PURE__ */ w(_t, { defaultTheme: "light", passive: r, children: i }) : /* @__PURE__ */ w(_t, { defaultTheme: "light", passive: r, children: /* @__PURE__ */ w(je, { viewPadding: a, children: i }) });
-  return n ? /* @__PURE__ */ w(fr, { services: n, children: s }) : s;
+  const { inheritTheme: r, externalProvider: o, services: n } = e, a = e.viewPadding ?? ((c = e.layoutConfig) == null ? void 0 : c.viewPadding), s = /* @__PURE__ */ w(ge, { ref: t, ...e }), i = o ? /* @__PURE__ */ w(te, { defaultTheme: "light", passive: r, children: s }) : /* @__PURE__ */ w(te, { defaultTheme: "light", passive: r, children: /* @__PURE__ */ w(je, { viewPadding: a, children: s }) });
+  return n ? /* @__PURE__ */ w(fr, { services: n, children: i }) : i;
 });
 zr.displayName = "SnowconeCanvas";
-const Lr = 3e3, se = {
+function pn() {
+  const { selectedElement: e } = Wt();
+  return e ?? null;
+}
+const Lr = 3e3, ce = {
   text: "useTextBinding",
   image: "useImageBinding",
   font: "useFontBinding"
@@ -1089,22 +1093,22 @@ const Lr = 3e3, se = {
   image: "image",
   font: "text"
 }, Bt = /* @__PURE__ */ new Set();
-function ce(e) {
+function le(e) {
   return e instanceof Pt ? "text" : e instanceof Ht ? "image" : "other";
 }
 function Xr(e, t, r) {
-  const o = `[${se[e]}]`, n = `the binding is dead (isConnected: false, ${Or[e]} is a no-op)`, a = Yr[e], i = r.getAllByName(t);
-  if (i.length > 0) {
-    const d = [...new Set(i.map(ce))], x = a === "text" ? "image" : "text", I = d.length === 1 && d[0] === x ? ` Bind it with ${se[x]}("${t}") instead.` : "";
+  const o = `[${ce[e]}]`, n = `the binding is dead (isConnected: false, ${Or[e]} is a no-op)`, a = Yr[e], s = r.getAllByName(t);
+  if (s.length > 0) {
+    const d = [...new Set(s.map(le))], x = a === "text" ? "image" : "text", I = d.length === 1 && d[0] === x ? ` Bind it with ${ce[x]}("${t}") instead.` : "";
     return `${o} the layer named "${t}" is ${d.join("/")}, not ${a} — ${n}.${I}`;
   }
-  const s = r.getAll().filter((d) => d.name).map((d) => `"${d.name}" (${ce(d)})`), c = 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().${a}(…, { name: '${t}' }) or the element's \`name\` property.`;
+  const i = r.getAll().filter((d) => d.name).map((d) => `"${d.name}" (${le(d)})`), c = 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().${a}(…, { name: '${t}' }) or the element's \`name\` property.`;
   return `${o} no ${a} layer named "${t}" exists — ${n}. ${c}`;
 }
-function Wt(e, t, r, o) {
+function Ut(e, t, r, o) {
   C(() => {
-    var i;
-    if (o || typeof K > "u" || ((i = K.env) == null ? void 0 : i.NODE_ENV) === "production") return;
+    var s;
+    if (o || typeof K > "u" || ((s = K.env) == null ? void 0 : s.NODE_ENV) === "production") return;
     const n = `${e}:${t}`;
     if (Bt.has(n)) return;
     const a = setTimeout(() => {
@@ -1115,17 +1119,17 @@ function Wt(e, t, r, o) {
 }
 const Vr = () => {
 }, jr = [];
-function pn(e) {
-  const { elementStore: t } = dt(), { executeElementUpdate: r } = At(), o = ot(() => t.getAllByName(e).filter((i) => i instanceof Pt), [t, e]), n = P(
+function bn(e) {
+  const { elementStore: t } = dt(), { executeElementUpdate: r } = At(), o = ot(() => t.getAllByName(e).filter((s) => s instanceof Pt), [t, e]), n = P(
     (a) => {
-      for (const i of o) {
-        const s = i.clone();
-        s.setText(a), r(i, s);
+      for (const s of o) {
+        const i = s.clone();
+        i.setText(a), r(s, i);
       }
     },
     [o, r]
   );
-  return Wt("text", e, t, o.length > 0), o.length === 0 ? { text: "", setText: Vr, element: null, elements: jr, isConnected: !1 } : {
+  return Ut("text", e, t, o.length > 0), o.length === 0 ? { text: "", setText: Vr, element: null, elements: jr, isConnected: !1 } : {
     text: o[0].getText(),
     setText: n,
     element: o[0],
@@ -1138,48 +1142,48 @@ const Kr = () => {
 function qr(e, t, r) {
   const o = e / t;
   if (r >= o) {
-    const n = t, a = n * r, i = e / a;
+    const n = t, a = n * r, s = e / a;
     return {
       width: a,
       height: n,
-      cropX: (1 - i) / 2,
+      cropX: (1 - s) / 2,
       cropY: 0,
-      cropWidth: i,
+      cropWidth: s,
       cropHeight: 1
     };
   } else {
-    const n = e, a = n / r, i = t / a;
+    const n = e, a = n / r, s = t / a;
     return {
       width: n,
       height: a,
       cropX: 0,
-      cropY: (1 - i) / 2,
+      cropY: (1 - s) / 2,
       cropWidth: 1,
-      cropHeight: i
+      cropHeight: s
     };
   }
 }
-function bn(e, t) {
-  const r = (t == null ? void 0 : t.fit) ?? "cover", { elementStore: o, setElements: n } = dt(), { executeElementUpdate: a } = At(), i = ot(() => o.getAllByName(e).filter((k) => k instanceof Ht), [o, e]), s = F(/* @__PURE__ */ new Map());
-  for (const R of i)
-    if (!s.current.has(R.id)) {
+function yn(e, t) {
+  const r = (t == null ? void 0 : t.fit) ?? "cover", { elementStore: o, setElements: n } = dt(), { executeElementUpdate: a } = At(), s = ot(() => o.getAllByName(e).filter((k) => k instanceof Ht), [o, e]), i = M(/* @__PURE__ */ new Map());
+  for (const R of s)
+    if (!i.current.has(R.id)) {
       const k = R.transformData;
-      s.current.set(R.id, {
+      i.current.set(R.id, {
         width: k.width * k.cropWidth,
         height: k.height * k.cropHeight
       });
     }
-  const c = F(i);
-  c.current = i;
-  const d = F(a);
+  const c = M(s);
+  c.current = s;
+  const d = M(a);
   d.current = a;
-  const x = F(n);
+  const x = M(n);
   x.current = n;
   const I = P(
     (R) => {
       const k = c.current, T = d.current;
       for (const p of k) {
-        const N = s.current.get(p.id);
+        const N = i.current.get(p.id);
         if (!N) continue;
         const { width: S, height: b } = N, E = p.clone();
         E.imageLoaded = !1, E.imageElement = null, E.isCropping = !1, E.imageUrl = R, r === "cover" ? (E.preserveDimensions = !0, E.onLoadCallback = (v) => {
@@ -1194,11 +1198,11 @@ function bn(e, t) {
     [r]
     // Stable deps only — imageElements/executeElementUpdate/setElements accessed via refs
   );
-  return Wt("image", e, o, i.length > 0), i.length === 0 ? { imageUrl: "", setImageUrl: Kr, element: null, elements: Gr, isConnected: !1 } : {
-    imageUrl: i[0].imageUrl,
+  return Ut("image", e, o, s.length > 0), s.length === 0 ? { imageUrl: "", setImageUrl: Kr, element: null, elements: Gr, isConnected: !1 } : {
+    imageUrl: s[0].imageUrl,
     setImageUrl: I,
-    element: i[0],
-    elements: i,
+    element: s[0],
+    elements: s,
     isConnected: !0
   };
 }
@@ -1216,15 +1220,15 @@ function pe(e, t) {
   return j(r.color, t) || j((o = r.transformData) == null ? void 0 : o.fillColor, t) || j((n = r.transformData) == null ? void 0 : n.strokeColor, t) || ((a = r.stroke) == null ? void 0 : a.enabled) === !0 && j(r.stroke.color, t);
 }
 function Qr(e, t, r) {
-  var i, s, c;
+  var s, i, c;
   if (!pe(e, t)) return null;
   const o = e.clone(), n = e, a = o;
-  return j(n.color, t) && (typeof a.setColor == "function" ? a.setColor(r) : a.color = r), j((i = n.transformData) == null ? void 0 : i.fillColor, t) && (a.transformData = { ...a.transformData, fillColor: r }), j((s = n.transformData) == null ? void 0 : s.strokeColor, t) && (a.transformData = { ...a.transformData, strokeColor: r }), ((c = n.stroke) == null ? void 0 : c.enabled) === !0 && j(n.stroke.color, t) && (a.stroke = { ...a.stroke, color: r }), o;
+  return j(n.color, t) && (typeof a.setColor == "function" ? a.setColor(r) : a.color = r), j((s = n.transformData) == null ? void 0 : s.fillColor, t) && (a.transformData = { ...a.transformData, fillColor: r }), j((i = n.transformData) == null ? void 0 : i.strokeColor, t) && (a.transformData = { ...a.transformData, strokeColor: r }), ((c = n.stroke) == null ? void 0 : c.enabled) === !0 && j(n.stroke.color, t) && (a.stroke = { ...a.stroke, color: r }), o;
 }
-function yn(e) {
-  const { elementStore: t } = dt(), { executeElementUpdate: r } = At(), [o, n] = _(() => Et(e)), [a, i] = _(e);
-  e !== a && (i(e), n(Et(e)));
-  const s = ot(
+function xn(e) {
+  const { elementStore: t } = dt(), { executeElementUpdate: r } = At(), [o, n] = _(() => Et(e)), [a, s] = _(e);
+  e !== a && (s(e), n(Et(e)));
+  const i = ot(
     () => t.getAll().filter((d) => pe(d, o)),
     [t, o]
   ), c = P(
@@ -1240,24 +1244,24 @@ function yn(e) {
     },
     [t, o, r]
   );
-  return s.length === 0 ? { color: o, setColor: c, elements: Jr, isConnected: !1 } : { color: o, setColor: c, elements: s, isConnected: !0 };
+  return i.length === 0 ? { color: o, setColor: c, elements: Jr, isConnected: !1 } : { color: o, setColor: c, elements: i, isConnected: !0 };
 }
 const Zr = () => {
 }, _r = [];
-function xn(e) {
-  const { elementStore: t } = dt(), { executeElementUpdate: r } = At(), o = ot(() => t.getAllByName(e).filter((i) => i instanceof Pt), [t, e]), n = P(
+function vn(e) {
+  const { elementStore: t } = dt(), { executeElementUpdate: r } = At(), o = ot(() => t.getAllByName(e).filter((s) => s instanceof Pt), [t, e]), n = P(
     (a) => {
       mr.loadGoogleFontByName(a);
-      for (const i of o) {
-        if (i.fontFamily === a) continue;
-        Ye.clearCache(i.fontFamily);
-        const s = i.clone();
-        s.fontFamily = a, r(i, s);
+      for (const s of o) {
+        if (s.fontFamily === a) continue;
+        Ye.clearCache(s.fontFamily);
+        const i = s.clone();
+        i.fontFamily = a, r(s, i);
       }
     },
     [o, r]
   );
-  return Wt("font", e, t, o.length > 0), o.length === 0 ? { fontFamily: "", setFontFamily: Zr, element: null, elements: _r, isConnected: !1 } : {
+  return Ut("font", e, t, o.length > 0), o.length === 0 ? { fontFamily: "", setFontFamily: Zr, element: null, elements: _r, isConnected: !1 } : {
     fontFamily: o[0].fontFamily,
     setFontFamily: n,
     element: o[0],
@@ -1265,7 +1269,7 @@ function xn(e) {
     isConnected: !0
   };
 }
-function vn(e) {
+function wn(e) {
   const { elementStore: t } = dt();
   return e ? t.getByName(e) ?? null : null;
 }
@@ -1287,8 +1291,8 @@ function en(e) {
   var o;
   const t = (o = e.artboards) != null && o.length ? e.artboards : [{ name: "Front", width: 800, height: 800 }], r = t.map(() => []);
   for (const n of e.elements || []) {
-    const a = n == null ? void 0 : n.artboard, i = typeof a == "string" ? t.findIndex((s) => (s.name || "Front") === a) : -1;
-    r[i >= 0 ? i : 0].push(rn(n));
+    const a = n == null ? void 0 : n.artboard, s = typeof a == "string" ? t.findIndex((i) => (i.name || "Front") === a) : -1;
+    r[s >= 0 ? s : 0].push(rn(n));
   }
   return {
     schemaVersion: tn,
@@ -1323,20 +1327,20 @@ function rn(e) {
 }
 function nn(e) {
   var d;
-  const t = e.transformData || {}, r = e.masks && e.masks.length > 0, o = t.width || 0, n = t.height || 0, a = r ? o : o * (t.cropWidth ?? 1), i = r ? n : n * (t.cropHeight ?? 1), s = {
+  const t = e.transformData || {}, r = e.masks && e.masks.length > 0, o = t.width || 0, n = t.height || 0, a = r ? o : o * (t.cropWidth ?? 1), s = r ? n : n * (t.cropHeight ?? 1), i = {
     id: e.id,
     type: "image",
     x: e.x || 0,
     y: e.y || 0,
     width: a,
-    height: i,
+    height: s,
     rotation: e.rotation || 0,
     imageUrl: e.imageUrl,
     imageAspectRatio: e.imageAspectRatio
   };
-  return !r && (t.cropX !== 0 || t.cropY !== 0 || t.cropWidth !== 1 || t.cropHeight !== 1) && (s.cropX = t.cropX, s.cropY = t.cropY, s.cropWidth = t.cropWidth, s.cropHeight = t.cropHeight, s.needsCropPixelConversion = !0), t.flipHorizontal && (s.flipHorizontal = t.flipHorizontal), t.flipVertical && (s.flipVertical = t.flipVertical), t.borderRadius && (s.borderRadius = t.borderRadius), e.opacity !== void 0 && (s.opacity = e.opacity), e.distressEffect && (s.distressEffect = e.distressEffect), ((d = e.masks) == null ? void 0 : d.length) > 0 && (s.masks = e.masks), e.blendMode && (s.blendMode = e.blendMode), e.knockoutParts && (s.knockoutParts = e.knockoutParts), e.stroke && (s.stroke = e.stroke), be(s);
+  return !r && (t.cropX !== 0 || t.cropY !== 0 || t.cropWidth !== 1 || t.cropHeight !== 1) && (i.cropX = t.cropX, i.cropY = t.cropY, i.cropWidth = t.cropWidth, i.cropHeight = t.cropHeight, i.needsCropPixelConversion = !0), t.flipHorizontal && (i.flipHorizontal = t.flipHorizontal), t.flipVertical && (i.flipVertical = t.flipVertical), t.borderRadius && (i.borderRadius = t.borderRadius), e.opacity !== void 0 && (i.opacity = e.opacity), e.distressEffect && (i.distressEffect = e.distressEffect), ((d = e.masks) == null ? void 0 : d.length) > 0 && (i.masks = e.masks), e.blendMode && (i.blendMode = e.blendMode), e.knockoutParts && (i.knockoutParts = e.knockoutParts), e.stroke && (i.stroke = e.stroke), be(i);
 }
-const le = "center";
+const de = "center";
 function on(e) {
   return e === "top-left" || e === "left" || e === "bottom-left" ? "left" : e === "top-right" || e === "right" || e === "bottom-right" ? "right" : "center";
 }
@@ -1344,19 +1348,19 @@ function an(e) {
   return e === "top-left" || e === "top" || e === "top-right" ? "top" : e === "bottom-left" || e === "bottom" || e === "bottom-right" ? "bottom" : "middle";
 }
 function $t(e, t, r, o, n, a) {
-  const i = on(e), s = an(e), c = i === "left" ? t / 2 + a : i === "right" ? o - t / 2 - a : o / 2, d = s === "top" ? r / 2 + a : s === "bottom" ? n - r / 2 - a : n / 2;
+  const s = on(e), i = an(e), c = s === "left" ? t / 2 + a : s === "right" ? o - t / 2 - a : o / 2, d = i === "top" ? r / 2 + a : i === "bottom" ? n - r / 2 - a : n / 2;
   return { x: c, y: d };
 }
 function sn(e, t, r) {
   const o = t / r;
   if (e >= o) {
-    const i = r * e, s = t / i;
+    const s = r * e, i = t / s;
     return {
-      width: i,
+      width: s,
       height: r,
-      cropX: (1 - s) / 2,
+      cropX: (1 - i) / 2,
       cropY: 0,
-      cropWidth: s,
+      cropWidth: i,
       cropHeight: 1
     };
   }
@@ -1370,7 +1374,7 @@ function sn(e, t, r) {
     cropHeight: a
   };
 }
-class Ut {
+class zt {
   constructor(t) {
     if (this.els = [], this.idCounter = 0, !(t.width > 0) || !(t.height > 0))
       throw new Error("design(): artboard width and height must be positive numbers");
@@ -1395,7 +1399,7 @@ class Ut {
     const r = t.artboards.find((n) => n.name === t.activeArtboard) ?? t.artboards[0];
     if (!r)
       throw new Error("DesignBuilder.fromState(): state has no artboards");
-    const o = new Ut({
+    const o = new zt({
       name: r.name,
       width: r.width,
       height: r.height,
@@ -1415,15 +1419,15 @@ class Ut {
     const { width: o, height: n } = this.artboard;
     let a;
     if (r.aspectRatio && r.aspectRatio > 0) {
-      const s = sn(r.aspectRatio, o, n);
+      const i = sn(r.aspectRatio, o, n);
       a = {
         type: "image",
-        width: s.width,
-        height: s.height,
-        cropX: s.cropX,
-        cropY: s.cropY,
-        cropWidth: s.cropWidth,
-        cropHeight: s.cropHeight,
+        width: i.width,
+        height: i.height,
+        cropX: i.cropX,
+        cropY: i.cropY,
+        cropWidth: i.cropWidth,
+        cropHeight: i.cropHeight,
         flipHorizontal: !1,
         flipVertical: !1,
         borderRadius: 0
@@ -1441,7 +1445,7 @@ class Ut {
         flipVertical: !1,
         borderRadius: 0
       };
-    const i = {
+    const s = {
       id: this.nextId("bg"),
       transformType: "image",
       x: o / 2,
@@ -1453,14 +1457,14 @@ class Ut {
       transformData: a,
       name: r.name ?? "Background"
     };
-    return this.els.unshift(i), this;
+    return this.els.unshift(s), this;
   }
   /** An anchored image element (not full-bleed). */
   image(t, r = {}) {
-    const { width: o, height: n } = this.artboard, a = r.width ?? Math.round(o / 3), i = r.height ?? (r.aspectRatio ? Math.round(a / r.aspectRatio) : a), { x: s, y: c } = $t(r.anchor ?? le, a, i, o, n, r.padding ?? 0), d = {
+    const { width: o, height: n } = this.artboard, a = r.width ?? Math.round(o / 3), s = r.height ?? (r.aspectRatio ? Math.round(a / r.aspectRatio) : a), { x: i, y: c } = $t(r.anchor ?? de, a, s, o, n, r.padding ?? 0), d = {
       id: this.nextId("img"),
       transformType: "image",
-      x: s,
+      x: i,
       y: c,
       rotation: r.rotation ?? 0,
       opacity: r.opacity ?? 1,
@@ -1469,7 +1473,7 @@ class Ut {
       transformData: {
         type: "image",
         width: a,
-        height: i,
+        height: s,
         cropX: 0,
         cropY: 0,
         cropWidth: 1,
@@ -1485,11 +1489,11 @@ class Ut {
   /** An anchored text layer. Horizontal centring is exact (textAlign); vertical
    *  anchoring uses the font size as the line-height estimate. */
   text(t, r = {}) {
-    const { width: o, height: n } = this.artboard, a = r.fontSize ?? Math.round(this.artboard.height / 12), { x: i, y: s } = $t(r.anchor ?? "top", 0, a, o, n, r.padding ?? Math.round(n / 20)), c = {
+    const { width: o, height: n } = this.artboard, a = r.fontSize ?? Math.round(this.artboard.height / 12), { x: s, y: i } = $t(r.anchor ?? "top", 0, a, o, n, r.padding ?? Math.round(n / 20)), c = {
       id: this.nextId("text"),
       transformType: "custom",
-      x: i,
-      y: s,
+      x: s,
+      y: i,
       rotation: r.rotation ?? 0,
       text: t,
       fontSize: a,
@@ -1505,11 +1509,11 @@ class Ut {
   }
   /** An anchored vector shape. */
   shape(t, r = {}) {
-    const { width: o, height: n } = this.artboard, a = r.size ?? Math.round(o / 6), i = typeof a == "number" ? a : a.width, s = typeof a == "number" ? a : a.height, { x: c, y: d } = $t(r.anchor ?? le, i, s, o, n, r.padding ?? 0), x = {
+    const { width: o, height: n } = this.artboard, a = r.size ?? Math.round(o / 6), s = typeof a == "number" ? a : a.width, i = typeof a == "number" ? a : a.height, { x: c, y: d } = $t(r.anchor ?? de, s, i, o, n, r.padding ?? 0), x = {
       type: "shape",
       shapeType: t,
-      width: i,
-      height: s,
+      width: s,
+      height: i,
       fillColor: r.fill ?? "#000000",
       fillOpacity: r.opacity ?? 1,
       ...r.points !== void 0 ? { points: r.points } : {},
@@ -1555,8 +1559,8 @@ class Ut {
     return en(this.toJSON());
   }
 }
-function wn(e) {
-  return new Ut(e);
+function En(e) {
+  return new zt(e);
 }
 const ye = "personalization", cn = pr("type", [
   ct({
@@ -1572,7 +1576,7 @@ const ye = "personalization", cn = pr("type", [
     name: $().min(1),
     label: $(),
     placeholder: $().optional(),
-    fit: oe([Y("cover"), Y("contain")]).optional(),
+    fit: ae([Y("cover"), Y("contain")]).optional(),
     group: $().optional()
   }),
   ct({
@@ -1585,12 +1589,12 @@ const ye = "personalization", cn = pr("type", [
     type: Y("select"),
     name: $().min(1),
     label: $(),
-    property: oe([Y("text"), Y("imageUrl"), Y("fontFamily")]),
+    property: ae([Y("text"), Y("imageUrl"), Y("fontFamily")]),
     options: yr(ct({ label: $(), value: $() })).min(1),
     group: $().optional()
   })
 ]);
-function En(e) {
+function An(e) {
   if (!e || typeof e != "object") return [];
   const t = e[ye];
   if (!Array.isArray(t)) return [];
@@ -1602,26 +1606,27 @@ function En(e) {
   }
   return r;
 }
-function An(e, t) {
+function kn(e, t) {
   return { ...e, [ye]: t };
 }
 export {
   tn as C,
-  Ut as D,
+  zt as D,
   kr as E,
   zr as S,
   ye as T,
-  yn as a,
+  xn as a,
   xr as b,
-  Fr as c,
-  wn as d,
-  vn as e,
-  xn as f,
-  bn as g,
+  Mr as c,
+  En as d,
+  wn as e,
+  vn as f,
+  yn as g,
   pn as h,
-  En as r,
+  bn as i,
+  An as r,
   en as s,
   Rr as u,
-  An as w
+  kn as w
 };
-//# sourceMappingURL=template-fields-IgDV7PRY.js.map
+//# sourceMappingURL=template-fields-coO73lV3.js.map