dishui 0.0.55 → 0.0.57

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

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