dishui 0.0.65 → 0.0.67

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

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