dishui 0.0.57 → 0.0.60

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

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