@snowcone-app/canvas 0.1.10 → 0.1.13

package/dist/index.mjs

@@ -1,13 +1,148 @@
-import { A as ft, D as mt, r as ht, v as gt, u as pt, a as bt, S as vt, K as xt, C as Oe, e as wt } from "./compose-DIPiisIw.js";
-import { b as br, c as vr, E as xr, M as wr, P as Er, d as yr, f as Ar, g as Sr } from "./compose-DIPiisIw.js";
-import { c as _, s as Et, I as Ke, p as yt, T as At } from "./HybridHistoryManager-BV6XV0nD.js";
-import { jsxs as de, jsx as C } from "react/jsx-runtime";
-import { Component as St, useRef as T, useState as q, useEffect as R, useCallback as N, forwardRef as je, useMemo as ye, useImperativeHandle as Rt } from "react";
-import { u as ue, T as Xe, E as It, a as Ae, b as Ge, c as kt } from "./ThemeContext-H0Z-MqqR.js";
-import { C as we, E as Ct } from "./ElementFactory-Ckv6sSev.js";
-import { d as Ir, m as kr, s as Cr, v as Mr } from "./CanvasStateV1-CD3Q94F4.js";
-const Mt = _("ErrorBoundary");
-class Tt extends St {
+import { T as Be, i as Ue, r as yt, a as ze, g as wt, L as Et, E as At, b as St, I as kt, G as Rt, A as It, C as Ct, Z as Mt, M as $e, c as Tt, d as Dt, D as Ft, e as Pt, v as Nt, u as Ht, f as Lt, S as Wt, K as Bt, h as Ut, j as zt } from "./compose-Dqh2f8tS.js";
+import { k as zr, l as $r, m as Or, n as Yr, P as Xr, o as Vr, p as Kr, q as jr } from "./compose-Dqh2f8tS.js";
+import { c as q, p as me, s as $t, I as Ve, T as Ot } from "./HybridHistoryManager-jBBnVim8.js";
+import { jsxs as j, jsx as v, Fragment as Ke } from "react/jsx-runtime";
+import { useCallback as W, useMemo as he, Component as Yt, useRef as D, useState as re, useEffect as I, forwardRef as je, useImperativeHandle as Xt } from "react";
+import { u as ge, T as Oe, E as Vt, a as ke, b as Ge, c as Kt } from "./ThemeContext-wj-wSO7J.js";
+import { C as Ae, E as jt } from "./ImportManager-Oqu2yB54.js";
+import { d as Zr, m as Qr, s as qr, v as Jr } from "./CanvasStateV1-CJU_xYW5.js";
+const Ye = q("useCommands");
+function Gt() {
+  const t = ge(), {
+    undo: e,
+    redo: r,
+    canUndo: a,
+    canRedo: n,
+    executeElementUpdate: c,
+    executeAddElement: o,
+    executeRemoveElement: i,
+    executeReorderElement: l,
+    executeCommandBatch: m,
+    executeCreateArtboard: A,
+    executeDeleteArtboard: M,
+    executeUpdateArtboard: w
+  } = t, S = W(() => {
+    Ye.warn("[useCommands] clearHistory is not yet implemented in EditorContext");
+  }, []), T = W((E) => {
+    Ye.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext");
+  }, []);
+  return {
+    // Undo/Redo
+    undo: e,
+    redo: r,
+    canUndo: a,
+    canRedo: n,
+    // History management
+    clearHistory: S,
+    clearArtboardHistory: T,
+    // Command execution
+    executeElementUpdate: c,
+    executeAddElement: o,
+    executeRemoveElement: i,
+    executeReorderElement: l,
+    executeCreateArtboard: A,
+    executeDeleteArtboard: M,
+    executeUpdateArtboard: w,
+    // Batch execution
+    executeCommandBatch: m
+  };
+}
+const Zt = () => {
+  const { undo: t, redo: e, canUndo: r, canRedo: a } = Gt();
+  return /* @__PURE__ */ j("div", { className: "sc-undo-redo", style: { display: "inline-flex", gap: 4 }, children: [
+    /* @__PURE__ */ v(
+      Be,
+      {
+        icon: Ue.undo,
+        onClick: t,
+        disabled: !r,
+        tooltip: "Undo",
+        "aria-label": "Undo"
+      }
+    ),
+    /* @__PURE__ */ v(
+      Be,
+      {
+        icon: Ue.redo,
+        onClick: e,
+        disabled: !a,
+        tooltip: "Redo",
+        "aria-label": "Redo"
+      }
+    )
+  ] });
+}, Qt = q("KitLayout"), te = "canvas";
+let Xe = !1;
+function qt() {
+  Xe || (Xe = !0, yt({
+    LayersPanel: Et,
+    EffectsPanel: At,
+    ExportPanel: St,
+    ImagePanel: kt,
+    GlyphPanel: Rt,
+    ArtboardTabs: It,
+    ContextualToolbars: Ct,
+    ZoomControls: Mt,
+    MenuButton: $e,
+    CropPanel: Tt
+  }), ze("add-element-menu", {
+    component: $e,
+    label: "Add Element",
+    icon: "gravity-ui:plus",
+    position: "topbar"
+  }), ze("undo-redo-controls", {
+    component: Zt,
+    label: "Undo / Redo",
+    icon: "lucide:undo-2",
+    position: "topbar"
+  }));
+}
+function fe({ ids: t }) {
+  return !t || t.length === 0 ? null : /* @__PURE__ */ v(Ke, { children: t.map((e) => {
+    var n;
+    if (e === te) return null;
+    const r = wt(e);
+    if (!r)
+      return typeof me < "u" && ((n = me.env) == null ? void 0 : n.NODE_ENV) === "development" && Qt.warn(
+        `Kit layout references unknown section "${e}" — skipping. Register it with registerSection("${e}", { ... }).`
+      ), null;
+    const a = r.component;
+    return /* @__PURE__ */ v(a, {}, e);
+  }) });
+}
+function Jt({ kit: t, canvas: e }) {
+  var l, m, A, M;
+  qt();
+  const r = t.layout.slots, a = !!((l = r.topbar) != null && l.some((w) => w !== te)), n = !!((m = r.left) != null && m.some((w) => w !== te)), c = !!((A = r.right) != null && A.some((w) => w !== te)), o = !!((M = r.bottombar) != null && M.some((w) => w !== te));
+  return he(
+    () => !a && !n && !c && !o,
+    [a, n, c, o]
+  ) ? /* @__PURE__ */ v(Ke, { children: e }) : /* @__PURE__ */ j("div", { className: "sc-kit-layout", style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
+    a && /* @__PURE__ */ v(
+      "div",
+      {
+        className: "sc-kit-topbar toolbar",
+        style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", flexShrink: 0 },
+        children: /* @__PURE__ */ v(fe, { ids: r.topbar })
+      }
+    ),
+    /* @__PURE__ */ j("div", { className: "sc-kit-body", style: { display: "flex", flex: 1, minHeight: 0 }, children: [
+      n && /* @__PURE__ */ v("div", { className: "sc-kit-left", style: { flexShrink: 0, overflow: "auto" }, children: /* @__PURE__ */ v(fe, { ids: r.left }) }),
+      /* @__PURE__ */ v("div", { className: "sc-kit-canvas", style: { flex: 1, minWidth: 0, position: "relative" }, children: e }),
+      c && /* @__PURE__ */ v("div", { className: "sc-kit-right", style: { flexShrink: 0, overflow: "auto" }, children: /* @__PURE__ */ v(fe, { ids: r.right }) })
+    ] }),
+    o && /* @__PURE__ */ v(
+      "div",
+      {
+        className: "sc-kit-bottombar toolbar",
+        style: { display: "flex", alignItems: "center", gap: 8, flexShrink: 0 },
+        children: /* @__PURE__ */ v(fe, { ids: r.bottombar })
+      }
+    )
+  ] });
+}
+const _t = q("ErrorBoundary");
+class er extends Yt {
   constructor(e) {
     super(e), this.resetError = () => {
       this.setState({
@@ -26,7 +161,7 @@ class Tt extends St {
     };
   }
   componentDidCatch(e, r) {
-    if (Mt.error("Caught error:", e, r), this.props.onError && this.props.onError(e, r), this.props.onCanvasError) {
+    if (_t.error("Caught error:", e, r), this.props.onError && this.props.onError(e, r), this.props.onCanvasError) {
       const a = {
         category: "unknown",
         message: e.message,
@@ -37,7 +172,7 @@ class Tt extends St {
     }
   }
   render() {
-    return this.state.hasError && this.state.error ? this.props.renderError ? this.props.renderError(this.state.error, this.resetError) : this.props.fallback ? typeof this.props.fallback == "function" ? this.props.fallback(this.state.error, this.resetError) : this.props.fallback : /* @__PURE__ */ de(
+    return this.state.hasError && this.state.error ? this.props.renderError ? this.props.renderError(this.state.error, this.resetError) : this.props.fallback ? typeof this.props.fallback == "function" ? this.props.fallback(this.state.error, this.resetError) : this.props.fallback : /* @__PURE__ */ j(
       "div",
       {
         style: {
@@ -49,8 +184,8 @@ class Tt extends St {
           fontFamily: "system-ui, sans-serif"
         },
         children: [
-          /* @__PURE__ */ C("h2", { style: { margin: "0 0 16px 0", fontSize: "18px", fontWeight: 600 }, children: "Something went wrong" }),
-          /* @__PURE__ */ C(
+          /* @__PURE__ */ v("h2", { style: { margin: "0 0 16px 0", fontSize: "18px", fontWeight: 600 }, children: "Something went wrong" }),
+          /* @__PURE__ */ v(
             "pre",
             {
               style: {
@@ -65,7 +200,7 @@ class Tt extends St {
               children: this.state.error.message
             }
           ),
-          /* @__PURE__ */ C(
+          /* @__PURE__ */ v(
             "button",
             {
               onClick: this.resetError,
@@ -87,80 +222,80 @@ class Tt extends St {
     ) : this.props.children;
   }
 }
-const Dt = _("useAutoExport");
-function Ft(t) {
-  const { config: e, historyManager: r, artboards: a, elements: n, onExport: c, onExportScheduled: o, isCanvasReady: i = !1 } = t, l = T(null), p = T(!1), S = T({
+const tr = q("useAutoExport");
+function rr(t) {
+  const { config: e, historyManager: r, artboards: a, elements: n, onExport: c, onExportScheduled: o, isCanvasReady: i = !1 } = t, l = D(null), m = D(!1), A = D({
     totalExports: 0,
     skippedExports: 0,
     lastExportTime: null,
     avgExportInterval: 0
-  }), [P, I] = q(S.current), E = T(c);
-  E.current = c, R(() => {
-    const m = new ft({
-      ...mt,
+  }), [M, w] = re(A.current), S = D(c);
+  S.current = c, I(() => {
+    const h = new Dt({
+      ...Ft,
       ...e
     });
-    return m.onExport(async () => {
+    return h.onExport(async () => {
       try {
-        await E.current(), S.current = m.getStats();
-      } catch (A) {
-        Dt.error("[useAutoExport] Export failed:", A);
+        await S.current(), A.current = h.getStats();
+      } catch (R) {
+        tr.error("[useAutoExport] Export failed:", R);
       }
-    }), l.current = m, () => {
-      m.destroy();
+    }), l.current = h, () => {
+      h.destroy();
     };
-  }, []), R(() => {
-    i && p.current && l.current && (p.current = !1, l.current.forceExport());
-  }, [i]), R(() => {
+  }, []), I(() => {
+    i && m.current && l.current && (m.current = !1, l.current.forceExport());
+  }, [i]), I(() => {
     l.current && e && l.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]), I(() => {
     l.current && o && l.current.onExportScheduled(o);
-  }, [o]), R(() => {
+  }, [o]), I(() => {
     if (!r || !l.current)
       return;
-    const m = r.onCommandExecuted(() => {
+    const h = r.onCommandExecuted(() => {
       if (l.current) {
         if (!i) {
-          p.current = !0;
+          m.current = !0;
           return;
         }
         l.current.scheduleExport();
       }
     });
     return () => {
-      m();
+      h();
     };
-  }, [r, i]), R(() => {
+  }, [r, i]), I(() => {
     if (l.current) {
       if (!i) {
-        p.current = !0;
+        m.current = !0;
         return;
       }
       l.current.scheduleExport();
     }
-  }, [n, a, i]), R(() => Et((A) => {
+  }, [n, a, i]), I(() => $t((R) => {
     if (!l.current || !i) return;
-    n.some((W) => W.id === A) && l.current.scheduleExport();
+    n.some((L) => L.id === R) && l.current.scheduleExport();
   }), [n, i]);
-  const M = N((m) => {
-    l.current && l.current.updateConfig(m);
-  }, []), w = N(async () => {
-    l.current && (await l.current.forceExport(), S.current = l.current.getStats(), I(S.current));
-  }, []), H = N(() => {
-    l.current && (l.current.resetStats(), S.current = l.current.getStats(), I(S.current));
-  }, []), y = N(() => {
+  const T = W((h) => {
+    l.current && l.current.updateConfig(h);
+  }, []), E = W(async () => {
+    l.current && (await l.current.forceExport(), A.current = l.current.getStats(), w(A.current));
+  }, []), N = W(() => {
+    l.current && (l.current.resetStats(), A.current = l.current.getStats(), w(A.current));
+  }, []), k = W(() => {
     l.current && l.current.resetChangeDetection();
   }, []);
   return {
-    stats: P,
-    updateConfig: M,
-    forceExport: w,
-    resetStats: H,
-    resetChangeDetection: y
+    stats: M,
+    updateConfig: T,
+    forceExport: E,
+    resetStats: N,
+    resetChangeDetection: k
   };
 }
-const Qe = _("useContentReady");
-function Pt(t) {
+const Ze = q("useContentReady");
+function nr(t) {
   var r;
   const e = /* @__PURE__ */ new Set();
   for (const a of t)
@@ -174,7 +309,7 @@ function Pt(t) {
       }
   return Array.from(e);
 }
-async function Ht(t) {
+async function ar(t) {
   if (t.length === 0 || typeof document > "u" || !document.fonts) return;
   const e = [];
   for (const r of t) {
@@ -184,24 +319,24 @@ async function Ht(t) {
   await Promise.all(e), document.fonts.ready && await Promise.race([
     document.fonts.ready,
     new Promise((r) => setTimeout(r, 250))
-  ]), Qe.debug(`Awaited ${e.length} font(s)`);
+  ]), Ze.debug(`Awaited ${e.length} font(s)`);
 }
-function Lt() {
+function or() {
   return new Promise((t) => requestAnimationFrame(() => t()));
 }
-function Wt(t) {
-  const { isCanvasReady: e, elements: r, hasInitialElements: a, initialElementsLoaded: n } = t, [c, o] = q(!1), i = T(!1);
-  return R(() => {
+function sr(t) {
+  const { isCanvasReady: e, elements: r, hasInitialElements: a, initialElementsLoaded: n } = t, [c, o] = re(!1), i = D(!1);
+  return I(() => {
     if (c || !e || a && !n || a && r.length === 0 || i.current) return;
     i.current = !0;
     let l = !1;
     return (async () => {
       try {
-        const p = Pt(r);
-        if (p.length > 0 && (await Ht(p), l) || (await Lt(), l)) return;
+        const m = nr(r);
+        if (m.length > 0 && (await ar(m), l) || (await or(), l)) return;
         o(!0);
-      } catch (p) {
-        Qe.error("Error during content readiness check:", p), l || o(!0);
+      } catch (m) {
+        Ze.error("Error during content readiness check:", m), l || o(!0);
       } finally {
         i.current = !1;
       }
@@ -210,7 +345,7 @@ function Wt(t) {
     };
   }, [e, r, a, n, c]), c;
 }
-const Nt = {
+const ir = {
   // Vertical alignments (map to top/center/bottom center)
   "far-top": "t",
   top: "t",
@@ -233,75 +368,75 @@ const Nt = {
   b: "b",
   br: "br"
 };
-function Bt(t) {
-  return t && Nt[t] || "c";
+function cr(t) {
+  return t && ir[t] || "c";
 }
-function Ut(t, e) {
-  const r = e.scaleMode || "cover", a = (r === "contain" ? e.marginTop : 0) || 0, n = (r === "contain" ? e.marginRight : 0) || 0, c = (r === "contain" ? e.marginBottom : 0) || 0, o = (r === "contain" ? e.marginLeft : 0) || 0, i = e.width - o - n, l = e.height - a - c, p = i / t.width, S = l / t.height, P = r === "contain" ? Math.min(p, S) : Math.max(p, S), I = e.scale || 1, E = P * I, M = t.width * E, w = t.height * E, H = e.align || "c";
-  let y = 0, m = 0;
-  const A = M - i, v = w - l;
-  switch (H) {
+function lr(t, e) {
+  const r = e.scaleMode || "cover", a = (r === "contain" ? e.marginTop : 0) || 0, n = (r === "contain" ? e.marginRight : 0) || 0, c = (r === "contain" ? e.marginBottom : 0) || 0, o = (r === "contain" ? e.marginLeft : 0) || 0, i = e.width - o - n, l = e.height - a - c, m = i / t.width, A = l / t.height, M = r === "contain" ? Math.min(m, A) : Math.max(m, A), w = e.scale || 1, S = M * w, T = t.width * S, E = t.height * S, N = e.align || "c";
+  let k = 0, h = 0;
+  const R = T - i, x = E - l;
+  switch (N) {
     // Top row
     case "tl":
-      y = 0, m = 0;
+      k = 0, h = 0;
       break;
     case "t":
-      y = -A / 2, m = 0;
+      k = -R / 2, h = 0;
       break;
     case "tr":
-      y = -A, m = 0;
+      k = -R, h = 0;
       break;
     // Middle row
     case "l":
-      y = 0, m = -v / 2;
+      k = 0, h = -x / 2;
       break;
     case "c":
     // Center (default)
     default:
-      y = -A / 2, m = -v / 2;
+      k = -R / 2, h = -x / 2;
       break;
     case "r":
-      y = -A, m = -v / 2;
+      k = -R, h = -x / 2;
       break;
     // Bottom row
     case "bl":
-      y = 0, m = -v;
+      k = 0, h = -x;
       break;
     case "b":
-      y = -A / 2, m = -v;
+      k = -R / 2, h = -x;
       break;
     case "br":
-      y = -A, m = -v;
+      k = -R, h = -x;
       break;
   }
-  y += o, m += a;
-  const W = e.offsetX || 0, D = e.offsetY || 0, $ = A, ee = v;
-  return y += W * $, m += D * ee, y = Math.round(y), m = Math.round(m), {
+  k += o, h += a;
+  const L = e.offsetX || 0, F = e.offsetY || 0, O = R, ne = x;
+  return k += L * O, h += F * ne, k = Math.round(k), h = Math.round(h), {
     // Final scale to apply to artwork
-    scale: E,
+    scale: S,
     // Final artwork dimensions after scaling
-    width: Math.round(M),
-    height: Math.round(w),
+    width: Math.round(T),
+    height: Math.round(E),
     // Position to draw artwork (relative to artboard origin)
-    x: y,
-    y: m,
+    x: k,
+    y: h,
     // Debug info
     debug: {
-      coverScale: P,
-      userScale: I,
-      overflow: { x: A, y: v },
-      alignment: H,
-      appliedOffset: { x: W * $, y: D * ee }
+      coverScale: M,
+      userScale: w,
+      overflow: { x: R, y: x },
+      alignment: N,
+      appliedOffset: { x: L * O, y: F * ne }
     }
   };
 }
-const zt = {
+const dr = {
   timeout: 3e4,
   retries: 1,
   retryDelay: 1e3,
   validateUrl: !0
 };
-function Yt(t) {
+function ur(t) {
   try {
     const e = new URL(t);
     return ["http:", "https:", "data:", "blob:"].includes(e.protocol);
@@ -309,9 +444,9 @@ function Yt(t) {
     return !1;
   }
 }
-async function $t(t, e = {}) {
-  const r = { ...zt, ...e };
-  if (r.validateUrl && !Yt(t))
+async function fr(t, e = {}) {
+  const r = { ...dr, ...e };
+  if (r.validateUrl && !ur(t))
     return {
       success: !1,
       error: new Error(`Invalid image URL: ${t}`)
@@ -319,16 +454,16 @@ async function $t(t, e = {}) {
   let a;
   for (let n = 0; n <= r.retries; n++)
     try {
-      return await Ot(t, r.timeout);
+      return await mr(t, r.timeout);
     } catch (c) {
-      a = c instanceof Error ? c : new Error(String(c)), n < r.retries && await Vt(r.retryDelay);
+      a = c instanceof Error ? c : new Error(String(c)), n < r.retries && await gr(r.retryDelay);
     }
   return {
     success: !1,
     error: a || new Error("Failed to load image after retries")
   };
 }
-function Ot(t, e) {
+function mr(t, e) {
   return new Promise((r) => {
     const a = new Image();
     a.crossOrigin = "anonymous";
@@ -338,18 +473,18 @@ function Ot(t, e) {
     }, i = () => {
       if (c) return;
       c = !0, o();
-      const p = a.naturalWidth || a.width, S = a.naturalHeight || a.height;
+      const m = a.naturalWidth || a.width, A = a.naturalHeight || a.height;
       r({
         success: !0,
         element: a,
-        width: p,
-        height: S,
-        aspectRatio: S > 0 ? p / S : 1
+        width: m,
+        height: A,
+        aspectRatio: A > 0 ? m / A : 1
       });
-    }, l = (p) => {
+    }, l = (m) => {
       c || (c = !0, o(), r({
         success: !1,
-        error: new Error(p)
+        error: new Error(m)
       }));
     };
     a.onload = i, a.onerror = () => {
@@ -359,9 +494,9 @@ function Ot(t, e) {
     }, e), a.src = t;
   });
 }
-async function Xt(t, e, r = {}, a = {}) {
-  var I, E, M, w, H, y, m;
-  const n = await $t(t, a);
+async function hr(t, e, r = {}, a = {}) {
+  var w, S, T, E, N, k, h;
+  const n = await fr(t, a);
   if (!n.success || !n.width || !n.height)
     return {
       success: !1,
@@ -371,7 +506,7 @@ async function Xt(t, e, r = {}, a = {}) {
     width: e.artboard.width,
     height: e.artboard.height,
     scale: e.scale,
-    align: Bt(e.alignment),
+    align: cr(e.alignment),
     offsetX: e.offsetX,
     offsetY: e.offsetY,
     scaleMode: e.scaleMode,
@@ -379,16 +514,16 @@ async function Xt(t, e, r = {}, a = {}) {
     marginRight: e.marginRight,
     marginBottom: e.marginBottom,
     marginLeft: e.marginLeft
-  }, o = Ut(
+  }, o = lr(
     { width: n.width, height: n.height },
     c
-  ), i = e.artboard.x + o.x, l = e.artboard.y + o.y, p = i + o.width / 2, S = l + o.height / 2;
+  ), i = e.artboard.x + o.x, l = e.artboard.y + o.y, m = i + o.width / 2, A = l + o.height / 2;
   return {
     success: !0,
-    element: new Ke({
+    element: new Ve({
       ...r,
-      x: p,
-      y: S,
+      x: m,
+      y: A,
       imageUrl: t,
       imageAspectRatio: n.aspectRatio,
       preserveDimensions: !0,
@@ -397,28 +532,28 @@ async function Xt(t, e, r = {}, a = {}) {
         type: "image",
         width: o.width,
         height: o.height,
-        cropX: ((I = r.transformData) == null ? void 0 : I.cropX) ?? 0,
-        cropY: ((E = r.transformData) == null ? void 0 : E.cropY) ?? 0,
-        cropWidth: ((M = r.transformData) == null ? void 0 : M.cropWidth) ?? 1,
-        cropHeight: ((w = r.transformData) == null ? void 0 : w.cropHeight) ?? 1,
-        flipHorizontal: ((H = r.transformData) == null ? void 0 : H.flipHorizontal) ?? !1,
-        flipVertical: ((y = r.transformData) == null ? void 0 : y.flipVertical) ?? !1,
-        borderRadius: ((m = r.transformData) == null ? void 0 : m.borderRadius) ?? 0
+        cropX: ((w = r.transformData) == null ? void 0 : w.cropX) ?? 0,
+        cropY: ((S = r.transformData) == null ? void 0 : S.cropY) ?? 0,
+        cropWidth: ((T = r.transformData) == null ? void 0 : T.cropWidth) ?? 1,
+        cropHeight: ((E = r.transformData) == null ? void 0 : E.cropHeight) ?? 1,
+        flipHorizontal: ((N = r.transformData) == null ? void 0 : N.flipHorizontal) ?? !1,
+        flipVertical: ((k = r.transformData) == null ? void 0 : k.flipVertical) ?? !1,
+        borderRadius: ((h = r.transformData) == null ? void 0 : h.borderRadius) ?? 0
       }
     }),
     placement: {
       artworkSize: { width: n.width, height: n.height },
       finalSize: { width: o.width, height: o.height },
-      position: { x: p, y: S },
+      position: { x: m, y: A },
       scale: o.scale
     }
   };
 }
-function Vt(t) {
+function gr(t) {
   return new Promise((e) => setTimeout(e, t));
 }
-const K = _("SnowconeCanvas");
-function Ee(t, e, r, a) {
+const K = q("SnowconeCanvas");
+function Se(t, e, r, a) {
   if (a <= 0 || !isFinite(a))
     return r;
   const n = t * r, c = e * r;
@@ -427,7 +562,7 @@ function Ee(t, e, r, a) {
   const i = Math.max(t, e), l = a / i;
   return Math.min(l, r);
 }
-const Je = je((t, e) => {
+const Qe = je((t, e) => {
   const {
     exportConfig: r,
     imageConfig: a,
@@ -436,152 +571,153 @@ const Je = je((t, e) => {
     artboards: o,
     activeArtboard: i,
     onArtboardChange: l,
-    initialElements: p,
-    onChange: S,
-    onSelectionChange: P,
-    autoExportInterval: I,
-    onExport: E,
-    onExportScheduled: M,
-    onExportStatus: w,
-    onExportReady: H,
-    onImageLoad: y,
-    onImageError: m,
-    onError: A,
-    onReady: v,
-    className: W,
-    style: D,
-    enableShortcuts: $,
-    overlay: ee
-  } = t, Se = I, J = t.autoExportConfig ?? (r == null ? void 0 : r.autoExportConfig), j = t.autoExportFormat ?? (r == null ? void 0 : r.format) ?? "dataUrl", fe = t.autoExportAll ?? (r == null ? void 0 : r.exportAll) ?? !1, X = t.exportScale ?? (r == null ? void 0 : r.scale) ?? 2, U = t.maxExportSize ?? (r == null ? void 0 : r.maxSize) ?? 4e3, te = t.exportImageFormat ?? (r == null ? void 0 : r.imageFormat) ?? "png", re = t.exportImageQuality ?? (r == null ? void 0 : r.imageQuality) ?? 0.92, z = t.initialImage ?? (a == null ? void 0 : a.src), Re = t.initialImageAlignment ?? (a == null ? void 0 : a.alignment) ?? "center", Ie = t.initialImageScale ?? (a == null ? void 0 : a.scale) ?? 1, ke = t.initialImageScaleMode ?? (a == null ? void 0 : a.scaleMode) ?? "cover", Ze = t.width ?? (n == null ? void 0 : n.width) ?? 1200, qe = t.height ?? (n == null ? void 0 : n.height) ?? 1200, Ce = t.viewPadding ?? (n == null ? void 0 : n.viewPadding) ?? 0.9, Me = t.artboardBorderRadius ?? (n == null ? void 0 : n.artboardBorderRadius) ?? 0, Te = t.fixedMargin ?? (n == null ? void 0 : n.fixedMargin), De = t.maxHeight ?? (n == null ? void 0 : n.maxHeight), Fe = t.showRotationHandle ?? (n == null ? void 0 : n.showRotationHandle) ?? !0, _e = t.hideCanvas ?? (n == null ? void 0 : n.hideCanvas) ?? !1, Pe = t.canvasWrapperClassName ?? (n == null ? void 0 : n.canvasWrapperClassName), He = t.canvasWrapperStyle ?? (n == null ? void 0 : n.canvasWrapperStyle), Le = t.canvasCutouts ?? (n == null ? void 0 : n.canvasCutouts), me = t.pieceGuides, We = t.pieceFocus, Ne = $ ?? !0, ne = ye(() => ht(c ?? "pro-studio"), [c]);
-  R(() => {
-    if (yt.env.NODE_ENV === "development" && ne) {
-      const s = gt(ne);
-      s.valid || K.warn("Kit validation warnings:", s.errors), s.warnings.length > 0 && K.warn("Kit validation warnings:", s.warnings);
+    initialElements: m,
+    onChange: A,
+    onSelectionChange: M,
+    autoExportInterval: w,
+    onExport: S,
+    onExportScheduled: T,
+    onExportStatus: E,
+    onExportReady: N,
+    onImageLoad: k,
+    onImageError: h,
+    onError: R,
+    onReady: x,
+    className: L,
+    style: F,
+    enableShortcuts: O,
+    overlay: ne
+  } = t, Re = w, J = t.autoExportConfig ?? (r == null ? void 0 : r.autoExportConfig), G = t.autoExportFormat ?? (r == null ? void 0 : r.format) ?? "dataUrl", pe = t.autoExportAll ?? (r == null ? void 0 : r.exportAll) ?? !1, X = t.exportScale ?? (r == null ? void 0 : r.scale) ?? 2, U = t.maxExportSize ?? (r == null ? void 0 : r.maxSize) ?? 4e3, ae = t.exportImageFormat ?? (r == null ? void 0 : r.imageFormat) ?? "png", oe = t.exportImageQuality ?? (r == null ? void 0 : r.imageQuality) ?? 0.92, z = t.initialImage ?? (a == null ? void 0 : a.src), Ie = t.initialImageAlignment ?? (a == null ? void 0 : a.alignment) ?? "center", Ce = t.initialImageScale ?? (a == null ? void 0 : a.scale) ?? 1, Me = t.initialImageScaleMode ?? (a == null ? void 0 : a.scaleMode) ?? "cover", qe = t.width ?? (n == null ? void 0 : n.width) ?? 1200, Je = t.height ?? (n == null ? void 0 : n.height) ?? 1200, _e = t.viewPadding ?? (n == null ? void 0 : n.viewPadding) ?? 0.9, et = t.artboardBorderRadius ?? (n == null ? void 0 : n.artboardBorderRadius) ?? 0, tt = t.fixedMargin ?? (n == null ? void 0 : n.fixedMargin), rt = t.maxHeight ?? (n == null ? void 0 : n.maxHeight), nt = t.showRotationHandle ?? (n == null ? void 0 : n.showRotationHandle) ?? !0, at = t.hideCanvas ?? (n == null ? void 0 : n.hideCanvas) ?? !1, Te = t.canvasWrapperClassName ?? (n == null ? void 0 : n.canvasWrapperClassName), De = t.canvasWrapperStyle ?? (n == null ? void 0 : n.canvasWrapperStyle), ot = t.canvasCutouts ?? (n == null ? void 0 : n.canvasCutouts), Fe = t.pieceGuides, st = t.pieceFocus, it = O ?? !0, _ = he(() => Pt(c ?? "pro-studio"), [c]);
+  I(() => {
+    var s;
+    if (typeof me < "u" && ((s = me.env) == null ? void 0 : s.NODE_ENV) === "development" && _) {
+      const d = Nt(_);
+      d.valid || K.warn("Kit validation warnings:", d.errors), d.warnings.length > 0 && K.warn("Kit validation warnings:", d.warnings);
     }
-  }, [ne]);
-  const ae = T(A);
-  ae.current = A;
-  const B = N((s) => {
+  }, [_]);
+  const se = D(R);
+  se.current = R;
+  const B = W((s) => {
     var d;
-    K.error(`[${s.category}] ${s.message}`, s.originalError), (d = ae.current) == null || d.call(ae, s);
+    K.error(`[${s.category}] ${s.message}`, s.originalError), (d = se.current) == null || d.call(se, s);
   }, []);
-  R(() => (we.onRenderError = B, () => {
-    we.onRenderError === B && (we.onRenderError = null);
+  I(() => (Ae.onRenderError = B, () => {
+    Ae.onRenderError === B && (Ae.onRenderError = null);
   }), [B]);
   const {
     elements: V,
-    setElements: oe,
-    selectedId: Be,
-    artboardManager: k,
-    refreshArtboards: et,
-    historyManager: tt,
-    isCanvasReady: he,
-    setCanvasReady: se
-  } = ue(), { createArtboard: rt, selectArtboard: nt, artboards: L } = pt(), { exportArtboard: G, exportAllArtboards: ie, exportArtboardAsBlob: Q, exportAllArtboardsAsBlobs: ce } = bt();
-  Rt(e, () => ({
+    setElements: ie,
+    selectedId: Pe,
+    artboardManager: C,
+    refreshArtboards: ct,
+    historyManager: lt,
+    isCanvasReady: be,
+    setCanvasReady: ce
+  } = ge(), { createArtboard: dt, selectArtboard: ut, artboards: H } = Ht(), { exportArtboard: Z, exportAllArtboards: le, exportArtboardAsBlob: Q, exportAllArtboardsAsBlobs: de } = Lt();
+  Xt(e, () => ({
     exportArtboards: async (s = {}) => {
-      const d = s.format || j, h = s.scale || X, g = s.all ?? !1;
-      let f = h;
+      const d = s.format || G, g = s.scale || X, p = s.all ?? !1;
+      let f = g;
       if (U > 0 && isFinite(U))
-        for (const x of L) {
-          const b = Ee(x.width, x.height, h, U);
+        for (const y of H) {
+          const b = Se(y.width, y.height, g, U);
           f = Math.min(f, b);
         }
-      const u = { scale: f, format: te, quality: re };
-      if (g) {
-        const x = d === "blob" ? await ce(u) : await ie(u), b = {};
-        for (const [F, Y] of Object.entries(x)) {
-          const O = L.find((Z) => Z.id === F);
-          O && (b[O.name] = Y);
+      const u = { scale: f, format: ae, quality: oe };
+      if (p) {
+        const y = d === "blob" ? await de(u) : await le(u), b = {};
+        for (const [P, $] of Object.entries(y)) {
+          const Y = H.find((ee) => ee.id === P);
+          Y && (b[Y.name] = $);
         }
         return b;
       } else {
-        const x = k.getActiveArtboard();
-        if (!x)
+        const y = C.getActiveArtboard();
+        if (!y)
           throw new Error("[SnowconeCanvas] No active artboard found");
         if (d === "blob") {
-          const b = await Q(x.id, u);
-          return { [x.name]: b };
+          const b = await Q(y.id, u);
+          return { [y.name]: b };
         } else {
-          const b = await G(x.id, u);
-          return { [x.name]: b };
+          const b = await Z(y.id, u);
+          return { [y.name]: b };
         }
       }
     }
-  }), [G, ie, Q, ce, j, X, U, te, re, k, L]), R(() => {
-    H && H(async () => {
-      const d = k.getActiveArtboard();
+  }), [Z, le, Q, de, G, X, U, ae, oe, C, H]), I(() => {
+    N && N(async () => {
+      const d = C.getActiveArtboard();
       if (!d)
         throw new Error("[SnowconeCanvas] No active artboard found");
-      const h = Ee(
+      const g = Se(
         d.width,
         d.height,
         X,
         U
-      ), g = j === "blob" ? await Q(d.id, { scale: h }) : await G(d.id, { scale: h });
-      return { [d.name]: g };
+      ), p = G === "blob" ? await Q(d.id, { scale: g }) : await Z(d.id, { scale: g });
+      return { [d.name]: p };
     });
-  }, [H, G, Q, k, j, X, U]);
-  const [Ue, le] = q("idle"), [ze, ge] = q(null), pe = T(void 0), be = T(!1), Ye = T(!1), [at, ot] = q(!1), st = T(0), it = T(0), ve = T(!1);
-  R(() => {
-    if (be.current) return;
-    be.current = !0;
-    const s = o || [{ name: "Design", width: Ze, height: qe }], d = k.getAllArtboards();
+  }, [N, Z, Q, C, G, X, U]);
+  const [Ne, ue] = re("idle"), [He, ve] = re(null), xe = D(void 0), ye = D(!1), Le = D(!1), [ft, mt] = re(!1), ht = D(0), gt = D(0), we = D(!1);
+  I(() => {
+    if (ye.current) return;
+    ye.current = !0;
+    const s = o || [{ name: "Design", width: qe, height: Je }], d = C.getAllArtboards();
     if (d.length > 0) {
-      const h = s[0], g = d[0], f = me ? "transparent" : void 0;
-      g.name = h.name, g.width = h.width, g.height = h.height, g.clipShape = h.clipShape, h.backgroundColor ? g.backgroundColor = h.backgroundColor : f && (g.backgroundColor = f);
+      const g = s[0], p = d[0], f = Fe ? "transparent" : void 0;
+      p.name = g.name, p.width = g.width, p.height = g.height, p.clipShape = g.clipShape, g.backgroundColor ? p.backgroundColor = g.backgroundColor : f && (p.backgroundColor = f);
       for (let u = 1; u < s.length; u++)
-        rt(s[u].width, s[u].height, {
+        dt(s[u].width, s[u].height, {
           name: s[u].name,
           backgroundColor: s[u].backgroundColor ?? f,
           clipShape: s[u].clipShape
         });
     }
-    et();
-  }, []), R(() => {
-    if (!(!p || p.length === 0) && !Ye.current && be.current) {
-      Ye.current = !0, ot(!0);
+    ct();
+  }, []), I(() => {
+    if (!(!m || m.length === 0) && !Le.current && ye.current) {
+      Le.current = !0, mt(!0);
       try {
-        const s = Ct.createManyFromJSON(p), d = k.getAllArtboards();
+        const s = jt.createManyFromJSON(m), d = C.getAllArtboards();
         if (d.length > 0) {
-          const g = d[0];
+          const p = d[0];
           for (const f of s)
-            k.addElementToArtboard(f.id, g.id);
+            C.addElementToArtboard(f.id, p.id);
         }
-        oe(s);
-        const h = /* @__PURE__ */ new Set();
-        for (const g of s) {
-          const f = g.fontFamily;
-          typeof f == "string" && f.trim().length > 0 && h.add(f);
+        ie(s);
+        const g = /* @__PURE__ */ new Set();
+        for (const p of s) {
+          const f = p.fontFamily;
+          typeof f == "string" && f.trim().length > 0 && g.add(f);
         }
-        if (h.size > 0 && typeof document < "u") {
-          const g = document.fonts ?? null, f = Array.from(h).map((u) => {
-            const x = `font-${u.replace(/\s+/g, "-").toLowerCase()}`;
-            let b = document.getElementById(x);
-            return b || (b = document.createElement("link"), b.id = x, b.rel = "stylesheet", b.href = `https://fonts.googleapis.com/css2?family=${u.replace(
+        if (g.size > 0 && typeof document < "u") {
+          const p = document.fonts ?? null, f = Array.from(g).map((u) => {
+            const y = `font-${u.replace(/\s+/g, "-").toLowerCase()}`;
+            let b = document.getElementById(y);
+            return b || (b = document.createElement("link"), b.id = y, b.rel = "stylesheet", b.href = `https://fonts.googleapis.com/css2?family=${u.replace(
               /\s+/g,
               "+"
-            )}:wght@400;700&display=swap`, document.head.appendChild(b)), new Promise((F) => {
+            )}:wght@400;700&display=swap`, document.head.appendChild(b)), new Promise((P) => {
               if (b.sheet) {
-                F(u);
+                P(u);
                 return;
               }
-              const Y = () => F(u);
-              b.addEventListener("load", Y, { once: !0 }), b.addEventListener("error", Y, { once: !0 }), setTimeout(Y, 4e3);
+              const $ = () => P(u);
+              b.addEventListener("load", $, { once: !0 }), b.addEventListener("error", $, { once: !0 }), setTimeout($, 4e3);
             });
           });
           Promise.all(f).then((u) => {
-            if (g)
+            if (p)
               return Promise.all(
-                u.flatMap((x) => [
-                  g.load(`400 16px "${x}"`).catch(() => {
+                u.flatMap((y) => [
+                  p.load(`400 16px "${y}"`).catch(() => {
                   }),
-                  g.load(`700 16px "${x}"`).catch(() => {
+                  p.load(`700 16px "${y}"`).catch(() => {
                   })
                 ])
               );
           }).then(() => {
-            oe((u) => u.slice());
+            ie((u) => u.slice());
           });
         }
       } catch (s) {
@@ -595,41 +731,41 @@ const Je = je((t, e) => {
         });
       }
     }
-  }, [p, k, oe, B]), R(() => {
+  }, [m, C, ie, B]), I(() => {
     if (!i) {
-      ve.current = !0;
+      we.current = !0;
       return;
     }
-    const s = L.find((d) => d.name === i);
+    const s = H.find((d) => d.name === i);
     if (s) {
-      const d = k.getActiveArtboard();
-      (d == null ? void 0 : d.name) !== i && nt(s.id), ve.current = !0;
+      const d = C.getActiveArtboard();
+      (d == null ? void 0 : d.name) !== i && ut(s.id), we.current = !0;
     }
-  }, [i, L]), R(() => {
-    if (!z || pe.current === z) return;
+  }, [i, H]), I(() => {
+    if (!z || xe.current === z) return;
     if (V.length > 0) {
-      pe.current = z;
+      xe.current = z;
       return;
     }
-    pe.current = z, (async () => {
-      le("loading"), ge(null);
+    xe.current = z, (async () => {
+      ue("loading"), ve(null);
       try {
-        const d = k.getAllArtboards();
+        const d = C.getAllArtboards();
         if (d.length === 0)
           throw new Error("No artboards available");
-        const h = [];
-        for (const g of d) {
-          const f = o == null ? void 0 : o.find((b) => b.name === g.name), u = (f == null ? void 0 : f.scaleMode) || ke, x = await Xt(
+        const g = [];
+        for (const p of d) {
+          const f = o == null ? void 0 : o.find((b) => b.name === p.name), u = (f == null ? void 0 : f.scaleMode) || Me, y = await hr(
             z,
             {
               artboard: {
-                width: g.width,
-                height: g.height,
-                x: g.x,
-                y: g.y
+                width: p.width,
+                height: p.height,
+                x: p.x,
+                y: p.y
               },
-              alignment: (f == null ? void 0 : f.fitAlign) || Re,
-              scale: Ie,
+              alignment: (f == null ? void 0 : f.fitAlign) || Ie,
+              scale: Ce,
               scaleMode: u,
               marginTop: f == null ? void 0 : f.fitMarginTop,
               marginRight: f == null ? void 0 : f.fitMarginRight,
@@ -637,135 +773,135 @@ const Je = je((t, e) => {
               marginLeft: f == null ? void 0 : f.fitMarginLeft
             }
           );
-          x.success && x.element ? (k.addElementToArtboard(x.element.id, g.id), h.push(x.element)) : K.error("Failed to load image for artboard:", g.name, x.error);
+          y.success && y.element ? (C.addElementToArtboard(y.element.id, p.id), g.push(y.element)) : K.error("Failed to load image for artboard:", p.name, y.error);
         }
-        if (h.length > 0)
-          oe((g) => [...g, ...h]), le("success"), y == null || y(z);
+        if (g.length > 0)
+          ie((p) => [...p, ...g]), ue("success"), k == null || k(z);
         else {
-          const g = new Error("Failed to load image into any artboard");
-          le("error"), ge(g), m == null || m(z, g), B({
+          const p = new Error("Failed to load image into any artboard");
+          ue("error"), ve(p), h == null || h(z, p), B({
             category: "image",
-            message: g.message,
-            originalError: g,
+            message: p.message,
+            originalError: p,
             recoverable: !0
           });
         }
       } catch (d) {
-        const h = d instanceof Error ? d : new Error(String(d));
-        le("error"), ge(h), m == null || m(z, h), B({
+        const g = d instanceof Error ? d : new Error(String(d));
+        ue("error"), ve(g), h == null || h(z, g), B({
           category: "image",
-          message: h.message,
-          originalError: h,
+          message: g.message,
+          originalError: g,
           recoverable: !0
         });
       }
     })();
-  }, [z, Re, Ie, ke]), R(() => {
-    P == null || P(Be);
-  }, [Be, P]), R(() => {
-    if (!S) return;
-    const s = k.getActiveArtboard(), d = {
-      elements: V.map((h) => h.toJSON()),
-      artboards: L.map((h) => ({
-        name: h.name,
-        width: h.width,
-        height: h.height,
-        clipShape: h.clipShape,
-        backgroundColor: h.backgroundColor
+  }, [z, Ie, Ce, Me]), I(() => {
+    M == null || M(Pe);
+  }, [Pe, M]), I(() => {
+    if (!A) return;
+    const s = C.getActiveArtboard(), d = {
+      elements: V.map((g) => g.toJSON()),
+      artboards: H.map((g) => ({
+        name: g.name,
+        width: g.width,
+        height: g.height,
+        clipShape: g.clipShape,
+        backgroundColor: g.backgroundColor
       })),
       activeArtboard: (s == null ? void 0 : s.name) || "Design"
     };
-    S(d);
-  }, [V, L, S]), R(() => {
-    if (!l || !ve.current) return;
-    const s = k.getActiveArtboard();
+    A(d);
+  }, [V, H, A]), I(() => {
+    if (!l || !we.current) return;
+    const s = C.getActiveArtboard();
     s && l(s.name);
-  }, [k.getActiveArtboardId()]);
-  const ct = N(async () => {
-    if (!E && !w) return;
-    const s = ++it.current, d = Date.now();
-    let h = X;
+  }, [C.getActiveArtboardId()]);
+  const pt = W(async () => {
+    if (!S && !E) return;
+    const s = ++gt.current, d = Date.now();
+    let g = X;
     if (U > 0 && isFinite(U))
-      for (const u of L) {
-        const x = Ee(u.width, u.height, X, U);
-        h = Math.min(h, x);
+      for (const u of H) {
+        const y = Se(u.width, u.height, X, U);
+        g = Math.min(g, y);
       }
-    const g = k.getActiveArtboard(), f = (g == null ? void 0 : g.id) ?? "unknown";
-    w == null || w({ status: "rendering", artboardId: f }), st.current = d;
+    const p = C.getActiveArtboard(), f = (p == null ? void 0 : p.id) ?? "unknown";
+    E == null || E({ status: "rendering", artboardId: f }), ht.current = d;
     try {
       let u;
-      const x = {
-        format: te,
-        scale: h,
-        quality: re
+      const y = {
+        format: ae,
+        scale: g,
+        quality: oe
       };
-      if (j === "blob")
-        if (fe) {
-          const b = await ce(x);
+      if (G === "blob")
+        if (pe) {
+          const b = await de(y);
           u = {};
-          for (const [F, Y] of Object.entries(b)) {
-            const O = L.find((Z) => Z.id === F);
-            O && (u[O.name] = Y);
+          for (const [P, $] of Object.entries(b)) {
+            const Y = H.find((ee) => ee.id === P);
+            Y && (u[Y.name] = $);
           }
         } else {
-          const b = k.getActiveArtboard();
+          const b = C.getActiveArtboard();
           if (!b) return;
-          const F = await Q(b.id, x);
-          u = { [b.name]: F };
+          const P = await Q(b.id, y);
+          u = { [b.name]: P };
         }
-      else if (fe) {
-        const b = await ie(x);
+      else if (pe) {
+        const b = await le(y);
         u = {};
-        for (const [F, Y] of Object.entries(b)) {
-          const O = L.find((Z) => Z.id === F);
-          O && (u[O.name] = Y);
+        for (const [P, $] of Object.entries(b)) {
+          const Y = H.find((ee) => ee.id === P);
+          Y && (u[Y.name] = $);
         }
       } else {
-        const b = k.getActiveArtboard();
+        const b = C.getActiveArtboard();
         if (!b) return;
-        const F = await G(b.id, x);
-        u = { [b.name]: F };
+        const P = await Z(b.id, y);
+        u = { [b.name]: P };
       }
-      E == null || E(u), w == null || w({ status: "complete", artboardId: f, result: u });
+      S == null || S(u), E == null || E({ status: "complete", artboardId: f, result: u });
     } catch (u) {
-      const x = u instanceof Error ? u.message : String(u);
-      if (x.includes("Canvas ref not available"))
+      const y = u instanceof Error ? u.message : String(u);
+      if (y.includes("Canvas ref not available"))
         return;
       const b = Date.now() - d;
       K.error("Export failed (export #" + s + "):", {
         duration: `${b}ms`,
-        error: x
+        error: y
       });
-      const F = u instanceof Error ? u : new Error(x);
-      w == null || w({ status: "error", artboardId: f, error: F }), B({
+      const P = u instanceof Error ? u : new Error(y);
+      E == null || E({ status: "error", artboardId: f, error: P }), B({
         category: "export",
-        message: F.message,
-        originalError: F,
+        message: P.message,
+        originalError: P,
         artboardId: f,
         recoverable: !0
       });
     }
-  }, [E, w, fe, j, X, U, te, re, G, ie, Q, ce, L, k, V, J, B]);
-  R(() => {
-    Se !== void 0 && Se > 0 && K.warn(
+  }, [S, E, pe, G, X, U, ae, oe, Z, le, Q, de, H, C, V, J, B]);
+  I(() => {
+    Re !== void 0 && Re > 0 && K.warn(
       "autoExportInterval is deprecated and ignored. Use autoExportConfig={{ enabled: true, debounceMs: 100, maxWaitMs: 1000 }} instead."
     );
-  }, []), R(() => {
+  }, []), I(() => {
   }, [V]);
-  const lt = N(() => {
-    if (M == null || M(), w) {
-      const s = k.getActiveArtboard();
-      w({ status: "scheduled", artboardId: (s == null ? void 0 : s.id) ?? "unknown" });
+  const bt = W(() => {
+    if (T == null || T(), E) {
+      const s = C.getActiveArtboard();
+      E({ status: "scheduled", artboardId: (s == null ? void 0 : s.id) ?? "unknown" });
     }
-  }, [M, w, k]), dt = !!p && p.length > 0, xe = Wt({
-    isCanvasReady: he,
+  }, [T, E, C]), vt = !!m && m.length > 0, Ee = sr({
+    isCanvasReady: be,
     elements: V,
-    hasInitialElements: dt,
-    initialElementsLoaded: at
-  }), $e = T(!1);
-  R(() => {
-    xe && !$e.current && ($e.current = !0, v == null || v());
-  }, [xe, v]), Ft({
+    hasInitialElements: vt,
+    initialElementsLoaded: ft
+  }), We = D(!1);
+  I(() => {
+    Ee && !We.current && (We.current = !0, x == null || x());
+  }, [Ee, x]), rr({
     config: J ? {
       enabled: J.enabled ?? !0,
       debounceMs: J.debounceMs ?? 100,
@@ -774,24 +910,24 @@ const Je = je((t, e) => {
       enabled: !1
       // Only use smart export if autoExportConfig is provided
     },
-    historyManager: tt,
-    artboards: L,
+    historyManager: lt,
+    artboards: H,
     elements: V,
-    onExport: ct,
-    onExportScheduled: lt,
-    isCanvasReady: xe
+    onExport: pt,
+    onExportScheduled: bt,
+    isCanvasReady: Ee
     // Gate exports until content is fully ready (fonts loaded, elements deserialized)
-  }), R(() => {
-    if (L.length > 0 && !he) {
+  }), I(() => {
+    if (H.length > 0 && !be) {
       const s = requestAnimationFrame(() => {
-        se(!0);
+        ce(!0);
       });
       return () => cancelAnimationFrame(s);
     }
-  }, [L.length, he, se]), R(() => () => {
-    se(!1);
-  }, [se]);
-  const ut = N((s) => {
+  }, [H.length, be, ce]), I(() => () => {
+    ce(!1);
+  }, [ce]);
+  const xt = W((s) => {
     B({
       category: "unknown",
       message: s.message,
@@ -799,25 +935,25 @@ const Je = je((t, e) => {
       recoverable: !1
     });
   }, [B]);
-  return Ue === "loading" ? /* @__PURE__ */ C(
+  return Ne === "loading" ? /* @__PURE__ */ v(
     "div",
     {
-      className: W,
+      className: L,
       style: {
-        ...D,
+        ...F,
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         backgroundColor: "var(--surface, #f5f5f5)"
       },
-      children: /* @__PURE__ */ C(vt, { size: 48 })
+      children: /* @__PURE__ */ v(Wt, { size: 48 })
     }
-  ) : Ue === "error" && ze ? /* @__PURE__ */ C(
+  ) : Ne === "error" && He ? /* @__PURE__ */ v(
     "div",
     {
-      className: W,
+      className: L,
       style: {
-        ...D,
+        ...F,
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -825,16 +961,16 @@ const Je = je((t, e) => {
         color: "var(--danger, #dc2626)",
         padding: "1rem"
       },
-      children: /* @__PURE__ */ de("div", { className: "text-center", children: [
-        /* @__PURE__ */ C("div", { className: "font-medium", children: "Failed to load image" }),
-        /* @__PURE__ */ C("div", { className: "text-sm mt-1 opacity-70", children: ze.message })
+      children: /* @__PURE__ */ j("div", { className: "text-center", children: [
+        /* @__PURE__ */ v("div", { className: "font-medium", children: "Failed to load image" }),
+        /* @__PURE__ */ v("div", { className: "text-sm mt-1 opacity-70", children: He.message })
       ] })
     }
-  ) : /* @__PURE__ */ C(xt, { kit: ne, children: /* @__PURE__ */ C("div", { className: `app-modern ${W || ""}`, style: { ...D, position: "relative" }, children: /* @__PURE__ */ de(
-    Tt,
+  ) : /* @__PURE__ */ v(Bt, { kit: _, children: /* @__PURE__ */ v("div", { className: `app-modern ${L || ""}`, style: { ...F, position: "relative" }, children: /* @__PURE__ */ j(
+    er,
     {
-      onError: ut,
-      fallback: (s, d) => /* @__PURE__ */ de(
+      onError: xt,
+      fallback: (s, d) => /* @__PURE__ */ j(
         "div",
         {
           style: {
@@ -850,9 +986,9 @@ const Je = je((t, e) => {
             textAlign: "center"
           },
           children: [
-            /* @__PURE__ */ C("div", { style: { fontSize: "18px", fontWeight: 600, marginBottom: "8px" }, children: "Something went wrong" }),
-            /* @__PURE__ */ C("div", { style: { fontSize: "14px", opacity: 0.7, marginBottom: "16px", maxWidth: "400px" }, children: s.message }),
-            /* @__PURE__ */ C(
+            /* @__PURE__ */ v("div", { style: { fontSize: "18px", fontWeight: 600, marginBottom: "8px" }, children: "Something went wrong" }),
+            /* @__PURE__ */ v("div", { style: { fontSize: "14px", opacity: 0.7, marginBottom: "16px", maxWidth: "400px" }, children: s.message }),
+            /* @__PURE__ */ v(
               "button",
               {
                 onClick: d,
@@ -873,100 +1009,48 @@ const Je = je((t, e) => {
         }
       ),
       children: [
-        !_e && (Pe || He ? /* @__PURE__ */ C("div", { className: Pe, style: He, children: /* @__PURE__ */ C(
-          Oe,
-          {
-            style: { width: "100%" },
-            fitPadding: Ce,
-            artboardBorderRadius: Me,
-            fixedMargin: Te,
-            maxHeight: De,
-            showRotationHandle: Fe,
-            enableShortcuts: Ne,
-            canvasCutouts: Le,
-            pieceGuides: me,
-            pieceFocus: We
-          }
-        ) }) : /* @__PURE__ */ C(
-          Oe,
-          {
-            style: { width: "100%" },
-            fitPadding: Ce,
-            artboardBorderRadius: Me,
-            fixedMargin: Te,
-            maxHeight: De,
-            showRotationHandle: Fe,
-            enableShortcuts: Ne,
-            canvasCutouts: Le,
-            pieceGuides: me,
-            pieceFocus: We
-          }
-        )),
-        ee
+        !at && /* @__PURE__ */ (() => {
+          const s = /* @__PURE__ */ v(
+            Ut,
+            {
+              style: { width: "100%" },
+              fitPadding: _e,
+              artboardBorderRadius: et,
+              fixedMargin: tt,
+              maxHeight: rt,
+              showRotationHandle: nt,
+              enableShortcuts: it,
+              canvasCutouts: ot,
+              pieceGuides: Fe,
+              pieceFocus: st
+            }
+          );
+          return /* @__PURE__ */ v(Jt, { kit: _, canvas: Te || De ? /* @__PURE__ */ v("div", { className: Te, style: De, children: s }) : s });
+        })(),
+        ne
       ]
     }
   ) }) });
 });
-Je.displayName = "SnowconeCanvasInner";
-const Kt = je((t, e) => {
+Qe.displayName = "SnowconeCanvasInner";
+const pr = je((t, e) => {
   var o;
-  const { inheritTheme: r, externalProvider: a } = t, n = t.viewPadding ?? ((o = t.layoutConfig) == null ? void 0 : o.viewPadding), c = /* @__PURE__ */ C(Je, { ref: e, ...t });
-  return a ? /* @__PURE__ */ C(Xe, { defaultTheme: "light", passive: r, children: c }) : /* @__PURE__ */ C(Xe, { defaultTheme: "light", passive: r, children: /* @__PURE__ */ C(It, { viewPadding: n, children: c }) });
+  const { inheritTheme: r, externalProvider: a } = t, n = t.viewPadding ?? ((o = t.layoutConfig) == null ? void 0 : o.viewPadding), c = /* @__PURE__ */ v(Qe, { ref: e, ...t });
+  return a ? /* @__PURE__ */ v(Oe, { defaultTheme: "light", passive: r, children: c }) : /* @__PURE__ */ v(Oe, { defaultTheme: "light", passive: r, children: /* @__PURE__ */ v(Vt, { viewPadding: n, children: c }) });
 });
-Kt.displayName = "SnowconeCanvas";
-const Ve = _("useCommands");
-function ir() {
-  const t = ue(), {
-    undo: e,
-    redo: r,
-    canUndo: a,
-    canRedo: n,
-    executeElementUpdate: c,
-    executeAddElement: o,
-    executeRemoveElement: i,
-    executeReorderElement: l,
-    executeCommandBatch: p,
-    executeCreateArtboard: S,
-    executeDeleteArtboard: P,
-    executeUpdateArtboard: I
-  } = t, E = N(() => {
-    Ve.warn("[useCommands] clearHistory is not yet implemented in EditorContext");
-  }, []), M = N((w) => {
-    Ve.warn("[useCommands] clearArtboardHistory is not yet implemented in EditorContext");
-  }, []);
-  return {
-    // Undo/Redo
-    undo: e,
-    redo: r,
-    canUndo: a,
-    canRedo: n,
-    // History management
-    clearHistory: E,
-    clearArtboardHistory: M,
-    // Command execution
-    executeElementUpdate: c,
-    executeAddElement: o,
-    executeRemoveElement: i,
-    executeReorderElement: l,
-    executeCreateArtboard: S,
-    executeDeleteArtboard: P,
-    executeUpdateArtboard: I,
-    // Batch execution
-    executeCommandBatch: p
-  };
-}
-function cr() {
-  const { selectedElement: t } = ue();
+pr.displayName = "SnowconeCanvas";
+function Dr() {
+  const { selectedElement: t } = ge();
   return t ?? null;
 }
-function lr() {
-  const { isCanvasReady: t } = ue();
+function Fr() {
+  const { isCanvasReady: t } = ge();
   return t;
 }
-const jt = () => {
-}, Gt = [];
-function dr(t) {
-  const { elementStore: e } = Ae(), { executeElementUpdate: r } = Ge(), a = ye(() => e.getAllByName(t).filter((o) => o instanceof At), [e, t]), n = N(
+const br = () => {
+}, vr = [];
+function Pr(t) {
+  const { elementStore: e } = ke(), { executeElementUpdate: r } = Ge(), a = he(() => e.getAllByName(t).filter((o) => o instanceof Ot), [e, t]), n = W(
     (c) => {
       for (const o of a) {
         const i = o.clone();
@@ -975,7 +1059,7 @@ function dr(t) {
     },
     [a, r]
   );
-  return a.length === 0 ? { text: "", setText: jt, element: null, elements: Gt, isConnected: !1 } : {
+  return a.length === 0 ? { text: "", setText: br, element: null, elements: vr, isConnected: !1 } : {
     text: a[0].getText(),
     setText: n,
     element: a[0],
@@ -983,9 +1067,9 @@ function dr(t) {
     isConnected: !0
   };
 }
-const Qt = () => {
-}, Jt = [];
-function Zt(t, e, r) {
+const xr = () => {
+}, yr = [];
+function wr(t, e, r) {
   const a = t / e;
   if (r >= a) {
     const n = e, c = n * r, o = t / c;
@@ -1009,63 +1093,63 @@ function Zt(t, e, r) {
     };
   }
 }
-function ur(t, e) {
-  const r = (e == null ? void 0 : e.fit) ?? "cover", { elementStore: a, setElements: n } = Ae(), { executeElementUpdate: c } = Ge(), o = ye(() => a.getAllByName(t).filter((E) => E instanceof Ke), [a, t]), i = T(/* @__PURE__ */ new Map());
-  for (const I of o)
-    if (!i.current.has(I.id)) {
-      const E = I.transformData;
-      i.current.set(I.id, {
-        width: E.width * E.cropWidth,
-        height: E.height * E.cropHeight
+function Nr(t, e) {
+  const r = (e == null ? void 0 : e.fit) ?? "cover", { elementStore: a, setElements: n } = ke(), { executeElementUpdate: c } = Ge(), o = he(() => a.getAllByName(t).filter((S) => S instanceof Ve), [a, t]), i = D(/* @__PURE__ */ new Map());
+  for (const w of o)
+    if (!i.current.has(w.id)) {
+      const S = w.transformData;
+      i.current.set(w.id, {
+        width: S.width * S.cropWidth,
+        height: S.height * S.cropHeight
       });
     }
-  const l = T(o);
+  const l = D(o);
   l.current = o;
-  const p = T(c);
-  p.current = c;
-  const S = T(n);
-  S.current = n;
-  const P = N(
-    (I) => {
-      const E = l.current, M = p.current;
-      for (const w of E) {
-        const H = i.current.get(w.id);
-        if (!H) continue;
-        const { width: y, height: m } = H, A = w.clone();
-        A.imageLoaded = !1, A.imageElement = null, A.isCropping = !1, A.imageUrl = I, r === "cover" ? (A.preserveDimensions = !0, A.onLoadCallback = (v) => {
-          const W = v.imageAspectRatio || 1, D = Zt(y, m, W);
-          v.transformData.width = D.width, v.transformData.height = D.height, v.transformData.cropX = D.cropX, v.transformData.cropY = D.cropY, v.transformData.cropWidth = D.cropWidth, v.transformData.cropHeight = D.cropHeight, M(w, v);
-        }) : (A.preserveDimensions = !1, A.onLoadCallback = (v) => {
-          const W = v.transformData.width, D = v.transformData.height, $ = Math.min(y / W, m / D, 1);
-          $ < 1 && (v.transformData.width = W * $, v.transformData.height = D * $), v.transformData.cropX = 0, v.transformData.cropY = 0, v.transformData.cropWidth = 1, v.transformData.cropHeight = 1, M(w, v);
-        }), A.loadImage(I);
+  const m = D(c);
+  m.current = c;
+  const A = D(n);
+  A.current = n;
+  const M = W(
+    (w) => {
+      const S = l.current, T = m.current;
+      for (const E of S) {
+        const N = i.current.get(E.id);
+        if (!N) continue;
+        const { width: k, height: h } = N, R = E.clone();
+        R.imageLoaded = !1, R.imageElement = null, R.isCropping = !1, R.imageUrl = w, r === "cover" ? (R.preserveDimensions = !0, R.onLoadCallback = (x) => {
+          const L = x.imageAspectRatio || 1, F = wr(k, h, L);
+          x.transformData.width = F.width, x.transformData.height = F.height, x.transformData.cropX = F.cropX, x.transformData.cropY = F.cropY, x.transformData.cropWidth = F.cropWidth, x.transformData.cropHeight = F.cropHeight, T(E, x);
+        }) : (R.preserveDimensions = !1, R.onLoadCallback = (x) => {
+          const L = x.transformData.width, F = x.transformData.height, O = Math.min(k / L, h / F, 1);
+          O < 1 && (x.transformData.width = L * O, x.transformData.height = F * O), x.transformData.cropX = 0, x.transformData.cropY = 0, x.transformData.cropWidth = 1, x.transformData.cropHeight = 1, T(E, x);
+        }), R.loadImage(w);
       }
     },
     [r]
     // Stable deps only — imageElements/executeElementUpdate/setElements accessed via refs
   );
-  return o.length === 0 ? { imageUrl: "", setImageUrl: Qt, element: null, elements: Jt, isConnected: !1 } : {
+  return o.length === 0 ? { imageUrl: "", setImageUrl: xr, element: null, elements: yr, isConnected: !1 } : {
     imageUrl: o[0].imageUrl,
-    setImageUrl: P,
+    setImageUrl: M,
     element: o[0],
     elements: o,
     isConnected: !0
   };
 }
-function fr(t) {
-  const { elementStore: e } = Ae();
+function Hr(t) {
+  const { elementStore: e } = ke();
   return t ? e.getByName(t) ?? null : null;
 }
-function mr() {
-  const { zoom: t, panOffset: e, zoomIn: r, zoomOut: a, zoomToFit: n, resetView: c, setZoom: o, setPanOffset: i } = kt();
+function Lr() {
+  const { zoom: t, panOffset: e, zoomIn: r, zoomOut: a, zoomToFit: n, resetView: c, setZoom: o, setPanOffset: i } = Kt();
   return { zoom: t, panOffset: e, zoomIn: r, zoomOut: a, zoomToFit: n, resetView: c, setZoom: o, setPanOffset: i };
 }
-const qt = 1;
-function hr(t) {
+const Er = 1;
+function Wr(t) {
   var a;
-  const e = ((a = t.artboards) == null ? void 0 : a[0]) || { name: "Front", width: 800, height: 800 }, r = (t.elements || []).map(_t);
+  const e = ((a = t.artboards) == null ? void 0 : a[0]) || { name: "Front", width: 800, height: 800 }, r = (t.elements || []).map(Ar);
   return {
-    schemaVersion: qt,
+    schemaVersion: Er,
     artboards: [{
       id: "artboard-1",
       name: e.name || "Front",
@@ -1081,15 +1165,15 @@ function hr(t) {
     }]
   };
 }
-function _t(t) {
+function Ar(t) {
   const e = t.type || t.transformType;
-  return e === "image" ? er(t) : {
+  return e === "image" ? Sr(t) : {
     ...t,
     type: e
   };
 }
-function er(t) {
-  var p;
+function Sr(t) {
+  var m;
   const e = t.transformData || {}, r = t.masks && t.masks.length > 0, a = e.width || 0, n = e.height || 0, c = r ? a : a * (e.cropWidth ?? 1), o = r ? n : n * (e.cropHeight ?? 1), i = {
     id: t.id,
     type: "image",
@@ -1101,40 +1185,40 @@ function er(t) {
     imageUrl: t.imageUrl,
     imageAspectRatio: t.imageAspectRatio
   };
-  return !r && (e.cropX !== 0 || e.cropY !== 0 || e.cropWidth !== 1 || e.cropHeight !== 1) && (i.cropX = e.cropX, i.cropY = e.cropY, i.cropWidth = e.cropWidth, i.cropHeight = e.cropHeight, i.needsCropPixelConversion = !0), e.flipHorizontal && (i.flipHorizontal = e.flipHorizontal), e.flipVertical && (i.flipVertical = e.flipVertical), e.borderRadius && (i.borderRadius = e.borderRadius), t.opacity !== void 0 && (i.opacity = t.opacity), t.distressEffect && (i.distressEffect = t.distressEffect), ((p = t.masks) == null ? void 0 : p.length) > 0 && (i.masks = t.masks), t.blendMode && (i.blendMode = t.blendMode), t.knockoutParts && (i.knockoutParts = t.knockoutParts), t.stroke && (i.stroke = t.stroke), i;
+  return !r && (e.cropX !== 0 || e.cropY !== 0 || e.cropWidth !== 1 || e.cropHeight !== 1) && (i.cropX = e.cropX, i.cropY = e.cropY, i.cropWidth = e.cropWidth, i.cropHeight = e.cropHeight, i.needsCropPixelConversion = !0), e.flipHorizontal && (i.flipHorizontal = e.flipHorizontal), e.flipVertical && (i.flipVertical = e.flipVertical), e.borderRadius && (i.borderRadius = e.borderRadius), t.opacity !== void 0 && (i.opacity = t.opacity), t.distressEffect && (i.distressEffect = t.distressEffect), ((m = t.masks) == null ? void 0 : m.length) > 0 && (i.masks = t.masks), t.blendMode && (i.blendMode = t.blendMode), t.knockoutParts && (i.knockoutParts = t.knockoutParts), t.stroke && (i.stroke = t.stroke), i;
 }
-wt();
+zt();
 export {
-  br as ALL_CAPABILITIES,
-  qt as CANVAS_STATE_SCHEMA_VERSION,
-  vr as COMPACT_CUSTOMIZER,
-  xr as EMBED_ONLY,
-  Tt as ErrorBoundary,
-  wr as MINIMAL_CAPABILITIES,
-  Er as PRO_STUDIO,
-  Kt as SnowconeCanvas,
-  yr as createKit,
-  Kt as default,
-  Ir as deserializeState,
-  Ar as extendKit,
-  kr as migrateState,
-  ht as resolveKit,
-  Cr as serializeState,
-  hr as serializeStateForServer,
-  pt as useArtboards,
-  Ft as useAutoExport,
-  lr as useCanvasReady,
-  ir as useCommands,
-  Wt as useContentReady,
-  ue as useEditor,
-  fr as useElementByName,
-  bt as useExport,
-  ur as useImageBinding,
-  Sr as useLayers,
-  cr as useSelectedElement,
-  dr as useTextBinding,
-  mr as useViewport,
-  gt as validateKit,
-  Mr as validateState
+  zr as ALL_CAPABILITIES,
+  Er as CANVAS_STATE_SCHEMA_VERSION,
+  $r as COMPACT_CUSTOMIZER,
+  Or as EMBED_ONLY,
+  er as ErrorBoundary,
+  Yr as MINIMAL_CAPABILITIES,
+  Xr as PRO_STUDIO,
+  pr as SnowconeCanvas,
+  Vr as createKit,
+  pr as default,
+  Zr as deserializeState,
+  Kr as extendKit,
+  Qr as migrateState,
+  Pt as resolveKit,
+  qr as serializeState,
+  Wr as serializeStateForServer,
+  Ht as useArtboards,
+  rr as useAutoExport,
+  Fr as useCanvasReady,
+  Gt as useCommands,
+  sr as useContentReady,
+  ge as useEditor,
+  Hr as useElementByName,
+  Lt as useExport,
+  Nr as useImageBinding,
+  jr as useLayers,
+  Dr as useSelectedElement,
+  Pr as useTextBinding,
+  Lr as useViewport,
+  Nt as validateKit,
+  Jr as validateState
 };
 //# sourceMappingURL=index.mjs.map