@snowcone-app/canvas 0.13.1 → 0.14.0

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

@@ -1,8 +1,8 @@
 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 { useCallback as P, useMemo as ot, useRef as M, 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 { aq as te, ar as ee, ag as Ke, ah as re, 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 ne, 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");
@@ -13,8 +13,8 @@ function xr() {
     canUndo: o,
     canRedo: n,
     executeElementUpdate: a,
-    executeAddElement: i,
-    executeRemoveElement: s,
+    executeAddElement: s,
+    executeRemoveElement: i,
     executeReorderElement: c,
     executeCommandBatch: d,
     executeCreateArtboard: x,
@@ -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,
@@ -71,9 +71,9 @@ const vr = () => {
     )
   ] });
 }, he = nt("KitLayout"), lt = "canvas", Dt = 320;
-let ie = !1;
+let se = !1;
 function wr() {
-  ie || (ie = !0, Ke({
+  se || (se = !0, Ke({
     LayersPanel: qe,
     EffectsPanel: Je,
     ExportPanel: Qe,
@@ -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(de, { 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,7 +573,7 @@ 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) => {
@@ -582,8 +582,8 @@ const ge = ue((e, t) => {
     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, 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, 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;
@@ -622,8 +622,8 @@ const ge = ue((e, t) => {
     elements: q,
     setElements: gt,
     selectedId: Kt,
-    artboardManager: M,
-    refreshArtboards: Fe,
+    artboardManager: F,
+    refreshArtboards: Me,
     historyManager: Te,
     isCanvasReady: St,
     setCanvasReady: pt
@@ -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,12 +671,12 @@ 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 [Gt, xt] = _("idle"), [qt, Rt] = _(null), Ct = M(void 0), It = M(!1), Jt = 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");
       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);
@@ -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);
       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) || Yt, h = await Wr(
             L,
             {
               artboard: {
@@ -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);
@@ -816,16 +816,16 @@ const ge = ue((e, t) => {
       }
     })();
   }, [L, Lt, Ot, Yt]);
-  const vt = F(I);
+  const vt = M(I);
   vt.current = I, C(() => {
     var l;
     (l = vt.current) == null || l.call(vt, Kt);
   }, [Kt]);
-  const Qt = F(x);
+  const Qt = M(x);
   Qt.current = x, C(() => {
     const l = Qt.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,7 +918,7 @@ 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(
       "autoExportInterval is deprecated and ignored. Use autoExportConfig={{ enabled: true, debounceMs: 100, maxWaitMs: 1000 }} instead."
@@ -927,18 +927,18 @@ const ge = ue((e, t) => {
   }, [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);
+  }), Zt = M(!1);
   C(() => {
-    Ft && !Zt.current && (Zt.current = !0, v == null || v());
-  }, [Ft, v]), Rr({
+    Mt && !Zt.current && (Zt.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) {
@@ -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: qt.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,
               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: Xt || Vt ? /* @__PURE__ */ w("div", { className: Xt, style: Vt, children: l }) : l });
         })(),
         ut
       ]
@@ -1072,11 +1072,11 @@ const ge = ue((e, t) => {
 ge.displayName = "SnowconeCanvasInner";
 const zr = ue((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(_t, { defaultTheme: "light", passive: r, children: s }) : /* @__PURE__ */ w(_t, { 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 = {
+const Lr = 3e3, ie = {
   text: "useTextBinding",
   image: "useImageBinding",
   font: "useFontBinding"
@@ -1093,18 +1093,18 @@ function ce(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 = `[${ie[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(ce))], x = a === "text" ? "image" : "text", I = d.length === 1 && d[0] === x ? ` Bind it with ${ie[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}" (${ce(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) {
   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(() => {
@@ -1116,11 +1116,11 @@ 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(
+  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]
@@ -1138,48 +1138,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)) {
+  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 +1194,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 Wt("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 +1216,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(
+  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,19 +1240,19 @@ 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(
+  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]
@@ -1287,8 +1287,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,18 +1323,18 @@ 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";
 function on(e) {
@@ -1344,19 +1344,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
     };
   }
@@ -1415,15 +1415,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 +1441,7 @@ class Ut {
         flipVertical: !1,
         borderRadius: 0
       };
-    const i = {
+    const s = {
       id: this.nextId("bg"),
       transformType: "image",
       x: o / 2,
@@ -1453,14 +1453,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 ?? le, 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 +1469,7 @@ class Ut {
       transformData: {
         type: "image",
         width: a,
-        height: i,
+        height: s,
         cropX: 0,
         cropY: 0,
         cropWidth: 1,
@@ -1485,11 +1485,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 +1505,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 ?? le, 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 } : {},
@@ -1613,7 +1613,7 @@ export {
   ye as T,
   yn as a,
   xr as b,
-  Fr as c,
+  Mr as c,
   wn as d,
   vn as e,
   xn as f,
@@ -1624,4 +1624,4 @@ export {
   Rr as u,
   An as w
 };
-//# sourceMappingURL=template-fields-IgDV7PRY.js.map
+//# sourceMappingURL=template-fields-Dw-KK9DX.js.map