dishui 0.0.56 → 0.0.59

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

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