@snowcone-app/canvas 0.33.0 → 0.34.0

package/dist/{design-builder-BpbYUYtK.js → design-builder-D4izkvlb.js}

@@ -1,6 +1,6 @@
 import { jsx as k } from "react/jsx-runtime";
 import { useContext as Y, useSyncExternalStore as pe, useCallback as m, createContext as Q, useRef as pt, useState as b, useEffect as Dt, useMemo as q } from "react";
-import { a0 as Ae, E as ot, U as ye, aq as ge, G as jt, ar as xe, as as be, at as we, au as Ee, av as Se, c as Zt, C as Re, aw as Ce, ax as Ie, ay as Te, W as Oe, _ as Wt, I as ve, g as Fe, S as Pe, az as Ne, aA as Mt, y as ze, D as He, M as ke } from "./FontAnalyzer-BrKY6XYn.js";
+import { a0 as Ae, E as ot, U as ye, aq as ge, G as jt, ar as xe, as as be, at as we, au as Ee, av as Se, c as Zt, C as Re, aw as Ce, ax as Ie, ay as Te, W as Oe, _ as Wt, I as Fe, g as ve, S as Pe, az as Ne, aA as Mt, y as ze, D as He, M as ke } from "./FontAnalyzer-BrKY6XYn.js";
 const Jt = Q(null), Ue = () => () => {
 }, Yt = () => 0;
 function go() {
@@ -18,11 +18,11 @@ function go() {
 }
 const gt = Zt("useCommandHistory");
 function Ve(e, t, o, n) {
-  const i = pt(new Ae(o)), s = Y(Jt), c = m(
+  const s = pt(new Ae(o)), i = Y(Jt), c = m(
     (l, f) => {
       const g = l == null ? void 0 : l.name;
-      if (!s || !g) return;
-      const y = s.getBoundLayer(g);
+      if (!i || !g) return;
+      const y = i.getBoundLayer(g);
       if (y)
         throw new ot(
           "E_BOUND_LAYER_MUTATION",
@@ -30,7 +30,7 @@ function Ve(e, t, o, n) {
           { layer: g, part: y.part, operation: f, docSlug: "embed-mode" }
         );
     },
-    [s]
+    [i]
   ), [r, d] = b({
     canUndo: !1,
     canRedo: !1,
@@ -38,7 +38,7 @@ function Ve(e, t, o, n) {
     canUndoActiveArtboard: !1,
     canRedoActiveArtboard: !1
   }), a = m(() => {
-    const l = i.current, f = o.getActiveArtboardId();
+    const l = s.current, f = o.getActiveArtboardId();
     d({
       canUndo: l.canUndo(),
       canRedo: l.canRedo(),
@@ -58,15 +58,15 @@ function Ve(e, t, o, n) {
         }
       ), y = o.getArtboardIdForElement(f.id);
       if (y)
-        i.current.executeOnArtboard(y, g);
+        s.current.executeOnArtboard(y, g);
       else {
         const C = o.getActiveArtboardId();
-        C && i.current.executeOnArtboard(C, g);
+        C && s.current.executeOnArtboard(C, g);
       }
       a();
     },
     [t, o, a, c]
-  ), F = m(
+  ), v = m(
     (l, f, g, y) => {
       const C = f || o.getActiveArtboardId();
       if (!C) {
@@ -111,7 +111,7 @@ function Ve(e, t, o, n) {
           t((U) => U.filter((N) => N.id !== P)), o.removeElementFromArtboard(P);
         }
       );
-      i.current.executeOnArtboard(C, $), a();
+      s.current.executeOnArtboard(C, $), a();
     },
     [t, o, a]
   ), V = m(
@@ -131,25 +131,25 @@ function Ve(e, t, o, n) {
           t((C) => C.filter(($) => $.id !== y)), o.removeElementFromArtboard(y);
         }
       );
-      i.current.executeOnArtboard(f, g), a();
+      s.current.executeOnArtboard(f, g), a();
     },
     [t, o, a, c]
   ), E = m(
     (l) => {
       const f = new be(l, o);
-      i.current.executeGlobal(f), a(), n == null || n();
+      s.current.executeGlobal(f), a(), n == null || n();
     },
     [o, a, n]
   ), D = m(
     (l) => {
       const f = new we(l, o);
-      i.current.executeGlobal(f), a(), n == null || n();
+      s.current.executeGlobal(f), a(), n == null || n();
     },
     [o, a, n]
   ), p = m(
     (l, f, g) => {
       const y = new Ee(l, f, g, o);
-      i.current.executeGlobal(y), a(), n == null || n();
+      s.current.executeGlobal(y), a(), n == null || n();
     },
     [o, a, n]
   ), h = m(
@@ -169,24 +169,24 @@ function Ve(e, t, o, n) {
           y.undo();
         }
       }());
-      i.current.executeBatchOnArtboard(f, g), a();
+      s.current.executeBatchOnArtboard(f, g), a();
     },
     [o, a]
   ), S = m(() => {
-    i.current.undo() && (a(), n == null || n());
-  }, [a, n]), v = m(() => {
-    i.current.redo() && (a(), n == null || n());
+    s.current.undo() && (a(), n == null || n());
+  }, [a, n]), F = m(() => {
+    s.current.redo() && (a(), n == null || n());
   }, [a, n]), R = m(() => {
     const l = o.getActiveArtboardId();
-    l && i.current.undoArtboard(l) && (a(), n == null || n());
+    l && s.current.undoArtboard(l) && (a(), n == null || n());
   }, [o, a, n]), w = m(() => {
     const l = o.getActiveArtboardId();
-    l && i.current.redoArtboard(l) && (a(), n == null || n());
+    l && s.current.redoArtboard(l) && (a(), n == null || n());
   }, [o, a, n]), L = m(() => {
-    i.current.clear(), a();
+    s.current.clear(), a();
   }, [a]), nt = m(
     (l) => {
-      i.current.clearArtboardHistory(l), a();
+      s.current.clearArtboardHistory(l), a();
     },
     [a]
   ), _ = pt(null);
@@ -207,14 +207,14 @@ function Ve(e, t, o, n) {
           return P.map((H) => N.get(H)).filter(Boolean);
         });
       });
