@snowcone-app/canvas 0.29.0 → 0.31.0

package/dist/design-builder-CBG2hKc8.js

@@ -0,0 +1,1672 @@
+import { jsx as k } from "react/jsx-runtime";
+import { useContext as X, useSyncExternalStore as pe, useCallback as m, createContext as Q, useRef as pt, useState as b, useEffect as Dt, useMemo as q } from "react";
+import { Z as Ae, E as ot, U as ye, am as ge, G as jt, an as xe, ao as be, ap as we, aq as Ee, ar as Se, c as Zt, C as Re, as as Ce, at as Ie, au as Te, O as Oe, X as Wt, I as ve, g as Fe, S as Pe, av as Ne, aw as Mt, y as ze, D as He, K as ke } from "./FontAnalyzer-BYhwxDhe.js";
+const Jt = Q(null), Ue = () => () => {
+}, Xt = () => 0;
+function go() {
+  const e = X(Jt), t = pe(
+    e ? e.subscribe : Ue,
+    e ? e.getVersion : Xt,
+    e ? e.getVersion : Xt
+  );
+  return m(
+    (o) => !!(e && o && e.getBoundLayer(o)),
+    // `version` is the reactivity key: a registry change must mint a new
+    // callback so memoized consumers re-evaluate.
+    [e, t]
+  );
+}
+const gt = Zt("useCommandHistory");
+function Ve(e, t, o, n) {
+  const i = pt(new Ae(o)), s = X(Jt), c = m(
+    (l, f) => {
+      const g = l == null ? void 0 : l.name;
+      if (!s || !g) return;
+      const y = s.getBoundLayer(g);
+      if (y)
+        throw new ot(
+          "E_BOUND_LAYER_MUTATION",
+          `cannot ${f} layer "${g}" — a mounted <${y.part} layer={design.layer("${g}")}> is bound to it. Unmount that field first, or keep the layer and set its text through the field / its binding instead.`,
+          { layer: g, part: y.part, operation: f, docSlug: "embed-mode" }
+        );
+    },
+    [s]
+  ), [r, d] = b({
+    canUndo: !1,
+    canRedo: !1,
+    // Per-artboard state for the active artboard
+    canUndoActiveArtboard: !1,
+    canRedoActiveArtboard: !1
+  }), a = m(() => {
+    const l = i.current, f = o.getActiveArtboardId();
+    d({
+      canUndo: l.canUndo(),
+      canRedo: l.canRedo(),
+      // Per-artboard state - only check active artboard's history
+      canUndoActiveArtboard: f ? l.canUndoArtboard(f) : !1,
+      canRedoActiveArtboard: f ? l.canRedoArtboard(f) : !1
+    });
+  }, [o]), z = m(
+    (l, f) => {
+      l && l.name !== f.name && c(l, "rename");
+      const g = new ye(
+        f.id,
+        l || null,
+        f,
+        (C) => {
+          t(($) => $.map((P) => P.id === C.id ? C : P));
+        }
+      ), y = o.getArtboardIdForElement(f.id);
+      if (y)
+        i.current.executeOnArtboard(y, g);
+      else {
+        const C = o.getActiveArtboardId();
+        C && i.current.executeOnArtboard(C, g);
+      }
+      a();
+    },
+    [t, o, a, c]
+  ), F = m(
+    (l, f, g, y) => {
+      const C = f || o.getActiveArtboardId();
+      if (!C) {
+        gt.warn("No active artboard to add element to");
+        return;
+      }
+      const $ = new ge(
+        l,
+        (P) => {
+          const U = P;
+          t((N) => {
+            if (y) {
+              const H = N.findIndex((O) => O.id === y);
+              if (H !== -1) {
+                const O = [...N];
+                return O.splice(H, 0, U), O;
+              }
+            }
+            if (g) {
+              const H = N.findIndex((O) => O.id === g);
+              if (H !== -1) {
+                const O = [...N];
+                return O.splice(H + 1, 0, U), O;
+              }
+              for (let O = 0; O < N.length; O++) {
+                const Y = N[O];
+                if (Y instanceof jt && Y.children) {
+                  const rt = Y.children.findIndex((K) => K.id === g);
+                  if (rt !== -1) {
+                    const K = Y.clone();
+                    K.children.splice(rt + 1, 0, U);
+                    const G = [...N];
+                    return G[O] = K, G;
+                  }
+                }
+              }
+            }
+            return [...N, U];
+          }), o.addElementToArtboard(P.id, C);
+        },
+        (P) => {
+          t((U) => U.filter((N) => N.id !== P)), o.removeElementFromArtboard(P);
+        }
+      );
+      i.current.executeOnArtboard(C, $), a();
+    },
+    [t, o, a]
+  ), V = m(
+    (l) => {
+      c(l, "delete");
+      const f = o.getArtboardIdForElement(l.id);
+      if (!f) {
+        gt.warn("Element not found in any artboard");
+        return;
+      }
+      const g = new xe(
+        l,
+        (y) => {
+          t((C) => [...C, y]), o.addElementToArtboard(y.id, f);
+        },
+        (y) => {
+          t((C) => C.filter(($) => $.id !== y)), o.removeElementFromArtboard(y);
+        }
+      );
+      i.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();
+    },
+    [o, a, n]
+  ), D = m(
+    (l) => {
+      const f = new we(l, o);
+      i.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();
+    },
+    [o, a, n]
+  ), h = m(
+    (l) => {
+      if (l.length === 0)
+        return;
+      const f = o.getActiveArtboardId();
+      if (!f) {
+        gt.warn("No active artboard for batch execution");
+        return;
+      }
+      const g = l.map((y) => new class extends Object {
+        execute() {
+          y.execute();
+        }
+        undo() {
+          y.undo();
+        }
+      }());
+      i.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());
+  }, [a, n]), R = m(() => {
+    const l = o.getActiveArtboardId();
+    l && i.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());
+  }, [o, a, n]), L = m(() => {
+    i.current.clear(), a();
+  }, [a]), nt = m(
+    (l) => {
+      i.current.clearArtboardHistory(l), a();
+    },
+    [a]
+  ), _ = pt(null);
+  Dt(() => {
+    const l = o.getActiveArtboardId();
+    l !== _.current && (_.current = l, a());
+  });
+  const M = m(
+    (l, f, g) => {
+      const y = e.map((P) => P.id), C = o.getArtboardIdForElement(l);
+      if (!C) {
+        gt.warn("Element not found in any artboard");
+        return;
+      }
+      const $ = new Se(l, f, g, y, (P) => {
+        t((U) => {
+          const N = new Map(U.map((H) => [H.id, H]));
+          return P.map((H) => N.get(H)).filter(Boolean);
+        });
+      });
+      i.current.executeOnArtboard(C, $), a();
+    },
+    [e, t, o, a]
+  );
+  return {
+    // Element operations
+    executeElementUpdate: z,
+    executeAddElement: F,
+    executeRemoveElement: V,
+    executeReorderElement: M,
+    // Batch operations
+    executeCommandBatch: h,
+    // Artboard operations
+    executeCreateArtboard: E,
+    executeDeleteArtboard: D,
+    executeUpdateArtboard: p,
+    // Undo/redo (smart - considers last operation and active artboard)
+    undo: S,
+    redo: v,
+    // Undo/redo for active artboard only (element operations)
+    undoActiveArtboard: R,
+    redoActiveArtboard: w,
+    clearHistory: L,
+    clearArtboardHistory: nt,
+    // State (smart - considers last operation)
+    canUndo: r.canUndo,
+    canRedo: r.canRedo,
+    // State for active artboard only
+    canUndoActiveArtboard: r.canUndoActiveArtboard,
+    canRedoActiveArtboard: r.canRedoActiveArtboard,
+    historyManager: i.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");
+  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);
+    }
+  }, [e]);
+  const z = m(
+    (p) => {
+      if (!e || !dt(e)) return;
+      const h = Math.max(Ce, Math.min(Ie, o + p));
+      n(h);
+      const S = e.clone();
+      S.transformType === "circle" && "setEffectiveFontSize" in S ? S.setEffectiveFontSize(h) : S.setFontSize(h), t(S);
+    },
+    [e, o, t]
+  ), F = m(
+    (p) => {
+      if (!e || !dt(e)) return;
+      n(p);
+      const h = e.clone();
+      h.transformType === "circle" && "setEffectiveFontSize" in h ? h.setEffectiveFontSize(p) : h.setFontSize(p), t(h);
+    },
+    [e, t]
+  ), V = m(
+    (p) => {
+      if (!e || !dt(e)) return;
+      s(p);
+      const h = e.clone();
+      if (h.color = p, h.richText)
+        for (const S of h.richText.spans)
+          S.style.color = void 0;
+      t(h);
+    },
+    [e, t]
+  ), E = m(
+    (p) => {
+      if (!e || !dt(e)) return;
+      const h = e.fontFamily;
+      h !== p && Re.clearCache(h), r(p);
+      const S = e.clone();
+      S.fontFamily = p, t(S);
+    },
+    [e, t]
+  ), D = m(
+    (p) => {
+      if (!e || !dt(e)) return;
+      a(p);
+      const h = e.clone();
+      h.textAlign = p, t(h);
+    },
+    [e, t]
+  );
+  return {
+    // State
+    fontSize: o,
+    fontColor: i,
+    fontFamily: c,
+    textAlign: d,
+    // State setters (for UI only)
+    setFontSize: n,
+    setFontColor: s,
+    setFontFamily: r,
+    setTextAlign: a,
+    // Update functions (update element + UI)
+    updateFontSize: z,
+    setFontSizeValue: F,
+    updateFontColor: V,
+    updateFontFamily: E,
+    updateTextAlign: D
+  };
+}
+const qt = "data-preserve-selection";
+function _e(e) {
+  if (!(e instanceof Element))
+    return !1;
+  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))
+      return !0;
+    const s = t.getAttribute("role");
+    if (s === "dialog" || s === "alertdialog" || s === "menu" || s === "listbox")
+      return !0;
+    const c = t.getAttribute("data-slot");
+    if (c && (c.includes("popover") || c.includes("dialog")) || t.hasAttribute("data-radix-popper-content-wrapper"))
+      return !0;
+    t = t.parentElement;
+  }
+  return !1;
+}
+const xo = {
+  [qt]: ""
+};
+function Le(e) {
+  const t = Qt(e);
+  return t !== null && t < 0.5;
+}
+function bo(e) {
+  const t = Qt(e);
+  return t !== null && t >= 0.5;
+}
+function Qt(e) {
+  const t = e.trim();
+  if (t.startsWith("#")) {
+    const n = t.slice(1);
+    let i, s, 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);
+    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);
+    else return null;
+    return Number.isNaN(i) || Number.isNaN(s) || Number.isNaN(c) ? null : Yt(i, s, c);
+  }
+  const o = t.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  return o ? Yt(Number(o[1]), Number(o[2]), Number(o[3])) : null;
+}
+function Yt(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);
+  };
+  return 0.2126 * n(e) + 0.7152 * n(t) + 0.0722 * n(o);
+}
+const $e = "#333333", Be = "#f4f4f5";
+function We(e) {
+  return e && Le(e) ? Be : $e;
+}
+const te = Q(null), Me = 0.1, Xe = 4, Kt = 0.25, Ye = ({
+  children: e,
+  artboardManager: t,
+  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 });
+  }, []), E = m(() => {
+    s((v) => Math.min(v + Kt, Xe));
+  }, []), D = m(() => {
+    s((v) => Math.max(v - Kt, Me));
+  }, []), p = m(() => {
+    const v = t.getActiveArtboard();
+    if (!v || !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,
+      1
+      // Never zoom in beyond 100%
+    );
+    s(nt), r({ x: 0, y: 0 });
+  }, [t, o, n]), h = m(() => {
+    s(1), r({ x: 0, y: 0 });
+  }, []), S = q(
+    () => ({
+      zoom: i,
+      panOffset: c,
+      isPanning: d,
+      zoomIn: E,
+      zoomOut: D,
+      zoomToFit: p,
+      resetView: h,
+      setZoom: s,
+      setPanOffset: r,
+      setIsPanning: a,
+      userZoom: z,
+      setUserZoom: F,
+      resetUserView: V
+    }),
+    [i, c, d, E, D, p, h, z, V]
+  );
+  return /* @__PURE__ */ k(te.Provider, { value: S, children: e });
+};
+function Ke() {
+  const e = X(te);
+  if (!e)
+    throw new Error("useViewportContext must be used within a ViewportProvider (or EditorProvider)");
+  return e;
+}
+const ee = Q(null), Ge = ({ 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) => {
+    o(D);
+  }, []), V = m((D) => {
+    c(D);
+  }, []), E = q(
+    () => ({
+      selectedId: t,
+      multiSelection: n,
+      activeChildElement: s,
+      hoveredElementId: r,
+      hideHandles: a,
+      setSelectedId: o,
+      setMultiSelection: i,
+      setHoveredElementId: d,
+      setHideHandles: z,
+      handleSelectionChange: F,
+      handleActiveChildChange: V
+    }),
+    [
+      t,
+      n,
+      s,
+      r,
+      a,
+      F,
+      V
+    ]
+  );
+  return /* @__PURE__ */ k(ee.Provider, { value: E, children: e });
+};
+function je() {
+  const e = X(ee);
+  if (!e)
+    throw new Error("useSelectionContext must be used within a SelectionProvider (or EditorProvider)");
+  return e;
+}
+const oe = Q(null), Ze = ({ children: e, value: t }) => {
+  const o = q(
+    () => ({
+      undo: t.undo,
+      redo: t.redo,
+      canUndo: t.canUndo,
+      canRedo: t.canRedo,
+      undoActiveArtboard: t.undoActiveArtboard,
+      redoActiveArtboard: t.redoActiveArtboard,
+      canUndoActiveArtboard: t.canUndoActiveArtboard,
+      canRedoActiveArtboard: t.canRedoActiveArtboard
+    }),
+    [
+      t.undo,
+      t.redo,
+      t.canUndo,
+      t.canRedo,
+      t.undoActiveArtboard,
+      t.redoActiveArtboard,
+      t.canUndoActiveArtboard,
+      t.canRedoActiveArtboard
+    ]
+  );
+  return /* @__PURE__ */ k(oe.Provider, { value: o, children: e });
+};
+function wo() {
+  const e = X(oe);
+  if (!e)
+    throw new Error("useHistoryContext must be used within a HistoryProvider (or EditorProvider)");
+  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(
+    () => ({
+      expandedPanelType: t,
+      setExpandedPanelType: o,
+      isToolbarMenuOpen: n,
+      setIsToolbarMenuOpen: i,
+      textSelectionVersion: s,
+      setTextSelectionVersion: c,
+      isCanvasReady: r,
+      setCanvasReady: d,
+      isRotating: a,
+      setIsRotating: z
+    }),
+    [t, n, s, r, a]
+  );
+  return /* @__PURE__ */ k(ne.Provider, { value: F, children: e });
+};
+function qe() {
+  const e = X(ne);
+  if (!e)
+    throw new Error("useToolStateContext must be used within a ToolStateProvider (or EditorProvider)");
+  return e;
+}
+const re = Q(null), Qe = ({ children: e, value: t }) => {
+  const o = q(
+    () => ({
+      elements: t.elements,
+      elementStore: t.elementStore,
+      artboards: t.artboards,
+      artboardManager: t.artboardManager,
+      artboardVersion: t.artboardVersion,
+      setElements: t.setElements,
+      refreshArtboards: t.refreshArtboards,
+      getElementById: t.getElementById,
+      handleAddElement: t.handleAddElement,
+      handleElementUpdate: t.handleElementUpdate,
+      handleLoadWorkspace: t.handleLoadWorkspace,
+      handleCopyElements: t.handleCopyElements,
+      handlePasteElements: t.handlePasteElements,
+      fontSize: t.fontSize,
+      fontColor: t.fontColor,
+      fontFamily: t.fontFamily,
+      textAlign: t.textAlign,
+      updateFontSize: t.updateFontSize,
+      setFontSizeValue: t.setFontSizeValue,
+      updateFontColor: t.updateFontColor,
+      updateFontFamily: t.updateFontFamily,
+      updateTextAlign: t.updateTextAlign,
+      canvasRef: t.canvasRef,
+      canvasEditorRef: t.canvasEditorRef
+    }),
+    [
+      t.elements,
+      t.elementStore,
+      t.artboards,
+      t.artboardManager,
+      t.artboardVersion,
+      t.setElements,
+      t.refreshArtboards,
+      t.getElementById,
+      t.handleAddElement,
+      t.handleElementUpdate,
+      t.handleLoadWorkspace,
+      t.handleCopyElements,
+      t.handlePasteElements,
+      t.fontSize,
+      t.fontColor,
+      t.fontFamily,
+      t.textAlign,
+      t.updateFontSize,
+      t.setFontSizeValue,
+      t.updateFontColor,
+      t.updateFontFamily,
+      t.updateTextAlign,
+      t.canvasRef,
+      t.canvasEditorRef
+    ]
+  );
+  return /* @__PURE__ */ k(re.Provider, { value: o, children: e });
+};
+function Eo() {
+  const e = X(re);
+  if (!e)
+    throw new Error("useElementsContext must be used within an ElementsProvider (or EditorProvider)");
+  return e;
+}
+const ie = Q(null), to = ({ children: e, value: t }) => {
+  const o = q(
+    () => ({
+      executeElementUpdate: t.executeElementUpdate,
+      executeAddElement: t.executeAddElement,
+      executeRemoveElement: t.executeRemoveElement,
+      executeReorderElement: t.executeReorderElement,
+      executeCreateArtboard: t.executeCreateArtboard,
+      executeDeleteArtboard: t.executeDeleteArtboard,
+      executeUpdateArtboard: t.executeUpdateArtboard,
+      executeCommandBatch: t.executeCommandBatch,
+      undo: t.undo,
+      redo: t.redo,
+      canUndo: t.canUndo,
+      canRedo: t.canRedo,
+      undoActiveArtboard: t.undoActiveArtboard,
+      redoActiveArtboard: t.redoActiveArtboard,
+      canUndoActiveArtboard: t.canUndoActiveArtboard,
+      canRedoActiveArtboard: t.canRedoActiveArtboard,
+      historyManager: t.historyManager
+    }),
+    [
+      t.executeElementUpdate,
+      t.executeAddElement,
+      t.executeRemoveElement,
+      t.executeReorderElement,
+      t.executeCreateArtboard,
+      t.executeDeleteArtboard,
+      t.executeUpdateArtboard,
+      t.executeCommandBatch,
+      t.undo,
+      t.redo,
+      t.canUndo,
+      t.canRedo,
+      t.undoActiveArtboard,
+      t.redoActiveArtboard,
+      t.canUndoActiveArtboard,
+      t.canRedoActiveArtboard,
+      t.historyManager
+    ]
+  );
+  return /* @__PURE__ */ k(ie.Provider, { value: o, children: e });
+};
+function So() {
+  const e = X(ie);
+  if (!e)
+    throw new Error("useCommandContext must be used within a CommandProvider (or EditorProvider)");
+  return e;
+}
+const eo = Zt("EditorContext"), se = Q(null), ce = Q(null), Ro = () => {
+  const e = X(ce);
+  if (!e)
+    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 = Ke(), r = je(), d = qe(), [a, z] = b(
+    () => t.getAllArtboards()
+  ), [F, V] = b(0), [E, D] = b(
+    () => new Wt()
+  ), p = q(() => E.toArray(), [E]), h = m((u) => {
+    D((A) => {
+      const x = A.toArray(), I = typeof u == "function" ? u(x) : u;
+      return I === x ? A : Wt.fromArray(I);
+    });
+  }, []), S = m(
+    (u) => E.get(u),
+    [E]
+  ), [v, R] = b([]), w = r.selectedId ? E.get(r.selectedId) : void 0, L = m(() => {
+    z([...t.getAllArtboards()]), V((u) => u + 1);
+  }, [t]), {
+    historyManager: nt,
+    executeElementUpdate: _,
+    executeAddElement: M,
+    executeRemoveElement: l,
+    executeReorderElement: f,
+    executeCommandBatch: g,
+    executeCreateArtboard: y,
+    executeDeleteArtboard: C,
+    executeUpdateArtboard: $,
+    undo: P,
+    redo: U,
+    canUndo: N,
+    canRedo: H,
+    undoActiveArtboard: O,
+    redoActiveArtboard: Y,
+    canUndoActiveArtboard: rt,
+    canRedoActiveArtboard: K
+  } = Ve(
+    p,
+    h,
+    t,
+    L
+  ), G = m(
+    (u) => {
+      const A = E.get(u.id);
+      _(A, u);
+    },
+    [E, _]
+  ), ue = m(
+    (u) => {
+      if (!w || !(w instanceof jt))
+        return;
+      const A = w.clone(), x = A.children.findIndex(
+        (I) => I.id === u.id
+      );
+      x >= 0 && (A.children[x] = u, G(A));
+    },
+    [w, G]
+  ), me = r.activeChildElement || w, he = r.activeChildElement ? ue : G, {
+    fontSize: bt,
+    fontColor: wt,
+    fontFamily: Et,
+    textAlign: St,
+    updateFontSize: Rt,
+    setFontSizeValue: Ct,
+    updateFontColor: It,
+    updateFontFamily: Tt,
+    updateTextAlign: Ot
+  } = De(me, he), At = m(
+    async (u) => {
+      var Lt;
+      const A = u.type, x = u, I = t.getActiveArtboardId();
+      if (!I)
+        throw new ot(
+          "E_NO_ACTIVE_ARTBOARD",
+          `addElement({ type: "${A}" }) needs an active artboard and none exists. <Editor.Root> seeds one automatically; with a raw EditorProvider create one first (executeCreateArtboard) or select one (artboardManager.setActiveArtboard).`,
+          { type: A, docSlug: "embed-mode" }
+        );
+      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({
+          id: T,
+          name: u.name,
+          x: mt,
+          y: st,
+          // Defer loading `src` until after the element is in the store so a
+          // synchronously-cached image can't fire onLoadCallback too early.
+          imageUrl: Z ? "" : ft,
+          transformData: {
+            type: "image",
+            width: et,
+            height: et,
+            cropX: 0,
+            cropY: 0,
+            cropWidth: 1,
+            cropHeight: 1,
+            flipHorizontal: !1,
+            flipVertical: !1,
+            borderRadius: 0
+          }
+        });
+        return Z && (W.imageLoaded = !1, W.imageElement = null, W.isCropping = !1, W.imageUrl = Z, W.preserveDimensions = !1, W.onLoadCallback = (J) => {
+          const $t = J.transformData.width, Bt = J.transformData.height, kt = Math.min(et / $t, et / Bt, 1);
+          kt < 1 && (J.transformData.width = $t * kt, J.transformData.height = Bt * kt), J.transformData.cropX = 0, J.transformData.cropY = 0, J.transformData.cropWidth = 1, J.transformData.cropHeight = 1, _(W, J);
+        }), M(W, I), r.setSelectedId(W.id), Z && W.loadImage(Z), { id: W.id, name: u.name ?? "" };
+      }
+      let tt;
+      const at = {
+        text: "custom",
+        circle: "circle",
+        wave: "wave",
+        arch: "arch",
+        shape: "shape"
+      }[A] || "custom", zt = Fe(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;
+      if (A === "shape") {
+        const ft = (x == null ? void 0 : x.shapeType) ?? "rectangle";
+        let et = 200 / j, Z = 200 / j;
+        ft === "ellipse" ? (et = 150 / j, Z = 250 / j) : ft === "line" && (et = 300 / j, Z = 8 / j), tt = new Pe({
+          id: T,
+          name: u.name,
+          x: mt,
+          y: st,
+          transformData: {
+            type: "shape",
+            shapeType: ft,
+            width: et,
+            height: Z,
+            fillColor: "#3b82f6",
+            fillOpacity: 1
+          }
+        });
+      } else
+        tt = new zt.Component({
+          id: T,
+          name: u.name,
+          text: "New Text",
+          x: mt,
+          y: st,
+          fontSize: fe,
+          fontFamily: "Poppins",
+          color: We(B == null ? void 0 : B.backgroundColor),
+          transformData: at === "arch" ? {
+            type: "arch",
+            width: Ht,
+            archHeight: Ne.archHeight
+          } : at === "wave" ? {
+            type: "wave",
+            width: Ht,
+            amplitude: Mt.amplitude,
+            frequency: Mt.frequency
+          } : at === "circle" ? {
+            type: "circle",
+            radius: Ht / 2
+          } : void 0
+        });
+      return t.addElementToArtboard(T, I), M(
+        tt,
+        I,
+        r.selectedId || void 0
+      ), r.setSelectedId(T), { id: T, name: u.name ?? "" };
+    },
+    [t, M, _, r, c.zoom, n]
+  ), vt = m(
+    async (u, A) => {
+      await At({ ...A, type: u });
+    },
+    [At]
+  ), Ft = m(() => {
+    const u = [];
+    if (r.multiSelection.length > 0) {
+      const A = p.filter(
+        (x) => r.multiSelection.includes(x.id)
+      );
+      u.push(...A);
+    } else w && u.push(w);
+    if (u.length > 0) {
+      const A = u.map((x) => x.clone());
+      R(A);
+    }
+  }, [w, r.multiSelection, p]), Pt = m(() => {
+    if (v.length === 0) return;
+    const u = [], A = 30, x = 30;
+    v.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);
+      tt.x = B + A, tt.y = mt + x;
+      let ct = null;
+      if (T && (ct = t.getArtboardIdForElement(
+        T.id
+      )), ct || (ct = t.getActiveArtboardId()), !ct) {
+        eo.warn("[handlePasteElements] No artboard found for pasting");
+        return;
+      }
+      const at = T ? T.id : void 0;
+      M(tt, ct, at), u.push(tt.id);
+    }), u.length === 1 ? r.handleSelectionChange(u[0]) : u.length > 1 && r.setMultiSelection(u);
+  }, [
+    v,
+    E,
+    t,
+    M,
+    r
+  ]), yt = m(() => {
+    if (d.expandedPanelType === "crop" && (w == null ? void 0 : w.transformType) === "image") {
+      const u = w;
+      if (u.isCropping) {
+        const A = u.clone();
+        A.exitCropMode(), _(u, A);
+      }
+    }
+    d.setExpandedPanelType(null);
+  }, [
+    d.expandedPanelType,
+    d.setExpandedPanelType,
+    w,
+    _
+  ]);
+  Dt(() => {
+    const u = (A) => {
+      const x = A.target;
+      if (x.tagName === "CANVAS" || _e(x))
+        return;
+      const T = document.activeElement;
+      if (T != null && T.hasAttribute("data-preserve-selection")) {
+        T.blur();
+        return;
+      }
+      if (d.expandedPanelType !== null) {
+        yt();
+        return;
+      }
+      r.selectedId !== null && r.setSelectedId(null), r.multiSelection.length > 0 && r.setMultiSelection([]);
+    };
+    return document.addEventListener("pointerdown", u), () => document.removeEventListener("pointerdown", u);
+  }, [d.expandedPanelType, yt, r]);
+  const Nt = m(
+    (u, A, x) => {
+      t.clear(), u.forEach((I) => {
+        t.createArtboard(I.toJSON());
+      }), x && t.setActiveArtboard(x), z([...t.getAllArtboards()]), V((I) => I + 1), h(A), r.setSelectedId(null);
+    },
+    [t, r, h]
+  ), _t = q(() => ({
+    // From ViewportContext
+    zoom: c.zoom,
+    panOffset: c.panOffset,
+    isPanning: c.isPanning,
+    zoomIn: c.zoomIn,
+    zoomOut: c.zoomOut,
+    zoomToFit: c.zoomToFit,
+    resetView: c.resetView,
+    setZoom: c.setZoom,
+    setPanOffset: c.setPanOffset,
+    setIsPanning: c.setIsPanning,
+    // From SelectionContext
+    selectedId: r.selectedId,
+    multiSelection: r.multiSelection,
+    activeChildElement: r.activeChildElement,
+    hoveredElementId: r.hoveredElementId,
+    hideHandles: r.hideHandles,
+    setSelectedId: r.setSelectedId,
+    setMultiSelection: r.setMultiSelection,
+    setHoveredElementId: r.setHoveredElementId,
+    setHideHandles: r.setHideHandles,
+    handleSelectionChange: r.handleSelectionChange,
+    handleActiveChildChange: r.handleActiveChildChange,
+    // From ToolStateContext
+    expandedPanelType: d.expandedPanelType,
+    setExpandedPanelType: d.setExpandedPanelType,
+    isToolbarMenuOpen: d.isToolbarMenuOpen,
+    setIsToolbarMenuOpen: d.setIsToolbarMenuOpen,
+    textSelectionVersion: d.textSelectionVersion,
+    setTextSelectionVersion: d.setTextSelectionVersion,
+    isCanvasReady: d.isCanvasReady,
+    setCanvasReady: d.setCanvasReady,
+    isRotating: d.isRotating,
+    setIsRotating: d.setIsRotating,
+    // Cross-context handler
+    clearExpandedPanel: yt,
+    // Core state (element/artboard domain)
+    artboardManager: t,
+    artboards: a,
+    elements: p,
+    elementStore: E,
+    getElementById: S,
+    // Derived state (cross-context)
+    selectedElement: w,
+    // Refs
+    canvasRef: o,
+    canvasEditorRef: n,
+    // Element setters
+    setElements: h,
+    // Artboard version counter
+    artboardVersion: F,
+    // Handlers
+    refreshArtboards: L,
+    handleElementUpdate: G,
+    addElement: At,
+    handleAddElement: vt,
+    handleLoadWorkspace: Nt,
+    handleCopyElements: Ft,
+    handlePasteElements: Pt,
+    hasClipboardContent: v.length > 0,
+    // Command history (undo/redo actions + execute functions)
+    historyManager: nt,
+    executeElementUpdate: _,
+    executeAddElement: M,
+    executeRemoveElement: l,
+    executeReorderElement: f,
+    executeCommandBatch: g,
+    executeCreateArtboard: y,
+    executeDeleteArtboard: C,
+    executeUpdateArtboard: $,
+    undo: P,
+    redo: U,
+    canUndo: N,
+    canRedo: H,
+    undoActiveArtboard: O,
+    redoActiveArtboard: Y,
+    canUndoActiveArtboard: rt,
+    canRedoActiveArtboard: K,
+    // Element properties
+    fontSize: bt,
+    fontColor: wt,
+    fontFamily: Et,
+    textAlign: St,
+    updateFontSize: Rt,
+    setFontSizeValue: Ct,
+    updateFontColor: It,
+    updateFontFamily: Tt,
+    updateTextAlign: Ot
+  }), [
+    // Viewport
+    c.zoom,
+    c.panOffset,
+    c.isPanning,
+    c.zoomIn,
+    c.zoomOut,
+    c.zoomToFit,
+    c.resetView,
+    c.setZoom,
+    c.setPanOffset,
+    c.setIsPanning,
+    // Selection
+    r.selectedId,
+    r.multiSelection,
+    r.activeChildElement,
+    r.hoveredElementId,
+    r.hideHandles,
+    r.setSelectedId,
+    r.setMultiSelection,
+    r.setHoveredElementId,
+    r.setHideHandles,
+    r.handleSelectionChange,
+    r.handleActiveChildChange,
+    // Tool state
+    d.expandedPanelType,
+    d.setExpandedPanelType,
+    d.isToolbarMenuOpen,
+    d.setIsToolbarMenuOpen,
+    d.textSelectionVersion,
+    d.setTextSelectionVersion,
+    d.isCanvasReady,
+    d.setCanvasReady,
+    d.isRotating,
+    d.setIsRotating,
+    yt,
+    // Element/artboard domain
+    t,
+    a,
+    p,
+    E,
+    S,
+    w,
+    o,
+    n,
+    h,
+    F,
+    L,
+    G,
+    At,
+    vt,
+    Nt,
+    Ft,
+    Pt,
+    v,
+    // Command history
+    nt,
+    _,
+    M,
+    l,
+    f,
+    g,
+    y,
+    C,
+    $,
+    P,
+    U,
+    N,
+    H,
+    O,
+    Y,
+    rt,
+    K,
+    // Element properties
+    bt,
+    wt,
+    Et,
+    St,
+    Rt,
+    Ct,
+    It,
+    Tt,
+    Ot
+  ]);
+  return i.current = _t, /* @__PURE__ */ k(ce.Provider, { value: s, children: /* @__PURE__ */ k(
+    Ze,
+    {
+      value: {
+        undo: P,
+        redo: U,
+        canUndo: N,
+        canRedo: H,
+        undoActiveArtboard: O,
+        redoActiveArtboard: Y,
+        canUndoActiveArtboard: rt,
+        canRedoActiveArtboard: K
+      },
+      children: /* @__PURE__ */ k(
+        Qe,
+        {
+          value: {
+            elements: p,
+            elementStore: E,
+            artboards: a,
+            artboardManager: t,
+            artboardVersion: F,
+            setElements: h,
+            refreshArtboards: L,
+            getElementById: S,
+            handleAddElement: vt,
+            handleElementUpdate: G,
+            handleLoadWorkspace: Nt,
+            handleCopyElements: Ft,
+            handlePasteElements: Pt,
+            fontSize: bt,
+            fontColor: wt,
+            fontFamily: Et,
+            textAlign: St,
+            updateFontSize: Rt,
+            setFontSizeValue: Ct,
+            updateFontColor: It,
+            updateFontFamily: Tt,
+            updateTextAlign: Ot,
+            canvasRef: o,
+            canvasEditorRef: n
+          },
+          children: /* @__PURE__ */ k(
+            to,
+            {
+              value: {
+                executeElementUpdate: _,
+                executeAddElement: M,
+                executeRemoveElement: l,
+                executeReorderElement: f,
+                executeCommandBatch: g,
+                executeCreateArtboard: y,
+                executeDeleteArtboard: C,
+                executeUpdateArtboard: $,
+                undo: P,
+                redo: U,
+                canUndo: N,
+                canRedo: H,
+                undoActiveArtboard: O,
+                redoActiveArtboard: Y,
+                canUndoActiveArtboard: rt,
+                canRedoActiveArtboard: K,
+                historyManager: nt
+              },
+              children: /* @__PURE__ */ k(se.Provider, { value: _t, children: e })
+            }
+          )
+        }
+      )
+    }
+  ) });
+}, Co = ({
+  children: e,
+  initialArtboardConfig: t = {},
+  viewPadding: o = 0.9
+}) => {
+  const [n] = b(() => {
+    const c = new Oe(), r = {
+      name: t.name || "Artboard 1",
+      x: t.x ?? 0,
+      y: t.y ?? 0,
+      width: t.width ?? 1e3,
+      height: t.height ?? 1e3,
+      backgroundColor: t.backgroundColor || Te
+    };
+    return c.createArtboard(r), c;
+  }), i = pt(null), s = pt(null);
+  return /* @__PURE__ */ k(
+    Ye,
+    {
+      artboardManager: n,
+      canvasRef: i,
+      viewPadding: o,
+      children: /* @__PURE__ */ k(Ge, { children: /* @__PURE__ */ k(Je, { children: /* @__PURE__ */ k(
+        oo,
+        {
+          artboardManager: n,
+          canvasRef: i,
+          canvasEditorRef: s,
+          children: e
+        }
+      ) }) })
+    }
+  );
+}, Io = () => {
+  const e = X(se);
+  if (!e)
+    throw new Error("useEditor must be used within EditorProvider");
+  return e;
+}, ut = [];
+function To(e) {
+  He() && ut.push(e);
+}
+function Oo() {
+  return [...ut];
+}
+function vo() {
+  ut.length = 0;
+}
+function Fo() {
+  if (ut.length === 0) return;
+  const e = ut.map((t) => ze(t) ? `${t.code}: ${t.message}` : `${t.name}: ${t.message}`).join(`
+  - `);
+  throw ut.length = 0, new Error(
+    `expectNoEditorErrors: ${e.includes(`
+`) ? "errors were" : "an error was"} contained by <Editor.Root>'s boundary during this test:
+  - ${e}
+A contained error renders an error card in prod — this composition is broken even if the test rendered "successfully".`
+  );
+}
+const no = 1;
+function it(e) {
+  return typeof e == "number" && Number.isFinite(e) ? Math.round(e * 100) / 100 : e;
+}
+function ae(e) {
+  return {
+    ...e,
+    ...e.x !== void 0 && { x: it(e.x) },
+    ...e.y !== void 0 && { y: it(e.y) },
+    ...e.width !== void 0 && { width: it(e.width) },
+    ...e.height !== void 0 && { height: it(e.height) },
+    ...e.rotation !== void 0 && { rotation: it(e.rotation) }
+  };
+}
+function ro(e) {
+  var n;
+  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));
+  }
+  return {
+    schemaVersion: no,
+    artboards: t.map((i, s) => ({
+      id: `artboard-${s + 1}`,
+      name: i.name || "Front",
+      x: 0,
+      y: 0,
+      width: it(i.width || 800),
+      height: it(i.height || 800),
+      backgroundColor: i.backgroundColor || "transparent",
+      // Pass the artboard's flag through — the server worker only paints the
+      // background when this is true. Hardcoding `false` here silently dropped
+      // explicitly-set artboard backgrounds from every realtime mockup while
+      // the editor kept showing them (WYSIWYG drift).
+      exportBackground: i.exportBackground ?? !1,
+      elements: o[s],
+      distressTexture: i.distressTexture,
+      imageMask: i.imageMask
+    }))
+  };
+}
+function io(e) {
+  const t = e.type || e.transformType;
+  if (t === "image")
+    return so(e);
+  const { artboard: o, ...n } = e;
+  return ae({
+    ...n,
+    type: t
+  });
+}
+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 = {
+    id: e.id,
+    type: "image",
+    x: e.x || 0,
+    y: e.y || 0,
+    width: s,
+    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);
+}
+const Gt = "center", de = Symbol.for("snowcone.canvas.layerToken");
+function Po(e) {
+  return typeof e == "object" && e !== null && e[de] === !0 && typeof e.name == "string" && (e.kind === "text" || e.kind === "image");
+}
+function co(e, t) {
+  return Object.freeze({ kind: e, name: t, [de]: !0 });
+}
+const le = Symbol.for("snowcone.canvas.colorToken");
+function ao(e) {
+  return typeof e == "object" && e !== null && e[le] === !0 && typeof e.name == "string" && typeof e.value == "string";
+}
+function lo(e, t) {
+  return Object.freeze({ name: e, value: t, [le]: !0 });
+}
+function uo(e) {
+  let t = e.trim().toUpperCase();
+  return /^#[0-9A-F]{3}$/.test(t) && (t = "#" + t[1] + t[1] + t[2] + t[2] + t[3] + t[3]), /^#[0-9A-F]{6}$/.test(t) ? t : null;
+}
+function xt(e) {
+  return ao(e) ? e.value : e;
+}
+function Vt(e) {
+  const t = e.transformType;
+  return t === "image" ? "image" : t === "shape" || t === "group" || t === "path" ? null : "text";
+}
+function mo(e) {
+  return e === "top-left" || e === "left" || e === "bottom-left" ? "left" : e === "top-right" || e === "right" || e === "bottom-right" ? "right" : "center";
+}
+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;
+  return { x: d, y: a };
+}
+function fo(e, t, o) {
+  const n = t / o;
+  if (e >= n) {
+    const c = o * e, r = t / c;
+    return {
+      width: c,
+      height: o,
+      cropX: (1 - r) / 2,
+      cropY: 0,
+      cropWidth: r,
+      cropHeight: 1
+    };
+  }
+  const i = t / e, s = o / i;
+  return {
+    width: t,
+    height: i,
+    cropX: 0,
+    cropY: (1 - s) / 2,
+    cropWidth: 1,
+    cropHeight: s
+  };
+}
+class lt {
+  constructor(t) {
+    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)
+        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)
+        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" }
+        );
+      this.colorRoles.set(o, i);
+    }
+    this.current = {
+      name: t.name || "Front",
+      width: t.width,
+      height: t.height,
+      backgroundColor: xt(t.backgroundColor),
+      role: t.role
+    }, this.activeName = this.current.name;
+  }
+  /**
+   * Seed a builder from a previously saved canvas state — the editor shape
+   * `<SnowconeCanvas onChange>` emits (and `toJSON()` produces).
+   *
+   * This is how a saved editable template re-enters the turnkey embed path:
+   * load the template's state JSON, lift it back into a `DesignBuilder`, and
+   * hand it to `<RealtimeEmbed design={…}>`. By default the active artboard
+   * becomes the builder's artboard; elements tagged for other artboards are
+   * skipped (untagged elements are assumed to belong to the active one).
+   *
+   * Pass `{ artboards: 'all' }` to load a multi-page template (ADR-0086)
+   * whole: every artboard (with its pacing `role`) and every element are
+   * kept, membership tags preserved, so `toJSON()` / `toServerRequest()`
+   * 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];
+    if (!n)
+      throw new Error("DesignBuilder.fromState(): state has no artboards");
+    const i = new lt({
+      name: n.name,
+      width: n.width,
+      height: n.height,
+      backgroundColor: n.backgroundColor,
+      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;
+    }
+    for (const s of t.elements)
+      s.artboard && s.artboard !== n.name || i.els.push({ ...s });
+    return i;
+  }
+  nextId(t) {
+    return `${t}-${++this.idCounter}`;
+  }
+  /** A wire-shape snapshot of an authoring artboard, applying the same
+   *  background-export rule everywhere (a design background is part of the
+   *  design — exports and server renders paint it). */
+  static snapshotArtboard(t) {
+    return {
+      name: t.name,
+      width: t.width,
+      height: t.height,
+      ...t.backgroundColor ? {
+        backgroundColor: t.backgroundColor,
+        exportBackground: t.backgroundColor !== "transparent"
+      } : {},
+      ...t.role ? { role: t.role } : {}
+    };
+  }
+  /**
+   * Open a NEW artboard (placement) and make it the authoring context: layer
+   * calls after this target the new artboard — anchor math uses its
+   * dimensions, and the elements carry its membership tag (the public
+   * `artboard` field, PR #482). The FIRST artboard (from `design({ name })`)
+   * remains the initially-active placement when the design mounts; switch at
+   * runtime with `usePlacements()` / `<Editor.Placements/>` (ADR-0088).
+   *
+   * `label` must be the product's placement label (case-sensitive) — the same
+   * artboard-name-is-placement-label rule as `design({ name })`.
+   *
+   * ```ts
+   * const seed = design({ name: 'Front', width: 1480, height: 2328 })
+   *   .text('YOUR NAME', { anchor: 'top', name: 'headline' })
+   *   .artboard('Back', { width: 1480, height: 2328 })
+   *   .text('EST. 2026', { anchor: 'center', name: 'backline' });
+   * ```
+   *
+   * @throws EditorError `E_DUPLICATE_ARTBOARD` — the design already has an
+   *   artboard with this label.
+   */
+  artboard(t, o) {
+    if (!(o.width > 0) || !(o.height > 0))
+      throw new Error("design().artboard(): width and height must be positive numbers");
+    if (this.allArtboards || (this.allArtboards = [lt.snapshotArtboard(this.current)]), this.allArtboards.some((n) => n.name === t))
+      throw new ot(
+        "E_DUPLICATE_ARTBOARD",
+        `the design already has an artboard "${t}" — artboard names are placement labels and must be unique. Existing: ${JSON.stringify(this.allArtboards.map((n) => n.name))}.`,
+        { artboardName: t, validNames: this.allArtboards.map((n) => n.name), docSlug: "embed-mode" }
+      );
+    for (const n of this.els)
+      n.artboard || (n.artboard = this.current.name);
+    return this.current = {
+      name: t,
+      width: o.width,
+      height: o.height,
+      backgroundColor: xt(o.backgroundColor),
+      role: o.role
+    }, this.allArtboards.push(lt.snapshotArtboard(this.current)), this;
+  }
+  background(t, o = {}) {
+    const { width: n, height: i } = this.current;
+    let s;
+    if (o.aspectRatio && o.aspectRatio > 0) {
+      const r = fo(o.aspectRatio, n, i);
+      s = {
+        type: "image",
+        width: r.width,
+        height: r.height,
+        cropX: r.cropX,
+        cropY: r.cropY,
+        cropWidth: r.cropWidth,
+        cropHeight: r.cropHeight,
+        flipHorizontal: !1,
+        flipVertical: !1,
+        borderRadius: 0
+      };
+    } else
+      s = {
+        type: "image",
+        width: n,
+        height: i,
+        cropX: 0,
+        cropY: 0,
+        cropWidth: 1,
+        cropHeight: 1,
+        flipHorizontal: !1,
+        flipVertical: !1,
+        borderRadius: 0
+      };
+    const c = {
+      id: this.nextId("bg"),
+      transformType: "image",
+      x: n / 2,
+      y: i / 2,
+      rotation: 0,
+      opacity: o.opacity ?? 1,
+      imageUrl: t,
+      imageAspectRatio: o.aspectRatio,
+      transformData: s,
+      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 ?? Gt, s, c, n, i, o.padding ?? 0), a = {
+      id: this.nextId("img"),
+      transformType: "image",
+      x: r,
+      y: d,
+      rotation: o.rotation ?? 0,
+      opacity: o.opacity ?? 1,
+      imageUrl: t,
+      imageAspectRatio: o.aspectRatio,
+      transformData: {
+        type: "image",
+        width: s,
+        height: c,
+        cropX: 0,
+        cropY: 0,
+        cropWidth: 1,
+        cropHeight: 1,
+        flipHorizontal: !1,
+        flipVertical: !1,
+        borderRadius: 0
+      },
+      ...o.name ? { name: o.name } : {}
+    };
+    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 = {
+      id: this.nextId("text"),
+      transformType: "custom",
+      x: c,
+      y: r,
+      rotation: o.rotation ?? 0,
+      text: t,
+      fontSize: s,
+      fontFamily: o.fontFamily ?? "Anton",
+      color: xt(o.color) ?? "#ffffff",
+      textAlign: o.textAlign ?? "center",
+      bold: o.bold ?? !1,
+      italic: o.italic ?? !1,
+      transformData: { type: "custom" },
+      ...o.name ? { name: o.name } : {}
+    };
+    return this.els.push(d), this;
+  }
+  /**
+   * Mint a {@link LayerToken} for a named layer — the only currency
+   * `Editor.TextField` accepts (ADR-0085 §1). Compile time: `name` is
+   * constrained to this design's declared layer names, kind inferred from
+   * which per-kind union it falls in. Runtime: validated EAGERLY against the
+   * built elements (nearest the mistake), so CMS/JSON-loaded designs get the
+   * same protection with `string` typing.
+   *
+   * @throws EditorError `E_LAYER_NOT_FOUND` — no layer with this name; lists
+   *   the valid names per kind.
+   * @throws EditorError `E_LAYER_WRONG_KIND` — the name matches a layer that
+   *   is not bindable (shape/group/path).
+   */
+  layer(t) {
+    const o = this.els.find((i) => i.name === t);
+    if (!o) {
+      const i = this.layerNamesOfKind("text"), s = 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" }
+      );
+    }
+    const n = Vt(o);
+    if (!n)
+      throw new ot(
+        "E_LAYER_WRONG_KIND",
+        `layer "${t}" is a ${o.transformType} element — only text and image layers are bindable. Bindable layers: ${JSON.stringify([...this.layerNamesOfKind("text"), ...this.layerNamesOfKind("image")])}.`,
+        { layerName: t, actualType: o.transformType, docSlug: "embed-mode" }
+      );
+    return co(n, t);
+  }
+  /**
+   * Mint a {@link ColorToken} for a declared color role. Compile time: `name`
+   * is constrained to the roles declared in `design({ colors })`. Runtime:
+   * validated against the declared roles (CMS/JSON-built designs degrade to
+   * `string` typing and rely on this throw).
+   *
+   * Use the token wherever the design paints the role (`fill`, `color`) AND
+   * as the `useColorBinding` argument — one source of truth, no hand-synced
+   * hex pairs.
+   *
+   * @throws EditorError `E_COLOR_ROLE_NOT_FOUND` — no role with this name;
+   *   lists the declared roles.
+   */
+  color(t) {
+    const o = this.colorRoles.get(t);
+    if (o === void 0)
+      throw new ot(
+        "E_COLOR_ROLE_NOT_FOUND",
+        `no color role "${t}" in this design. Declared roles: ${JSON.stringify([...this.colorRoles.keys()])}. Declare roles up front — design({ …, colors: { ${t}: '#FF2D8A' } }).`,
+        { roleName: t, validNames: [...this.colorRoles.keys()], docSlug: "embed-mode" }
+      );
+    return lo(t, o);
+  }
+  /** Names of bindable layers of one kind, in stack order. @internal */
+  layerNamesOfKind(t) {
+    return this.els.filter((o) => Vt(o) === t).map((o) => o.name).filter((o) => !!o);
+  }
+  /** 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 ?? Gt, c, r, n, i, o.padding ?? 0), z = {
+      type: "shape",
+      shapeType: t,
+      width: c,
+      height: r,
+      fillColor: xt(o.fill) ?? "#000000",
+      fillOpacity: o.opacity ?? 1,
+      ...o.points !== void 0 ? { points: o.points } : {},
+      ...o.sides !== void 0 ? { sides: o.sides } : {}
+    }, F = {
+      id: this.nextId("shape"),
+      transformType: "shape",
+      x: d,
+      y: a,
+      rotation: o.rotation ?? 0,
+      transformData: z,
+      ...o.name ? { name: o.name } : {}
+    };
+    return this.els.push(F), this;
+  }
+  /** The composed elements, in render order (background first). Editor shape. */
+  get elements() {
+    return this.els.map((t) => ({ ...t }));
+  }
+  /** Editor-shape canvas state for `<SnowconeCanvas initialElements=… />` and
+   *  `serializeStateForServer`. `activeArtboard` is the artboard name. A
+   *  builder loaded with `fromState(…, { artboards: 'all' })` emits every
+   *  page (artboard `role`s and element membership tags included). */
+  toJSON() {
+    return this.allArtboards ? {
+      // Elements added via builder methods since the last context switch are
+      // untagged — they belong to the CURRENT authoring artboard; stamp them
+      // so the multi-artboard state groups them correctly.
+      elements: this.els.map(
+        (t) => t.artboard ? { ...t } : { ...t, artboard: this.current.name }
+      ),
+      artboards: this.allArtboards.map((t) => ({ ...t })),
+      // The initially-active placement (first artboard / saved state's
+      // active) — NOT the last `.artboard()` authoring context.
+      activeArtboard: this.activeName
+    } : {
+      elements: this.elements,
+      // A background set on a design is part of the design: flag it renderable
+      // so exports and server renders paint it, matching the editor (the
+      // export worker skips it without `exportBackground`) — see snapshotArtboard.
+      artboards: [lt.snapshotArtboard(this.current)],
+      activeArtboard: this.current.name
+    };
+  }
+  /** Server-render payload for `RenderSession.renderState(placement, …)`.
+   *  Equivalent to `serializeStateForServer(design.toJSON())`. */
+  toServerRequest() {
+    return ro(this.toJSON());
+  }
+}
+function No(e) {
+  return new lt(e);
+}
+function zo(e) {
+  return Vt(e);
+}
+export {
+  Jt as B,
+  no as C,
+  lt as D,
+  Co as E,
+  qt as P,
+  Ke as a,
+  _e as b,
+  So as c,
+  No as d,
+  Eo as e,
+  wo as f,
+  je as g,
+  qe as h,
+  Po as i,
+  ao as j,
+  go as k,
+  zo as l,
+  Ro as m,
+  Fo as n,
+  Oo as o,
+  xo as p,
+  vo as q,
+  To as r,
+  ro as s,
+  Le as t,
+  Io as u,
+  bo as v
+};
+//# sourceMappingURL=design-builder-CBG2hKc8.js.map