dishui 0.0.64 → 0.0.66

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

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