@snowcone-app/canvas 0.1.10 → 0.1.12

package/dist/ThemeContext-wj-wSO7J.js

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