@snowcone-app/canvas 0.17.2 → 0.17.3

package/dist/{SnowconeCanvas-wdckG-6O.js → SnowconeCanvas-DBbmx9qW.js}

@@ -1,20 +1,20 @@
-import { y as V, c as G, al as Pe, I as De } from "./FontAnalyzer-CLv7_msL.js";
-import { jsxs as X, jsx as E, Fragment as Ae } from "react/jsx-runtime";
-import { useMemo as ke, useRef as F, useEffect as C, Component as We, useState as Z, useCallback as H, useImperativeHandle as $e, forwardRef as Re } from "react";
-import { ag as be, ah as ve, a6 as He, L as Ue, t as ze, u as Ke, I as Oe, G as Xe, h as Ye, o as je, a1 as Ve, J as Ee, p as Ge, a7 as xe, a3 as Qe, i as Je, q as qe, r as Ze, v as _e, U as et, z as tt, l as rt } from "./validation-C795COGQ.js";
-import { a as nt } from "./template-fields-Z9x13sjM.js";
-import { E as at, u as ee } from "./EditorContext-CGkfmbgo.js";
-import { T as ye } from "./ThemeContext-Rjz25x9X.js";
-import { C as ot, u as ue, f as st } from "./UnifiedFontService-Dsu5cwfT.js";
+import { y as G, c as Q, al as We, I as $e } from "./FontAnalyzer-CLv7_msL.js";
+import { jsxs as X, jsx as E, Fragment as ke } from "react/jsx-runtime";
+import { useMemo as Ie, useRef as F, useEffect as C, Component as He, useState as Z, useCallback as z, useImperativeHandle as Ue, forwardRef as Re } from "react";
+import { ag as ve, ah as Ee, a6 as ze, L as Oe, t as Ke, u as Xe, I as je, G as Ye, h as Ve, o as Ge, a1 as Qe, J as xe, p as Je, a7 as ye, a3 as qe, i as Ze, q as _e, r as et, v as tt, U as rt, z as nt, l as at } from "./validation-C795COGQ.js";
+import { a as ot } from "./template-fields-Z9x13sjM.js";
+import { E as st, u as ee } from "./EditorContext-CGkfmbgo.js";
+import { T as we } from "./ThemeContext-Rjz25x9X.js";
+import { C as it, u as ue, f as ct } from "./UnifiedFontService-Dsu5cwfT.js";
 import { C as ce } from "./ImportManager-C_wBjWaV.js";
