dishui 0.0.46 → 0.0.48

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

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