@snowcone-app/canvas 0.37.1 → 0.39.0

package/dist/advanced.mjs

@@ -1,115 +1,116 @@
-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 { 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 { 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";
-const ze = ({
+import { p as Q, T as M, q as D, B as ee, I as j, r as I, s as te, e as re } from "./useCommands-x8J7_Mzy.js";
+import { t as it, L as ct, M as lt, v as dt, S as ut, w as mt, x as ft, u as ht } from "./useCommands-x8J7_Mzy.js";
+import { r as ne, v as se } from "./validation-Dh9sVEb9.js";
+import { d as xt, e as gt, f as bt, h as yt, D as vt, b as St, c as wt, G as Ct, i as Tt, K as Et, L as kt, S as $t, T as At, Z as Ft, j as Pt, g as Nt, k as Bt, l as Rt, a as Mt, m as Dt, n as It, u as zt, o as Ot, p as Lt } from "./validation-Dh9sVEb9.js";
+import { ImagePanel as Kt } from "./ImagePanel-BaX0UE-L.js";
+import { P as ae, b as oe, c as ie } from "./ContextualToolbars-C62As-xY.js";
+import { A as _t, B as Ut, d as jt, e as qt, C as Jt, a as Zt, F as Vt, f as Xt, I as Yt, g as Ht, M as Qt, h as er, S as tr, T as rr, i as nr, j as sr, k as ar, U as or, l as ir, u as cr, m as lr } from "./ContextualToolbars-C62As-xY.js";
+import { b as q } from "./design-builder-CoCtjIwj.js";
+import { E as ur, P as mr, p as fr, j as hr, a as pr, u as xr, k as gr, c as br, m as yr, d as vr } from "./design-builder-CoCtjIwj.js";
+import { T as wr, u as Cr } from "./ThemeContext-Rjz25x9X.js";
+import { c as ce, G as le, ap as de, q as ue, aq as me, ar as fe } from "./FontAnalyzer-DWHS41ba.js";
+import { A as Er, as as kr, I as $r, P as Ar, at as Fr, S as Pr, T as Nr, au as Br, av as Rr, aw as Mr, ax as Dr, ay as Ir, az as zr, aA as Or, aB as Lr, aC as Wr, aD as Kr, aE as Gr, aF as _r, aG as Ur, aH as jr, aI as qr, aJ as Jr, aK as Zr, aL as Vr, aM as Xr, aN as Yr } from "./FontAnalyzer-DWHS41ba.js";
+import { a as Qr, i as en, b as tn, c as rn, d as nn } from "./guards-DMmhw_Ow.js";
+import { useState as A, useCallback as y, useEffect as J, useMemo as Z, useRef as R, memo as he } from "react";
+import { I as pe } from "./ExportManager-BbBfO22S.js";
+import { e as xe, c as ge } from "./compose-DtQL_oit.js";
+import { jsxs as g, jsx as o, Fragment as be } from "react/jsx-runtime";
+import { n as ye, p as ve } from "./CanvasRenderer-COO5UXtZ.js";
+import { P as an, p as on, u as cn } from "./usePieceGuideBundle-Cab2gRnn.js";
+const Oe = ({
   title: e,
   icon: t,
   children: r,
-  enableable: o = !1,
+  enableable: a = !1,
   enabled: n = !1,
   onEnabledChange: s,
   collapsible: i = !1,
-  expanded: m = !0,
+  expanded: d = !0,
   onExpandChange: l,
-  className: f = ""
+  className: h = ""
 }) => {
-  const w = o ? n && m : i ? m : !0, h = o && n || i, d = () => {
+  const w = a ? n && d : i ? d : !0, p = a && n || i, u = () => {
     s && s(!n);
   }, c = () => {
-    l && l(!m);
+    l && l(!d);
   };
-  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(
+  return /* @__PURE__ */ g("div", { className: `sc:rounded-xl sc:border sc:border-border-primary sc:bg-bg-secondary sc:p-xl ${h}`, children: [
+    /* @__PURE__ */ g("div", { className: "sc:flex sc:items-center sc:justify-between", children: [
+      /* @__PURE__ */ g("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(
           "input",
           {
             type: "checkbox",
             checked: n,
-            onChange: d,
+            onChange: u,
             className: "sc:h-4 sc:w-4 sc:cursor-pointer sc:rounded sc:border-border-primary sc:bg-bg-input sc:accent-accent-primary"
           }
         ) }),
-        /* @__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 })
+        /* @__PURE__ */ g("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 })
         ] })
       ] }),
-      h && /* @__PURE__ */ a(
+      p && /* @__PURE__ */ o(
         "button",
         {
           onClick: c,
           className: "sc:rounded-lg sc:border-none sc:bg-transparent sc:px-md sc:py-xs sc:text-base sc:text-text-muted sc:transition-colors sc:duration-fast sc:hover:text-text-primary",
-          title: m ? "Collapse" : "Expand",
-          children: m ? "▼" : "▶"
+          title: d ? "Collapse" : "Expand",
+          children: d ? "▼" : "▶"
         }
       )
     ] }),
-    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 = ({
+}, Le = ({
   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("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__ */ g("div", { className: `sc:flex ${a ? "sc:items-center sc:justify-between" : "sc:flex-col"} sc:gap-sm ${n}`, children: [
+  /* @__PURE__ */ g("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("div", { className: o ? "sc:flex-shrink-0" : "", children: r })
+  /* @__PURE__ */ o("div", { className: a ? "sc:flex-shrink-0" : "", children: r })
 ] });
-function Le({
+function We({
   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(
+    return /* @__PURE__ */ g(
       "button",
       {
         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 i = (m) => {
-    o(m.target.checked);
+const Ke = ({ label: e, icon: t, checked: r, onChange: a, disabled: n = !1, className: s = "" }) => {
+  const i = (d) => {
+    a(d.target.checked);
   };
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ g(
     "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",
@@ -119,39 +120,39 @@ const We = ({ label: e, icon: t, checked: r, onChange: o, disabled: n = !1, clas
             className: "sc:h-4 sc:w-4 sc:cursor-pointer sc:rounded sc:border-border-primary sc:bg-bg-input sc:accent-accent-primary sc:disabled:cursor-not-allowed"
           }
         ),
-        /* @__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 })
+        /* @__PURE__ */ g("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 })
         ] })
       ]
     }
   );
-}, Ke = ({
+}, Ge = ({
   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(
+  return /* @__PURE__ */ g(
     "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,41 +165,41 @@ 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 })
       ]
     }
   );
-}, Ge = ({
+}, _e = ({
   isOpen: e,
   onToggle: t,
   trigger: r,
-  children: o
-}) => /* @__PURE__ */ a(
-  te,
+  children: a
+}) => /* @__PURE__ */ o(
+  Q,
   {
     isOpen: e,
     onToggle: t,
-    trigger: r || /* @__PURE__ */ b(M, { delayDuration: 0, children: [
-      /* @__PURE__ */ a(D, { asChild: !0, children: /* @__PURE__ */ a(
-        re,
+    trigger: r || /* @__PURE__ */ g(M, { delayDuration: 0, children: [
+      /* @__PURE__ */ o(D, { asChild: !0, children: /* @__PURE__ */ o(
+        ee,
         {
           variant: "ghost",
           size: "toolbar",
           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) {
+function Ue(e) {
   const t = {
     name: e.name,
     capabilities: {
@@ -223,69 +224,69 @@ function _e(e) {
   };
   return e.content && (t.content = { ...e.content }), t;
 }
-function Ue(e) {
+function je(e) {
   if (!e.name || e.name.trim() === "")
     throw new Error("[loadKitFromJSON] Kit name is required");
   const t = {};
   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);
-    r = be(n, { name: e.name, ...t });
+    const n = ne(e.extends);
+    r = xe(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)
+    r = ge({ name: e.name, ...t });
+  const a = se(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;
 }
-const L = de("useProjectLoader");
-function je() {
+const z = ce("useProjectLoader");
+function qe() {
   const {
     handleLoadWorkspace: e
-  } = Z(), [t, r] = A(!1), [o, n] = A(null), [s, i] = A(null), [m, l] = A(null), f = y(async (d) => {
+  } = q(), [t, r] = A(!1), [a, n] = A(null), [s, i] = A(null), [d, l] = A(null), h = y(async (u) => {
     r(!0), n(null);
     try {
-      const c = typeof d == "string" ? JSON.parse(d) : d;
+      const c = typeof u == "string" ? JSON.parse(u) : u;
       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 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);
-      const u = c.artboards.reduce((p, k) => {
-        var v;
-        return p + (((v = k.elements) == null ? void 0 : v.length) || 0);
+      const x = JSON.stringify(c), C = new Blob([x], { type: "application/json" }), b = new File([C], "project.json", { type: "application/json" }), f = await pe.importFromJSON(b);
+      if (!f.success || !f.artboards || !f.elements)
+        throw new Error(f.error || "Failed to import project");
+      e(f.artboards, f.elements, f.activeArtboardId || null), i(c);
+      const m = c.artboards.reduce((v, k) => {
+        var S;
+        return v + (((S = k.elements) == null ? void 0 : S.length) || 0);
       }, 0);
       l({
         version: c.metadata.version,
         timestamp: c.metadata.timestamp,
         artboardCount: c.artboards.length,
-        elementCount: u
+        elementCount: m
       });
     } catch (c) {
-      throw L.error("[useProjectLoader] Failed to load project:", c), n(c), c;
+      throw z.error("[useProjectLoader] Failed to load project:", c), n(c), c;
     } finally {
       r(!1);
     }
-  }, [e]), w = y(async (d) => {
+  }, [e]), w = y(async (u) => {
     r(!0), n(null);
     try {
-      const c = await d.text();
-      await f(c);
+      const c = await u.text();
+      await h(c);
     } catch (c) {
-      throw L.error("[useProjectLoader] Failed to load file:", c), n(c), c;
+      throw z.error("[useProjectLoader] Failed to load file:", c), n(c), c;
     } finally {
       r(!1);
     }
-  }, [f]), h = y(async (d) => {
+  }, [h]), p = y(async (u) => {
     r(!0), n(null);
     try {
       const c = {
@@ -294,8 +295,8 @@ function je() {
           timestamp: (/* @__PURE__ */ new Date()).toISOString(),
           appVersion: "1.0.0"
         },
-        artboards: d.artboards.map((x, S) => ({
-          id: `artboard-${Date.now()}-${S}`,
+        artboards: u.artboards.map((x, C) => ({
+          id: `artboard-${Date.now()}-${C}`,
           name: x.name,
           x: 0,
           y: 0,
@@ -307,24 +308,24 @@ function je() {
         activeArtboardId: null
         // First artboard will be active by default
       };
-      await f(c);
+      await h(c);
     } catch (c) {
-      throw L.error("[useProjectLoader] Failed to load template:", c), n(c), c;
+      throw z.error("[useProjectLoader] Failed to load template:", c), n(c), c;
     } finally {
       r(!1);
     }
-  }, [f]);
+  }, [h]);
   return {
-    loadFromJSON: f,
+    loadFromJSON: h,
     loadFromFile: w,
-    loadTemplate: h,
+    loadTemplate: p,
     isLoading: t,
-    loadError: o,
+    loadError: a,
     currentProject: s,
-    projectMetadata: m
+    projectMetadata: d
   };
 }
-const U = {
+const G = {
   xs: 320,
   sm: 480,
   md: 768,
@@ -332,45 +333,45 @@ const U = {
   xl: 1280,
   xxl: 1536
 };
-function we(e, t) {
+function Se(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) {
   const t = {
-    ...U,
+    ...G,
     ...e
-  }, [r, o] = A(() => typeof window < "u" ? window.innerWidth : U.lg);
-  V(() => {
+  }, [r, a] = A(() => typeof window < "u" ? window.innerWidth : G.lg);
+  J(() => {
     if (typeof window > "u") return;
     const x = () => {
-      o(window.innerWidth);
+      a(window.innerWidth);
     };
     return window.addEventListener("resize", x), () => window.removeEventListener("resize", x);
   }, []);
-  const n = X(
-    () => we(r, t),
+  const n = Z(
+    () => Se(r, t),
     [r, t]
-  ), s = n === "xs", i = n === "sm", m = n === "md", l = n === "lg", f = n === "xl", w = n === "xxl", h = ["xs", "sm", "md", "lg", "xl", "xxl"];
+  ), s = n === "xs", i = n === "sm", d = n === "md", l = n === "lg", h = n === "xl", w = n === "xxl", p = ["xs", "sm", "md", "lg", "xl", "xxl"];
   return {
     breakpoint: n,
     width: r,
     isXs: s,
     isSm: i,
-    isMd: m,
+    isMd: d,
     isLg: l,
-    isXl: f,
+    isXl: h,
     isXxl: w,
     isAtLeast: (x) => {
-      const S = h.indexOf(n), C = h.indexOf(x);
-      return S >= C;
+      const C = p.indexOf(n), b = p.indexOf(x);
+      return C >= b;
     },
     isAtMost: (x) => {
-      const S = h.indexOf(n), C = h.indexOf(x);
-      return S <= C;
+      const C = p.indexOf(n), b = p.indexOf(x);
+      return C <= b;
     }
   };
 }
-const j = {
+const _ = {
   fps: 0,
   avgRenderTime: 0,
   peakRenderTime: 0,
@@ -379,29 +380,29 @@ 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(() => {
-    const u = {
-      fps: f(n.current),
+function Ze() {
+  const [e, t] = A(_), [r, a] = A(!1), n = R([]), s = R([]), i = R([]), d = R(performance.now()), l = R(null), h = y((m) => m.length === 0 ? 0 : 1e3 / (m.reduce((k, S) => k + S, 0) / m.length), []), w = y((m) => m.length === 0 ? 0 : m.reduce((v, k) => v + k, 0) / m.length, []), p = y(() => "memory" in performance && performance.memory ? performance.memory.usedJSHeapSize / (1024 * 1024) : 0, []), u = y(() => {
+    const m = {
+      fps: h(n.current),
       avgRenderTime: w(s.current),
       peakRenderTime: Math.max(...s.current, 0),
-      memoryUsage: h(),
+      memoryUsage: p(),
       elementCount: 0,
       // Would need to be updated by editor context
       exportCount: i.current.length,
       avgExportTime: w(i.current)
     };
-    t(u);
-  }, [f, w, h]), c = y(() => {
-    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);
-  }, [c]), S = y(() => {
-    o(!1), l.current !== null && (cancelAnimationFrame(l.current), l.current = null);
-  }, []), C = y(() => {
-    n.current = [], s.current = [], i.current = [], t(j);
-  }, []), g = y(() => `
+    t(m);
+  }, [h, w, p]), c = y(() => {
+    const m = performance.now(), v = m - d.current;
+    d.current = m, n.current.push(v), n.current.length > 60 && n.current.shift(), n.current.length % 30 === 0 && u(), r && (l.current = requestAnimationFrame(c));
+  }, [r, u]), x = y(() => {
+    a(!0), d.current = performance.now(), l.current = requestAnimationFrame(c);
+  }, [c]), C = y(() => {
+    a(!1), l.current !== null && (cancelAnimationFrame(l.current), l.current = null);
+  }, []), b = y(() => {
+    n.current = [], s.current = [], i.current = [], t(_);
+  }, []), f = y(() => `
 Performance Report
 ==================
 FPS: ${e.fps.toFixed(1)}
@@ -412,113 +413,113 @@ Element Count: ${e.elementCount}
 Export Count: ${e.exportCount}
 Avg Export Time: ${e.avgExportTime.toFixed(2)}ms
     `.trim(), [e]);
-  return V(() => () => {
+  return J(() => () => {
     l.current !== null && cancelAnimationFrame(l.current);
   }, []), {
     metrics: e,
     startProfiling: x,
-    stopProfiling: S,
-    clearMetrics: C,
-    getReport: g,
+    stopProfiling: C,
+    clearMetrics: b,
+    getReport: f,
     isProfiling: r
   };
 }
-function Ze(e) {
-  const { getElementById: t } = Z();
+function Ve(e) {
+  const { getElementById: t } = q();
   return e ? t(e) ?? null : null;
 }
-function Ve(e) {
+function Xe(e) {
   const {
     onReorder: t,
     onGroupReorder: r,
-    onDropIntoGroup: o,
+    onDropIntoGroup: a,
     onDropIntoGroupAtPosition: n,
     findElement: s,
     findParentGroup: i
-  } = e, [m, l] = A(null), [f, w] = A(null), [h, d] = A(null), c = y((g, u) => {
-    g.dataTransfer.effectAllowed = "move", requestAnimationFrame(() => {
-      l(u);
+  } = e, [d, l] = A(null), [h, w] = A(null), [p, u] = A(null), c = y((f, m) => {
+    f.dataTransfer.effectAllowed = "move", requestAnimationFrame(() => {
+      l(m);
     });
   }, []), x = y(
-    (g, u) => {
-      g.preventDefault(), g.dataTransfer.dropEffect = "move";
-      const p = g.currentTarget.getBoundingClientRect(), v = g.clientY - p.top, F = p.height, z = (s == null ? void 0 : s(u)) instanceof ue;
+    (f, m) => {
+      f.preventDefault(), f.dataTransfer.dropEffect = "move";
+      const v = f.currentTarget.getBoundingClientRect(), S = f.clientY - v.top, P = v.height, F = (s == null ? void 0 : s(m)) instanceof le;
       let $;
-      z ? v < F * 0.25 ? $ = "before" : v > F * 0.75 ? $ = "after" : $ = "into" : v < F * 0.4 ? $ = "before" : v > F * 0.6 ? $ = "after" : $ = v < F / 2 ? "before" : "after", w(u), d($);
+      F ? S < P * 0.25 ? $ = "before" : S > P * 0.75 ? $ = "after" : $ = "into" : S < P * 0.4 ? $ = "before" : S > P * 0.6 ? $ = "after" : $ = S < P / 2 ? "before" : "after", w(m), u($);
     },
     [s]
-  ), S = y(() => {
-    l(null), w(null), d(null);
-  }, []), C = y(
-    (g, u) => {
-      if (g.preventDefault(), !m || m === u || !h) {
-        S();
+  ), C = y(() => {
+    l(null), w(null), u(null);
+  }, []), b = y(
+    (f, m) => {
+      if (f.preventDefault(), !d || d === m || !p) {
+        C();
         return;
       }
-      if (h === "into")
-        o && o(m, u);
+      if (p === "into")
+        a && a(d, m);
       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);
+        const v = i == null ? void 0 : i(d), k = i == null ? void 0 : i(m), S = p === "before" ? "after" : "before";
+        v && k && v.id === k.id ? r && r(d, m, S, v.id) : !v && k && n ? n(d, k.id, m, S) : t(d, m, S);
       }
-      S();
+      C();
     },
     [
-      m,
-      h,
+      d,
+      p,
       t,
       r,
-      o,
+      a,
       n,
       i,
-      S
+      C
     ]
   );
   return {
-    draggedId: m,
-    dragOverId: f,
-    dropPosition: h,
+    draggedId: d,
+    dragOverId: h,
+    dropPosition: p,
     handlers: {
       onDragStart: c,
       onDragOver: x,
-      onDrop: C,
-      onDragEnd: S
+      onDrop: b,
+      onDragEnd: C
     }
   };
 }
-function Xe(e) {
-  const { selectedId: t, multiSelection: r, onSelectionChange: o, onMultiSelectionChange: n } = e, s = y(
-    (m) => m === t || r.includes(m),
+function Ye(e) {
+  const { selectedId: t, multiSelection: r, onSelectionChange: a, onMultiSelectionChange: n } = e, s = y(
+    (d) => d === t || r.includes(d),
     [t, r]
   ), i = y(
-    (m, l) => {
-      if (m.shiftKey) {
-        const f = r.includes(l), w = t === l;
+    (d, l) => {
+      if (d.shiftKey) {
+        const h = r.includes(l), w = t === l;
         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);
+          if (h) {
+            const p = r.filter((u) => u !== l);
+            p.length === 1 ? (n([]), a(p[0])) : p.length === 0 ? (n([]), a(null)) : n(p);
           } 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 we = he(({ 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__ */ g(ae, { open: a, onOpenChange: n, children: [
+    /* @__PURE__ */ o(oe, { 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(ie, { 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),
@@ -529,47 +530,47 @@ 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);
-  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" })
+we.displayName = "FontSizeDropdown";
+function He({ toolbar: e }) {
+  const { fontSize: t, handleFontSizeIncrement: r, handleFontSizeChange: a } = e, [n, s] = A(!1);
+  return /* @__PURE__ */ g("div", { className: "sc-toolbar-group", children: [
+    /* @__PURE__ */ g(M, { delayDuration: 300, children: [
+      /* @__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__ */ g(M, { delayDuration: 300, children: [
+      /* @__PURE__ */ o(D, { asChild: !0, children: /* @__PURE__ */ g("div", { style: { position: "relative" }, children: [
+        /* @__PURE__ */ o(
           "button",
           {
             className: "sc-toolbar-font-size-display",
             onClick: () => {
-              ne.protectNextClick(), s(!n);
+              te.protectNextClick(), s(!n);
             },
             children: t
           }
         ),
-        n && /* @__PURE__ */ a(
+        n && /* @__PURE__ */ o(
           "div",
           {
             className: "font-dropdown",
             ref: (i) => {
               if (i) {
-                const m = (l) => {
-                  const f = l.target;
-                  !i.contains(f) && !f.closest(".sc-toolbar-font-size-display") && s(!1);
+                const d = (l) => {
+                  const h = l.target;
+                  !i.contains(h) && !h.closest(".sc-toolbar-font-size-display") && s(!1);
                 };
                 setTimeout(() => {
-                  document.addEventListener("mousedown", m);
+                  document.addEventListener("mousedown", d);
                 }, 0);
               }
             },
-            children: me.map((i) => /* @__PURE__ */ a(
+            children: de.map((i) => /* @__PURE__ */ o(
               "button",
               {
                 className: `font-dropdown-option ${t === i ? "selected" : ""}`,
                 onClick: () => {
-                  o(i), s(!1);
+                  a(i), s(!1);
                 },
                 children: i
               },
@@ -578,16 +579,16 @@ 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__ */ g(M, { delayDuration: 300, children: [
+      /* @__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" })
     ] })
   ] });
 }
-const G = /* @__PURE__ */ new Map();
-function He(e) {
+const W = /* @__PURE__ */ new Map();
+function Qe(e) {
   if (!e.type || typeof e.type != "string")
     throw new Error('ElementTypeRegistration requires a non-empty "type" string');
   if (typeof e.Component != "function")
@@ -598,20 +599,20 @@ function He(e) {
     throw new Error(
       `ElementTypeRegistration for "${e.type}" requires a non-empty "label" string`
     );
-  he(e.type, {
+  me(e.type, {
     id: e.type,
     label: e.label,
     Component: e.Component
-  }), G.set(e.type, { ...e });
+  }), W.set(e.type, { ...e });
 }
-function Qe(e) {
-  pe(e), G.delete(e);
+function et(e) {
+  fe(e), W.delete(e);
 }
-function et() {
-  return Array.from(G.values());
+function tt() {
+  return Array.from(W.values());
 }
-function tt(e) {
-  return fe(e) !== void 0;
+function rt(e) {
+  return ue(e) !== void 0;
 }
 class Ce {
   constructor() {
@@ -628,9 +629,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 +646,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 +664,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) {
@@ -704,10 +705,10 @@ class Ce {
   }
 }
 const Te = new Ce();
-function rt() {
+function nt() {
   return Te;
 }
-const W = {
+const O = {
   bleedFill: "#ffffff",
   bleedOpacity: 0.5,
   // Subtle boundary — the wash already draws the eye to the safe area,
@@ -773,8 +774,8 @@ const W = {
   bc: { textAnchor: "middle", dominantBaseline: "alphabetic" },
   br: { textAnchor: "end", dominantBaseline: "alphabetic" }
 };
-function K(e, t) {
-  return e.kind === "rect" ? /* @__PURE__ */ a(
+function L(e, t) {
+  return e.kind === "rect" ? /* @__PURE__ */ o(
     "rect",
     {
       x: e.x,
@@ -783,7 +784,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 +795,7 @@ function K(e, t) {
       ry: e.ry,
       ...t
     }
-  ) : /* @__PURE__ */ a(
+  ) : /* @__PURE__ */ o(
     "path",
     {
       d: e.d,
@@ -802,7 +803,7 @@ function K(e, t) {
     }
   );
 }
-function $e(e, t, r) {
+function ke(e, t, r) {
   return (e == null ? void 0 : e.boundary) ?? {
     kind: "rect",
     x: 0,
@@ -811,16 +812,16 @@ function $e(e, t, r) {
     height: r
   };
 }
-function J(e) {
+function U(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 +835,7 @@ function J(e) {
   }
   return e.d;
 }
-function ke(e, t, r, o) {
+function $e(e, t, r, a) {
   if (e != null && e.safeArea) return e.safeArea;
   if (t.safeAreaInsetPx && t.safeAreaInsetPx > 0) {
     const n = t.safeAreaInsetPx;
@@ -843,92 +844,89 @@ 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;
 }
-function nt({
+function st({
   artboardWidth: e,
   artboardHeight: t,
   canvasPadding: r = 0,
-  pieces: o,
+  pieces: a,
   pieceGuides: n,
   show: s,
   style: i,
-  className: m
+  className: d
 }) {
-  const l = X(() => {
-    const d = Math.max(
+  const l = Z(() => {
+    const u = Math.max(
       16,
       Math.round(Math.min(e, t) * 0.03)
     ), c = {
-      ...W,
+      ...O,
       ...i ?? {},
-      zoneFill: { ...W.zoneFill, ...(i == null ? void 0 : i.zoneFill) ?? {} },
-      zoneStroke: { ...W.zoneStroke, ...(i == null ? void 0 : i.zoneStroke) ?? {} }
+      zoneFill: { ...O.zoneFill, ...(i == null ? void 0 : i.zoneFill) ?? {} },
+      zoneStroke: { ...O.zoneStroke, ...(i == null ? void 0 : i.zoneStroke) ?? {} }
     };
-    return (i == null ? void 0 : i.labelFontSize) === void 0 && (c.labelFontSize = d), c;
-  }, [i, e, t]), f = {
+    return (i == null ? void 0 : i.labelFontSize) === void 0 && (c.labelFontSize = u), c;
+  }, [i, e, t]), h = {
     bleed: (s == null ? void 0 : s.bleed) ?? !0,
     zones: (s == null ? void 0 : s.zones) ?? !0,
     boundary: (s == null ? void 0 : s.boundary) ?? !0,
     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(
+  }, w = e + r * 2, p = t + r * 2;
+  return /* @__PURE__ */ o(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: `0 0 ${w} ${h}`,
+      viewBox: `0 0 ${w} ${p}`,
       preserveAspectRatio: "xMidYMid meet",
-      className: m,
+      className: d,
       style: { pointerEvents: "none", width: "100%", height: "100%" },
-      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)`);
-        const z = N ? `${F} ${N}` : F, $ = l.safeAreaWashCornerRadius < 0 ? Math.round(Math.min(u, p) * 0.02) : l.safeAreaWashCornerRadius, P = c != null && c.boundary && (c.boundary.kind === "rect" || c.boundary.kind === "roundedRect") ? c.boundary : null, O = P ? P.kind === "rect" && $ > 0 ? {
+      children: /* @__PURE__ */ o("g", { transform: `translate(${r} ${r})`, children: a.map((u) => {
+        const c = n == null ? void 0 : n[u.id], x = (c == null ? void 0 : c.zones) ?? [], C = (c == null ? void 0 : c.labels) ?? [], { width: b, height: f } = ye(u), m = ke(c, b, f), v = $e(c, u, b, f), k = `translate(${u.x} ${u.y})`, S = ve(u), P = S ? `${k} ${S}` : k, N = l.safeAreaWashCornerRadius < 0 ? Math.round(Math.min(b, f) * 0.02) : l.safeAreaWashCornerRadius, F = c != null && c.boundary && (c.boundary.kind === "rect" || c.boundary.kind === "roundedRect") ? c.boundary : null, $ = F ? F.kind === "rect" && N > 0 ? {
           kind: "roundedRect",
-          x: P.x,
-          y: P.y,
-          width: P.width,
-          height: P.height,
-          rx: $,
-          ry: $
-        } : P : $ > 0 ? {
+          x: F.x,
+          y: F.y,
+          width: F.width,
+          height: F.height,
+          rx: N,
+          ry: N
+        } : F : N > 0 ? {
           kind: "roundedRect",
           x: 0,
           y: 0,
-          width: u,
-          height: p,
-          rx: $,
-          ry: $
+          width: b,
+          height: f,
+          rx: N,
+          ry: N
         } : {
           kind: "rect",
           x: 0,
           y: 0,
-          width: u,
-          height: p
-        }, _ = `bleed-blur-${d.id}`, Y = {
+          width: b,
+          height: f
+        }, K = `bleed-blur-${u.id}`, V = {
           kind: "rect",
           x: 0,
           y: 0,
-          width: u,
-          height: p
-        }, H = O.kind === "rect" || O.kind === "roundedRect";
-        return /* @__PURE__ */ b("g", { transform: z, children: [
-          f.safeArea && H && /* @__PURE__ */ b(ve, { children: [
-            /* @__PURE__ */ b("defs", { children: [
-              /* @__PURE__ */ a(
+          width: b,
+          height: f
+        }, X = $.kind === "rect" || $.kind === "roundedRect";
+        return /* @__PURE__ */ g("g", { transform: P, children: [
+          h.safeArea && X && /* @__PURE__ */ g(be, { children: [
+            /* @__PURE__ */ g("defs", { children: [
+              /* @__PURE__ */ o(
                 "filter",
                 {
-                  id: _,
+                  id: K,
                   x: "-20%",
                   y: "-20%",
                   width: "140%",
                   height: "140%",
-                  children: /* @__PURE__ */ a(
+                  children: /* @__PURE__ */ o(
                     "feGaussianBlur",
                     {
                       in: "SourceGraphic",
@@ -942,32 +940,32 @@ function nt({
                         // other piece-local geometry.
                         Math.max(
                           12,
-                          Math.round(Math.min(u, p) * 0.025)
+                          Math.round(Math.min(b, f) * 0.025)
                         )
                       )
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ a("clipPath", { id: `piece-clip-${d.id}`, children: /* @__PURE__ */ a(
+              /* @__PURE__ */ o("clipPath", { id: `piece-clip-${u.id}`, children: /* @__PURE__ */ o(
                 "rect",
                 {
                   x: 0,
                   y: 0,
-                  width: u,
-                  height: p
+                  width: b,
+                  height: f
                 }
               ) })
             ] }),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ o(
               "g",
               {
-                clipPath: `url(#piece-clip-${d.id})`,
-                filter: `url(#${_})`,
-                children: /* @__PURE__ */ a(
+                clipPath: `url(#piece-clip-${u.id})`,
+                filter: `url(#${K})`,
+                children: /* @__PURE__ */ o(
                   "path",
                   {
-                    d: `${J(Y)} ${J(O)}`,
+                    d: `${U(V)} ${U($)}`,
                     style: {
                       // Honor `style.bleedFill` / `style.bleedOpacity`
                       // overrides — previously hardcoded, which silently
@@ -982,33 +980,33 @@ function nt({
               }
             )
           ] }),
-          f.zones && x.filter((T) => T.kind !== "dieCut").map((T, R) => /* @__PURE__ */ a("g", { children: K(T.path, {
+          h.zones && x.filter((T) => T.kind !== "dieCut").map((T, B) => /* @__PURE__ */ o("g", { children: L(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}`)),
+          h.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(
+            const Y = E.kind === "roundedRect" ? E.rx ?? E.ry ?? 0 : 0, H = E.kind === "roundedRect" ? E.ry ?? E.rx ?? 0 : 0;
+            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",
                     style: {
                       width: "100%",
                       height: "100%",
-                      borderRadius: `${Q}px / ${ee}px`,
+                      borderRadius: `${Y}px / ${H}px`,
                       backdropFilter: "blur(4px)",
                       WebkitBackdropFilter: "blur(4px)",
                       // Match the canvas's own "outside-artboard"
@@ -1023,25 +1021,25 @@ function nt({
                   }
                 )
               },
-              `diecut-${R}`
+              `diecut-${B}`
             );
           }),
-          f.boundary && l.boundaryStroke && K(k, {
+          h.boundary && l.boundaryStroke && L(m, {
             fill: "none",
             stroke: l.boundaryStroke,
             strokeWidth: l.boundaryStrokeWidth,
             vectorEffect: "non-scaling-stroke"
           }),
-          f.safeArea && v && l.safeAreaStroke && K(v, {
+          h.safeArea && v && l.safeAreaStroke && L(v, {
             fill: "none",
             stroke: l.safeAreaStroke,
             strokeWidth: l.safeAreaStrokeWidth,
             strokeDasharray: l.safeAreaDashArray,
             vectorEffect: "non-scaling-stroke"
           }),
-          f.labels && S.map((T, R) => {
+          h.labels && C.map((T, B) => {
             const E = Ee[T.anchor ?? "c"];
-            return /* @__PURE__ */ a(
+            return /* @__PURE__ */ o(
               "text",
               {
                 x: T.x,
@@ -1057,142 +1055,142 @@ function nt({
                 strokeLinejoin: "round",
                 children: T.text
               },
-              `label-${R}`
+              `label-${B}`
             );
           })
-        ] }, d.id);
+        ] }, u.id);
       }) })
     }
   );
 }
-se();
+re();
 export {
-  Tr as ArtboardElement,
-  Gt as ArtboardPropertiesToolbar,
-  pt as ArtboardTabs,
-  xt as AutoExportManager,
-  _t as BackgroundPickerDropdown,
-  Er as BaseElement,
-  Ut as BoldButton,
-  Le as ButtonGroup,
-  gt as Canvas,
+  Er as ArtboardElement,
+  _t as ArtboardPropertiesToolbar,
+  xt as ArtboardTabs,
+  gt as AutoExportManager,
+  Ut as BackgroundPickerDropdown,
+  kr as BaseElement,
+  jt as BoldButton,
+  We as ButtonGroup,
+  bt as Canvas,
   Ce as CanvasEventBus,
-  bt as CanvasSkeleton,
-  jt as ColorPickerDropdown,
+  yt as CanvasSkeleton,
+  qt as ColorPickerDropdown,
   Jt as ContextualToolbars,
-  Oe as ControlGroup,
-  qt as CropPanel,
-  yt as DEFAULT_AUTO_EXPORT_CONFIG,
-  te as Dropdown,
-  at as DropdownMenu,
-  dr as EditorProvider,
-  vt as EffectsPanel,
+  Le as ControlGroup,
+  Zt as CropPanel,
+  vt as DEFAULT_AUTO_EXPORT_CONFIG,
+  Q as Dropdown,
+  it as DropdownMenu,
+  ur as EditorProvider,
+  St as EffectsPanel,
   wt as ExportPanel,
-  Zt as FontBrowserDrawer,
-  Vt as FontColorButton,
-  Se as FontSizeDropdown,
-  Ye as FontSizeGroup,
-  St as GlyphPanel,
-  ue as GroupElement,
+  Vt as FontBrowserDrawer,
+  Xt as FontColorButton,
+  we as FontSizeDropdown,
+  He as FontSizeGroup,
+  Ct as GlyphPanel,
+  le as GroupElement,
   $r as ImageElement,
-  Wt as ImagePanel,
-  Xt as ImageToolbar,
-  Yt as ItalicButton,
-  Ct as KIT_PRESETS,
-  Tt as KitProvider,
-  it as LayersPanel,
-  Et as LayersPanelSkeleton,
-  ct as MenuButton,
-  lt as MenuItem,
-  Ht as MoreMenu,
-  sn as PIECE_GUIDES_API_BASE,
-  ur as PRESERVE_SELECTION_ATTR,
-  ze as Panel,
-  kr as PathElement,
-  Qt as PathToolbar,
-  Ar as RichText,
-  Ge as SecondaryToolbar,
-  Fr as ShapeElement,
-  er as ShapeToolbar,
-  dt as ShapeTypeDrawer,
+  Kt as ImagePanel,
+  Yt as ImageToolbar,
+  Ht as ItalicButton,
+  Tt as KIT_PRESETS,
+  Et as KitProvider,
+  ct as LayersPanel,
+  kt as LayersPanelSkeleton,
+  lt as MenuButton,
+  dt as MenuItem,
+  Qt as MoreMenu,
+  an as PIECE_GUIDES_API_BASE,
+  mr as PRESERVE_SELECTION_ATTR,
+  Oe as Panel,
+  Ar as PathElement,
+  er as PathToolbar,
+  Fr as RichText,
+  _e as SecondaryToolbar,
+  Pr as ShapeElement,
+  tr as ShapeToolbar,
+  ut as ShapeTypeDrawer,
   $t as Spinner,
-  ut as Surface,
-  Ke as Switch,
-  tr as TextAlignButton,
-  Pr as TextElement,
-  rr as TextMoreMenu,
-  nr as TextToolbar,
+  mt as Surface,
+  Ge as Switch,
+  rr as TextAlignButton,
+  Nr as TextElement,
+  nr as TextMoreMenu,
+  sr as TextToolbar,
   wr as ThemeProvider,
-  We as Toggle,
-  kt as ToolbarSkeleton,
-  sr as TransformControlPanel,
+  Ke as Toggle,
+  At as ToolbarSkeleton,
+  ar as TransformControlPanel,
   or as UnderlineButton,
-  ar as UppercaseButton,
-  nt as VisualGuideOverlay,
-  At as ZoomControls,
+  ir as UppercaseButton,
+  st as VisualGuideOverlay,
+  Ft as ZoomControls,
   Te as canvasEventBus,
-  Ft as getAllSections,
-  et as getCustomElementTypes,
-  Pt as getSection,
-  Nt as getSectionIds,
-  Nr as hasDistressEffect,
+  Pt as getAllSections,
+  tt as getCustomElementTypes,
+  Nt as getSection,
+  Bt as getSectionIds,
+  Br as hasDistressEffect,
   Rr as hasMasks,
-  Br as hasStroke,
-  Mr as isArchTransform,
-  Dr as isCircleElementConfig,
-  Ir as isCircleTransform,
-  zr as isCustomElementConfig,
-  Or as isCustomTransform,
-  Lr as isFlagTransform,
-  Hr as isGroupElement,
-  Wr as isGroupElementConfig,
-  Kr as isGroupTransform,
-  Qr as isImageElement,
-  Gr as isImageElementConfig,
-  _r as isImageTransform,
-  Ur as isKnockout,
-  en as isPathElement,
-  jr as isPathElementConfig,
+  Mr as hasStroke,
+  Dr as isArchTransform,
+  Ir as isCircleElementConfig,
+  zr as isCircleTransform,
+  Or as isCustomElementConfig,
+  Lr as isCustomTransform,
+  Wr as isFlagTransform,
+  Qr as isGroupElement,
+  Kr as isGroupElementConfig,
+  Gr as isGroupTransform,
+  en as isImageElement,
+  _r as isImageElementConfig,
+  Ur as isImageTransform,
+  jr as isKnockout,
+  tn as isPathElement,
+  qr as isPathElementConfig,
   Jr as isPathTransform,
-  tt as isRegisteredElementType,
-  tn as isShapeElement,
-  qr as isShapeElementConfig,
-  Zr as isShapeTransform,
-  rn as isTextElement,
-  Vr as isTextElementConfig,
-  Xr as isWaveTransform,
-  Ue as loadKitFromJSON,
+  rt as isRegisteredElementType,
+  rn as isShapeElement,
+  Zr as isShapeElementConfig,
+  Vr as isShapeTransform,
+  nn as isTextElement,
+  Xr as isTextElementConfig,
+  Yr as isWaveTransform,
+  je as loadKitFromJSON,
   on as pieceGuidesForArtboard,
-  mr as preserveSelectionProps,
+  fr as preserveSelectionProps,
   Rt as registerBuiltinSections,
-  Bt as registerBuiltinSectionsSync,
-  He as registerElementType,
-  Mt as registerSection,
-  Dt as renderPieceGuides,
-  _e as serializeKit,
-  fr as shouldPreserveSelection,
-  mt as surfaceVariants,
-  Qe as unregisterElementType,
-  It as unregisterSection,
+  Mt as registerBuiltinSectionsSync,
+  Qe as registerElementType,
+  Dt as registerSection,
+  It as renderPieceGuides,
+  Ue as serializeKit,
+  hr as shouldPreserveSelection,
+  ft as surfaceVariants,
+  et as unregisterElementType,
+  zt as unregisterSection,
   Je as useBreakpoint,
-  rt as useCanvasEvents,
-  zt as useCapabilities,
-  hr as useCommandContext,
-  Ze as useElementById,
-  pr as useElementsContext,
-  xr as useHistoryContext,
-  Ot as useKit,
-  Ve as useLayerDragDrop,
-  ir as useLayerPreview,
-  Xe as useLayerSelection,
-  qe as usePerformance,
-  an as usePieceGuideBundle,
-  je as useProjectLoader,
-  gr as useSelectionContext,
-  ft as useSurface,
-  cr as useTextToolbar,
-  Sr as useTheme,
-  br as useToolStateContext,
-  yr as useViewportContext
+  nt as useCanvasEvents,
+  Ot as useCapabilities,
+  pr as useCommandContext,
+  Ve as useElementById,
+  xr as useElementsContext,
+  gr as useHistoryContext,
+  Lt as useKit,
+  Xe as useLayerDragDrop,
+  cr as useLayerPreview,
+  Ye as useLayerSelection,
+  Ze as usePerformance,
+  cn as usePieceGuideBundle,
+  qe as useProjectLoader,
+  br as useSelectionContext,
+  ht as useSurface,
+  lr as useTextToolbar,
+  Cr as useTheme,
+  yr as useToolStateContext,
+  vr as useViewportContext
 };
 //# sourceMappingURL=advanced.mjs.map