-import { C as it } from "./ElementFactory-CuHSAPfg.js";
-const ct = () => {
-  const { undo: n, redo: e, canUndo: t, canRedo: a } = nt();
+import { C as lt } from "./ElementFactory-CuHSAPfg.js";
+const dt = () => {
+  const { undo: n, redo: e, canUndo: t, canRedo: a } = ot();
   return /* @__PURE__ */ X("div", { className: "sc-undo-redo", style: { display: "inline-flex", gap: 4 }, children: [
     /* @__PURE__ */ E(
-      be,
+      ve,
       {
-        icon: ve.undo,
+        icon: Ee.undo,
         onClick: n,
         disabled: !t,
         tooltip: "Undo",
@@ -22,9 +22,9 @@ const ct = () => {
       }
     ),
     /* @__PURE__ */ E(
-      be,
+      ve,
       {
-        icon: ve.redo,
+        icon: Ee.redo,
         onClick: e,
         disabled: !a,
         tooltip: "Redo",
@@ -32,59 +32,59 @@ const ct = () => {
       }
     )
   ] });
-}, Ie = G("KitLayout"), q = "canvas", le = 320;
-let we = !1;
-function lt() {
-  we || (we = !0, He({
-    LayersPanel: Ue,
-    EffectsPanel: ze,
-    ExportPanel: Ke,
-    ImagePanel: Oe,
-    GlyphPanel: Xe,
-    ArtboardTabs: Ye,
-    ContextualToolbars: je,
-    ZoomControls: Ve,
-    MenuButton: Ee,
-    CropPanel: Ge
-  }), xe("add-element-menu", {
-    component: Ee,
+}, Ce = Q("KitLayout"), q = "canvas", le = 320;
+let Se = !1;
+function ut() {
+  Se || (Se = !0, ze({
+    LayersPanel: Oe,
+    EffectsPanel: Ke,
+    ExportPanel: Xe,
+    ImagePanel: je,
+    GlyphPanel: Ye,
+    ArtboardTabs: Ve,
+    ContextualToolbars: Ge,
+    ZoomControls: Qe,
+    MenuButton: xe,
+    CropPanel: Je
+  }), ye("add-element-menu", {
+    component: xe,
     label: "Add Element",
     icon: "gravity-ui:plus",
     position: "topbar"
-  }), xe("undo-redo-controls", {
-    component: ct,
+  }), ye("undo-redo-controls", {
+    component: dt,
     label: "Undo / Redo",
     icon: "lucide:undo-2",
     position: "topbar"
   }));
 }
 function re({ ids: n }) {
-  return !n || n.length === 0 ? null : /* @__PURE__ */ E(Ae, { children: n.map((e) => {
+  return !n || n.length === 0 ? null : /* @__PURE__ */ E(ke, { children: n.map((e) => {
     var r;
     if (e === q) return null;
-    const t = Qe(e);
+    const t = qe(e);
     if (!t)
-      return typeof V < "u" && ((r = V.env) == null ? void 0 : r.NODE_ENV) === "development" && Ie.warn(
+      return typeof G < "u" && ((r = G.env) == null ? void 0 : r.NODE_ENV) === "development" && Ce.warn(
         `Kit layout references unknown section "${e}" — skipping. Register it with registerSection("${e}", { ... }).`
       ), null;
     const a = t.component;
     return /* @__PURE__ */ E(a, {}, e);
   }) });
 }
-function dt({ kit: n, canvas: e }) {
+function ft({ kit: n, canvas: e }) {
   var p, l, g, w;
-  lt();
-  const t = n.layout.slots, a = !!((p = t.topbar) != null && p.some((m) => m !== q)), r = !!((l = t.left) != null && l.some((m) => m !== q)), s = !!((g = t.right) != null && g.some((m) => m !== q)), c = !!((w = t.bottombar) != null && w.some((m) => m !== q)), d = ke(
+  ut();
+  const t = n.layout.slots, a = !!((p = t.topbar) != null && p.some((m) => m !== q)), r = !!((l = t.left) != null && l.some((m) => m !== q)), s = !!((g = t.right) != null && g.some((m) => m !== q)), c = !!((w = t.bottombar) != null && w.some((m) => m !== q)), d = Ie(
     () => !a && !r && !s && !c,
     [a, r, s, c]
   ), o = F(null), f = a || r || s || c, h = F(!1);
   return C(() => {
     var i;
-    if (typeof V > "u" || ((i = V.env) == null ? void 0 : i.NODE_ENV) !== "development" || !f) return;
+    if (typeof G > "u" || ((i = G.env) == null ? void 0 : i.NODE_ENV) !== "development" || !f) return;
     const m = o.current;
     if (!m || typeof ResizeObserver > "u") return;
     const A = (u) => {
-      u > 0 && u < le && !h.current ? (h.current = !0, Ie.warn(
+      u > 0 && u < le && !h.current ? (h.current = !0, Ce.warn(
         `Kit "${n.name}" declares chrome (toolbar / panels) but its container is only ${Math.round(u)}px wide — below the ~${le}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.`
       )) : u >= le && (h.current = !1);
     };
@@ -93,7 +93,7 @@ function dt({ kit: n, canvas: e }) {
       for (const x of u) A(x.contentRect.width);
     });
     return v.observe(m), () => v.disconnect();
-  }, [f, n.name]), d ? /* @__PURE__ */ E(Ae, { children: e }) : /* @__PURE__ */ X("div", { ref: o, className: "sc-kit-layout", style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
+  }, [f, n.name]), d ? /* @__PURE__ */ E(ke, { children: e }) : /* @__PURE__ */ X("div", { ref: o, className: "sc-kit-layout", style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
     a && /* @__PURE__ */ E(
       "div",
       {
@@ -117,8 +117,8 @@ function dt({ kit: n, canvas: e }) {
     )
   ] });
 }
-const ut = G("ErrorBoundary");
-class ft extends We {
+const mt = Q("ErrorBoundary");
+class ht extends He {
   constructor(e) {
     super(e), this.resetError = () => {
       this.setState({
@@ -137,7 +137,7 @@ class ft extends We {
     };
   }
   componentDidCatch(e, t) {
-    if (ut.error("Caught error:", e, t), this.props.onError && this.props.onError(e, t), this.props.onCanvasError) {
+    if (mt.error("Caught error:", e, t), this.props.onError && this.props.onError(e, t), this.props.onCanvasError) {
       const a = {
         category: "unknown",
         message: e.message,
@@ -198,18 +198,18 @@ class ft extends We {
     ) : this.props.children;
   }
 }
-function mt({
+function gt({
   inheritTheme: n,
   externalProvider: e,
   services: t,
   viewPadding: a,
   children: r
 }) {
-  const s = e ? /* @__PURE__ */ E(ye, { defaultTheme: "light", passive: n, children: r }) : /* @__PURE__ */ E(ye, { defaultTheme: "light", passive: n, children: /* @__PURE__ */ E(at, { viewPadding: a, children: r }) });
-  return t ? /* @__PURE__ */ E(ot, { services: t, children: s }) : s;
+  const s = e ? /* @__PURE__ */ E(we, { defaultTheme: "light", passive: n, children: r }) : /* @__PURE__ */ E(we, { defaultTheme: "light", passive: n, children: /* @__PURE__ */ E(st, { viewPadding: a, children: r }) });
+  return t ? /* @__PURE__ */ E(it, { services: t, children: s }) : s;
 }
-const ht = G("useAutoExport");
-function gt(n) {
+const pt = Q("useAutoExport");
+function bt(n) {
   const { config: e, historyManager: t, artboards: a, elements: r, onExport: s, onExportScheduled: c, isCanvasReady: d = !1 } = n, o = F(null), f = F(!1), h = F({
     totalExports: 0,
     skippedExports: 0,
@@ -217,15 +217,15 @@ function gt(n) {
     avgExportInterval: 0
   }), [p, l] = Z(h.current), g = F(s);
   g.current = s, C(() => {
-    const i = new Je({
-      ...qe,
+    const i = new Ze({
+      ..._e,
       ...e
     });
     return i.onExport(async () => {
       try {
         await g.current(), h.current = i.getStats();
       } catch (u) {
-        ht.error("[useAutoExport] Export failed:", u);
+        pt.error("[useAutoExport] Export failed:", u);
       }
     }), o.current = i, () => {
       i.destroy();
@@ -259,17 +259,17 @@ function gt(n) {
       }
       o.current.scheduleExport();
     }
-  }, [r, a, d]), C(() => Pe((u) => {
+  }, [r, a, d]), C(() => We((u) => {
     if (!o.current || !d) return;
     r.some((y) => y.id === u) && o.current.scheduleExport();
   }), [r, d]);
-  const w = H((i) => {
+  const w = z((i) => {
     o.current && o.current.updateConfig(i);
-  }, []), m = H(async () => {
+  }, []), m = z(async () => {
     o.current && (await o.current.forceExport(), h.current = o.current.getStats(), l(h.current));
-  }, []), A = H(() => {
+  }, []), A = z(() => {
     o.current && (o.current.resetStats(), h.current = o.current.getStats(), l(h.current));
-  }, []), v = H(() => {
+  }, []), v = z(() => {
     o.current && o.current.resetChangeDetection();
   }, []);
   return {
@@ -280,8 +280,8 @@ function gt(n) {
     resetChangeDetection: v
   };
 }
-const Ce = G("useContentReady");
-function pt(n) {
+const Me = Q("useContentReady");
+function vt(n) {
   var t;
   const e = /* @__PURE__ */ new Set();
   for (const a of n)
@@ -295,7 +295,7 @@ function pt(n) {
       }
   return Array.from(e);
 }
-async function bt(n) {
+async function Et(n) {
   if (n.length === 0 || typeof document > "u" || !document.fonts) return;
   const e = [];
   for (const t of n) {
@@ -305,12 +305,12 @@ async function bt(n) {
   await Promise.all(e), document.fonts.ready && await Promise.race([
     document.fonts.ready,
     new Promise((t) => setTimeout(t, 250))
-  ]), Ce.debug(`Awaited ${e.length} font(s)`);
+  ]), Me.debug(`Awaited ${e.length} font(s)`);
 }
-function vt() {
+function xt() {
   return new Promise((n) => requestAnimationFrame(() => n()));
 }
-function Et(n) {
+function yt(n) {
   const { isCanvasReady: e, elements: t, hasInitialElements: a, initialElementsLoaded: r } = n, [s, c] = Z(!1), d = F(!1);
   return C(() => {
     if (s || !e || a && !r || a && t.length === 0 || d.current) return;
@@ -318,11 +318,11 @@ function Et(n) {
     let o = !1;
     return (async () => {
       try {
-        const f = pt(t);
-        if (f.length > 0 && (await bt(f), o) || (await vt(), o)) return;
+        const f = vt(t);
+        if (f.length > 0 && (await Et(f), o) || (await xt(), o)) return;
         c(!0);
       } catch (f) {
-        Ce.error("Error during content readiness check:", f), o || c(!0);
+        Me.error("Error during content readiness check:", f), o || c(!0);
       } finally {
         d.current = !1;
       }
@@ -331,7 +331,7 @@ function Et(n) {
     };
   }, [e, t, a, r, s]), s;
 }
-const xt = {
+const wt = {
   // Vertical alignments (map to top/center/bottom center)
   "far-top": "t",
   top: "t",
@@ -354,10 +354,10 @@ const xt = {
   b: "b",
   br: "br"
 };
-function yt(n) {
-  return n && xt[n] || "c";
+function St(n) {
+  return n && wt[n] || "c";
 }
-function wt(n, e) {
+function At(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, c = (t === "contain" ? e.marginLeft : 0) || 0, d = e.width - c - r, o = e.height - a - s, f = d / n.width, h = o / n.height, p = t === "contain" ? Math.min(f, h) : Math.max(f, h), l = e.scale || 1, g = p * l, w = n.width * g, m = n.height * g, A = e.align || "c";
   let v = 0, i = 0;
   const u = w - d, x = m - o;
@@ -416,13 +416,13 @@ function wt(n, e) {
     }
   };
 }
-const St = {
+const kt = {
   timeout: 3e4,
   retries: 1,
   retryDelay: 1e3,
   validateUrl: !0
 };
-function At(n) {
+function It(n) {
   try {
     const e = new URL(n);
     return ["http:", "https:", "data:", "blob:"].includes(e.protocol);
@@ -430,9 +430,9 @@ function At(n) {
     return !1;
   }
 }
-async function kt(n, e = {}) {
-  const t = { ...St, ...e };
-  if (t.validateUrl && !At(n))
+async function Rt(n, e = {}) {
+  const t = { ...kt, ...e };
+  if (t.validateUrl && !It(n))
     return {
       success: !1,
       error: new Error(`Invalid image URL: ${n}`)
@@ -440,16 +440,16 @@ async function kt(n, e = {}) {
   let a;
   for (let r = 0; r <= t.retries; r++)
     try {
-      return await Rt(n, t.timeout);
+      return await Ct(n, t.timeout);
     } catch (s) {
-      a = s instanceof Error ? s : new Error(String(s)), r < t.retries && await Ct(t.retryDelay);
+      a = s instanceof Error ? s : new Error(String(s)), r < t.retries && await Ft(t.retryDelay);
     }
   return {
     success: !1,
     error: a || new Error("Failed to load image after retries")
   };
 }
-function Rt(n, e) {
+function Ct(n, e) {
   return new Promise((t) => {
     const a = new Image();
     a.crossOrigin = "anonymous";
@@ -480,9 +480,9 @@ function Rt(n, e) {
     }, e), a.src = n;
   });
 }
-async function It(n, e, t = {}, a = {}) {
+async function Mt(n, e, t = {}, a = {}) {
   var l, g, w, m, A, v, i;
-  const r = await kt(n, a);
+  const r = await Rt(n, a);
   if (!r.success || !r.width || !r.height)
     return {
       success: !1,
@@ -492,7 +492,7 @@ async function It(n, e, t = {}, a = {}) {
     width: e.artboard.width,
     height: e.artboard.height,
     scale: e.scale,
-    align: yt(e.alignment),
+    align: St(e.alignment),
     offsetX: e.offsetX,
     offsetY: e.offsetY,
     scaleMode: e.scaleMode,
@@ -500,13 +500,13 @@ async function It(n, e, t = {}, a = {}) {
     marginRight: e.marginRight,
     marginBottom: e.marginBottom,
     marginLeft: e.marginLeft
-  }, c = wt(
+  }, c = At(
     { width: r.width, height: r.height },
     s
   ), d = e.artboard.x + c.x, o = e.artboard.y + c.y, f = d + c.width / 2, h = o + c.height / 2;
   return {
     success: !0,
-    element: new De({
+    element: new $e({
       ...t,
       x: f,
       y: h,
@@ -535,10 +535,10 @@ async function It(n, e, t = {}, a = {}) {
     }
   };
 }
-function Ct(n) {
+function Ft(n) {
   return new Promise((e) => setTimeout(e, n));
 }
-const _ = G("SnowconeCanvas");
+const _ = Q("SnowconeCanvas");
 function de(n, e, t, a) {
   if (a <= 0 || !isFinite(a))
     return t;
@@ -548,17 +548,17 @@ function de(n, e, t, a) {
   const d = Math.max(n, e), o = a / d;
   return Math.min(o, t);
 }
-function Mt(n) {
+function Nt(n) {
   const e = F(n);
   e.current = n;
-  const t = H((r) => {
+  const t = z((r) => {
     var s;
     _.error(`[${r.category}] ${r.message}`, r.originalError), (s = e.current) == null || s.call(e, r);
   }, []);
   C(() => (ce.onRenderError = t, () => {
     ce.onRenderError === t && (ce.onRenderError = null);
   }), [t]);
-  const a = H((r) => {
+  const a = z((r) => {
     t({
       category: "unknown",
       message: r.message,
@@ -568,7 +568,7 @@ function Mt(n) {
   }, [t]);
   return { emitError: t, handleBoundaryError: a };
 }
-function Ft(n) {
+function Tt(n) {
   const {
     artboardConfigs: e,
     width: t,
@@ -633,13 +633,13 @@ function Ft(n) {
     i && c(i.name);
   }, [p.getActiveArtboardId()]);
 }
-function Nt(n) {
+function Lt(n) {
   const { initialElements: e, emitError: t } = n, { setElements: a, artboardManager: r } = ee(), s = F(!1), [c, d] = Z(!1);
   return C(() => {
     if (!(!e || e.length === 0) && !s.current) {
       s.current = !0, d(!0);
       try {
-        const o = it.createManyFromJSON(e), f = r.getAllArtboards();
+        const o = lt.createManyFromJSON(e), f = r.getAllArtboards();
         if (f.length > 0) {
           const p = new Map(f.map((l) => [l.name, l]));
           o.forEach((l, g) => {
@@ -697,7 +697,7 @@ function Nt(n) {
     }
   }, [e, r, a, t]), { initialElementsLoadedState: c };
 }
-function Tt(n) {
+function Bt(n) {
   const {
     initialImage: e,
     initialImageAlignment: t,
@@ -722,7 +722,7 @@ function Tt(n) {
           throw new Error("No artboards available");
         const u = [];
         for (const x of i) {
-          const y = s == null ? void 0 : s.find((M) => M.name === x.name), S = (y == null ? void 0 : y.scaleMode) || r, b = await It(
+          const y = s == null ? void 0 : s.find((M) => M.name === x.name), S = (y == null ? void 0 : y.scaleMode) || r, b = await Mt(
             e,
             {
               artboard: {
@@ -765,7 +765,7 @@ function Tt(n) {
     })();
   }, [e, t, a, r]), { imageLoadingState: l, imageError: w };
 }
-function Lt(n) {
+function Pt(n) {
   const { onChange: e, onSelectionChange: t } = n, { elements: a, selectedId: r, artboardManager: s } = ee(), { artboards: c } = ue(), d = F(t);
   d.current = t, C(() => {
     var f;
@@ -801,7 +801,7 @@ function Lt(n) {
     f(p);
   }, [a, c]);
 }
-function Bt(n, e) {
+function Dt(n, e) {
   const {
     autoExportInterval: t,
     autoExportConfig: a,
@@ -825,38 +825,38 @@ function Bt(n, e) {
     historyManager: x,
     isCanvasReady: y,
     setCanvasReady: S
-  } = ee(), { artboards: b } = ue(), { exportArtboard: M, exportAllArtboards: Y, exportArtboardAsBlob: $, exportAllArtboardsAsBlobs: j } = st(), ne = F(0), ae = F(0);
-  $e(e, () => ({
+  } = ee(), { artboards: b } = ue(), { exportArtboard: M, exportAllArtboards: j, exportArtboardAsBlob: U, exportAllArtboardsAsBlobs: Y } = ct(), ne = F(0), ae = F(0);
+  Ue(e, () => ({
     exportArtboards: async (T = {}) => {
-      const L = T.format || r, B = T.scale || c, W = T.all ?? !1;
+      const L = T.format || r, B = T.scale || c, $ = T.all ?? !1;
       let P = B;
       if (d > 0 && isFinite(d))
-        for (const I of b) {
-          const R = de(I.width, I.height, B, d);
-          P = Math.min(P, R);
+        for (const R of b) {
+          const I = de(R.width, R.height, B, d);
+          P = Math.min(P, I);
         }
       const k = { scale: P, format: o, quality: f };
-      if (W) {
-        const I = L === "blob" ? await j(k) : await Y(k), R = {};
-        for (const [N, U] of Object.entries(I)) {
-          const D = b.find((z) => z.id === N);
-          D && (R[D.name] = U);
+      if ($) {
+        const R = L === "blob" ? await Y(k) : await j(k), I = {};
+        for (const [N, O] of Object.entries(R)) {
+          const D = b.find((K) => K.id === N);
+          D && (I[D.name] = O);
         }
-        return R;
+        return I;
       } else {
-        const I = u.getActiveArtboard();
-        if (!I)
+        const R = u.getActiveArtboard();
+        if (!R)
           throw new Error("[SnowconeCanvas] No active artboard found");
         if (L === "blob") {
-          const R = await $(I.id, k);
-          return { [I.name]: R };
+          const I = await U(R.id, k);
+          return { [R.name]: I };
         } else {
-          const R = await M(I.id, k);
-          return { [I.name]: R };
+          const I = await M(R.id, k);
+          return { [R.name]: I };
         }
       }
     }
-  }), [M, Y, $, j, r, c, d, o, f, u, b]), C(() => {
+  }), [M, j, U, Y, r, c, d, o, f, u, b]), C(() => {
     g && g(async () => {
       const L = u.getActiveArtboard();
       if (!L)
@@ -866,66 +866,66 @@ function Bt(n, e) {
         L.height,
         c,
         d
-      ), W = r === "blob" ? await $(L.id, { scale: B }) : await M(L.id, { scale: B });
-      return { [L.name]: W };
+      ), $ = r === "blob" ? await U(L.id, { scale: B }) : await M(L.id, { scale: B });
+      return { [L.name]: $ };
     });
-  }, [g, M, $, u, r, c, d]);
-  const oe = H(async () => {
+  }, [g, M, U, u, r, c, d]);
+  const oe = z(async () => {
     if (!h && !l) return;
     const T = ++ae.current, L = Date.now();
     let B = c;
     if (d > 0 && isFinite(d))
       for (const k of b) {
-        const I = de(k.width, k.height, c, d);
-        B = Math.min(B, I);
+        const R = de(k.width, k.height, c, d);
+        B = Math.min(B, R);
       }
-    const W = u.getActiveArtboard(), P = (W == null ? void 0 : W.id) ?? "unknown";
+    const $ = u.getActiveArtboard(), P = ($ == null ? void 0 : $.id) ?? "unknown";
     l == null || l({ status: "rendering", artboardId: P }), ne.current = L;
     try {
       let k;
-      const I = {
+      const R = {
         format: o,
         scale: B,
         quality: f
       };
       if (r === "blob")
         if (s) {
-          const R = await j(I);
+          const I = await Y(R);
           k = {};
-          for (const [N, U] of Object.entries(R)) {
-            const D = b.find((z) => z.id === N);
-            D && (k[D.name] = U);
+          for (const [N, O] of Object.entries(I)) {
+            const D = b.find((K) => K.id === N);
+            D && (k[D.name] = O);
           }
         } else {
-          const R = u.getActiveArtboard();
-          if (!R) return;
-          const N = await $(R.id, I);
-          k = { [R.name]: N };
+          const I = u.getActiveArtboard();
+          if (!I) return;
+          const N = await U(I.id, R);
+          k = { [I.name]: N };
         }
       else if (s) {
-        const R = await Y(I);
+        const I = await j(R);
         k = {};
-        for (const [N, U] of Object.entries(R)) {
-          const D = b.find((z) => z.id === N);
-          D && (k[D.name] = U);
+        for (const [N, O] of Object.entries(I)) {
+          const D = b.find((K) => K.id === N);
+          D && (k[D.name] = O);
         }
       } else {
-        const R = u.getActiveArtboard();
-        if (!R) return;
-        const N = await M(R.id, I);
-        k = { [R.name]: N };
+        const I = u.getActiveArtboard();
+        if (!I) return;
+        const N = await M(I.id, R);
+        k = { [I.name]: N };
       }
       h == null || h(k), l == null || l({ status: "complete", artboardId: P, result: k });
     } catch (k) {
-      const I = k instanceof Error ? k.message : String(k);
-      if (I.includes("Canvas ref not available"))
+      const R = k instanceof Error ? k.message : String(k);
+      if (R.includes("Canvas ref not available"))
         return;
-      const R = Date.now() - L;
+      const I = Date.now() - L;
       _.error("Export failed (export #" + T + "):", {
-        duration: `${R}ms`,
-        error: I
+        duration: `${I}ms`,
+        error: R
       });
-      const N = k instanceof Error ? k : new Error(I);
+      const N = k instanceof Error ? k : new Error(R);
       l == null || l({ status: "error", artboardId: P, error: N }), v({
         category: "export",
         message: N.message,
@@ -934,26 +934,26 @@ function Bt(n, e) {
         recoverable: !0
       });
     }
-  }, [h, l, s, r, c, d, o, f, M, Y, $, j, b, u, i, a, v]);
+  }, [h, l, s, r, c, d, o, f, M, j, U, Y, b, u, i, a, v]);
   C(() => {
     t !== void 0 && t > 0 && _.warn(
       "autoExportInterval is deprecated and ignored. Use autoExportConfig={{ enabled: true, debounceMs: 100, maxWaitMs: 1000 }} instead."
     );
   }, []);
-  const se = H(() => {
+  const se = z(() => {
     if (p == null || p(), l) {
       const T = u.getActiveArtboard();
       l({ status: "scheduled", artboardId: (T == null ? void 0 : T.id) ?? "unknown" });
     }
-  }, [p, l, u]), Q = Et({
+  }, [p, l, u]), J = yt({
     isCanvasReady: y,
     elements: i,
     hasInitialElements: m,
     initialElementsLoaded: A
   }), te = F(!1);
   C(() => {
-    Q && !te.current && (te.current = !0, w == null || w());
-  }, [Q, w]), gt({
+    J && !te.current && (te.current = !0, w == null || w());
+  }, [J, w]), bt({
     config: a ? {
       enabled: a.enabled ?? !0,
       debounceMs: a.debounceMs ?? 100,
@@ -967,7 +967,7 @@ function Bt(n, e) {
     elements: i,
     onExport: oe,
     onExportScheduled: se,
-    isCanvasReady: Q
+    isCanvasReady: J
     // Gate exports until content is fully ready (fonts loaded, elements deserialized)
   }), C(() => {
     if (b.length > 0 && !y) {
@@ -980,7 +980,8 @@ function Bt(n, e) {
     S(!1);
   }, [S]);
 }
-const Se = G("SnowconeCanvas"), Me = Re((n, e) => {
+const Ae = Q("SnowconeCanvas"), Fe = Re((n, e) => {
+  var be;
   const {
     exportConfig: t,
     imageConfig: a,
@@ -1005,47 +1006,47 @@ const Se = G("SnowconeCanvas"), Me = Re((n, e) => {
     style: S,
     enableShortcuts: b,
     overlay: M,
-    resetDocumentOnMount: Y
-  } = n, $ = l, j = n.autoExportConfig ?? (t == null ? void 0 : t.autoExportConfig), ne = n.autoExportFormat ?? (t == null ? void 0 : t.format) ?? "dataUrl", ae = n.autoExportAll ?? (t == null ? void 0 : t.exportAll) ?? !1, oe = n.exportScale ?? (t == null ? void 0 : t.scale) ?? 2, se = n.maxExportSize ?? (t == null ? void 0 : t.maxSize) ?? 4e3, Q = n.exportImageFormat ?? (t == null ? void 0 : t.imageFormat) ?? "png", te = n.exportImageQuality ?? (t == null ? void 0 : t.imageQuality) ?? 0.92, T = n.initialImage ?? (a == null ? void 0 : a.src), L = n.initialImageAlignment ?? (a == null ? void 0 : a.alignment) ?? "center", B = n.initialImageScale ?? (a == null ? void 0 : a.scale) ?? 1, W = n.initialImageScaleMode ?? (a == null ? void 0 : a.scaleMode) ?? "cover", P = n.width ?? (r == null ? void 0 : r.width) ?? 1200, k = n.height ?? (r == null ? void 0 : r.height) ?? 1200, I = n.viewPadding ?? (r == null ? void 0 : r.viewPadding) ?? 0.9, R = n.artboardBorderRadius ?? (r == null ? void 0 : r.artboardBorderRadius) ?? 0, N = n.fixedMargin ?? (r == null ? void 0 : r.fixedMargin), U = n.maxHeight ?? (r == null ? void 0 : r.maxHeight), D = n.showRotationHandle ?? (r == null ? void 0 : r.showRotationHandle) ?? !0, z = n.hideCanvas ?? (r == null ? void 0 : r.hideCanvas) ?? !1, fe = n.canvasWrapperClassName ?? (r == null ? void 0 : r.canvasWrapperClassName), me = n.canvasWrapperStyle ?? (r == null ? void 0 : r.canvasWrapperStyle), Fe = n.canvasCutouts ?? (r == null ? void 0 : r.canvasCutouts), he = n.pieceGuides, Ne = n.pieceFocus, Te = b ?? !0, J = ke(() => Ze(s ?? "pro-studio"), [s]);
+    resetDocumentOnMount: j
+  } = n, U = l, Y = n.autoExportConfig ?? (t == null ? void 0 : t.autoExportConfig), ne = n.autoExportFormat ?? (t == null ? void 0 : t.format) ?? "dataUrl", ae = n.autoExportAll ?? (t == null ? void 0 : t.exportAll) ?? !1, oe = n.exportScale ?? (t == null ? void 0 : t.scale) ?? 2, se = n.maxExportSize ?? (t == null ? void 0 : t.maxSize) ?? 4e3, J = n.exportImageFormat ?? (t == null ? void 0 : t.imageFormat) ?? "png", te = n.exportImageQuality ?? (t == null ? void 0 : t.imageQuality) ?? 0.92, T = n.initialImage ?? (a == null ? void 0 : a.src), L = n.initialImageAlignment ?? (a == null ? void 0 : a.alignment) ?? "center", B = n.initialImageScale ?? (a == null ? void 0 : a.scale) ?? 1, $ = n.initialImageScaleMode ?? (a == null ? void 0 : a.scaleMode) ?? "cover", P = n.width ?? (r == null ? void 0 : r.width) ?? 1200, k = n.height ?? (r == null ? void 0 : r.height) ?? 1200, R = n.viewPadding ?? (r == null ? void 0 : r.viewPadding) ?? 0.9, I = n.artboardBorderRadius ?? (r == null ? void 0 : r.artboardBorderRadius) ?? 0, N = n.fixedMargin ?? (r == null ? void 0 : r.fixedMargin), O = n.maxHeight ?? (r == null ? void 0 : r.maxHeight), D = n.showRotationHandle ?? (r == null ? void 0 : r.showRotationHandle) ?? !0, K = n.hideCanvas ?? (r == null ? void 0 : r.hideCanvas) ?? !1, fe = n.canvasWrapperClassName ?? (r == null ? void 0 : r.canvasWrapperClassName), me = n.canvasWrapperStyle ?? (r == null ? void 0 : r.canvasWrapperStyle), Ne = n.canvasCutouts ?? (r == null ? void 0 : r.canvasCutouts), he = n.pieceGuides, Te = n.pieceFocus, Le = b ?? !0, V = Ie(() => et(s ?? "pro-studio"), [s]);
   C(() => {
-    var K;
-    if (typeof V < "u" && ((K = V.env) == null ? void 0 : K.NODE_ENV) === "development" && J) {
-      const O = _e(J);
-      O.valid || Se.warn("Kit validation warnings:", O.errors), O.warnings.length > 0 && Se.warn("Kit validation warnings:", O.warnings);
+    var H;
+    if (typeof G < "u" && ((H = G.env) == null ? void 0 : H.NODE_ENV) === "development" && V) {
+      const W = tt(V);
+      W.valid || Ae.warn("Kit validation warnings:", W.errors), W.warnings.length > 0 && Ae.warn("Kit validation warnings:", W.warnings);
     }
-  }, [J]);
-  const { emitError: ie, handleBoundaryError: Le } = Mt(u);
-  Ft({
+  }, [V]);
+  const { emitError: ie, handleBoundaryError: Be } = Nt(u);
+  Tt({
     artboardConfigs: c,
     width: P,
     height: k,
     pieceGuides: he,
     controlledActiveArtboard: d,
     onArtboardChange: o,
-    resetDocumentOnMount: Y
+    resetDocumentOnMount: j
   });
-  const { initialElementsLoadedState: Be } = Nt({
+  const { initialElementsLoadedState: Pe } = Lt({
     initialElements: f,
     emitError: ie
-  }), { imageLoadingState: ge, imageError: pe } = Tt({
+  }), { imageLoadingState: ge, imageError: pe } = Bt({
     initialImage: T,
     initialImageAlignment: L,
     initialImageScale: B,
-    initialImageScaleMode: W,
+    initialImageScaleMode: $,
     artboardConfigs: c,
     onImageLoad: v,
     onImageError: i,
     emitError: ie
   });
-  return Lt({ onChange: h, onSelectionChange: p }), Bt(
+  if (Pt({ onChange: h, onSelectionChange: p }), Dt(
     {
-      autoExportInterval: $,
-      autoExportConfig: j,
+      autoExportInterval: U,
+      autoExportConfig: Y,
       autoExportFormat: ne,
       autoExportAll: ae,
       exportScale: oe,
       maxExportSize: se,
-      exportImageFormat: Q,
+      exportImageFormat: J,
       exportImageQuality: te,
       onExport: g,
       onExportScheduled: w,
@@ -1053,46 +1054,53 @@ const Se = G("SnowconeCanvas"), Me = Re((n, e) => {
       onExportReady: A,
       onReady: x,
       hasInitialElements: !!f && f.length > 0,
-      initialElementsLoaded: Be,
+      initialElementsLoaded: Pe,
       emitError: ie
     },
     e
-  ), ge === "loading" ? /* @__PURE__ */ E(
-    "div",
-    {
-      className: y,
-      style: {
-        ...S,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "var(--surface, #f5f5f5)"
-      },
-      children: /* @__PURE__ */ E(et, { size: 48 })
-    }
-  ) : ge === "error" && pe ? /* @__PURE__ */ E(
-    "div",
-    {
-      className: y,
-      style: {
-        ...S,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "var(--surface, #f5f5f5)",
-        color: "var(--danger, #dc2626)",
-        padding: "1rem"
-      },
-      children: /* @__PURE__ */ X("div", { className: "sc:text-center", children: [
-        /* @__PURE__ */ E("div", { className: "sc:font-medium", children: "Failed to load image" }),
-        /* @__PURE__ */ E("div", { className: "sc:text-sm sc:mt-1 sc:opacity-70", children: pe.message })
-      ] })
-    }
-  ) : /* @__PURE__ */ E(tt, { kit: J, children: /* @__PURE__ */ E("div", { className: `sc-root ${y || ""}`, style: { ...S, position: "relative" }, children: /* @__PURE__ */ X(
-    ft,
+  ), ge === "loading")
+    return /* @__PURE__ */ E(
+      "div",
+      {
+        className: y,
+        style: {
+          ...S,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "var(--surface, #f5f5f5)"
+        },
+        children: /* @__PURE__ */ E(rt, { size: 48 })
+      }
+    );
+  if (ge === "error" && pe)
+    return /* @__PURE__ */ E(
+      "div",
+      {
+        className: y,
+        style: {
+          ...S,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "var(--surface, #f5f5f5)",
+          color: "var(--danger, #dc2626)",
+          padding: "1rem"
+        },
+        children: /* @__PURE__ */ X("div", { className: "sc:text-center", children: [
+          /* @__PURE__ */ E("div", { className: "sc:font-medium", children: "Failed to load image" }),
+          /* @__PURE__ */ E("div", { className: "sc:text-sm sc:mt-1 sc:opacity-70", children: pe.message })
+        ] })
+      }
+    );
+  const De = Object.entries(((be = V.layout) == null ? void 0 : be.slots) ?? {}).every(
+    ([H, W]) => H === "canvas" || !W || W.length === 0
+  ) ? { "--color-canvas-bg": "transparent" } : void 0;
+  return /* @__PURE__ */ E(nt, { kit: V, children: /* @__PURE__ */ E("div", { className: `sc-root ${y || ""}`, style: { ...De, ...S, position: "relative" }, children: /* @__PURE__ */ X(
+    ht,
     {
-      onError: Le,
-      fallback: (K, O) => /* @__PURE__ */ X(
+      onError: Be,
+      fallback: (H, W) => /* @__PURE__ */ X(
         "div",
         {
           style: {
@@ -1109,11 +1117,11 @@ const Se = G("SnowconeCanvas"), Me = Re((n, e) => {
           },
           children: [
             /* @__PURE__ */ E("div", { style: { fontSize: "18px", fontWeight: 600, marginBottom: "8px" }, children: "Something went wrong" }),
-            /* @__PURE__ */ E("div", { style: { fontSize: "14px", opacity: 0.7, marginBottom: "16px", maxWidth: "400px" }, children: K.message }),
+            /* @__PURE__ */ E("div", { style: { fontSize: "14px", opacity: 0.7, marginBottom: "16px", maxWidth: "400px" }, children: H.message }),
             /* @__PURE__ */ E(
               "button",
               {
-                onClick: O,
+                onClick: W,
                 style: {
                   padding: "8px 20px",
                   backgroundColor: "var(--primary, #333)",
@@ -1131,49 +1139,49 @@ const Se = G("SnowconeCanvas"), Me = Re((n, e) => {
         }
       ),
       children: [
-        !z && /* @__PURE__ */ (() => {
-          const K = /* @__PURE__ */ E(
-            rt,
+        !K && /* @__PURE__ */ (() => {
+          const H = /* @__PURE__ */ E(
+            at,
             {
               style: { width: "100%" },
-              fitPadding: I,
-              artboardBorderRadius: R,
+              fitPadding: R,
+              artboardBorderRadius: I,
               fixedMargin: N,
-              maxHeight: U,
+              maxHeight: O,
               showRotationHandle: D,
-              enableShortcuts: Te,
-              canvasCutouts: Fe,
+              enableShortcuts: Le,
+              canvasCutouts: Ne,
               pieceGuides: he,
-              pieceFocus: Ne
+              pieceFocus: Te
             }
           );
-          return /* @__PURE__ */ E(dt, { kit: J, canvas: fe || me ? /* @__PURE__ */ E("div", { className: fe, style: me, children: K }) : K });
+          return /* @__PURE__ */ E(ft, { kit: V, canvas: fe || me ? /* @__PURE__ */ E("div", { className: fe, style: me, children: H }) : H });
         })(),
         M
       ]
     }
   ) }) });
 });
-Me.displayName = "SnowconeCanvasInner";
-const Pt = Re((n, e) => {
+Fe.displayName = "SnowconeCanvasInner";
+const Wt = Re((n, e) => {
   var c;
   const { inheritTheme: t, externalProvider: a, services: r } = n, s = n.viewPadding ?? ((c = n.layoutConfig) == null ? void 0 : c.viewPadding);
   return /* @__PURE__ */ E(
-    mt,
+    gt,
     {
       inheritTheme: t,
       externalProvider: a,
       services: r,
       viewPadding: s,
-      children: /* @__PURE__ */ E(Me, { ref: e, ...n })
+      children: /* @__PURE__ */ E(Fe, { ref: e, ...n })
     }
   );
 });
-Pt.displayName = "SnowconeCanvas";
+Wt.displayName = "SnowconeCanvas";
 export {
-  ft as E,
-  Pt as S,
-  Et as a,
-  gt as u
+  ht as E,
+  Wt as S,
+  yt as a,
+  bt as u
 };
-//# sourceMappingURL=SnowconeCanvas-wdckG-6O.js.map
+//# sourceMappingURL=SnowconeCanvas-DBbmx9qW.js.map