dishui 0.0.64 → 0.0.65

package/dist/components/pro/Flow/Flow.js

@@ -1,10 +1,10 @@
 import he from "../../Select/index.js";
 import ge from "../CodeEditor/editors/CodeEditor.js";
-import { DEFAULT_NODE_DATA as se, ROOT_CANVAS_ID as we, createEmptyDocument as Ie } from "./constants.js";
-import { FlowProvider as ve, useFlowContext as ee } from "./context/FlowContext.js";
-import { FlowUIProvider as ye, useFlowUI as Y } from "./context/FlowUIContext.js";
+import { DEFAULT_NODE_DATA as ie, ROOT_CANVAS_ID as we, createEmptyDocument as Ie } from "./constants.js";
+import { FlowProvider as ve, useFlowContext as te } from "./context/FlowContext.js";
+import { FlowUIProvider as ye, useFlowUI as q } from "./context/FlowUIContext.js";
 import { FlowAIProvider as be } from "./context/FlowAIContext.js";
-import { generateId as Q } from "./nodes/nodeUtils.js";
+import { generateId as ee } from "./nodes/nodeUtils.js";
 import { normalizeEdgeHandles as xe } from "./edges/edgePaths.js";
 import { useDeleteSelection as Se } from "./hooks/useDeleteSelection.js";
 import Ce from "./FlowCanvas.js";
@@ -16,54 +16,54 @@ import { OutlinePanelContent as Te } from "./panels/OutlinePanel.js";
 import { AIPanelContent as Re } from "./panels/AIPanel.js";
 import { PresentationMode as Le } from "./panels/PresentationMode.js";
 import { MediaOverlay as Fe } from "./nodes/MediaOverlay.js";
-import q from "./panels/FlowPanelGroup.js";
+import Q from "./panels/FlowPanelGroup.js";
 import Ge from "./panels/Breadcrumb.js";
 import Ke from "./panels/ContextMenu.js";
 import { MiniMapRenderer as We } from "./canvas/MiniMapRenderer.js";
 import { useUndoRedo as He } from "./hooks/useUndoRedo.js";
-import { useClipboard as ae } from "./hooks/useClipboard.js";
+import { useClipboard as le } from "./hooks/useClipboard.js";
 import { useCompactMode as Ue } from "./hooks/useCompactMode.js";
 import { usePdfExport as Ze } from "./hooks/usePdfExport.js";
 import { useKeyboardShortcuts as Je } from "./hooks/useKeyboardShortcuts.js";
 import { useMindMap as Oe } from "./hooks/useMindMap.js";
 /* empty css       */
