@snowcone-app/canvas 0.17.2 → 0.18.0

package/dist/advanced.mjs

@@ -1,23 +1,25 @@
-import { e as te } from "./UnifiedFontService-Dsu5cwfT.js";
-import { D as re, T as D, a as M, B as ne, b as I, r as se, v as ae, c as oe, d as ie, e as ce, f as le } from "./validation-C795COGQ.js";
-import { g as ot, h as it, i as ct, j as lt, k as dt, l as ut, m as mt, n as ft, o as ht, p as pt, q as xt, s as gt, t as bt, u as yt, F as vt, w as wt, G as St, I as Ct, x as Et, y as Tt, K as $t, z as kt, L as At, H as Ft, J as Pt, N as Nt, O as Rt, Q as Bt, S as Dt, R as Mt, U as It, V as zt, W as Ot, X as Lt, Y as Wt, Z as Kt, _ as _t, $ as Gt, a0 as Ut, a1 as jt, a2 as Jt, a3 as qt, a4 as Vt, a5 as Xt, a6 as Yt, a7 as Zt, a8 as Ht, a9 as Qt, aa as er, ab as tr, ac as rr, ad as nr, ae as sr, af as ar } from "./validation-C795COGQ.js";
-import { u as q } from "./EditorContext-CGkfmbgo.js";
-import { E as ir, P as cr, p as lr, s as dr, b as ur, c as mr, d as fr, e as hr, f as pr, a as xr } from "./EditorContext-CGkfmbgo.js";
-import { T as br, u as yr } 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-CLv7_msL.js";
-import { A as wr, B as Sr, I as Cr, P as Er, R as Tr, S as $r, T as kr, h as Ar, a as Fr, b as Pr, i as Nr, d as Rr, e as Br, f as Dr, j as Mr, k as Ir, l as zr, m as Or, n as Lr, o as Wr, p as Kr, q as _r, s as Gr, t as Ur, v as jr, w as Jr, x as qr } from "./FontAnalyzer-CLv7_msL.js";
-import { I as xe } from "./ImportManager-C_wBjWaV.js";
-import { i as Xr, a as Yr, b as Zr, c as Hr, d as Qr } from "./ImportManager-C_wBjWaV.js";
-import { useState as A, useCallback as y, useEffect as V, useMemo as X, useRef as B, memo as ge } from "react";
+import { D as te, T as M, h as D, B as re, I as q, i as I, j as ne, e as se } from "./MenuButton-CeoEAtzP.js";
+import { k as at, L as it, M as ct, l as lt, S as dt, m as ut, s as mt, n as ft } from "./MenuButton-CeoEAtzP.js";
+import { r as oe, v as ae } from "./validation-0IscSfRb.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, I as Ct, K as Tt, g as Et, L as $t, S as kt, T as At, Z as Ft, h as Pt, i as Nt, j as Rt, k as Bt, l as Mt, m as Dt, n as It, u as zt, o as Ot, p as Lt } from "./validation-0IscSfRb.js";
+import { P as ie, a as ce, b as le } from "./ContextualToolbars-CkLjHNPn.js";
+import { A as Kt, B as Gt, c as _t, C as Ut, d as jt, e as Jt, F as qt, f as Zt, I as Vt, g as Xt, M as Yt, h as Ht, S as Qt, T as er, i as tr, j as rr, k as nr, U as sr, l as or, u as ar, m as ir } from "./ContextualToolbars-CkLjHNPn.js";
+import { u as Z } from "./EditorContext-5QpqAhjh.js";
+import { E as lr, P as dr, p as ur, s as mr, b as fr, c as hr, d as pr, e as xr, f as gr, a as br } from "./EditorContext-5QpqAhjh.js";
+import { T as vr, u as wr } 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-DIlqmyuf.js";
+import { A as Cr, B as Tr, I as Er, P as $r, R as kr, S as Ar, T as Fr, h as Pr, a as Nr, b as Rr, i as Br, d as Mr, e as Dr, f as Ir, j as zr, k as Or, l as Lr, m as Wr, n as Kr, o as Gr, p as _r, q as Ur, s as jr, t as Jr, v as qr, w as Zr, x as Vr } from "./FontAnalyzer-DIlqmyuf.js";
+import { i as Yr, a as Hr, b as Qr, c as en, d as tn } from "./CanvasRenderer-DUc-MOeR.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 "./ImportManager-D--7JnvW.js";
 import { e as be, c as ye } from "./compose-DtQL_oit.js";
