@snowcone-app/canvas 0.13.0 → 0.14.0

package/dist/advanced.mjs

@@ -1,202 +1,198 @@
-import { D as te, I as q, r as re, v as ne, i as oe, e as ae } from "./validation-BpmNOvuY.js";
-import { j as it, k as lt, l as ct, B as dt, m as ut, n as mt, o as ft, p as ht, q as pt, s as xt, t as gt, w as bt, x as yt, y as vt, F as wt, z as St, G as Ct, H as Et, J as Tt, K as $t, L as kt, N as At, O as Ft, Q as Pt, R as Nt, S as Rt, T as Bt, U as Dt, V as Mt, W as It, X as zt, Y as Ot, Z as Lt, _ as Wt, $ as Kt, a0 as _t, a1 as Gt, a2 as Ut, a3 as jt, a4 as Jt, a5 as qt, a6 as Vt, a7 as Xt, a8 as Yt, a9 as Zt, aa as Ht, ab as Qt, ac as er, ad as tr, ae as rr, af as nr } from "./validation-BpmNOvuY.js";
+import { D as te, T as D, i as M, B as re, I as q, j as I, r as ne, v as se, k as ae, l as oe, m as ie, n as ce, e as le } from "./validation-BahKiJWj.js";
+import { o as st, p as at, q as ot, s as it, t as ct, w as lt, x as dt, y as ut, z as mt, F as ft, G as ht, H as pt, J as gt, K as xt, L as bt, N as yt, O as vt, Q as wt, R as St, S as Ct, U as Et, V as Tt, W as $t, X as kt, Y as At, Z as Ft, _ as Pt, $ as Nt, a0 as Rt, a1 as Bt, a2 as Dt, a3 as Mt, a4 as It, a5 as zt, a6 as Ot, a7 as Lt, a8 as Wt, a9 as Kt, aa as _t, ab as Gt, ac as Ut, ad as jt, ae as Jt, af as qt, ag as Vt, ah as Xt, ai as Yt, aj as Zt, ak as Ht, al as Qt, am as er, an as tr, ao as rr, ap as nr } from "./validation-BahKiJWj.js";
 import { u as V } from "./ThemeContext-Cl1JPVLZ.js";
-import { E as ar, P as sr, T as ir, p as lr, s as cr, b as dr, c as ur, d as mr, e as fr, f as hr, g as pr, a as xr } from "./ThemeContext-Cl1JPVLZ.js";
-import { c as se, G as ie, F as le, g as ce, r as de, u as ue } from "./HybridHistoryManager-NL3zyEl4.js";
+import { E as ar, P as or, T as ir, p as cr, s as lr, b as dr, c as ur, d as mr, e as fr, f as hr, g as pr, a as gr } from "./ThemeContext-Cl1JPVLZ.js";
+import { c as de, G as ue, F as me, g as fe, r as he, u as pe } from "./HybridHistoryManager-NL3zyEl4.js";
 import { A as br, B as yr, I as vr, P as wr, R as Sr, S as Cr, T as Er, h as Tr, a as $r, b as kr, i as Ar, d as Fr, e as Pr, f as Nr, j as Rr, k as Br, l as Dr, m as Mr, n as Ir, o as zr, p as Or, q as Lr, s as Wr, t as Kr, v as _r, w as Gr, x as Ur } from "./HybridHistoryManager-NL3zyEl4.js";
-import { I as me } from "./ImportManager-eotl7r5d.js";
+import { I as ge } from "./ImportManager-eotl7r5d.js";
 import { i as Jr, a as qr, b as Vr, c as Xr, d as Yr } from "./ImportManager-eotl7r5d.js";
-import { useState as A, useCallback as y, useEffect as X, useMemo as Y, useRef as B, memo as fe } from "react";
-import { jsxs as b, jsx as s, Fragment as he } from "react/jsx-runtime";
-import { Tooltip as D, TooltipTrigger as M, Button as pe, TooltipContent as I, Popover as xe, PopoverTrigger as ge, PopoverContent as be } from "@snowcone-app/ui";
-import { Surface as Hr, surfaceVariants as Qr, useSurface as en } from "@snowcone-app/ui";
-import "clsx";
-import "tailwind-merge";
+import { useState as A, useCallback as y, useEffect as X, useMemo as Y, useRef as B, memo as xe } from "react";
+import { jsxs as b, jsx as o, Fragment as be } from "react/jsx-runtime";
 import { e as ye, c as ve } from "./compose-DtQL_oit.js";
