@snowcone-app/canvas 0.37.1 → 0.38.0

package/dist/advanced.mjs

@@ -1,26 +1,26 @@
-import { D as te, T as M, i as D, B as re, I as q, j as I, k as ne, e as se } from "./useCommands-CQi4Pyd2.js";
-import { l as at, L as it, M as ct, m as lt, S as dt, n as ut, s as mt, o as ft } from "./useCommands-CQi4Pyd2.js";
-import { r as oe, v as ae } from "./validation-THw5W6N_.js";
-import { a as pt, b as xt, c as gt, d as bt, D as yt, e as vt, f as wt, G as St, K as Ct, g as Tt, L as Et, S as $t, T as kt, Z as At, h as Ft, i as Pt, j as Nt, k as Rt, l as Bt, m as Mt, n as Dt, u as It, o as zt, p as Ot } from "./validation-THw5W6N_.js";
-import { ImagePanel as Wt } from "./ImagePanel-DLxIDKV-.js";
-import { P as ie, a as ce, b as le } from "./ContextualToolbars-CG5Gmv_i.js";
-import { A as Gt, B as _t, c as Ut, C as jt, d as Jt, e as qt, F as Zt, f as Vt, I as Xt, g as Yt, M as Ht, h as Qt, S as er, T as tr, i as rr, j as nr, k as sr, U as or, l as ar, u as ir, m as cr } from "./ContextualToolbars-CG5Gmv_i.js";
-import { u as Z } from "./design-builder-CqgTpp9B.js";
-import { E as dr, P as ur, p as mr, b as fr, c as hr, e as pr, f as xr, g as gr, h as br, a as yr } from "./design-builder-CqgTpp9B.js";
+import { p as te, T as M, q as D, B as re, I as J, r as I, s as ne, e as se } from "./useCommands-x8J7_Mzy.js";
+import { t as ot, L as it, M as ct, v as lt, S as dt, w as ut, x as mt, u as ft } from "./useCommands-x8J7_Mzy.js";
+import { r as ae, v as oe } from "./validation-BG-V98h0.js";
+import { d as pt, e as xt, f as gt, h as bt, D as yt, b as vt, c as wt, G as St, i as Ct, K as Tt, L as Et, S as $t, T as kt, Z as At, j as Ft, g as Pt, k as Nt, l as Bt, a as Rt, m as Mt, n as Dt, u as It, o as zt, p as Ot } from "./validation-BG-V98h0.js";
+import { ImagePanel as Wt } from "./ImagePanel-BaX0UE-L.js";
+import { P as ie, b as ce, c as le } from "./ContextualToolbars-C62As-xY.js";
+import { A as Gt, B as _t, d as Ut, e as jt, C as qt, a as Jt, F as Zt, f as Vt, I as Xt, g as Yt, M as Ht, h as Qt, S as er, T as tr, i as rr, j as nr, k as sr, U as ar, l as or, u as ir, m as cr } from "./ContextualToolbars-C62As-xY.js";
+import { b as Z } from "./design-builder-CoCtjIwj.js";
+import { E as dr, P as ur, p as mr, j as fr, a as hr, u as pr, k as xr, c as gr, m as br, d as yr } from "./design-builder-CoCtjIwj.js";
 import { T as wr, u as Sr } from "./ThemeContext-Rjz25x9X.js";
-import { c as de, G as ue, F as me, g as fe, r as he, u as pe } from "./FontAnalyzer-CEYA_6fY.js";
-import { A as Tr, B as Er, I as $r, P as kr, R as Ar, S as Fr, T as Pr, h as Nr, a as Rr, b as Br, i as Mr, d as Dr, e as Ir, f as zr, j as Or, k as Lr, l as Wr, m as Kr, n as Gr, o as _r, p as Ur, q as jr, s as Jr, t as qr, v as Zr, w as Vr, x as Xr } from "./FontAnalyzer-CEYA_6fY.js";
-import { i as Hr, a as Qr, b as en, c as tn, d as rn } from "./guards-DldCuuJq.js";
-import { useState as A, useCallback as y, useEffect as V, useMemo as X, useRef as B, memo as xe } from "react";
-import { I as ge } from "./ExportManager-CDX5_up8.js";
+import { c as de, G as ue, ap as me, q as fe, aq as he, ar as pe } from "./FontAnalyzer-DWHS41ba.js";
+import { A as Tr, as as Er, I as $r, P as kr, at as Ar, S as Fr, T as Pr, au as Nr, av as Br, aw as Rr, ax as Mr, ay as Dr, az as Ir, aA as zr, aB as Or, aC as Lr, aD as Wr, aE as Kr, aF as Gr, aG as _r, aH as Ur, aI as jr, aJ as qr, aK as Jr, aL as Zr, aM as Vr, aN as Xr } from "./FontAnalyzer-DWHS41ba.js";
+import { a as Hr, i as Qr, b as en, c as tn, d as rn } from "./guards-DMmhw_Ow.js";
+import { useState as A, useCallback as y, useEffect as V, useMemo as X, useRef as R, memo as xe } from "react";
+import { I as ge } from "./ExportManager-BbBfO22S.js";
 import { e as be, c as ye } from "./compose-DtQL_oit.js";