-import { forwardRef as _e, useCallback as E, useEffect as X, useImperativeHandle as $e, useMemo as le, useRef as F, useState as j } from "react";
-import { jsx as r, jsxs as _ } from "react/jsx-runtime";
+import { forwardRef as _e, useCallback as k, useEffect as Y, useImperativeHandle as $e, useMemo as ce, useRef as F, useState as X } from "react";
+import { jsx as i, jsxs as $ } from "react/jsx-runtime";
 import { EditorView as Be } from "@codemirror/view";
 function Ve(o) {
-  let p = !1;
-  const a = { ...o.canvases };
-  for (const [v, u] of Object.entries(a)) {
-    const s = u.nodes.map((e) => {
+  let u = !1;
+  const r = { ...o.canvases };
+  for (const [w, d] of Object.entries(r)) {
+    const s = d.nodes.map((e) => {
       if (e.type !== "shapeSvg") return e;
-      const I = e.data.labelPlacement, m = I === "above" ? "top" : I === "center" ? "middle" : I === "below" ? "bottom" : e.data.labelPlacement;
-      return m === e.data.labelPlacement ? e : (p = !0, {
+      const g = e.data.labelPlacement, f = g === "above" ? "top" : g === "center" ? "middle" : g === "below" ? "bottom" : e.data.labelPlacement;
+      return f === e.data.labelPlacement ? e : (u = !0, {
         ...e,
         data: {
           ...e.data,
-          labelPlacement: m
+          labelPlacement: f
         }
       });
     });
-    let l = !1;
+    let a = !1;
     const n = s.map((e) => {
       if (!e.data.isMindMapNode) return e;
-      const I = e.data.fill === "#ffffff" || e.data.fill === "#eef2ff" ? "theme:base-100" : e.data.fill, m = e.data.stroke === "#6366f1" ? "theme:base-content" : e.data.stroke === "#4f46e5" ? "theme:primary" : e.data.stroke;
-      return I === e.data.fill && m === e.data.stroke ? e : (l = !0, {
+      const g = e.data.fill === "#ffffff" || e.data.fill === "#eef2ff" ? "theme:base-100" : e.data.fill, f = e.data.stroke === "#6366f1" ? "theme:base-content" : e.data.stroke === "#4f46e5" ? "theme:primary" : e.data.stroke;
+      return g === e.data.fill && f === e.data.stroke ? e : (a = !0, {
         ...e,
         data: {
           ...e.data,
-          fill: I,
-          stroke: m
+          fill: g,
+          stroke: f
         }
       });
-    }), b = /* @__PURE__ */ new Map();
-    for (const e of n) b.set(e.id, e);
+    }), v = /* @__PURE__ */ new Map();
+    for (const e of n) v.set(e.id, e);
     let c = !1;
-    const y = xe(u.edges, b).map((e) => {
+    const I = xe(d.edges, v).map((e) => {
       if (e.data.strokeColor !== "#94a3b8") return e;
-      const I = b.get(e.source), m = b.get(e.target);
-      return !I?.data.isMindMapNode || !m?.data.isMindMapNode ? e : (c = !0, {
+      const g = v.get(e.source), f = v.get(e.target);
+      return !g?.data.isMindMapNode || !f?.data.isMindMapNode ? e : (c = !0, {
         ...e,
         data: {
           ...e.data,
@@ -71,15 +71,15 @@ function Ve(o) {
         }
       });
     });
-    (l || c) && (p = !0), (n !== s || y !== u.edges) && (a[v] = {
-      ...u,
+    (a || c) && (u = !0), (n !== s || I !== d.edges) && (r[w] = {
+      ...d,
       nodes: n,
-      edges: y
+      edges: I
     });
   }
-  return p ? {
+  return u ? {
     ...o,
-    canvases: a
+    canvases: r
   } : o;
 }
 var je = {
@@ -87,192 +87,192 @@ var je = {
   edgeIds: /* @__PURE__ */ new Set(),
   lineIds: /* @__PURE__ */ new Set()
 };
-function Xe({ onUndo: o, onRedo: p, groupRef: a, geoGroupRef: v, ungroupRef: u }) {
-  const { selection: s, setSelection: l, currentCanvas: n, setDoc: b, currentCanvasId: c } = ee(), { viewport: y } = Y(), { copy: e, cut: I, paste: m, duplicate: h } = ae(), x = Se(), g = E(() => {
-    l({
-      nodeIds: new Set(n.nodes.map((f) => f.id)),
-      edgeIds: new Set(n.edges.map((f) => f.id)),
-      lineIds: new Set(n.lines.map((f) => f.id))
+function Xe({ onUndo: o, onRedo: u, groupRef: r, geoGroupRef: w, ungroupRef: d }) {
+  const { selection: s, setSelection: a, currentCanvas: n, setDoc: v, currentCanvasId: c } = te(), { viewport: I } = q(), { copy: e, cut: g, paste: f, duplicate: m } = le(), b = Se(), h = k(() => {
+    a({
+      nodeIds: new Set(n.nodes.map((p) => p.id)),
+      edgeIds: new Set(n.edges.map((p) => p.id)),
+      lineIds: new Set(n.lines.map((p) => p.id))
     });
-  }, [n, l]), S = E((f) => {
-    const w = s.nodeIds, N = s.lineIds;
-    if (w.size + N.size < 2) return;
-    const k = n.nodes.filter((M) => w.has(M.id)), d = n.lines.filter((M) => N.has(M.id)), t = 20;
-    let i = 1 / 0, R = 1 / 0, L = -1 / 0, W = -1 / 0;
-    for (const M of k)
-      i = Math.min(i, M.position.x), R = Math.min(R, M.position.y), L = Math.max(L, M.position.x + M.width), W = Math.max(W, M.position.y + M.height);
-    for (const M of d) for (const D of M.points)
-      i = Math.min(i, D.x), R = Math.min(R, D.y), L = Math.max(L, D.x), W = Math.max(W, D.y);
-    const H = f === "geometryGroup", U = Q("group"), P = {
-      id: U,
-      type: f,
+  }, [n, a]), C = k((p) => {
+    const x = s.nodeIds, N = s.lineIds;
+    if (x.size + N.size < 2) return;
+    const D = n.nodes.filter((S) => x.has(S.id)), t = n.lines.filter((S) => N.has(S.id)), l = 20;
+    let y = 1 / 0, W = 1 / 0, R = -1 / 0, H = -1 / 0;
+    for (const S of D)
+      y = Math.min(y, S.position.x), W = Math.min(W, S.position.y), R = Math.max(R, S.position.x + S.width), H = Math.max(H, S.position.y + S.height);
+    for (const S of t) for (const z of S.points)
+      y = Math.min(y, z.x), W = Math.min(W, z.y), R = Math.max(R, z.x), H = Math.max(H, z.y);
+    const U = p === "geometryGroup", Z = ee("group"), M = {
+      id: Z,
+      type: p,
       position: {
-        x: i - t,
-        y: R - t
+        x: y - l,
+        y: W - l
       },
-      width: L - i + t * 2,
-      height: W - R + t * 2,
+      width: R - y + 40,
+      height: H - W + 40,
       data: {
-        ...se,
-        label: H ? "Geo Group" : "Group",
-        fill: H ? "#fefce8" : "#f0f9ff",
+        ...ie,
+        label: U ? "Geo Group" : "Group",
+        fill: U ? "#fefce8" : "#f0f9ff",
         stroke: "#9ca3af",
         strokeWidth: 1.5,
-        borderStyle: H ? "dashed" : "dotted",
+        borderStyle: U ? "dashed" : "dotted",
         isGroup: !0
       }
     };
-    b((M) => {
-      const D = M.canvases[c];
-      return D ? {
-        ...M,
+    v((S) => {
+      const z = S.canvases[c];
+      return z ? {
+        ...S,
         canvases: {
-          ...M.canvases,
+          ...S.canvases,
           [c]: {
-            ...D,
-            nodes: H ? [P, ...D.nodes] : [P, ...D.nodes.map((O) => w.has(O.id) ? {
-              ...O,
-              parentId: U
-            } : O)],
-            lines: H ? D.lines : D.lines.map((O) => N.has(O.id) ? {
-              ...O,
-              parentId: U
-            } : O)
+            ...z,
+            nodes: U ? [M, ...z.nodes] : [M, ...z.nodes.map((J) => x.has(J.id) ? {
+              ...J,
+              parentId: Z
+            } : J)],
+            lines: U ? z.lines : z.lines.map((J) => N.has(J.id) ? {
+              ...J,
+              parentId: Z
+            } : J)
           }
         }
-      } : M;
-    }), l({
-      nodeIds: /* @__PURE__ */ new Set([U]),
+      } : S;
+    }), a({
+      nodeIds: /* @__PURE__ */ new Set([Z]),
       edgeIds: /* @__PURE__ */ new Set(),
       lineIds: /* @__PURE__ */ new Set()
     });
   }, [
     s,
     n,
-    b,
+    v,
     c,
-    l
-  ]), K = E(() => S("flowGroup"), [S]), z = E(() => S("geometryGroup"), [S]), J = E(() => {
-    const f = s.nodeIds;
-    if (f.size === 0) return;
-    const w = /* @__PURE__ */ new Set(), N = /* @__PURE__ */ new Set(), k = /* @__PURE__ */ new Set();
-    for (const d of n.nodes) f.has(d.id) && (d.type === "flowGroup" || d.type === "geometryGroup" || d.data.isGroup) && w.add(d.id);
-    if (w.size !== 0) {
-      for (const d of n.nodes) d.parentId && w.has(d.parentId) && N.add(d.id);
-      for (const d of n.lines) d.parentId && w.has(d.parentId) && k.add(d.id);
-      b((d) => {
-        const t = d.canvases[c];
-        return t ? {
-          ...d,
+    a
+  ]), K = k(() => C("flowGroup"), [C]), T = k(() => C("geometryGroup"), [C]), _ = k(() => {
+    const p = s.nodeIds;
+    if (p.size === 0) return;
+    const x = /* @__PURE__ */ new Set(), N = /* @__PURE__ */ new Set(), D = /* @__PURE__ */ new Set();
+    for (const t of n.nodes) p.has(t.id) && (t.type === "flowGroup" || t.type === "geometryGroup" || t.data.isGroup) && x.add(t.id);
+    if (x.size !== 0) {
+      for (const t of n.nodes) t.parentId && x.has(t.parentId) && N.add(t.id);
+      for (const t of n.lines) t.parentId && x.has(t.parentId) && D.add(t.id);
+      v((t) => {
+        const l = t.canvases[c];
+        return l ? {
+          ...t,
           canvases: {
-            ...d.canvases,
+            ...t.canvases,
             [c]: {
-              ...t,
-              nodes: t.nodes.filter((i) => !w.has(i.id)).map((i) => N.has(i.id) ? {
-                ...i,
+              ...l,
+              nodes: l.nodes.filter((y) => !x.has(y.id)).map((y) => N.has(y.id) ? {
+                ...y,
                 parentId: void 0
-              } : i),
-              lines: t.lines.map((i) => k.has(i.id) ? {
-                ...i,
+              } : y),
+              lines: l.lines.map((y) => D.has(y.id) ? {
+                ...y,
                 parentId: void 0
-              } : i)
+              } : y)
             }
           }
-        } : d;
-      }), l({
+        } : t;
+      }), a({
         nodeIds: N,
         edgeIds: /* @__PURE__ */ new Set(),
-        lineIds: k
+        lineIds: D
       });
     }
   }, [
     s,
     n,
-    b,
+    v,
     c,
-    l
+    a
   ]);
-  a.current = K, v.current = z, u.current = J;
-  const C = E((f) => {
-    const w = s.nodeIds, N = s.lineIds;
-    w.size === 0 && N.size === 0 || b((k) => {
-      const d = k.canvases[c];
-      if (!d) return k;
-      const t = d.nodes.map((P) => P.zIndex ?? 0), i = t.length > 0 ? Math.max(...t) : 0, R = t.length > 0 ? Math.min(...t) : 0, L = d.lines.map((P) => P.zIndex ?? 0), W = L.length > 0 ? Math.max(...L) : 0, H = L.length > 0 ? Math.min(...L) : 0, U = (P, M, D) => f === "front" ? M + 1 : f === "back" ? D - 1 : f === "up" ? P + 1 : P - 1;
+  r.current = K, w.current = T, d.current = _;
+  const P = k((p) => {
+    const x = s.nodeIds, N = s.lineIds;
+    x.size === 0 && N.size === 0 || v((D) => {
+      const t = D.canvases[c];
+      if (!t) return D;
+      const l = t.nodes.map((M) => M.zIndex ?? 0), y = l.length > 0 ? Math.max(...l) : 0, W = l.length > 0 ? Math.min(...l) : 0, R = t.lines.map((M) => M.zIndex ?? 0), H = R.length > 0 ? Math.max(...R) : 0, U = R.length > 0 ? Math.min(...R) : 0, Z = (M, S, z) => p === "front" ? S + 1 : p === "back" ? z - 1 : p === "up" ? M + 1 : M - 1;
       return {
-        ...k,
+        ...D,
         canvases: {
-          ...k.canvases,
+          ...D.canvases,
           [c]: {
-            ...d,
-            nodes: d.nodes.map((P) => w.has(P.id) ? {
-              ...P,
-              zIndex: U(P.zIndex ?? 0, i, R)
-            } : P),
-            lines: d.lines.map((P) => N.has(P.id) ? {
-              ...P,
-              zIndex: U(P.zIndex ?? 0, W, H)
-            } : P)
+            ...t,
+            nodes: t.nodes.map((M) => x.has(M.id) ? {
+              ...M,
+              zIndex: Z(M.zIndex ?? 0, y, W)
+            } : M),
+            lines: t.lines.map((M) => N.has(M.id) ? {
+              ...M,
+              zIndex: Z(M.zIndex ?? 0, H, U)
+            } : M)
           }
         }
       };
     });
   }, [
     s,
-    b,
+    v,
     c
   ]);
-  return X(() => {
-    const f = (w) => {
-      const N = w.target;
+  Y(() => {
+    const p = (x) => {
+      const N = x.target;
       if (N?.tagName === "INPUT" || N?.tagName === "TEXTAREA" || N?.isContentEditable) return;
-      const k = Array.from(w.clipboardData?.items ?? []).find((i) => i.type.startsWith("image/"));
-      if (!k) {
-        w.preventDefault(), m();
+      const D = Array.from(x.clipboardData?.items ?? []).find((y) => y.type.startsWith("image/"));
+      if (!D) {
+        x.preventDefault(), f();
         return;
       }
-      const d = k.getAsFile();
-      if (!d) return;
-      w.preventDefault();
-      const t = new FileReader();
-      t.onload = () => {
-        if (typeof t.result != "string") return;
-        const i = s.nodeIds.size === 1 ? n.nodes.find((A) => s.nodeIds.has(A.id) && A.type === "mediaNode" && A.data.mediaKind === "image") : void 0;
-        if (i) {
-          b((A) => {
-            const $ = A.canvases[c];
-            return $ ? {
-              ...A,
+      const t = D.getAsFile();
+      if (!t) return;
+      x.preventDefault();
+      const l = new FileReader();
+      l.onload = () => {
+        if (typeof l.result != "string") return;
+        const y = s.nodeIds.size === 1 ? n.nodes.find((E) => s.nodeIds.has(E.id) && E.type === "mediaNode" && E.data.mediaKind === "image") : void 0;
+        if (y) {
+          v((E) => {
+            const B = E.canvases[c];
+            return B ? {
+              ...E,
               canvases: {
-                ...A.canvases,
+                ...E.canvases,
                 [c]: {
-                  ...$,
-                  nodes: $.nodes.map((V) => V.id === i.id ? {
-                    ...V,
+                  ...B,
+                  nodes: B.nodes.map((j) => j.id === y.id ? {
+                    ...j,
                     data: {
-                      ...V.data,
-                      mediaContent: t.result
+                      ...j.data,
+                      mediaContent: l.result
                     }
-                  } : V)
+                  } : j)
                 }
               }
-            } : A;
+            } : E;
           });
           return;
         }
-        const R = Q("node"), L = 320, W = 220, H = window.innerWidth, U = window.innerHeight, P = (H / 2 - y.x) / y.zoom, M = (U / 2 - y.y) / y.zoom, D = Math.max(0, ...n.nodes.map((A) => A.zIndex ?? 0)), O = {
-          id: R,
+        const W = ee("node"), R = 320, H = 220, U = window.innerWidth, Z = window.innerHeight, M = (U / 2 - I.x) / I.zoom, S = (Z / 2 - I.y) / I.zoom, z = Math.max(0, ...n.nodes.map((E) => E.zIndex ?? 0)), J = {
+          id: W,
           type: "mediaNode",
           position: {
-            x: P - L / 2,
-            y: M - W / 2
+            x: M - R / 2,
+            y: S - H / 2
           },
-          width: L,
-          height: W,
-          zIndex: D + 1,
+          width: R,
+          height: H,
+          zIndex: z + 1,
           data: {
-            ...se,
-            label: d.name || "Image",
+            ...ie,
+            label: t.name || "Image",
             fill: "theme:base-100",
             stroke: "theme:base-content",
             strokeWidth: 1.5,
@@ -280,183 +280,185 @@ function Xe({ onUndo: o, onRedo: p, groupRef: a, geoGroupRef: v, ungroupRef: u }
             fontSize: 13,
             borderStyle: "solid",
             mediaKind: "image",
-            mediaContent: t.result
+            mediaContent: l.result
           }
         };
-        b((A) => {
-          const $ = A.canvases[c];
-          return $ ? {
-            ...A,
+        v((E) => {
+          const B = E.canvases[c];
+          return B ? {
+            ...E,
             canvases: {
-              ...A.canvases,
+              ...E.canvases,
               [c]: {
-                ...$,
-                nodes: [...$.nodes, O]
+                ...B,
+                nodes: [...B.nodes, J]
               }
             }
-          } : A;
-        }), l({
-          nodeIds: /* @__PURE__ */ new Set([R]),
+          } : E;
+        }), a({
+          nodeIds: /* @__PURE__ */ new Set([W]),
           edgeIds: /* @__PURE__ */ new Set(),
           lineIds: /* @__PURE__ */ new Set()
         });
-      }, t.readAsDataURL(d);
+      }, l.readAsDataURL(t);
     };
-    return window.addEventListener("paste", f), () => window.removeEventListener("paste", f);
+    return window.addEventListener("paste", p), () => window.removeEventListener("paste", p);
   }, [
     n,
     c,
-    m,
+    f,
     s,
-    b,
-    l,
-    y
-  ]), Je(le(() => ({
+    v,
+    a,
+    I
+  ]);
+  const A = ce(() => ({
     undo: o,
-    redo: p,
+    redo: u,
     copy: e,
-    cut: I,
-    paste: m,
-    duplicate: h,
-    deleteSelected: x,
-    selectAll: g,
+    cut: g,
+    paste: f,
+    duplicate: m,
+    deleteSelected: b,
+    selectAll: h,
     group: K,
-    geoGroup: z,
-    ungroup: J,
-    bringToFront: () => C("front"),
-    bringForward: () => C("up"),
-    sendBackward: () => C("down"),
-    sendToBack: () => C("back")
+    geoGroup: T,
+    ungroup: _,
+    bringToFront: () => P("front"),
+    bringForward: () => P("up"),
+    sendBackward: () => P("down"),
+    sendToBack: () => P("back")
   }), [
     o,
-    p,
+    u,
     e,
-    I,
+    g,
+    f,
     m,
+    b,
     h,
-    x,
-    g,
     K,
-    z,
-    J,
-    C
-  ])), Oe(), null;
+    T,
+    _,
+    P
+  ]);
+  return Je(A), Oe(), null;
 }
-function Ye({ pixiRef: o, exportPdfRef: p }) {
-  return p.current = Ze(o), null;
+function Ye({ pixiRef: o, exportPdfRef: u }) {
+  return u.current = Ze(o), null;
 }
-var Ht = _e(function({ initialDocument: p, onChange: a, width: v, height: u, readOnly: s = !1, onBack: l, onExportPNG: n, onPublish: b, showMiniMap: c = !0, showGrid: y = !0, gridSize: e = 20, className: I, showAI: m = !0, showAIConfig: h = !0, aiConfig: x }, g) {
-  const [S, K] = j(() => Ve(p ?? Ie())), [z, J] = j(je), C = F(null), f = F(null), w = F(null), N = F(null), k = Ue(N), { wrappedSetDoc: d, undo: t, redo: i, canUndo: R, canRedo: L } = He(S, K), W = F(null), H = F(null), U = F(null), P = F(null), M = F(a);
-  M.current = a;
-  const D = F(S);
-  D.current = S, $e(g, () => ({
+var Ht = _e(function({ initialDocument: u, onChange: r, width: w, height: d, readOnly: s = !1, onBack: a, onExportPNG: n, onPublish: v, showMiniMap: c = !0, showGrid: I = !0, gridSize: e = 20, className: g, showAI: f = !0, showAIConfig: m = !0, aiConfig: b }, h) {
+  const [C, K] = X(() => Ve(u ?? Ie())), [T, _] = X(je), P = F(null), A = F(null), p = F(null), x = F(null), N = Ue(x), { wrappedSetDoc: D, undo: t, redo: l, canUndo: y, canRedo: W } = He(C, K), R = F(null), H = F(null), U = F(null), Z = F(null), M = F(r);
+  M.current = r;
+  const S = F(C);
+  S.current = C, $e(h, () => ({
     exportPNG: async (G) => {
-      const T = C.current;
-      return !T || T.destroyed ? null : T.exportPNG(G);
+      const L = P.current;
+      return !L || L.destroyed ? null : L.exportPNG(G);
     },
-    getDocument: () => D.current
+    getDocument: () => S.current
   }), []);
-  const O = E((G) => {
-    d((T) => {
-      const B = typeof G == "function" ? G(T) : G;
-      return s ? B.canvases === T.canvases && B.title === T.title ? B : T : (queueMicrotask(() => M.current?.(B)), B);
+  const z = k((G) => {
+    D((L) => {
+      const V = typeof G == "function" ? G(L) : G;
+      return s ? V.canvases === L.canvases && V.title === L.title ? V : L : (queueMicrotask(() => M.current?.(V)), V);
     });
-  }, [d, s]), A = E(() => {
+  }, [D, s]), J = k(() => {
     s || t();
-  }, [s, t]), $ = E(() => {
-    s || i();
-  }, [s, i]), V = E((G) => {
-    C.current = G, f.current && !w.current && (w.current = new We(f.current));
-  }, []), de = E(async () => {
+  }, [s, t]), E = k(() => {
+    s || l();
+  }, [s, l]), B = k((G) => {
+    P.current = G, A.current && !p.current && (p.current = new We(A.current));
+  }, []), j = k(async () => {
     if (n) return void n();
-    const G = C.current;
+    const G = P.current;
     if (!G || G.destroyed) return;
-    const T = await G.exportPNG(16777215);
-    T && Pe(T, `${Me(D.current.title)}.png`);
-  }, [n]), ue = E(async () => {
-    await P.current?.();
+    const L = await G.exportPNG(16777215);
+    L && Pe(L, `${Me(S.current.title)}.png`);
+  }, [n]), ue = k(async () => {
+    await Z.current?.();
   }, []);
-  X(() => {
-    let G = !1, T = null;
-    const B = () => {
-      const Z = C.current, ne = w.current;
-      if (!Z || Z.destroyed || !ne) return;
+  Y(() => {
+    let G = !1, L = null;
+    const V = () => {
+      const O = P.current, oe = p.current;
+      if (!O || O.destroyed || !oe) return;
       const pe = {
-        x: Z.world.position.x,
-        y: Z.world.position.y,
-        zoom: Z.world.scale.x
-      }, me = S.stack[S.stack.length - 1] ?? "root", oe = S.canvases[me];
-      oe && ne.update(oe.nodes, pe, Z.app.screen.width, Z.app.screen.height);
-    }, te = () => {
+        x: O.world.position.x,
+        y: O.world.position.y,
+        zoom: O.world.scale.x
+      }, me = C.stack[C.stack.length - 1] ?? "root", se = C.canvases[me];
+      se && oe.update(se.nodes, pe, O.app.screen.width, O.app.screen.height);
+    }, ne = () => {
       if (G) return;
-      const Z = C.current;
-      Z && !Z.destroyed && w.current ? (Z.app.ticker.add(B), T = Z) : requestAnimationFrame(te);
+      const O = P.current;
+      O && !O.destroyed && p.current ? (O.app.ticker.add(V), L = O) : requestAnimationFrame(ne);
     };
-    return te(), () => {
-      G = !0, T && !T.destroyed && T.app.ticker.remove(B);
+    return ne(), () => {
+      G = !0, L && !L.destroyed && L.app.ticker.remove(V);
     };
-  }, [S]);
+  }, [C]);
   const fe = {
-    width: v ?? "100%",
-    height: u ?? "100%"
+    width: w ?? "100%",
+    height: d ?? "100%"
   };
-  return /* @__PURE__ */ r("div", {
-    ref: N,
-    className: `flow-container ${I ?? ""}`,
+  return /* @__PURE__ */ i("div", {
+    ref: x,
+    className: `flow-container ${g ?? ""}`,
     style: fe,
-    children: /* @__PURE__ */ r(ve, {
-      doc: S,
-      setDoc: O,
-      selection: z,
-      setSelection: J,
-      children: /* @__PURE__ */ r(ye, {
+    children: /* @__PURE__ */ i(ve, {
+      doc: C,
+      setDoc: z,
+      selection: T,
+      setSelection: _,
+      children: /* @__PURE__ */ i(ye, {
         showMiniMap: c,
-        showGrid: y,
+        showGrid: I,
         gridSize: e,
-        showAI: m,
+        showAI: f,
         readOnly: s,
-        children: /* @__PURE__ */ _(be, {
-          initialConfig: x,
-          showAIConfig: h,
+        children: /* @__PURE__ */ $(be, {
+          initialConfig: b,
+          showAIConfig: m,
           children: [
-            /* @__PURE__ */ r(Xe, {
-              onUndo: A,
-              onRedo: $,
-              groupRef: W,
+            /* @__PURE__ */ i(Xe, {
+              onUndo: J,
+              onRedo: E,
+              groupRef: R,
               geoGroupRef: H,
               ungroupRef: U
             }),
-            /* @__PURE__ */ r(Ye, {
-              pixiRef: C,
-              exportPdfRef: P
+            /* @__PURE__ */ i(Ye, {
+              pixiRef: P,
+              exportPdfRef: Z
             }),
-            /* @__PURE__ */ _(tt, {
-              compact: k,
-              toolbar: s ? null : /* @__PURE__ */ r(Ne, {
-                compact: k,
-                onBack: l,
-                onUndo: A,
-                onRedo: $,
-                canUndo: R,
-                canRedo: L,
-                onGroup: () => W.current?.(),
+            /* @__PURE__ */ $(tt, {
+              compact: N,
+              toolbar: s ? null : /* @__PURE__ */ i(Ne, {
+                compact: N,
+                onBack: a,
+                onUndo: J,
+                onRedo: E,
+                canUndo: y,
+                canRedo: W,
+                onGroup: () => R.current?.(),
                 onGeoGroup: () => H.current?.(),
                 onUngroup: () => U.current?.(),
-                onExportPNG: de,
+                onExportPNG: j,
                 onExportPDF: ue,
-                onPublish: b
+                onPublish: v
               }),
               children: [
-                /* @__PURE__ */ r(Ce, { onPixiReady: V }),
-                /* @__PURE__ */ r(Fe, {}),
-                /* @__PURE__ */ _(qe, { children: [!s && /* @__PURE__ */ r(ke, {}), /* @__PURE__ */ r(Ge, {})] }),
-                !s && /* @__PURE__ */ r(rt, {}),
-                /* @__PURE__ */ r(nt, {
-                  canvasRef: f,
-                  pixiRef: C,
-                  miniMapRef: w
+                /* @__PURE__ */ i(Ce, { onPixiReady: B }),
+                /* @__PURE__ */ i(Fe, {}),
+                /* @__PURE__ */ $(qe, { children: [!s && /* @__PURE__ */ i(ke, {}), /* @__PURE__ */ i(Ge, {})] }),
+                !s && /* @__PURE__ */ i(rt, {}),
+                /* @__PURE__ */ i(nt, {
+                  canvasRef: A,
+                  pixiRef: P,
+                  miniMapRef: p
                 }),
-                /* @__PURE__ */ r(Le, {})
+                /* @__PURE__ */ i(Le, {})
               ]
             })
           ]
@@ -466,10 +468,10 @@ var Ht = _e(function({ initialDocument: p, onChange: a, width: v, height: u, rea
   });
 });
 function qe({ children: o }) {
-  const { presentation: p } = Y();
-  return /* @__PURE__ */ r("div", {
+  const { presentation: u } = q();
+  return /* @__PURE__ */ i("div", {
     className: "flow-overlay",
-    style: { display: p ? "none" : void 0 },
+    style: { display: u ? "none" : void 0 },
     children: o
   });
 }
@@ -517,22 +519,22 @@ var Qe = [
     showKey: "showAI"
   }
 ];
-function ie(o) {
+function re(o) {
   switch (o) {
     case "shapes":
-      return /* @__PURE__ */ r(Ee, {});
+      return /* @__PURE__ */ i(Ee, {});
     case "icons":
-      return /* @__PURE__ */ r(Ae, {});
+      return /* @__PURE__ */ i(Ae, {});
     case "media":
-      return /* @__PURE__ */ r(De, {});
+      return /* @__PURE__ */ i(De, {});
     case "inspector":
-      return /* @__PURE__ */ r(ze, {});
+      return /* @__PURE__ */ i(ze, {});
     case "outline":
-      return /* @__PURE__ */ r(Te, {});
+      return /* @__PURE__ */ i(Te, {});
     case "json":
-      return /* @__PURE__ */ r(it, {});
+      return /* @__PURE__ */ i(it, {});
     case "ai":
-      return /* @__PURE__ */ r(Re, {});
+      return /* @__PURE__ */ i(Re, {});
     default:
       return null;
   }
@@ -542,175 +544,175 @@ var et = /* @__PURE__ */ new Set([
   "icons",
   "media"
 ]);
-function tt({ children: o, toolbar: p, compact: a }) {
-  const v = Y(), { panelDocks: u, setPanelDock: s, presentation: l, readOnly: n, setPendingPlacement: b } = v, { setShowPalette: c, setShowInspector: y, setShowOutline: e, setShowJson: I, setShowAI: m } = v, h = n ? [] : Qe.filter((t) => !t.showKey || v[t.showKey]), x = (t) => ({
+function tt({ children: o, toolbar: u, compact: r }) {
+  const w = q(), { panelDocks: d, setPanelDock: s, presentation: a, readOnly: n, setPendingPlacement: v } = w, { setShowPalette: c, setShowInspector: I, setShowOutline: e, setShowJson: g, setShowAI: f } = w, m = n ? [] : Qe.filter((t) => !t.showKey || w[t.showKey]), b = (t) => ({
     id: t.id,
     label: t.label,
     icon: t.icon,
-    content: ie(t.id)
-  }), [g, S] = j(null), K = F(null);
-  X(() => {
-    if (!a) {
+    content: re(t.id)
+  }), [h, C] = X(null), K = F(null);
+  Y(() => {
+    if (!r) {
       K.current = null;
       return;
     }
-    const t = v.pendingPlacement, i = t ? `${t.type}:${t.data?.svgId ?? ""}:${t.data?.mediaKind ?? ""}` : null, R = K.current;
-    K.current = i, i && i !== R && g && et.has(g) && S(null);
+    const t = w.pendingPlacement, l = t ? `${t.type}:${t.data?.svgId ?? ""}:${t.data?.mediaKind ?? ""}` : null, y = K.current;
+    K.current = l, l && l !== y && h && et.has(h) && C(null);
   }, [
-    v.pendingPlacement,
-    a,
-    g
+    w.pendingPlacement,
+    r,
+    h
   ]);
-  const [z, J] = j(null), C = E((t, i) => s(t, i), [s]), f = E((t) => {
-    t === "inspector" ? y(!1) : t === "outline" ? e(!1) : t === "json" ? I(!1) : t === "ai" ? m(!1) : c(!1);
+  const [T, _] = X(null), P = k((t, l) => s(t, l), [s]), A = k((t) => {
+    t === "inspector" ? I(!1) : t === "outline" ? e(!1) : t === "json" ? g(!1) : t === "ai" ? f(!1) : c(!1);
   }, [
-    y,
-    e,
     I,
-    m,
+    e,
+    g,
+    f,
     c
   ]);
-  if (a && !l) {
-    const t = h.find((i) => i.id === g) ?? null;
-    return /* @__PURE__ */ _("div", {
+  if (r && !a) {
+    const t = m.find((l) => l.id === h) ?? null;
+    return /* @__PURE__ */ $("div", {
       className: "flow-workspace",
       children: [
-        p,
-        h.length > 0 && /* @__PURE__ */ r("div", {
+        u,
+        m.length > 0 && /* @__PURE__ */ i("div", {
           className: "flow-mobile-panel-bar",
-          children: /* @__PURE__ */ r(he, {
+          children: /* @__PURE__ */ i(he, {
             placeholder: "选择面板…",
-            options: h.map((i) => ({
-              value: i.id,
-              label: i.label
+            options: m.map((l) => ({
+              value: l.id,
+              label: l.label
             })),
-            value: g ?? void 0,
-            onChange: (i) => {
-              b(null), S(String(i));
+            value: h ?? void 0,
+            onChange: (l) => {
+              v(null), C(String(l));
             }
           })
         }),
-        /* @__PURE__ */ _("div", {
+        /* @__PURE__ */ $("div", {
           className: "flow-workspace-main",
-          children: [/* @__PURE__ */ r("div", {
+          children: [/* @__PURE__ */ i("div", {
             className: "flow-stage",
             children: o
-          }), t && /* @__PURE__ */ _("div", {
+          }), t && /* @__PURE__ */ $("div", {
             className: "flow-mobile-panel",
-            children: [/* @__PURE__ */ _("div", {
+            children: [/* @__PURE__ */ $("div", {
               className: "flow-mobile-panel-header",
-              children: [/* @__PURE__ */ _("span", {
+              children: [/* @__PURE__ */ $("span", {
                 className: "flow-mobile-panel-title",
-                children: [t.icon && /* @__PURE__ */ r("span", {
+                children: [t.icon && /* @__PURE__ */ i("span", {
                   className: "flow-panel-tab-icon",
                   children: t.icon
                 }), t.label]
-              }), /* @__PURE__ */ r("button", {
+              }), /* @__PURE__ */ i("button", {
                 type: "button",
                 className: "flow-mobile-panel-close",
                 "aria-label": "关闭面板",
-                onClick: () => S(null),
+                onClick: () => C(null),
                 children: "✕"
               })]
-            }), /* @__PURE__ */ r("div", {
+            }), /* @__PURE__ */ i("div", {
               className: "flow-mobile-panel-body",
-              children: ie(t.id)
+              children: re(t.id)
             })]
           })]
         })
       ]
     });
   }
-  const w = (t) => u[t] ?? "left", N = h.filter((t) => w(t.id) === "left").map(x), k = h.filter((t) => w(t.id) === "right").map(x), d = h.filter((t) => w(t.id) === "float");
-  return /* @__PURE__ */ _("div", {
+  const p = (t) => d[t] ?? "left", x = m.filter((t) => p(t.id) === "left").map(b), N = m.filter((t) => p(t.id) === "right").map(b), D = m.filter((t) => p(t.id) === "float");
+  return /* @__PURE__ */ $("div", {
     className: "flow-workspace",
-    children: [!l && p, /* @__PURE__ */ _("div", {
+    children: [!a && u, /* @__PURE__ */ $("div", {
       className: "flow-workspace-main",
       children: [
-        !l && N.length > 0 && /* @__PURE__ */ r(q, {
-          tabs: N,
-          defaultTab: N[0]?.id,
+        !a && x.length > 0 && /* @__PURE__ */ i(Q, {
+          tabs: x,
+          defaultTab: x[0]?.id,
           resizeEdge: "right",
           defaultWidth: 220,
           dock: "left",
-          onDock: C,
-          onClose: f
+          onDock: P,
+          onClose: A
         }),
-        /* @__PURE__ */ r("div", {
+        /* @__PURE__ */ i("div", {
           className: "flow-stage",
           children: o
         }),
-        !l && k.length > 0 && /* @__PURE__ */ r(q, {
-          tabs: k,
-          defaultTab: k[0]?.id,
+        !a && N.length > 0 && /* @__PURE__ */ i(Q, {
+          tabs: N,
+          defaultTab: N[0]?.id,
           resizeEdge: "left",
           defaultWidth: 220,
           dock: "right",
-          onDock: C,
-          onClose: f
+          onDock: P,
+          onClose: A
         }),
-        !l && d.map((t, i) => /* @__PURE__ */ r(q, {
-          tabs: [x(t)],
+        !a && D.map((t, l) => /* @__PURE__ */ i(Q, {
+          tabs: [b(t)],
           resizeEdge: "right",
           defaultWidth: 220,
           dock: "float",
           style: {
-            top: 48 + i * 40,
-            left: 24 + i * 30
+            top: 48 + l * 40,
+            left: 24 + l * 30
           },
-          onDock: C,
-          onClose: f,
-          onDragHintChange: J
+          onDock: P,
+          onClose: A,
+          onDragHintChange: _
         }, t.id)),
-        !l && z && /* @__PURE__ */ r("div", {
-          className: `flow-dock-dropzone flow-dock-dropzone--${z}`,
-          children: /* @__PURE__ */ r("span", { children: z === "left" ? "⇤ 停靠左侧" : "停靠右侧 ⇥" })
+        !a && T && /* @__PURE__ */ i("div", {
+          className: `flow-dock-dropzone flow-dock-dropzone--${T}`,
+          children: /* @__PURE__ */ i("span", { children: T === "left" ? "⇤ 停靠左侧" : "停靠右侧 ⇥" })
         })
       ]
     })]
   });
 }
-function nt({ canvasRef: o, pixiRef: p, miniMapRef: a }) {
-  const { showMiniMap: v, setViewport: u, presentation: s } = Y(), l = F(!1), n = E((e, I) => {
-    const m = o.current, h = p.current, x = a.current;
-    if (!m || !h || h.destroyed || !x) return;
-    const g = m.getBoundingClientRect();
-    if (g.width === 0 || g.height === 0) return;
-    const { width: S, height: K } = x.size, z = (e - g.left) / g.width * S, J = (I - g.top) / g.height * K, C = x.minimapToWorld(z, J);
-    if (!C) return;
-    const f = h.world.scale.x || 1, w = h.app.screen.width, N = h.app.screen.height;
-    u({
-      x: w / 2 - C.x * f,
-      y: N / 2 - C.y * f,
-      zoom: f
+function nt({ canvasRef: o, pixiRef: u, miniMapRef: r }) {
+  const { showMiniMap: w, setViewport: d, presentation: s } = q(), a = F(!1), n = k((e, g) => {
+    const f = o.current, m = u.current, b = r.current;
+    if (!f || !m || m.destroyed || !b) return;
+    const h = f.getBoundingClientRect();
+    if (h.width === 0 || h.height === 0) return;
+    const { width: C, height: K } = b.size, T = (e - h.left) / h.width * C, _ = (g - h.top) / h.height * K, P = b.minimapToWorld(T, _);
+    if (!P) return;
+    const A = m.world.scale.x || 1, p = m.app.screen.width, x = m.app.screen.height;
+    d({
+      x: p / 2 - P.x * A,
+      y: x / 2 - P.y * A,
+      zoom: A
     });
   }, [
     o,
-    p,
-    a,
-    u
-  ]), b = E((e) => {
-    e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), l.current = !0, n(e.clientX, e.clientY);
-  }, [n]), c = E((e) => {
-    l.current && n(e.clientX, e.clientY);
-  }, [n]), y = E((e) => {
-    l.current = !1;
+    u,
+    r,
+    d
+  ]), v = k((e) => {
+    e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), a.current = !0, n(e.clientX, e.clientY);
+  }, [n]), c = k((e) => {
+    a.current && n(e.clientX, e.clientY);
+  }, [n]), I = k((e) => {
+    a.current = !1;
     try {
       e.currentTarget.releasePointerCapture(e.pointerId);
     } catch {
     }
   }, []);
-  return /* @__PURE__ */ r("div", {
+  return /* @__PURE__ */ i("div", {
     className: "flow-minimap",
     style: {
-      display: v && !s ? void 0 : "none",
+      display: w && !s ? void 0 : "none",
       cursor: "pointer"
     },
-    onPointerDown: b,
+    onPointerDown: v,
     onPointerMove: c,
-    onPointerUp: y,
+    onPointerUp: I,
     title: "点击或拖动以移动画布",
-    children: /* @__PURE__ */ r("canvas", {
+    children: /* @__PURE__ */ i("canvas", {
       ref: o,
       width: 180,
       height: 120,
@@ -722,97 +724,97 @@ function nt({ canvasRef: o, pixiRef: p, miniMapRef: a }) {
     })
   });
 }
-function ot(o, p) {
-  const a = `"id": "${p}"`, v = o.indexOf(a);
-  if (v === -1) return null;
-  let u = 0, s = -1;
-  for (let n = v; n >= 0; n--)
-    if (o[n] === "}" && u++, o[n] === "{") {
-      if (u === 0) {
+function ot(o, u) {
+  const r = `"id": "${u}"`, w = o.indexOf(r);
+  if (w === -1) return null;
+  let d = 0, s = -1;
+  for (let n = w; n >= 0; n--)
+    if (o[n] === "}" && d++, o[n] === "{") {
+      if (d === 0) {
         s = n;
         break;
       }
-      u--;
+      d--;
     }
   if (s === -1) return null;
-  u = 0;
-  let l = -1;
+  d = 0;
+  let a = -1;
   for (let n = s; n < o.length; n++)
-    if (o[n] === "{" && u++, o[n] === "}" && (u--, u === 0)) {
-      l = n;
+    if (o[n] === "{" && d++, o[n] === "}" && (d--, d === 0)) {
+      a = n;
       break;
     }
-  return l === -1 ? null : {
+  return a === -1 ? null : {
     startLine: o.slice(0, s).split(`
 `).length,
-    endLine: o.slice(0, l + 1).split(`
+    endLine: o.slice(0, a + 1).split(`
 `).length
   };
 }
-function re(o) {
-  o.querySelectorAll(".cm-line.flow-json-hl").forEach((p) => p.classList.remove("flow-json-hl"));
+function ae(o) {
+  o.querySelectorAll(".cm-line.flow-json-hl").forEach((u) => u.classList.remove("flow-json-hl"));
 }
-function st(o, p, a) {
-  const v = o.getView();
-  if (v)
-    for (let u = p; u <= a; u++) try {
-      const s = v.state.doc.line(u), l = v.domAtPos(s.from), n = l.node instanceof HTMLElement ? l.node.closest(".cm-line") : l.node.parentElement?.closest(".cm-line");
+function st(o, u, r) {
+  const w = o.getView();
+  if (w)
+    for (let d = u; d <= r; d++) try {
+      const s = w.state.doc.line(d), a = w.domAtPos(s.from), n = a.node instanceof HTMLElement ? a.node.closest(".cm-line") : a.node.parentElement?.closest(".cm-line");
       n && n.classList.add("flow-json-hl");
     } catch {
     }
 }
 function it() {
-  const { setDoc: o, currentCanvasId: p, selection: a, currentCanvas: v } = ee(), [u, s] = j(""), [l, n] = j(null), b = F(!1), c = F(null), y = F(null), e = le(() => a.nodeIds.size + a.edgeIds.size + a.lineIds.size !== 1 ? null : a.nodeIds.size === 1 ? [...a.nodeIds][0] : a.edgeIds.size === 1 ? [...a.edgeIds][0] : a.lineIds.size === 1 ? [...a.lineIds][0] : null, [a]);
-  X(() => {
-    if (b.current) {
-      b.current = !1;
+  const { setDoc: o, currentCanvasId: u, selection: r, currentCanvas: w } = te(), [d, s] = X(""), [a, n] = X(null), v = F(!1), c = F(null), I = F(null), e = ce(() => r.nodeIds.size + r.edgeIds.size + r.lineIds.size !== 1 ? null : r.nodeIds.size === 1 ? [...r.nodeIds][0] : r.edgeIds.size === 1 ? [...r.edgeIds][0] : r.lineIds.size === 1 ? [...r.lineIds][0] : null, [r]);
+  Y(() => {
+    if (v.current) {
+      v.current = !1;
       return;
     }
-    s(JSON.stringify(v, null, 2)), n(null);
-  }, [v]), X(() => {
-    const h = y.current;
-    if (h && re(h), !e) return;
-    const x = setTimeout(() => {
-      const g = ot(u, e);
-      if (!g || !y.current) return;
-      const S = c.current?.getView();
-      if (!S) return;
-      const K = y.current, z = S.scrollDOM;
-      z.style.scrollBehavior = "smooth";
-      const J = S.state.doc.line(g.startLine);
-      S.dispatch({ effects: Be.scrollIntoView(J.from, {
+    s(JSON.stringify(w, null, 2)), n(null);
+  }, [w]), Y(() => {
+    const m = I.current;
+    if (m && ae(m), !e) return;
+    const b = setTimeout(() => {
+      const h = ot(d, e);
+      if (!h || !I.current) return;
+      const C = c.current?.getView();
+      if (!C) return;
+      const K = I.current, T = C.scrollDOM;
+      T.style.scrollBehavior = "smooth";
+      const _ = C.state.doc.line(h.startLine);
+      C.dispatch({ effects: Be.scrollIntoView(_.from, {
         y: "start",
         yMargin: 0
       }) });
-      const C = () => {
-        z.style.scrollBehavior = "", re(K), st(c.current, g.startLine, g.endLine);
+      const P = () => {
+        T.style.scrollBehavior = "", ae(K), st(c.current, h.startLine, h.endLine);
       };
-      let f;
-      const w = () => {
-        clearTimeout(f), f = setTimeout(C, 100);
+      let A;
+      const p = () => {
+        clearTimeout(A), A = setTimeout(P, 100);
       };
-      z.addEventListener("scroll", w), f = setTimeout(() => {
-        z.removeEventListener("scroll", w), C();
+      T.addEventListener("scroll", p), A = setTimeout(() => {
+        T.removeEventListener("scroll", p), P();
       }, 800);
     }, 120);
-    return () => clearTimeout(x);
-  }, [e, u]);
-  const I = E((h) => {
-    s(h);
+    return () => clearTimeout(b);
+  }, [e, d]);
+  const g = k((m) => {
+    s(m);
     try {
-      const x = JSON.parse(h);
-      x && Array.isArray(x.nodes) && Array.isArray(x.edges) && Array.isArray(x.lines) ? (n(null), b.current = !0, o((g) => ({
-        ...g,
+      const b = JSON.parse(m);
+      b && Array.isArray(b.nodes) && Array.isArray(b.edges) && Array.isArray(b.lines) ? (n(null), v.current = !0, o((h) => ({
+        ...h,
         canvases: {
-          ...g.canvases,
-          [p]: x
+          ...h.canvases,
+          [u]: b
         }
       }))) : n("JSON must have nodes, edges, lines arrays");
-    } catch (x) {
-      n(x.message?.slice(0, 60) ?? "Invalid JSON");
+    } catch (b) {
+      n(b.message?.slice(0, 60) ?? "Invalid JSON");
     }
-  }, [o, p]), m = e ? a.nodeIds.has(e) ? "Node" : a.edgeIds.has(e) ? "Edge" : "Line" : null;
-  return /* @__PURE__ */ _("div", {
+  }, [o, u]), f = e ? r.nodeIds.has(e) ? "Node" : r.edgeIds.has(e) ? "Edge" : "Line" : null;
+  return /* @__PURE__ */ $("div", {
     style: {
       display: "flex",
       flexDirection: "column",
@@ -820,32 +822,32 @@ function it() {
       minHeight: 0
     },
     children: [
-      /* @__PURE__ */ r("div", {
+      /* @__PURE__ */ i("div", {
         className: "flow-json-header",
-        children: /* @__PURE__ */ r("span", {
+        children: /* @__PURE__ */ i("span", {
           className: "flow-json-scope",
-          children: m ? `${m}: ${e.slice(0, 8)}` : "Canvas"
+          children: f ? `${f}: ${e.slice(0, 8)}` : "Canvas"
         })
       }),
-      l && /* @__PURE__ */ r("div", {
+      a && /* @__PURE__ */ i("div", {
         style: {
           fontSize: 11,
           color: "oklch(var(--er))",
           padding: "4px 0",
           flexShrink: 0
         },
-        children: l
+        children: a
       }),
-      /* @__PURE__ */ r("div", {
-        ref: y,
+      /* @__PURE__ */ i("div", {
+        ref: I,
         style: {
           flex: 1,
           minHeight: 0
         },
-        children: /* @__PURE__ */ r(ge, {
+        children: /* @__PURE__ */ i(ge, {
           ref: c,
-          value: u,
-          onChange: I,
+          value: d,
+          onChange: g,
           language: "json",
           lineNumbers: !1,
           height: "100%",
@@ -856,85 +858,85 @@ function it() {
   });
 }
 function rt() {
-  const { contextMenu: o, setContextMenu: p } = Y(), { doc: a, setDoc: v, currentCanvasId: u, pushCanvas: s, setSelection: l } = ee(), { duplicate: n } = ae();
+  const { contextMenu: o, setContextMenu: u } = q(), { doc: r, setDoc: w, currentCanvasId: d, pushCanvas: s, setSelection: a } = te(), { duplicate: n } = le();
   if (!o) return null;
-  const b = a.canvases[u];
-  if (!b)
-    return p(null), null;
-  const c = o.nodeId ? b.nodes.find((e) => e.id === o.nodeId) : null, y = [];
-  return c && (y.push({
+  const v = r.canvases[d];
+  if (!v)
+    return u(null), null;
+  const c = o.nodeId ? v.nodes.find((e) => e.id === o.nodeId) : null, I = [];
+  return c && (I.push({
     label: "Duplicate",
     icon: "⧉",
     action: () => {
       n(24, 24, { nodeIds: /* @__PURE__ */ new Set([c.id]) });
     }
-  }), y.push({
+  }), I.push({
     label: "---",
     action: () => {
     }
-  }), c.data.childCanvasId ? (y.push({
+  }), c.data.childCanvasId ? (I.push({
     label: "Enter Sub-canvas",
     icon: "↓",
     action: () => {
-      s(c.data.childCanvasId), l({
+      s(c.data.childCanvasId), a({
         nodeIds: /* @__PURE__ */ new Set(),
         edgeIds: /* @__PURE__ */ new Set(),
         lineIds: /* @__PURE__ */ new Set()
       });
     }
-  }), y.push({
+  }), I.push({
     label: "---",
     action: () => {
     }
-  }), y.push({
+  }), I.push({
     label: "Delete Sub-canvas",
     icon: "🗑",
     danger: !0,
     action: () => {
       const e = c.data.childCanvasId;
-      v((I) => {
-        const m = { ...I.canvases };
-        ce(m, e);
-        const h = m[u];
-        if (!h) return I;
-        m[u] = {
-          ...h,
-          nodes: h.nodes.map((g) => g.id === c.id ? {
-            ...g,
+      w((g) => {
+        const f = { ...g.canvases };
+        de(f, e);
+        const m = f[d];
+        if (!m) return g;
+        f[d] = {
+          ...m,
+          nodes: m.nodes.map((h) => h.id === c.id ? {
+            ...h,
             data: {
-              ...g.data,
+              ...h.data,
               childCanvasId: void 0
             }
-          } : g)
+          } : h)
         };
-        const x = I.stack.filter((g) => m[g]);
-        return x.length === 0 && x.push(we), {
-          ...I,
-          canvases: m,
-          stack: x
+        const b = g.stack.filter((h) => f[h]);
+        return b.length === 0 && b.push(we), {
+          ...g,
+          canvases: f,
+          stack: b
         };
       });
     }
-  })) : y.push({
+  })) : I.push({
     label: "Create Sub-canvas",
     icon: "⊞",
     action: () => {
-      const e = Q("canvas");
-      v((I) => {
-        const m = I.canvases[u];
-        return m ? {
-          ...I,
+      const e = ee("canvas");
+      w((g) => {
+        const f = g.canvases[d];
+        return f ? {
+          ...g,
           canvases: {
-            ...I.canvases,
-            [u]: {
-              ...m,
-              nodes: m.nodes.map((h) => h.id === c.id ? {
-                ...h,
+            ...g.canvases,
+            [d]: {
+              ...f,
+              nodes: f.nodes.map((m) => m.id === c.id ? {
+                ...m,
                 data: {
-                  ...h.data,
+                  ...m.data,
                   childCanvasId: e
                 }
-              } : h)
+              } : m)
             },
             [e]: {
               nodes: [],
@@ -942,21 +944,21 @@ function rt() {
               lines: []
             }
           }
-        } : I;
+        } : g;
       }), s(e);
     }
-  })), y.length === 0 ? null : /* @__PURE__ */ r(Ke, {
+  })), I.length === 0 ? null : /* @__PURE__ */ i(Ke, {
     x: o.x,
     y: o.y,
-    items: y,
-    onClose: () => p(null)
+    items: I,
+    onClose: () => u(null)
   });
 }
-function ce(o, p) {
-  const a = o[p];
-  if (a) {
-    for (const v of a.nodes) v.data.childCanvasId && ce(o, v.data.childCanvasId);
-    delete o[p];
+function de(o, u) {
+  const r = o[u];
+  if (r) {
+    for (const w of r.nodes) w.data.childCanvasId && de(o, w.data.childCanvasId);
+    delete o[u];
   }
 }
 export {