-import { P as rn, p as nn, u as on } from "./usePieceGuideBundle-Cyl695jv.js";
-const Oe = ({
+import { P as Hr, p as Qr, u as en } from "./usePieceGuideBundle-Cyl695jv.js";
+const Me = ({
   title: e,
   icon: t,
   children: r,
   enableable: a = !1,
   enabled: n = !1,
-  onEnabledChange: o,
+  onEnabledChange: s,
   collapsible: i = !1,
   expanded: m = !0,
-  onExpandChange: c,
+  onExpandChange: l,
   className: f = ""
 }) => {
   const w = a ? n && m : i ? m : !0, h = a && n || i, d = () => {
-    o && o(!n);
-  }, l = () => {
-    c && c(!m);
+    s && s(!n);
+  }, c = () => {
+    l && l(!m);
   };
-  return /* @__PURE__ */ b("div", { className: `rounded-xl border border-border-primary bg-bg-secondary p-xl ${f}`, children: [
-    /* @__PURE__ */ b("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ b("div", { className: "flex items-center gap-md", children: [
-        a && /* @__PURE__ */ s("label", { className: "flex cursor-pointer items-center", children: /* @__PURE__ */ s(
+  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(
           "input",
           {
             type: "checkbox",
             checked: n,
             onChange: d,
-            className: "h-4 w-4 cursor-pointer rounded border-border-primary bg-bg-input accent-accent-primary"
+            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: "flex items-center gap-md", children: [
-          t && /* @__PURE__ */ s("span", { className: "flex items-center text-text-secondary", children: t }),
-          /* @__PURE__ */ s("h3", { className: "text-xl font-semibold text-text-primary", children: e })
+        /* @__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 })
         ] })
       ] }),
-      h && /* @__PURE__ */ s(
+      h && /* @__PURE__ */ o(
         "button",
         {
-          onClick: l,
-          className: "rounded-lg border-none bg-transparent px-md py-xs text-base text-text-muted transition-colors duration-fast hover:text-text-primary",
+          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 ? "▼" : "▶"
         }
       )
     ] }),
-    w && /* @__PURE__ */ s("div", { className: "mt-xl flex flex-col gap-xl", children: r })
+    w && /* @__PURE__ */ o("div", { className: "sc:mt-xl sc:flex sc:flex-col sc:gap-xl", children: r })
   ] });
-}, Le = ({
+}, Ie = ({
   label: e,
   labelSuffix: t,
   children: r,
   inline: a = !1,
   className: n = ""
-}) => /* @__PURE__ */ b("div", { className: `flex ${a ? "items-center justify-between" : "flex-col"} gap-sm ${n}`, children: [
-  /* @__PURE__ */ b("label", { className: "flex items-center justify-between text-base font-medium text-text-secondary", children: [
-    /* @__PURE__ */ s("span", { children: e }),
-    t && /* @__PURE__ */ s("span", { className: "font-semibold text-accent-primary", children: t })
+}) => /* @__PURE__ */ b("div", { className: `sc:flex ${a ? "sc:items-center sc:justify-between" : "sc:flex-col"} sc:gap-sm ${n}`, children: [
+  /* @__PURE__ */ b("label", { className: "sc:flex sc:items-center sc:justify-between sc:text-base sc:font-medium sc:text-text-secondary", children: [
+    /* @__PURE__ */ o("span", { children: e }),
+    t && /* @__PURE__ */ o("span", { className: "sc:font-semibold sc:text-accent-primary", children: t })
   ] }),
-  /* @__PURE__ */ s("div", { className: a ? "flex-shrink-0" : "", children: r })
+  /* @__PURE__ */ o("div", { className: a ? "sc:flex-shrink-0" : "", children: r })
 ] });
-function We({
+function ze({
   options: e,
   value: t,
   onChange: r,
   fullWidth: a = !0,
   className: n = ""
 }) {
-  return /* @__PURE__ */ s("div", { className: `flex gap-sm ${n}`, children: e.map((o) => {
-    const i = o.value === t;
+  return /* @__PURE__ */ o("div", { className: `sc:flex sc:gap-sm ${n}`, children: e.map((s) => {
+    const i = s.value === t;
     return /* @__PURE__ */ b(
       "button",
       {
-        onClick: () => !o.disabled && r(o.value),
-        disabled: o.disabled,
-        title: o.tooltip,
-        className: ` ${a ? "flex-1" : ""} flex items-center justify-center gap-xs rounded-lg border px-md py-sm text-base font-medium transition-all duration-fast ${i ? "border-accent-primary bg-accent-primary text-text-on-accent" : "border-border-primary bg-bg-tertiary text-text-secondary hover:border-border-secondary hover:bg-bg-hover hover:text-text-primary"} ${o.disabled ? "cursor-not-allowed opacity-disabled" : "cursor-pointer"} `,
+        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"} `,
         children: [
-          o.icon && /* @__PURE__ */ s("span", { className: "flex items-center", children: o.icon }),
-          /* @__PURE__ */ s("span", { children: o.label })
+          s.icon && /* @__PURE__ */ o("span", { className: "sc:flex sc:items-center", children: s.icon }),
+          /* @__PURE__ */ o("span", { children: s.label })
         ]
       },
-      String(o.value)
+      String(s.value)
     );
   }) });
 }
-const Ke = ({ label: e, icon: t, checked: r, onChange: a, disabled: n = !1, className: o = "" }) => {
+const Oe = ({ label: e, icon: t, checked: r, onChange: a, disabled: n = !1, className: s = "" }) => {
   const i = (m) => {
     a(m.target.checked);
   };
   return /* @__PURE__ */ b(
     "label",
     {
-      className: `flex cursor-pointer items-center gap-md ${n ? "cursor-not-allowed opacity-disabled" : ""} ${o}`,
+      className: `sc:flex sc:cursor-pointer sc:items-center sc:gap-md ${n ? "sc:cursor-not-allowed sc:opacity-disabled" : ""} ${s}`,
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ o(
           "input",
           {
             type: "checkbox",
             checked: r,
             onChange: i,
             disabled: n,
-            className: "h-4 w-4 cursor-pointer rounded border-border-primary bg-bg-input accent-accent-primary disabled:cursor-not-allowed"
+            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: "flex items-center gap-sm text-base font-medium text-text-primary", children: [
-          t && /* @__PURE__ */ s("span", { className: "flex items-center text-text-secondary", children: t }),
-          /* @__PURE__ */ s("span", { children: e })
+        /* @__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 })
         ] })
       ]
     }
   );
-}, _e = ({
+}, Le = ({
   checked: e,
   onChange: t,
   label: r,
   disabled: a = !1,
   className: n = ""
 }) => {
-  const o = () => {
+  const s = () => {
     a || t(!e);
   };
   return /* @__PURE__ */ b(
     "label",
     {
-      className: `flex items-center gap-md cursor-pointer select-none ${a ? "opacity-50 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__ */ s(
+        /* @__PURE__ */ o(
           "input",
           {
             type: "checkbox",
             checked: e,
-            onChange: o,
+            onChange: s,
             disabled: a,
-            className: "absolute opacity-0 w-0 h-0 peer"
+            className: "sc:absolute sc:opacity-0 sc:w-0 sc:h-0 sc:peer"
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ o(
           "span",
           {
             className: `
-          relative inline-block w-9 h-5 rounded-[999px] transition-colors
-          ${e ? "bg-accent-primary" : "bg-bg-tertiary"}
-          after:content-[''] after:absolute after:top-[2px] after:left-[2px]
-          after:w-4 after:h-4 after:bg-white after:rounded-full
-          after:transition-transform after:shadow-md
-          ${e ? "after:translate-x-4" : ""}
+          sc:relative sc:inline-block sc:w-9 sc:h-5 sc:rounded-[999px] sc:transition-colors
+          ${e ? "sc:bg-accent-primary" : "sc:bg-bg-tertiary"}
+          sc:after:content-[''] sc:after:absolute sc:after:top-[2px] sc:after:left-[2px]
+          sc:after:w-4 sc:after:h-4 sc:after:bg-white sc:after:rounded-full
+          sc:after:transition-transform sc:after:shadow-md
+          ${e ? "sc:after:translate-x-4" : ""}
         `.trim()
           }
         ),
-        r && /* @__PURE__ */ s("span", { className: "text-md text-text-primary font-medium", children: r })
+        r && /* @__PURE__ */ o("span", { className: "sc:text-md sc:text-text-primary sc:font-medium", children: r })
       ]
     }
   );
-}, Ge = ({
+}, We = ({
   isOpen: e,
   onToggle: t,
   trigger: r,
   children: a
-}) => /* @__PURE__ */ s(
+}) => /* @__PURE__ */ o(
   te,
   {
     isOpen: e,
     onToggle: t,
     trigger: r || /* @__PURE__ */ b(D, { delayDuration: 0, children: [
-      /* @__PURE__ */ s(M, { asChild: !0, children: /* @__PURE__ */ s(
-        pe,
+      /* @__PURE__ */ o(M, { asChild: !0, children: /* @__PURE__ */ o(
+        re,
         {
           variant: "ghost",
           size: "toolbar",
-          onClick: (o) => {
-            o.stopPropagation(), t(!e);
+          onClick: (s) => {
+            s.stopPropagation(), t(!e);
           },
-          children: /* @__PURE__ */ s(q, { icon: "lucide:ellipsis-vertical", className: "size-6" })
+          children: /* @__PURE__ */ o(q, { icon: "lucide:ellipsis-vertical", className: "sc:size-6" })
         }
       ) }),
-      /* @__PURE__ */ s(I, { children: /* @__PURE__ */ s("p", { children: "More" }) })
+      /* @__PURE__ */ o(I, { children: /* @__PURE__ */ o("p", { children: "More" }) })
     ] }),
     position: "bottom",
     align: "end",
     offset: 4,
-    children: /* @__PURE__ */ s("div", { className: "flex items-center gap-sm bg-bg-primary border border-border-primary rounded-xl px-xl py-md shadow-sm h-[52px]", children: a })
+    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 Ue(e) {
+function Ke(e) {
   const t = {
     name: e.name,
     capabilities: {
@@ -221,18 +217,18 @@ function Ue(e) {
   };
   return e.content && (t.content = { ...e.content }), t;
 }
-function je(e) {
+function _e(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 = re(e.extends);
+    const n = ne(e.extends);
     r = ye(n, { name: e.name, ...t });
   } else
     r = ve({ name: e.name, ...t });
-  const a = ne(r);
+  const a = se(r);
   if (a.warnings.length > 0)
     for (const n of a.warnings)
       console.warn(`[loadKitFromJSON] Warning: ${n}`);
@@ -244,70 +240,70 @@ ${a.errors.join(`
     );
   return r;
 }
-const L = se("useProjectLoader");
-function Je() {
+const L = de("useProjectLoader");
+function Ge() {
   const {
     handleLoadWorkspace: e
-  } = V(), [t, r] = A(!1), [a, n] = A(null), [o, i] = A(null), [m, c] = A(null), f = y(async (d) => {
+  } = V(), [t, r] = A(!1), [a, n] = A(null), [s, i] = A(null), [m, l] = A(null), f = y(async (d) => {
     r(!0), n(null);
     try {
-      const l = typeof d == "string" ? JSON.parse(d) : d;
-      if (!l.artboards || !Array.isArray(l.artboards))
+      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(l), S = new Blob([x], { type: "application/json" }), C = new File([S], "project.json", { type: "application/json" }), g = await me.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(l);
-      const u = l.artboards.reduce((p, k) => {
+      const g = JSON.stringify(c), S = new Blob([g], { type: "application/json" }), C = new File([S], "project.json", { type: "application/json" }), x = await ge.importFromJSON(C);
+      if (!x.success || !x.artboards || !x.elements)
+        throw new Error(x.error || "Failed to import project");
+      e(x.artboards, x.elements, x.activeArtboardId || null), i(c);
+      const u = c.artboards.reduce((p, k) => {
         var v;
         return p + (((v = k.elements) == null ? void 0 : v.length) || 0);
       }, 0);
-      c({
-        version: l.metadata.version,
-        timestamp: l.metadata.timestamp,
-        artboardCount: l.artboards.length,
+      l({
+        version: c.metadata.version,
+        timestamp: c.metadata.timestamp,
+        artboardCount: c.artboards.length,
         elementCount: u
       });
-    } catch (l) {
-      throw L.error("[useProjectLoader] Failed to load project:", l), n(l), l;
+    } catch (c) {
+      throw L.error("[useProjectLoader] Failed to load project:", c), n(c), c;
     } finally {
       r(!1);
     }
   }, [e]), w = y(async (d) => {
     r(!0), n(null);
     try {
-      const l = await d.text();
-      await f(l);
-    } catch (l) {
-      throw L.error("[useProjectLoader] Failed to load file:", l), n(l), l;
+      const c = await d.text();
+      await f(c);
+    } catch (c) {
+      throw L.error("[useProjectLoader] Failed to load file:", c), n(c), c;
     } finally {
       r(!1);
     }
   }, [f]), h = y(async (d) => {
     r(!0), n(null);
     try {
-      const l = {
+      const c = {
         metadata: {
           version: "2.0.0",
           timestamp: (/* @__PURE__ */ new Date()).toISOString(),
           appVersion: "1.0.0"
         },
-        artboards: d.artboards.map((x, S) => ({
+        artboards: d.artboards.map((g, S) => ({
           id: `artboard-${Date.now()}-${S}`,
-          name: x.name,
+          name: g.name,
           x: 0,
           y: 0,
-          width: x.width,
-          height: x.height,
-          backgroundColor: x.backgroundColor,
-          elements: x.elements || []
+          width: g.width,
+          height: g.height,
+          backgroundColor: g.backgroundColor,
+          elements: g.elements || []
         })),
         activeArtboardId: null
         // First artboard will be active by default
       };
-      await f(l);
-    } catch (l) {
-      throw L.error("[useProjectLoader] Failed to load template:", l), n(l), l;
+      await f(c);
+    } catch (c) {
+      throw L.error("[useProjectLoader] Failed to load template:", c), n(c), c;
     } finally {
       r(!1);
     }
@@ -318,7 +314,7 @@ function Je() {
     loadTemplate: h,
     isLoading: t,
     loadError: a,
-    currentProject: o,
+    currentProject: s,
     projectMetadata: m
   };
 }
@@ -333,37 +329,37 @@ const U = {
 function we(e, t) {
   return e >= t.xxl ? "xxl" : e >= t.xl ? "xl" : e >= t.lg ? "lg" : e >= t.md ? "md" : e >= t.sm ? "sm" : "xs";
 }
-function qe(e) {
+function Ue(e) {
   const t = {
     ...U,
     ...e
   }, [r, a] = A(() => typeof window < "u" ? window.innerWidth : U.lg);
   X(() => {
     if (typeof window > "u") return;
-    const x = () => {
+    const g = () => {
       a(window.innerWidth);
     };
-    return window.addEventListener("resize", x), () => window.removeEventListener("resize", x);
+    return window.addEventListener("resize", g), () => window.removeEventListener("resize", g);
   }, []);
   const n = Y(
     () => we(r, t),
     [r, t]
-  ), o = n === "xs", i = n === "sm", m = n === "md", c = n === "lg", f = n === "xl", w = n === "xxl", h = ["xs", "sm", "md", "lg", "xl", "xxl"];
+  ), 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"];
   return {
     breakpoint: n,
     width: r,
-    isXs: o,
+    isXs: s,
     isSm: i,
     isMd: m,
-    isLg: c,
+    isLg: l,
     isXl: f,
     isXxl: w,
-    isAtLeast: (x) => {
-      const S = h.indexOf(n), C = h.indexOf(x);
+    isAtLeast: (g) => {
+      const S = h.indexOf(n), C = h.indexOf(g);
       return S >= C;
     },
-    isAtMost: (x) => {
-      const S = h.indexOf(n), C = h.indexOf(x);
+    isAtMost: (g) => {
+      const S = h.indexOf(n), C = h.indexOf(g);
       return S <= C;
     }
   };
@@ -377,12 +373,12 @@ const j = {
   exportCount: 0,
   avgExportTime: 0
 };
-function Ve() {
-  const [e, t] = A(j), [r, a] = A(!1), n = B([]), o = B([]), i = B([]), m = B(performance.now()), c = B(null), f = y((u) => u.length === 0 ? 0 : 1e3 / (u.reduce((k, v) => k + v, 0) / u.length), []), w = y((u) => u.length === 0 ? 0 : u.reduce((p, k) => p + k, 0) / u.length, []), h = y(() => "memory" in performance && performance.memory ? performance.memory.usedJSHeapSize / (1024 * 1024) : 0, []), d = y(() => {
+function je() {
+  const [e, t] = A(j), [r, a] = A(!1), n = 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(o.current),
-      peakRenderTime: Math.max(...o.current, 0),
+      avgRenderTime: w(s.current),
+      peakRenderTime: Math.max(...s.current, 0),
       memoryUsage: h(),
       elementCount: 0,
       // Would need to be updated by editor context
@@ -390,16 +386,16 @@ function Ve() {
       avgExportTime: w(i.current)
     };
     t(u);
-  }, [f, w, h]), l = y(() => {
+  }, [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 && (c.current = requestAnimationFrame(l));
-  }, [r, d]), x = y(() => {
-    a(!0), m.current = performance.now(), c.current = requestAnimationFrame(l);
-  }, [l]), S = y(() => {
-    a(!1), c.current !== null && (cancelAnimationFrame(c.current), c.current = null);
+    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]), g = y(() => {
+    a(!0), m.current = performance.now(), l.current = requestAnimationFrame(c);
+  }, [c]), S = y(() => {
+    a(!1), l.current !== null && (cancelAnimationFrame(l.current), l.current = null);
   }, []), C = y(() => {
-    n.current = [], o.current = [], i.current = [], t(j);
-  }, []), g = y(() => `
+    n.current = [], s.current = [], i.current = [], t(j);
+  }, []), x = y(() => `
 Performance Report
 ==================
 FPS: ${e.fps.toFixed(1)}
@@ -411,45 +407,45 @@ Export Count: ${e.exportCount}
 Avg Export Time: ${e.avgExportTime.toFixed(2)}ms
     `.trim(), [e]);
   return X(() => () => {
-    c.current !== null && cancelAnimationFrame(c.current);
+    l.current !== null && cancelAnimationFrame(l.current);
   }, []), {
     metrics: e,
-    startProfiling: x,
+    startProfiling: g,
     stopProfiling: S,
     clearMetrics: C,
-    getReport: g,
+    getReport: x,
     isProfiling: r
   };
 }
-function Xe(e) {
+function Je(e) {
   const { getElementById: t } = V();
   return e ? t(e) ?? null : null;
 }
-function Ye(e) {
+function qe(e) {
   const {
     onReorder: t,
     onGroupReorder: r,
     onDropIntoGroup: a,
     onDropIntoGroupAtPosition: n,
-    findElement: o,
+    findElement: s,
     findParentGroup: i
-  } = e, [m, c] = A(null), [f, w] = A(null), [h, d] = A(null), l = y((g, u) => {
-    g.dataTransfer.effectAllowed = "move", requestAnimationFrame(() => {
-      c(u);
+  } = e, [m, l] = A(null), [f, w] = A(null), [h, d] = A(null), c = y((x, u) => {
+    x.dataTransfer.effectAllowed = "move", requestAnimationFrame(() => {
+      l(u);
     });
-  }, []), x = y(
-    (g, u) => {
-      g.preventDefault(), g.dataTransfer.dropEffect = "move";
-      const p = g.currentTarget.getBoundingClientRect(), v = g.clientY - p.top, F = p.height, z = (o == null ? void 0 : o(u)) instanceof ie;
+  }, []), g = y(
+    (x, u) => {
+      x.preventDefault(), x.dataTransfer.dropEffect = "move";
+      const p = x.currentTarget.getBoundingClientRect(), v = x.clientY - p.top, F = p.height, z = (s == null ? void 0 : s(u)) instanceof ue;
       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($);
     },
-    [o]
+    [s]
   ), S = y(() => {
-    c(null), w(null), d(null);
+    l(null), w(null), d(null);
   }, []), C = y(
-    (g, u) => {
-      if (g.preventDefault(), !m || m === u || !h) {
+    (x, u) => {
+      if (x.preventDefault(), !m || m === u || !h) {
         S();
         return;
       }
@@ -477,50 +473,50 @@ function Ye(e) {
     dragOverId: f,
     dropPosition: h,
     handlers: {
-      onDragStart: l,
-      onDragOver: x,
+      onDragStart: c,
+      onDragOver: g,
       onDrop: C,
       onDragEnd: S
     }
   };
 }
-function Ze(e) {
-  const { selectedId: t, multiSelection: r, onSelectionChange: a, onMultiSelectionChange: n } = e, o = y(
+function Ve(e) {
+  const { selectedId: t, multiSelection: r, onSelectionChange: a, onMultiSelectionChange: n } = e, s = y(
     (m) => m === t || r.includes(m),
     [t, r]
   ), i = y(
-    (m, c) => {
+    (m, l) => {
       if (m.shiftKey) {
-        const f = r.includes(c), w = t === c;
+        const f = r.includes(l), w = t === l;
         if (r.length > 0)
           if (f) {
-            const h = r.filter((d) => d !== c);
+            const h = r.filter((d) => d !== l);
             h.length === 1 ? (n([]), a(h[0])) : h.length === 0 ? (n([]), a(null)) : n(h);
           } else
-            n([...r, c]);
+            n([...r, l]);
         else {
           if (w)
             return;
-          t !== null ? (n([t, c]), a(null)) : a(c);
+          t !== null ? (n([t, l]), a(null)) : a(l);
         }
       } else
-        a(c), n([]);
+        a(l), n([]);
     },
     [t, r, a, n]
   );
-  return { isSelected: o, handleClick: i };
+  return { isSelected: s, handleClick: i };
 }
-const Se = fe(({ value: e, onChange: t, fontSizes: r, isOpen: a, onToggle: n }) => {
-  const o = (i) => {
+const Se = xe(({ value: e, onChange: t, fontSizes: r, isOpen: a, onToggle: n }) => {
+  const s = (i) => {
     t(i), n(!1);
   };
-  return /* @__PURE__ */ b(xe, { open: a, onOpenChange: n, children: [
-    /* @__PURE__ */ s(ge, { asChild: !0, children: /* @__PURE__ */ s("button", { className: "toolbar-btn", "aria-label": "Font size", children: /* @__PURE__ */ s(q, { icon: "radix-icons:font-size", className: "size-5" }) }) }),
-    /* @__PURE__ */ s(be, { className: "w-[120px] max-h-[300px] overflow-y-auto p-1", maxZIndex: !0, children: /* @__PURE__ */ s("div", { className: "flex flex-col gap-0.5", children: r.map((i) => /* @__PURE__ */ s(
+  return /* @__PURE__ */ b(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(q, { 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: () => o(i),
-        className: `w-full rounded-md px-3 py-1.5 text-center text-sm transition-colors hover:bg-muted ${e === i ? "bg-muted font-medium" : ""}`,
+        onClick: () => s(i),
+        className: `sc:w-full sc:rounded-md sc:px-3 sc:py-1.5 sc:text-center sc:text-sm sc:transition-colors sc:hover:bg-muted ${e === i ? "sc:bg-muted sc:font-medium" : ""}`,
         children: i
       },
       i
@@ -528,46 +524,46 @@ const Se = fe(({ value: e, onChange: t, fontSizes: r, isOpen: a, onToggle: n })
   ] });
 });
 Se.displayName = "FontSizeDropdown";
-function He({ toolbar: e }) {
-  const { fontSize: t, handleFontSizeIncrement: r, handleFontSizeChange: a } = e, [n, o] = A(!1);
-  return /* @__PURE__ */ b("div", { className: "toolbar-group", children: [
+function Xe({ toolbar: e }) {
+  const { fontSize: t, handleFontSizeIncrement: r, handleFontSizeChange: a } = e, [n, s] = A(!1);
+  return /* @__PURE__ */ b("div", { className: "sc-toolbar-group", children: [
     /* @__PURE__ */ b(D, { delayDuration: 300, children: [
-      /* @__PURE__ */ s(M, { asChild: !0, children: /* @__PURE__ */ s("button", { className: "toolbar-btn-sm", onClick: () => r(-1), children: "-" }) }),
-      /* @__PURE__ */ s(I, { children: "Decrease Font Size" })
+      /* @__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(D, { delayDuration: 300, children: [
-      /* @__PURE__ */ s(M, { asChild: !0, children: /* @__PURE__ */ b("div", { style: { position: "relative" }, children: [
-        /* @__PURE__ */ s(
+      /* @__PURE__ */ o(M, { asChild: !0, children: /* @__PURE__ */ b("div", { style: { position: "relative" }, children: [
+        /* @__PURE__ */ o(
           "button",
           {
-            className: "toolbar-font-size-display",
+            className: "sc-toolbar-font-size-display",
             onClick: () => {
-              oe.protectNextClick(), o(!n);
+              ce.protectNextClick(), s(!n);
             },
             children: t
           }
         ),
-        n && /* @__PURE__ */ s(
+        n && /* @__PURE__ */ o(
           "div",
           {
             className: "font-dropdown",
             ref: (i) => {
               if (i) {
-                const m = (c) => {
-                  const f = c.target;
-                  !i.contains(f) && !f.closest(".toolbar-font-size-display") && o(!1);
+                const m = (l) => {
+                  const f = l.target;
+                  !i.contains(f) && !f.closest(".sc-toolbar-font-size-display") && s(!1);
                 };
                 setTimeout(() => {
                   document.addEventListener("mousedown", m);
                 }, 0);
               }
             },
-            children: le.map((i) => /* @__PURE__ */ s(
+            children: me.map((i) => /* @__PURE__ */ o(
               "button",
               {
                 className: `font-dropdown-option ${t === i ? "selected" : ""}`,
                 onClick: () => {
-                  a(i), o(!1);
+                  a(i), s(!1);
                 },
                 children: i
               },
@@ -576,16 +572,16 @@ function He({ toolbar: e }) {
           }
         )
       ] }) }),
-      /* @__PURE__ */ s(I, { children: "Font Size" })
+      /* @__PURE__ */ o(I, { children: "Font Size" })
     ] }),
     /* @__PURE__ */ b(D, { delayDuration: 300, children: [
-      /* @__PURE__ */ s(M, { asChild: !0, children: /* @__PURE__ */ s("button", { className: "toolbar-btn-sm", onClick: () => r(1), children: "+" }) }),
-      /* @__PURE__ */ s(I, { children: "Increase Font Size" })
+      /* @__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" })
     ] })
   ] });
 }
 const _ = /* @__PURE__ */ new Map();
-function Qe(e) {
+function Ye(e) {
   if (!e.type || typeof e.type != "string")
     throw new Error('ElementTypeRegistration requires a non-empty "type" string');
   if (typeof e.Component != "function")
@@ -596,20 +592,20 @@ function Qe(e) {
     throw new Error(
       `ElementTypeRegistration for "${e.type}" requires a non-empty "label" string`
     );
-  de(e.type, {
+  he(e.type, {
     id: e.type,
     label: e.label,
     Component: e.Component
   }), _.set(e.type, { ...e });
 }
-function et(e) {
-  ue(e), _.delete(e);
+function Ze(e) {
+  pe(e), _.delete(e);
 }
-function tt() {
+function He() {
   return Array.from(_.values());
 }
-function rt(e) {
-  return ce(e) !== void 0;
+function Qe(e) {
+  return fe(e) !== void 0;
 }
 class Ce {
   constructor() {
@@ -643,8 +639,8 @@ class Ce {
    * @returns An unsubscribe function
    */
   once(t, r) {
-    const a = (o) => {
-      n(), r(o);
+    const a = (s) => {
+      n(), r(s);
     }, n = this.on(t, a);
     return n;
   }
@@ -666,10 +662,10 @@ class Ce {
       for (const n of [...a])
         try {
           n(r);
-        } catch (o) {
+        } catch (s) {
           console.error(
             `[CanvasEventBus] Error in handler for "${String(t)}":`,
-            o
+            s
           );
         }
   }
@@ -702,7 +698,7 @@ class Ce {
   }
 }
 const Ee = new Ce();
-function nt() {
+function et() {
   return Ee;
 }
 const W = {
@@ -772,7 +768,7 @@ const W = {
   br: { textAnchor: "end", dominantBaseline: "alphabetic" }
 };
 function K(e, t) {
-  return e.kind === "rect" ? /* @__PURE__ */ s(
+  return e.kind === "rect" ? /* @__PURE__ */ o(
     "rect",
     {
       x: e.x,
@@ -781,7 +777,7 @@ function K(e, t) {
       height: e.height,
       ...t
     }
-  ) : e.kind === "roundedRect" ? /* @__PURE__ */ s(
+  ) : e.kind === "roundedRect" ? /* @__PURE__ */ o(
     "rect",
     {
       x: e.x,
@@ -792,7 +788,7 @@ function K(e, t) {
       ry: e.ry,
       ...t
     }
-  ) : /* @__PURE__ */ s(
+  ) : /* @__PURE__ */ o(
     "path",
     {
       d: e.d,
@@ -816,14 +812,14 @@ 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: o, height: i } = e;
+    const { x: a, y: n, width: s, height: i } = e;
     return [
       `M ${a + t} ${n}`,
-      `h ${o - 2 * t}`,
+      `h ${s - 2 * t}`,
       `a ${t} ${r} 0 0 1 ${t} ${r}`,
       `v ${i - 2 * r}`,
       `a ${t} ${r} 0 0 1 ${-t} ${r}`,
-      `h ${-(o - 2 * t)}`,
+      `h ${-(s - 2 * t)}`,
       `a ${t} ${r} 0 0 1 ${-t} ${-r}`,
       `v ${-(i - 2 * r)}`,
       `a ${t} ${r} 0 0 1 ${t} ${-r}`,
@@ -846,35 +842,35 @@ function ke(e, t, r, a) {
   }
   return null;
 }
-function ot({
+function tt({
   artboardWidth: e,
   artboardHeight: t,
   canvasPadding: r = 0,
   pieces: a,
   pieceGuides: n,
-  show: o,
+  show: s,
   style: i,
   className: m
 }) {
-  const c = Y(() => {
+  const l = Y(() => {
     const d = Math.max(
       16,
       Math.round(Math.min(e, t) * 0.03)
-    ), l = {
+    ), c = {
       ...W,
       ...i ?? {},
       zoneFill: { ...W.zoneFill, ...(i == null ? void 0 : i.zoneFill) ?? {} },
       zoneStroke: { ...W.zoneStroke, ...(i == null ? void 0 : i.zoneStroke) ?? {} }
     };
-    return (i == null ? void 0 : i.labelFontSize) === void 0 && (l.labelFontSize = d), l;
+    return (i == null ? void 0 : i.labelFontSize) === void 0 && (c.labelFontSize = d), c;
   }, [i, e, t]), f = {
-    bleed: (o == null ? void 0 : o.bleed) ?? !0,
-    zones: (o == null ? void 0 : o.zones) ?? !0,
-    boundary: (o == null ? void 0 : o.boundary) ?? !0,
-    safeArea: (o == null ? void 0 : o.safeArea) ?? !0,
-    labels: (o == null ? void 0 : o.labels) ?? !0
+    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__ */ s(
+  return /* @__PURE__ */ o(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -882,11 +878,11 @@ function ot({
       preserveAspectRatio: "xMidYMid meet",
       className: m,
       style: { pointerEvents: "none", width: "100%", height: "100%" },
-      children: /* @__PURE__ */ s("g", { transform: `translate(${r} ${r})`, children: a.map((d) => {
-        const l = n == null ? void 0 : n[d.id], x = (l == null ? void 0 : l.zones) ?? [], S = (l == null ? void 0 : l.labels) ?? [], C = d.rotation ?? 0, g = C === 90 || C === 270, u = g ? d.height : d.width, p = g ? d.width : d.height, k = $e(l, u, p), v = ke(l, d, u, p), F = `translate(${d.x} ${d.y})`;
+      children: /* @__PURE__ */ o("g", { transform: `translate(${r} ${r})`, children: a.map((d) => {
+        const c = n == null ? void 0 : n[d.id], g = (c == null ? void 0 : c.zones) ?? [], S = (c == null ? void 0 : c.labels) ?? [], C = d.rotation ?? 0, x = C === 90 || C === 270, u = x ? d.height : d.width, p = x ? 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, $ = c.safeAreaWashCornerRadius < 0 ? Math.round(Math.min(u, p) * 0.02) : c.safeAreaWashCornerRadius, P = l != null && l.boundary && (l.boundary.kind === "rect" || l.boundary.kind === "roundedRect") ? l.boundary : null, O = P ? P.kind === "rect" && $ > 0 ? {
+        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 ? {
           kind: "roundedRect",
           x: P.x,
           y: P.y,
@@ -916,9 +912,9 @@ function ot({
           height: p
         }, H = O.kind === "rect" || O.kind === "roundedRect";
         return /* @__PURE__ */ b("g", { transform: z, children: [
-          f.safeArea && H && /* @__PURE__ */ b(he, { children: [
+          f.safeArea && H && /* @__PURE__ */ b(be, { children: [
             /* @__PURE__ */ b("defs", { children: [
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ o(
                 "filter",
                 {
                   id: G,
@@ -926,7 +922,7 @@ function ot({
                   y: "-20%",
                   width: "140%",
                   height: "140%",
-                  children: /* @__PURE__ */ s(
+                  children: /* @__PURE__ */ o(
                     "feGaussianBlur",
                     {
                       in: "SourceGraphic",
@@ -947,7 +943,7 @@ function ot({
                   )
                 }
               ),
-              /* @__PURE__ */ s("clipPath", { id: `piece-clip-${d.id}`, children: /* @__PURE__ */ s(
+              /* @__PURE__ */ o("clipPath", { id: `piece-clip-${d.id}`, children: /* @__PURE__ */ o(
                 "rect",
                 {
                   x: 0,
@@ -957,12 +953,12 @@ function ot({
                 }
               ) })
             ] }),
-            /* @__PURE__ */ s(
+            /* @__PURE__ */ o(
               "g",
               {
                 clipPath: `url(#piece-clip-${d.id})`,
                 filter: `url(#${G})`,
-                children: /* @__PURE__ */ s(
+                children: /* @__PURE__ */ o(
                   "path",
                   {
                     d: `${J(Z)} ${J(O)}`,
@@ -971,35 +967,35 @@ function ot({
                       // overrides — previously hardcoded, which silently
                       // dropped ADR-0054 Phase 5 `pieceGuidesStyle` edits
                       // in the Loom authoring preview.
-                      fill: c.bleedFill || "var(--color-bg-tertiary, #333)"
+                      fill: l.bleedFill || "var(--color-bg-tertiary, #333)"
                     },
-                    fillOpacity: c.bleedOpacity ?? 0.55,
+                    fillOpacity: l.bleedOpacity ?? 0.55,
                     fillRule: "evenodd"
                   }
                 )
               }
             )
           ] }),
-          f.zones && x.filter((E) => E.kind !== "dieCut").map((E, R) => /* @__PURE__ */ s("g", { children: K(E.path, {
-            fill: c.zoneFill[E.kind],
-            stroke: c.zoneStroke[E.kind],
+          f.zones && g.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],
             strokeWidth: 1.5,
             strokeDasharray: E.kind === "wrap" ? "4 3" : void 0,
             vectorEffect: "non-scaling-stroke"
           }) }, `zone-${R}`)),
-          f.zones && x.filter((E) => E.kind === "dieCut").map((E, R) => {
+          f.zones && g.filter((E) => E.kind === "dieCut").map((E, R) => {
             const T = E.path;
             if (T.kind !== "rect" && T.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__ */ s(
+            return /* @__PURE__ */ o(
               "foreignObject",
               {
                 x: T.x,
                 y: T.y,
                 width: T.width,
                 height: T.height,
-                children: /* @__PURE__ */ s(
+                children: /* @__PURE__ */ o(
                   "div",
                   {
                     xmlns: "http://www.w3.org/1999/xhtml",
@@ -1024,34 +1020,34 @@ function ot({
               `diecut-${R}`
             );
           }),
-          f.boundary && c.boundaryStroke && K(k, {
+          f.boundary && l.boundaryStroke && K(k, {
             fill: "none",
-            stroke: c.boundaryStroke,
-            strokeWidth: c.boundaryStrokeWidth,
+            stroke: l.boundaryStroke,
+            strokeWidth: l.boundaryStrokeWidth,
             vectorEffect: "non-scaling-stroke"
           }),
-          f.safeArea && v && c.safeAreaStroke && K(v, {
+          f.safeArea && v && l.safeAreaStroke && K(v, {
             fill: "none",
-            stroke: c.safeAreaStroke,
-            strokeWidth: c.safeAreaStrokeWidth,
-            strokeDasharray: c.safeAreaDashArray,
+            stroke: l.safeAreaStroke,
+            strokeWidth: l.safeAreaStrokeWidth,
+            strokeDasharray: l.safeAreaDashArray,
             vectorEffect: "non-scaling-stroke"
           }),
           f.labels && S.map((E, R) => {
             const T = Te[E.anchor ?? "c"];
-            return /* @__PURE__ */ s(
+            return /* @__PURE__ */ o(
               "text",
               {
                 x: E.x,
                 y: E.y,
                 textAnchor: T.textAnchor,
                 dominantBaseline: T.dominantBaseline,
-                fontSize: c.labelFontSize,
-                fontFamily: c.labelFontFamily,
-                fill: c.labelColor,
+                fontSize: l.labelFontSize,
+                fontFamily: l.labelFontFamily,
+                fill: l.labelColor,
                 style: { paintOrder: "stroke" },
                 stroke: "#ffffff",
-                strokeWidth: Math.max(2, c.labelFontSize * 0.25),
+                strokeWidth: Math.max(2, l.labelFontSize * 0.25),
                 strokeLinejoin: "round",
                 children: E.text
               },
@@ -1063,76 +1059,76 @@ function ot({
     }
   );
 }
-ae();
+le();
 export {
   br as ArtboardElement,
-  it as ArtboardPropertiesToolbar,
-  lt as ArtboardTabs,
-  ct as AutoExportManager,
-  dt as BackgroundPickerDropdown,
+  st as ArtboardPropertiesToolbar,
+  at as ArtboardTabs,
+  ot as AutoExportManager,
+  it as BackgroundPickerDropdown,
   yr as BaseElement,
-  ut as BoldButton,
-  We as ButtonGroup,
-  mt as Canvas,
+  ct as BoldButton,
+  ze as ButtonGroup,
+  lt as Canvas,
   Ce as CanvasEventBus,
-  ft as CanvasSkeleton,
-  ht as ColorPickerDropdown,
-  pt as ContextualToolbars,
-  Le as ControlGroup,
-  xt as CropPanel,
-  gt as DEFAULT_AUTO_EXPORT_CONFIG,
+  dt as CanvasSkeleton,
+  ut as ColorPickerDropdown,
+  mt as ContextualToolbars,
+  Ie as ControlGroup,
+  ft as CropPanel,
+  ht as DEFAULT_AUTO_EXPORT_CONFIG,
   te as Dropdown,
-  bt as DropdownMenu,
+  pt as DropdownMenu,
   ar as EditorProvider,
-  yt as EffectsPanel,
-  vt as ExportPanel,
-  wt as FontBrowserDrawer,
-  St as FontColorButton,
+  gt as EffectsPanel,
+  xt as ExportPanel,
+  bt as FontBrowserDrawer,
+  yt as FontColorButton,
   Se as FontSizeDropdown,
-  He as FontSizeGroup,
-  Ct as GlyphPanel,
-  ie as GroupElement,
+  Xe as FontSizeGroup,
+  vt as GlyphPanel,
+  ue as GroupElement,
   vr as ImageElement,
-  Et as ImagePanel,
-  Tt as ImageToolbar,
-  $t as ItalicButton,
-  kt as KIT_PRESETS,
-  At as KitProvider,
-  Ft as LayersPanel,
-  Pt as LayersPanelSkeleton,
-  Nt as MenuButton,
-  Rt as MenuItem,
-  Bt as MoreMenu,
-  rn as PIECE_GUIDES_API_BASE,
-  sr as PRESERVE_SELECTION_ATTR,
-  Oe as Panel,
+  wt as ImagePanel,
+  St as ImageToolbar,
+  Ct as ItalicButton,
+  Et as KIT_PRESETS,
+  Tt as KitProvider,
+  $t as LayersPanel,
+  kt as LayersPanelSkeleton,
+  At as MenuButton,
+  Ft as MenuItem,
+  Pt as MoreMenu,
+  Hr as PIECE_GUIDES_API_BASE,
+  or as PRESERVE_SELECTION_ATTR,
+  Me as Panel,
   wr as PathElement,
-  Dt as PathToolbar,
+  Nt as PathToolbar,
   Sr as RichText,
-  Ge as SecondaryToolbar,
+  We as SecondaryToolbar,
   Cr as ShapeElement,
-  Mt as ShapeToolbar,
-  It as ShapeTypeDrawer,
-  zt as Spinner,
-  Hr as Surface,
-  _e as Switch,
-  Ot as TextAlignButton,
+  Rt as ShapeToolbar,
+  Bt as ShapeTypeDrawer,
+  Dt as Spinner,
+  Mt as Surface,
+  Le as Switch,
+  It as TextAlignButton,
   Er as TextElement,
-  Lt as TextMoreMenu,
-  Wt as TextToolbar,
+  zt as TextMoreMenu,
+  Ot as TextToolbar,
   ir as ThemeProvider,
-  Ke as Toggle,
-  Kt as ToolbarSkeleton,
-  _t as TransformControlPanel,
-  Gt as UnderlineButton,
-  Ut as UppercaseButton,
-  ot as VisualGuideOverlay,
-  jt as ZoomControls,
+  Oe as Toggle,
+  Lt as ToolbarSkeleton,
+  Wt as TransformControlPanel,
+  Kt as UnderlineButton,
+  _t as UppercaseButton,
+  tt as VisualGuideOverlay,
+  Gt as ZoomControls,
   Ee as canvasEventBus,
-  Jt as getAllSections,
-  tt as getCustomElementTypes,
-  qt as getSection,
-  Vt as getSectionIds,
+  Ut as getAllSections,
+  He as getCustomElementTypes,
+  jt as getSection,
+  Jt as getSectionIds,
   Tr as hasDistressEffect,
   $r as hasMasks,
   kr as hasStroke,
@@ -1152,45 +1148,45 @@ export {
   Vr as isPathElement,
   Lr as isPathElementConfig,
   Wr as isPathTransform,
-  rt as isRegisteredElementType,
+  Qe as isRegisteredElementType,
   Xr as isShapeElement,
   Kr as isShapeElementConfig,
   _r as isShapeTransform,
   Yr as isTextElement,
   Gr as isTextElementConfig,
   Ur as isWaveTransform,
-  je as loadKitFromJSON,
-  nn as pieceGuidesForArtboard,
-  lr as preserveSelectionProps,
-  Xt as registerBuiltinSections,
-  Yt as registerBuiltinSectionsSync,
-  Qe as registerElementType,
-  Zt as registerSection,
-  Ht as renderPieceGuides,
-  Ue as serializeKit,
-  cr as shouldPreserveSelection,
-  Qr as surfaceVariants,
-  et as unregisterElementType,
-  Qt as unregisterSection,
-  qe as useBreakpoint,
-  nt as useCanvasEvents,
-  er as useCapabilities,
+  _e as loadKitFromJSON,
+  Qr as pieceGuidesForArtboard,
+  cr as preserveSelectionProps,
+  qt as registerBuiltinSections,
+  Vt as registerBuiltinSectionsSync,
+  Ye as registerElementType,
+  Xt as registerSection,
+  Yt as renderPieceGuides,
+  Ke as serializeKit,
+  lr as shouldPreserveSelection,
+  Zt as surfaceVariants,
+  Ze as unregisterElementType,
+  Ht as unregisterSection,
+  Ue as useBreakpoint,
+  et as useCanvasEvents,
+  Qt as useCapabilities,
   dr as useCommandContext,
-  Xe as useElementById,
+  Je as useElementById,
   ur as useElementsContext,
   mr as useHistoryContext,
-  tr as useKit,
-  Ye as useLayerDragDrop,
-  rr as useLayerPreview,
-  Ze as useLayerSelection,
-  Ve as usePerformance,
-  on as usePieceGuideBundle,
-  Je as useProjectLoader,
+  er as useKit,
+  qe as useLayerDragDrop,
+  tr as useLayerPreview,
+  Ve as useLayerSelection,
+  je as usePerformance,
+  en as usePieceGuideBundle,
+  Ge as useProjectLoader,
   fr as useSelectionContext,
-  en as useSurface,
+  rr as useSurface,
   nr as useTextToolbar,
   hr as useTheme,
   pr as useToolStateContext,
-  xr as useViewportContext
+  gr as useViewportContext
 };
 //# sourceMappingURL=advanced.mjs.map