-      i.current.executeOnArtboard(C, $), a();
+      s.current.executeOnArtboard(C, $), a();
     },
     [e, t, o, a]
   );
   return {
     // Element operations
     executeElementUpdate: z,
-    executeAddElement: F,
+    executeAddElement: v,
     executeRemoveElement: V,
     executeReorderElement: M,
     // Batch operations
@@ -225,7 +225,7 @@ function Ve(e, t, o, n) {
     executeUpdateArtboard: p,
     // Undo/redo (smart - considers last operation and active artboard)
     undo: S,
-    redo: v,
+    redo: F,
     // Undo/redo for active artboard only (element operations)
     undoActiveArtboard: R,
     redoActiveArtboard: w,
@@ -237,18 +237,18 @@ function Ve(e, t, o, n) {
     // State for active artboard only
     canUndoActiveArtboard: r.canUndoActiveArtboard,
     canRedoActiveArtboard: r.canRedoActiveArtboard,
-    historyManager: i.current
+    historyManager: s.current
   };
 }
 function dt(e) {
   return e && "fontSize" in e && "color" in e && "fontFamily" in e;
 }
 function De(e, t) {
-  const [o, n] = b(32), [i, s] = b("#333333"), [c, r] = b("Arial"), [d, a] = b("center");
+  const [o, n] = b(32), [s, i] = b("#333333"), [c, r] = b("Arial"), [d, a] = b("center");
   Dt(() => {
     if (e && dt(e)) {
-      const p = e.transformType === "circle" && "getEffectiveFontSize" in e ? Math.round(e.getEffectiveFontSize()) : Math.round(e.fontSize), h = e.color, S = e.fontFamily, v = e.textAlign;
-      n((R) => R !== p ? p : R), s((R) => R !== h ? h : R), r((R) => R !== S ? S : R), a((R) => R !== v ? v : R);
+      const p = e.transformType === "circle" && "getEffectiveFontSize" in e ? Math.round(e.getEffectiveFontSize()) : Math.round(e.fontSize), h = e.color, S = e.fontFamily, F = e.textAlign;
+      n((R) => R !== p ? p : R), i((R) => R !== h ? h : R), r((R) => R !== S ? S : R), a((R) => R !== F ? F : R);
     }
   }, [e]);
   const z = m(
@@ -260,7 +260,7 @@ function De(e, t) {
       S.transformType === "circle" && "setEffectiveFontSize" in S ? S.setEffectiveFontSize(h) : S.setFontSize(h), t(S);
     },
     [e, o, t]
-  ), F = m(
+  ), v = m(
     (p) => {
       if (!e || !dt(e)) return;
       n(p);
@@ -271,7 +271,7 @@ function De(e, t) {
   ), V = m(
     (p) => {
       if (!e || !dt(e)) return;
-      s(p);
+      i(p);
       const h = e.clone();
       if (h.color = p, h.richText)
         for (const S of h.richText.spans)
@@ -300,17 +300,17 @@ function De(e, t) {
   return {
     // State
     fontSize: o,
-    fontColor: i,
+    fontColor: s,
     fontFamily: c,
     textAlign: d,
     // State setters (for UI only)
     setFontSize: n,
-    setFontColor: s,
+    setFontColor: i,
     setFontFamily: r,
     setTextAlign: a,
     // Update functions (update element + UI)
     updateFontSize: z,
-    setFontSizeValue: F,
+    setFontSizeValue: v,
     updateFontColor: V,
     updateFontFamily: E,
     updateTextAlign: D
@@ -323,11 +323,11 @@ function _e(e) {
   let t = e;
   const o = [];
   for (; t; ) {
-    const n = t.id ? `#${t.id}` : "", i = t.className ? `.${String(t.className).split(" ").slice(0, 2).join(".")}` : "";
-    if (o.push(`${t.tagName.toLowerCase()}${n}${i}`), t.hasAttribute(qt))
+    const n = t.id ? `#${t.id}` : "", s = t.className ? `.${String(t.className).split(" ").slice(0, 2).join(".")}` : "";
+    if (o.push(`${t.tagName.toLowerCase()}${n}${s}`), t.hasAttribute(qt))
       return !0;
-    const s = t.getAttribute("role");
-    if (s === "dialog" || s === "alertdialog" || s === "menu" || s === "listbox")
+    const i = t.getAttribute("role");
+    if (i === "dialog" || i === "alertdialog" || i === "menu" || i === "listbox")
       return !0;
     const c = t.getAttribute("data-slot");
     if (c && (c.includes("popover") || c.includes("dialog")) || t.hasAttribute("data-radix-popper-content-wrapper"))
@@ -351,21 +351,21 @@ function Qt(e) {
   const t = e.trim();
   if (t.startsWith("#")) {
     const n = t.slice(1);
-    let i, s, c;
+    let s, i, c;
     if (n.length === 3)
-      i = parseInt(n[0] + n[0], 16), s = parseInt(n[1] + n[1], 16), c = parseInt(n[2] + n[2], 16);
+      s = parseInt(n[0] + n[0], 16), i = parseInt(n[1] + n[1], 16), c = parseInt(n[2] + n[2], 16);
     else if (n.length === 6)
-      i = parseInt(n.slice(0, 2), 16), s = parseInt(n.slice(2, 4), 16), c = parseInt(n.slice(4, 6), 16);
+      s = parseInt(n.slice(0, 2), 16), i = parseInt(n.slice(2, 4), 16), c = parseInt(n.slice(4, 6), 16);
     else return null;
-    return Number.isNaN(i) || Number.isNaN(s) || Number.isNaN(c) ? null : Xt(i, s, c);
+    return Number.isNaN(s) || Number.isNaN(i) || Number.isNaN(c) ? null : Xt(s, i, c);
   }
   const o = t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
   return o ? Xt(Number(o[1]), Number(o[2]), Number(o[3])) : null;
 }
 function Xt(e, t, o) {
-  const n = (i) => {
-    const s = i / 255;
-    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  const n = (s) => {
+    const i = s / 255;
+    return i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
   };
   return 0.2126 * n(e) + 0.7152 * n(t) + 0.0722 * n(o);
 }
@@ -379,45 +379,45 @@ const te = Q(null), Me = 0.1, Ye = 4, Gt = 0.25, Xe = ({
   canvasRef: o,
   viewPadding: n = 0.9
 }) => {
-  const [i, s] = b(1), [c, r] = b({ x: 0, y: 0 }), [d, a] = b(!1), [z, F] = b(1), V = m(() => {
-    F(1), r({ x: 0, y: 0 });
+  const [s, i] = b(1), [c, r] = b({ x: 0, y: 0 }), [d, a] = b(!1), [z, v] = b(1), V = m(() => {
+    v(1), r({ x: 0, y: 0 });
   }, []), E = m(() => {
-    s((v) => Math.min(v + Gt, Ye));
+    i((F) => Math.min(F + Gt, Ye));
   }, []), D = m(() => {
-    s((v) => Math.max(v - Gt, Me));
+    i((F) => Math.max(F - Gt, Me));
   }, []), p = m(() => {
-    const v = t.getActiveArtboard();
-    if (!v || !o.current) return;
+    const F = t.getActiveArtboard();
+    if (!F || !o.current) return;
     let R = o.current.parentElement, w = 0, L = 0;
     for (; R && (w = R.clientWidth, L = R.clientHeight, !(w > 0 && L > 0)); )
       R = R.parentElement;
     if (!w || !L) return;
     const nt = Math.min(
-      w * n / v.width,
-      L * n / v.height,
+      w * n / F.width,
+      L * n / F.height,
       1
       // Never zoom in beyond 100%
     );
-    s(nt), r({ x: 0, y: 0 });
+    i(nt), r({ x: 0, y: 0 });
   }, [t, o, n]), h = m(() => {
-    s(1), r({ x: 0, y: 0 });
+    i(1), r({ x: 0, y: 0 });
   }, []), S = q(
     () => ({
-      zoom: i,
+      zoom: s,
       panOffset: c,
       isPanning: d,
       zoomIn: E,
       zoomOut: D,
       zoomToFit: p,
       resetView: h,
-      setZoom: s,
+      setZoom: i,
       setPanOffset: r,
       setIsPanning: a,
       userZoom: z,
-      setUserZoom: F,
+      setUserZoom: v,
       resetUserView: V
     }),
-    [i, c, d, E, D, p, h, z, V]
+    [s, c, d, E, D, p, h, z, V]
   );
   return /* @__PURE__ */ k(te.Provider, { value: S, children: e });
 };
@@ -428,7 +428,7 @@ function Ge() {
   return e;
 }
 const ee = Q(null), Ke = ({ children: e }) => {
-  const [t, o] = b(null), [n, i] = b([]), [s, c] = b(null), [r, d] = b(null), [a, z] = b(!1), F = m((D) => {
+  const [t, o] = b(null), [n, s] = b([]), [i, c] = b(null), [r, d] = b(null), [a, z] = b(!1), v = m((D) => {
     o(D);
   }, []), V = m((D) => {
     c(D);
@@ -436,23 +436,23 @@ const ee = Q(null), Ke = ({ children: e }) => {
     () => ({
       selectedId: t,
       multiSelection: n,
-      activeChildElement: s,
+      activeChildElement: i,
       hoveredElementId: r,
       hideHandles: a,
       setSelectedId: o,
-      setMultiSelection: i,
+      setMultiSelection: s,
       setHoveredElementId: d,
       setHideHandles: z,
-      handleSelectionChange: F,
+      handleSelectionChange: v,
       handleActiveChildChange: V
     }),
     [
       t,
       n,
-      s,
+      i,
       r,
       a,
-      F,
+      v,
       V
     ]
   );
@@ -496,22 +496,22 @@ function wo() {
   return e;
 }
 const ne = Q(null), Je = ({ children: e }) => {
-  const [t, o] = b(null), [n, i] = b(!1), [s, c] = b(0), [r, d] = b(!1), [a, z] = b(!1), F = q(
+  const [t, o] = b(null), [n, s] = b(!1), [i, c] = b(0), [r, d] = b(!1), [a, z] = b(!1), v = q(
     () => ({
       expandedPanelType: t,
       setExpandedPanelType: o,
       isToolbarMenuOpen: n,
-      setIsToolbarMenuOpen: i,
-      textSelectionVersion: s,
+      setIsToolbarMenuOpen: s,
+      textSelectionVersion: i,
       setTextSelectionVersion: c,
       isCanvasReady: r,
       setCanvasReady: d,
       isRotating: a,
       setIsRotating: z
     }),
-    [t, n, s, r, a]
+    [t, n, i, r, a]
   );
-  return /* @__PURE__ */ k(ne.Provider, { value: F, children: e });
+  return /* @__PURE__ */ k(ne.Provider, { value: v, children: e });
 };
 function qe() {
   const e = Y(ne);
@@ -637,9 +637,9 @@ const eo = Zt("EditorContext"), se = Q(null), ce = Q(null), Ro = () => {
     throw new Error("useEditorHandles must be used within EditorProvider");
   return e;
 }, oo = ({ children: e, artboardManager: t, canvasRef: o, canvasEditorRef: n }) => {
-  const i = pt(null), s = q(() => ({ get: () => i.current }), []), c = Ge(), r = je(), d = qe(), [a, z] = b(
+  const s = pt(null), i = q(() => ({ get: () => s.current }), []), c = Ge(), r = je(), d = qe(), [a, z] = b(
     () => t.getAllArtboards()
-  ), [F, V] = b(0), [E, D] = b(
+  ), [v, V] = b(0), [E, D] = b(
     () => new Wt()
   ), p = q(() => E.toArray(), [E]), h = m((u) => {
     D((A) => {
@@ -649,7 +649,7 @@ const eo = Zt("EditorContext"), se = Q(null), ce = Q(null), Ro = () => {
   }, []), S = m(
     (u) => E.get(u),
     [E]
-  ), [v, R] = b([]), w = r.selectedId ? E.get(r.selectedId) : void 0, L = m(() => {
+  ), [F, R] = b([]), w = r.selectedId ? E.get(r.selectedId) : void 0, L = m(() => {
     z([...t.getAllArtboards()]), V((u) => u + 1);
   }, [t]), {
     historyManager: nt,
@@ -712,7 +712,7 @@ const eo = Zt("EditorContext"), se = Q(null), ce = Q(null), Ro = () => {
         );
       const T = `element-${Date.now()}`, B = t.getActiveArtboard(), mt = B ? B.x + B.width / 2 : window.innerWidth / 2, st = B ? B.y + B.height / 2 : window.innerHeight / 2, j = ((Lt = n.current) == null ? void 0 : Lt.getZoom()) || c.zoom || 1;
       if (A === "image") {
-        const ft = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==", et = 200 / j, Z = x == null ? void 0 : x.src, W = new ve({
+        const ft = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==", et = 200 / j, Z = x == null ? void 0 : x.src, W = new Fe({
           id: T,
           name: u.name,
           x: mt,
@@ -745,7 +745,7 @@ const eo = Zt("EditorContext"), se = Q(null), ce = Q(null), Ro = () => {
         wave: "wave",
         arch: "arch",
         shape: "shape"
-      }[A] || "custom", zt = Fe(at);
+      }[A] || "custom", zt = ve(at);
       if (!zt || !zt.Component)
         throw new Error(`[EditorContext] no transform registered for element type "${A}"`);
       const ht = t.getActiveArtboard(), fe = ht ? Math.min(ht.width, ht.height) * 0.1 : 80, Ht = ht ? ht.width * 0.5 : 300;
@@ -797,12 +797,12 @@ const eo = Zt("EditorContext"), se = Q(null), ce = Q(null), Ro = () => {
       ), r.setSelectedId(T), { id: T, name: u.name ?? "" };
     },
     [t, M, _, r, c.zoom, n]
-  ), vt = m(
+  ), Ft = m(
     async (u, A) => {
       await At({ ...A, type: u });
     },
     [At]
-  ), Ft = m(() => {
+  ), vt = m(() => {
     const u = [];
     if (r.multiSelection.length > 0) {
       const A = p.filter(
@@ -815,9 +815,9 @@ const eo = Zt("EditorContext"), se = Q(null), ce = Q(null), Ro = () => {
       R(A);
     }
   }, [w, r.multiSelection, p]), Pt = m(() => {
-    if (v.length === 0) return;
+    if (F.length === 0) return;
     const u = [], A = 30, x = 30;
-    v.forEach((I) => {
+    F.forEach((I) => {
       const T = E.get(I.id), B = T ? T.x : I.x, mt = T ? T.y : I.y, st = I.toJSON();
       delete st.id;
       const j = I.constructor, tt = new j(st);
@@ -833,7 +833,7 @@ const eo = Zt("EditorContext"), se = Q(null), ce = Q(null), Ro = () => {
       M(tt, ct, at), u.push(tt.id);
     }), u.length === 1 ? r.handleSelectionChange(u[0]) : u.length > 1 && r.setMultiSelection(u);
   }, [
-    v,
+    F,
     E,
     t,
     M,
@@ -929,16 +929,16 @@ const eo = Zt("EditorContext"), se = Q(null), ce = Q(null), Ro = () => {
     // Element setters
     setElements: h,
     // Artboard version counter
-    artboardVersion: F,
+    artboardVersion: v,
     // Handlers
     refreshArtboards: L,
     handleElementUpdate: K,
     addElement: At,
-    handleAddElement: vt,
+    handleAddElement: Ft,
     handleLoadWorkspace: Nt,
-    handleCopyElements: Ft,
+    handleCopyElements: vt,
     handlePasteElements: Pt,
-    hasClipboardContent: v.length > 0,
+    hasClipboardContent: F.length > 0,
     // Command history (undo/redo actions + execute functions)
     historyManager: nt,
     executeElementUpdate: _,
@@ -1013,15 +1013,15 @@ const eo = Zt("EditorContext"), se = Q(null), ce = Q(null), Ro = () => {
     o,
     n,
     h,
-    F,
+    v,
     L,
     K,
     At,
-    vt,
-    Nt,
     Ft,
+    Nt,
+    vt,
     Pt,
-    v,
+    F,
     // Command history
     nt,
     _,
@@ -1051,7 +1051,7 @@ const eo = Zt("EditorContext"), se = Q(null), ce = Q(null), Ro = () => {
     Tt,
     Ot
   ]);
-  return i.current = _t, /* @__PURE__ */ k(ce.Provider, { value: s, children: /* @__PURE__ */ k(
+  return s.current = _t, /* @__PURE__ */ k(ce.Provider, { value: i, children: /* @__PURE__ */ k(
     Ze,
     {
       value: {
@@ -1072,14 +1072,14 @@ const eo = Zt("EditorContext"), se = Q(null), ce = Q(null), Ro = () => {
             elementStore: E,
             artboards: a,
             artboardManager: t,
-            artboardVersion: F,
+            artboardVersion: v,
             setElements: h,
             refreshArtboards: L,
             getElementById: S,
-            handleAddElement: vt,
+            handleAddElement: Ft,
             handleElementUpdate: K,
             handleLoadWorkspace: Nt,
-            handleCopyElements: Ft,
+            handleCopyElements: vt,
             handlePasteElements: Pt,
             fontSize: bt,
             fontColor: wt,
@@ -1137,19 +1137,19 @@ const eo = Zt("EditorContext"), se = Q(null), ce = Q(null), Ro = () => {
       backgroundColor: t.backgroundColor || Te
     };
     return c.createArtboard(r), c;
-  }), i = pt(null), s = pt(null);
+  }), s = pt(null), i = pt(null);
   return /* @__PURE__ */ k(
     Xe,
     {
       artboardManager: n,
-      canvasRef: i,
+      canvasRef: s,
       viewPadding: o,
       children: /* @__PURE__ */ k(Ke, { children: /* @__PURE__ */ k(Je, { children: /* @__PURE__ */ k(
         oo,
         {
           artboardManager: n,
-          canvasRef: i,
-          canvasEditorRef: s,
+          canvasRef: s,
+          canvasEditorRef: i,
           children: e
         }
       ) }) })
@@ -1167,10 +1167,10 @@ function To(e) {
 function Oo() {
   return [...ut];
 }
-function vo() {
+function Fo() {
   ut.length = 0;
 }
-function Fo() {
+function vo() {
   if (ut.length === 0) return;
   const e = ut.map((t) => ze(t) ? `${t.code}: ${t.message}` : `${t.name}: ${t.message}`).join(`
   - `);
@@ -1196,16 +1196,16 @@ function ae(e) {
   };
 }
 function ro(e) {
-  var n;
+  var n, s;
   const t = (n = e.artboards) != null && n.length ? e.artboards : [{ name: "Front", width: 800, height: 800 }], o = t.map(() => []);
   for (const i of e.elements || []) {
-    const s = i == null ? void 0 : i.artboard, c = typeof s == "string" ? t.findIndex((r) => (r.name || "Front") === s) : -1;
-    o[c >= 0 ? c : 0].push(io(i));
+    const c = i == null ? void 0 : i.artboard, r = typeof c == "string" ? t.findIndex((d) => (d.name || "Front") === c) : -1;
+    o[r >= 0 ? r : 0].push(io(i));
   }
   return {
     schemaVersion: no,
-    artboards: t.map((i, s) => ({
-      id: `artboard-${s + 1}`,
+    artboards: t.map((i, c) => ({
+      id: `artboard-${c + 1}`,
       name: i.name || "Front",
       x: 0,
       y: 0,
@@ -1217,10 +1217,14 @@ function ro(e) {
       // explicitly-set artboard backgrounds from every realtime mockup while
       // the editor kept showing them (WYSIWYG drift).
       exportBackground: i.exportBackground ?? !1,
-      elements: o[s],
+      elements: o[c],
       distressTexture: i.distressTexture,
       imageMask: i.imageMask
-    }))
+    })),
+    // Custom (brand) font dependencies ride the wire so the server worker can
+    // load them — without this, server renders of custom-font designs fall
+    // back to the wrong family even when the bundle supports custom fonts.
+    ...(s = e.customFonts) != null && s.length ? { customFonts: e.customFonts } : {}
   };
 }
 function io(e) {
@@ -1235,18 +1239,18 @@ function io(e) {
 }
 function so(e) {
   var a;
-  const t = e.transformData || {}, o = e.masks && e.masks.length > 0, n = t.width || 0, i = t.height || 0, s = o ? n : n * (t.cropWidth ?? 1), c = o ? i : i * (t.cropHeight ?? 1), r = {
+  const t = e.transformData || {}, o = e.masks && e.masks.length > 0, n = t.width || 0, s = t.height || 0, i = o ? n : n * (t.cropWidth ?? 1), c = o ? s : s * (t.cropHeight ?? 1), r = {
     id: e.id,
     type: "image",
     x: e.x || 0,
     y: e.y || 0,
-    width: s,
+    width: i,
     height: c,
     rotation: e.rotation || 0,
     imageUrl: e.imageUrl,
     imageAspectRatio: e.imageAspectRatio
   };
-  return !o && (t.cropX !== 0 || t.cropY !== 0 || t.cropWidth !== 1 || t.cropHeight !== 1) && (r.cropX = t.cropX, r.cropY = t.cropY, r.cropWidth = t.cropWidth, r.cropHeight = t.cropHeight, r.needsCropPixelConversion = !0), t.flipHorizontal && (r.flipHorizontal = t.flipHorizontal), t.flipVertical && (r.flipVertical = t.flipVertical), t.borderRadius && (r.borderRadius = t.borderRadius), ke(t.adjustments) || (r.adjustments = { ...t.adjustments }), e.opacity !== void 0 && (r.opacity = e.opacity), e.distressEffect && (r.distressEffect = e.distressEffect), ((a = e.masks) == null ? void 0 : a.length) > 0 && (r.masks = e.masks), e.blendMode && (r.blendMode = e.blendMode), e.knockoutParts && (r.knockoutParts = e.knockoutParts), e.stroke && (r.stroke = e.stroke), ae(r);
+  return !o && (t.cropX !== 0 || t.cropY !== 0 || t.cropWidth !== 1 || t.cropHeight !== 1) && (r.cropX = t.cropX, r.cropY = t.cropY, r.cropWidth = t.cropWidth, r.cropHeight = t.cropHeight, r.needsCropPixelConversion = !0), t.flipHorizontal && (r.flipHorizontal = t.flipHorizontal), t.flipVertical && (r.flipVertical = t.flipVertical), t.borderRadius && (r.borderRadius = t.borderRadius), e.shadow && (r.shadow = e.shadow), ke(t.adjustments) || (r.adjustments = { ...t.adjustments }), e.opacity !== void 0 && (r.opacity = e.opacity), e.distressEffect && (r.distressEffect = e.distressEffect), ((a = e.masks) == null ? void 0 : a.length) > 0 && (r.masks = e.masks), e.blendMode && (r.blendMode = e.blendMode), e.knockoutParts && (r.knockoutParts = e.knockoutParts), e.stroke && (r.stroke = e.stroke), ae(r);
 }
 const Kt = "center", de = Symbol.for("snowcone.canvas.layerToken");
 function Po(e) {
@@ -1279,8 +1283,8 @@ function mo(e) {
 function ho(e) {
   return e === "top-left" || e === "top" || e === "top-right" ? "top" : e === "bottom-left" || e === "bottom" || e === "bottom-right" ? "bottom" : "middle";
 }
-function Ut(e, t, o, n, i, s) {
-  const c = mo(e), r = ho(e), d = c === "left" ? t / 2 + s : c === "right" ? n - t / 2 - s : n / 2, a = r === "top" ? o / 2 + s : r === "bottom" ? i - o / 2 - s : i / 2;
+function Ut(e, t, o, n, s, i) {
+  const c = mo(e), r = ho(e), d = c === "left" ? t / 2 + i : c === "right" ? n - t / 2 - i : n / 2, a = r === "top" ? o / 2 + i : r === "bottom" ? s - o / 2 - i : s / 2;
   return { x: d, y: a };
 }
 function fo(e, t, o) {
@@ -1296,14 +1300,14 @@ function fo(e, t, o) {
       cropHeight: 1
     };
   }
-  const i = t / e, s = o / i;
+  const s = t / e, i = o / s;
   return {
     width: t,
-    height: i,
+    height: s,
     cropX: 0,
-    cropY: (1 - s) / 2,
+    cropY: (1 - i) / 2,
     cropWidth: 1,
-    cropHeight: s
+    cropHeight: i
   };
 }
 class lt {
@@ -1311,21 +1315,21 @@ class lt {
     if (this.els = [], this.colorRoles = /* @__PURE__ */ new Map(), this.idCounter = 0, !(t.width > 0) || !(t.height > 0))
       throw new Error("design(): artboard width and height must be positive numbers");
     for (const [o, n] of Object.entries(t.colors ?? {})) {
-      const i = uo(n);
-      if (i === null)
+      const s = uo(n);
+      if (s === null)
         throw new ot(
           "E_COLOR_ROLE_INVALID",
           `color role "${o}" is ${JSON.stringify(n)} — roles must be #RGB/#RRGGBB hex (useColorBinding matches by normalized hex value; other syntaxes can't bind).`,
           { roleName: o, value: n, docSlug: "embed-mode" }
         );
-      const s = [...this.colorRoles.entries()].find(([, c]) => c === i);
-      if (s)
+      const i = [...this.colorRoles.entries()].find(([, c]) => c === s);
+      if (i)
         throw new ot(
           "E_COLOR_ROLE_COLLISION",
-          `color roles "${s[0]}" and "${o}" both normalize to ${i}. useColorBinding matches elements by VALUE, so colliding roles would repaint each other's elements — give every role a distinct hex.`,
-          { roles: [s[0], o], value: i, docSlug: "embed-mode" }
+          `color roles "${i[0]}" and "${o}" both normalize to ${s}. useColorBinding matches elements by VALUE, so colliding roles would repaint each other's elements — give every role a distinct hex.`,
+          { roles: [i[0], o], value: s, docSlug: "embed-mode" }
         );
-      this.colorRoles.set(o, i);
+      this.colorRoles.set(o, s);
     }
     this.current = {
       name: t.name || "Front",
@@ -1351,10 +1355,10 @@ class lt {
    * emit all pages and `TemplateField.artboard` can scope fields per page.
    */
   static fromState(t, o = {}) {
-    const n = t.artboards.find((s) => s.name === t.activeArtboard) ?? t.artboards[0];
+    const n = t.artboards.find((i) => i.name === t.activeArtboard) ?? t.artboards[0];
     if (!n)
       throw new Error("DesignBuilder.fromState(): state has no artboards");
-    const i = new lt({
+    const s = new lt({
       name: n.name,
       width: n.width,
       height: n.height,
@@ -1362,14 +1366,14 @@ class lt {
       role: n.role
     });
     if (o.artboards === "all") {
-      i.allArtboards = t.artboards.map((s) => ({ ...s }));
-      for (const s of t.elements)
-        i.els.push(s.artboard ? { ...s } : { ...s, artboard: n.name });
-      return i;
+      s.allArtboards = t.artboards.map((i) => ({ ...i }));
+      for (const i of t.elements)
+        s.els.push(i.artboard ? { ...i } : { ...i, artboard: n.name });
+      return s;
     }
-    for (const s of t.elements)
-      s.artboard && s.artboard !== n.name || i.els.push({ ...s });
-    return i;
+    for (const i of t.elements)
+      i.artboard && i.artboard !== n.name || s.els.push({ ...i });
+    return s;
   }
   nextId(t) {
     return `${t}-${++this.idCounter}`;
@@ -1430,11 +1434,11 @@ class lt {
     }, this.allArtboards.push(lt.snapshotArtboard(this.current)), this;
   }
   background(t, o = {}) {
-    const { width: n, height: i } = this.current;
-    let s;
+    const { width: n, height: s } = this.current;
+    let i;
     if (o.aspectRatio && o.aspectRatio > 0) {
-      const r = fo(o.aspectRatio, n, i);
-      s = {
+      const r = fo(o.aspectRatio, n, s);
+      i = {
         type: "image",
         width: r.width,
         height: r.height,
@@ -1447,10 +1451,10 @@ class lt {
         borderRadius: 0
       };
     } else
-      s = {
+      i = {
         type: "image",
         width: n,
-        height: i,
+        height: s,
         cropX: 0,
         cropY: 0,
         cropWidth: 1,
@@ -1463,18 +1467,18 @@ class lt {
       id: this.nextId("bg"),
       transformType: "image",
       x: n / 2,
-      y: i / 2,
+      y: s / 2,
       rotation: 0,
       opacity: o.opacity ?? 1,
       imageUrl: t,
       imageAspectRatio: o.aspectRatio,
-      transformData: s,
+      transformData: i,
       name: o.name ?? "Background"
     };
     return this.els.unshift(c), this;
   }
   image(t, o = {}) {
-    const { width: n, height: i } = this.current, s = o.width ?? Math.round(n / 3), c = o.height ?? (o.aspectRatio ? Math.round(s / o.aspectRatio) : s), { x: r, y: d } = Ut(o.anchor ?? Kt, s, c, n, i, o.padding ?? 0), a = {
+    const { width: n, height: s } = this.current, i = o.width ?? Math.round(n / 3), c = o.height ?? (o.aspectRatio ? Math.round(i / o.aspectRatio) : i), { x: r, y: d } = Ut(o.anchor ?? Kt, i, c, n, s, o.padding ?? 0), a = {
       id: this.nextId("img"),
       transformType: "image",
       x: r,
@@ -1485,7 +1489,7 @@ class lt {
       imageAspectRatio: o.aspectRatio,
       transformData: {
         type: "image",
-        width: s,
+        width: i,
         height: c,
         cropX: 0,
         cropY: 0,
@@ -1500,14 +1504,14 @@ class lt {
     return this.els.push(a), this;
   }
   text(t, o = {}) {
-    const { width: n, height: i } = this.current, s = o.fontSize ?? Math.round(this.current.height / 12), { x: c, y: r } = Ut(o.anchor ?? "top", 0, s, n, i, o.padding ?? Math.round(i / 20)), d = {
+    const { width: n, height: s } = this.current, i = o.fontSize ?? Math.round(this.current.height / 12), { x: c, y: r } = Ut(o.anchor ?? "top", 0, i, n, s, o.padding ?? Math.round(s / 20)), d = {
       id: this.nextId("text"),
       transformType: "custom",
       x: c,
       y: r,
       rotation: o.rotation ?? 0,
       text: t,
-      fontSize: s,
+      fontSize: i,
       fontFamily: o.fontFamily ?? "Anton",
       color: xt(o.color) ?? "#ffffff",
       textAlign: o.textAlign ?? "center",
@@ -1532,13 +1536,13 @@ class lt {
    *   is not bindable (shape/group/path).
    */
   layer(t) {
-    const o = this.els.find((i) => i.name === t);
+    const o = this.els.find((s) => s.name === t);
     if (!o) {
-      const i = this.layerNamesOfKind("text"), s = this.layerNamesOfKind("image");
+      const s = this.layerNamesOfKind("text"), i = this.layerNamesOfKind("image");
       throw new ot(
         "E_LAYER_NOT_FOUND",
-        `no layer "${t}" in this design. Text layers: ${JSON.stringify(i)}; image layers: ${JSON.stringify(s)}. Fix the name, or add the layer first — e.g. design(…).text('…', { name: '${t}' }).`,
-        { layerName: t, validNames: [...i, ...s], textNames: i, imageNames: s, docSlug: "embed-mode" }
+        `no layer "${t}" in this design. Text layers: ${JSON.stringify(s)}; image layers: ${JSON.stringify(i)}. Fix the name, or add the layer first — e.g. design(…).text('…', { name: '${t}' }).`,
+        { layerName: t, validNames: [...s, ...i], textNames: s, imageNames: i, docSlug: "embed-mode" }
       );
     }
     const n = Vt(o);
@@ -1579,7 +1583,7 @@ class lt {
   }
   /** An anchored vector shape. */
   shape(t, o = {}) {
-    const { width: n, height: i } = this.current, s = o.size ?? Math.round(n / 6), c = typeof s == "number" ? s : s.width, r = typeof s == "number" ? s : s.height, { x: d, y: a } = Ut(o.anchor ?? Kt, c, r, n, i, o.padding ?? 0), z = {
+    const { width: n, height: s } = this.current, i = o.size ?? Math.round(n / 6), c = typeof i == "number" ? i : i.width, r = typeof i == "number" ? i : i.height, { x: d, y: a } = Ut(o.anchor ?? Kt, c, r, n, s, o.padding ?? 0), z = {
       type: "shape",
       shapeType: t,
       width: c,
@@ -1588,7 +1592,7 @@ class lt {
       fillOpacity: o.opacity ?? 1,
       ...o.points !== void 0 ? { points: o.points } : {},
       ...o.sides !== void 0 ? { sides: o.sides } : {}
-    }, F = {
+    }, v = {
       id: this.nextId("shape"),
       transformType: "shape",
       x: d,
@@ -1597,7 +1601,7 @@ class lt {
       transformData: z,
       ...o.name ? { name: o.name } : {}
     };
-    return this.els.push(F), this;
+    return this.els.push(v), this;
   }
   /** The composed elements, in render order (background first). Editor shape. */
   get elements() {
@@ -1659,14 +1663,14 @@ export {
   go as k,
   zo as l,
   Ro as m,
-  Fo as n,
+  vo as n,
   Oo as o,
   xo as p,
-  vo as q,
+  Fo as q,
   To as r,
   ro as s,
   Le as t,
   Io as u,
   bo as v
 };
-//# sourceMappingURL=design-builder-BpbYUYtK.js.map
+//# sourceMappingURL=design-builder-D4izkvlb.js.map