-import { jsxs as b, jsx as a, Fragment as ve } from "react/jsx-runtime";
-import { P as sn, p as on, u as an } from "./usePieceGuideBundle-BUQKb0Ja.js";
+import { jsxs as b, jsx as o, Fragment as ve } from "react/jsx-runtime";
+import { P as sn, p as an, u as on } from "./usePieceGuideBundle-C7r06a_x.js";
 const ze = ({
   title: e,
   icon: t,
   children: r,
-  enableable: o = !1,
+  enableable: a = !1,
   enabled: n = !1,
   onEnabledChange: s,
   collapsible: i = !1,
@@ -28,7 +28,7 @@ const ze = ({
   onExpandChange: l,
   className: f = ""
 }) => {
-  const w = o ? n && m : i ? m : !0, h = o && n || i, d = () => {
+  const w = a ? n && m : i ? m : !0, h = a && n || i, d = () => {
     s && s(!n);
   }, c = () => {
     l && l(!m);
@@ -36,7 +36,7 @@ const ze = ({
   return /* @__PURE__ */ b("div", { className: `sc:rounded-xl sc:border sc:border-border-primary sc:bg-bg-secondary sc:p-xl ${f}`, children: [
     /* @__PURE__ */ b("div", { className: "sc:flex sc:items-center sc:justify-between", children: [
       /* @__PURE__ */ b("div", { className: "sc:flex sc:items-center sc:gap-md", children: [
-        o && /* @__PURE__ */ a("label", { className: "sc:flex sc:cursor-pointer sc:items-center", children: /* @__PURE__ */ a(
+        a && /* @__PURE__ */ o("label", { className: "sc:flex sc:cursor-pointer sc:items-center", children: /* @__PURE__ */ o(
           "input",
           {
             type: "checkbox",
@@ -46,11 +46,11 @@ const ze = ({
           }
         ) }),
         /* @__PURE__ */ b("div", { className: "sc:flex sc:items-center sc:gap-md", children: [
-          t && /* @__PURE__ */ a("span", { className: "sc:flex sc:items-center sc:text-text-secondary", children: t }),
-          /* @__PURE__ */ a("h3", { className: "sc:text-xl sc:font-semibold sc:text-text-primary", children: e })
+          t && /* @__PURE__ */ o("span", { className: "sc:flex sc:items-center sc:text-text-secondary", children: t }),
+          /* @__PURE__ */ o("h3", { className: "sc:text-xl sc:font-semibold sc:text-text-primary", children: e })
         ] })
       ] }),
-      h && /* @__PURE__ */ a(
+      h && /* @__PURE__ */ o(
         "button",
         {
           onClick: c,
@@ -60,29 +60,29 @@ const ze = ({
         }
       )
     ] }),
-    w && /* @__PURE__ */ a("div", { className: "sc:mt-xl sc:flex sc:flex-col sc:gap-xl", children: r })
+    w && /* @__PURE__ */ o("div", { className: "sc:mt-xl sc:flex sc:flex-col sc:gap-xl", children: r })
   ] });
 }, Oe = ({
   label: e,
   labelSuffix: t,
   children: r,
-  inline: o = !1,
+  inline: a = !1,
   className: n = ""
-}) => /* @__PURE__ */ b("div", { className: `sc:flex ${o ? "sc:items-center sc:justify-between" : "sc:flex-col"} sc:gap-sm ${n}`, children: [
+}) => /* @__PURE__ */ b("div", { className: `sc:flex ${a ? "sc:items-center sc:justify-between" : "sc:flex-col"} sc:gap-sm ${n}`, children: [
   /* @__PURE__ */ b("label", { className: "sc:flex sc:items-center sc:justify-between sc:text-base sc:font-medium sc:text-text-secondary", children: [
-    /* @__PURE__ */ a("span", { children: e }),
-    t && /* @__PURE__ */ a("span", { className: "sc:font-semibold sc:text-accent-primary", children: t })
+    /* @__PURE__ */ o("span", { children: e }),
+    t && /* @__PURE__ */ o("span", { className: "sc:font-semibold sc:text-accent-primary", children: t })
   ] }),
-  /* @__PURE__ */ a("div", { className: o ? "sc:flex-shrink-0" : "", children: r })
+  /* @__PURE__ */ o("div", { className: a ? "sc:flex-shrink-0" : "", children: r })
 ] });
 function Le({
   options: e,
   value: t,
   onChange: r,
-  fullWidth: o = !0,
+  fullWidth: a = !0,
   className: n = ""
 }) {
-  return /* @__PURE__ */ a("div", { className: `sc:flex sc:gap-sm ${n}`, children: e.map((s) => {
+  return /* @__PURE__ */ o("div", { className: `sc:flex sc:gap-sm ${n}`, children: e.map((s) => {
     const i = s.value === t;
     return /* @__PURE__ */ b(
       "button",
@@ -90,26 +90,26 @@ function Le({
         onClick: () => !s.disabled && r(s.value),
         disabled: s.disabled,
         title: s.tooltip,
-        className: ` ${o ? "sc:flex-1" : ""} sc:flex sc:items-center sc:justify-center sc:gap-xs sc:rounded-lg sc:border sc:px-md sc:py-sm sc:text-base sc:font-medium sc:transition-all sc:duration-fast ${i ? "sc:border-accent-primary sc:bg-accent-primary sc:text-text-on-accent" : "sc:border-border-primary sc:bg-bg-tertiary sc:text-text-secondary sc:hover:border-border-secondary sc:hover:bg-bg-hover sc:hover:text-text-primary"} ${s.disabled ? "sc:cursor-not-allowed sc:opacity-disabled" : "sc:cursor-pointer"} `,
+        className: ` ${a ? "sc:flex-1" : ""} sc:flex sc:items-center sc:justify-center sc:gap-xs sc:rounded-lg sc:border sc:px-md sc:py-sm sc:text-base sc:font-medium sc:transition-all sc:duration-fast ${i ? "sc:border-accent-primary sc:bg-accent-primary sc:text-text-on-accent" : "sc:border-border-primary sc:bg-bg-tertiary sc:text-text-secondary sc:hover:border-border-secondary sc:hover:bg-bg-hover sc:hover:text-text-primary"} ${s.disabled ? "sc:cursor-not-allowed sc:opacity-disabled" : "sc:cursor-pointer"} `,
         children: [
-          s.icon && /* @__PURE__ */ a("span", { className: "sc:flex sc:items-center", children: s.icon }),
-          /* @__PURE__ */ a("span", { children: s.label })
+          s.icon && /* @__PURE__ */ o("span", { className: "sc:flex sc:items-center", children: s.icon }),
+          /* @__PURE__ */ o("span", { children: s.label })
         ]
       },
       String(s.value)
     );
   }) });
 }
-const We = ({ label: e, icon: t, checked: r, onChange: o, disabled: n = !1, className: s = "" }) => {
+const We = ({ label: e, icon: t, checked: r, onChange: a, disabled: n = !1, className: s = "" }) => {
   const i = (m) => {
-    o(m.target.checked);
+    a(m.target.checked);
   };
   return /* @__PURE__ */ b(
     "label",
     {
       className: `sc:flex sc:cursor-pointer sc:items-center sc:gap-md ${n ? "sc:cursor-not-allowed sc:opacity-disabled" : ""} ${s}`,
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ o(
           "input",
           {
             type: "checkbox",
@@ -120,8 +120,8 @@ const We = ({ label: e, icon: t, checked: r, onChange: o, disabled: n = !1, clas
           }
         ),
         /* @__PURE__ */ b("span", { className: "sc:flex sc:items-center sc:gap-sm sc:text-base sc:font-medium sc:text-text-primary", children: [
-          t && /* @__PURE__ */ a("span", { className: "sc:flex sc:items-center sc:text-text-secondary", children: t }),
-          /* @__PURE__ */ a("span", { children: e })
+          t && /* @__PURE__ */ o("span", { className: "sc:flex sc:items-center sc:text-text-secondary", children: t }),
+          /* @__PURE__ */ o("span", { children: e })
         ] })
       ]
     }
@@ -130,28 +130,28 @@ const We = ({ label: e, icon: t, checked: r, onChange: o, disabled: n = !1, clas
   checked: e,
   onChange: t,
   label: r,
-  disabled: o = !1,
+  disabled: a = !1,
   className: n = ""
 }) => {
   const s = () => {
-    o || t(!e);
+    a || t(!e);
   };
   return /* @__PURE__ */ b(
     "label",
     {
-      className: `sc:flex sc:items-center sc:gap-md sc:cursor-pointer sc:select-none ${o ? "sc:opacity-50 sc:cursor-not-allowed" : ""} ${n}`.trim(),
+      className: `sc:flex sc:items-center sc:gap-md sc:cursor-pointer sc:select-none ${a ? "sc:opacity-50 sc:cursor-not-allowed" : ""} ${n}`.trim(),
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ o(
           "input",
           {
             type: "checkbox",
             checked: e,
             onChange: s,
-            disabled: o,
+            disabled: a,
             className: "sc:absolute sc:opacity-0 sc:w-0 sc:h-0 sc:peer"
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ o(
           "span",
           {
             className: `
@@ -164,7 +164,7 @@ const We = ({ label: e, icon: t, checked: r, onChange: o, disabled: n = !1, clas
         `.trim()
           }
         ),
-        r && /* @__PURE__ */ a("span", { className: "sc:text-md sc:text-text-primary sc:font-medium", children: r })
+        r && /* @__PURE__ */ o("span", { className: "sc:text-md sc:text-text-primary sc:font-medium", children: r })
       ]
     }
   );
@@ -172,14 +172,14 @@ const We = ({ label: e, icon: t, checked: r, onChange: o, disabled: n = !1, clas
   isOpen: e,
   onToggle: t,
   trigger: r,
-  children: o
-}) => /* @__PURE__ */ a(
+  children: a
+}) => /* @__PURE__ */ o(
   te,
   {
     isOpen: e,
     onToggle: t,
     trigger: r || /* @__PURE__ */ b(M, { delayDuration: 0, children: [
-      /* @__PURE__ */ a(D, { asChild: !0, children: /* @__PURE__ */ a(
+      /* @__PURE__ */ o(D, { asChild: !0, children: /* @__PURE__ */ o(
         re,
         {
           variant: "ghost",
@@ -187,15 +187,15 @@ const We = ({ label: e, icon: t, checked: r, onChange: o, disabled: n = !1, clas
           onClick: (s) => {
             s.stopPropagation(), t(!e);
           },
-          children: /* @__PURE__ */ a(q, { icon: "lucide:ellipsis-vertical", className: "sc:size-6" })
+          children: /* @__PURE__ */ o(J, { icon: "lucide:ellipsis-vertical", className: "sc:size-6" })
         }
       ) }),
-      /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a("p", { children: "More" }) })
+      /* @__PURE__ */ o(I, { children: /* @__PURE__ */ o("p", { children: "More" }) })
     ] }),
     position: "bottom",
     align: "end",
     offset: 4,
-    children: /* @__PURE__ */ a("div", { className: "sc:flex sc:items-center sc:gap-sm sc:bg-bg-primary sc:border sc:border-border-primary sc:rounded-xl sc:px-xl sc:py-md sc:shadow-sm sc:h-[52px]", children: o })
+    children: /* @__PURE__ */ o("div", { className: "sc:flex sc:items-center sc:gap-sm sc:bg-bg-primary sc:border sc:border-border-primary sc:rounded-xl sc:px-xl sc:py-md sc:shadow-sm sc:h-[52px]", children: a })
   }
 );
 function _e(e) {
@@ -230,18 +230,18 @@ function Ue(e) {
   e.capabilities && (t.capabilities = e.capabilities), e.behavior && (t.behavior = e.behavior), e.layout && (t.layout = e.layout), e.style && (t.style = e.style), e.content && (t.content = e.content);
   let r;
   if (e.extends) {
-    const n = oe(e.extends);
+    const n = ae(e.extends);
     r = be(n, { name: e.name, ...t });
   } else
     r = ye({ name: e.name, ...t });
-  const o = ae(r);
-  if (o.warnings.length > 0)
-    for (const n of o.warnings)
+  const a = oe(r);
+  if (a.warnings.length > 0)
+    for (const n of a.warnings)
       console.warn(`[loadKitFromJSON] Warning: ${n}`);
-  if (!o.valid)
+  if (!a.valid)
     throw new Error(
       `[loadKitFromJSON] Kit "${e.name}" failed validation:
-${o.errors.join(`
+${a.errors.join(`
 `)}`
     );
   return r;
@@ -250,7 +250,7 @@ const L = de("useProjectLoader");
 function je() {
   const {
     handleLoadWorkspace: e
-  } = Z(), [t, r] = A(!1), [o, n] = A(null), [s, i] = A(null), [m, l] = A(null), f = y(async (d) => {
+  } = Z(), [t, r] = A(!1), [a, n] = A(null), [s, i] = A(null), [m, l] = A(null), f = y(async (d) => {
     r(!0), n(null);
     try {
       const c = typeof d == "string" ? JSON.parse(d) : d;
@@ -319,7 +319,7 @@ function je() {
     loadFromFile: w,
     loadTemplate: h,
     isLoading: t,
-    loadError: o,
+    loadError: a,
     currentProject: s,
     projectMetadata: m
   };
@@ -335,15 +335,15 @@ const U = {
 function we(e, t) {
   return e >= t.xxl ? "xxl" : e >= t.xl ? "xl" : e >= t.lg ? "lg" : e >= t.md ? "md" : e >= t.sm ? "sm" : "xs";
 }
-function Je(e) {
+function qe(e) {
   const t = {
     ...U,
     ...e
-  }, [r, o] = A(() => typeof window < "u" ? window.innerWidth : U.lg);
+  }, [r, a] = A(() => typeof window < "u" ? window.innerWidth : U.lg);
   V(() => {
     if (typeof window > "u") return;
     const x = () => {
-      o(window.innerWidth);
+      a(window.innerWidth);
     };
     return window.addEventListener("resize", x), () => window.removeEventListener("resize", x);
   }, []);
@@ -379,8 +379,8 @@ const j = {
   exportCount: 0,
   avgExportTime: 0
 };
-function qe() {
-  const [e, t] = A(j), [r, o] = A(!1), n = B([]), s = B([]), i = B([]), m = B(performance.now()), l = B(null), f = y((u) => u.length === 0 ? 0 : 1e3 / (u.reduce((k, v) => k + v, 0) / u.length), []), w = y((u) => u.length === 0 ? 0 : u.reduce((p, k) => p + k, 0) / u.length, []), h = y(() => "memory" in performance && performance.memory ? performance.memory.usedJSHeapSize / (1024 * 1024) : 0, []), d = y(() => {
+function Je() {
+  const [e, t] = A(j), [r, a] = A(!1), n = R([]), s = R([]), i = R([]), m = R(performance.now()), l = R(null), f = y((u) => u.length === 0 ? 0 : 1e3 / (u.reduce((k, v) => k + v, 0) / u.length), []), w = y((u) => u.length === 0 ? 0 : u.reduce((p, k) => p + k, 0) / u.length, []), h = y(() => "memory" in performance && performance.memory ? performance.memory.usedJSHeapSize / (1024 * 1024) : 0, []), d = y(() => {
     const u = {
       fps: f(n.current),
       avgRenderTime: w(s.current),
@@ -396,9 +396,9 @@ function qe() {
     const u = performance.now(), p = u - m.current;
     m.current = u, n.current.push(p), n.current.length > 60 && n.current.shift(), n.current.length % 30 === 0 && d(), r && (l.current = requestAnimationFrame(c));
   }, [r, d]), x = y(() => {
-    o(!0), m.current = performance.now(), l.current = requestAnimationFrame(c);
+    a(!0), m.current = performance.now(), l.current = requestAnimationFrame(c);
   }, [c]), S = y(() => {
-    o(!1), l.current !== null && (cancelAnimationFrame(l.current), l.current = null);
+    a(!1), l.current !== null && (cancelAnimationFrame(l.current), l.current = null);
   }, []), C = y(() => {
     n.current = [], s.current = [], i.current = [], t(j);
   }, []), g = y(() => `
@@ -431,7 +431,7 @@ function Ve(e) {
   const {
     onReorder: t,
     onGroupReorder: r,
-    onDropIntoGroup: o,
+    onDropIntoGroup: a,
     onDropIntoGroupAtPosition: n,
     findElement: s,
     findParentGroup: i
@@ -456,7 +456,7 @@ function Ve(e) {
         return;
       }
       if (h === "into")
-        o && o(m, u);
+        a && a(m, u);
       else {
         const p = i == null ? void 0 : i(m), k = i == null ? void 0 : i(u), v = h === "before" ? "after" : "before";
         p && k && p.id === k.id ? r && r(m, u, v, p.id) : !p && k && n ? n(m, k.id, u, v) : t(m, u, v);
@@ -468,7 +468,7 @@ function Ve(e) {
       h,
       t,
       r,
-      o,
+      a,
       n,
       i,
       S
@@ -487,7 +487,7 @@ function Ve(e) {
   };
 }
 function Xe(e) {
-  const { selectedId: t, multiSelection: r, onSelectionChange: o, onMultiSelectionChange: n } = e, s = y(
+  const { selectedId: t, multiSelection: r, onSelectionChange: a, onMultiSelectionChange: n } = e, s = y(
     (m) => m === t || r.includes(m),
     [t, r]
   ), i = y(
@@ -497,28 +497,28 @@ function Xe(e) {
         if (r.length > 0)
           if (f) {
             const h = r.filter((d) => d !== l);
-            h.length === 1 ? (n([]), o(h[0])) : h.length === 0 ? (n([]), o(null)) : n(h);
+            h.length === 1 ? (n([]), a(h[0])) : h.length === 0 ? (n([]), a(null)) : n(h);
           } else
             n([...r, l]);
         else {
           if (w)
             return;
-          t !== null ? (n([t, l]), o(null)) : o(l);
+          t !== null ? (n([t, l]), a(null)) : a(l);
         }
       } else
-        o(l), n([]);
+        a(l), n([]);
     },
-    [t, r, o, n]
+    [t, r, a, n]
   );
   return { isSelected: s, handleClick: i };
 }
-const Se = xe(({ value: e, onChange: t, fontSizes: r, isOpen: o, onToggle: n }) => {
+const Se = xe(({ value: e, onChange: t, fontSizes: r, isOpen: a, onToggle: n }) => {
   const s = (i) => {
     t(i), n(!1);
   };
-  return /* @__PURE__ */ b(ie, { open: o, onOpenChange: n, children: [
-    /* @__PURE__ */ a(ce, { asChild: !0, children: /* @__PURE__ */ a("button", { className: "sc-toolbar-btn", "aria-label": "Font size", children: /* @__PURE__ */ a(q, { icon: "radix-icons:font-size", className: "sc:size-5" }) }) }),
-    /* @__PURE__ */ a(le, { className: "sc:w-[120px] sc:max-h-[300px] sc:overflow-y-auto sc:p-1", maxZIndex: !0, children: /* @__PURE__ */ a("div", { className: "sc:flex sc:flex-col sc:gap-0.5", children: r.map((i) => /* @__PURE__ */ a(
+  return /* @__PURE__ */ b(ie, { open: a, onOpenChange: n, children: [
+    /* @__PURE__ */ o(ce, { asChild: !0, children: /* @__PURE__ */ o("button", { className: "sc-toolbar-btn", "aria-label": "Font size", children: /* @__PURE__ */ o(J, { icon: "radix-icons:font-size", className: "sc:size-5" }) }) }),
+    /* @__PURE__ */ o(le, { className: "sc:w-[120px] sc:max-h-[300px] sc:overflow-y-auto sc:p-1", maxZIndex: !0, children: /* @__PURE__ */ o("div", { className: "sc:flex sc:flex-col sc:gap-0.5", children: r.map((i) => /* @__PURE__ */ o(
       "button",
       {
         onClick: () => s(i),
@@ -531,15 +531,15 @@ const Se = xe(({ value: e, onChange: t, fontSizes: r, isOpen: o, onToggle: n })
 });
 Se.displayName = "FontSizeDropdown";
 function Ye({ toolbar: e }) {
-  const { fontSize: t, handleFontSizeIncrement: r, handleFontSizeChange: o } = e, [n, s] = A(!1);
+  const { fontSize: t, handleFontSizeIncrement: r, handleFontSizeChange: a } = e, [n, s] = A(!1);
   return /* @__PURE__ */ b("div", { className: "sc-toolbar-group", children: [
     /* @__PURE__ */ b(M, { delayDuration: 300, children: [
-      /* @__PURE__ */ a(D, { asChild: !0, children: /* @__PURE__ */ a("button", { className: "sc-toolbar-btn-sm", onClick: () => r(-1), children: "-" }) }),
-      /* @__PURE__ */ a(I, { children: "Decrease Font Size" })
+      /* @__PURE__ */ o(D, { asChild: !0, children: /* @__PURE__ */ o("button", { className: "sc-toolbar-btn-sm", onClick: () => r(-1), children: "-" }) }),
+      /* @__PURE__ */ o(I, { children: "Decrease Font Size" })
     ] }),
     /* @__PURE__ */ b(M, { delayDuration: 300, children: [
-      /* @__PURE__ */ a(D, { asChild: !0, children: /* @__PURE__ */ b("div", { style: { position: "relative" }, children: [
-        /* @__PURE__ */ a(
+      /* @__PURE__ */ o(D, { asChild: !0, children: /* @__PURE__ */ b("div", { style: { position: "relative" }, children: [
+        /* @__PURE__ */ o(
           "button",
           {
             className: "sc-toolbar-font-size-display",
@@ -549,7 +549,7 @@ function Ye({ toolbar: e }) {
             children: t
           }
         ),
-        n && /* @__PURE__ */ a(
+        n && /* @__PURE__ */ o(
           "div",
           {
             className: "font-dropdown",
@@ -564,12 +564,12 @@ function Ye({ toolbar: e }) {
                 }, 0);
               }
             },
-            children: me.map((i) => /* @__PURE__ */ a(
+            children: me.map((i) => /* @__PURE__ */ o(
               "button",
               {
                 className: `font-dropdown-option ${t === i ? "selected" : ""}`,
                 onClick: () => {
-                  o(i), s(!1);
+                  a(i), s(!1);
                 },
                 children: i
               },
@@ -578,11 +578,11 @@ function Ye({ toolbar: e }) {
           }
         )
       ] }) }),
-      /* @__PURE__ */ a(I, { children: "Font Size" })
+      /* @__PURE__ */ o(I, { children: "Font Size" })
     ] }),
     /* @__PURE__ */ b(M, { delayDuration: 300, children: [
-      /* @__PURE__ */ a(D, { asChild: !0, children: /* @__PURE__ */ a("button", { className: "sc-toolbar-btn-sm", onClick: () => r(1), children: "+" }) }),
-      /* @__PURE__ */ a(I, { children: "Increase Font Size" })
+      /* @__PURE__ */ o(D, { asChild: !0, children: /* @__PURE__ */ o("button", { className: "sc-toolbar-btn-sm", onClick: () => r(1), children: "+" }) }),
+      /* @__PURE__ */ o(I, { children: "Increase Font Size" })
     ] })
   ] });
 }
@@ -628,9 +628,9 @@ class Ce {
    * @returns An unsubscribe function -- call it to remove this handler
    */
   on(t, r) {
-    let o = this.listeners.get(t);
-    return o || (o = /* @__PURE__ */ new Set(), this.listeners.set(t, o)), o.add(r), () => {
-      o.delete(r), o.size === 0 && this.listeners.delete(t);
+    let a = this.listeners.get(t);
+    return a || (a = /* @__PURE__ */ new Set(), this.listeners.set(t, a)), a.add(r), () => {
+      a.delete(r), a.size === 0 && this.listeners.delete(t);
     };
   }
   /**
@@ -645,9 +645,9 @@ class Ce {
    * @returns An unsubscribe function
    */
   once(t, r) {
-    const o = (s) => {
+    const a = (s) => {
       n(), r(s);
-    }, n = this.on(t, o);
+    }, n = this.on(t, a);
     return n;
   }
   // -----------------------------------------------------------------------
@@ -663,9 +663,9 @@ class Ce {
    * @param data - The payload to pass to each handler
    */
   emit(t, r) {
-    const o = this.listeners.get(t);
-    if (o)
-      for (const n of [...o])
+    const a = this.listeners.get(t);
+    if (a)
+      for (const n of [...a])
         try {
           n(r);
         } catch (s) {
@@ -774,7 +774,7 @@ const W = {
   br: { textAnchor: "end", dominantBaseline: "alphabetic" }
 };
 function K(e, t) {
-  return e.kind === "rect" ? /* @__PURE__ */ a(
+  return e.kind === "rect" ? /* @__PURE__ */ o(
     "rect",
     {
       x: e.x,
@@ -783,7 +783,7 @@ function K(e, t) {
       height: e.height,
       ...t
     }
-  ) : e.kind === "roundedRect" ? /* @__PURE__ */ a(
+  ) : e.kind === "roundedRect" ? /* @__PURE__ */ o(
     "rect",
     {
       x: e.x,
@@ -794,7 +794,7 @@ function K(e, t) {
       ry: e.ry,
       ...t
     }
-  ) : /* @__PURE__ */ a(
+  ) : /* @__PURE__ */ o(
     "path",
     {
       d: e.d,
@@ -811,16 +811,16 @@ function $e(e, t, r) {
     height: r
   };
 }
-function J(e) {
+function q(e) {
   if (e.kind === "rect")
     return `M ${e.x} ${e.y} h ${e.width} v ${e.height} h ${-e.width} Z`;
   if (e.kind === "roundedRect") {
     const t = e.rx ?? e.ry ?? 0, r = e.ry ?? e.rx ?? 0;
     if (t <= 0 && r <= 0)
       return `M ${e.x} ${e.y} h ${e.width} v ${e.height} h ${-e.width} Z`;
-    const { x: o, y: n, width: s, height: i } = e;
+    const { x: a, y: n, width: s, height: i } = e;
     return [
-      `M ${o + t} ${n}`,
+      `M ${a + t} ${n}`,
       `h ${s - 2 * t}`,
       `a ${t} ${r} 0 0 1 ${t} ${r}`,
       `v ${i - 2 * r}`,
@@ -834,7 +834,7 @@ function J(e) {
   }
   return e.d;
 }
-function ke(e, t, r, o) {
+function ke(e, t, r, a) {
   if (e != null && e.safeArea) return e.safeArea;
   if (t.safeAreaInsetPx && t.safeAreaInsetPx > 0) {
     const n = t.safeAreaInsetPx;
@@ -843,7 +843,7 @@ function ke(e, t, r, o) {
       x: n,
       y: n,
       width: Math.max(0, r - n * 2),
-      height: Math.max(0, o - n * 2)
+      height: Math.max(0, a - n * 2)
     };
   }
   return null;
@@ -852,7 +852,7 @@ function nt({
   artboardWidth: e,
   artboardHeight: t,
   canvasPadding: r = 0,
-  pieces: o,
+  pieces: a,
   pieceGuides: n,
   show: s,
   style: i,
@@ -876,7 +876,7 @@ function nt({
     safeArea: (s == null ? void 0 : s.safeArea) ?? !0,
     labels: (s == null ? void 0 : s.labels) ?? !0
   }, w = e + r * 2, h = t + r * 2;
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -884,7 +884,7 @@ function nt({
       preserveAspectRatio: "xMidYMid meet",
       className: m,
       style: { pointerEvents: "none", width: "100%", height: "100%" },
-      children: /* @__PURE__ */ a("g", { transform: `translate(${r} ${r})`, children: o.map((d) => {
+      children: /* @__PURE__ */ o("g", { transform: `translate(${r} ${r})`, children: a.map((d) => {
         const c = n == null ? void 0 : n[d.id], x = (c == null ? void 0 : c.zones) ?? [], S = (c == null ? void 0 : c.labels) ?? [], C = d.rotation ?? 0, g = C === 90 || C === 270, u = g ? d.height : d.width, p = g ? d.width : d.height, k = $e(c, u, p), v = ke(c, d, u, p), F = `translate(${d.x} ${d.y})`;
         let N = "";
         C === 90 ? N = `translate(${d.width} 0) rotate(90)` : C === 180 ? N = `translate(${d.width} ${d.height}) rotate(180)` : C === 270 && (N = `translate(0 ${d.height}) rotate(270)`);
@@ -920,7 +920,7 @@ function nt({
         return /* @__PURE__ */ b("g", { transform: z, children: [
           f.safeArea && H && /* @__PURE__ */ b(ve, { children: [
             /* @__PURE__ */ b("defs", { children: [
-              /* @__PURE__ */ a(
+              /* @__PURE__ */ o(
                 "filter",
                 {
                   id: _,
@@ -928,7 +928,7 @@ function nt({
                   y: "-20%",
                   width: "140%",
                   height: "140%",
-                  children: /* @__PURE__ */ a(
+                  children: /* @__PURE__ */ o(
                     "feGaussianBlur",
                     {
                       in: "SourceGraphic",
@@ -949,7 +949,7 @@ function nt({
                   )
                 }
               ),
-              /* @__PURE__ */ a("clipPath", { id: `piece-clip-${d.id}`, children: /* @__PURE__ */ a(
+              /* @__PURE__ */ o("clipPath", { id: `piece-clip-${d.id}`, children: /* @__PURE__ */ o(
                 "rect",
                 {
                   x: 0,
@@ -959,15 +959,15 @@ function nt({
                 }
               ) })
             ] }),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ o(
               "g",
               {
                 clipPath: `url(#piece-clip-${d.id})`,
                 filter: `url(#${_})`,
-                children: /* @__PURE__ */ a(
+                children: /* @__PURE__ */ o(
                   "path",
                   {
-                    d: `${J(Y)} ${J(O)}`,
+                    d: `${q(Y)} ${q(O)}`,
                     style: {
                       // Honor `style.bleedFill` / `style.bleedOpacity`
                       // overrides — previously hardcoded, which silently
@@ -982,26 +982,26 @@ function nt({
               }
             )
           ] }),
-          f.zones && x.filter((T) => T.kind !== "dieCut").map((T, R) => /* @__PURE__ */ a("g", { children: K(T.path, {
+          f.zones && x.filter((T) => T.kind !== "dieCut").map((T, B) => /* @__PURE__ */ o("g", { children: K(T.path, {
             fill: l.zoneFill[T.kind],
             stroke: l.zoneStroke[T.kind],
             strokeWidth: 1.5,
             strokeDasharray: T.kind === "wrap" ? "4 3" : void 0,
             vectorEffect: "non-scaling-stroke"
-          }) }, `zone-${R}`)),
-          f.zones && x.filter((T) => T.kind === "dieCut").map((T, R) => {
+          }) }, `zone-${B}`)),
+          f.zones && x.filter((T) => T.kind === "dieCut").map((T, B) => {
             const E = T.path;
             if (E.kind !== "rect" && E.kind !== "roundedRect")
               return null;
             const Q = E.kind === "roundedRect" ? E.rx ?? E.ry ?? 0 : 0, ee = E.kind === "roundedRect" ? E.ry ?? E.rx ?? 0 : 0;
-            return /* @__PURE__ */ a(
+            return /* @__PURE__ */ o(
               "foreignObject",
               {
                 x: E.x,
                 y: E.y,
                 width: E.width,
                 height: E.height,
-                children: /* @__PURE__ */ a(
+                children: /* @__PURE__ */ o(
                   "div",
                   {
                     xmlns: "http://www.w3.org/1999/xhtml",
@@ -1023,7 +1023,7 @@ function nt({
                   }
                 )
               },
-              `diecut-${R}`
+              `diecut-${B}`
             );
           }),
           f.boundary && l.boundaryStroke && K(k, {
@@ -1039,9 +1039,9 @@ function nt({
             strokeDasharray: l.safeAreaDashArray,
             vectorEffect: "non-scaling-stroke"
           }),
-          f.labels && S.map((T, R) => {
+          f.labels && S.map((T, B) => {
             const E = Ee[T.anchor ?? "c"];
-            return /* @__PURE__ */ a(
+            return /* @__PURE__ */ o(
               "text",
               {
                 x: T.x,
@@ -1057,7 +1057,7 @@ function nt({
                 strokeLinejoin: "round",
                 children: T.text
               },
-              `label-${R}`
+              `label-${B}`
             );
           })
         ] }, d.id);
@@ -1079,12 +1079,12 @@ export {
   Ce as CanvasEventBus,
   bt as CanvasSkeleton,
   jt as ColorPickerDropdown,
-  Jt as ContextualToolbars,
+  qt as ContextualToolbars,
   Oe as ControlGroup,
-  qt as CropPanel,
+  Jt as CropPanel,
   yt as DEFAULT_AUTO_EXPORT_CONFIG,
   te as Dropdown,
-  at as DropdownMenu,
+  ot as DropdownMenu,
   dr as EditorProvider,
   vt as EffectsPanel,
   wt as ExportPanel,
@@ -1126,8 +1126,8 @@ export {
   We as Toggle,
   kt as ToolbarSkeleton,
   sr as TransformControlPanel,
-  or as UnderlineButton,
-  ar as UppercaseButton,
+  ar as UnderlineButton,
+  or as UppercaseButton,
   nt as VisualGuideOverlay,
   At as ZoomControls,
   Te as canvasEventBus,
@@ -1136,8 +1136,8 @@ export {
   Pt as getSection,
   Nt as getSectionIds,
   Nr as hasDistressEffect,
-  Rr as hasMasks,
-  Br as hasStroke,
+  Br as hasMasks,
+  Rr as hasStroke,
   Mr as isArchTransform,
   Dr as isCircleElementConfig,
   Ir as isCircleTransform,
@@ -1153,19 +1153,19 @@ export {
   Ur as isKnockout,
   en as isPathElement,
   jr as isPathElementConfig,
-  Jr as isPathTransform,
+  qr as isPathTransform,
   tt as isRegisteredElementType,
   tn as isShapeElement,
-  qr as isShapeElementConfig,
+  Jr as isShapeElementConfig,
   Zr as isShapeTransform,
   rn as isTextElement,
   Vr as isTextElementConfig,
   Xr as isWaveTransform,
   Ue as loadKitFromJSON,
-  on as pieceGuidesForArtboard,
+  an as pieceGuidesForArtboard,
   mr as preserveSelectionProps,
-  Rt as registerBuiltinSections,
-  Bt as registerBuiltinSectionsSync,
+  Bt as registerBuiltinSections,
+  Rt as registerBuiltinSectionsSync,
   He as registerElementType,
   Mt as registerSection,
   Dt as renderPieceGuides,
@@ -1174,7 +1174,7 @@ export {
   mt as surfaceVariants,
   Qe as unregisterElementType,
   It as unregisterSection,
-  Je as useBreakpoint,
+  qe as useBreakpoint,
   rt as useCanvasEvents,
   zt as useCapabilities,
   hr as useCommandContext,
@@ -1185,8 +1185,8 @@ export {
   Ve as useLayerDragDrop,
   ir as useLayerPreview,
   Xe as useLayerSelection,
-  qe as usePerformance,
-  an as usePieceGuideBundle,
+  Je as usePerformance,
+  on as usePieceGuideBundle,
   je as useProjectLoader,
   gr as useSelectionContext,
   ft as useSurface,