@snowcone-app/canvas 0.33.1 → 0.35.0

package/dist/{SnowconeCanvas-DjQFFTDh.js → SnowconeCanvas-h8cfofsO.js}

@@ -1,47 +1,47 @@
-import { z as G, c as Q, aB as Te, I as De } from "./FontAnalyzer-BrKY6XYn.js";
-import { jsx as y, Fragment as Be, jsxs as V } from "react/jsx-runtime";
-import { useMemo as Se, useRef as F, useEffect as R, Component as We, useState as Z, useCallback as O, useImperativeHandle as $e, forwardRef as Ae } from "react";
-import { l as He, e as ze, f as Oe, G as Ke, a as Ue, Z as Xe, i as je, b as Ye, D as Ve, r as Ge, v as Qe, S as qe, g as Je, c as Ze } from "./validation-CA6cMSOX.js";
-import { ImagePanel as _e } from "./ImagePanel-Ckpc6QqR.js";
-import { d as et, e as tt } from "./ContextualToolbars-BrllZJTn.js";
-import { E as rt, p as nt, q as at, C as ot, u as fe, g as st } from "./useCommands-DmewMc5w.js";
-import { C as it, D as ct } from "./template-fields-xVQZRXvc.js";
-import { E as lt, u as ee } from "./design-builder-D4izkvlb.js";
+import { z as G, c as Q, aB as De, I as Be, aC as We } from "./FontAnalyzer-CEYA_6fY.js";
+import { jsx as y, Fragment as $e, jsxs as V } from "react/jsx-runtime";
+import { useMemo as Se, useRef as F, useEffect as k, Component as He, useState as Z, useCallback as O, useImperativeHandle as ze, forwardRef as Ae } from "react";
+import { l as Oe, e as Ke, f as Ue, G as Xe, a as je, Z as Ye, i as Ve, b as Ge, D as Qe, r as qe, v as Je, S as Ze, g as _e, c as et } from "./validation-8QF2gWih.js";
+import { ImagePanel as tt } from "./ImagePanel-Duh1AMdF.js";
+import { d as rt, e as nt } from "./ContextualToolbars-TCO7dzu6.js";
+import { E as at, p as ot, q as st, C as it, u as fe, g as ct } from "./useCommands-D16Tq-B-.js";
+import { C as lt, D as dt } from "./template-fields-jgE6czak.js";
+import { E as ut, u as ee } from "./design-builder-CqgTpp9B.js";
 import { T as xe } from "./ThemeContext-Rjz25x9X.js";
-import { c as re, K as dt, e as ut } from "./ExportManager-Ci81K6xA.js";
-import { C as le } from "./CanvasRenderer-1j-twIbs.js";
+import { c as re, K as ft, e as mt } from "./ExportManager-D1PAlOiE.js";
+import { C as le } from "./CanvasRenderer-BHBCxI-B.js";
 const me = Q("KitLayout"), J = "canvas", de = 320;
 let ye = !1;
