@snowcone-app/canvas 0.17.3 → 0.18.0

package/dist/EditorContext-5QpqAhjh.js

@@ -0,0 +1,1184 @@
+import { jsx as H } from "react/jsx-runtime";
+import { useContext as X, useSyncExternalStore as ot, useCallback as a, createContext as Q, useRef as ue, useState as E, useEffect as Ce, useMemo as q } from "react";
+import { y as He, N as rt, a9 as it, aa as ct, G as _e, ab as st, ac as dt, ad as at, ae as lt, af as ut, c as ke, z as mt, ag as ft, ah as At, ai as pt, E as ht, L as Ve, I as xt, g as yt, S as Et, aj as St, ak as Ne } from "./FontAnalyzer-DIlqmyuf.js";
+const We = Q(null), bt = () => () => {
+}, De = () => 0;
+function Xt() {
+  const t = X(We), e = ot(
+    t ? t.subscribe : bt,
+    t ? t.getVersion : De,
+    t ? t.getVersion : De
+  );
+  return a(
+    (o) => !!(t && o && t.getBoundLayer(o)),
+    // `version` is the reactivity key: a registry change must mint a new
+    // callback so memoized consumers re-evaluate.
+    [t, e]
+  );
+}
+class It extends Error {
+  constructor(e, o, n = {}) {
+    super(`[Editor] ${e}: ${o}`), this.name = "EditorError", this.code = e, this.data = { code: e, ...n };
+  }
+}
+function Yt(t) {
+  return t instanceof Error && t.name === "EditorError" && "code" in t;
+}
+function jt() {
+  var t;
+  return typeof He < "u" && ((t = He.env) == null ? void 0 : t.NODE_ENV) !== "production";
+}
+const fe = ke("useCommandHistory");
+function wt(t, e, o, n) {
+  const d = ue(new rt(o)), l = X(We), i = a(
+    (c, A) => {
+      const y = c == null ? void 0 : c.name;
+      if (!l || !y) return;
+      const x = l.getBoundLayer(y);
+      if (x)
+        throw new It(
+          "E_BOUND_LAYER_MUTATION",
+          `cannot ${A} layer "${y}" — a mounted <${x.part} layer={design.layer("${y}")}> is bound to it. Unmount that field first, or keep the layer and set its text through the field / its binding instead.`,
+          { layer: y, part: x.part, operation: A, docSlug: "embed-mode" }
+        );
+    },
+    [l]
+  ), [r, u] = E({
+    canUndo: !1,
+    canRedo: !1,
+    // Per-artboard state for the active artboard
+    canUndoActiveArtboard: !1,
+    canRedoActiveArtboard: !1
+  }), s = a(() => {
+    const c = d.current, A = o.getActiveArtboardId();
+    u({
+      canUndo: c.canUndo(),
+      canRedo: c.canRedo(),
+      // Per-artboard state - only check active artboard's history
+      canUndoActiveArtboard: A ? c.canUndoArtboard(A) : !1,
+      canRedoActiveArtboard: A ? c.canRedoArtboard(A) : !1
+    });
+  }, [o]), V = a(
+    (c, A) => {
+      c && c.name !== A.name && i(c, "rename");
+      const y = new it(
+        A.id,
+        c || null,
+        A,
+        (P) => {
+          e((k) => k.map((C) => C.id === P.id ? P : C));
+        }
+      ), x = o.getArtboardIdForElement(A.id);
+      if (x)
+        d.current.executeOnArtboard(x, y);
+      else {
+        const P = o.getActiveArtboardId();
+        P && d.current.executeOnArtboard(P, y);
+      }
+      s();
+    },
+    [e, o, s, i]
+  ), O = a(
+    (c, A, y, x) => {
+      const P = A || o.getActiveArtboardId();
+      if (!P) {
+        fe.warn("No active artboard to add element to");
+        return;
+      }
+      const k = new ct(
+        c,
+        (C) => {
+          const N = C;
+          e((v) => {
+            if (x) {
+              const U = v.findIndex((R) => R.id === x);
+              if (U !== -1) {
+                const R = [...v];
+                return R.splice(U, 0, N), R;
+              }
+            }
+            if (y) {
+              const U = v.findIndex((R) => R.id === y);
+              if (U !== -1) {
+                const R = [...v];
+                return R.splice(U + 1, 0, N), R;
+              }
+              for (let R = 0; R < v.length; R++) {
+                const Y = v[R];
+                if (Y instanceof _e && Y.children) {
+                  const ne = Y.children.findIndex((j) => j.id === y);
+                  if (ne !== -1) {
+                    const j = Y.clone();
+                    j.children.splice(ne + 1, 0, N);
+                    const J = [...v];
+                    return J[R] = j, J;
+                  }
+                }
+              }
+            }
+            return [...v, N];
+          }), o.addElementToArtboard(C.id, P);
+        },
+        (C) => {
+          e((N) => N.filter((v) => v.id !== C)), o.removeElementFromArtboard(C);
+        }
+      );
+      d.current.executeOnArtboard(P, k), s();
+    },
+    [e, o, s]
+  ), D = a(
+    (c) => {
+      i(c, "delete");
+      const A = o.getArtboardIdForElement(c.id);
+      if (!A) {
+        fe.warn("Element not found in any artboard");
+        return;
+      }
+      const y = new st(
+        c,
+        (x) => {
+          e((P) => [...P, x]), o.addElementToArtboard(x.id, A);
+        },
+        (x) => {
+          e((P) => P.filter((k) => k.id !== x)), o.removeElementFromArtboard(x);
+        }
+      );
+      d.current.executeOnArtboard(A, y), s();
+    },
+    [e, o, s, i]
+  ), w = a(
+    (c) => {
+      const A = new dt(c, o);
+      d.current.executeGlobal(A), s(), n == null || n();
+    },
+    [o, s, n]
+  ), L = a(
+    (c) => {
+      const A = new at(c, o);
+      d.current.executeGlobal(A), s(), n == null || n();
+    },
+    [o, s, n]
+  ), p = a(
+    (c, A, y) => {
+      const x = new lt(c, A, y, o);
+      d.current.executeGlobal(x), s(), n == null || n();
+    },
+    [o, s, n]
+  ), f = a(
+    (c) => {
+      if (c.length === 0)
+        return;
+      const A = o.getActiveArtboardId();
+      if (!A) {
+        fe.warn("No active artboard for batch execution");
+        return;
+      }
+      const y = c.map((x) => new class extends Object {
+        execute() {
+          x.execute();
+        }
+        undo() {
+          x.undo();
+        }
+      }());
+      d.current.executeBatchOnArtboard(A, y), s();
+    },
+    [o, s]
+  ), T = a(() => {
+    d.current.undo() && (s(), n == null || n());
+  }, [s, n]), z = a(() => {
+    d.current.redo() && (s(), n == null || n());
+  }, [s, n]), g = a(() => {
+    const c = o.getActiveArtboardId();
+    c && d.current.undoArtboard(c) && (s(), n == null || n());
+  }, [o, s, n]), b = a(() => {
+    const c = o.getActiveArtboardId();
+    c && d.current.redoArtboard(c) && (s(), n == null || n());
+  }, [o, s, n]), _ = a(() => {
+    d.current.clear(), s();
+  }, [s]), te = a(
+    (c) => {
+      d.current.clearArtboardHistory(c), s();
+    },
+    [s]
+  ), B = ue(null);
+  Ce(() => {
+    const c = o.getActiveArtboardId();
+    c !== B.current && (B.current = c, s());
+  });
+  const W = a(
+    (c, A, y) => {
+      const x = t.map((C) => C.id), P = o.getArtboardIdForElement(c);
+      if (!P) {
+        fe.warn("Element not found in any artboard");
+        return;
+      }
+      const k = new ut(c, A, y, x, (C) => {
+        e((N) => {
+          const v = new Map(N.map((U) => [U.id, U]));
+          return C.map((U) => v.get(U)).filter(Boolean);
+        });
+      });
+      d.current.executeOnArtboard(P, k), s();
+    },
+    [t, e, o, s]
+  );
+  return {
+    // Element operations
+    executeElementUpdate: V,
+    executeAddElement: O,
+    executeRemoveElement: D,
+    executeReorderElement: W,
+    // Batch operations
+    executeCommandBatch: f,
+    // Artboard operations
+    executeCreateArtboard: w,
+    executeDeleteArtboard: L,
+    executeUpdateArtboard: p,
+    // Undo/redo (smart - considers last operation and active artboard)
+    undo: T,
+    redo: z,
+    // Undo/redo for active artboard only (element operations)
+    undoActiveArtboard: g,
+    redoActiveArtboard: b,
+    clearHistory: _,
+    clearArtboardHistory: te,
+    // State (smart - considers last operation)
+    canUndo: r.canUndo,
+    canRedo: r.canRedo,
+    // State for active artboard only
+    canUndoActiveArtboard: r.canUndoActiveArtboard,
+    canRedoActiveArtboard: r.canRedoActiveArtboard,
+    historyManager: d.current
+  };
+}
+function oe(t) {
+  return t && "fontSize" in t && "color" in t && "fontFamily" in t;
+}
+function Tt(t, e) {
+  const [o, n] = E(32), [d, l] = E("#333333"), [i, r] = E("Arial"), [u, s] = E("center");
+  Ce(() => {
+    if (t && oe(t)) {
+      const p = t.transformType === "circle" && "getEffectiveFontSize" in t ? Math.round(t.getEffectiveFontSize()) : Math.round(t.fontSize), f = t.color, T = t.fontFamily, z = t.textAlign;
+      n((g) => g !== p ? p : g), l((g) => g !== f ? f : g), r((g) => g !== T ? T : g), s((g) => g !== z ? z : g);
+    }
+  }, [t]);
+  const V = a(
+    (p) => {
+      if (!t || !oe(t)) return;
+      const f = Math.max(ft, Math.min(At, o + p));
+      n(f);
+      const T = t.clone();
+      T.transformType === "circle" && "setEffectiveFontSize" in T ? T.setEffectiveFontSize(f) : T.setFontSize(f), e(T);
+    },
+    [t, o, e]
+  ), O = a(
+    (p) => {
+      if (!t || !oe(t)) return;
+      n(p);
+      const f = t.clone();
+      f.transformType === "circle" && "setEffectiveFontSize" in f ? f.setEffectiveFontSize(p) : f.setFontSize(p), e(f);
+    },
+    [t, e]
+  ), D = a(
+    (p) => {
+      if (!t || !oe(t)) return;
+      l(p);
+      const f = t.clone();
+      if (f.color = p, f.richText)
+        for (const T of f.richText.spans)
+          T.style.color = void 0;
+      e(f);
+    },
+    [t, e]
+  ), w = a(
+    (p) => {
+      if (!t || !oe(t)) return;
+      const f = t.fontFamily;
+      f !== p && mt.clearCache(f), r(p);
+      const T = t.clone();
+      T.fontFamily = p, e(T);
+    },
+    [t, e]
+  ), L = a(
+    (p) => {
+      if (!t || !oe(t)) return;
+      s(p);
+      const f = t.clone();
+      f.textAlign = p, e(f);
+    },
+    [t, e]
+  );
+  return {
+    // State
+    fontSize: o,
+    fontColor: d,
+    fontFamily: i,
+    textAlign: u,
+    // State setters (for UI only)
+    setFontSize: n,
+    setFontColor: l,
+    setFontFamily: r,
+    setTextAlign: s,
+    // Update functions (update element + UI)
+    updateFontSize: V,
+    setFontSizeValue: O,
+    updateFontColor: D,
+    updateFontFamily: w,
+    updateTextAlign: L
+  };
+}
+const Ze = "data-preserve-selection";
+function gt(t) {
+  if (!(t instanceof Element))
+    return !1;
+  let e = t;
+  const o = [];
+  for (; e; ) {
+    const n = e.id ? `#${e.id}` : "", d = e.className ? `.${String(e.className).split(" ").slice(0, 2).join(".")}` : "";
+    if (o.push(`${e.tagName.toLowerCase()}${n}${d}`), e.hasAttribute(Ze))
+      return !0;
+    const l = e.getAttribute("role");
+    if (l === "dialog" || l === "alertdialog" || l === "menu" || l === "listbox")
+      return !0;
+    const i = e.getAttribute("data-slot");
+    if (i && (i.includes("popover") || i.includes("dialog")) || e.hasAttribute("data-radix-popper-content-wrapper"))
+      return !0;
+    e = e.parentElement;
+  }
+  return !1;
+}
+const Jt = {
+  [Ze]: ""
+};
+function Pt(t) {
+  const e = $e(t);
+  return e !== null && e < 0.5;
+}
+function Kt(t) {
+  const e = $e(t);
+  return e !== null && e >= 0.5;
+}
+function $e(t) {
+  const e = t.trim();
+  if (e.startsWith("#")) {
+    const n = e.slice(1);
+    let d, l, i;
+    if (n.length === 3)
+      d = parseInt(n[0] + n[0], 16), l = parseInt(n[1] + n[1], 16), i = parseInt(n[2] + n[2], 16);
+    else if (n.length === 6)
+      d = parseInt(n.slice(0, 2), 16), l = parseInt(n.slice(2, 4), 16), i = parseInt(n.slice(4, 6), 16);
+    else return null;
+    return Number.isNaN(d) || Number.isNaN(l) || Number.isNaN(i) ? null : Le(d, l, i);
+  }
+  const o = e.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  return o ? Le(Number(o[1]), Number(o[2]), Number(o[3])) : null;
+}
+function Le(t, e, o) {
+  const n = (d) => {
+    const l = d / 255;
+    return l <= 0.03928 ? l / 12.92 : Math.pow((l + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * n(t) + 0.7152 * n(e) + 0.0722 * n(o);
+}
+const Ft = "#333333", Rt = "#f4f4f5";
+function Ct(t) {
+  return t && Pt(t) ? Rt : Ft;
+}
+const Ge = Q(null), vt = 0.1, zt = 4, Be = 0.25, Ot = ({
+  children: t,
+  artboardManager: e,
+  canvasRef: o,
+  viewPadding: n = 0.9
+}) => {
+  const [d, l] = E(1), [i, r] = E({ x: 0, y: 0 }), [u, s] = E(!1), [V, O] = E(1), D = a(() => {
+    O(1), r({ x: 0, y: 0 });
+  }, []), w = a(() => {
+    l((z) => Math.min(z + Be, zt));
+  }, []), L = a(() => {
+    l((z) => Math.max(z - Be, vt));
+  }, []), p = a(() => {
+    const z = e.getActiveArtboard();
+    if (!z || !o.current) return;
+    let g = o.current.parentElement, b = 0, _ = 0;
+    for (; g && (b = g.clientWidth, _ = g.clientHeight, !(b > 0 && _ > 0)); )
+      g = g.parentElement;
+    if (!b || !_) return;
+    const te = Math.min(
+      b * n / z.width,
+      _ * n / z.height,
+      1
+      // Never zoom in beyond 100%
+    );
+    l(te), r({ x: 0, y: 0 });
+  }, [e, o, n]), f = a(() => {
+    l(1), r({ x: 0, y: 0 });
+  }, []), T = q(
+    () => ({
+      zoom: d,
+      panOffset: i,
+      isPanning: u,
+      zoomIn: w,
+      zoomOut: L,
+      zoomToFit: p,
+      resetView: f,
+      setZoom: l,
+      setPanOffset: r,
+      setIsPanning: s,
+      userZoom: V,
+      setUserZoom: O,
+      resetUserView: D
+    }),
+    [d, i, u, w, L, p, f, V, D]
+  );
+  return /* @__PURE__ */ H(Ge.Provider, { value: T, children: t });
+};
+function Ut() {
+  const t = X(Ge);
+  if (!t)
+    throw new Error("useViewportContext must be used within a ViewportProvider (or EditorProvider)");
+  return t;
+}
+const Xe = Q(null), Ht = ({ children: t }) => {
+  const [e, o] = E(null), [n, d] = E([]), [l, i] = E(null), [r, u] = E(null), [s, V] = E(!1), O = a((L) => {
+    o(L);
+  }, []), D = a((L) => {
+    i(L);
+  }, []), w = q(
+    () => ({
+      selectedId: e,
+      multiSelection: n,
+      activeChildElement: l,
+      hoveredElementId: r,
+      hideHandles: s,
+      setSelectedId: o,
+      setMultiSelection: d,
+      setHoveredElementId: u,
+      setHideHandles: V,
+      handleSelectionChange: O,
+      handleActiveChildChange: D
+    }),
+    [
+      e,
+      n,
+      l,
+      r,
+      s,
+      O,
+      D
+    ]
+  );
+  return /* @__PURE__ */ H(Xe.Provider, { value: w, children: t });
+};
+function Vt() {
+  const t = X(Xe);
+  if (!t)
+    throw new Error("useSelectionContext must be used within a SelectionProvider (or EditorProvider)");
+  return t;
+}
+const Ye = Q(null), Nt = ({ children: t, value: e }) => {
+  const o = q(
+    () => ({
+      undo: e.undo,
+      redo: e.redo,
+      canUndo: e.canUndo,
+      canRedo: e.canRedo,
+      undoActiveArtboard: e.undoActiveArtboard,
+      redoActiveArtboard: e.redoActiveArtboard,
+      canUndoActiveArtboard: e.canUndoActiveArtboard,
+      canRedoActiveArtboard: e.canRedoActiveArtboard
+    }),
+    [
+      e.undo,
+      e.redo,
+      e.canUndo,
+      e.canRedo,
+      e.undoActiveArtboard,
+      e.redoActiveArtboard,
+      e.canUndoActiveArtboard,
+      e.canRedoActiveArtboard
+    ]
+  );
+  return /* @__PURE__ */ H(Ye.Provider, { value: o, children: t });
+};
+function Mt() {
+  const t = X(Ye);
+  if (!t)
+    throw new Error("useHistoryContext must be used within a HistoryProvider (or EditorProvider)");
+  return t;
+}
+const je = Q(null), Dt = ({ children: t }) => {
+  const [e, o] = E(null), [n, d] = E(!1), [l, i] = E(0), [r, u] = E(!1), [s, V] = E(!1), O = q(
+    () => ({
+      expandedPanelType: e,
+      setExpandedPanelType: o,
+      isToolbarMenuOpen: n,
+      setIsToolbarMenuOpen: d,
+      textSelectionVersion: l,
+      setTextSelectionVersion: i,
+      isCanvasReady: r,
+      setCanvasReady: u,
+      isRotating: s,
+      setIsRotating: V
+    }),
+    [e, n, l, r, s]
+  );
+  return /* @__PURE__ */ H(je.Provider, { value: O, children: t });
+};
+function Lt() {
+  const t = X(je);
+  if (!t)
+    throw new Error("useToolStateContext must be used within a ToolStateProvider (or EditorProvider)");
+  return t;
+}
+const Je = Q(null), Bt = ({ children: t, value: e }) => {
+  const o = q(
+    () => ({
+      elements: e.elements,
+      elementStore: e.elementStore,
+      artboards: e.artboards,
+      artboardManager: e.artboardManager,
+      artboardVersion: e.artboardVersion,
+      setElements: e.setElements,
+      refreshArtboards: e.refreshArtboards,
+      getElementById: e.getElementById,
+      handleAddElement: e.handleAddElement,
+      handleElementUpdate: e.handleElementUpdate,
+      handleLoadWorkspace: e.handleLoadWorkspace,
+      handleCopyElements: e.handleCopyElements,
+      handlePasteElements: e.handlePasteElements,
+      fontSize: e.fontSize,
+      fontColor: e.fontColor,
+      fontFamily: e.fontFamily,
+      textAlign: e.textAlign,
+      updateFontSize: e.updateFontSize,
+      setFontSizeValue: e.setFontSizeValue,
+      updateFontColor: e.updateFontColor,
+      updateFontFamily: e.updateFontFamily,
+      updateTextAlign: e.updateTextAlign,
+      canvasRef: e.canvasRef,
+      canvasEditorRef: e.canvasEditorRef
+    }),
+    [
+      e.elements,
+      e.elementStore,
+      e.artboards,
+      e.artboardManager,
+      e.artboardVersion,
+      e.setElements,
+      e.refreshArtboards,
+      e.getElementById,
+      e.handleAddElement,
+      e.handleElementUpdate,
+      e.handleLoadWorkspace,
+      e.handleCopyElements,
+      e.handlePasteElements,
+      e.fontSize,
+      e.fontColor,
+      e.fontFamily,
+      e.textAlign,
+      e.updateFontSize,
+      e.setFontSizeValue,
+      e.updateFontColor,
+      e.updateFontFamily,
+      e.updateTextAlign,
+      e.canvasRef,
+      e.canvasEditorRef
+    ]
+  );
+  return /* @__PURE__ */ H(Je.Provider, { value: o, children: t });
+};
+function qt() {
+  const t = X(Je);
+  if (!t)
+    throw new Error("useElementsContext must be used within an ElementsProvider (or EditorProvider)");
+  return t;
+}
+const Ke = Q(null), _t = ({ children: t, value: e }) => {
+  const o = q(
+    () => ({
+      executeElementUpdate: e.executeElementUpdate,
+      executeAddElement: e.executeAddElement,
+      executeRemoveElement: e.executeRemoveElement,
+      executeReorderElement: e.executeReorderElement,
+      executeCreateArtboard: e.executeCreateArtboard,
+      executeDeleteArtboard: e.executeDeleteArtboard,
+      executeUpdateArtboard: e.executeUpdateArtboard,
+      executeCommandBatch: e.executeCommandBatch,
+      undo: e.undo,
+      redo: e.redo,
+      canUndo: e.canUndo,
+      canRedo: e.canRedo,
+      undoActiveArtboard: e.undoActiveArtboard,
+      redoActiveArtboard: e.redoActiveArtboard,
+      canUndoActiveArtboard: e.canUndoActiveArtboard,
+      canRedoActiveArtboard: e.canRedoActiveArtboard,
+      historyManager: e.historyManager
+    }),
+    [
+      e.executeElementUpdate,
+      e.executeAddElement,
+      e.executeRemoveElement,
+      e.executeReorderElement,
+      e.executeCreateArtboard,
+      e.executeDeleteArtboard,
+      e.executeUpdateArtboard,
+      e.executeCommandBatch,
+      e.undo,
+      e.redo,
+      e.canUndo,
+      e.canRedo,
+      e.undoActiveArtboard,
+      e.redoActiveArtboard,
+      e.canUndoActiveArtboard,
+      e.canRedoActiveArtboard,
+      e.historyManager
+    ]
+  );
+  return /* @__PURE__ */ H(Ke.Provider, { value: o, children: t });
+};
+function Qt() {
+  const t = X(Ke);
+  if (!t)
+    throw new Error("useCommandContext must be used within a CommandProvider (or EditorProvider)");
+  return t;
+}
+const kt = ke("EditorContext"), Me = Q(null), qe = Q(null), en = () => {
+  const t = X(qe);
+  if (!t)
+    throw new Error("useEditorHandles must be used within EditorProvider");
+  return t;
+}, Wt = ({ children: t, artboardManager: e, canvasRef: o, canvasEditorRef: n }) => {
+  const d = ue(null), l = q(() => ({ get: () => d.current }), []), i = Ut(), r = Vt(), u = Lt(), [s, V] = E(
+    () => e.getAllArtboards()
+  ), [O, D] = E(0), [w, L] = E(
+    () => new Ve()
+  ), p = q(() => w.toArray(), [w]), f = a((m) => {
+    L((h) => {
+      const I = h.toArray(), F = typeof m == "function" ? m(I) : m;
+      return F === I ? h : Ve.fromArray(F);
+    });
+  }, []), T = a(
+    (m) => w.get(m),
+    [w]
+  ), [z, g] = E([]), b = r.selectedId ? w.get(r.selectedId) : void 0, _ = a(() => {
+    V([...e.getAllArtboards()]), D((m) => m + 1);
+  }, [e]), {
+    historyManager: te,
+    executeElementUpdate: B,
+    executeAddElement: W,
+    executeRemoveElement: c,
+    executeReorderElement: A,
+    executeCommandBatch: y,
+    executeCreateArtboard: x,
+    executeDeleteArtboard: P,
+    executeUpdateArtboard: k,
+    undo: C,
+    redo: N,
+    canUndo: v,
+    canRedo: U,
+    undoActiveArtboard: R,
+    redoActiveArtboard: Y,
+    canUndoActiveArtboard: ne,
+    canRedoActiveArtboard: j
+  } = wt(
+    p,
+    f,
+    e,
+    _
+  ), J = a(
+    (m) => {
+      const h = w.get(m.id);
+      B(h, m);
+    },
+    [w, B]
+  ), Qe = a(
+    (m) => {
+      if (!b || !(b instanceof _e))
+        return;
+      const h = b.clone(), I = h.children.findIndex(
+        (F) => F.id === m.id
+      );
+      I >= 0 && (h.children[I] = m, J(h));
+    },
+    [b, J]
+  ), et = r.activeChildElement || b, tt = r.activeChildElement ? Qe : J, {
+    fontSize: Ae,
+    fontColor: pe,
+    fontFamily: he,
+    textAlign: xe,
+    updateFontSize: ye,
+    setFontSizeValue: Ee,
+    updateFontColor: Se,
+    updateFontFamily: be,
+    updateTextAlign: Ie
+  } = Tt(et, tt), we = a(
+    async (m, h) => {
+      var ze;
+      const I = e.getActiveArtboardId();
+      if (!I) {
+        alert("Please create or select an artboard first");
+        return;
+      }
+      const F = `element-${Date.now()}`, S = e.getActiveArtboard(), re = S ? S.x + S.width / 2 : window.innerWidth / 2, ie = S ? S.y + S.height / 2 : window.innerHeight / 2, Z = ((ze = n.current) == null ? void 0 : ze.getZoom()) || i.zoom || 1;
+      if (m === "image") {
+        const le = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==", ee = 200 / Z, K = h == null ? void 0 : h.src, G = new xt({
+          id: F,
+          x: re,
+          y: ie,
+          // Defer loading `src` until after the element is in the store so a
+          // synchronously-cached image can't fire onLoadCallback too early.
+          imageUrl: K ? "" : le,
+          transformData: {
+            type: "image",
+            width: ee,
+            height: ee,
+            cropX: 0,
+            cropY: 0,
+            cropWidth: 1,
+            cropHeight: 1,
+            flipHorizontal: !1,
+            flipVertical: !1,
+            borderRadius: 0
+          }
+        });
+        K && (G.imageLoaded = !1, G.imageElement = null, G.isCropping = !1, G.imageUrl = K, G.preserveDimensions = !1, G.onLoadCallback = (M) => {
+          const Oe = M.transformData.width, Ue = M.transformData.height, Re = Math.min(ee / Oe, ee / Ue, 1);
+          Re < 1 && (M.transformData.width = Oe * Re, M.transformData.height = Ue * Re), M.transformData.cropX = 0, M.transformData.cropY = 0, M.transformData.cropWidth = 1, M.transformData.cropHeight = 1, B(G, M);
+        }), W(G, I), r.setSelectedId(G.id), K && G.loadImage(K);
+        return;
+      }
+      let ce;
+      const $ = {
+        text: "custom",
+        circle: "circle",
+        wave: "wave",
+        arch: "arch",
+        shape: "shape"
+      }[m] || "custom", de = yt($);
+      if (!de || !de.Component)
+        return;
+      const ae = e.getActiveArtboard(), nt = ae ? Math.min(ae.width, ae.height) * 0.1 : 80, Fe = ae ? ae.width * 0.5 : 300;
+      if (m === "shape") {
+        const le = (h == null ? void 0 : h.shapeType) ?? "rectangle";
+        let ee = 200 / Z, K = 200 / Z;
+        le === "ellipse" ? (ee = 150 / Z, K = 250 / Z) : le === "line" && (ee = 300 / Z, K = 8 / Z), ce = new Et({
+          id: F,
+          x: re,
+          y: ie,
+          transformData: {
+            type: "shape",
+            shapeType: le,
+            width: ee,
+            height: K,
+            fillColor: "#3b82f6",
+            fillOpacity: 1
+          }
+        });
+      } else
+        ce = new de.Component({
+          id: F,
+          text: "New Text",
+          x: re,
+          y: ie,
+          fontSize: nt,
+          fontFamily: "Poppins",
+          color: Ct(S == null ? void 0 : S.backgroundColor),
+          transformData: $ === "arch" ? {
+            type: "arch",
+            width: Fe,
+            archHeight: St.archHeight
+          } : $ === "wave" ? {
+            type: "wave",
+            width: Fe,
+            amplitude: Ne.amplitude,
+            frequency: Ne.frequency
+          } : $ === "circle" ? {
+            type: "circle",
+            radius: Fe / 2
+          } : void 0
+        });
+      e.addElementToArtboard(F, I), W(
+        ce,
+        I,
+        r.selectedId || void 0
+      ), r.setSelectedId(F);
+    },
+    [e, W, B, r, i.zoom, n]
+  ), Te = a(() => {
+    const m = [];
+    if (r.multiSelection.length > 0) {
+      const h = p.filter(
+        (I) => r.multiSelection.includes(I.id)
+      );
+      m.push(...h);
+    } else b && m.push(b);
+    if (m.length > 0) {
+      const h = m.map((I) => I.clone());
+      g(h);
+    }
+  }, [b, r.multiSelection, p]), ge = a(() => {
+    if (z.length === 0) return;
+    const m = [], h = 30, I = 30;
+    z.forEach((F) => {
+      const S = w.get(F.id), re = S ? S.x : F.x, ie = S ? S.y : F.y, Z = F.toJSON();
+      delete Z.id;
+      const ce = F.constructor, se = new ce(Z);
+      se.x = re + h, se.y = ie + I;
+      let $ = null;
+      if (S && ($ = e.getArtboardIdForElement(
+        S.id
+      )), $ || ($ = e.getActiveArtboardId()), !$) {
+        kt.warn("[handlePasteElements] No artboard found for pasting");
+        return;
+      }
+      const de = S ? S.id : void 0;
+      W(se, $, de), m.push(se.id);
+    }), m.length === 1 ? r.handleSelectionChange(m[0]) : m.length > 1 && r.setMultiSelection(m);
+  }, [
+    z,
+    w,
+    e,
+    W,
+    r
+  ]), me = a(() => {
+    if (u.expandedPanelType === "crop" && (b == null ? void 0 : b.transformType) === "image") {
+      const m = b;
+      if (m.isCropping) {
+        const h = m.clone();
+        h.exitCropMode(), B(m, h);
+      }
+    }
+    u.setExpandedPanelType(null);
+  }, [
+    u.expandedPanelType,
+    u.setExpandedPanelType,
+    b,
+    B
+  ]);
+  Ce(() => {
+    const m = (h) => {
+      const I = h.target;
+      if (I.tagName === "CANVAS" || gt(I))
+        return;
+      const S = document.activeElement;
+      if (S != null && S.hasAttribute("data-preserve-selection")) {
+        S.blur();
+        return;
+      }
+      if (u.expandedPanelType !== null) {
+        me();
+        return;
+      }
+      r.selectedId !== null && r.setSelectedId(null), r.multiSelection.length > 0 && r.setMultiSelection([]);
+    };
+    return document.addEventListener("pointerdown", m), () => document.removeEventListener("pointerdown", m);
+  }, [u.expandedPanelType, me, r]);
+  const Pe = a(
+    (m, h, I) => {
+      e.clear(), m.forEach((F) => {
+        e.createArtboard(F.toJSON());
+      }), I && e.setActiveArtboard(I), V([...e.getAllArtboards()]), D((F) => F + 1), f(h), r.setSelectedId(null);
+    },
+    [e, r, f]
+  ), ve = q(() => ({
+    // From ViewportContext
+    zoom: i.zoom,
+    panOffset: i.panOffset,
+    isPanning: i.isPanning,
+    zoomIn: i.zoomIn,
+    zoomOut: i.zoomOut,
+    zoomToFit: i.zoomToFit,
+    resetView: i.resetView,
+    setZoom: i.setZoom,
+    setPanOffset: i.setPanOffset,
+    setIsPanning: i.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: u.expandedPanelType,
+    setExpandedPanelType: u.setExpandedPanelType,
+    isToolbarMenuOpen: u.isToolbarMenuOpen,
+    setIsToolbarMenuOpen: u.setIsToolbarMenuOpen,
+    textSelectionVersion: u.textSelectionVersion,
+    setTextSelectionVersion: u.setTextSelectionVersion,
+    isCanvasReady: u.isCanvasReady,
+    setCanvasReady: u.setCanvasReady,
+    isRotating: u.isRotating,
+    setIsRotating: u.setIsRotating,
+    // Cross-context handler
+    clearExpandedPanel: me,
+    // Core state (element/artboard domain)
+    artboardManager: e,
+    artboards: s,
+    elements: p,
+    elementStore: w,
+    getElementById: T,
+    // Derived state (cross-context)
+    selectedElement: b,
+    // Refs
+    canvasRef: o,
+    canvasEditorRef: n,
+    // Element setters
+    setElements: f,
+    // Artboard version counter
+    artboardVersion: O,
+    // Handlers
+    refreshArtboards: _,
+    handleElementUpdate: J,
+    handleAddElement: we,
+    handleLoadWorkspace: Pe,
+    handleCopyElements: Te,
+    handlePasteElements: ge,
+    // Command history (undo/redo actions + execute functions)
+    historyManager: te,
+    executeElementUpdate: B,
+    executeAddElement: W,
+    executeRemoveElement: c,
+    executeReorderElement: A,
+    executeCommandBatch: y,
+    executeCreateArtboard: x,
+    executeDeleteArtboard: P,
+    executeUpdateArtboard: k,
+    undo: C,
+    redo: N,
+    canUndo: v,
+    canRedo: U,
+    undoActiveArtboard: R,
+    redoActiveArtboard: Y,
+    canUndoActiveArtboard: ne,
+    canRedoActiveArtboard: j,
+    // Element properties
+    fontSize: Ae,
+    fontColor: pe,
+    fontFamily: he,
+    textAlign: xe,
+    updateFontSize: ye,
+    setFontSizeValue: Ee,
+    updateFontColor: Se,
+    updateFontFamily: be,
+    updateTextAlign: Ie
+  }), [
+    // Viewport
+    i.zoom,
+    i.panOffset,
+    i.isPanning,
+    i.zoomIn,
+    i.zoomOut,
+    i.zoomToFit,
+    i.resetView,
+    i.setZoom,
+    i.setPanOffset,
+    i.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
+    u.expandedPanelType,
+    u.setExpandedPanelType,
+    u.isToolbarMenuOpen,
+    u.setIsToolbarMenuOpen,
+    u.textSelectionVersion,
+    u.setTextSelectionVersion,
+    u.isCanvasReady,
+    u.setCanvasReady,
+    u.isRotating,
+    u.setIsRotating,
+    me,
+    // Element/artboard domain
+    e,
+    s,
+    p,
+    w,
+    T,
+    b,
+    o,
+    n,
+    f,
+    O,
+    _,
+    J,
+    we,
+    Pe,
+    Te,
+    ge,
+    // Command history
+    te,
+    B,
+    W,
+    c,
+    A,
+    y,
+    x,
+    P,
+    k,
+    C,
+    N,
+    v,
+    U,
+    R,
+    Y,
+    ne,
+    j,
+    // Element properties
+    Ae,
+    pe,
+    he,
+    xe,
+    ye,
+    Ee,
+    Se,
+    be,
+    Ie
+  ]);
+  return d.current = ve, /* @__PURE__ */ H(qe.Provider, { value: l, children: /* @__PURE__ */ H(
+    Nt,
+    {
+      value: {
+        undo: C,
+        redo: N,
+        canUndo: v,
+        canRedo: U,
+        undoActiveArtboard: R,
+        redoActiveArtboard: Y,
+        canUndoActiveArtboard: ne,
+        canRedoActiveArtboard: j
+      },
+      children: /* @__PURE__ */ H(
+        Bt,
+        {
+          value: {
+            elements: p,
+            elementStore: w,
+            artboards: s,
+            artboardManager: e,
+            artboardVersion: O,
+            setElements: f,
+            refreshArtboards: _,
+            getElementById: T,
+            handleAddElement: we,
+            handleElementUpdate: J,
+            handleLoadWorkspace: Pe,
+            handleCopyElements: Te,
+            handlePasteElements: ge,
+            fontSize: Ae,
+            fontColor: pe,
+            fontFamily: he,
+            textAlign: xe,
+            updateFontSize: ye,
+            setFontSizeValue: Ee,
+            updateFontColor: Se,
+            updateFontFamily: be,
+            updateTextAlign: Ie,
+            canvasRef: o,
+            canvasEditorRef: n
+          },
+          children: /* @__PURE__ */ H(
+            _t,
+            {
+              value: {
+                executeElementUpdate: B,
+                executeAddElement: W,
+                executeRemoveElement: c,
+                executeReorderElement: A,
+                executeCommandBatch: y,
+                executeCreateArtboard: x,
+                executeDeleteArtboard: P,
+                executeUpdateArtboard: k,
+                undo: C,
+                redo: N,
+                canUndo: v,
+                canRedo: U,
+                undoActiveArtboard: R,
+                redoActiveArtboard: Y,
+                canUndoActiveArtboard: ne,
+                canRedoActiveArtboard: j,
+                historyManager: te
+              },
+              children: /* @__PURE__ */ H(Me.Provider, { value: ve, children: t })
+            }
+          )
+        }
+      )
+    }
+  ) });
+}, tn = ({
+  children: t,
+  initialArtboardConfig: e = {},
+  viewPadding: o = 0.9
+}) => {
+  const [n] = E(() => {
+    const i = new ht(), r = {
+      name: e.name || "Artboard 1",
+      x: e.x ?? 0,
+      y: e.y ?? 0,
+      width: e.width ?? 1e3,
+      height: e.height ?? 1e3,
+      backgroundColor: e.backgroundColor || pt
+    };
+    return i.createArtboard(r), i;
+  }), d = ue(null), l = ue(null);
+  return /* @__PURE__ */ H(
+    Ot,
+    {
+      artboardManager: n,
+      canvasRef: d,
+      viewPadding: o,
+      children: /* @__PURE__ */ H(Ht, { children: /* @__PURE__ */ H(Dt, { children: /* @__PURE__ */ H(
+        Wt,
+        {
+          artboardManager: n,
+          canvasRef: d,
+          canvasEditorRef: l,
+          children: t
+        }
+      ) }) })
+    }
+  );
+}, nn = () => {
+  const t = X(Me);
+  if (!t)
+    throw new Error("useEditor must be used within EditorProvider");
+  return t;
+};
+export {
+  We as B,
+  tn as E,
+  Ze as P,
+  Ut as a,
+  Qt as b,
+  qt as c,
+  Mt as d,
+  Vt as e,
+  Lt as f,
+  It as g,
+  Yt as h,
+  jt as i,
+  en as j,
+  Xt as k,
+  Pt as l,
+  Kt as m,
+  Jt as p,
+  gt as s,
+  nn as u
+};
+//# sourceMappingURL=EditorContext-5QpqAhjh.js.map