@snowcone-app/canvas 0.16.0 → 0.17.0

package/dist/EditorContext-CyanYzo2.js

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