-function ft() {
-  ye || (ye = !0, He({
-    EffectsPanel: ze,
-    ExportPanel: Oe,
-    ImagePanel: _e,
-    GlyphPanel: Ke,
-    ArtboardTabs: Ue,
-    ContextualToolbars: et,
-    ZoomControls: Xe,
-    CropPanel: tt
+function gt() {
+  ye || (ye = !0, Oe({
+    EffectsPanel: Ke,
+    ExportPanel: Ue,
+    ImagePanel: tt,
+    GlyphPanel: Xe,
+    ArtboardTabs: je,
+    ContextualToolbars: rt,
+    ZoomControls: Ye,
+    CropPanel: nt
   }));
 }
-function mt({ children: n }) {
+function ht({ children: n }) {
   const e = F(null);
   if (e.current === null) {
-    const t = new rt();
+    const t = new at();
     t.registerCanvas("legacy-kit-canvas"), e.current = {
-      store: new ct({ elements: [], artboards: [], activeArtboard: "" }),
-      commerce: new it({ productId: "", mockupIds: [] }),
+      store: new dt({ elements: [], artboards: [], activeArtboard: "" }),
+      commerce: new lt({ productId: "", mockupIds: [] }),
       registry: t,
-      ...nt((a) => me.error("[kit section]", a))
+      ...ot((a) => me.error("[kit section]", a))
     };
   }
-  return /* @__PURE__ */ y(at.Provider, { value: e.current, children: n });
+  return /* @__PURE__ */ y(st.Provider, { value: e.current, children: n });
 }
 function ne({ ids: n }) {
-  return !n || n.length === 0 ? null : /* @__PURE__ */ y(mt, { children: n.map((e) => {
+  return !n || n.length === 0 ? null : /* @__PURE__ */ y(ht, { children: n.map((e) => {
     var r;
     if (e === J) return null;
-    const t = je(e);
+    const t = Ve(e);
     if (!t)
       return typeof G < "u" && ((r = G.env) == null ? void 0 : r.NODE_ENV) === "development" && me.warn(
         `Kit layout references unknown section "${e}" — skipping. Register it with registerSection("${e}", { ... }).`
@@ -50,29 +50,29 @@ function ne({ ids: n }) {
     return /* @__PURE__ */ y(a, {}, e);
   }) });
 }
-function gt({ kit: n, canvas: e }) {
+function pt({ kit: n, canvas: e }) {
   var p, u, b, E;
-  ft();
+  gt();
   const t = n.layout.slots, a = !!((p = t.topbar) != null && p.some((w) => w !== J)), r = !!((u = t.left) != null && u.some((w) => w !== J)), s = !!((b = t.right) != null && b.some((w) => w !== J)), l = !!((E = t.bottombar) != null && E.some((w) => w !== J)), d = Se(
     () => !a && !r && !s && !l,
     [a, r, s, l]
-  ), i = F(null), f = a || r || s || l, m = F(!1);
-  return R(() => {
+  ), i = F(null), f = a || r || s || l, g = F(!1);
+  return k(() => {
     var o;
     if (typeof G > "u" || ((o = G.env) == null ? void 0 : o.NODE_ENV) !== "development" || !f) return;
     const w = i.current;
     if (!w || typeof ResizeObserver > "u") return;
     const A = (c) => {
-      c > 0 && c < de && !m.current ? (m.current = !0, me.warn(
+      c > 0 && c < de && !g.current ? (g.current = !0, me.warn(
         `Kit "${n.name}" declares chrome (toolbar / panels) but its container is only ${Math.round(c)}px wide — below the ~${de}px needed to render it, so the toolbar / panels are suppressed and the editor looks like a bare canvas. Give the editor more container width, or pass kit="embed-only" if a chrome-less canvas is intended.`
-      )) : c >= de && (m.current = !1);
+      )) : c >= de && (g.current = !1);
     };
     A(w.getBoundingClientRect().width);
     const v = new ResizeObserver((c) => {
-      for (const g of c) A(g.contentRect.width);
+      for (const m of c) A(m.contentRect.width);
     });
     return v.observe(w), () => v.disconnect();
-  }, [f, n.name]), d ? /* @__PURE__ */ y(Be, { children: e }) : /* @__PURE__ */ V("div", { ref: i, className: "sc-kit-layout", style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
+  }, [f, n.name]), d ? /* @__PURE__ */ y($e, { children: e }) : /* @__PURE__ */ V("div", { ref: i, className: "sc-kit-layout", style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
     a && /* @__PURE__ */ y(
       "div",
       {
@@ -96,8 +96,8 @@ function gt({ kit: n, canvas: e }) {
     )
   ] });
 }
-const ht = Q("ErrorBoundary");
-class pt extends We {
+const bt = Q("ErrorBoundary");
+class vt extends He {
   constructor(e) {
     super(e), this.resetError = () => {
       this.setState({
@@ -116,7 +116,7 @@ class pt extends We {
     };
   }
   componentDidCatch(e, t) {
-    if (ht.error("Caught error:", e, t), this.props.onError && this.props.onError(e, t), this.props.onCanvasError) {
+    if (bt.error("Caught error:", e, t), this.props.onError && this.props.onError(e, t), this.props.onCanvasError) {
       const a = {
         category: "unknown",
         message: e.message,
@@ -177,45 +177,45 @@ class pt extends We {
     ) : this.props.children;
   }
 }
-function bt({
+function Et({
   inheritTheme: n,
   externalProvider: e,
   services: t,
   viewPadding: a,
   children: r
 }) {
-  const s = e ? /* @__PURE__ */ y(xe, { defaultTheme: "light", passive: n, children: r }) : /* @__PURE__ */ y(xe, { defaultTheme: "light", passive: n, children: /* @__PURE__ */ y(lt, { viewPadding: a, children: r }) });
-  return t ? /* @__PURE__ */ y(ot, { services: t, children: s }) : s;
+  const s = e ? /* @__PURE__ */ y(xe, { defaultTheme: "light", passive: n, children: r }) : /* @__PURE__ */ y(xe, { defaultTheme: "light", passive: n, children: /* @__PURE__ */ y(ut, { viewPadding: a, children: r }) });
+  return t ? /* @__PURE__ */ y(it, { services: t, children: s }) : s;
 }
-const vt = Q("useAutoExport");
-function Et(n) {
-  const { config: e, historyManager: t, artboards: a, elements: r, onExport: s, onExportScheduled: l, isCanvasReady: d = !1 } = n, i = F(null), f = F(!1), m = F({
+const xt = Q("useAutoExport");
+function yt(n) {
+  const { config: e, historyManager: t, artboards: a, elements: r, onExport: s, onExportScheduled: l, isCanvasReady: d = !1 } = n, i = F(null), f = F(!1), g = F({
     totalExports: 0,
     skippedExports: 0,
     lastExportTime: null,
     avgExportInterval: 0
-  }), [p, u] = Z(m.current), b = F(s);
-  b.current = s, R(() => {
-    const o = new Ye({
-      ...Ve,
+  }), [p, u] = Z(g.current), b = F(s);
+  b.current = s, k(() => {
+    const o = new Ge({
+      ...Qe,
       ...e
     });
     return o.onExport(async () => {
       try {
-        await b.current(), m.current = o.getStats();
+        await b.current(), g.current = o.getStats();
       } catch (c) {
-        vt.error("[useAutoExport] Export failed:", c);
+        xt.error("[useAutoExport] Export failed:", c);
       }
     }), i.current = o, () => {
       o.destroy();
     };
-  }, []), R(() => {
+  }, []), k(() => {
     d && f.current && i.current && (f.current = !1, i.current.forceExport());
-  }, [d]), R(() => {
+  }, [d]), k(() => {
     i.current && e && i.current.updateConfig(e);
-  }, [e == null ? void 0 : e.enabled, e == null ? void 0 : e.debounceMs, e == null ? void 0 : e.maxWaitMs]), R(() => {
+  }, [e == null ? void 0 : e.enabled, e == null ? void 0 : e.debounceMs, e == null ? void 0 : e.maxWaitMs]), k(() => {
     i.current && l && i.current.onExportScheduled(l);
-  }, [l]), R(() => {
+  }, [l]), k(() => {
     if (!t || !i.current)
       return;
     const o = t.onCommandExecuted(() => {
@@ -230,7 +230,7 @@ function Et(n) {
     return () => {
       o();
     };
-  }, [t, d]), R(() => {
+  }, [t, d]), k(() => {
     if (i.current) {
       if (!d) {
         f.current = !0;
@@ -238,16 +238,16 @@ function Et(n) {
       }
       i.current.scheduleExport();
     }
-  }, [r, a, d]), R(() => Te((c) => {
+  }, [r, a, d]), k(() => De((c) => {
     if (!i.current || !d) return;
     r.some((x) => x.id === c) && i.current.scheduleExport();
   }), [r, d]);
   const E = O((o) => {
     i.current && i.current.updateConfig(o);
   }, []), w = O(async () => {
-    i.current && (await i.current.forceExport(), m.current = i.current.getStats(), u(m.current));
+    i.current && (await i.current.forceExport(), g.current = i.current.getStats(), u(g.current));
   }, []), A = O(() => {
-    i.current && (i.current.resetStats(), m.current = i.current.getStats(), u(m.current));
+    i.current && (i.current.resetStats(), g.current = i.current.getStats(), u(g.current));
   }, []), v = O(() => {
     i.current && i.current.resetChangeDetection();
   }, []);
@@ -259,8 +259,8 @@ function Et(n) {
     resetChangeDetection: v
   };
 }
-const ke = Q("useContentReady");
-function xt(n) {
+const Ie = Q("useContentReady");
+function wt(n) {
   var t;
   const e = /* @__PURE__ */ new Set();
   for (const a of n)
@@ -274,7 +274,7 @@ function xt(n) {
       }
   return Array.from(e);
 }
-async function yt(n) {
+async function St(n) {
   if (n.length === 0 || typeof document > "u" || !document.fonts) return;
   const e = [];
   for (const t of n) {
@@ -284,24 +284,24 @@ async function yt(n) {
   await Promise.all(e), document.fonts.ready && await Promise.race([
     document.fonts.ready,
     new Promise((t) => setTimeout(t, 250))
-  ]), ke.debug(`Awaited ${e.length} font(s)`);
+  ]), Ie.debug(`Awaited ${e.length} font(s)`);
 }
-function wt() {
+function At() {
   return new Promise((n) => requestAnimationFrame(() => n()));
 }
-function St(n) {
+function It(n) {
   const { isCanvasReady: e, elements: t, hasInitialElements: a, initialElementsLoaded: r } = n, [s, l] = Z(!1), d = F(!1);
-  return R(() => {
+  return k(() => {
     if (s || !e || a && !r || a && t.length === 0 || d.current) return;
     d.current = !0;
     let i = !1;
     return (async () => {
       try {
-        const f = xt(t);
-        if (f.length > 0 && (await yt(f), i) || (await wt(), i)) return;
+        const f = wt(t);
+        if (f.length > 0 && (await St(f), i) || (await At(), i)) return;
         l(!0);
       } catch (f) {
-        ke.error("Error during content readiness check:", f), i || l(!0);
+        Ie.error("Error during content readiness check:", f), i || l(!0);
       } finally {
         d.current = !1;
       }
@@ -310,7 +310,7 @@ function St(n) {
     };
   }, [e, t, a, r, s]), s;
 }
-const At = {
+const kt = {
   // Vertical alignments (map to top/center/bottom center)
   "far-top": "t",
   top: "t",
@@ -333,13 +333,13 @@ const At = {
   b: "b",
   br: "br"
 };
-function kt(n) {
-  return n && At[n] || "c";
+function Rt(n) {
+  return n && kt[n] || "c";
 }
-function It(n, e) {
-  const t = e.scaleMode || "cover", a = (t === "contain" ? e.marginTop : 0) || 0, r = (t === "contain" ? e.marginRight : 0) || 0, s = (t === "contain" ? e.marginBottom : 0) || 0, l = (t === "contain" ? e.marginLeft : 0) || 0, d = e.width - l - r, i = e.height - a - s, f = d / n.width, m = i / n.height, p = t === "contain" ? Math.min(f, m) : Math.max(f, m), u = e.scale || 1, b = p * u, E = n.width * b, w = n.height * b, A = e.align || "c";
+function Ct(n, e) {
+  const t = e.scaleMode || "cover", a = (t === "contain" ? e.marginTop : 0) || 0, r = (t === "contain" ? e.marginRight : 0) || 0, s = (t === "contain" ? e.marginBottom : 0) || 0, l = (t === "contain" ? e.marginLeft : 0) || 0, d = e.width - l - r, i = e.height - a - s, f = d / n.width, g = i / n.height, p = t === "contain" ? Math.min(f, g) : Math.max(f, g), u = e.scale || 1, b = p * u, E = n.width * b, w = n.height * b, A = e.align || "c";
   let v = 0, o = 0;
-  const c = E - d, g = w - i;
+  const c = E - d, m = w - i;
   switch (A) {
     // Top row
     case "tl":
@@ -353,30 +353,30 @@ function It(n, e) {
       break;
     // Middle row
     case "l":
-      v = 0, o = -g / 2;
+      v = 0, o = -m / 2;
       break;
     case "c":
     // Center (default)
     default:
-      v = -c / 2, o = -g / 2;
+      v = -c / 2, o = -m / 2;
       break;
     case "r":
-      v = -c, o = -g / 2;
+      v = -c, o = -m / 2;
       break;
     // Bottom row
     case "bl":
-      v = 0, o = -g;
+      v = 0, o = -m;
       break;
     case "b":
-      v = -c / 2, o = -g;
+      v = -c / 2, o = -m;
       break;
     case "br":
-      v = -c, o = -g;
+      v = -c, o = -m;
       break;
   }
   v += l, o += a;
-  const x = e.offsetX || 0, S = e.offsetY || 0, h = c, C = g;
-  return v += x * h, o += S * C, v = Math.round(v), o = Math.round(o), {
+  const x = e.offsetX || 0, S = e.offsetY || 0, h = c, I = m;
+  return v += x * h, o += S * I, v = Math.round(v), o = Math.round(o), {
     // Final scale to apply to artwork
     scale: b,
     // Final artwork dimensions after scaling
@@ -389,19 +389,19 @@ function It(n, e) {
     debug: {
       coverScale: p,
       userScale: u,
-      overflow: { x: c, y: g },
+      overflow: { x: c, y: m },
       alignment: A,
-      appliedOffset: { x: x * h, y: S * C }
+      appliedOffset: { x: x * h, y: S * I }
     }
   };
 }
-const Rt = {
+const Mt = {
   timeout: 3e4,
   retries: 1,
   retryDelay: 1e3,
   validateUrl: !0
 };
-function Ct(n) {
+function Ft(n) {
   try {
     const e = new URL(n);
     return ["http:", "https:", "data:", "blob:"].includes(e.protocol);
@@ -409,9 +409,9 @@ function Ct(n) {
     return !1;
   }
 }
-async function Mt(n, e = {}) {
-  const t = { ...Rt, ...e };
-  if (t.validateUrl && !Ct(n))
+async function Nt(n, e = {}) {
+  const t = { ...Mt, ...e };
+  if (t.validateUrl && !Ft(n))
     return {
       success: !1,
       error: new Error(`Invalid image URL: ${n}`)
@@ -419,16 +419,16 @@ async function Mt(n, e = {}) {
   let a;
   for (let r = 0; r <= t.retries; r++)
     try {
-      return await Ft(n, t.timeout);
+      return await Lt(n, t.timeout);
     } catch (s) {
-      a = s instanceof Error ? s : new Error(String(s)), r < t.retries && await Pt(t.retryDelay);
+      a = s instanceof Error ? s : new Error(String(s)), r < t.retries && await Tt(t.retryDelay);
     }
   return {
     success: !1,
     error: a || new Error("Failed to load image after retries")
   };
 }
-function Ft(n, e) {
+function Lt(n, e) {
   return new Promise((t) => {
     const a = new Image();
     a.crossOrigin = "anonymous";
@@ -438,13 +438,13 @@ function Ft(n, e) {
     }, d = () => {
       if (s) return;
       s = !0, l();
-      const f = a.naturalWidth || a.width, m = a.naturalHeight || a.height;
+      const f = a.naturalWidth || a.width, g = a.naturalHeight || a.height;
       t({
         success: !0,
         element: a,
         width: f,
-        height: m,
-        aspectRatio: m > 0 ? f / m : 1
+        height: g,
+        aspectRatio: g > 0 ? f / g : 1
       });
     }, i = (f) => {
       s || (s = !0, l(), t({
@@ -459,9 +459,9 @@ function Ft(n, e) {
     }, e), a.src = n;
   });
 }
-async function Nt(n, e, t = {}, a = {}) {
+async function Pt(n, e, t = {}, a = {}) {
   var u, b, E, w, A, v, o;
-  const r = await Mt(n, a);
+  const r = await Nt(n, a);
   if (!r.success || !r.width || !r.height)
     return {
       success: !1,
@@ -471,7 +471,7 @@ async function Nt(n, e, t = {}, a = {}) {
     width: e.artboard.width,
     height: e.artboard.height,
     scale: e.scale,
-    align: kt(e.alignment),
+    align: Rt(e.alignment),
     offsetX: e.offsetX,
     offsetY: e.offsetY,
     scaleMode: e.scaleMode,
@@ -479,16 +479,16 @@ async function Nt(n, e, t = {}, a = {}) {
     marginRight: e.marginRight,
     marginBottom: e.marginBottom,
     marginLeft: e.marginLeft
-  }, l = It(
+  }, l = Ct(
     { width: r.width, height: r.height },
     s
-  ), d = e.artboard.x + l.x, i = e.artboard.y + l.y, f = d + l.width / 2, m = i + l.height / 2;
+  ), d = e.artboard.x + l.x, i = e.artboard.y + l.y, f = d + l.width / 2, g = i + l.height / 2;
   return {
     success: !0,
-    element: new De({
+    element: new Be({
       ...t,
       x: f,
-      y: m,
+      y: g,
       imageUrl: n,
       imageAspectRatio: r.aspectRatio,
       preserveDimensions: !0,
@@ -509,12 +509,12 @@ async function Nt(n, e, t = {}, a = {}) {
     placement: {
       artworkSize: { width: r.width, height: r.height },
       finalSize: { width: l.width, height: l.height },
-      position: { x: f, y: m },
+      position: { x: f, y: g },
       scale: l.scale
     }
   };
 }
-function Pt(n) {
+function Tt(n) {
   return new Promise((e) => setTimeout(e, n));
 }
 const _ = Q("SnowconeCanvas");
@@ -527,14 +527,14 @@ function ue(n, e, t, a) {
   const d = Math.max(n, e), i = a / d;
   return Math.min(i, t);
 }
-function Lt(n) {
+function Dt(n) {
   const e = F(n);
   e.current = n;
   const t = O((r) => {
     var s;
     _.error(`[${r.category}] ${r.message}`, r.originalError), (s = e.current) == null || s.call(e, r);
   }, []);
-  R(() => (le.onRenderError = t, () => {
+  k(() => (le.onRenderError = t, () => {
     le.onRenderError === t && (le.onRenderError = null);
   }), [t]);
   const a = O((r) => {
@@ -547,7 +547,7 @@ function Lt(n) {
   }, [t]);
   return { emitError: t, handleBoundaryError: a };
 }
-function Tt(n) {
+function Bt(n) {
   const {
     artboardConfigs: e,
     width: t,
@@ -559,23 +559,23 @@ function Tt(n) {
   } = n, {
     setElements: i,
     setSelectedId: f,
-    setMultiSelection: m,
+    setMultiSelection: g,
     artboardManager: p,
     refreshArtboards: u
   } = ee(), { createArtboard: b, selectArtboard: E, artboards: w } = fe(), A = F(!1), v = F(!1);
-  R(() => {
+  k(() => {
     if (A.current) return;
     A.current = !0;
-    const o = e || [{ name: "Design", width: t, height: a }], c = r ? "transparent" : void 0, g = (S) => S.exportBackground ?? (!!S.backgroundColor && S.backgroundColor !== "transparent");
+    const o = e || [{ name: "Design", width: t, height: a }], c = r ? "transparent" : void 0, m = (S) => S.exportBackground ?? (!!S.backgroundColor && S.backgroundColor !== "transparent");
     if (d) {
-      p.clear(), i([]), f(null), m([]);
+      p.clear(), i([]), f(null), g([]);
       for (const h of o)
         p.createArtboard({
           name: h.name,
           width: h.width,
           height: h.height,
           backgroundColor: h.backgroundColor ?? c,
-          exportBackground: g(h),
+          exportBackground: m(h),
           clipShape: h.clipShape,
           role: h.role
         });
@@ -586,19 +586,19 @@ function Tt(n) {
     const x = p.getAllArtboards();
     if (x.length > 0) {
       const S = o[0], h = x[0];
-      h.name = S.name, h.width = S.width, h.height = S.height, h.clipShape = S.clipShape, h.exportBackground = g(S), h.role = S.role, S.backgroundColor ? h.backgroundColor = S.backgroundColor : c && (h.backgroundColor = c);
-      for (let C = 1; C < o.length; C++)
-        b(o[C].width, o[C].height, {
-          name: o[C].name,
-          backgroundColor: o[C].backgroundColor ?? c,
-          exportBackground: g(o[C]),
-          clipShape: o[C].clipShape,
-          role: o[C].role
+      h.name = S.name, h.width = S.width, h.height = S.height, h.clipShape = S.clipShape, h.exportBackground = m(S), h.role = S.role, S.backgroundColor ? h.backgroundColor = S.backgroundColor : c && (h.backgroundColor = c);
+      for (let I = 1; I < o.length; I++)
+        b(o[I].width, o[I].height, {
+          name: o[I].name,
+          backgroundColor: o[I].backgroundColor ?? c,
+          exportBackground: m(o[I]),
+          clipShape: o[I].clipShape,
+          role: o[I].role
         });
       !s && o.length > 1 && p.setActiveArtboard(h.id);
     }
     u();
-  }, []), R(() => {
+  }, []), k(() => {
     if (!s) {
       v.current = !0;
       return;
@@ -608,40 +608,40 @@ function Tt(n) {
       const c = p.getActiveArtboard();
       (c == null ? void 0 : c.name) !== s && E(o.id), v.current = !0;
     }
-  }, [s, w]), R(() => {
+  }, [s, w]), k(() => {
     if (!l || !v.current) return;
     const o = p.getActiveArtboard();
     o && l(o.name);
   }, [p.getActiveArtboardId()]);
 }
-function Dt(n) {
+function Wt(n) {
   const { initialElements: e, emitError: t, customFonts: a } = n, { setElements: r, artboardManager: s } = ee(), l = F(!1), [d, i] = Z(!1), f = F(!0);
-  return R(() => (f.current = !0, () => {
+  return k(() => (f.current = !0, () => {
     f.current = !1;
-  }), []), R(() => {
+  }), []), k(() => {
     if (!(!e || e.length === 0) && !l.current) {
       l.current = !0, i(!0);
       try {
         a && a.length > 0 && re.register(a);
-        const m = dt.createManyFromJSON(e), p = s.getAllArtboards();
+        const g = ft.createManyFromJSON(e), p = s.getAllArtboards();
         if (p.length > 0) {
           const b = new Map(p.map((E) => [E.name, E]));
-          m.forEach((E, w) => {
+          g.forEach((E, w) => {
             var o;
             const A = (o = e[w]) == null ? void 0 : o.artboard, v = A && b.get(A) || p[0];
             s.addElementToArtboard(E.id, v.id);
           });
         }
-        r(m);
+        r(g);
         const u = /* @__PURE__ */ new Set();
-        for (const b of m) {
+        for (const b of g) {
           const E = b.fontFamily;
           typeof E == "string" && E.trim().length > 0 && u.add(E);
         }
         if (u.size > 0 && typeof document < "u") {
           const b = document.fonts ?? null, E = Array.from(u).filter(
             (o) => re.has(o)
-          ), w = ut(
+          ), w = mt(
             re.forFamilies(E),
             {
               onLoadError: (o) => {
@@ -657,17 +657,17 @@ function Dt(n) {
             (o) => !re.has(o)
           ).map((o) => {
             const c = `font-${o.replace(/\s+/g, "-").toLowerCase()}`;
-            let g = document.getElementById(c);
-            return g || (g = document.createElement("link"), g.id = c, g.rel = "stylesheet", g.href = `https://fonts.googleapis.com/css2?family=${o.replace(
+            let m = document.getElementById(c);
+            return m || (m = document.createElement("link"), m.id = c, m.rel = "stylesheet", m.href = `https://fonts.googleapis.com/css2?family=${o.replace(
               /\s+/g,
               "+"
-            )}:wght@400;700&display=swap`, document.head.appendChild(g)), new Promise((x) => {
-              if (g.sheet) {
+            )}:wght@400;700&display=swap`, document.head.appendChild(m)), new Promise((x) => {
+              if (m.sheet) {
                 x(o);
                 return;
               }
               const S = () => x(o);
-              g.addEventListener("load", S, { once: !0 }), g.addEventListener("error", S, { once: !0 }), setTimeout(S, 4e3);
+              m.addEventListener("load", S, { once: !0 }), m.addEventListener("error", S, { once: !0 }), setTimeout(S, 4e3);
             });
           });
           Promise.all([Promise.all(v), w]).then(([o]) => {
@@ -684,9 +684,9 @@ function Dt(n) {
             f.current && r((o) => o.slice());
           });
         }
-      } catch (m) {
-        _.error("Failed to load initial elements:", m);
-        const p = m instanceof Error ? m : new Error(String(m));
+      } catch (g) {
+        _.error("Failed to load initial elements:", g);
+        const p = g instanceof Error ? g : new Error(String(g));
         t({
           category: "import",
           message: `Failed to load initial elements: ${p.message}`,
@@ -697,7 +697,7 @@ function Dt(n) {
     }
   }, [e, s, r, t, a]), { initialElementsLoadedState: d };
 }
-function Bt(n) {
+function $t(n) {
   const {
     initialImage: e,
     initialImageAlignment: t,
@@ -707,8 +707,8 @@ function Bt(n) {
     onImageLoad: l,
     onImageError: d,
     emitError: i
-  } = n, { elements: f, setElements: m, artboardManager: p } = ee(), [u, b] = Z("idle"), [E, w] = Z(null), A = F(void 0);
-  return R(() => {
+  } = n, { elements: f, setElements: g, artboardManager: p } = ee(), [u, b] = Z("idle"), [E, w] = Z(null), A = F(void 0);
+  return k(() => {
     if (!e || A.current === e) return;
     if (f.length > 0) {
       A.current = e;
@@ -721,15 +721,15 @@ function Bt(n) {
         if (o.length === 0)
           throw new Error("No artboards available");
         const c = [];
-        for (const g of o) {
-          const x = s == null ? void 0 : s.find((C) => C.name === g.name), S = (x == null ? void 0 : x.scaleMode) || r, h = await Nt(
+        for (const m of o) {
+          const x = s == null ? void 0 : s.find((I) => I.name === m.name), S = (x == null ? void 0 : x.scaleMode) || r, h = await Pt(
             e,
             {
               artboard: {
-                width: g.width,
-                height: g.height,
-                x: g.x,
-                y: g.y
+                width: m.width,
+                height: m.height,
+                x: m.x,
+                y: m.y
               },
               alignment: (x == null ? void 0 : x.fitAlign) || t,
               scale: a,
@@ -740,16 +740,16 @@ function Bt(n) {
               marginLeft: x == null ? void 0 : x.fitMarginLeft
             }
           );
-          h.success && h.element ? (p.addElementToArtboard(h.element.id, g.id), c.push(h.element)) : _.error("Failed to load image for artboard:", g.name, h.error);
+          h.success && h.element ? (p.addElementToArtboard(h.element.id, m.id), c.push(h.element)) : _.error("Failed to load image for artboard:", m.name, h.error);
         }
         if (c.length > 0)
-          m((g) => [...g, ...c]), b("success"), l == null || l(e);
+          g((m) => [...m, ...c]), b("success"), l == null || l(e);
         else {
-          const g = new Error("Failed to load image into any artboard");
-          b("error"), w(g), d == null || d(e, g), i({
+          const m = new Error("Failed to load image into any artboard");
+          b("error"), w(m), d == null || d(e, m), i({
             category: "image",
-            message: g.message,
-            originalError: g,
+            message: m.message,
+            originalError: m,
             recoverable: !0
           });
         }
@@ -765,17 +765,17 @@ function Bt(n) {
     })();
   }, [e, t, a, r]), { imageLoadingState: u, imageError: E };
 }
-function Wt(n) {
+function Ht(n) {
   const { onChange: e, onSelectionChange: t } = n, { elements: a, selectedId: r, artboardManager: s } = ee(), { artboards: l } = fe(), d = F(t);
-  d.current = t, R(() => {
+  d.current = t, k(() => {
     var f;
     (f = d.current) == null || f.call(d, r);
   }, [r]);
   const i = F(e);
-  i.current = e, R(() => {
+  i.current = e, k(() => {
     const f = i.current;
     if (!f) return;
-    const m = s.getActiveArtboard(), p = {
+    const g = s.getActiveArtboard(), p = {
       // 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
@@ -799,12 +799,12 @@ function Wt(n) {
         // set so non-template states stay byte-identical.
         ...u.role ? { role: u.role } : {}
       })),
-      activeArtboard: (m == null ? void 0 : m.name) || "Design"
+      activeArtboard: (g == null ? void 0 : g.name) || "Design"
     };
     f(p);
   }, [a, l]);
 }
-function $t(n, e) {
+function zt(n, e) {
   const {
     autoExportInterval: t,
     autoExportConfig: a,
@@ -814,7 +814,7 @@ function $t(n, e) {
     maxExportSize: d,
     exportImageFormat: i,
     exportImageQuality: f,
-    onExport: m,
+    onExport: g,
     onExportScheduled: p,
     onExportStatus: u,
     onExportReady: b,
@@ -825,67 +825,67 @@ function $t(n, e) {
   } = n, {
     elements: o,
     artboardManager: c,
-    historyManager: g,
+    historyManager: m,
     isCanvasReady: x,
     setCanvasReady: S
-  } = ee(), { artboards: h } = fe(), { exportArtboard: C, exportAllArtboards: X, exportArtboardAsBlob: z, exportAllArtboardsAsBlobs: j } = st(), ae = F(0), oe = F(0);
-  $e(e, () => ({
-    exportArtboards: async (P = {}) => {
-      const L = P.format || r, T = P.scale || l, $ = P.all ?? !1;
+  } = ee(), { artboards: h } = fe(), { exportArtboard: I, exportAllArtboards: X, exportArtboardAsBlob: z, exportAllArtboardsAsBlobs: j } = ct(), ae = F(0), oe = F(0);
+  ze(e, () => ({
+    exportArtboards: async (L = {}) => {
+      const P = L.format || r, T = L.scale || l, $ = L.all ?? !1;
       let D = T;
       if (d > 0 && isFinite(d))
         for (const M of h) {
-          const I = ue(M.width, M.height, T, d);
-          D = Math.min(D, I);
+          const C = ue(M.width, M.height, T, d);
+          D = Math.min(D, C);
         }
-      const k = { scale: D, format: i, quality: f };
+      const R = { scale: D, format: i, quality: f };
       if ($) {
-        const M = L === "blob" ? await j(k) : await X(k), I = {};
+        const M = P === "blob" ? await j(R) : await X(R), C = {};
         for (const [N, K] of Object.entries(M)) {
           const B = h.find((U) => U.id === N);
-          B && (I[B.name] = K);
+          B && (C[B.name] = K);
         }
-        return I;
+        return C;
       } else {
         const M = c.getActiveArtboard();
         if (!M)
           throw new Error("[SnowconeCanvas] No active artboard found");
-        if (L === "blob") {
-          const I = await z(M.id, k);
-          return { [M.name]: I };
+        if (P === "blob") {
+          const C = await z(M.id, R);
+          return { [M.name]: C };
         } else {
-          const I = await C(M.id, k);
-          return { [M.name]: I };
+          const C = await I(M.id, R);
+          return { [M.name]: C };
         }
       }
     }
-  }), [C, X, z, j, r, l, d, i, f, c, h]), R(() => {
+  }), [I, X, z, j, r, l, d, i, f, c, h]), k(() => {
     b && b(async () => {
-      const L = c.getActiveArtboard();
-      if (!L)
+      const P = c.getActiveArtboard();
+      if (!P)
         throw new Error("[SnowconeCanvas] No active artboard found");
       const T = ue(
-        L.width,
-        L.height,
+        P.width,
+        P.height,
         l,
         d
-      ), $ = r === "blob" ? await z(L.id, { scale: T }) : await C(L.id, { scale: T });
-      return { [L.name]: $ };
+      ), $ = r === "blob" ? await z(P.id, { scale: T }) : await I(P.id, { scale: T });
+      return { [P.name]: $ };
     });
-  }, [b, C, z, c, r, l, d]);
+  }, [b, I, z, c, r, l, d]);
   const se = O(async () => {
-    if (!m && !u) return;
-    const P = ++oe.current, L = Date.now();
+    if (!g && !u) return;
+    const L = ++oe.current, P = Date.now();
     let T = l;
     if (d > 0 && isFinite(d))
-      for (const k of h) {
-        const M = ue(k.width, k.height, l, d);
+      for (const R of h) {
+        const M = ue(R.width, R.height, l, d);
         T = Math.min(T, M);
       }
     const $ = c.getActiveArtboard(), D = ($ == null ? void 0 : $.id) ?? "unknown";
-    u == null || u({ status: "rendering", artboardId: D }), ae.current = L;
+    u == null || u({ status: "rendering", artboardId: D }), ae.current = P;
     try {
-      let k;
+      let R;
       const M = {
         format: i,
         scale: T,
@@ -893,42 +893,42 @@ function $t(n, e) {
       };
       if (r === "blob")
         if (s) {
-          const I = await j(M);
-          k = {};
-          for (const [N, K] of Object.entries(I)) {
+          const C = await j(M);
+          R = {};
+          for (const [N, K] of Object.entries(C)) {
             const B = h.find((U) => U.id === N);
-            B && (k[B.name] = K);
+            B && (R[B.name] = K);
           }
         } else {
-          const I = c.getActiveArtboard();
-          if (!I) return;
-          const N = await z(I.id, M);
-          k = { [I.name]: N };
+          const C = c.getActiveArtboard();
+          if (!C) return;
+          const N = await z(C.id, M);
+          R = { [C.name]: N };
         }
       else if (s) {
-        const I = await X(M);
-        k = {};
-        for (const [N, K] of Object.entries(I)) {
+        const C = await X(M);
+        R = {};
+        for (const [N, K] of Object.entries(C)) {
           const B = h.find((U) => U.id === N);
-          B && (k[B.name] = K);
+          B && (R[B.name] = K);
         }
       } else {
-        const I = c.getActiveArtboard();
-        if (!I) return;
-        const N = await C(I.id, M);
-        k = { [I.name]: N };
+        const C = c.getActiveArtboard();
+        if (!C) return;
+        const N = await I(C.id, M);
+        R = { [C.name]: N };
       }
-      m == null || m(k), u == null || u({ status: "complete", artboardId: D, result: k });
-    } catch (k) {
-      const M = k instanceof Error ? k.message : String(k);
+      g == null || g(R), u == null || u({ status: "complete", artboardId: D, result: R });
+    } catch (R) {
+      const M = R instanceof Error ? R.message : String(R);
       if (M.includes("Canvas ref not available"))
         return;
-      const I = Date.now() - L;
-      _.error("Export failed (export #" + P + "):", {
-        duration: `${I}ms`,
+      const C = Date.now() - P;
+      _.error("Export failed (export #" + L + "):", {
+        duration: `${C}ms`,
         error: M
       });
-      const N = k instanceof Error ? k : new Error(M);
+      const N = R instanceof Error ? R : new Error(M);
       u == null || u({ status: "error", artboardId: D, error: N }), v({
         category: "export",
         message: N.message,
@@ -937,26 +937,26 @@ function $t(n, e) {
         recoverable: !0
       });
     }
-  }, [m, u, s, r, l, d, i, f, C, X, z, j, h, c, o, a, v]);
-  R(() => {
+  }, [g, u, s, r, l, d, i, f, I, X, z, j, h, c, o, a, v]);
+  k(() => {
     t !== void 0 && t > 0 && _.warn(
       "autoExportInterval is deprecated and ignored. Use autoExportConfig={{ enabled: true, debounceMs: 100, maxWaitMs: 1000 }} instead."
     );
   }, []);
   const ie = O(() => {
     if (p == null || p(), u) {
-      const P = c.getActiveArtboard();
-      u({ status: "scheduled", artboardId: (P == null ? void 0 : P.id) ?? "unknown" });
+      const L = c.getActiveArtboard();
+      u({ status: "scheduled", artboardId: (L == null ? void 0 : L.id) ?? "unknown" });
     }
-  }, [p, u, c]), q = St({
+  }, [p, u, c]), q = It({
     isCanvasReady: x,
     elements: o,
     hasInitialElements: w,
     initialElementsLoaded: A
   }), te = F(!1);
-  R(() => {
+  k(() => {
     q && !te.current && (te.current = !0, E == null || E());
-  }, [q, E]), Et({
+  }, [q, E]), yt({
     config: a ? {
       enabled: a.enabled ?? !0,
       debounceMs: a.debounceMs ?? 100,
@@ -965,25 +965,25 @@ function $t(n, e) {
       enabled: !1
       // Only use smart export if autoExportConfig is provided
     },
-    historyManager: g,
+    historyManager: m,
     artboards: h,
     elements: o,
     onExport: se,
     onExportScheduled: ie,
     isCanvasReady: q
     // Gate exports until content is fully ready (fonts loaded, elements deserialized)
-  }), R(() => {
+  }), k(() => {
     if (h.length > 0 && !x) {
-      const P = requestAnimationFrame(() => {
+      const L = requestAnimationFrame(() => {
         S(!0);
       });
-      return () => cancelAnimationFrame(P);
+      return () => cancelAnimationFrame(L);
     }
-  }, [h.length, x, S]), R(() => () => {
+  }, [h.length, x, S]), k(() => () => {
     S(!1);
   }, [S]);
 }
-const we = Q("SnowconeCanvas"), Ie = Ae((n, e) => {
+const we = Q("SnowconeCanvas"), ke = Ae((n, e) => {
   var Ee;
   const {
     exportConfig: t,
@@ -994,7 +994,7 @@ const we = Q("SnowconeCanvas"), Ie = Ae((n, e) => {
     activeArtboard: d,
     onArtboardChange: i,
     initialElements: f,
-    customFonts: m,
+    customFonts: g,
     onChange: p,
     onSelectionChange: u,
     autoExportInterval: b,
@@ -1004,60 +1004,64 @@ const we = Q("SnowconeCanvas"), Ie = Ae((n, e) => {
     onExportReady: v,
     onImageLoad: o,
     onImageError: c,
-    onError: g,
-    onReady: x,
-    className: S,
-    style: h,
-    enableShortcuts: C,
-    overlay: X,
-    resetDocumentOnMount: z
-  } = n, j = b, ae = n.autoExportConfig ?? (t == null ? void 0 : t.autoExportConfig), oe = n.autoExportFormat ?? (t == null ? void 0 : t.format) ?? "dataUrl", se = n.autoExportAll ?? (t == null ? void 0 : t.exportAll) ?? !1, ie = n.exportScale ?? (t == null ? void 0 : t.scale) ?? 2, q = n.maxExportSize ?? (t == null ? void 0 : t.maxSize) ?? 4e3, te = n.exportImageFormat ?? (t == null ? void 0 : t.imageFormat) ?? "png", P = n.exportImageQuality ?? (t == null ? void 0 : t.imageQuality) ?? 0.92, L = n.initialImage ?? (a == null ? void 0 : a.src), T = n.initialImageAlignment ?? (a == null ? void 0 : a.alignment) ?? "center", $ = n.initialImageScale ?? (a == null ? void 0 : a.scale) ?? 1, D = n.initialImageScaleMode ?? (a == null ? void 0 : a.scaleMode) ?? "cover", k = n.width ?? (r == null ? void 0 : r.width) ?? 1200, M = n.height ?? (r == null ? void 0 : r.height) ?? 1200, I = n.viewPadding ?? (r == null ? void 0 : r.viewPadding) ?? 0.9, N = n.artboardBorderRadius ?? (r == null ? void 0 : r.artboardBorderRadius) ?? 0, K = n.fixedMargin ?? (r == null ? void 0 : r.fixedMargin), B = n.maxHeight ?? (r == null ? void 0 : r.maxHeight), U = n.showRotationHandle ?? (r == null ? void 0 : r.showRotationHandle) ?? !0, Re = n.hideCanvas ?? (r == null ? void 0 : r.hideCanvas) ?? !1, ge = n.canvasWrapperClassName ?? (r == null ? void 0 : r.canvasWrapperClassName), he = n.canvasWrapperStyle ?? (r == null ? void 0 : r.canvasWrapperStyle), Ce = n.canvasCutouts ?? (r == null ? void 0 : r.canvasCutouts), pe = n.pieceGuides, Me = n.pieceFocus, Fe = C ?? !0, Y = Se(() => Ge(s ?? "pro-studio"), [s]);
-  R(() => {
+    onImageLoadError: m,
+    onError: x,
+    onReady: S,
+    className: h,
+    style: I,
+    enableShortcuts: X,
+    overlay: z,
+    resetDocumentOnMount: j
+  } = n, ae = b, oe = n.autoExportConfig ?? (t == null ? void 0 : t.autoExportConfig), se = n.autoExportFormat ?? (t == null ? void 0 : t.format) ?? "dataUrl", ie = n.autoExportAll ?? (t == null ? void 0 : t.exportAll) ?? !1, q = n.exportScale ?? (t == null ? void 0 : t.scale) ?? 2, te = n.maxExportSize ?? (t == null ? void 0 : t.maxSize) ?? 4e3, L = n.exportImageFormat ?? (t == null ? void 0 : t.imageFormat) ?? "png", P = n.exportImageQuality ?? (t == null ? void 0 : t.imageQuality) ?? 0.92, T = n.initialImage ?? (a == null ? void 0 : a.src), $ = n.initialImageAlignment ?? (a == null ? void 0 : a.alignment) ?? "center", D = n.initialImageScale ?? (a == null ? void 0 : a.scale) ?? 1, R = n.initialImageScaleMode ?? (a == null ? void 0 : a.scaleMode) ?? "cover", M = n.width ?? (r == null ? void 0 : r.width) ?? 1200, C = n.height ?? (r == null ? void 0 : r.height) ?? 1200, N = n.viewPadding ?? (r == null ? void 0 : r.viewPadding) ?? 0.9, K = n.artboardBorderRadius ?? (r == null ? void 0 : r.artboardBorderRadius) ?? 0, B = n.fixedMargin ?? (r == null ? void 0 : r.fixedMargin), U = n.maxHeight ?? (r == null ? void 0 : r.maxHeight), Re = n.showRotationHandle ?? (r == null ? void 0 : r.showRotationHandle) ?? !0, Ce = n.hideCanvas ?? (r == null ? void 0 : r.hideCanvas) ?? !1, ge = n.canvasWrapperClassName ?? (r == null ? void 0 : r.canvasWrapperClassName), he = n.canvasWrapperStyle ?? (r == null ? void 0 : r.canvasWrapperStyle), Me = n.canvasCutouts ?? (r == null ? void 0 : r.canvasCutouts), pe = n.pieceGuides, Fe = n.pieceFocus, Ne = X ?? !0, Y = Se(() => qe(s ?? "pro-studio"), [s]);
+  k(() => {
     var H;
     if (typeof G < "u" && ((H = G.env) == null ? void 0 : H.NODE_ENV) === "development" && Y) {
-      const W = Qe(Y);
+      const W = Je(Y);
       W.valid || we.warn("Kit validation warnings:", W.errors), W.warnings.length > 0 && we.warn("Kit validation warnings:", W.warnings);
     }
-  }, [Y]);
-  const { emitError: ce, handleBoundaryError: Ne } = Lt(g);
-  Tt({
+  }, [Y]), k(() => {
+    if (m)
+      return We(m);
+  }, [m]);
+  const { emitError: ce, handleBoundaryError: Le } = Dt(x);
+  Bt({
     artboardConfigs: l,
-    width: k,
-    height: M,
+    width: M,
+    height: C,
     pieceGuides: pe,
     controlledActiveArtboard: d,
     onArtboardChange: i,
-    resetDocumentOnMount: z
+    resetDocumentOnMount: j
   });
-  const { initialElementsLoadedState: Pe } = Dt({
+  const { initialElementsLoadedState: Pe } = Wt({
     initialElements: f,
-    customFonts: m,
+    customFonts: g,
     emitError: ce
-  }), { imageLoadingState: be, imageError: ve } = Bt({
-    initialImage: L,
-    initialImageAlignment: T,
-    initialImageScale: $,
-    initialImageScaleMode: D,
+  }), { imageLoadingState: be, imageError: ve } = $t({
+    initialImage: T,
+    initialImageAlignment: $,
+    initialImageScale: D,
+    initialImageScaleMode: R,
     artboardConfigs: l,
     onImageLoad: o,
     onImageError: c,
     emitError: ce
   });
-  if (Wt({ onChange: p, onSelectionChange: u }), $t(
+  if (Ht({ onChange: p, onSelectionChange: u }), zt(
     {
-      autoExportInterval: j,
-      autoExportConfig: ae,
-      autoExportFormat: oe,
-      autoExportAll: se,
-      exportScale: ie,
-      maxExportSize: q,
-      exportImageFormat: te,
+      autoExportInterval: ae,
+      autoExportConfig: oe,
+      autoExportFormat: se,
+      autoExportAll: ie,
+      exportScale: q,
+      maxExportSize: te,
+      exportImageFormat: L,
       exportImageQuality: P,
       onExport: E,
       onExportScheduled: w,
       onExportStatus: A,
       onExportReady: v,
-      onReady: x,
+      onReady: S,
       hasInitialElements: !!f && f.length > 0,
       initialElementsLoaded: Pe,
       emitError: ce
@@ -1067,24 +1071,24 @@ const we = Q("SnowconeCanvas"), Ie = Ae((n, e) => {
     return /* @__PURE__ */ y(
       "div",
       {
-        className: S,
+        className: h,
         style: {
-          ...h,
+          ...I,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
           backgroundColor: "var(--surface, #f5f5f5)"
         },
-        children: /* @__PURE__ */ y(qe, { size: 48 })
+        children: /* @__PURE__ */ y(Ze, { size: 48 })
       }
     );
   if (be === "error" && ve)
     return /* @__PURE__ */ y(
       "div",
       {
-        className: S,
+        className: h,
         style: {
-          ...h,
+          ...I,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -1098,13 +1102,13 @@ const we = Q("SnowconeCanvas"), Ie = Ae((n, e) => {
         ] })
       }
     );
-  const Le = Object.entries(((Ee = Y.layout) == null ? void 0 : Ee.slots) ?? {}).every(
+  const Te = Object.entries(((Ee = Y.layout) == null ? void 0 : Ee.slots) ?? {}).every(
     ([H, W]) => H === "canvas" || !W || W.length === 0
   ) ? { "--color-canvas-bg": "transparent" } : void 0;
-  return /* @__PURE__ */ y(Je, { kit: Y, children: /* @__PURE__ */ y("div", { className: `sc-root ${S || ""}`, style: { ...Le, ...h, position: "relative" }, children: /* @__PURE__ */ V(
-    pt,
+  return /* @__PURE__ */ y(_e, { kit: Y, children: /* @__PURE__ */ y("div", { className: `sc-root ${h || ""}`, style: { ...Te, ...I, position: "relative" }, children: /* @__PURE__ */ V(
+    vt,
     {
-      onError: Ne,
+      onError: Le,
       fallback: (H, W) => /* @__PURE__ */ V(
         "div",
         {
@@ -1144,49 +1148,49 @@ const we = Q("SnowconeCanvas"), Ie = Ae((n, e) => {
         }
       ),
       children: [
-        !Re && /* @__PURE__ */ (() => {
+        !Ce && /* @__PURE__ */ (() => {
           const H = /* @__PURE__ */ y(
-            Ze,
+            et,
             {
               style: { width: "100%" },
-              fitPadding: I,
-              artboardBorderRadius: N,
-              fixedMargin: K,
-              maxHeight: B,
-              showRotationHandle: U,
-              enableShortcuts: Fe,
-              canvasCutouts: Ce,
+              fitPadding: N,
+              artboardBorderRadius: K,
+              fixedMargin: B,
+              maxHeight: U,
+              showRotationHandle: Re,
+              enableShortcuts: Ne,
+              canvasCutouts: Me,
               pieceGuides: pe,
-              pieceFocus: Me
+              pieceFocus: Fe
             }
           );
-          return /* @__PURE__ */ y(gt, { kit: Y, canvas: ge || he ? /* @__PURE__ */ y("div", { className: ge, style: he, children: H }) : H });
+          return /* @__PURE__ */ y(pt, { kit: Y, canvas: ge || he ? /* @__PURE__ */ y("div", { className: ge, style: he, children: H }) : H });
         })(),
-        X
+        z
       ]
     }
   ) }) });
 });
-Ie.displayName = "SnowconeCanvasInner";
-const Ht = Ae((n, e) => {
+ke.displayName = "SnowconeCanvasInner";
+const Ot = Ae((n, e) => {
   var l;
   const { inheritTheme: t, externalProvider: a, services: r } = n, s = n.viewPadding ?? ((l = n.layoutConfig) == null ? void 0 : l.viewPadding);
   return /* @__PURE__ */ y(
-    bt,
+    Et,
     {
       inheritTheme: t,
       externalProvider: a,
       services: r,
       viewPadding: s,
-      children: /* @__PURE__ */ y(Ie, { ref: e, ...n })
+      children: /* @__PURE__ */ y(ke, { ref: e, ...n })
     }
   );
 });
-Ht.displayName = "SnowconeCanvas";
+Ot.displayName = "SnowconeCanvas";
 export {
-  pt as E,
-  Ht as S,
-  St as a,
-  Et as u
+  vt as E,
+  Ot as S,
+  It as a,
+  yt as u
 };
-//# sourceMappingURL=SnowconeCanvas-DjQFFTDh.js.map
+//# sourceMappingURL=SnowconeCanvas-h8cfofsO.js.map