-import { jsxs as b, jsx as o, Fragment as ve } from "react/jsx-runtime";
-import { P as tn, p as rn, u as nn } from "./usePieceGuideBundle-C1ipFnZd.js";
-import { Icon as Y } from "./iconify-D6eVIEy4.js";
+import { jsxs as b, jsx as a, Fragment as ve } from "react/jsx-runtime";
+import { P as nn, p as sn, u as on } from "./usePieceGuideBundle-DVOISsB1.js";
 const ze = ({
   title: e,
   icon: t,
   children: r,
-  enableable: a = !1,
+  enableable: o = !1,
   enabled: n = !1,
   onEnabledChange: s,
   collapsible: i = !1,
@@ -25,7 +27,7 @@ const ze = ({
   onExpandChange: l,
   className: f = ""
 }) => {
-  const w = a ? n && m : i ? m : !0, h = a && n || i, d = () => {
+  const w = o ? n && m : i ? m : !0, h = o && n || i, d = () => {
     s && s(!n);
   }, c = () => {
     l && l(!m);
@@ -33,7 +35,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: [
-        a && /* @__PURE__ */ o("label", { className: "sc:flex sc:cursor-pointer sc:items-center", children: /* @__PURE__ */ o(
+        o && /* @__PURE__ */ a("label", { className: "sc:flex sc:cursor-pointer sc:items-center", children: /* @__PURE__ */ a(
           "input",
           {
             type: "checkbox",
@@ -43,11 +45,11 @@ const ze = ({
           }
         ) }),
         /* @__PURE__ */ b("div", { className: "sc:flex sc:items-center sc:gap-md", children: [
-          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 })
+          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 })
         ] })
       ] }),
-      h && /* @__PURE__ */ o(
+      h && /* @__PURE__ */ a(
         "button",
         {
           onClick: c,
@@ -57,29 +59,29 @@ const ze = ({
         }
       )
     ] }),
-    w && /* @__PURE__ */ o("div", { className: "sc:mt-xl sc:flex sc:flex-col sc:gap-xl", children: r })
+    w && /* @__PURE__ */ a("div", { className: "sc:mt-xl sc:flex sc:flex-col sc:gap-xl", children: r })
   ] });
 }, Oe = ({
   label: e,
   labelSuffix: t,
   children: r,
-  inline: a = !1,
+  inline: o = !1,
   className: n = ""
-}) => /* @__PURE__ */ b("div", { className: `sc:flex ${a ? "sc:items-center sc:justify-between" : "sc:flex-col"} sc:gap-sm ${n}`, children: [
+}) => /* @__PURE__ */ b("div", { className: `sc:flex ${o ? "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__ */ o("span", { children: e }),
-    t && /* @__PURE__ */ o("span", { className: "sc:font-semibold sc:text-accent-primary", children: t })
+    /* @__PURE__ */ a("span", { children: e }),
+    t && /* @__PURE__ */ a("span", { className: "sc:font-semibold sc:text-accent-primary", children: t })
   ] }),
-  /* @__PURE__ */ o("div", { className: a ? "sc:flex-shrink-0" : "", children: r })
+  /* @__PURE__ */ a("div", { className: o ? "sc:flex-shrink-0" : "", children: r })
 ] });
 function Le({
   options: e,
   value: t,
   onChange: r,
-  fullWidth: a = !0,
+  fullWidth: o = !0,
   className: n = ""
 }) {
-  return /* @__PURE__ */ o("div", { className: `sc:flex sc:gap-sm ${n}`, children: e.map((s) => {
+  return /* @__PURE__ */ a("div", { className: `sc:flex sc:gap-sm ${n}`, children: e.map((s) => {
     const i = s.value === t;
     return /* @__PURE__ */ b(
       "button",
@@ -87,26 +89,26 @@ function Le({
         onClick: () => !s.disabled && r(s.value),
         disabled: s.disabled,
         title: s.tooltip,
-        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"} `,
+        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"} `,
         children: [
-          s.icon && /* @__PURE__ */ o("span", { className: "sc:flex sc:items-center", children: s.icon }),
-          /* @__PURE__ */ o("span", { children: s.label })
+          s.icon && /* @__PURE__ */ a("span", { className: "sc:flex sc:items-center", children: s.icon }),
+          /* @__PURE__ */ a("span", { children: s.label })
         ]
       },
       String(s.value)
     );
   }) });
 }
-const We = ({ label: e, icon: t, checked: r, onChange: a, disabled: n = !1, className: s = "" }) => {
+const We = ({ label: e, icon: t, checked: r, onChange: o, disabled: n = !1, className: s = "" }) => {
   const i = (m) => {
-    a(m.target.checked);
+    o(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__ */ o(
+        /* @__PURE__ */ a(
           "input",
           {
             type: "checkbox",
@@ -117,8 +119,8 @@ const We = ({ label: e, icon: t, checked: r, onChange: a, 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__ */ o("span", { className: "sc:flex sc:items-center sc:text-text-secondary", children: t }),
-          /* @__PURE__ */ o("span", { children: e })
+          t && /* @__PURE__ */ a("span", { className: "sc:flex sc:items-center sc:text-text-secondary", children: t }),
+          /* @__PURE__ */ a("span", { children: e })
         ] })
       ]
     }
@@ -127,28 +129,28 @@ const We = ({ label: e, icon: t, checked: r, onChange: a, disabled: n = !1, clas
   checked: e,
   onChange: t,
   label: r,
-  disabled: a = !1,
+  disabled: o = !1,
   className: n = ""
 }) => {
   const s = () => {
-    a || t(!e);
+    o || t(!e);
   };
   return /* @__PURE__ */ b(
     "label",
     {
-      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(),
+      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(),
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ a(
           "input",
           {
             type: "checkbox",
             checked: e,
             onChange: s,
-            disabled: a,
+            disabled: o,
             className: "sc:absolute sc:opacity-0 sc:w-0 sc:h-0 sc:peer"
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ a(
           "span",
           {
             className: `
@@ -161,41 +163,41 @@ const We = ({ label: e, icon: t, checked: r, onChange: a, disabled: n = !1, clas
         `.trim()
           }
         ),
-        r && /* @__PURE__ */ o("span", { className: "sc:text-md sc:text-text-primary sc:font-medium", children: r })
+        r && /* @__PURE__ */ a("span", { className: "sc:text-md sc:text-text-primary sc:font-medium", children: r })
       ]
     }
   );
-}, _e = ({
+}, Ge = ({
   isOpen: e,
   onToggle: t,
   trigger: r,
-  children: a
-}) => /* @__PURE__ */ o(
-  re,
+  children: o
+}) => /* @__PURE__ */ a(
+  te,
   {
     isOpen: e,
     onToggle: t,
-    trigger: r || /* @__PURE__ */ b(D, { delayDuration: 0, children: [
-      /* @__PURE__ */ o(M, { asChild: !0, children: /* @__PURE__ */ o(
-        ne,
+    trigger: r || /* @__PURE__ */ b(M, { delayDuration: 0, children: [
+      /* @__PURE__ */ a(D, { asChild: !0, children: /* @__PURE__ */ a(
+        re,
         {
           variant: "ghost",
           size: "toolbar",
           onClick: (s) => {
             s.stopPropagation(), t(!e);
           },
-          children: /* @__PURE__ */ o(Y, { icon: "lucide:ellipsis-vertical", className: "sc:size-6" })
+          children: /* @__PURE__ */ a(q, { icon: "lucide:ellipsis-vertical", className: "sc:size-6" })
         }
       ) }),
-      /* @__PURE__ */ o(I, { children: /* @__PURE__ */ o("p", { children: "More" }) })
+      /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a("p", { children: "More" }) })
     ] }),
     position: "bottom",
     align: "end",
     offset: 4,
-    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 })
+    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 })
   }
 );
-function Ge(e) {
+function _e(e) {
   const t = {
     name: e.name,
     capabilities: {
@@ -227,18 +229,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 = se(e.extends);
+    const n = oe(e.extends);
     r = be(n, { name: e.name, ...t });
   } else
     r = ye({ name: e.name, ...t });
-  const a = ae(r);
-  if (a.warnings.length > 0)
-    for (const n of a.warnings)
+  const o = ae(r);
+  if (o.warnings.length > 0)
+    for (const n of o.warnings)
       console.warn(`[loadKitFromJSON] Warning: ${n}`);
-  if (!a.valid)
+  if (!o.valid)
     throw new Error(
       `[loadKitFromJSON] Kit "${e.name}" failed validation:
-${a.errors.join(`
+${o.errors.join(`
 `)}`
     );
   return r;
@@ -247,13 +249,13 @@ const L = de("useProjectLoader");
 function je() {
   const {
     handleLoadWorkspace: e
-  } = q(), [t, r] = A(!1), [a, n] = A(null), [s, i] = A(null), [m, l] = A(null), f = y(async (d) => {
+  } = Z(), [t, r] = A(!1), [o, 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;
       if (!c.artboards || !Array.isArray(c.artboards))
         throw new Error("Invalid document format: missing artboards array");
-      const x = JSON.stringify(c), S = new Blob([x], { type: "application/json" }), C = new File([S], "project.json", { type: "application/json" }), g = await xe.importFromJSON(C);
+      const x = JSON.stringify(c), S = new Blob([x], { type: "application/json" }), C = new File([S], "project.json", { type: "application/json" }), g = await ge.importFromJSON(C);
       if (!g.success || !g.artboards || !g.elements)
         throw new Error(g.error || "Failed to import project");
       e(g.artboards, g.elements, g.activeArtboardId || null), i(c);
@@ -316,7 +318,7 @@ function je() {
     loadFromFile: w,
     loadTemplate: h,
     isLoading: t,
-    loadError: a,
+    loadError: o,
     currentProject: s,
     projectMetadata: m
   };
@@ -336,11 +338,11 @@ function Je(e) {
   const t = {
     ...U,
     ...e
-  }, [r, a] = A(() => typeof window < "u" ? window.innerWidth : U.lg);
+  }, [r, o] = A(() => typeof window < "u" ? window.innerWidth : U.lg);
   V(() => {
     if (typeof window > "u") return;
     const x = () => {
-      a(window.innerWidth);
+      o(window.innerWidth);
     };
     return window.addEventListener("resize", x), () => window.removeEventListener("resize", x);
   }, []);
@@ -377,7 +379,7 @@ const j = {
   avgExportTime: 0
 };
 function qe() {
-  const [e, t] = A(j), [r, a] = 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(() => {
+  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(() => {
     const u = {
       fps: f(n.current),
       avgRenderTime: w(s.current),
@@ -393,9 +395,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(() => {
-    a(!0), m.current = performance.now(), l.current = requestAnimationFrame(c);
+    o(!0), m.current = performance.now(), l.current = requestAnimationFrame(c);
   }, [c]), S = y(() => {
-    a(!1), l.current !== null && (cancelAnimationFrame(l.current), l.current = null);
+    o(!1), l.current !== null && (cancelAnimationFrame(l.current), l.current = null);
   }, []), C = y(() => {
     n.current = [], s.current = [], i.current = [], t(j);
   }, []), g = y(() => `
@@ -420,15 +422,15 @@ Avg Export Time: ${e.avgExportTime.toFixed(2)}ms
     isProfiling: r
   };
 }
-function Ve(e) {
-  const { getElementById: t } = q();
+function Ze(e) {
+  const { getElementById: t } = Z();
   return e ? t(e) ?? null : null;
 }
-function Xe(e) {
+function Ve(e) {
   const {
     onReorder: t,
     onGroupReorder: r,
-    onDropIntoGroup: a,
+    onDropIntoGroup: o,
     onDropIntoGroupAtPosition: n,
     findElement: s,
     findParentGroup: i
@@ -453,7 +455,7 @@ function Xe(e) {
         return;
       }
       if (h === "into")
-        a && a(m, u);
+        o && o(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);
@@ -465,7 +467,7 @@ function Xe(e) {
       h,
       t,
       r,
-      a,
+      o,
       n,
       i,
       S
@@ -483,8 +485,8 @@ function Xe(e) {
     }
   };
 }
-function Ye(e) {
-  const { selectedId: t, multiSelection: r, onSelectionChange: a, onMultiSelectionChange: n } = e, s = y(
+function Xe(e) {
+  const { selectedId: t, multiSelection: r, onSelectionChange: o, onMultiSelectionChange: n } = e, s = y(
     (m) => m === t || r.includes(m),
     [t, r]
   ), i = y(
@@ -494,28 +496,28 @@ function Ye(e) {
         if (r.length > 0)
           if (f) {
             const h = r.filter((d) => d !== l);
-            h.length === 1 ? (n([]), a(h[0])) : h.length === 0 ? (n([]), a(null)) : n(h);
+            h.length === 1 ? (n([]), o(h[0])) : h.length === 0 ? (n([]), o(null)) : n(h);
           } else
             n([...r, l]);
         else {
           if (w)
             return;
-          t !== null ? (n([t, l]), a(null)) : a(l);
+          t !== null ? (n([t, l]), o(null)) : o(l);
         }
       } else
-        a(l), n([]);
+        o(l), n([]);
     },
-    [t, r, a, n]
+    [t, r, o, n]
   );
   return { isSelected: s, handleClick: i };
 }
-const Se = ge(({ value: e, onChange: t, fontSizes: r, isOpen: a, onToggle: n }) => {
+const Se = xe(({ value: e, onChange: t, fontSizes: r, isOpen: o, onToggle: n }) => {
   const s = (i) => {
     t(i), n(!1);
   };
-  return /* @__PURE__ */ b(oe, { open: a, onOpenChange: n, children: [
-    /* @__PURE__ */ o(ie, { asChild: !0, children: /* @__PURE__ */ o("button", { className: "sc-toolbar-btn", "aria-label": "Font size", children: /* @__PURE__ */ o(Y, { icon: "radix-icons:font-size", className: "sc:size-5" }) }) }),
-    /* @__PURE__ */ o(ce, { 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(
+  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(
       "button",
       {
         onClick: () => s(i),
@@ -527,26 +529,26 @@ const Se = ge(({ value: e, onChange: t, fontSizes: r, isOpen: a, onToggle: n })
   ] });
 });
 Se.displayName = "FontSizeDropdown";
-function Ze({ toolbar: e }) {
-  const { fontSize: t, handleFontSizeIncrement: r, handleFontSizeChange: a } = e, [n, s] = A(!1);
+function Ye({ toolbar: e }) {
+  const { fontSize: t, handleFontSizeIncrement: r, handleFontSizeChange: o } = e, [n, s] = A(!1);
   return /* @__PURE__ */ b("div", { className: "sc-toolbar-group", children: [
-    /* @__PURE__ */ b(D, { delayDuration: 300, children: [
-      /* @__PURE__ */ o(M, { 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__ */ a("button", { className: "sc-toolbar-btn-sm", onClick: () => r(-1), children: "-" }) }),
+      /* @__PURE__ */ a(I, { children: "Decrease Font Size" })
     ] }),
-    /* @__PURE__ */ b(D, { delayDuration: 300, children: [
-      /* @__PURE__ */ o(M, { asChild: !0, children: /* @__PURE__ */ b("div", { style: { position: "relative" }, children: [
-        /* @__PURE__ */ o(
+    /* @__PURE__ */ b(M, { delayDuration: 300, children: [
+      /* @__PURE__ */ a(D, { asChild: !0, children: /* @__PURE__ */ b("div", { style: { position: "relative" }, children: [
+        /* @__PURE__ */ a(
           "button",
           {
             className: "sc-toolbar-font-size-display",
             onClick: () => {
-              le.protectNextClick(), s(!n);
+              ne.protectNextClick(), s(!n);
             },
             children: t
           }
         ),
-        n && /* @__PURE__ */ o(
+        n && /* @__PURE__ */ a(
           "div",
           {
             className: "font-dropdown",
@@ -561,12 +563,12 @@ function Ze({ toolbar: e }) {
                 }, 0);
               }
             },
-            children: me.map((i) => /* @__PURE__ */ o(
+            children: me.map((i) => /* @__PURE__ */ a(
               "button",
               {
                 className: `font-dropdown-option ${t === i ? "selected" : ""}`,
                 onClick: () => {
-                  a(i), s(!1);
+                  o(i), s(!1);
                 },
                 children: i
               },
@@ -575,15 +577,15 @@ function Ze({ toolbar: e }) {
           }
         )
       ] }) }),
-      /* @__PURE__ */ o(I, { children: "Font Size" })
+      /* @__PURE__ */ a(I, { children: "Font Size" })
     ] }),
-    /* @__PURE__ */ b(D, { delayDuration: 300, children: [
-      /* @__PURE__ */ o(M, { asChild: !0, children: /* @__PURE__ */ o("button", { className: "sc-toolbar-btn-sm", onClick: () => r(1), children: "+" }) }),
-      /* @__PURE__ */ o(I, { children: "Increase 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" })
     ] })
   ] });
 }
-const _ = /* @__PURE__ */ new Map();
+const G = /* @__PURE__ */ new Map();
 function He(e) {
   if (!e.type || typeof e.type != "string")
     throw new Error('ElementTypeRegistration requires a non-empty "type" string');
@@ -599,13 +601,13 @@ function He(e) {
     id: e.type,
     label: e.label,
     Component: e.Component
-  }), _.set(e.type, { ...e });
+  }), G.set(e.type, { ...e });
 }
 function Qe(e) {
-  pe(e), _.delete(e);
+  pe(e), G.delete(e);
 }
 function et() {
-  return Array.from(_.values());
+  return Array.from(G.values());
 }
 function tt(e) {
   return fe(e) !== void 0;
@@ -625,9 +627,9 @@ class Ce {
    * @returns An unsubscribe function -- call it to remove this handler
    */
   on(t, r) {
-    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);
+    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);
     };
   }
   /**
@@ -642,9 +644,9 @@ class Ce {
    * @returns An unsubscribe function
    */
   once(t, r) {
-    const a = (s) => {
+    const o = (s) => {
       n(), r(s);
-    }, n = this.on(t, a);
+    }, n = this.on(t, o);
     return n;
   }
   // -----------------------------------------------------------------------
@@ -660,9 +662,9 @@ class Ce {
    * @param data - The payload to pass to each handler
    */
   emit(t, r) {
-    const a = this.listeners.get(t);
-    if (a)
-      for (const n of [...a])
+    const o = this.listeners.get(t);
+    if (o)
+      for (const n of [...o])
         try {
           n(r);
         } catch (s) {
@@ -700,9 +702,9 @@ class Ce {
     return ((r = this.listeners.get(t)) == null ? void 0 : r.size) ?? 0;
   }
 }
-const Ee = new Ce();
+const Te = new Ce();
 function rt() {
-  return Ee;
+  return Te;
 }
 const W = {
   bleedFill: "#ffffff",
@@ -757,7 +759,7 @@ const W = {
   // pin via `style.labelFontSize`.
   labelFontSize: 14,
   labelFontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif"
-}, Te = {
+}, Ee = {
   // SVG `dominant-baseline` has no "baseline" keyword; "alphabetic" is the
   // bottom/baseline alignment (and React's typed union enforces this).
   tl: { textAnchor: "start", dominantBaseline: "hanging" },
@@ -771,7 +773,7 @@ const W = {
   br: { textAnchor: "end", dominantBaseline: "alphabetic" }
 };
 function K(e, t) {
-  return e.kind === "rect" ? /* @__PURE__ */ o(
+  return e.kind === "rect" ? /* @__PURE__ */ a(
     "rect",
     {
       x: e.x,
@@ -780,7 +782,7 @@ function K(e, t) {
       height: e.height,
       ...t
     }
-  ) : e.kind === "roundedRect" ? /* @__PURE__ */ o(
+  ) : e.kind === "roundedRect" ? /* @__PURE__ */ a(
     "rect",
     {
       x: e.x,
@@ -791,7 +793,7 @@ function K(e, t) {
       ry: e.ry,
       ...t
     }
-  ) : /* @__PURE__ */ o(
+  ) : /* @__PURE__ */ a(
     "path",
     {
       d: e.d,
@@ -815,9 +817,9 @@ function J(e) {
     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: a, y: n, width: s, height: i } = e;
+    const { x: o, y: n, width: s, height: i } = e;
     return [
-      `M ${a + t} ${n}`,
+      `M ${o + t} ${n}`,
       `h ${s - 2 * t}`,
       `a ${t} ${r} 0 0 1 ${t} ${r}`,
       `v ${i - 2 * r}`,
@@ -831,7 +833,7 @@ function J(e) {
   }
   return e.d;
 }
-function ke(e, t, r, a) {
+function ke(e, t, r, o) {
   if (e != null && e.safeArea) return e.safeArea;
   if (t.safeAreaInsetPx && t.safeAreaInsetPx > 0) {
     const n = t.safeAreaInsetPx;
@@ -840,7 +842,7 @@ function ke(e, t, r, a) {
       x: n,
       y: n,
       width: Math.max(0, r - n * 2),
-      height: Math.max(0, a - n * 2)
+      height: Math.max(0, o - n * 2)
     };
   }
   return null;
@@ -849,7 +851,7 @@ function nt({
   artboardWidth: e,
   artboardHeight: t,
   canvasPadding: r = 0,
-  pieces: a,
+  pieces: o,
   pieceGuides: n,
   show: s,
   style: i,
@@ -873,7 +875,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__ */ o(
+  return /* @__PURE__ */ a(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -881,7 +883,7 @@ function nt({
       preserveAspectRatio: "xMidYMid meet",
       className: m,
       style: { pointerEvents: "none", width: "100%", height: "100%" },
-      children: /* @__PURE__ */ o("g", { transform: `translate(${r} ${r})`, children: a.map((d) => {
+      children: /* @__PURE__ */ a("g", { transform: `translate(${r} ${r})`, children: o.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)`);
@@ -907,7 +909,7 @@ function nt({
           y: 0,
           width: u,
           height: p
-        }, G = `bleed-blur-${d.id}`, Z = {
+        }, _ = `bleed-blur-${d.id}`, Y = {
           kind: "rect",
           x: 0,
           y: 0,
@@ -917,15 +919,15 @@ function nt({
         return /* @__PURE__ */ b("g", { transform: z, children: [
           f.safeArea && H && /* @__PURE__ */ b(ve, { children: [
             /* @__PURE__ */ b("defs", { children: [
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ a(
                 "filter",
                 {
-                  id: G,
+                  id: _,
                   x: "-20%",
                   y: "-20%",
                   width: "140%",
                   height: "140%",
-                  children: /* @__PURE__ */ o(
+                  children: /* @__PURE__ */ a(
                     "feGaussianBlur",
                     {
                       in: "SourceGraphic",
@@ -946,7 +948,7 @@ function nt({
                   )
                 }
               ),
-              /* @__PURE__ */ o("clipPath", { id: `piece-clip-${d.id}`, children: /* @__PURE__ */ o(
+              /* @__PURE__ */ a("clipPath", { id: `piece-clip-${d.id}`, children: /* @__PURE__ */ a(
                 "rect",
                 {
                   x: 0,
@@ -956,15 +958,15 @@ function nt({
                 }
               ) })
             ] }),
-            /* @__PURE__ */ o(
+            /* @__PURE__ */ a(
               "g",
               {
                 clipPath: `url(#piece-clip-${d.id})`,
-                filter: `url(#${G})`,
-                children: /* @__PURE__ */ o(
+                filter: `url(#${_})`,
+                children: /* @__PURE__ */ a(
                   "path",
                   {
-                    d: `${J(Z)} ${J(O)}`,
+                    d: `${J(Y)} ${J(O)}`,
                     style: {
                       // Honor `style.bleedFill` / `style.bleedOpacity`
                       // overrides — previously hardcoded, which silently
@@ -979,26 +981,26 @@ function nt({
               }
             )
           ] }),
-          f.zones && x.filter((E) => E.kind !== "dieCut").map((E, R) => /* @__PURE__ */ o("g", { children: K(E.path, {
-            fill: l.zoneFill[E.kind],
-            stroke: l.zoneStroke[E.kind],
+          f.zones && x.filter((T) => T.kind !== "dieCut").map((T, R) => /* @__PURE__ */ a("g", { children: K(T.path, {
+            fill: l.zoneFill[T.kind],
+            stroke: l.zoneStroke[T.kind],
             strokeWidth: 1.5,
-            strokeDasharray: E.kind === "wrap" ? "4 3" : void 0,
+            strokeDasharray: T.kind === "wrap" ? "4 3" : void 0,
             vectorEffect: "non-scaling-stroke"
           }) }, `zone-${R}`)),
-          f.zones && x.filter((E) => E.kind === "dieCut").map((E, R) => {
-            const T = E.path;
-            if (T.kind !== "rect" && T.kind !== "roundedRect")
+          f.zones && x.filter((T) => T.kind === "dieCut").map((T, R) => {
+            const E = T.path;
+            if (E.kind !== "rect" && E.kind !== "roundedRect")
               return null;
-            const Q = T.kind === "roundedRect" ? T.rx ?? T.ry ?? 0 : 0, ee = T.kind === "roundedRect" ? T.ry ?? T.rx ?? 0 : 0;
-            return /* @__PURE__ */ o(
+            const Q = E.kind === "roundedRect" ? E.rx ?? E.ry ?? 0 : 0, ee = E.kind === "roundedRect" ? E.ry ?? E.rx ?? 0 : 0;
+            return /* @__PURE__ */ a(
               "foreignObject",
               {
-                x: T.x,
-                y: T.y,
-                width: T.width,
-                height: T.height,
-                children: /* @__PURE__ */ o(
+                x: E.x,
+                y: E.y,
+                width: E.width,
+                height: E.height,
+                children: /* @__PURE__ */ a(
                   "div",
                   {
                     xmlns: "http://www.w3.org/1999/xhtml",
@@ -1036,15 +1038,15 @@ function nt({
             strokeDasharray: l.safeAreaDashArray,
             vectorEffect: "non-scaling-stroke"
           }),
-          f.labels && S.map((E, R) => {
-            const T = Te[E.anchor ?? "c"];
-            return /* @__PURE__ */ o(
+          f.labels && S.map((T, R) => {
+            const E = Ee[T.anchor ?? "c"];
+            return /* @__PURE__ */ a(
               "text",
               {
-                x: E.x,
-                y: E.y,
-                textAnchor: T.textAnchor,
-                dominantBaseline: T.dominantBaseline,
+                x: T.x,
+                y: T.y,
+                textAnchor: E.textAnchor,
+                dominantBaseline: E.dominantBaseline,
                 fontSize: l.labelFontSize,
                 fontFamily: l.labelFontFamily,
                 fill: l.labelColor,
@@ -1052,7 +1054,7 @@ function nt({
                 stroke: "#ffffff",
                 strokeWidth: Math.max(2, l.labelFontSize * 0.25),
                 strokeLinejoin: "round",
-                children: E.text
+                children: T.text
               },
               `label-${R}`
             );
@@ -1062,134 +1064,134 @@ function nt({
     }
   );
 }
-te();
+se();
 export {
-  wr as ArtboardElement,
-  ot as ArtboardPropertiesToolbar,
-  it as ArtboardTabs,
-  ct as AutoExportManager,
-  lt as BackgroundPickerDropdown,
-  Sr as BaseElement,
-  dt as BoldButton,
+  Cr as ArtboardElement,
+  Kt as ArtboardPropertiesToolbar,
+  pt as ArtboardTabs,
+  xt as AutoExportManager,
+  Gt as BackgroundPickerDropdown,
+  Tr as BaseElement,
+  _t as BoldButton,
   Le as ButtonGroup,
-  ut as Canvas,
+  gt as Canvas,
   Ce as CanvasEventBus,
-  mt as CanvasSkeleton,
-  ft as ColorPickerDropdown,
-  ht as ContextualToolbars,
+  bt as CanvasSkeleton,
+  Ut as ColorPickerDropdown,
+  jt as ContextualToolbars,
   Oe as ControlGroup,
-  pt as CropPanel,
-  xt as DEFAULT_AUTO_EXPORT_CONFIG,
-  re as Dropdown,
-  gt as DropdownMenu,
-  ir as EditorProvider,
-  bt as EffectsPanel,
-  yt as ExportPanel,
-  vt as FontBrowserDrawer,
-  wt as FontColorButton,
+  Jt as CropPanel,
+  yt as DEFAULT_AUTO_EXPORT_CONFIG,
+  te as Dropdown,
+  at as DropdownMenu,
+  lr as EditorProvider,
+  vt as EffectsPanel,
+  wt as ExportPanel,
+  qt as FontBrowserDrawer,
+  Zt as FontColorButton,
   Se as FontSizeDropdown,
-  Ze as FontSizeGroup,
+  Ye as FontSizeGroup,
   St as GlyphPanel,
   ue as GroupElement,
-  Cr as ImageElement,
+  Er as ImageElement,
   Ct as ImagePanel,
-  Et as ImageToolbar,
-  Tt as ItalicButton,
-  $t as KIT_PRESETS,
-  kt as KitProvider,
-  At as LayersPanel,
-  Ft as LayersPanelSkeleton,
-  Pt as MenuButton,
-  Nt as MenuItem,
-  Rt as MoreMenu,
-  tn as PIECE_GUIDES_API_BASE,
-  cr as PRESERVE_SELECTION_ATTR,
+  Vt as ImageToolbar,
+  Xt as ItalicButton,
+  Tt as KIT_PRESETS,
+  Et as KitProvider,
+  it as LayersPanel,
+  $t as LayersPanelSkeleton,
+  ct as MenuButton,
+  lt as MenuItem,
+  Yt as MoreMenu,
+  nn as PIECE_GUIDES_API_BASE,
+  dr as PRESERVE_SELECTION_ATTR,
   ze as Panel,
-  Er as PathElement,
-  Bt as PathToolbar,
-  Tr as RichText,
-  _e as SecondaryToolbar,
-  $r as ShapeElement,
-  Dt as ShapeToolbar,
-  Mt as ShapeTypeDrawer,
-  It as Spinner,
-  zt as Surface,
+  $r as PathElement,
+  Ht as PathToolbar,
+  kr as RichText,
+  Ge as SecondaryToolbar,
+  Ar as ShapeElement,
+  Qt as ShapeToolbar,
+  dt as ShapeTypeDrawer,
+  kt as Spinner,
+  ut as Surface,
   Ke as Switch,
-  Ot as TextAlignButton,
-  kr as TextElement,
-  Lt as TextMoreMenu,
-  Wt as TextToolbar,
-  br as ThemeProvider,
+  er as TextAlignButton,
+  Fr as TextElement,
+  tr as TextMoreMenu,
+  rr as TextToolbar,
+  vr as ThemeProvider,
   We as Toggle,
-  Kt as ToolbarSkeleton,
-  _t as TransformControlPanel,
-  Gt as UnderlineButton,
-  Ut as UppercaseButton,
+  At as ToolbarSkeleton,
+  nr as TransformControlPanel,
+  sr as UnderlineButton,
+  or as UppercaseButton,
   nt as VisualGuideOverlay,
-  jt as ZoomControls,
-  Ee as canvasEventBus,
-  Jt as getAllSections,
+  Ft as ZoomControls,
+  Te as canvasEventBus,
+  Pt as getAllSections,
   et as getCustomElementTypes,
-  qt as getSection,
-  Vt as getSectionIds,
-  Ar as hasDistressEffect,
-  Fr as hasMasks,
-  Pr as hasStroke,
-  Nr as isArchTransform,
-  Rr as isCircleElementConfig,
-  Br as isCircleTransform,
-  Dr as isCustomElementConfig,
-  Mr as isCustomTransform,
-  Ir as isFlagTransform,
-  Xr as isGroupElement,
-  zr as isGroupElementConfig,
-  Or as isGroupTransform,
-  Yr as isImageElement,
-  Lr as isImageElementConfig,
-  Wr as isImageTransform,
-  Kr as isKnockout,
-  Zr as isPathElement,
-  _r as isPathElementConfig,
-  Gr as isPathTransform,
+  Nt as getSection,
+  Rt as getSectionIds,
+  Pr as hasDistressEffect,
+  Nr as hasMasks,
+  Rr as hasStroke,
+  Br as isArchTransform,
+  Mr as isCircleElementConfig,
+  Dr as isCircleTransform,
+  Ir as isCustomElementConfig,
+  zr as isCustomTransform,
+  Or as isFlagTransform,
+  Yr as isGroupElement,
+  Lr as isGroupElementConfig,
+  Wr as isGroupTransform,
+  Hr as isImageElement,
+  Kr as isImageElementConfig,
+  Gr as isImageTransform,
+  _r as isKnockout,
+  Qr as isPathElement,
+  Ur as isPathElementConfig,
+  jr as isPathTransform,
   tt as isRegisteredElementType,
-  Hr as isShapeElement,
-  Ur as isShapeElementConfig,
-  jr as isShapeTransform,
-  Qr as isTextElement,
-  Jr as isTextElementConfig,
-  qr as isWaveTransform,
+  en as isShapeElement,
+  Jr as isShapeElementConfig,
+  qr as isShapeTransform,
+  tn as isTextElement,
+  Zr as isTextElementConfig,
+  Vr as isWaveTransform,
   Ue as loadKitFromJSON,
-  rn as pieceGuidesForArtboard,
-  lr as preserveSelectionProps,
-  Xt as registerBuiltinSections,
-  Yt as registerBuiltinSectionsSync,
+  sn as pieceGuidesForArtboard,
+  ur as preserveSelectionProps,
+  Bt as registerBuiltinSections,
+  Mt as registerBuiltinSectionsSync,
   He as registerElementType,
-  Zt as registerSection,
-  Ht as renderPieceGuides,
-  Ge as serializeKit,
-  dr as shouldPreserveSelection,
-  Qt as surfaceVariants,
+  Dt as registerSection,
+  It as renderPieceGuides,
+  _e as serializeKit,
+  mr as shouldPreserveSelection,
+  mt as surfaceVariants,
   Qe as unregisterElementType,
-  er as unregisterSection,
+  zt as unregisterSection,
   Je as useBreakpoint,
   rt as useCanvasEvents,
-  tr as useCapabilities,
-  ur as useCommandContext,
-  Ve as useElementById,
-  mr as useElementsContext,
-  fr as useHistoryContext,
-  rr as useKit,
-  Xe as useLayerDragDrop,
-  nr as useLayerPreview,
-  Ye as useLayerSelection,
+  Ot as useCapabilities,
+  fr as useCommandContext,
+  Ze as useElementById,
+  hr as useElementsContext,
+  pr as useHistoryContext,
+  Lt as useKit,
+  Ve as useLayerDragDrop,
+  ar as useLayerPreview,
+  Xe as useLayerSelection,
   qe as usePerformance,
-  nn as usePieceGuideBundle,
+  on as usePieceGuideBundle,
   je as useProjectLoader,
-  hr as useSelectionContext,
-  sr as useSurface,
-  ar as useTextToolbar,
-  yr as useTheme,
-  pr as useToolStateContext,
-  xr as useViewportContext
+  xr as useSelectionContext,
+  ft as useSurface,
+  ir as useTextToolbar,
+  wr as useTheme,
+  gr as useToolStateContext,
+  br as useViewportContext
 };
 //# sourceMappingURL=advanced.mjs.map