@blueking/flow-canvas 0.0.2 → 0.0.4

package/dist/index.esm.js

@@ -1,231 +1,233 @@
-import { ref as L, computed as H, onScopeDispose as Ue, defineComponent as ce, onBeforeUnmount as Re, createElementBlock as N, openBlock as I, normalizeStyle as Ie, createElementVNode as R, createVNode as Ve, createCommentVNode as F, normalizeClass as Q, Transition as We, withCtx as $e, withModifiers as Ze, createTextVNode as Oe, renderSlot as me, onMounted as Je, watch as ge, createBlock as Ce, Fragment as de, renderList as Ee, toDisplayString as he, unref as et, resolveDynamicComponent as tt, inject as ot } from "vue";
-import { Graph as nt } from "@antv/x6";
-import { register as st } from "@antv/x6-vue-shape";
-function mo() {
+import { ref as O, computed as j, onScopeDispose as Ye, defineComponent as le, h as Ae, watch as fe, onBeforeUnmount as Se, createElementBlock as A, openBlock as N, normalizeStyle as ve, createElementVNode as G, createVNode as Ze, createCommentVNode as V, normalizeClass as te, Transition as Qe, withCtx as $e, withModifiers as nt, createTextVNode as Pe, renderSlot as we, onMounted as Je, createBlock as ye, Fragment as he, renderList as xe, toDisplayString as ce, unref as re, reactive as st, resolveDynamicComponent as it, Teleport as rt, nextTick as Te, inject as at, createApp as lt } from "vue";
+import { Graph as dt } from "@antv/x6";
+import { register as ct } from "@antv/x6-vue-shape";
+import { Selection as ut } from "@antv/x6-plugin-selection";
+import { MiniMap as ft } from "@antv/x6-plugin-minimap";
+function rn() {
   return {
     version: "1.0",
     nodes: {},
     edges: {}
   };
 }
-class Y extends Error {
+class ae extends Error {
   constructor(e) {
     super(e), this.name = "CanvasConstraintError";
   }
 }
-class it extends Error {
+class pt extends Error {
   constructor(e) {
     super(e), this.name = "CanvasSchemaError";
   }
 }
-function Me(s, e, t) {
+function _e(n, e, t) {
   if (e.length === 0) {
     if (t === void 0) return;
     if (typeof t != "object" || t === null || Array.isArray(t))
       throw new Error("Root value of payload/extensions/meta must be an object or undefined");
     return t;
   }
-  const o = s ? { ...s } : {};
-  let n = o;
+  const s = n ? { ...n } : {};
+  let o = s;
   for (let r = 0; r < e.length - 1; r++) {
-    const l = e[r], a = n[l];
-    a && typeof a == "object" && !Array.isArray(a) ? n[l] = { ...a } : n[l] = {}, n = n[l];
+    const l = e[r], a = o[l];
+    a && typeof a == "object" && !Array.isArray(a) ? o[l] = { ...a } : o[l] = {}, o = o[l];
   }
   const i = e[e.length - 1];
-  return t === void 0 ? delete n[i] : n[i] = t, o;
+  return t === void 0 ? delete o[i] : o[i] = t, s;
 }
-function Te(s, e) {
+function Re(n, e) {
   switch (e.type) {
     case "node.add":
-      return rt(s, e.node);
+      return gt(n, e.node);
     case "node.move":
-      return at(s, e.nodeId, e.position);
+      return ht(n, e.nodeId, e.position);
     case "node.remove":
-      return lt(s, e.nodeId);
+      return vt(n, e.nodeId);
     case "node.update":
-      return dt(s, e.nodeId, e.patch);
+      return yt(n, e.nodeId, e.patch);
     case "node.set-payload":
-      return ct(s, e.nodeId, e.path, e.value);
+      return mt(n, e.nodeId, e.path, e.value);
     case "node.set-extensions":
-      return ut(s, e.nodeId, e.path, e.value);
+      return bt(n, e.nodeId, e.path, e.value);
     case "edge.add":
-      return ft(s, e.edge);
+      return wt(n, e.edge);
     case "edge.remove":
-      return pt(s, e.edgeId);
+      return xt(n, e.edgeId);
     case "edge.reconnect":
-      return gt(s, e.edgeId, e.source, e.target);
+      return Ct(n, e.edgeId, e.source, e.target);
     case "edge.update":
-      return ht(s, e.edgeId, e.patch);
+      return Et(n, e.edgeId, e.patch);
     case "edge.set-payload":
-      return vt(s, e.edgeId, e.path, e.value);
+      return kt(n, e.edgeId, e.path, e.value);
     case "edge.label.update":
-      return yt(s, e.edgeId, e.labelId, e.patch);
+      return It(n, e.edgeId, e.labelId, e.patch);
     case "model.set-meta":
-      return mt(s, e.path, e.value);
+      return St(n, e.path, e.value);
     default:
-      throw new Y(`Unknown command type: ${e.type}`);
+      throw new ae(`Unknown command type: ${e.type}`);
   }
 }
-function be(s, e) {
-  const t = s.nodes[e];
-  if (!t) throw new Y(`Node "${e}" does not exist`);
+function Ce(n, e) {
+  const t = n.nodes[e];
+  if (!t) throw new ae(`Node "${e}" does not exist`);
   return t;
 }
-function we(s, e) {
-  const t = s.edges[e];
-  if (!t) throw new Y(`Edge "${e}" does not exist`);
+function Ee(n, e) {
+  const t = n.edges[e];
+  if (!t) throw new ae(`Edge "${e}" does not exist`);
   return t;
 }
-function ve(s, e, t) {
-  const o = s.nodes[e.nodeId];
-  if (!o)
-    throw new Y(`${t} node "${e.nodeId}" does not exist`);
-  if (e.portId && o.ports && !o.ports.some((i) => i.id === e.portId))
-    throw new Y(`${t} port "${e.portId}" not found on node "${e.nodeId}"`);
-}
-function Ne(s, e, t) {
-  return { ...s, nodes: { ...s.nodes, [e]: t } };
-}
-function Se(s, e, t) {
-  return { ...s, edges: { ...s.edges, [e]: t } };
-}
-function rt(s, e) {
-  if (s.nodes[e.id])
-    throw new Y(`Node id "${e.id}" already exists`);
-  return { ...s, nodes: { ...s.nodes, [e.id]: e } };
-}
-function at(s, e, t) {
-  const o = be(s, e);
-  return Ne(s, e, { ...o, position: t });
-}
-function lt(s, e) {
-  be(s, e);
-  const { [e]: t, ...o } = s.nodes, n = {};
-  for (const [i, r] of Object.entries(s.edges))
-    r.source.nodeId !== e && r.target.nodeId !== e && (n[i] = r);
-  return { ...s, nodes: o, edges: n };
-}
-function dt(s, e, t) {
-  const o = be(s, e);
-  return Ne(s, e, { ...o, ...t, id: o.id });
-}
-function ct(s, e, t, o) {
-  const n = be(s, e), i = Me(n.payload, t, o);
-  return Ne(s, e, { ...n, payload: i });
-}
-function ut(s, e, t, o) {
-  const n = be(s, e), i = Me(n.extensions, t, o);
-  return Ne(s, e, { ...n, extensions: i });
-}
-function ft(s, e) {
-  if (s.edges[e.id])
-    throw new Y(`Edge id "${e.id}" already exists`);
-  if (ve(s, e.source, "Source"), ve(s, e.target, "Target"), e.labels) {
+function me(n, e, t) {
+  const s = n.nodes[e.nodeId];
+  if (!s)
+    throw new ae(`${t} node "${e.nodeId}" does not exist`);
+  if (e.portId && s.ports && !s.ports.some((i) => i.id === e.portId))
+    throw new ae(`${t} port "${e.portId}" not found on node "${e.nodeId}"`);
+}
+function Ne(n, e, t) {
+  return { ...n, nodes: { ...n.nodes, [e]: t } };
+}
+function Me(n, e, t) {
+  return { ...n, edges: { ...n.edges, [e]: t } };
+}
+function gt(n, e) {
+  if (n.nodes[e.id])
+    throw new ae(`Node id "${e.id}" already exists`);
+  return { ...n, nodes: { ...n.nodes, [e.id]: e } };
+}
+function ht(n, e, t) {
+  const s = Ce(n, e);
+  return Ne(n, e, { ...s, position: t });
+}
+function vt(n, e) {
+  Ce(n, e);
+  const { [e]: t, ...s } = n.nodes, o = {};
+  for (const [i, r] of Object.entries(n.edges))
+    r.source.nodeId !== e && r.target.nodeId !== e && (o[i] = r);
+  return { ...n, nodes: s, edges: o };
+}
+function yt(n, e, t) {
+  const s = Ce(n, e);
+  return Ne(n, e, { ...s, ...t, id: s.id });
+}
+function mt(n, e, t, s) {
+  const o = Ce(n, e), i = _e(o.payload, t, s);
+  return Ne(n, e, { ...o, payload: i });
+}
+function bt(n, e, t, s) {
+  const o = Ce(n, e), i = _e(o.extensions, t, s);
+  return Ne(n, e, { ...o, extensions: i });
+}
+function wt(n, e) {
+  if (n.edges[e.id])
+    throw new ae(`Edge id "${e.id}" already exists`);
+  if (me(n, e.source, "Source"), me(n, e.target, "Target"), e.labels) {
     const t = /* @__PURE__ */ new Set();
-    for (const o of e.labels) {
-      if (t.has(o.id))
-        throw new Y(`Duplicate label id "${o.id}" in edge "${e.id}"`);
-      t.add(o.id);
+    for (const s of e.labels) {
+      if (t.has(s.id))
+        throw new ae(`Duplicate label id "${s.id}" in edge "${e.id}"`);
+      t.add(s.id);
     }
   }
-  return { ...s, edges: { ...s.edges, [e.id]: e } };
+  return { ...n, edges: { ...n.edges, [e.id]: e } };
 }
-function pt(s, e) {
-  we(s, e);
-  const { [e]: t, ...o } = s.edges;
-  return { ...s, edges: o };
+function xt(n, e) {
+  Ee(n, e);
+  const { [e]: t, ...s } = n.edges;
+  return { ...n, edges: s };
 }
-function gt(s, e, t, o) {
-  const n = we(s, e), i = t ?? n.source, r = o ?? n.target;
-  return ve(s, i, "Source"), ve(s, r, "Target"), Se(s, e, { ...n, source: i, target: r });
+function Ct(n, e, t, s) {
+  const o = Ee(n, e), i = t ?? o.source, r = s ?? o.target;
+  return me(n, i, "Source"), me(n, r, "Target"), Me(n, e, { ...o, source: i, target: r });
 }
-function ht(s, e, t) {
-  const o = we(s, e), n = { ...o, ...t, id: o.id };
-  return t.source && ve(s, n.source, "Source"), t.target && ve(s, n.target, "Target"), Se(s, e, n);
+function Et(n, e, t) {
+  const s = Ee(n, e), o = { ...s, ...t, id: s.id };
+  return t.source && me(n, o.source, "Source"), t.target && me(n, o.target, "Target"), Me(n, e, o);
 }
-function vt(s, e, t, o) {
-  const n = we(s, e), i = Me(n.payload, t, o);
-  return Se(s, e, { ...n, payload: i });
+function kt(n, e, t, s) {
+  const o = Ee(n, e), i = _e(o.payload, t, s);
+  return Me(n, e, { ...o, payload: i });
 }
-function yt(s, e, t, o) {
-  const n = we(s, e);
-  if (!n.labels)
-    throw new Y(`Edge "${e}" has no labels`);
-  const i = n.labels.findIndex((l) => l.id === t);
+function It(n, e, t, s) {
+  const o = Ee(n, e);
+  if (!o.labels)
+    throw new ae(`Edge "${e}" has no labels`);
+  const i = o.labels.findIndex((l) => l.id === t);
   if (i === -1)
-    throw new Y(`Label "${t}" not found in edge "${e}"`);
-  const r = [...n.labels];
-  return r[i] = { ...r[i], ...o, id: t }, Se(s, e, { ...n, labels: r });
+    throw new ae(`Label "${t}" not found in edge "${e}"`);
+  const r = [...o.labels];
+  return r[i] = { ...r[i], ...s, id: t }, Me(n, e, { ...o, labels: r });
 }
-function mt(s, e, t) {
-  const o = Me(s.meta, e, t);
-  return { ...s, meta: o };
+function St(n, e, t) {
+  const s = _e(n.meta, e, t);
+  return { ...n, meta: s };
 }
-function bt(s, e) {
-  const t = e?.maxHistorySize ?? 100, o = L(s), n = [], i = [], r = L(!1), l = L(!1);
+function _t(n, e) {
+  const t = e?.maxHistorySize ?? 100, s = O(n), o = [], i = [], r = O(!1), l = O(!1);
   function a() {
-    r.value = n.length > 0, l.value = i.length > 0;
-  }
-  function f(k) {
-    const w = o.value;
-    let x = w;
-    for (const A of k.commands)
-      x = Te(x, A);
-    return n.push({ snapshot: w, envelope: k }), n.length > t && n.shift(), i.length = 0, o.value = x, a(), x;
-  }
-  function d() {
-    const k = n.pop();
-    return k ? (i.push({ snapshot: o.value, envelope: k.envelope }), o.value = k.snapshot, a(), k.snapshot) : null;
-  }
-  function b() {
-    const k = i.pop();
-    if (!k) return null;
-    n.push({ snapshot: o.value, envelope: k.envelope });
-    let w = o.value;
-    for (const x of k.envelope.commands)
-      w = Te(w, x);
-    return o.value = w, a(), w;
-  }
-  function m() {
-    n.length = 0, i.length = 0, a();
+    r.value = o.length > 0, l.value = i.length > 0;
+  }
+  function p(C) {
+    const M = s.value;
+    let D = M;
+    for (const L of C.commands)
+      D = Re(D, L);
+    return o.push({ snapshot: M, envelope: C }), o.length > t && o.shift(), i.length = 0, s.value = D, a(), D;
+  }
+  function c() {
+    const C = o.pop();
+    return C ? (i.push({ snapshot: s.value, envelope: C.envelope }), s.value = C.snapshot, a(), C.snapshot) : null;
   }
   function g() {
-    return o.value;
+    const C = i.pop();
+    if (!C) return null;
+    o.push({ snapshot: s.value, envelope: C.envelope });
+    let M = s.value;
+    for (const D of C.envelope.commands)
+      M = Re(M, D);
+    return s.value = M, a(), M;
   }
-  function S(k) {
-    o.value = k, m();
+  function u() {
+    o.length = 0, i.length = 0, a();
+  }
+  function y() {
+    return s.value;
+  }
+  function v(C) {
+    s.value = C, u();
   }
   return {
-    currentFlowModel: o,
-    execute: f,
-    undo: d,
-    redo: b,
+    currentFlowModel: s,
+    execute: p,
+    undo: c,
+    redo: g,
     canUndo: r,
     canRedo: l,
     get undoStack() {
-      return n.map((k) => k.envelope);
+      return o.map((C) => C.envelope);
     },
     get redoStack() {
-      return i.map((k) => k.envelope);
+      return i.map((C) => C.envelope);
     },
-    clear: m,
-    createSnapshot: g,
-    replaceFlowModel: S
+    clear: u,
+    createSnapshot: y,
+    replaceFlowModel: v
   };
 }
-function wt(s) {
-  return s !== null && typeof s == "object" && s.rejected === !0;
+function Nt(n) {
+  return n !== null && typeof n == "object" && n.rejected === !0;
 }
-class xt {
+class Mt {
   plugins = [];
   editorContext = null;
   runtimeCtx = null;
   /** 每次 attachRuntime 递增，detachRuntime 时旧 generation 的异步调用自动作废 */
   runtimeVersion = 0;
   install(e, t) {
-    this.plugins = [...e].sort((o, n) => (o.priority ?? 100) - (n.priority ?? 100)), this.editorContext = t;
-    for (const o of this.plugins)
-      o.install?.(t);
+    this.plugins = [...e].sort((s, o) => (s.priority ?? 100) - (o.priority ?? 100)), this.editorContext = t;
+    for (const s of this.plugins)
+      s.install?.(t);
   }
   /**
    * 挂载运行时上下文并调用各插件的 attachRuntime。
@@ -235,9 +237,9 @@ class xt {
   attachRuntime(e) {
     const t = ++this.runtimeVersion;
     this.runtimeCtx = e;
-    const o = this.createSafeRuntimeContext(e, t);
-    for (const n of this.plugins)
-      n.attachRuntime?.(o);
+    const s = this.createSafeRuntimeContext(e, t);
+    for (const o of this.plugins)
+      o.attachRuntime?.(s);
   }
   /** 按安装的逆序 detach，保证后安装的插件先释放运行时资源 */
   detachRuntime() {
@@ -250,16 +252,16 @@ class xt {
    * 如果在 await 期间 detachRuntime 已执行，代理会将 graph 操作变为 no-op。
    */
   createSafeRuntimeContext(e, t) {
-    const o = this, n = new Proxy(e.graph, {
+    const s = this, o = new Proxy(e.graph, {
       get(i, r, l) {
         const a = Reflect.get(i, r, l);
-        return r === "use" && typeof a == "function" ? function(...d) {
-          if (o.runtimeVersion === t)
-            return a.apply(i, d);
+        return r === "use" && typeof a == "function" ? function(...c) {
+          if (s.runtimeVersion === t)
+            return a.apply(i, c);
         } : a;
       }
     });
-    return { ...e, graph: n };
+    return { ...e, graph: o };
   }
   dispose() {
     for (const e of [...this.plugins].reverse())
@@ -269,35 +271,35 @@ class xt {
   transformCommand(e) {
     if (!this.editorContext) return { envelope: e };
     let t = e;
-    for (const o of this.plugins) {
-      if (!o.transformCommand) continue;
-      const n = this.createPreview(t), i = o.transformCommand(t, n, this.editorContext);
+    for (const s of this.plugins) {
+      if (!s.transformCommand) continue;
+      const o = this.createPreview(t), i = s.transformCommand(t, o, this.editorContext);
       if (i === null)
         return {
           rejected: !0,
           error: {
             code: "plugin_rejected",
             reason: "",
-            source: o.name
+            source: s.name
           }
         };
-      if (wt(i))
+      if (Nt(i))
         return {
           rejected: !0,
           error: {
             code: i.code ?? "plugin_rejected",
             reason: i.reason,
-            source: o.name
+            source: s.name
           }
         };
       t = i;
     }
     return { envelope: t };
   }
-  afterCommand(e, t, o) {
+  afterCommand(e, t, s) {
     if (this.editorContext)
-      for (const n of this.plugins)
-        n.afterCommand?.(e, t, o, this.editorContext);
+      for (const o of this.plugins)
+        o.afterCommand?.(e, t, s, this.editorContext);
   }
   dispatchUiEvent(e) {
     if (this.runtimeCtx)
@@ -319,9 +321,9 @@ class xt {
   collectContextMenuItems(e) {
     if (!this.runtimeCtx) return [];
     const t = [];
-    for (const o of this.plugins) {
-      const n = o.onBlankContextMenu?.(e, this.runtimeCtx);
-      n && t.push(...n);
+    for (const s of this.plugins) {
+      const o = s.onBlankContextMenu?.(e, this.runtimeCtx);
+      o && t.push(...o);
     }
     return t;
   }
@@ -330,20 +332,20 @@ class xt {
     if (!this.editorContext) return [];
     const e = /* @__PURE__ */ new Map();
     for (const t of this.plugins) {
-      const o = t.provideToolbarItems?.(this.editorContext);
-      if (o)
-        for (const n of o)
-          e.set(n.id, n);
+      const s = t.provideToolbarItems?.(this.editorContext);
+      if (s)
+        for (const o of s)
+          e.set(o.id, o);
     }
-    return [...e.values()].sort((t, o) => (t.order ?? 0) - (o.order ?? 0));
+    return [...e.values()].sort((t, s) => (t.order ?? 0) - (s.order ?? 0));
   }
   /** 合并所有插件对某节点的装饰（className / borderColor / badge），后注册覆盖先注册 */
   collectNodeDecorations(e) {
     if (!this.editorContext) return;
     let t;
-    for (const o of this.plugins) {
-      const n = o.decorateNode?.(e, this.editorContext);
-      n && (t = t ? { ...t, ...n } : n);
+    for (const s of this.plugins) {
+      const o = s.decorateNode?.(e, this.editorContext);
+      o && (t = t ? { ...t, ...o } : o);
     }
     return t;
   }
@@ -351,9 +353,9 @@ class xt {
   collectEdgeDecorations(e) {
     if (!this.editorContext) return;
     let t;
-    for (const o of this.plugins) {
-      const n = o.decorateEdge?.(e, this.editorContext);
-      n && (t = t ? { ...t, ...n } : n);
+    for (const s of this.plugins) {
+      const o = s.decorateEdge?.(e, this.editorContext);
+      o && (t = t ? { ...t, ...o } : o);
     }
     return t;
   }
@@ -361,8 +363,8 @@ class xt {
     if (!this.runtimeCtx) return {};
     const e = {};
     for (const t of this.plugins) {
-      const o = t.extendApi?.(this.runtimeCtx.api, this.runtimeCtx);
-      o && Object.assign(e, o);
+      const s = t.extendApi?.(this.runtimeCtx.api, this.runtimeCtx);
+      s && Object.assign(e, s);
     }
     return e;
   }
@@ -370,144 +372,156 @@ class xt {
   createPreview(e) {
     const t = this.editorContext;
     return {
-      previewFlowModel(o) {
-        const n = o ?? e.commands;
+      previewFlowModel(s) {
+        const o = s ?? e.commands;
         let i = t.flowModel.value;
-        for (const r of n)
-          i = Te(i, r);
+        for (const r of o)
+          i = Re(i, r);
         return i;
       }
     };
   }
 }
-function bo(s) {
-  const { schema: e, plugins: t = [], historyOptions: o } = s, n = { version: "1.0", ...s.initialFlowModel }, i = bt(n, o), r = L(s.mode ?? "edit"), l = L(!1), a = L(null), f = L([]), d = {}, b = new xt();
-  function m(w, x, A, U = "user:toolbar") {
-    const O = {
+let Dt = 0;
+function Z() {
+  const n = Date.now().toString(36), e = Math.random().toString(36).substring(2, 8);
+  return `${n}-${e}-${++Dt}`;
+}
+const Oe = () => Z();
+function an(n) {
+  const { schema: e, plugins: t = [], historyOptions: s } = n, o = n.idGenerator ?? Oe, i = { version: "1.0", ...n.initialFlowModel }, r = _t(i, s), l = O(n.mode ?? "edit"), a = O(!1), p = O(null), c = O([]), g = {}, u = new Mt();
+  function y(D, L, H, K = "user:toolbar") {
+    const $ = {
       id: `history-${Date.now()}`,
-      source: U,
-      label: w,
+      source: K,
+      label: D,
       timestamp: Date.now(),
       commands: []
     };
-    b.afterCommand(O, x, A), f.value = b.collectToolbarItems(), s.onCommandResult?.({
+    u.afterCommand($, L, H), c.value = u.collectToolbarItems(), n.onCommandResult?.({
       status: "applied",
-      envelope: O,
-      flowModel: A
-    }), s.onFlowModelChange?.({
-      flowModel: A,
-      prevFlowModel: x,
-      envelope: O,
-      source: U
+      envelope: $,
+      flowModel: H
+    }), n.onFlowModelChange?.({
+      flowModel: H,
+      prevFlowModel: L,
+      envelope: $,
+      source: K
     });
   }
-  const g = {
-    execute: i.execute,
+  const v = {
+    execute: r.execute,
     undo() {
-      const w = i.currentFlowModel.value, x = i.undo();
-      return x && m("撤销", w, x), x;
+      const D = r.currentFlowModel.value, L = r.undo();
+      return L && y("撤销", D, L), L;
     },
     redo() {
-      const w = i.currentFlowModel.value, x = i.redo();
-      return x && m("重做", w, x), x;
+      const D = r.currentFlowModel.value, L = r.redo();
+      return L && y("重做", D, L), L;
     },
     get canUndo() {
-      return i.canUndo;
+      return r.canUndo;
     },
     get canRedo() {
-      return i.canRedo;
+      return r.canRedo;
     },
     get undoStack() {
-      return i.undoStack;
+      return r.undoStack;
     },
     get redoStack() {
-      return i.redoStack;
+      return r.redoStack;
     },
-    clear: i.clear,
-    createSnapshot: i.createSnapshot,
-    replaceFlowModel(w) {
-      const x = i.currentFlowModel.value;
-      i.replaceFlowModel(w), m("替换 FlowModel", x, w, "system:replace");
-    }
-  }, S = {
-    flowModel: H(() => i.currentFlowModel.value),
-    history: g,
+    clear: r.clear,
+    createSnapshot: r.createSnapshot,
+    replaceFlowModel(D) {
+      const L = r.currentFlowModel.value;
+      r.replaceFlowModel(D), y("替换 FlowModel", L, D, "system:replace");
+    }
+  }, C = {
+    flowModel: j(() => r.currentFlowModel.value),
+    history: v,
     schema: e,
-    mode: r,
-    executeCommand: k,
-    replaceFlowModel(w) {
-      g.replaceFlowModel(w);
+    mode: l,
+    idGenerator: o,
+    executeCommand: M,
+    replaceFlowModel(D) {
+      v.replaceFlowModel(D);
     },
-    setMode(w) {
-      r.value = w;
+    setMode(D) {
+      l.value = D;
     },
-    selectionMode: l,
-    setSelectionMode(w) {
-      l.value = w;
+    selectionMode: a,
+    setSelectionMode(D) {
+      a.value = D;
     },
-    api: a,
-    toolbarItems: f,
-    extendedApi: d,
-    _pluginManager: b
+    api: p,
+    toolbarItems: c,
+    extendedApi: g,
+    _pluginManager: u,
+    _emitUiEvent: (D) => {
+      u.dispatchUiEvent(D);
+    }
   };
-  b.install(t, {
-    flowModel: S.flowModel,
-    history: g,
+  u.install(t, {
+    flowModel: C.flowModel,
+    history: v,
     schema: e,
-    mode: r,
-    executeCommand: k
-  }), f.value = b.collectToolbarItems(), Ue(() => {
-    b.dispose();
+    mode: l,
+    idGenerator: o,
+    executeCommand: M
+  }), c.value = u.collectToolbarItems(), Ye(() => {
+    u.dispose();
   });
-  function k(w) {
-    const x = b.transformCommand(w);
-    if ("rejected" in x) {
-      const O = {
+  function M(D) {
+    const L = u.transformCommand(D);
+    if ("rejected" in L) {
+      const $ = {
         status: "rejected",
-        envelope: w,
-        error: x.error
+        envelope: D,
+        error: L.error
       };
-      return s.onCommandResult?.(O), O;
+      return n.onCommandResult?.($), $;
     }
-    const A = x.envelope, U = i.currentFlowModel.value;
+    const H = L.envelope, K = r.currentFlowModel.value;
     try {
-      const O = i.execute(A), K = {
+      const $ = r.execute(H), W = {
         status: "applied",
-        envelope: A,
-        flowModel: O
+        envelope: H,
+        flowModel: $
       };
-      return b.afterCommand(A, U, O), f.value = b.collectToolbarItems(), s.onCommandResult?.(K), s.onFlowModelChange?.({
-        flowModel: O,
-        prevFlowModel: U,
-        envelope: A,
-        source: A.source
-      }), K;
-    } catch (O) {
-      if (O instanceof Y) {
-        const K = {
+      return u.afterCommand(H, K, $), c.value = u.collectToolbarItems(), n.onCommandResult?.(W), n.onFlowModelChange?.({
+        flowModel: $,
+        prevFlowModel: K,
+        envelope: H,
+        source: H.source
+      }), W;
+    } catch ($) {
+      if ($ instanceof ae) {
+        const W = {
           status: "invalid",
-          envelope: A,
+          envelope: H,
           error: {
             code: "constraint_violated",
-            reason: O.message,
+            reason: $.message,
             source: "engine"
           }
         };
-        return s.onCommandResult?.(K), K;
+        return n.onCommandResult?.(W), W;
       }
-      throw O;
+      throw $;
     }
   }
-  return S;
+  return C;
 }
-const kt = ["top", "right", "bottom", "left"];
-function Qe() {
-  return kt.map((s) => ({ id: s, group: s }));
+const At = ["top", "right", "bottom", "left"];
+function et() {
+  return At.map((n) => ({ id: n, group: n }));
 }
-function Be(s, e) {
-  return e?.(s) ?? s.ports ?? Qe();
+function Be(n, e) {
+  return e?.(n) ?? n.ports ?? et();
 }
-class Ct {
+const De = -1, Pt = "flow-canvas-node-ring-target", He = "flow-canvas-node-ring-target--decorated", Ge = "flow-canvas-node-ring-target--pulse", Tt = "linear-gradient(135deg, #cadcfa 0%, #cee0ff 100%)";
+class Rt {
   graph;
   schema;
   shapeRegistry;
@@ -532,15 +546,15 @@ class Ct {
   /** x6EdgeConfig 中 attrs.line 的基线值，清理时恢复而非删除 */
   edgeDefaultAttrs = /* @__PURE__ */ new Map();
   lastModel = null;
-  constructor(e, t, o, n, i, r) {
-    this.graph = e, this.schema = t, this.shapeRegistry = o, this.resolveNodeDecoration = n, this.resolveEdgeDecoration = i, this.resolveCanvasContext = r;
+  constructor(e, t, s, o, i, r) {
+    this.graph = e, this.schema = t, this.shapeRegistry = s, this.resolveNodeDecoration = o, this.resolveEdgeDecoration = i, this.resolveCanvasContext = r;
   }
   syncFlowModel(e) {
     if (!this.syncing) {
       this.syncing = !0, this.lastModel = e;
       try {
-        const t = this.resolveNodes(e), o = this.resolveEdges(e);
-        this.syncNodes(t), this.syncEdges(o, e);
+        const t = this.resolveNodes(e), s = this.resolveEdges(e);
+        this.syncNodes(t), this.syncEdges(s, e);
       } finally {
         this.syncing = !1;
       }
@@ -554,35 +568,48 @@ class Ct {
    * 仅在节点首次创建时调用一次。
    */
   saveNodeDefaultAttrs(e, t) {
-    const n = t.x6CellConfig?.attrs?.body;
-    if (!n) return;
+    const o = t.x6CellConfig?.attrs?.body;
+    if (!o) return;
     const i = {};
     let r = !1;
-    n.stroke !== void 0 && (i.stroke = n.stroke, r = !0), n.strokeWidth !== void 0 && (i.strokeWidth = n.strokeWidth, r = !0), r && this.nodeDefaultAttrs.set(e, i);
+    o.stroke !== void 0 && (i.stroke = o.stroke, r = !0), o.strokeWidth !== void 0 && (i.strokeWidth = o.strokeWidth, r = !0), r && this.nodeDefaultAttrs.set(e, i);
   }
   /**
    * 从 x6EdgeConfig.attrs.line 中提取基线描边，用于管理层清理时恢复。
    */
   saveEdgeDefaultAttrs(e, t) {
-    const n = t?.x6EdgeConfig?.attrs?.line;
-    if (!n) return;
+    const o = t?.x6EdgeConfig?.attrs?.line;
+    if (!o) return;
     const i = {};
     let r = !1;
-    n.stroke !== void 0 && (i.stroke = n.stroke, r = !0), n.strokeWidth !== void 0 && (i.strokeWidth = n.strokeWidth, r = !0), n.strokeDasharray !== void 0 && (i.strokeDasharray = n.strokeDasharray, r = !0), r && this.edgeDefaultAttrs.set(e, i);
+    o.stroke !== void 0 && (i.stroke = o.stroke, r = !0), o.strokeWidth !== void 0 && (i.strokeWidth = o.strokeWidth, r = !0), o.strokeDasharray !== void 0 && (i.strokeDasharray = o.strokeDasharray, r = !0), r && this.edgeDefaultAttrs.set(e, i);
   }
-  /** 恢复节点 attr 到基线值；无基线时移除。 */
-  restoreNodeAttr(e, t, o) {
-    const n = this.nodeDefaultAttrs.get(e.id)?.[o];
-    n !== void 0 ? e.setAttrByPath(t, n) : e.removeAttrByPath(t);
+  /**
+   * 恢复节点 attr 到基线值；无基线时设为安全默认值。
+   * 不使用 removeAttrByPath，因为对 Vue Shape 节点执行 remove 会触发 X6
+   * 完整的 cell view 重渲染，可能导致 foreignObject 尺寸被瞬间重置，
+   * 使得内部 Vue 组件 (width/height: 100%) 折叠后无法恢复。
+   */
+  restoreNodeAttr(e, t, s) {
+    const o = this.nodeDefaultAttrs.get(e.id)?.[s];
+    if (o !== void 0)
+      e.setAttrByPath(t, o);
+    else {
+      const i = s === "stroke" ? "none" : 0;
+      e.setAttrByPath(t, i);
+    }
   }
   /** 恢复边 attr 到基线值；无基线时移除。 */
-  restoreEdgeAttr(e, t, o) {
-    const n = this.edgeDefaultAttrs.get(e.id)?.[o];
-    n !== void 0 ? e.setAttrByPath(t, n) : e.removeAttrByPath(t);
+  restoreEdgeAttr(e, t, s) {
+    const o = this.edgeDefaultAttrs.get(e.id)?.[s];
+    o !== void 0 ? e.setAttrByPath(t, o) : e.removeAttrByPath(t);
+  }
+  getNodeRingTarget(e) {
+    return e ? e.querySelector(".flow-canvas-highlight-target") ?? e.querySelector(".flow-canvas-node-surface > :first-child") : null;
   }
   /** 让正式边接管交互式预览边时，恢复 schema 定义的端点 marker。 */
-  syncEdgeMarker(e, t, o) {
-    const i = t?.x6EdgeConfig?.attrs?.line?.[o], r = `line/${o}`;
+  syncEdgeMarker(e, t, s) {
+    const i = t?.x6EdgeConfig?.attrs?.line?.[s], r = `line/${s}`;
     e.removeAttrByPath(r), i !== void 0 && e.setAttrByPath(r, i);
   }
   dispose() {
@@ -590,59 +617,64 @@ class Ct {
   }
   resolveNodes(e) {
     const t = /* @__PURE__ */ new Map();
-    for (const [o, n] of Object.entries(e.nodes)) {
-      const i = this.schema.nodeTypes[n.type];
+    for (const [s, o] of Object.entries(e.nodes)) {
+      const i = this.schema.nodeTypes[o.type];
       if (!i)
-        throw new it(
-          `Unknown node type "${n.type}" for node "${o}". Registered types: [${Object.keys(this.schema.nodeTypes).join(", ")}]. Register the type in CanvasSchema.nodeTypes before using it in a FlowModel.`
+        throw new pt(
+          `Unknown node type "${o.type}" for node "${s}". Registered types: [${Object.keys(this.schema.nodeTypes).join(", ")}]. Register the type in CanvasSchema.nodeTypes before using it in a FlowModel.`
         );
-      const r = this.shapeRegistry.registerNodeType(n.type, i.component), l = i.getSize(n), a = Be(n, i.getPorts);
-      t.set(o, { model: n, definition: i, shapeName: r, size: l, ports: a });
+      const r = this.shapeRegistry.registerNodeType(o.type, i.component), l = i.getSize(o), a = Be(o, i.getPorts);
+      t.set(s, { model: o, definition: i, shapeName: r, size: l, ports: a });
     }
     return t;
   }
   resolveEdges(e) {
     const t = /* @__PURE__ */ new Map();
-    for (const [o, n] of Object.entries(e.edges)) {
-      const i = n.type ?? this.schema.defaultEdgeType ?? "default", r = this.schema.edgeTypes?.[i];
-      t.set(o, { model: n, definition: r });
+    for (const [s, o] of Object.entries(e.edges)) {
+      const i = o.type ?? this.schema.defaultEdgeType ?? "default", r = this.schema.edgeTypes?.[i];
+      t.set(s, { model: o, definition: r });
     }
     return t;
   }
   syncNodes(e) {
     const t = new Set(e.keys());
-    for (const o of this.knownNodeIds)
-      if (!t.has(o)) {
-        const n = this.graph.getCellById(o);
-        n && this.graph.removeCell(n), this.knownNodeIds.delete(o), this.defaultHighlightedNodeIds.delete(o), this.prevNodeDecorationClasses.delete(o), this.prevNodeDecorationColors.delete(o), this.nodeDefaultAttrs.delete(o);
+    for (const s of this.knownNodeIds)
+      if (!t.has(s)) {
+        const o = this.graph.getCellById(s);
+        o && this.graph.removeCell(o), this.knownNodeIds.delete(s), this.defaultHighlightedNodeIds.delete(s), this.prevNodeDecorationClasses.delete(s), this.prevNodeDecorationColors.delete(s), this.nodeDefaultAttrs.delete(s);
       }
-    for (const [o, n] of e) {
-      const i = this.graph.getCellById(o);
-      i ? this.updateExistingNode(i, n) : this.addNewNode(o, n);
+    for (const [s, o] of e) {
+      const i = this.graph.getCellById(s);
+      i ? this.updateExistingNode(i, o) : this.addNewNode(s, o);
     }
   }
   updateExistingNode(e, t) {
-    const { model: o, size: n, ports: i, definition: r } = t, l = e.getPosition();
-    (l.x !== o.position.x || l.y !== o.position.y) && e.setPosition(o.position.x, o.position.y);
-    const a = e.getSize();
-    (a.width !== n.width || a.height !== n.height) && e.setSize(n.width, n.height, { silent: !0 }), this.syncNodePorts(e, i), e.setData({ ...o }), this.applyNodeBehavior(e, o, r), this.applyNodeHighlightAndDecoration(e, o);
+    const { model: s, size: o, ports: i, definition: r } = t;
+    if (e.getData()?.type !== s.type) {
+      this.graph.removeCell(e), this.addNewNode(e.id, t);
+      return;
+    }
+    const a = e.getPosition();
+    (a.x !== s.position.x || a.y !== s.position.y) && e.setPosition(s.position.x, s.position.y);
+    const p = e.getSize();
+    (p.width !== o.width || p.height !== o.height) && e.setSize(o.width, o.height, { silent: !0 }), this.syncNodePorts(e, i), e.setData({ ...s }), this.applyNodeBehavior(e, s, r), this.applyNodeHighlightAndDecoration(e, s);
   }
   syncNodePorts(e, t) {
-    const o = e.getPorts(), n = new Set(t.map((r) => r.id)), i = new Set(o.map((r) => r.id));
-    for (const r of o)
-      r.id && !n.has(r.id) && e.removePort(r.id);
+    const s = e.getPorts(), o = new Set(t.map((r) => r.id)), i = new Set(s.map((r) => r.id));
+    for (const r of s)
+      r.id && !o.has(r.id) && e.removePort(r.id);
     for (const r of t)
       i.has(r.id) || e.addPort({ id: r.id, group: r.group, ...r.x6PortConfig });
   }
   addNewNode(e, t) {
-    const { model: o, shapeName: n, size: i, ports: r, definition: l } = t, a = {
-      id: o.id,
-      shape: n,
-      x: o.position.x,
-      y: o.position.y,
+    const { model: s, shapeName: o, size: i, ports: r, definition: l } = t, a = {
+      id: s.id,
+      shape: o,
+      x: s.position.x,
+      y: s.position.y,
       width: i.width,
       height: i.height,
-      data: { ...o },
+      data: { ...s },
       ports: {
         groups: {
           top: {
@@ -670,51 +702,54 @@ class Ct {
             }
           }
         },
-        items: r.map((d) => ({ id: d.id, group: d.group, ...d.x6PortConfig }))
+        items: r.map((c) => ({ id: c.id, group: c.group, ...c.x6PortConfig }))
       },
       ...l.x6CellConfig
     };
     this.graph.addNode(a), this.knownNodeIds.add(e), this.saveNodeDefaultAttrs(e, l);
-    const f = this.graph.getCellById(e);
-    f && (this.applyNodeBehavior(f, o, l), this.applyNodeHighlightAndDecoration(f, o));
+    const p = this.graph.getCellById(e);
+    p && (this.applyNodeBehavior(p, s, l), this.applyNodeHighlightAndDecoration(p, s));
   }
   /**
    * 将 schema 定义的 getBehavior 映射到 X6 节点属性。
    * NodeBehaviorConfig 的每个字段都映射到 X6 Cell 对应能力：
    *  - draggable → 是否可拖拽移动
    *  - selectable → 是否可被选中（注意：X6 Selection 插件也有全局控制）
-   *  - connectable → ports 的 magnet 属性，控制是否可从该节点发起连线
+   *  - connectable / targetable → ports 的 magnet 属性
+   *      true       → 可发起，也可作为目标
+   *      'passive'  → 不可发起，但仍可作为目标（如结束节点）
+   *      false      → 不可发起，也不可作为目标
    *  - showPorts → ports 的可见性
    *  - deletable → 存入 cell data，由删除操作（插件/快捷键）自行读取判断
    */
-  applyNodeBehavior(e, t, o) {
-    if (!o.getBehavior) return;
-    const n = this.resolveCanvasContext?.();
-    if (!n) return;
-    const i = o.getBehavior(t, n);
+  applyNodeBehavior(e, t, s) {
+    if (!s.getBehavior) return;
+    const o = this.resolveCanvasContext?.();
+    if (!o) return;
+    const i = s.getBehavior(t, o);
     if (i.draggable !== void 0 && e.setProp("draggable", i.draggable, { silent: !0 }), i.connectable !== void 0) {
-      const l = i.connectable;
+      const l = i.connectable ? !0 : i.targetable === !1 ? !1 : "passive";
       for (const a of e.getPorts())
         e.setPortProp(a.id, "attrs/circle/magnet", l, { silent: !0 });
     }
     if (i.showPorts !== void 0) {
       const l = i.showPorts;
       for (const a of e.getPorts())
-        e.setPortProp(a.id, "attrs/circle/style/visibility", l ? "visible" : "hidden", { silent: !0 });
+        e.setPortProp(a.id, "attrs/circle/visibility", l ? "visible" : "hidden", { silent: !0 });
     }
     const r = e.getData() ?? {};
     i.deletable !== void 0 && r._deletable !== i.deletable && e.setData({ ...r, _deletable: i.deletable }, { silent: !0 }), i.selectable !== void 0 && r._selectable !== i.selectable && e.setData({ ...e.getData(), _selectable: i.selectable }, { silent: !0 });
   }
   syncEdges(e, t) {
-    const o = new Set(e.keys());
-    for (const n of this.knownEdgeIds)
-      if (!o.has(n)) {
-        const i = this.graph.getCellById(n);
-        i && this.graph.removeCell(i), this.knownEdgeIds.delete(n), this.defaultHighlightedEdgeIds.delete(n), this.prevEdgeDecorationClasses.delete(n), this.prevEdgeDecorationColors.delete(n), this.prevEdgeStyleIds.delete(n), this.edgeDefaultAttrs.delete(n);
+    const s = new Set(e.keys());
+    for (const o of this.knownEdgeIds)
+      if (!s.has(o)) {
+        const i = this.graph.getCellById(o);
+        i && this.graph.removeCell(i), this.knownEdgeIds.delete(o), this.defaultHighlightedEdgeIds.delete(o), this.prevEdgeDecorationClasses.delete(o), this.prevEdgeDecorationColors.delete(o), this.prevEdgeStyleIds.delete(o), this.edgeDefaultAttrs.delete(o);
       }
-    for (const [n, i] of e) {
-      const r = this.graph.getCellById(n), { model: l, definition: a } = i;
-      r ? (this.updateExistingEdge(r, l, a, t), this.knownEdgeIds.has(n) || (this.knownEdgeIds.add(n), this.saveEdgeDefaultAttrs(n, a))) : this.addNewEdge(n, l, a);
+    for (const [o, i] of e) {
+      const r = this.graph.getCellById(o), { model: l, definition: a } = i;
+      r ? (this.updateExistingEdge(r, l, a, t), this.knownEdgeIds.has(o) || (this.knownEdgeIds.add(o), this.saveEdgeDefaultAttrs(o, a))) : this.addNewEdge(o, l, a);
     }
   }
   /**
@@ -722,45 +757,45 @@ class Ct {
    * X6 Edge.getSource() 返回 { cell, port } 格式，与 FlowEdgeModel 的 { nodeId, portId } 不同，
    * 需要用 (currentSource as any).cell 来比较。
    */
-  updateExistingEdge(e, t, o, n) {
+  updateExistingEdge(e, t, s, o) {
     const i = e.getSource(), r = e.getTarget();
-    if ((i.cell !== t.source.nodeId || i.port !== t.source.portId) && e.setSource({ cell: t.source.nodeId, port: t.source.portId }), (r.cell !== t.target.nodeId || r.port !== t.target.portId) && e.setTarget({ cell: t.target.nodeId, port: t.target.portId }), o?.router) {
-      const l = typeof o.router == "string" ? { name: o.router } : o.router;
+    if ((i.cell !== t.source.nodeId || i.port !== t.source.portId) && e.setSource({ cell: t.source.nodeId, port: t.source.portId }), (r.cell !== t.target.nodeId || r.port !== t.target.portId) && e.setTarget({ cell: t.target.nodeId, port: t.target.portId }), s?.router) {
+      const l = typeof s.router == "string" ? { name: s.router } : s.router;
       e.setRouter(l);
     }
-    if (o?.connector) {
-      const l = typeof o.connector == "string" ? { name: o.connector } : o.connector;
+    if (s?.connector) {
+      const l = typeof s.connector == "string" ? { name: s.connector } : s.connector;
       e.setConnector(l);
     }
-    this.syncEdgeMarker(e, o, "sourceMarker"), this.syncEdgeMarker(e, o, "targetMarker"), this.syncEdgeLabels(e, t), e.setData({ ...t }, { silent: !0 }), this.applyEdgeStyleAndDecoration(e, t, o);
+    this.syncEdgeMarker(e, s, "sourceMarker"), this.syncEdgeMarker(e, s, "targetMarker"), this.syncEdgeLabels(e, t), e.getZIndex() !== De && e.setZIndex(De), e.setData({ ...t }, { silent: !0 }), this.applyEdgeStyleAndDecoration(e, t, s);
   }
   syncEdgeLabels(e, t) {
     if (!t.labels?.length) {
       e.getLabels().length > 0 && e.setLabels([]);
       return;
     }
-    const o = t.labels.map((n) => ({
+    const s = t.labels.map((o) => ({
       attrs: {
-        label: { text: n.text ?? "" }
+        label: { text: o.text ?? "" }
       },
-      position: n.position != null ? { distance: n.position } : void 0
+      position: o.position != null ? { distance: o.position } : void 0
     }));
-    e.setLabels(o);
+    e.setLabels(s);
   }
-  addNewEdge(e, t, o) {
-    const n = {
+  addNewEdge(e, t, s) {
+    const o = {
       id: t.id,
       source: { cell: t.source.nodeId, port: t.source.portId },
       target: { cell: t.target.nodeId, port: t.target.portId },
       data: { ...t },
-      zIndex: -1
+      zIndex: De
     };
-    o?.router && (n.router = typeof o.router == "string" ? { name: o.router } : o.router), o?.connector && (n.connector = typeof o.connector == "string" ? { name: o.connector } : o.connector), o?.x6EdgeConfig && Object.assign(n, o.x6EdgeConfig), t.labels?.length && (n.labels = t.labels.map((r) => ({
+    s?.router && (o.router = typeof s.router == "string" ? { name: s.router } : s.router), s?.connector && (o.connector = typeof s.connector == "string" ? { name: s.connector } : s.connector), s?.x6EdgeConfig && Object.assign(o, s.x6EdgeConfig), t.labels?.length && (o.labels = t.labels.map((r) => ({
       attrs: { label: { text: r.text ?? "" } },
       position: r.position != null ? { distance: r.position } : void 0
-    }))), this.graph.addEdge(n), this.knownEdgeIds.add(e), this.saveEdgeDefaultAttrs(e, o);
+    }))), this.graph.addEdge(o), this.knownEdgeIds.add(e), this.saveEdgeDefaultAttrs(e, s);
     const i = this.graph.getCellById(e);
-    i && this.applyEdgeStyleAndDecoration(i, t, o);
+    i && this.applyEdgeStyleAndDecoration(i, t, s);
   }
   /**
    * 外部通知选区、高亮或 hover 变化时，重算所有边的视觉样式。
@@ -770,10 +805,10 @@ class Ct {
   refreshEdgeStyles() {
     if (this.lastModel)
       for (const [e, t] of Object.entries(this.lastModel.edges)) {
-        const o = this.graph.getCellById(e);
-        if (!o?.isEdge()) continue;
-        const n = t.type ?? this.schema.defaultEdgeType ?? "default", i = this.schema.edgeTypes?.[n];
-        this.applyEdgeStyleAndDecoration(o, t, i);
+        const s = this.graph.getCellById(e);
+        if (!s?.isEdge()) continue;
+        const o = t.type ?? this.schema.defaultEdgeType ?? "default", i = this.schema.edgeTypes?.[o];
+        this.applyEdgeStyleAndDecoration(s, t, i);
       }
   }
   /**
@@ -782,26 +817,30 @@ class Ct {
   refreshNodeHighlights() {
     if (this.lastModel)
       for (const [e, t] of Object.entries(this.lastModel.nodes)) {
-        const o = this.graph.getCellById(e);
-        o?.isNode() && this.applyNodeHighlightAndDecoration(o, t);
+        const s = this.graph.getCellById(e);
+        s?.isNode() && this.applyNodeHighlightAndDecoration(s, t);
       }
   }
   /**
    * 单节点的高亮 + 装饰统一管道。
    * 所有路径（FlowModel 同步更新/新增节点/显式刷新高亮）必须走此方法。
    *
-   * body/stroke 的分层优先级（低 → 高）：
+   * 可见高亮的分层优先级（低 → 高）：
    *   1. 默认高亮 (#3a84ff) — 节点在 highlightedNodeIds 中时兜底
    *   2. 插件装饰 (decorateNode().borderColor) — 始终覆盖高亮
    *
    * 最终值 = decorationColor ?? highlightColor ?? (清除)。
-   * 只在"曾经设过 → 现在无值"时执行 removeAttrByPath，避免误删 X6 原始样式。
+   * 对 Vue Shape 节点，真正可见的 ring 通过节点高亮目标元素的独立装饰态 / 脉冲态 / 选中态 class 呈现；
+   * body/stroke 仅作为普通 SVG shape 的兜底同步。
    */
   applyNodeHighlightAndDecoration(e, t) {
-    const o = this.highlightedNodeIds.has(e.id), n = this.resolveNodeDecoration?.(t), i = this.prevNodeDecorationClasses.get(e.id);
-    i && (this.graph.findViewByCell(e)?.container?.classList.remove(i), this.prevNodeDecorationClasses.delete(e.id)), n?.className && (this.graph.findViewByCell(e)?.container?.classList.add(n.className), this.prevNodeDecorationClasses.set(e.id, n.className));
-    const r = n?.borderColor, a = r ?? (o ? "#3a84ff" : void 0), f = this.prevNodeDecorationColors.has(e.id) || this.defaultHighlightedNodeIds.has(e.id);
-    a ? (e.setAttrByPath("body/stroke", a), e.setAttrByPath("body/strokeWidth", 2)) : f && (this.restoreNodeAttr(e, "body/stroke", "stroke"), this.restoreNodeAttr(e, "body/strokeWidth", "strokeWidth")), r ? this.prevNodeDecorationColors.add(e.id) : this.prevNodeDecorationColors.delete(e.id), o && !r ? this.defaultHighlightedNodeIds.add(e.id) : this.defaultHighlightedNodeIds.delete(e.id);
+    const s = this.highlightedNodeIds.has(e.id), o = this.resolveNodeDecoration?.(t), i = this.graph.findViewByCell(e)?.container, r = this.getNodeRingTarget(i), l = this.prevNodeDecorationClasses.get(e.id);
+    l && (i?.classList.remove(l), this.prevNodeDecorationClasses.delete(e.id)), o?.className && (i?.classList.add(o.className), this.prevNodeDecorationClasses.set(e.id, o.className));
+    const a = o?.borderColor, c = a ?? (s ? "#3a84ff" : void 0), g = this.prevNodeDecorationColors.has(e.id) || this.defaultHighlightedNodeIds.has(e.id);
+    c ? (e.setAttrByPath("body/stroke", c), e.setAttrByPath("body/strokeWidth", 2)) : g && (this.restoreNodeAttr(e, "body/stroke", "stroke"), this.restoreNodeAttr(e, "body/strokeWidth", "strokeWidth")), r && (r.classList.add(Pt), a ? (r.classList.add(He), r.style.setProperty("--flow-canvas-node-decoration-ring-background", a), r.style.setProperty("--flow-canvas-node-decoration-ring-opacity", "0.95")) : (r.classList.remove(He), r.style.removeProperty("--flow-canvas-node-decoration-ring-background"), r.style.removeProperty("--flow-canvas-node-decoration-ring-opacity")), s ? (r.classList.add(Ge), r.style.setProperty(
+      "--flow-canvas-node-pulse-ring-background",
+      a ?? Tt
+    ), r.style.setProperty("--flow-canvas-node-pulse-ring-opacity", "0.95")) : (r.classList.remove(Ge), r.style.removeProperty("--flow-canvas-node-pulse-ring-background"), r.style.removeProperty("--flow-canvas-node-pulse-ring-opacity"))), a ? this.prevNodeDecorationColors.add(e.id) : this.prevNodeDecorationColors.delete(e.id), s && !a ? this.defaultHighlightedNodeIds.add(e.id) : this.defaultHighlightedNodeIds.delete(e.id);
   }
   setHoveredEdge(e) {
     this.hoveredEdgeId = e;
@@ -823,51 +862,54 @@ class Ct {
    * strokeWidth / strokeDasharray 仅由 schema style() 控制，不受装饰影响。
    * 最终值 = decorationStroke ?? styleStroke ?? defaultHighlightStroke ?? (清除)。
    */
-  applyEdgeStyleAndDecoration(e, t, o) {
-    const n = this.highlightedEdgeIds.has(e.id), i = this.resolveEdgeDecoration?.(t), r = this.prevEdgeDecorationClasses.get(e.id);
+  applyEdgeStyleAndDecoration(e, t, s) {
+    const o = this.highlightedEdgeIds.has(e.id), i = this.resolveEdgeDecoration?.(t), r = this.prevEdgeDecorationClasses.get(e.id);
     r && (this.graph.findViewByCell(e)?.container?.classList.remove(r), this.prevEdgeDecorationClasses.delete(e.id)), i?.className && (this.graph.findViewByCell(e)?.container?.classList.add(i.className), this.prevEdgeDecorationClasses.set(e.id, i.className));
-    let l, a, f;
-    if (o?.style) {
-      const S = this.graph.isSelected?.(e) ?? !1, k = this.hoveredEdgeId === e.id, w = o.style(t, { selected: S, highlighted: n, hovered: k });
-      l = w.stroke, a = w.strokeWidth, f = w.strokeDasharray;
+    let l, a, p;
+    if (s?.style) {
+      const v = this.graph.isSelected?.(e) ?? !1, C = this.hoveredEdgeId === e.id, M = s.style(t, { selected: v, highlighted: o, hovered: C });
+      l = M.stroke, a = M.strokeWidth, p = M.strokeDasharray;
     }
-    const d = !o?.style && n ? "#3a84ff" : void 0, b = i?.strokeColor, m = b ?? l ?? d, g = !!o?.style || this.prevEdgeDecorationColors.has(e.id) || this.defaultHighlightedEdgeIds.has(e.id) || this.prevEdgeStyleIds.has(e.id);
-    m ? e.setAttrByPath("line/stroke", m) : g && this.restoreEdgeAttr(e, "line/stroke", "stroke"), o?.style ? (this.prevEdgeStyleIds.add(e.id), a ? e.setAttrByPath("line/strokeWidth", a) : this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), f ? e.setAttrByPath("line/strokeDasharray", f) : this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray")) : this.prevEdgeStyleIds.has(e.id) && (this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray"), this.prevEdgeStyleIds.delete(e.id)), b ? this.prevEdgeDecorationColors.add(e.id) : this.prevEdgeDecorationColors.delete(e.id), d ? this.defaultHighlightedEdgeIds.add(e.id) : this.defaultHighlightedEdgeIds.delete(e.id);
+    const c = !s?.style && o ? "#3a84ff" : void 0, g = i?.strokeColor, u = g ?? l ?? c, y = !!s?.style || this.prevEdgeDecorationColors.has(e.id) || this.defaultHighlightedEdgeIds.has(e.id) || this.prevEdgeStyleIds.has(e.id);
+    u ? e.setAttrByPath("line/stroke", u) : y && this.restoreEdgeAttr(e, "line/stroke", "stroke"), s?.style ? (this.prevEdgeStyleIds.add(e.id), a ? e.setAttrByPath("line/strokeWidth", a) : this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), p ? e.setAttrByPath("line/strokeDasharray", p) : this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray")) : this.prevEdgeStyleIds.has(e.id) && (this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray"), this.prevEdgeStyleIds.delete(e.id)), g ? this.prevEdgeDecorationColors.add(e.id) : this.prevEdgeDecorationColors.delete(e.id), c ? this.defaultHighlightedEdgeIds.add(e.id) : this.defaultHighlightedEdgeIds.delete(e.id);
   }
 }
-let Et = 0;
-function $() {
-  const s = Date.now().toString(36), e = Math.random().toString(36).substring(2, 8);
-  return `${s}-${e}-${++Et}`;
-}
-class It {
-  instanceId = $();
+class Lt {
+  instanceId = Z();
   registeredShapes = /* @__PURE__ */ new Map();
+  wrappedComponents = /* @__PURE__ */ new Map();
   getShapeName(e) {
     let t = this.registeredShapes.get(e);
     return t || (t = `flow-node-${this.instanceId}-${e}`, this.registeredShapes.set(e, t)), t;
   }
   registerNodeType(e, t) {
-    const o = this.getShapeName(e);
-    return st({
-      shape: o,
-      component: t,
+    const s = this.getShapeName(e);
+    let o = this.wrappedComponents.get(e);
+    return o || (o = le({
+      name: `FlowCanvasNodeShape${e.replace(/(^|[-_])(\w)/g, (i, r, l) => l.toUpperCase())}`,
+      setup() {
+        return () => Ae("div", { class: "flow-canvas-node-surface" }, [Ae(t)]);
+      }
+    }), this.wrappedComponents.set(e, o)), ct({
+      shape: s,
+      component: o,
       width: 100,
       height: 40
-    }), o;
+    }), s;
   }
   dispose() {
-    this.registeredShapes.clear();
+    this.registeredShapes.clear(), this.wrappedComponents.clear();
   }
 }
-class Mt {
+class $t {
   graph;
   onUiEvent;
   onCommand;
   flowModelRef;
+  idGenerator;
   disposers = [];
-  constructor(e, t, o, n) {
-    this.graph = e, this.onUiEvent = t, this.onCommand = o, this.flowModelRef = n, this.bindEvents();
+  constructor(e, t, s, o, i) {
+    this.graph = e, this.onUiEvent = t, this.onCommand = s, this.flowModelRef = o, this.idGenerator = i ?? Oe, this.bindEvents();
   }
   dispose() {
     for (const e of this.disposers) e();
@@ -885,13 +927,13 @@ class Mt {
         position: { x: t.clientX, y: t.clientY }
       });
     }), this.on("edge:click", ({ edge: e, e: t }) => {
-      const n = t.target?.closest?.(".x6-edge-label");
-      if (n) {
-        const r = e.getData?.()?.labels ?? [], l = n.parentElement?.querySelectorAll(".x6-edge-label"), a = l ? Array.from(l).indexOf(n) : 0, f = r[Math.max(0, a)];
+      const o = t.target?.closest?.(".x6-edge-label");
+      if (o) {
+        const r = e.getData?.()?.labels ?? [], l = o.parentElement?.querySelectorAll(".x6-edge-label"), a = l ? Array.from(l).indexOf(o) : 0, p = r[Math.max(0, a)];
         this.onUiEvent({
           type: "edge.label.click",
           edgeId: e.id,
-          labelId: f?.id ?? `label-${a}`
+          labelId: p?.id ?? `label-${a}`
         });
         return;
       }
@@ -907,18 +949,18 @@ class Mt {
     }), this.on("node:moved", ({ node: e }) => {
       const t = e.getPosition();
       this.onCommand({
-        id: $(),
+        id: Z(),
         source: "user:drag",
         label: "移动节点",
         timestamp: Date.now(),
         commands: [{ type: "node.move", nodeId: e.id, position: { x: t.x, y: t.y } }]
       });
     }), this.on("edge:connected", ({ edge: e, isNew: t }) => {
-      const o = e.getSourceCell(), n = e.getTargetCell();
-      if (!o || !n) return;
+      const s = e.getSourceCell(), o = e.getTargetCell();
+      if (!s || !o) return;
       const i = e.getSourcePortId(), r = e.getTargetPortId(), l = e.id in this.flowModelRef.value.edges;
-      t && !l ? this.onCommand({
-        id: $(),
+      t && !l ? (this.graph.removeCell(e), this.onCommand({
+        id: Z(),
         source: "user:drag",
         label: "连线",
         timestamp: Date.now(),
@@ -926,14 +968,14 @@ class Mt {
           {
             type: "edge.add",
             edge: {
-              id: e.id,
-              source: { nodeId: o.id, portId: i ?? void 0 },
-              target: { nodeId: n.id, portId: r ?? void 0 }
+              id: this.idGenerator("edge"),
+              source: { nodeId: s.id, portId: i ?? void 0 },
+              target: { nodeId: o.id, portId: r ?? void 0 }
             }
           }
         ]
-      }) : this.onCommand({
-        id: $(),
+      })) : this.onCommand({
+        id: Z(),
         source: "user:drag",
         label: "重连",
         timestamp: Date.now(),
@@ -941,28 +983,28 @@ class Mt {
           {
             type: "edge.reconnect",
             edgeId: e.id,
-            source: { nodeId: o.id, portId: i ?? void 0 },
-            target: { nodeId: n.id, portId: r ?? void 0 }
+            source: { nodeId: s.id, portId: i ?? void 0 },
+            target: { nodeId: o.id, portId: r ?? void 0 }
           }
         ]
       });
     }), this.on("edge:change:labels", ({ edge: e, current: t }) => {
-      const n = e.getData?.()?.labels ?? [];
-      if (!n.length || !t?.length) return;
+      const o = e.getData?.()?.labels ?? [];
+      if (!o.length || !t?.length) return;
       const i = [];
-      for (let r = 0; r < Math.min(n.length, t.length); r++) {
-        const l = t[r], a = n[r];
+      for (let r = 0; r < Math.min(o.length, t.length); r++) {
+        const l = t[r], a = o[r];
         if (!a?.id) continue;
-        const f = typeof l.position == "object" ? l.position?.distance : l.position;
-        f != null && i.push({
+        const p = typeof l.position == "object" ? l.position?.distance : l.position;
+        p != null && i.push({
           type: "edge.label.update",
           edgeId: e.id,
           labelId: a.id,
-          patch: { position: f }
+          patch: { position: p }
         });
       }
       i.length && this.onCommand({
-        id: $(),
+        id: Z(),
         source: "user:drag",
         label: "拖动标签",
         timestamp: Date.now(),
@@ -974,120 +1016,155 @@ class Mt {
     this.graph.on(e, t), this.disposers.push(() => this.graph.off(e, t));
   }
 }
-function Nt(s) {
+function Ot(n) {
   function e(t) {
-    const o = s.getCellById(t);
-    if (!o || !o.isNode()) return null;
-    const n = o, i = n.getPosition(), r = n.getSize(), l = { x: i.x, y: i.y, width: r.width, height: r.height }, a = s.localToGraph(l);
+    const s = n.getCellById(t);
+    if (!s || !s.isNode()) return null;
+    const o = s, i = o.getPosition(), r = o.getSize(), l = { x: i.x, y: i.y, width: r.width, height: r.height }, a = n.localToGraph(l);
     return new DOMRect(a.x, a.y, a.width, a.height);
   }
   return {
     getNodeScreenRect: e
   };
 }
-const St = 100;
-function Dt({
-  graph: s,
+function tt(n) {
+  return {
+    nodeIds: n.filter((e) => e.isNode()).map((e) => e.id),
+    edgeIds: n.filter((e) => e.isEdge()).map((e) => e.id)
+  };
+}
+function Bt(n, e) {
+  const t = [
+    ...e.nodeIds.map((i) => n.getCellById(i)),
+    ...e.edgeIds.map((i) => n.getCellById(i))
+  ].filter((i) => !!i);
+  if (t.length === 0) return null;
+  const s = n.getCellsBBox(t);
+  if (!s) return null;
+  const o = n.localToGraph(s);
+  return new DOMRect(o.x, o.y, o.width, o.height);
+}
+function ot(n, e, t) {
+  const s = n.nodeIds.filter((r) => {
+    const l = e.nodes[r];
+    if (!l) return !1;
+    const a = t(l);
+    return a.deletable !== !1 && a.deleteDisabled !== !0;
+  }), o = new Set(s), i = n.edgeIds.filter((r) => {
+    const l = e.edges[r];
+    return l ? !o.has(l.source.nodeId) && !o.has(l.target.nodeId) : !1;
+  });
+  return { nodeIds: s, edgeIds: i };
+}
+function Ht(n) {
+  return [
+    ...n.edgeIds.map((e) => ({ type: "edge.remove", edgeId: e })),
+    ...n.nodeIds.map((e) => ({ type: "node.remove", nodeId: e }))
+  ];
+}
+const Gt = 100;
+function qt({
+  graph: n,
   overlayManager: e,
   executeCommand: t,
-  schema: o,
-  flowModel: n,
-  defaultInsertGap: i,
-  getContextMenuItems: r,
-  onHighlightChange: l,
-  resolveNodeShape: a
+  schema: s,
+  flowModel: o,
+  getNodeBehavior: i,
+  idGenerator: r,
+  defaultInsertGap: l,
+  getContextMenuItems: a,
+  onHighlightChange: p,
+  resolveNodeShape: c
 }) {
-  let f = [], d = [], b = null, m = !1, g = null, S = !1;
-  async function k() {
-    if (m) return b;
-    m = !0;
+  const g = r ?? Oe;
+  let u = [], y = [], v = null, C = !1, M = null;
+  async function D() {
+    if (C) return v;
+    C = !0;
     try {
-      const p = await import("@antv/x6-plugin-dnd"), c = p.Dnd ?? p.default;
-      return c ? (b = new c({
-        target: s,
+      const h = await import("@antv/x6-plugin-dnd"), d = h.Dnd ?? h.default;
+      return d ? (v = new d({
+        target: n,
         scaled: !0,
         animation: !0,
-        getDragNode: (C) => C.clone(),
-        getDropNode: (C) => C.clone()
-      }), b) : null;
+        getDragNode: (f) => f.clone(),
+        getDropNode: (f) => f.clone()
+      }), v) : null;
     } catch {
       return console.warn("[flow-canvas] @antv/x6-plugin-dnd not available, add it to your dependencies"), null;
     }
   }
-  async function w() {
-    if (!S) {
-      S = !0;
-      try {
-        const p = await import("@antv/x6-plugin-export"), c = p.Export ?? p.default;
-        c && s.use(new c());
-      } catch {
-        console.warn("[flow-canvas] @antv/x6-plugin-export not available, add it to your dependencies");
-      }
-    }
+  function L() {
+    return new Promise((h) => {
+      requestAnimationFrame(() => requestAnimationFrame(() => h()));
+    });
   }
-  const x = ({ node: p }) => {
-    const c = p.getData?.();
-    if (!c?._dndSessionId || c._dndSessionId !== g) return;
-    g = null;
-    const C = p.getPosition();
-    s.removeNode(p.id);
-    const { _dndSessionId: z, ..._ } = c, j = _.id || $();
+  const H = ({ node: h }) => {
+    const d = h.getData?.();
+    if (!d?._dndSessionId || d._dndSessionId !== M) return;
+    M = null;
+    const f = h.getPosition();
+    n.removeNode(h.id);
+    const { _dndSessionId: I, ...S } = d, w = S.id || g("node");
     t({
-      id: $(),
+      id: Z(),
       source: "user:drag",
       label: "拖入节点",
       timestamp: Date.now(),
       commands: [
         {
           type: "node.add",
-          node: { ..._, id: j, position: { x: C.x, y: C.y } }
+          node: { ...S, id: w, position: { x: f.x, y: f.y } }
         }
       ]
     });
   };
-  s.on("node:added", x);
-  function A(p) {
-    const c = o.nodeTypes[p.type];
-    return Be(p, c?.getPorts);
+  n.on("node:added", H);
+  function K(h) {
+    const d = s.nodeTypes[h.type];
+    return Be(h, d?.getPorts);
   }
-  function U(p, c, C, z, _) {
-    switch (p) {
+  function $(h) {
+    return h ?? tt(n.getSelectedCells?.() ?? []);
+  }
+  function W(h, d, f, I, S) {
+    switch (h) {
       case "left":
         return {
-          x: c.position.x - _ - z.width,
-          y: c.position.y + (C.height - z.height) / 2
+          x: d.position.x - S - I.width,
+          y: d.position.y + (f.height - I.height) / 2
         };
       case "top":
         return {
-          x: c.position.x + (C.width - z.width) / 2,
-          y: c.position.y - _ - z.height
+          x: d.position.x + (f.width - I.width) / 2,
+          y: d.position.y - S - I.height
         };
       case "bottom":
         return {
-          x: c.position.x + (C.width - z.width) / 2,
-          y: c.position.y + C.height + _
+          x: d.position.x + (f.width - I.width) / 2,
+          y: d.position.y + f.height + S
         };
       default:
         return {
-          x: c.position.x + C.width + _,
-          y: c.position.y + (C.height - z.height) / 2
+          x: d.position.x + f.width + S,
+          y: d.position.y + (f.height - I.height) / 2
         };
     }
   }
-  function O(p, c, C) {
-    switch (p) {
+  function F(h, d, f) {
+    switch (h) {
       case "left":
-        return { x: -(c.width + C), y: 0 };
+        return { x: -(d.width + f), y: 0 };
       case "top":
-        return { x: 0, y: -(c.height + C) };
+        return { x: 0, y: -(d.height + f) };
       case "bottom":
-        return { x: 0, y: c.height + C };
+        return { x: 0, y: d.height + f };
       default:
-        return { x: c.width + C, y: 0 };
+        return { x: d.width + f, y: 0 };
     }
   }
-  function K(p) {
-    switch (p) {
+  function k(h) {
+    switch (h) {
       case "left":
         return "right";
       case "top":
@@ -1098,281 +1175,316 @@ function Dt({
         return "left";
     }
   }
-  return {
+  const B = {
     zoomIn() {
-      s.zoom(0.1);
+      n.zoom(0.1);
     },
     zoomOut() {
-      s.zoom(-0.1);
+      n.zoom(-0.1);
     },
-    zoomTo(p) {
-      s.zoomTo(p);
+    zoomTo(h) {
+      n.zoomTo(h);
     },
     zoomToFit() {
-      s.zoomToFit({ padding: 40, maxScale: 1.5 });
+      n.zoomToFit({ padding: 40, maxScale: 1.5 });
     },
     getZoom() {
-      return s.zoom();
+      return n.zoom();
     },
     centerContent() {
-      s.centerContent();
+      n.centerContent();
     },
     scrollToOrigin() {
-      s.translate(0, 0);
+      n.translate(0, 0);
     },
-    scrollToNode(p) {
-      const c = s.getCellById(p);
-      c && s.centerCell(c);
+    scrollToNode(h) {
+      const d = n.getCellById(h);
+      d && n.centerCell(d);
     },
     getSelection() {
-      const p = s.getSelectedCells?.() ?? [];
-      return {
-        nodeIds: p.filter((c) => c.isNode()).map((c) => c.id),
-        edgeIds: p.filter((c) => c.isEdge()).map((c) => c.id)
-      };
+      return $();
+    },
+    getSelectionBounds(h) {
+      return Bt(n, $(h));
     },
-    selectNodes(p) {
-      const c = p.map((C) => s.getCellById(C)).filter(Boolean);
-      s.select?.(c);
+    selectNodes(h) {
+      const d = h.map((f) => n.getCellById(f)).filter(Boolean);
+      n.select?.(d);
     },
-    selectEdges(p) {
-      const c = p.map((C) => s.getCellById(C)).filter(Boolean);
-      s.select?.(c);
+    selectEdges(h) {
+      const d = h.map((f) => n.getCellById(f)).filter(Boolean);
+      n.select?.(d);
     },
     clearSelection() {
-      const p = s.getSelectedCells?.();
-      p?.length && s.unselect?.(p);
+      const h = n.getSelectedCells?.();
+      h?.length && n.unselect?.(h);
     },
-    registerDndSource(p, c) {
-      const C = async (z) => {
-        const _ = await k();
-        if (!_) return;
-        const j = $();
-        g = j;
-        const G = c(), q = a?.(G.type), X = s.createNode({
-          width: q?.width ?? 154,
-          height: q?.height ?? 54,
-          shape: q?.shapeName ?? "rect",
-          data: { ...G, _dndSessionId: j }
+    deleteSelection(h) {
+      const d = $(h?.selection), f = ot(d, o.value, i ?? (() => ({}))), I = Ht(f);
+      if (I.length === 0) return null;
+      const S = t({
+        id: Z(),
+        source: h?.source ?? "user:toolbar",
+        label: h?.label ?? "删除选中",
+        timestamp: Date.now(),
+        commands: I
+      });
+      return S.status === "applied" && h?.clearSelectionAfterApply !== !1 && B.clearSelection(), S;
+    },
+    registerDndSource(h, d) {
+      const f = async (I) => {
+        const S = await D();
+        if (!S) return;
+        const w = Z();
+        M = w;
+        const U = d(), oe = c?.(U.type), E = n.createNode({
+          width: oe?.width ?? 154,
+          height: oe?.height ?? 54,
+          shape: oe?.shapeName ?? "rect",
+          data: { ...U, _dndSessionId: w }
         });
-        _.start(X, z);
+        S.start(E, I);
       };
-      return p.addEventListener("mousedown", C), () => {
-        p.removeEventListener("mousedown", C);
+      return h.addEventListener("mousedown", f), () => {
+        h.removeEventListener("mousedown", f);
       };
     },
     /**
      * 通过编程方式发起连线：直接命中真实 port 元素，
      * 复用 X6 原生的连线拖拽流程与 connecting.createEdge 配置。
      */
-    startConnection(p, c) {
-      const C = s.getCellById(p);
-      if (!C?.isNode()) return;
-      const z = C, _ = s.findViewByCell(z);
-      if (!_) return;
-      const j = _.findPortElem(c, "circle") ?? _.findPortElem(c);
-      if (!j) return;
-      const q = (j.matches?.("[magnet]") ? j : j.querySelector?.("[magnet]")) ?? j, X = q.getBoundingClientRect(), ye = X.left + X.width / 2, se = X.top + X.height / 2, ae = new MouseEvent("mousedown", {
-        clientX: ye,
-        clientY: se,
+    startConnection(h, d) {
+      const f = n.getCellById(h);
+      if (!f?.isNode()) return;
+      const I = f, S = n.findViewByCell(I);
+      if (!S) return;
+      const w = S.findPortElem(d, "circle") ?? S.findPortElem(d);
+      if (!w) return;
+      const oe = (w.matches?.("[magnet]") ? w : w.querySelector?.("[magnet]")) ?? w, E = oe.getBoundingClientRect(), T = E.left + E.width / 2, m = E.top + E.height / 2, P = new MouseEvent("mousedown", {
+        clientX: T,
+        clientY: m,
         button: 0,
         buttons: 1,
         bubbles: !0,
         cancelable: !0
       });
-      q.dispatchEvent(ae);
+      oe.dispatchEvent(P);
     },
-    async exportAsImage(p) {
-      await w();
-      const c = s;
-      return typeof c.toPNG != "function" ? (console.warn("[flow-canvas] exportAsImage requires @antv/x6-plugin-export, add it to your dependencies"), new Blob()) : new Promise((C) => {
-        c.toPNG(
-          (z) => {
-            fetch(z).then((_) => _.blob()).then(C).catch(() => C(new Blob()));
-          },
-          {
-            backgroundColor: p?.backgroundColor ?? "#ffffff",
-            padding: p?.padding ?? 20,
-            quality: p?.quality,
-            copyStyles: !0
+    async exportAsImage(h) {
+      const { domToBlob: d } = await import("modern-screenshot"), f = h?.padding ?? 20, I = h?.backgroundColor ?? n.options.background?.color ?? "#ffffff", S = n.zoom(), w = n.translate(), U = n.getContentBBox(), oe = U.width / S, E = U.height / S;
+      if (oe === 0 || E === 0)
+        return new Blob();
+      const T = (U.x - w.tx) / S, m = (U.y - w.ty) / S, P = Math.ceil(oe + f * 2), z = Math.ceil(E + f * 2), Y = document.createElement("div");
+      Y.style.cssText = "position:fixed;left:-99999px;top:0;pointer-events:none;";
+      const X = n.container.cloneNode(!0);
+      X.style.width = `${P}px`, X.style.height = `${z}px`, X.style.overflow = "visible";
+      const ne = X.querySelector("svg");
+      ne && (ne.setAttribute("width", String(P)), ne.setAttribute("height", String(z)), ne.style.width = `${P}px`, ne.style.height = `${z}px`), X.querySelector(".x6-graph-svg-viewport")?.setAttribute("transform", `matrix(1,0,0,1,${-T + f},${-m + f})`), Y.appendChild(X), document.body.appendChild(Y);
+      try {
+        return await L(), await d(X, {
+          width: P,
+          height: z,
+          backgroundColor: I,
+          scale: h?.scale ?? window.devicePixelRatio,
+          filter: (de) => {
+            if (de instanceof Element) {
+              const se = de.getAttribute("class") ?? "";
+              if (se.includes("x6-widget-selection") || se.includes("x6-widget-transform") || se.includes("x6-graph-grid") || se.includes("x6-graph-background"))
+                return !1;
+            }
+            return !0;
           }
-        );
-      });
-    },
-    async exportAsSVG() {
-      await w();
-      const p = s;
-      return typeof p.toSVG != "function" ? (console.warn("[flow-canvas] exportAsSVG requires @antv/x6-plugin-export, add it to your dependencies"), "") : new Promise((c) => {
-        p.toSVG((C) => c(C));
-      });
+        });
+      } catch (de) {
+        return console.warn("[flow-canvas] Export failed:", de), new Blob();
+      } finally {
+        Y.remove();
+      }
     },
-    highlightNodes(p) {
-      f = p, l?.(f, d);
+    highlightNodes(h) {
+      u = h, p?.(u, y);
     },
-    highlightEdges(p) {
-      d = p, l?.(f, d);
+    highlightEdges(h) {
+      y = h, p?.(u, y);
     },
     clearHighlight() {
-      f = [], d = [], l?.([], []);
+      u = [], y = [], p?.([], []);
     },
     overlay: e,
-    getContextMenuItems(p) {
-      return r?.(p) ?? [];
+    getContextMenuItems(h) {
+      return a?.(h) ?? [];
     },
-    insertNodeToRight(p, c, C) {
-      const z = n.value, _ = z.nodes[p];
-      if (!_)
+    insertNodeToRight(h, d, f) {
+      const I = o.value, S = I.nodes[h];
+      if (!S)
         return {
           status: "invalid",
           envelope: { id: "", source: "user:toolbar", timestamp: Date.now(), commands: [] },
-          error: { code: "constraint_violated", reason: `Source node "${p}" not found`, source: "api" }
+          error: { code: "constraint_violated", reason: `Source node "${h}" not found`, source: "api" }
         };
-      const j = C?.gap ?? i ?? St, G = C?.direction ?? "right", q = o.nodeTypes[_.type], X = o.nodeTypes[c.type], ye = q?.getSize(_) ?? { width: 154, height: 54 }, se = X?.getSize({ ...c, position: { x: 0, y: 0 } }) ?? {
+      const w = f?.gap ?? l ?? Gt, U = f?.direction ?? "right", oe = s.nodeTypes[S.type], E = s.nodeTypes[d.type], T = oe?.getSize(S) ?? { width: 154, height: 54 }, m = E?.getSize({ ...d, position: { x: 0, y: 0 } }) ?? {
         width: 154,
         height: 54
-      }, ae = U(G, _, ye, se, j), ie = c.id || $(), xe = { ...c, id: ie, position: ae }, J = [{ type: "node.add", node: xe }], ke = O(G, se, j), ee = { x: ae.x, y: ae.y, width: se.width, height: se.height };
-      for (const [le, V] of Object.entries(z.nodes)) {
-        if (le === p || le === ie) continue;
-        const fe = o.nodeTypes[V.type]?.getSize(V) ?? { width: 154, height: 54 }, oe = ee.x < V.position.x + fe.width && ee.x + ee.width > V.position.x, pe = ee.y < V.position.y + fe.height && ee.y + ee.height > V.position.y;
-        oe && pe && J.push({
+      }, P = W(U, S, T, m, w), z = d.id || g("node"), Y = { ...d, id: z, position: P }, X = [{ type: "node.add", node: Y }], ne = F(U, m, w), Q = { x: P.x, y: P.y, width: m.width, height: m.height };
+      for (const [se, x] of Object.entries(I.nodes)) {
+        if (se === h || se === z) continue;
+        const _ = s.nodeTypes[x.type]?.getSize(x) ?? { width: 154, height: 54 }, q = Q.x < x.position.x + _.width && Q.x + Q.width > x.position.x, J = Q.y < x.position.y + _.height && Q.y + Q.height > x.position.y;
+        q && J && X.push({
           type: "node.move",
-          nodeId: le,
-          position: { x: V.position.x + ke.x, y: V.position.y + ke.y }
+          nodeId: se,
+          position: { x: x.position.x + ne.x, y: x.position.y + ne.y }
         });
       }
-      if (C?.autoWireEdges) {
-        const le = A(_), V = A(xe), te = G, fe = K(G), oe = le.find((h) => h.group === te), pe = V.find((h) => h.group === fe), Pe = V.find((h) => h.group === te), v = oe ? Object.values(z.edges).find(
-          (h) => h.source.nodeId === p && h.source.portId === oe.id
-        ) : Object.values(z.edges).find((h) => h.source.nodeId === p);
-        if (v) {
-          const h = v.target;
-          J.push({ type: "edge.remove", edgeId: v.id }), J.push({
+      if (f?.autoWireEdges) {
+        const se = K(S), x = K(Y), b = U, _ = k(U), q = se.find((ee) => ee.group === b), J = x.find((ee) => ee.group === _), ue = x.find((ee) => ee.group === b), ie = q ? Object.values(I.edges).find(
+          (ee) => ee.source.nodeId === h && ee.source.portId === q.id
+        ) : Object.values(I.edges).find((ee) => ee.source.nodeId === h);
+        if (ie) {
+          const ee = ie.target;
+          X.push({ type: "edge.remove", edgeId: ie.id }), X.push({
             type: "edge.add",
             edge: {
-              id: $(),
-              source: { nodeId: p, portId: oe?.id },
-              target: { nodeId: ie, portId: pe?.id }
+              id: g("edge"),
+              source: { nodeId: h, portId: q?.id },
+              target: { nodeId: z, portId: J?.id }
             }
-          }), J.push({
+          }), X.push({
             type: "edge.add",
             edge: {
-              id: $(),
-              source: { nodeId: ie, portId: Pe?.id },
-              target: h
+              id: g("edge"),
+              source: { nodeId: z, portId: ue?.id },
+              target: ee
             }
           });
         } else
-          J.push({
+          X.push({
             type: "edge.add",
             edge: {
-              id: $(),
-              source: { nodeId: p, portId: oe?.id },
-              target: { nodeId: ie, portId: pe?.id }
+              id: g("edge"),
+              source: { nodeId: h, portId: q?.id },
+              target: { nodeId: z, portId: J?.id }
             }
           });
       }
-      const De = {
-        id: $(),
-        source: C?.source ?? "user:toolbar",
-        label: C?.label ?? "插入节点",
+      const de = {
+        id: Z(),
+        source: f?.source ?? "user:toolbar",
+        label: f?.label ?? "插入节点",
         timestamp: Date.now(),
-        commands: J
+        commands: X
       };
-      return t(De);
+      return t(de);
     },
-    onGraphEvent(p, c) {
-      return s.on(p, c), () => s.off(p, c);
+    onGraphEvent(h, d) {
+      return n.on(h, d), () => n.off(h, d);
     },
     unsafeGetGraph() {
-      return s;
+      return n;
     }
   };
+  return B;
 }
-function Pt() {
-  const s = L(null), e = L(!1);
-  let t = null, o = !1;
-  function n(d) {
-    t && (clearTimeout(t), t = null), s.value = d;
+function Ut() {
+  const n = O(null), e = O(!1);
+  let t = null, s = !1;
+  function o(g) {
+    t && (clearTimeout(t), t = null), n.value = g;
   }
-  function i(d = 100) {
-    o || (t && clearTimeout(t), t = setTimeout(() => {
-      s.value = null, t = null;
-    }, d));
+  function i(g = 100) {
+    s || (t && clearTimeout(t), t = setTimeout(() => {
+      n.value = null, t = null;
+    }, g));
   }
   function r() {
-    o = !0, t && (clearTimeout(t), t = null);
+    s = !0, t && (clearTimeout(t), t = null);
   }
-  function l(d = 100) {
-    o = !1, i(d);
+  function l(g = 100) {
+    s = !1, i(g);
   }
   function a() {
     t && (clearTimeout(t), t = null);
   }
-  function f() {
+  function p() {
+    a(), s = !1, n.value = null;
+  }
+  function c() {
     t && clearTimeout(t);
   }
-  return { hoveredNodeId: s, isDraggingNode: e, enter: n, leave: i, enterOverlay: r, leaveOverlay: l, cancelLeave: a, cleanup: f };
+  return { hoveredNodeId: n, isDraggingNode: e, enter: o, leave: i, enterOverlay: r, leaveOverlay: l, cancelLeave: a, reset: p, cleanup: c };
 }
-const ze = 10;
-function je(s, e) {
-  const t = s.getTotalLength();
+const qe = 10, Ie = 12;
+function Ue(n, e) {
+  const t = n.getTotalLength();
   if (t === 0) return { ...e, length: 0, totalLength: 0 };
-  let o = s.getPointAtLength(0), n = 1 / 0;
+  let s = n.getPointAtLength(0), o = 1 / 0;
   const i = 50, r = t / i;
   let l = 0;
-  for (let b = 0; b <= i; b++) {
-    const m = b * r, g = s.getPointAtLength(m), S = (g.x - e.x) ** 2 + (g.y - e.y) ** 2;
-    S < n && (n = S, o = g, l = m);
+  for (let g = 0; g <= i; g++) {
+    const u = g * r, y = n.getPointAtLength(u), v = (y.x - e.x) ** 2 + (y.y - e.y) ** 2;
+    v < o && (o = v, s = y, l = u);
   }
-  const a = Math.max(0, l - r), f = Math.min(t, l + r), d = (f - a) / 20;
-  for (let b = a; b <= f; b += d) {
-    const m = s.getPointAtLength(b), g = (m.x - e.x) ** 2 + (m.y - e.y) ** 2;
-    g < n && (n = g, o = m, l = b);
+  const a = Math.max(0, l - r), p = Math.min(t, l + r), c = (p - a) / 20;
+  for (let g = a; g <= p; g += c) {
+    const u = n.getPointAtLength(g), y = (u.x - e.x) ** 2 + (u.y - e.y) ** 2;
+    y < o && (o = y, s = u, l = g);
   }
-  return { x: o.x, y: o.y, length: l, totalLength: t };
+  return { x: s.x, y: s.y, length: l, totalLength: t };
 }
-function Ge(s, e) {
-  return s < ze || s > e - ze;
+function ze(n, e) {
+  return n < qe || n > e - qe;
 }
-function He() {
-  const s = "http://www.w3.org/2000/svg", e = document.createElementNS(s, "g");
+function Fe(n, e, t) {
+  const s = n.querySelectorAll(".x6-edge-label");
+  for (const o of s) {
+    const i = o.getBoundingClientRect();
+    if (e >= i.left - Ie && e <= i.right + Ie && t >= i.top - Ie && t <= i.bottom + Ie)
+      return !0;
+  }
+  return !1;
+}
+function je() {
+  const n = "http://www.w3.org/2000/svg", e = document.createElementNS(n, "g");
   e.setAttribute("class", "flow-canvas-edge-delete-tool"), e.style.cursor = "pointer";
-  const t = document.createElementNS(s, "rect");
+  const t = document.createElementNS(n, "rect");
   t.setAttribute("width", "20"), t.setAttribute("height", "20"), t.setAttribute("x", "-10"), t.setAttribute("y", "-10"), t.setAttribute("rx", "4"), t.setAttribute("ry", "4"), t.setAttribute("fill", "#3a84ff"), e.appendChild(t);
-  const o = document.createElementNS(s, "text");
-  return o.setAttribute("font-family", "flow-canvas"), o.setAttribute("font-size", "16"), o.setAttribute("fill", "#ffffff"), o.setAttribute("text-anchor", "middle"), o.setAttribute("dominant-baseline", "central"), o.textContent = "", e.appendChild(o), e;
+  const s = document.createElementNS(n, "text");
+  return s.setAttribute("font-family", "flow-canvas"), s.setAttribute("font-size", "16"), s.setAttribute("fill", "#ffffff"), s.setAttribute("text-anchor", "middle"), s.setAttribute("dominant-baseline", "central"), s.textContent = "", e.appendChild(s), e;
 }
-function _t(s) {
+function zt(n) {
   let e = null, t = null;
-  function o(l, a) {
-    i(), t = l;
-    const f = s.getCellById(l);
-    if (!f?.isEdge()) return;
-    const d = s.findViewByCell(f);
-    if (!d) return;
-    const b = d.container.querySelector("path");
-    if (!b) return;
-    const m = s.clientToLocal(a.clientX, a.clientY), g = je(b, m);
-    if (Ge(g.length, g.totalLength)) return;
-    const S = He();
-    S.setAttribute("transform", `translate(${g.x}, ${g.y})`), d.container.appendChild(S), e = S;
-  }
-  function n(l) {
+  function s(l, a) {
+    if (i(), t = l, a.target?.closest?.(".x6-edge-label")) return;
+    const c = n.getCellById(l);
+    if (!c?.isEdge()) return;
+    const g = n.findViewByCell(c);
+    if (!g) return;
+    const u = g.container.querySelector("path");
+    if (!u) return;
+    const y = n.clientToLocal(a.clientX, a.clientY), v = Ue(u, y);
+    if (ze(v.length, v.totalLength) || Fe(g.container, a.clientX, a.clientY)) return;
+    const C = je();
+    C.setAttribute("transform", `translate(${v.x}, ${v.y})`), g.container.appendChild(C), e = C;
+  }
+  function o(l) {
     if (!t) return;
-    const a = s.getCellById(t);
-    if (!a?.isEdge()) return;
-    const f = s.findViewByCell(a);
-    if (!f) return;
-    const d = f.container.querySelector("path");
-    if (!d) return;
-    const b = s.clientToLocal(l.clientX, l.clientY), m = je(d, b);
-    if (Ge(m.length, m.totalLength))
+    if (l.target?.closest?.(".x6-edge-label")) {
+      e && e.setAttribute("display", "none");
+      return;
+    }
+    const p = n.getCellById(t);
+    if (!p?.isEdge()) return;
+    const c = n.findViewByCell(p);
+    if (!c) return;
+    const g = c.container.querySelector("path");
+    if (!g) return;
+    const u = n.clientToLocal(l.clientX, l.clientY), y = Ue(g, u);
+    if (ze(y.length, y.totalLength) || Fe(c.container, l.clientX, l.clientY))
       e && e.setAttribute("display", "none");
     else if (e)
-      e.removeAttribute("display"), e.setAttribute("transform", `translate(${m.x}, ${m.y})`);
+      e.removeAttribute("display"), e.setAttribute("transform", `translate(${y.x}, ${y.y})`);
     else {
-      const g = He();
-      g.setAttribute("transform", `translate(${m.x}, ${m.y})`), f.container.appendChild(g), e = g;
+      const v = je();
+      v.setAttribute("transform", `translate(${y.x}, ${y.y})`), c.container.appendChild(v), e = v;
     }
   }
   function i() {
@@ -1381,48 +1493,357 @@ function _t(s) {
   function r(l) {
     l === t && (e = null, t = null);
   }
-  return { show: o, move: n, remove: i, handleEdgeRemoved: r };
+  return { show: s, move: o, remove: i, handleEdgeRemoved: r };
 }
-function At(s) {
+function Ft(n) {
   let e = null, t = 0;
-  function o(d) {
-    const b = d ? "visible" : "hidden";
-    for (const m of s.getNodes())
-      for (const g of m.getPorts())
-        m.setPortProp(g.id, "attrs/circle/visibility", b);
+  function s(c) {
+    const g = c ? "visible" : "hidden";
+    for (const u of n.getNodes())
+      for (const y of u.getPorts())
+        u.setPortProp(y.id, "attrs/circle/visibility", g);
   }
-  function n(d) {
+  function o(c) {
     if (!e)
-      for (const b of d.getPorts())
-        d.setPortProp(b.id, "attrs/circle/visibility", "visible");
+      for (const g of c.getPorts())
+        c.setPortProp(g.id, "attrs/circle/visibility", "visible");
   }
-  function i(d) {
+  function i(c) {
     if (!e)
-      for (const b of d.getPorts())
-        d.setPortProp(b.id, "attrs/circle/visibility", "hidden");
-  }
-  function r(d) {
-    d.getTargetCell() || (e = d.id, o(!0));
+      for (const g of c.getPorts())
+        c.setPortProp(g.id, "attrs/circle/visibility", "hidden");
+  }
+  function r(c, g) {
+    if (!c.getTargetCell())
+      if (e = c.id, g?.size)
+        for (const u of n.getNodes()) {
+          const y = g.has(u.id) ? "hidden" : "visible";
+          for (const v of u.getPorts())
+            u.setPortProp(v.id, "attrs/circle/visibility", y);
+        }
+      else
+        s(!0);
   }
   function l() {
-    e = null, o(!1), t = Date.now() + 300;
+    e = null, s(!1), t = Date.now() + 300;
   }
-  function a(d) {
-    d === e && (e = null, o(!1));
+  function a(c) {
+    c === e && (e = null, s(!1));
   }
-  function f() {
+  function p() {
     return !e && Date.now() >= t;
   }
   return {
-    showNodePorts: n,
+    showNodePorts: o,
     hideNodePorts: i,
     handleEdgeAdded: r,
     handleEdgeConnected: l,
     handleEdgeRemoved: a,
-    canShowEdgeTool: f
+    canShowEdgeTool: p
+  };
+}
+function We(n) {
+  return n === "top" || n === "right" || n === "bottom" || n === "left";
+}
+function jt(n) {
+  const { editor: e, nodeHover: t, isSelectionModeActive: s, viewportVersion: o, getNodeBehavior: i, getInsertGap: r } = n, { isDraggingNode: l } = n, a = O(null), p = O(!1);
+  let c = null, g = null, u = null;
+  const y = j(() => ({
+    enabled: !0,
+    portGroup: "right",
+    ...n.quickAddProp.value
+  }));
+  function v() {
+    c && (clearTimeout(c), c = null);
+  }
+  function C() {
+    c && clearTimeout(c), c = setTimeout(() => {
+      a.value = null, c = null;
+    }, 150);
+  }
+  function M(E) {
+    return p.value ? !0 : (v(), B(E) ? (a.value = E, !0) : (a.value = null, !1));
+  }
+  function D() {
+    v(), t.enterOverlay();
+  }
+  function L() {
+    C(), t.leaveOverlay();
+  }
+  function H(E) {
+    const T = e.schema.nodeTypes[E.type];
+    return Be(E, T?.getPorts);
+  }
+  function K(E, T) {
+    const m = y.value.getPort?.(E, T);
+    if (!m) return null;
+    const P = typeof m == "string" ? m : m.id;
+    return T.find((z) => z.id === P) ?? null;
+  }
+  function $(E, T) {
+    const m = e.api.value?.overlay.getNodeScreenRect(E);
+    if (!m) return null;
+    switch (T) {
+      case "top":
+        return { x: m.x + m.width / 2, y: m.y };
+      case "bottom":
+        return { x: m.x + m.width / 2, y: m.y + m.height };
+      case "left":
+        return { x: m.x, y: m.y + m.height / 2 };
+      case "right":
+        return { x: m.x + m.width, y: m.y + m.height / 2 };
+      default:
+        return null;
+    }
+  }
+  function W(E, T, m) {
+    if (!g) return $(E, m);
+    const P = g.getCellById(E);
+    if (P?.isNode()) {
+      const z = P, Y = g.findViewByCell(z), X = Y?.findPortElem(T, "circle") ?? Y?.findPortElem(T);
+      if (X) {
+        const ne = g.container.getBoundingClientRect(), Q = X.getBoundingClientRect();
+        return {
+          x: Q.left - ne.left + Q.width / 2,
+          y: Q.top - ne.top + Q.height / 2
+        };
+      }
+    }
+    return $(E, m);
+  }
+  function F(E) {
+    const T = H(E), m = K(E, T) ?? T.find((z) => z.group === y.value.portGroup) ?? null;
+    if (!m) return null;
+    const P = W(E.id, m.id, m.group);
+    return P ? { portId: m.id, portGroup: m.group, portPosition: P } : null;
+  }
+  function k(E) {
+    const T = F(E), m = y.value.insertDirection;
+    if (typeof m == "function") {
+      const P = m(E, T ? { id: T.portId, group: T.portGroup } : null);
+      if (P) return P;
+    } else if (m)
+      return m;
+    return T && We(T.portGroup) ? T.portGroup : We(y.value.portGroup) ? y.value.portGroup : "right";
+  }
+  function B(E) {
+    if (!y.value.enabled || e.mode.value !== "edit") return !1;
+    const m = e.flowModel.value.nodes[E];
+    return !m || i(m).quickAddEnabled === !1 ? !1 : !!F(m);
+  }
+  const h = j(() => {
+    if (o.value, !y.value.enabled) return null;
+    const E = a.value;
+    if (!E || l.value || !e.api.value || e.mode.value !== "edit" || s.value)
+      return null;
+    const m = e.flowModel.value.nodes[E];
+    if (!m) return null;
+    const P = i(m);
+    if (P.quickAddEnabled === !1) return null;
+    const z = F(m);
+    return z ? { node: m, ...z, behavior: P } : null;
+  });
+  function d(E) {
+    p.value = !0, h.value && e._emitUiEvent({ type: "node.quick-add", nodeId: E, position: h.value.portPosition });
+  }
+  function f() {
+    p.value = !1;
+  }
+  function I(E) {
+    const T = e.api.value;
+    if (!T) return;
+    const m = e.flowModel.value.nodes[E];
+    if (!m) return;
+    const P = F(m);
+    P && T.startConnection(E, P.portId);
+  }
+  function S(E, T) {
+    const m = e.api.value;
+    if (!m) return;
+    const P = T.id || e.idGenerator("node"), z = { ...T, id: P }, Y = e.flowModel.value.nodes[E];
+    if (!Y) return;
+    m.insertNodeToRight(E, z, {
+      autoWireEdges: !0,
+      direction: k(Y),
+      gap: r(),
+      source: "user:quick-add",
+      label: "快捷插入节点"
+    }).status === "applied" && e._emitUiEvent({ type: "node.action.quick-insert", sourceNodeId: E, newNodeId: P }), n.closePopover();
+  }
+  function w(E) {
+    if (!g) return;
+    const T = g.getCellById(E);
+    if (!T?.isNode()) return;
+    const m = T, P = e.flowModel.value.nodes[E];
+    if (!P) return;
+    const z = F(P);
+    let Y = !0;
+    i(P).hidePortForQuickAdd === !1 && (Y = !1);
+    const ne = Y && !l.value && !!z && B(E);
+    for (const Q of m.getPorts()) {
+      const de = ne && Q.id === z?.portId ? "hidden" : "visible";
+      m.setPortProp(Q.id, "attrs/circle/visibility", de);
+    }
+  }
+  function U(E, T) {
+    u?.(), g = E, u = fe(
+      [a, l],
+      ([m], [P]) => {
+        if (P && P !== m) {
+          const z = E.getCellById(P);
+          z?.isNode() && T(z);
+        }
+        m && w(m);
+      },
+      { flush: "sync" }
+    );
+  }
+  fe(h, (E) => {
+    E || (p.value = !1);
+  });
+  function oe() {
+    c && clearTimeout(c), u?.(), u = null, g = null;
+  }
+  return {
+    quickAddNodeId: a,
+    quickAddPopoverOpen: p,
+    mergedConfig: y,
+    data: h,
+    enter: M,
+    leave: C,
+    cancelLeave: v,
+    handleOverlayEnter: D,
+    handleOverlayLeave: L,
+    handleOpen: d,
+    handleClose: f,
+    handleStartDrag: I,
+    handleInsert: S,
+    isActiveForNode: B,
+    syncNodePorts: w,
+    attachRuntime: U,
+    cleanup: oe
+  };
+}
+function Wt(n) {
+  function e(o) {
+    return {
+      id: n.idGenerator("node"),
+      type: o.type,
+      label: o.label,
+      ports: o.ports ? JSON.parse(JSON.stringify(o.ports)) : void 0,
+      payload: o.payload ? JSON.parse(JSON.stringify(o.payload)) : void 0,
+      extensions: o.extensions ? JSON.parse(JSON.stringify(o.extensions)) : void 0
+    };
+  }
+  function t(o, i, r) {
+    const l = n.api.value;
+    switch (o) {
+      case "delete":
+        return n.executeCommand({
+          id: Z(),
+          source: "user:toolbar",
+          label: "删除节点",
+          timestamp: Date.now(),
+          commands: [{ type: "node.remove", nodeId: i }]
+        }), n._emitUiEvent({ type: "node.action.delete", nodeId: i }), !0;
+      case "copy": {
+        if (!l) break;
+        const a = n.flowModel.value.nodes[i];
+        if (!a) break;
+        const p = e(a);
+        l.insertNodeToRight(i, p, {
+          autoWireEdges: !1,
+          gap: r,
+          label: "复制节点"
+        }), n._emitUiEvent({ type: "node.action.copy", sourceNodeId: i, newNodeId: p.id });
+        break;
+      }
+      case "copy-insert": {
+        if (!l) break;
+        const a = n.flowModel.value.nodes[i];
+        if (!a) break;
+        const p = e(a);
+        l.insertNodeToRight(i, p, {
+          autoWireEdges: !0,
+          gap: r,
+          label: "复制并插入节点"
+        }), n._emitUiEvent({ type: "node.action.copy-insert", sourceNodeId: i, newNodeId: p.id });
+        break;
+      }
+      case "disconnect": {
+        const a = n.flowModel.value, p = Object.entries(a.edges).filter(([, c]) => {
+          const g = c;
+          return g.source.nodeId === i || g.target.nodeId === i;
+        }).map(([c]) => c);
+        if (p.length === 0) break;
+        n.executeCommand({
+          id: Z(),
+          source: "user:toolbar",
+          label: "断开连线",
+          timestamp: Date.now(),
+          commands: p.map((c) => ({ type: "edge.remove", edgeId: c }))
+        }), n._emitUiEvent({ type: "node.action.disconnect", nodeId: i, edgeIds: p });
+        break;
+      }
+      case "debug": {
+        n._emitUiEvent({ type: "node.action.debug", nodeId: i });
+        break;
+      }
+    }
+    return !1;
+  }
+  function s(o) {
+    n.api.value?.deleteSelection({
+      selection: o,
+      source: "user:toolbar",
+      label: "批量删除选中"
+    });
+  }
+  return { handleNodeAction: t, deleteSelection: s };
+}
+function Vt() {
+  return {
+    refX: 0,
+    children: [
+      {
+        tagName: "path",
+        d: "M -16 -5 L -8 0 L -16 5 Z",
+        transform: "rotate(0)"
+      },
+      {
+        tagName: "circle",
+        cx: 0,
+        cy: 0,
+        r: 8,
+        fill: "#3a84ff",
+        stroke: "#3a84ff",
+        transform: "rotate(0)"
+      }
+    ]
   };
 }
-const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
+function Xt(n, e) {
+  const t = e.defaultEdgeType ?? "default", s = e.edgeTypes?.[t], o = {
+    zIndex: -1,
+    attrs: {
+      line: {
+        stroke: "#abb5cc",
+        strokeWidth: 2,
+        targetMarker: { name: "block", width: 8, height: 8 }
+      }
+    }
+  };
+  s?.router && (o.router = typeof s.router == "string" ? { name: s.router } : s.router), s?.connector && (o.connector = typeof s.connector == "string" ? { name: s.connector } : s.connector), s?.x6EdgeConfig && Object.assign(o, s.x6EdgeConfig);
+  const i = o.attrs ?? {}, r = i.line ?? {};
+  return o.attrs = {
+    ...i,
+    line: {
+      ...r,
+      targetMarker: Vt()
+    }
+  }, n.createEdge(o);
+}
+const Kt = { class: "flow-canvas-node-actions__bar" }, Yt = /* @__PURE__ */ le({
   __name: "node-actions-toolbar",
   props: {
     node: {},
@@ -1432,15 +1853,15 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
     actionsOffset: {}
   },
   emits: ["action"],
-  setup(s, { emit: e }) {
-    const t = s, o = H(() => {
-      const b = t.actionsOffset?.x ?? 0, m = t.actionsOffset?.y ?? 0, g = b !== 0 || m !== 0;
+  setup(n, { emit: e }) {
+    const t = n, s = j(() => {
+      const g = t.actionsOffset?.x ?? 0, u = t.actionsOffset?.y ?? 0, y = g !== 0 || u !== 0;
       return {
         left: `${t.position.x}px`,
         top: `${t.position.y}px`,
-        transform: g ? `translate(${b}px, ${m}px)` : "translateX(-100%)"
+        transform: y ? `translate(${g}px, ${u}px)` : "translateX(-100%)"
       };
-    }), n = e, i = H(() => ({
+    }), o = e, i = j(() => ({
       debug: {
         visible: t.config.showDebug && t.behavior.debuggable !== !1,
         disabled: t.behavior.debugDisabled === !0
@@ -1461,238 +1882,236 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
         visible: t.config.showDisconnect && t.behavior.disconnectable !== !1,
         disabled: t.behavior.disconnectDisabled === !0
       }
-    })), r = H(() => i.value.copy.visible || i.value.copyInsert.visible || i.value.disconnect.visible), l = L(!1);
+    })), r = j(() => i.value.copy.visible || i.value.copyInsert.visible || i.value.disconnect.visible), l = O(!1);
     let a = null;
-    function f() {
+    function p() {
       a && (clearTimeout(a), a = null), l.value = !0;
     }
-    function d() {
+    function c() {
       a = setTimeout(() => {
         l.value = !1, a = null;
       }, 100);
     }
-    return Re(() => {
+    return Se(() => {
       a && clearTimeout(a);
-    }), (b, m) => (I(), N("div", {
+    }), (g, u) => (N(), A("div", {
       class: "flow-canvas-node-actions",
-      style: Ie(o.value)
+      style: ve(s.value)
     }, [
-      R("div", Tt, [
-        i.value.debug.visible ? (I(), N("i", {
+      G("div", Kt, [
+        i.value.debug.visible ? (N(), A("i", {
           key: 0,
-          class: Q(["flow-canvas-icon canvas-debug flow-canvas-node-actions__icon", { "is-disabled": i.value.debug.disabled }]),
-          onClick: m[0] || (m[0] = (g) => !i.value.debug.disabled && n("action", "debug", s.node.id))
-        }, null, 2)) : F("", !0),
-        i.value.delete.visible ? (I(), N("i", {
+          class: te(["flow-canvas-icon canvas-debug flow-canvas-node-actions__icon", { "is-disabled": i.value.debug.disabled }]),
+          onClick: u[0] || (u[0] = (y) => !i.value.debug.disabled && o("action", "debug", n.node.id))
+        }, null, 2)) : V("", !0),
+        i.value.delete.visible ? (N(), A("i", {
           key: 1,
-          class: Q(["flow-canvas-icon canvas-shanchu flow-canvas-node-actions__icon", { "is-disabled": i.value.delete.disabled }]),
-          onClick: m[1] || (m[1] = (g) => !i.value.delete.disabled && n("action", "delete", s.node.id))
-        }, null, 2)) : F("", !0),
-        r.value ? (I(), N("div", {
+          class: te(["flow-canvas-icon canvas-shanchu flow-canvas-node-actions__icon", { "is-disabled": i.value.delete.disabled }]),
+          onClick: u[1] || (u[1] = (y) => !i.value.delete.disabled && o("action", "delete", n.node.id))
+        }, null, 2)) : V("", !0),
+        r.value ? (N(), A("div", {
           key: 2,
           class: "flow-canvas-node-actions__more-wrapper",
-          onMouseenter: f,
-          onMouseleave: d
-        }, [...m[5] || (m[5] = [
-          R("i", { class: "flow-canvas-icon canvas-gengduo flow-canvas-node-actions__icon" }, null, -1)
-        ])], 32)) : F("", !0)
+          onMouseenter: p,
+          onMouseleave: c
+        }, [...u[5] || (u[5] = [
+          G("i", { class: "flow-canvas-icon canvas-gengduo flow-canvas-node-actions__icon" }, null, -1)
+        ])], 32)) : V("", !0)
       ]),
-      Ve(We, { name: "flow-canvas-fade" }, {
+      Ze(Qe, { name: "flow-canvas-fade" }, {
         default: $e(() => [
-          l.value && r.value ? (I(), N("div", {
+          l.value && r.value ? (N(), A("div", {
             key: 0,
             class: "flow-canvas-node-actions__dropdown",
-            onMouseenter: f,
-            onMouseleave: d
+            onMouseenter: p,
+            onMouseleave: c
           }, [
-            i.value.copy.visible ? (I(), N("div", {
+            i.value.copy.visible ? (N(), A("div", {
               key: 0,
-              class: Q(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copy.disabled }]),
-              onClick: m[2] || (m[2] = (g) => !i.value.copy.disabled && n("action", "copy", s.node.id))
-            }, [...m[6] || (m[6] = [
-              R("i", { class: "flow-canvas-icon canvas-copy-fuzhi-2" }, null, -1),
-              R("span", null, "复制", -1)
-            ])], 2)) : F("", !0),
-            i.value.copyInsert.visible ? (I(), N("div", {
+              class: te(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copy.disabled }]),
+              onClick: u[2] || (u[2] = (y) => !i.value.copy.disabled && o("action", "copy", n.node.id))
+            }, [...u[6] || (u[6] = [
+              G("i", { class: "flow-canvas-icon canvas-copy-fuzhi-2" }, null, -1),
+              G("span", null, "复制", -1)
+            ])], 2)) : V("", !0),
+            i.value.copyInsert.visible ? (N(), A("div", {
               key: 1,
-              class: Q(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copyInsert.disabled }]),
-              onClick: m[3] || (m[3] = (g) => !i.value.copyInsert.disabled && n("action", "copy-insert", s.node.id))
-            }, [...m[7] || (m[7] = [
-              R("i", { class: "flow-canvas-icon canvas-fuzhibingcharu" }, null, -1),
-              R("span", null, "复制并插入", -1)
-            ])], 2)) : F("", !0),
-            i.value.disconnect.visible ? (I(), N("div", {
+              class: te(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copyInsert.disabled }]),
+              onClick: u[3] || (u[3] = (y) => !i.value.copyInsert.disabled && o("action", "copy-insert", n.node.id))
+            }, [...u[7] || (u[7] = [
+              G("i", { class: "flow-canvas-icon canvas-fuzhibingcharu" }, null, -1),
+              G("span", null, "复制并插入", -1)
+            ])], 2)) : V("", !0),
+            i.value.disconnect.visible ? (N(), A("div", {
               key: 2,
-              class: Q(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.disconnect.disabled }]),
-              onClick: m[4] || (m[4] = (g) => !i.value.disconnect.disabled && n("action", "disconnect", s.node.id))
-            }, [...m[8] || (m[8] = [
-              R("i", { class: "flow-canvas-icon canvas-unlock-jiebang" }, null, -1),
-              R("span", null, "断开连线", -1)
-            ])], 2)) : F("", !0)
-          ], 32)) : F("", !0)
+              class: te(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.disconnect.disabled }]),
+              onClick: u[4] || (u[4] = (y) => !i.value.disconnect.disabled && o("action", "disconnect", n.node.id))
+            }, [...u[8] || (u[8] = [
+              G("i", { class: "flow-canvas-icon canvas-unlock-jiebang" }, null, -1),
+              G("span", null, "断开连线", -1)
+            ])], 2)) : V("", !0)
+          ], 32)) : V("", !0)
         ]),
         _: 1
       })
     ], 4));
   }
-}), ue = (s, e) => {
-  const t = s.__vccOpts || s;
-  for (const [o, n] of e)
-    t[o] = n;
+}), pe = (n, e) => {
+  const t = n.__vccOpts || n;
+  for (const [s, o] of e)
+    t[s] = o;
   return t;
-}, $t = /* @__PURE__ */ ue(Rt, [["__scopeId", "data-v-3b39dab5"]]), Bt = {
+}, Zt = /* @__PURE__ */ pe(Yt, [["__scopeId", "data-v-3b39dab5"]]), Qt = {
   key: 0,
   class: "flow-canvas-quick-add__tooltip"
-}, Lt = 5, Ot = /* @__PURE__ */ ce({
+}, Jt = 5, eo = /* @__PURE__ */ le({
   __name: "node-quick-add-popover",
   props: {
     node: {},
-    portPosition: {},
-    tooltipText: {}
+    portPosition: {}
   },
   emits: ["open", "close", "start-drag", "mouseenter", "mouseleave"],
-  setup(s, { expose: e, emit: t }) {
-    const o = s, n = t, i = L(), r = L(), l = L(!1), a = L(!1);
-    let f = null, d = !1, b = null;
-    function m(p) {
-      p.preventDefault(), p.stopPropagation(), f = { x: p.clientX, y: p.clientY }, d = !1, document.addEventListener("mousemove", g), document.addEventListener("mouseup", S);
+  setup(n, { expose: e, emit: t }) {
+    const s = n, o = t, i = O(), r = O(), l = O(!1), a = O(!1);
+    let p = null, c = !1, g = null;
+    function u(F) {
+      F.preventDefault(), F.stopPropagation(), p = { x: F.clientX, y: F.clientY }, c = !1, document.addEventListener("mousemove", y), document.addEventListener("mouseup", v);
     }
-    function g(p) {
-      if (!f) return;
-      const c = p.clientX - f.x, C = p.clientY - f.y;
-      Math.sqrt(c * c + C * C) >= Lt && (d = !0, k(), n("start-drag", o.node.id));
+    function y(F) {
+      if (!p) return;
+      const k = F.clientX - p.x, B = F.clientY - p.y;
+      Math.sqrt(k * k + B * B) >= Jt && (c = !0, C(), o("start-drag", s.node.id));
     }
-    function S() {
-      k(), d || w(), f = null, d = !1;
+    function v() {
+      C(), c || M(), p = null, c = !1;
     }
-    function k() {
-      document.removeEventListener("mousemove", g), document.removeEventListener("mouseup", S);
+    function C() {
+      document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", v);
     }
-    function w() {
-      a.value ? A() : x();
+    function M() {
+      a.value ? L() : D();
     }
-    function x() {
-      a.value = !0, n("open", o.node.id), requestAnimationFrame(() => {
-        document.addEventListener("mousedown", U);
+    function D() {
+      a.value = !0, o("open", s.node.id), requestAnimationFrame(() => {
+        document.addEventListener("mousedown", H);
       });
     }
-    function A() {
-      a.value = !1, n("close"), document.removeEventListener("mousedown", U);
+    function L() {
+      a.value = !1, o("close"), document.removeEventListener("mousedown", H);
     }
-    function U(p) {
-      const c = p.target;
-      i.value?.contains(c) || r.value?.contains(c) || A();
-    }
-    function O() {
-      a.value || n("mouseleave");
+    function H(F) {
+      const k = F.target;
+      i.value?.contains(k) || r.value?.contains(k) || L();
     }
     function K() {
-      b && (clearTimeout(b), b = null), n("mouseenter");
+      a.value || o("mouseleave");
+    }
+    function $() {
+      g && (clearTimeout(g), g = null), o("mouseenter");
     }
-    function Z() {
-      b = setTimeout(() => {
-        A(), n("mouseleave"), b = null;
+    function W() {
+      g = setTimeout(() => {
+        L(), o("mouseleave"), g = null;
       }, 150);
     }
-    return Re(() => {
-      k(), b && clearTimeout(b), document.removeEventListener("mousedown", U);
-    }), e({ closePopover: A }), (p, c) => (I(), N("div", {
+    return Se(() => {
+      C(), g && clearTimeout(g), document.removeEventListener("mousedown", H);
+    }), e({ closePopover: L }), (F, k) => (N(), A("div", {
       class: "flow-canvas-quick-add",
-      style: Ie({ left: `${s.portPosition.x}px`, top: `${s.portPosition.y}px` }),
-      onMouseenter: c[2] || (c[2] = (C) => n("mouseenter")),
-      onMouseleave: O,
-      onClick: c[3] || (c[3] = Ze(() => {
+      style: ve({ left: `${n.portPosition.x}px`, top: `${n.portPosition.y}px` }),
+      onMouseenter: k[2] || (k[2] = (B) => o("mouseenter")),
+      onMouseleave: K,
+      onClick: k[3] || (k[3] = nt(() => {
       }, ["stop"]))
     }, [
-      R("div", {
+      G("div", {
         ref_key: "btnRef",
         ref: i,
-        class: Q(["flow-canvas-quick-add__btn", { "is-hovered": l.value, "is-active": a.value }]),
-        onMouseenter: c[0] || (c[0] = (C) => l.value = !0),
-        onMouseleave: c[1] || (c[1] = (C) => l.value = !1),
-        onMousedown: m
-      }, [...c[4] || (c[4] = [
-        R("i", { class: "flow-canvas-icon canvas-zoom-add" }, null, -1)
+        class: te(["flow-canvas-quick-add__btn", { "is-hovered": l.value, "is-active": a.value }]),
+        onMouseenter: k[0] || (k[0] = (B) => l.value = !0),
+        onMouseleave: k[1] || (k[1] = (B) => l.value = !1),
+        onMousedown: u
+      }, [...k[4] || (k[4] = [
+        G("i", { class: "flow-canvas-icon canvas-zoom-add" }, null, -1)
       ])], 34),
-      l.value && !a.value ? (I(), N("div", Bt, [...c[5] || (c[5] = [
-        R("div", null, [
-          R("b", null, "点击"),
-          Oe(" 添加节点")
+      l.value && !a.value ? (N(), A("div", Qt, [...k[5] || (k[5] = [
+        G("div", null, [
+          G("b", null, "点击"),
+          Pe(" 添加节点")
         ], -1),
-        R("div", null, [
-          R("b", null, "拖拽"),
-          Oe(" 连接节点")
+        G("div", null, [
+          G("b", null, "拖拽"),
+          Pe(" 连接节点")
         ], -1)
-      ])])) : F("", !0),
-      Ve(We, { name: "flow-canvas-fade" }, {
+      ])])) : V("", !0),
+      Ze(Qe, { name: "flow-canvas-fade" }, {
         default: $e(() => [
-          a.value ? (I(), N("div", {
+          a.value ? (N(), A("div", {
             key: 0,
             ref_key: "popoverRef",
             ref: r,
             class: "flow-canvas-quick-add__popover",
-            onMouseenter: K,
-            onMouseleave: Z
+            onMouseenter: $,
+            onMouseleave: W
           }, [
-            me(p.$slots, "default", {}, () => [
-              c[6] || (c[6] = R("div", { class: "flow-canvas-quick-add__default-content" }, "节点快捷操作面板", -1))
+            we(F.$slots, "default", {}, () => [
+              k[6] || (k[6] = G("div", { class: "flow-canvas-quick-add__default-content" }, "节点快捷操作面板", -1))
             ], !0)
-          ], 544)) : F("", !0)
+          ], 544)) : V("", !0)
         ]),
         _: 3
       })
     ], 36));
   }
-}), zt = /* @__PURE__ */ ue(Ot, [["__scopeId", "data-v-deb5af25"]]), jt = { class: "flow-canvas-runtime-core__overlay" }, Gt = /* @__PURE__ */ ce({
+}), to = /* @__PURE__ */ pe(eo, [["__scopeId", "data-v-336cc3b4"]]), oo = { class: "flow-canvas-selection-actions__bar" }, no = /* @__PURE__ */ le({
+  __name: "selection-actions-toolbar",
+  props: {
+    position: {},
+    canDelete: { type: Boolean }
+  },
+  emits: ["action"],
+  setup(n, { emit: e }) {
+    const t = n, s = e, o = j(() => ({
+      left: `${t.position.x}px`,
+      top: `${t.position.y}px`,
+      transform: "translateX(-100%)"
+    }));
+    return (i, r) => (N(), A("div", {
+      class: "flow-canvas-selection-actions",
+      style: ve(o.value)
+    }, [
+      G("div", oo, [
+        G("i", {
+          class: te(["flow-canvas-icon canvas-shanchu flow-canvas-selection-actions__icon", { "is-disabled": !n.canDelete }]),
+          onClick: r[0] || (r[0] = (l) => n.canDelete && s("action", "delete"))
+        }, null, 2)
+      ])
+    ], 4));
+  }
+}), so = /* @__PURE__ */ pe(no, [["__scopeId", "data-v-25eb8b79"]]), io = { class: "flow-canvas-runtime-core__overlay" }, ro = /* @__PURE__ */ le({
   __name: "canvas-runtime-core",
   props: {
     editor: {},
     graphOptions: {},
     nodeActions: {},
-    quickAdd: {}
+    quickAdd: {},
+    getConnectionExcludedNodeIds: { type: Function }
   },
   emits: ["ui-event"],
-  setup(s, { emit: e }) {
-    const t = s, o = e, n = L(), i = L();
-    let r, l, a, f;
-    const d = Pt(), { hoveredNodeId: b, isDraggingNode: m } = d, g = d.enterOverlay, S = () => d.leaveOverlay(), k = L(null);
-    let w = null;
-    function x(v) {
-      return U(), J(v) ? (k.value = v, !0) : (k.value = null, !1);
-    }
-    function A() {
-      w && clearTimeout(w), w = setTimeout(() => {
-        k.value = null, w = null;
-      }, 150);
-    }
-    function U() {
-      w && (clearTimeout(w), w = null);
-    }
-    function O() {
-      U(), d.enterOverlay();
-    }
-    function K() {
-      A(), d.leaveOverlay();
+  setup(n, { emit: e }) {
+    const t = n, s = e, o = O(), i = O();
+    let r, l, a, p, c = null, g = null, u = null, y = null;
+    const v = Ut(), { hoveredNodeId: C, isDraggingNode: M } = v, D = v.enterOverlay, L = () => v.leaveOverlay(), H = O(0), K = O({ nodeIds: [], edgeIds: [] });
+    function $(x) {
+      const b = t.editor.api.value;
+      return b ? t.editor.schema.nodeTypes[x.type]?.getBehavior?.(x, {
+        api: b,
+        flowModel: t.editor.flowModel.value,
+        history: t.editor.history,
+        mode: t.editor.mode.value
+      }) ?? {} : {};
     }
-    let Z = null, p = null, c = null;
-    const C = L(0), z = H(
-      () => {
-        if (C.value, !t.editor.api.value) return [];
-        const v = t.editor.flowModel.value, h = t.editor.api.value.overlay, u = [];
-        for (const [E, D] of Object.entries(v.nodes)) {
-          const P = t.editor._pluginManager.collectNodeDecorations(D);
-          if (!P?.badge) continue;
-          const T = h.getNodeScreenRect(E);
-          T && u.push({
-            nodeId: E,
-            x: T.x + T.width - 4,
-            y: T.y - 8,
-            badge: P.badge
-          });
-        }
-        return u;
-      }
-    ), _ = H(() => ({
+    const W = j(() => t.editor.mode.value === "edit" && t.editor.selectionMode.value), F = j(() => ({
       showDebug: !1,
       showDelete: !0,
       showCopy: !0,
@@ -1700,291 +2119,188 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
       showDisconnect: !0,
       insertGap: 100,
       ...t.nodeActions
-    })), j = H(() => {
-      C.value;
-      const v = b.value;
-      if (!v || m.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
-      const h = t.editor.flowModel.value, u = h.nodes[v];
-      if (!u) return null;
-      const E = t.editor.api.value.overlay.getNodeScreenRect(v);
-      if (!E) return null;
-      const P = t.editor.schema.nodeTypes[u.type]?.getBehavior?.(u, {
-        api: t.editor.api.value,
-        flowModel: h,
-        history: t.editor.history,
-        mode: t.editor.mode.value
-      }) ?? {};
-      return P.showActions === !1 ? null : {
-        node: u,
-        position: { x: E.x + E.width, y: E.y + E.height + 4 },
-        behavior: P
+    })), k = j(
+      () => {
+        if (H.value, !t.editor.api.value) return [];
+        const x = t.editor.flowModel.value, b = t.editor.api.value.overlay, _ = [];
+        for (const [q, J] of Object.entries(x.nodes)) {
+          const ue = t.editor._pluginManager.collectNodeDecorations(J);
+          if (!ue?.badge) continue;
+          const ie = b.getNodeScreenRect(q);
+          ie && _.push({
+            nodeId: q,
+            x: ie.x + ie.width - 4,
+            y: ie.y - 8,
+            badge: ue.badge
+          });
+        }
+        return _;
+      }
+    ), B = j(() => {
+      H.value;
+      const x = C.value;
+      if (!x || M.value || !t.editor.api.value || t.editor.mode.value !== "edit" || W.value)
+        return null;
+      const _ = t.editor.flowModel.value.nodes[x];
+      if (!_) return null;
+      const q = t.editor.api.value.overlay.getNodeScreenRect(x);
+      if (!q) return null;
+      const J = $(_);
+      return J.showActions === !1 ? null : {
+        node: _,
+        position: { x: q.x + q.width, y: q.y + q.height + 4 },
+        behavior: J
       };
-    }), G = H(() => ({
-      enabled: !0,
-      tooltipText: "",
-      portGroup: "right",
-      ...t.quickAdd
-    })), q = H(() => {
-      if (C.value, !G.value.enabled) return null;
-      const v = k.value;
-      if (!v || m.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
-      const h = t.editor.flowModel.value, u = h.nodes[v];
-      if (!u) return null;
-      const D = t.editor.schema.nodeTypes[u.type]?.getBehavior?.(u, {
-        api: t.editor.api.value,
-        flowModel: h,
-        history: t.editor.history,
-        mode: t.editor.mode.value
-      }) ?? {};
-      if (D.quickAddEnabled === !1) return null;
-      const P = te(u);
-      return P ? {
-        node: u,
-        portId: P.portId,
-        portGroup: P.portGroup,
-        portPosition: P.portPosition,
-        behavior: D
-      } : null;
-    }), X = L();
-    function ye(v) {
-      const h = q.value;
-      h && o("ui-event", {
-        type: "node.quick-add",
-        nodeId: v,
-        position: h.portPosition
-      });
-    }
-    function se(v) {
-      const h = t.editor.api.value;
-      if (!h) return;
-      const E = t.editor.flowModel.value.nodes[v];
-      if (!E) return;
-      const D = te(E);
-      D && h.startConnection(v, D.portId);
-    }
-    function ae(v, h) {
-      const u = t.editor.api.value;
-      if (!u) return;
-      const E = h.id || $(), D = { ...h, id: E }, P = t.editor.flowModel.value.nodes[v];
-      if (!P) return;
-      u.insertNodeToRight(v, D, {
-        autoWireEdges: !0,
-        direction: fe(P),
-        gap: _.value.insertGap,
-        source: "user:quick-add",
-        label: "快捷插入节点"
-      }).status === "applied" && o("ui-event", { type: "node.action.quick-insert", sourceNodeId: v, newNodeId: E }), X.value?.closePopover();
-    }
-    function ie(v) {
+    }), h = j(() => {
+      if (H.value, !t.editor.api.value || t.editor.mode.value !== "edit") return null;
+      const x = K.value;
+      if (x.nodeIds.length + x.edgeIds.length <= 1) return null;
+      const b = t.editor.api.value.getSelectionBounds(x);
+      if (!b) return null;
+      const _ = ot(x, t.editor.flowModel.value, $);
       return {
-        id: $(),
-        type: v.type,
-        label: v.label,
-        ports: v.ports ? JSON.parse(JSON.stringify(v.ports)) : void 0,
-        payload: v.payload ? JSON.parse(JSON.stringify(v.payload)) : void 0,
-        extensions: v.extensions ? JSON.parse(JSON.stringify(v.extensions)) : void 0
+        position: { x: b.x + b.width, y: b.y + b.height + 4 },
+        canDelete: _.nodeIds.length > 0 || _.edgeIds.length > 0
+      };
+    }), d = O(), f = jt({
+      editor: t.editor,
+      quickAddProp: j(() => t.quickAdd),
+      isDraggingNode: M,
+      nodeHover: v,
+      isSelectionModeActive: W,
+      viewportVersion: H,
+      getNodeBehavior: $,
+      getInsertGap: () => F.value.insertGap,
+      closePopover: () => d.value?.closePopover()
+    }), I = f.data, S = f.handleOpen, w = f.handleClose, U = f.handleStartDrag, oe = f.handleOverlayEnter, E = f.handleOverlayLeave, T = f.handleInsert, m = Wt(t.editor);
+    function P(x, b) {
+      m.handleNodeAction(
+        x,
+        b,
+        F.value.insertGap
+      ) && (C.value = null);
+    }
+    function z(x) {
+      x === "delete" && m.deleteSelection(K.value);
+    }
+    function Y(x) {
+      if (t.editor.mode.value !== "edit") return;
+      t.editor._pluginManager.dispatchKeyboardShortcut(x) && (x.preventDefault(), x.stopPropagation());
+    }
+    function X(x, b) {
+      const _ = r, q = (J) => {
+        const ue = _.isRubberbandEnabled?.() ?? !1;
+        ue && _.disableRubberband?.(), J ? r.enablePanning() : r.disablePanning(), ue && _.enableRubberband?.();
       };
+      x ? (_.enableSelection?.(), b ? (v.reset(), f.quickAddNodeId.value = null, f.quickAddPopoverOpen.value = !1, c?.remove(), q(!1), _.enableRubberband?.()) : (_.disableRubberband?.(), q(!0))) : (_.disableRubberband?.(), q(!0), _.disableSelection?.());
     }
-    function xe(v, h) {
-      const u = t.editor, E = u.api.value;
-      switch (v) {
-        case "delete": {
-          u.executeCommand({
-            id: $(),
-            source: "user:toolbar",
-            label: "删除节点",
-            timestamp: Date.now(),
-            commands: [{ type: "node.remove", nodeId: h }]
-          }), o("ui-event", { type: "node.action.delete", nodeId: h }), b.value = null;
-          break;
-        }
-        case "copy": {
-          if (!E) break;
-          const D = u.flowModel.value.nodes[h];
-          if (!D) break;
-          const P = ie(D);
-          E.insertNodeToRight(h, P, {
-            autoWireEdges: !1,
-            gap: _.value.insertGap,
-            label: "复制节点"
-          }), o("ui-event", { type: "node.action.copy", sourceNodeId: h, newNodeId: P.id });
-          break;
-        }
-        case "copy-insert": {
-          if (!E) break;
-          const D = u.flowModel.value.nodes[h];
-          if (!D) break;
-          const P = ie(D);
-          E.insertNodeToRight(h, P, {
-            autoWireEdges: !0,
-            gap: _.value.insertGap,
-            label: "复制并插入节点"
-          }), o("ui-event", { type: "node.action.copy-insert", sourceNodeId: h, newNodeId: P.id });
-          break;
-        }
-        case "disconnect": {
-          const D = u.flowModel.value, P = Object.entries(D.edges).filter(([, T]) => {
-            const W = T;
-            return W.source.nodeId === h || W.target.nodeId === h;
-          }).map(([T]) => T);
-          if (P.length === 0) break;
-          u.executeCommand({
-            id: $(),
-            source: "user:toolbar",
-            label: "断开连线",
-            timestamp: Date.now(),
-            commands: P.map((T) => ({ type: "edge.remove", edgeId: T }))
-          }), o("ui-event", { type: "node.action.disconnect", nodeId: h, edgeIds: P });
-          break;
+    function ne(x) {
+      r.on("node:move", ({ node: b }) => {
+        M.value = !0;
+        const _ = t.editor.flowModel.value.nodes[b.id];
+        _ && $(_).bringToFrontOnDrag === !1 || b.toFront?.();
+      }), r.on("node:moved", () => {
+        M.value = !1;
+      }), r.on("node:mouseenter", ({ node: b }) => {
+        if (W.value) {
+          C.value = null, f.quickAddNodeId.value = null, x.hideNodePorts(b);
+          return;
         }
-        case "debug": {
-          o("ui-event", { type: "node.action.debug", nodeId: h });
-          break;
+        v.enter(b.id);
+        const _ = t.editor.flowModel.value.nodes[b.id];
+        if (_ && $(_).showPorts === !1) {
+          f.mergedConfig.value.enabled && f.enter(b.id);
+          return;
         }
-      }
-    }
-    function J(v) {
-      if (!G.value.enabled || t.editor.mode.value !== "edit") return !1;
-      const h = t.editor.flowModel.value, u = h.nodes[v];
-      return !u || (t.editor.schema.nodeTypes[u.type]?.getBehavior?.(u, {
-        api: t.editor.api.value,
-        flowModel: h,
-        history: t.editor.history,
-        mode: t.editor.mode.value
-      }) ?? {}).quickAddEnabled === !1 ? !1 : !!te(u);
-    }
-    function ke(v) {
-      const h = t.editor.schema.nodeTypes[v.type];
-      return Be(v, h?.getPorts);
-    }
-    function ee(v) {
-      return v === "top" || v === "right" || v === "bottom" || v === "left";
-    }
-    function De(v, h) {
-      const u = G.value.getPort?.(v, h);
-      if (!u) return null;
-      const E = typeof u == "string" ? u : u.id;
-      return h.find((D) => D.id === E) ?? null;
-    }
-    function le(v, h) {
-      const u = t.editor.api.value?.overlay.getNodeScreenRect(v);
-      if (!u) return null;
-      switch (h) {
-        case "top":
-          return { x: u.x + u.width / 2, y: u.y };
-        case "bottom":
-          return { x: u.x + u.width / 2, y: u.y + u.height };
-        case "left":
-          return { x: u.x, y: u.y + u.height / 2 };
-        case "right":
-          return { x: u.x + u.width, y: u.y + u.height / 2 };
-        default:
-          return null;
-      }
-    }
-    function V(v, h, u) {
-      const E = r.getCellById(v);
-      if (E?.isNode()) {
-        const D = E, P = r.findViewByCell(D), T = P?.findPortElem(h, "circle") ?? P?.findPortElem(h);
-        if (T) {
-          const W = r.container.getBoundingClientRect(), re = T.getBoundingClientRect();
-          return {
-            x: re.left - W.left + re.width / 2,
-            y: re.top - W.top + re.height / 2
-          };
+        f.mergedConfig.value.enabled && f.enter(b.id) || x.showNodePorts(b);
+      }), r.on("node:mouseleave", ({ node: b }) => {
+        if (W.value) {
+          x.hideNodePorts(b);
+          return;
         }
-      }
-      return le(v, u);
-    }
-    function te(v) {
-      const h = ke(v), u = De(v, h) ?? h.find((D) => D.group === G.value.portGroup) ?? null;
-      if (!u) return null;
-      const E = V(v.id, u.id, u.group);
-      return E ? {
-        portId: u.id,
-        portGroup: u.group,
-        portPosition: E
-      } : null;
-    }
-    function fe(v) {
-      const h = te(v), u = G.value.insertDirection;
-      if (typeof u == "function") {
-        const E = u(
-          v,
-          h ? { id: h.portId, group: h.portGroup } : null
-        );
-        if (E) return E;
-      } else if (u)
-        return u;
-      return h && ee(h.portGroup) ? h.portGroup : ee(G.value.portGroup) ? G.value.portGroup : "right";
-    }
-    function oe(v) {
-      if (t.editor.mode.value !== "edit") return;
-      t.editor._pluginManager.dispatchKeyboardShortcut(v) && (v.preventDefault(), v.stopPropagation());
-    }
-    function pe() {
-      return {
-        refX: 0,
-        children: [
-          {
-            tagName: "path",
-            d: "M -16 -5 L -8 0 L -16 5 Z",
-            transform: "rotate(0)"
-          },
-          {
-            tagName: "circle",
-            cx: 0,
-            cy: 0,
-            r: 8,
-            fill: "#3a84ff",
-            stroke: "#3a84ff",
-            transform: "rotate(0)"
-          }
-        ]
-      };
+        const _ = t.editor.flowModel.value.nodes[b.id];
+        let q = 100;
+        _ && $(_).actionsOffset && (q = 300), v.leave(q), f.mergedConfig.value.enabled ? f.quickAddNodeId.value === b.id && !f.quickAddPopoverOpen.value ? f.leave() : f.quickAddNodeId.value !== b.id && x.hideNodePorts(b) : x.hideNodePorts(b);
+      });
     }
-    function Pe(v) {
-      const h = t.editor.schema.defaultEdgeType ?? "default", u = t.editor.schema.edgeTypes?.[h], E = {
-        zIndex: -1,
-        attrs: {
-          line: {
-            stroke: "#abb5cc",
-            strokeWidth: 2,
-            targetMarker: { name: "block", width: 8, height: 8 }
+    function Q(x) {
+      r.on("edge:added", ({ edge: b }) => {
+        let _;
+        if (t.getConnectionExcludedNodeIds && !b.getTargetCell()) {
+          const q = b.getSourceCell();
+          if (q) {
+            const J = t.getConnectionExcludedNodeIds(q.id);
+            _ = J instanceof Set ? J : new Set(J);
           }
         }
-      };
-      u?.router && (E.router = typeof u.router == "string" ? { name: u.router } : u.router), u?.connector && (E.connector = typeof u.connector == "string" ? { name: u.connector } : u.connector), u?.x6EdgeConfig && Object.assign(E, u.x6EdgeConfig);
-      const D = E.attrs ?? {}, P = D.line ?? {};
-      return E.attrs = {
-        ...D,
-        line: {
-          ...P,
-          targetMarker: pe()
+        x.handleEdgeAdded(b, _);
+      }), r.on("edge:connected", () => {
+        x.handleEdgeConnected();
+      }), r.on("edge:removed", ({ edge: b }) => {
+        x.handleEdgeRemoved(b.id), c.handleEdgeRemoved(b.id);
+      }), r.on("edge:mouseenter", ({ edge: b, e: _ }) => {
+        l.setHoveredEdge(b.id), l.refreshEdgeStyles(), t.editor.mode.value === "edit" && !W.value && x.canShowEdgeTool() && c.show(b.id, _);
+      }), r.on("edge:mouseleave", () => {
+        l.setHoveredEdge(null), l.refreshEdgeStyles(), c.remove();
+      }), r.on("edge:click", ({ edge: b, e: _ }) => {
+        _.target?.closest?.(".flow-canvas-edge-delete-tool") && t.editor.mode.value === "edit" && (c.remove(), t.editor.executeCommand({
+          id: Z(),
+          source: "user:toolbar",
+          label: "删除连线",
+          timestamp: Date.now(),
+          commands: [{ type: "edge.remove", edgeId: b.id }]
+        }));
+      }), g = (b) => c.move(b), r.container.addEventListener("mousemove", g);
+    }
+    function de() {
+      u = (x) => {
+        if (!C.value && !f.quickAddNodeId.value) return;
+        const b = x.target;
+        if (b?.closest?.(".x6-node") || b?.closest?.(".flow-canvas-node-actions") || b?.closest?.(".flow-canvas-quick-add")) {
+          v.cancelLeave(), f.cancelLeave();
+          return;
         }
-      }, v.createEdge(E);
+        v.leave(180), f.quickAddPopoverOpen.value || f.leave();
+      }, o.value?.addEventListener("mousemove", u), y = () => {
+        v.reset(), f.quickAddPopoverOpen.value || (f.quickAddNodeId.value = null);
+      }, o.value?.addEventListener("mouseleave", y), o.value?.addEventListener("keydown", Y);
+    }
+    function se() {
+      fe(
+        () => t.editor.flowModel.value,
+        (x) => l.syncFlowModel(x)
+      ), fe(
+        [() => t.editor.mode.value, () => t.editor.selectionMode.value],
+        ([x, b]) => {
+          X(x === "edit", b);
+        },
+        { immediate: !0 }
+      );
     }
     return Je(() => {
       if (!i.value) return;
-      const v = /* @__PURE__ */ new Set(["model", "container"]), h = {};
+      const x = /* @__PURE__ */ new Set(["model", "container"]), b = {};
       if (t.graphOptions)
-        for (const [y, M] of Object.entries(t.graphOptions)) {
-          if (v.has(y)) {
-            console.warn(`[flow-canvas] graphOptions.${y} is managed by the engine and will be ignored`);
+        for (const [R, ge] of Object.entries(t.graphOptions)) {
+          if (x.has(R)) {
+            console.warn(`[flow-canvas] graphOptions.${R} is managed by the engine and will be ignored`);
             continue;
           }
-          h[y] = M;
+          b[R] = ge;
         }
-      r = new nt({
+      r = new dt({
         container: i.value,
         autoResize: !0,
         background: { color: "#edf2fc" },
         grid: { visible: !0, size: 20, type: "dot" },
+        highlighting: {
+          magnetAdsorbed: { name: "className", args: { className: "flow-canvas-magnet-adsorbed" } }
+        },
         panning: { enabled: !0 },
         mousewheel: { enabled: !0, modifiers: ["ctrl", "meta"] },
         interacting: {
-          nodeMovable(y) {
-            return y.cell.getProp("draggable") !== !1;
+          nodeMovable(R) {
+            return R.cell.getProp("draggable") !== !1;
           }
         },
         connecting: {
@@ -1998,16 +2314,16 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
           connectionPoint: "anchor",
           snap: { radius: 30 },
           createEdge() {
-            return Pe(this);
+            return Xt(this, t.editor.schema);
           }
         },
-        ...h
-      }), a = new It(), l = new Ct(
+        ...b
+      }), a = new Lt(), l = new Rt(
         r,
         t.editor.schema,
         a,
-        (y) => t.editor._pluginManager.collectNodeDecorations(y),
-        (y) => t.editor._pluginManager.collectEdgeDecorations(y),
+        (R) => t.editor._pluginManager.collectNodeDecorations(R),
+        (R) => t.editor._pluginManager.collectEdgeDecorations(R),
         () => t.editor.api.value ? {
           api: t.editor.api.value,
           flowModel: t.editor.flowModel.value,
@@ -2015,263 +2331,194 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
           mode: t.editor.mode.value
         } : null
       );
-      const u = Nt(r), E = Dt({
+      const _ = Ot(r), q = qt({
         graph: r,
-        overlayManager: u,
-        executeCommand: (y) => t.editor.executeCommand(y),
+        overlayManager: _,
+        executeCommand: (R) => t.editor.executeCommand(R),
         schema: t.editor.schema,
         flowModel: t.editor.flowModel,
+        getNodeBehavior: $,
+        idGenerator: t.editor.idGenerator,
         defaultInsertGap: t.nodeActions?.insertGap,
-        getContextMenuItems: (y) => t.editor._pluginManager.collectContextMenuItems(y),
-        onHighlightChange: (y, M) => {
-          l.setHighlightedNodes(y), l.setHighlightedEdges(M), l.refreshNodeHighlights(), l.refreshEdgeStyles();
+        getContextMenuItems: (R) => t.editor._pluginManager.collectContextMenuItems(R),
+        onHighlightChange: (R, ge) => {
+          l.setHighlightedNodes(R), l.setHighlightedEdges(ge), l.refreshNodeHighlights(), l.refreshEdgeStyles();
         },
-        resolveNodeShape: (y) => {
-          const M = t.editor.schema.nodeTypes[y];
-          if (!M) return null;
-          const B = a.registerNodeType(y, M.component), ne = M.getSize({ id: "", type: y, position: { x: 0, y: 0 } });
-          return { shapeName: B, width: ne.width, height: ne.height };
+        resolveNodeShape: (R) => {
+          const ge = t.editor.schema.nodeTypes[R];
+          if (!ge) return null;
+          const ke = a.registerNodeType(R, ge.component), be = ge.getSize({ id: "", type: R, position: { x: 0, y: 0 } });
+          return { shapeName: ke, width: be.width, height: be.height };
         }
       });
-      t.editor.api.value = E;
-      const D = {
+      t.editor.api.value = q;
+      const J = {
         flowModel: t.editor.flowModel,
         history: t.editor.history,
         schema: t.editor.schema,
         mode: t.editor.mode,
+        idGenerator: t.editor.idGenerator,
         executeCommand: t.editor.executeCommand,
-        api: E,
-        overlay: u,
+        selectionMode: t.editor.selectionMode,
+        api: q,
+        overlay: _,
         graph: r
       };
-      t.editor._pluginManager.attachRuntime(D);
-      const P = t.editor._pluginManager.collectExtendedApi();
-      Object.assign(t.editor.extendedApi, P), f = new Mt(
+      t.editor._pluginManager.attachRuntime(J);
+      const ue = t.editor._pluginManager.collectExtendedApi();
+      Object.assign(t.editor.extendedApi, ue), t.editor._emitUiEvent = (R) => {
+        t.editor._pluginManager.dispatchUiEvent(R), s("ui-event", R);
+      }, p = new $t(
         r,
-        (y) => {
-          (y.type === "node.click" || y.type === "node.dblclick" || y.type === "node.contextmenu") && d.enter(y.nodeId), t.editor._pluginManager.dispatchUiEvent(y), o("ui-event", y);
+        (R) => {
+          (R.type === "node.click" || R.type === "node.dblclick" || R.type === "node.contextmenu") && v.enter(R.nodeId), t.editor._emitUiEvent(R);
         },
-        (y) => {
+        (R) => {
           if (l.isSyncing) return;
-          if (t.editor.executeCommand(y).status !== "applied") {
-            for (const B of y.commands)
-              if (B.type === "edge.add") {
-                const ne = r.getCellById(B.edge.id);
-                ne && r.removeCell(ne);
+          if (t.editor.executeCommand(R).status !== "applied") {
+            for (const ke of R.commands)
+              if (ke.type === "edge.add") {
+                const be = r.getCellById(ke.edge.id);
+                be && r.removeCell(be);
               }
           }
         },
-        t.editor.flowModel
-      ), Z = _t(r);
-      const T = At(r), W = r, re = (y) => {
-        const M = W.isRubberbandEnabled?.() ?? !1;
-        M && W.disableRubberband?.(), y ? r.enablePanning() : r.disablePanning(), M && W.enableRubberband?.();
-      }, _e = () => {
-        C.value++;
-      };
-      r.on("translate", _e), r.on("scale", _e), r.on("resize", _e), r.on("node:move", () => {
-        m.value = !0;
-      }), r.on("node:moved", () => {
-        m.value = !1;
-      }), r.on("node:mouseenter", ({ node: y }) => {
-        d.enter(y.id), G.value.enabled && x(y.id) || T.showNodePorts(y);
-      }), r.on("node:mouseleave", ({ node: y }) => {
-        const M = t.editor.flowModel.value.nodes[y.id];
-        let B = 100;
-        M && t.editor.api.value && t.editor.schema.nodeTypes[M.type]?.getBehavior?.(M, {
-          api: t.editor.api.value,
-          flowModel: t.editor.flowModel.value,
-          history: t.editor.history,
-          mode: t.editor.mode.value
-        })?.actionsOffset && (B = 300), d.leave(B), G.value.enabled && k.value === y.id ? A() : T.hideNodePorts(y);
-      });
-      function Xe(y) {
-        const M = r.getCellById(y);
-        if (!M?.isNode()) return;
-        const B = M, ne = t.editor.flowModel.value.nodes[y];
-        if (!ne) return;
-        const Ae = te(ne), Ke = !m.value && !!Ae && J(y);
-        for (const Le of B.getPorts()) {
-          const Ye = Ke && Le.id === Ae?.portId ? "hidden" : "visible";
-          B.setPortProp(Le.id, "attrs/circle/visibility", Ye);
-        }
-      }
-      ge(
-        [k, m],
-        ([y], [M]) => {
-          if (M && M !== y) {
-            const B = r.getCellById(M);
-            B?.isNode() && T.hideNodePorts(B);
-          }
-          y && Xe(y);
-        },
-        { flush: "sync" }
-      ), r.on("edge:added", ({ edge: y }) => {
-        T.handleEdgeAdded(y);
-      }), r.on("edge:connected", () => {
-        T.handleEdgeConnected();
-      }), r.on("edge:removed", ({ edge: y }) => {
-        T.handleEdgeRemoved(y.id), Z.handleEdgeRemoved(y.id);
-      }), r.on("selection:changed", () => {
-        const y = r.getSelectedCells?.() ?? [], M = {
-          nodeIds: y.filter((B) => B.isNode()).map((B) => B.id),
-          edgeIds: y.filter((B) => B.isEdge()).map((B) => B.id)
-        };
-        t.editor._pluginManager.dispatchSelectionChange(M), o("ui-event", {
+        t.editor.flowModel,
+        t.editor.idGenerator
+      ), c = zt(r);
+      const ie = Ft(r);
+      f.attachRuntime(r, (R) => ie.hideNodePorts(R)), ne(ie), Q(ie), r.on("selection:changed", () => {
+        const R = tt(r.getSelectedCells?.() ?? []);
+        K.value = R, t.editor._pluginManager.dispatchSelectionChange(R), s("ui-event", {
           type: "selection.change",
-          nodeIds: M.nodeIds,
-          edgeIds: M.edgeIds
-        }), l.refreshEdgeStyles();
-      }), r.on("edge:mouseenter", ({ edge: y, e: M }) => {
-        l.setHoveredEdge(y.id), l.refreshEdgeStyles(), t.editor.mode.value === "edit" && T.canShowEdgeTool() && Z.show(y.id, M);
-      }), p = (y) => Z.move(y), r.container.addEventListener("mousemove", p), r.on("edge:mouseleave", () => {
-        l.setHoveredEdge(null), l.refreshEdgeStyles(), Z.remove();
-      }), r.on("edge:click", ({ edge: y, e: M }) => {
-        M.target?.closest?.(".flow-canvas-edge-delete-tool") && t.editor.mode.value === "edit" && (Z.remove(), t.editor.executeCommand({
-          id: $(),
-          source: "user:toolbar",
-          label: "删除连线",
-          timestamp: Date.now(),
-          commands: [{ type: "edge.remove", edgeId: y.id }]
-        }));
-      }), n.value?.addEventListener("keydown", oe), l.syncFlowModel(t.editor.flowModel.value), ge(
-        () => t.editor.flowModel.value,
-        (y) => l.syncFlowModel(y)
-      ), ge(
-        () => t.editor.selectionMode.value,
-        (y) => {
-          if (c?.(), c = null, y) {
-            re(!1), W.enableRubberband?.();
-            const M = () => {
-              r.container.removeEventListener("mouseup", M), c = null, setTimeout(() => {
-                t.editor.selectionMode.value && t.editor.setSelectionMode(!1);
-              }, 50);
-            };
-            r.container.addEventListener("mouseup", M), c = () => r.container.removeEventListener("mouseup", M);
-          } else
-            W.disableRubberband?.(), re(!0);
-        }
-      ), ge(
-        () => t.editor.mode.value,
-        (y) => {
-          const M = y === "edit";
-          re(!0), M ? W.enableSelection?.() : W.disableSelection?.();
-        }
-      );
-    }), Re(() => {
-      d.cleanup(), w && clearTimeout(w), Z?.remove(), c?.(), p && r?.container?.removeEventListener("mousemove", p), n.value?.removeEventListener("keydown", oe), t.editor._pluginManager.detachRuntime(), t.editor.api.value = null;
-      for (const v of Object.keys(t.editor.extendedApi))
-        delete t.editor.extendedApi[v];
-      f?.dispose(), l?.dispose(), a?.dispose(), r?.dispose();
-    }), (v, h) => (I(), N("div", {
+          nodeIds: R.nodeIds,
+          edgeIds: R.edgeIds
+        }), l.refreshNodeHighlights(), l.refreshEdgeStyles();
+      });
+      const ee = () => {
+        H.value++;
+      };
+      r.on("translate", ee), r.on("scale", ee), r.on("resize", ee), de(), l.syncFlowModel(t.editor.flowModel.value), se();
+    }), Se(() => {
+      v.cleanup(), f.cleanup(), c?.remove(), g && r?.container?.removeEventListener("mousemove", g), u && o.value?.removeEventListener("mousemove", u), y && o.value?.removeEventListener("mouseleave", y), o.value?.removeEventListener("keydown", Y), t.editor._pluginManager.detachRuntime(), t.editor.api.value = null;
+      for (const x of Object.keys(t.editor.extendedApi))
+        delete t.editor.extendedApi[x];
+      p?.dispose(), l?.dispose(), a?.dispose(), r?.dispose();
+    }), (x, b) => (N(), A("div", {
       ref_key: "rootRef",
-      ref: n,
-      class: "flow-canvas-runtime-core",
+      ref: o,
+      class: te(["flow-canvas-runtime-core", { "flow-canvas-runtime-core--selection-mode": W.value }]),
       tabindex: "0"
     }, [
-      R("div", {
+      G("div", {
         ref_key: "containerRef",
         ref: i,
         class: "flow-canvas-runtime-core__graph"
       }, null, 512),
-      R("div", jt, [
-        (I(!0), N(de, null, Ee(z.value, (u) => (I(), N("div", {
-          key: `badge-${u.nodeId}`,
+      G("div", io, [
+        (N(!0), A(he, null, xe(k.value, (_) => (N(), A("div", {
+          key: `badge-${_.nodeId}`,
           class: "flow-canvas-runtime-core__badge",
-          style: Ie({ left: `${u.x}px`, top: `${u.y}px`, backgroundColor: u.badge.color })
-        }, he(u.badge.text), 5))), 128)),
-        q.value ? (I(), Ce(zt, {
+          style: ve({ left: `${_.x}px`, top: `${_.y}px`, backgroundColor: _.badge.color })
+        }, ce(_.badge.text), 5))), 128)),
+        re(I) ? (N(), ye(to, {
           key: 0,
           ref_key: "quickAddPopoverRef",
-          ref: X,
-          node: q.value.node,
-          "port-position": q.value.portPosition,
-          "tooltip-text": G.value.tooltipText,
-          onOpen: ye,
-          onStartDrag: se,
-          onMouseenter: O,
-          onMouseleave: K
+          ref: d,
+          node: re(I).node,
+          "port-position": re(I).portPosition,
+          onOpen: re(S),
+          onClose: re(w),
+          onStartDrag: re(U),
+          onMouseenter: re(oe),
+          onMouseleave: re(E)
         }, {
           default: $e(() => [
-            me(v.$slots, "quick-add-panel", {
-              node: q.value.node,
-              api: s.editor.api.value,
-              insertNodeToRight: (u) => ae(q.value.node.id, u),
-              closePopover: () => X.value?.closePopover()
+            we(x.$slots, "quick-add-panel", {
+              node: re(I).node,
+              api: n.editor.api.value,
+              insertNodeToRight: (_) => re(T)(re(I).node.id, _),
+              closePopover: () => d.value?.closePopover()
             }, void 0, !0)
           ]),
           _: 3
-        }, 8, ["node", "port-position", "tooltip-text"])) : F("", !0),
-        j.value ? (I(), Ce($t, {
+        }, 8, ["node", "port-position", "onOpen", "onClose", "onStartDrag", "onMouseenter", "onMouseleave"])) : V("", !0),
+        B.value ? (N(), ye(Zt, {
           key: 1,
-          node: j.value.node,
-          position: j.value.position,
-          config: _.value,
-          behavior: j.value.behavior,
-          "actions-offset": j.value.behavior.actionsOffset,
-          onAction: xe,
-          onMouseenter: et(g),
-          onMouseleave: S
-        }, null, 8, ["node", "position", "config", "behavior", "actions-offset", "onMouseenter"])) : F("", !0)
+          node: B.value.node,
+          position: B.value.position,
+          config: F.value,
+          behavior: B.value.behavior,
+          "actions-offset": B.value.behavior.actionsOffset,
+          onAction: P,
+          onMouseenter: re(D),
+          onMouseleave: L
+        }, null, 8, ["node", "position", "config", "behavior", "actions-offset", "onMouseenter"])) : V("", !0),
+        h.value ? (N(), ye(so, {
+          key: 2,
+          position: h.value.position,
+          "can-delete": h.value.canDelete,
+          onAction: z
+        }, null, 8, ["position", "can-delete"])) : V("", !0)
       ])
-    ], 512));
+    ], 2));
   }
-}), wo = /* @__PURE__ */ ue(Gt, [["__scopeId", "data-v-7e8e2569"]]), Ht = { class: "flow-canvas-node-palette" }, Ft = ["data-node-type"], qt = { class: "flow-canvas-node-palette__item-label" }, Ut = /* @__PURE__ */ ce({
+}), ln = /* @__PURE__ */ pe(ro, [["__scopeId", "data-v-84f96992"]]), ao = { class: "flow-canvas-node-palette" }, lo = ["data-node-type"], co = { class: "flow-canvas-node-palette__item-label" }, uo = /* @__PURE__ */ le({
   __name: "canvas-node-palette",
   props: {
     editor: {},
     items: {}
   },
-  setup(s) {
-    const e = s, t = L(), o = H(() => e.items ? e.items : Object.keys(e.editor.schema.nodeTypes).map((n) => ({
-      type: n,
-      label: n.charAt(0).toUpperCase() + n.slice(1)
+  setup(n) {
+    const e = n, t = O(), s = j(() => e.items ? e.items : Object.keys(e.editor.schema.nodeTypes).map((o) => ({
+      type: o,
+      label: o.charAt(0).toUpperCase() + o.slice(1)
     })));
-    return ge(
-      [() => e.editor.api.value, o, t],
-      ([n, i, r], l, a) => {
-        if (!n || !r) return;
-        const f = [];
-        for (const d of i) {
-          const b = r.querySelector(`[data-node-type="${d.type}"]`);
-          if (!b) continue;
-          const m = n.registerDndSource(b, () => ({
-            id: $(),
-            type: d.type,
-            label: d.label,
+    return fe(
+      [() => e.editor.api.value, s, t],
+      ([o, i, r], l, a) => {
+        if (!o || !r) return;
+        const p = [];
+        for (const c of i) {
+          const g = r.querySelector(`[data-node-type="${c.type}"]`);
+          if (!g) continue;
+          const u = o.registerDndSource(g, () => ({
+            id: Z(),
+            type: c.type,
+            label: c.label,
             position: { x: 0, y: 0 }
           }));
-          f.push(m);
+          p.push(u);
         }
         a(() => {
-          for (const d of f) d();
+          for (const c of p) c();
         });
       },
       { flush: "post" }
-    ), (n, i) => (I(), N("div", Ht, [
-      R("div", {
+    ), (o, i) => (N(), A("div", ao, [
+      G("div", {
         ref_key: "listRef",
         ref: t,
         class: "flow-canvas-node-palette__list"
       }, [
-        (I(!0), N(de, null, Ee(o.value, (r) => (I(), N("div", {
+        (N(!0), A(he, null, xe(s.value, (r) => (N(), A("div", {
           key: r.type,
           class: "flow-canvas-node-palette__item",
           "data-node-type": r.type
         }, [
-          r.icon ? (I(), N("i", {
+          r.icon ? (N(), A("i", {
             key: 0,
-            class: Q([r.icon, "flow-canvas-node-palette__item-icon"])
-          }, null, 2)) : F("", !0),
-          R("span", qt, he(r.label), 1)
-        ], 8, Ft))), 128))
+            class: te([r.icon, "flow-canvas-node-palette__item-icon"])
+          }, null, 2)) : V("", !0),
+          G("span", co, ce(r.label), 1)
+        ], 8, lo))), 128))
       ], 512)
     ]));
   }
-}), Vt = /* @__PURE__ */ ue(Ut, [["__scopeId", "data-v-300314b7"]]), Wt = { class: "flow-canvas-layout" }, Qt = { class: "flow-canvas-layout__main" }, Xt = { class: "flow-canvas-layout__content" }, Kt = {
+}), fo = /* @__PURE__ */ pe(uo, [["__scopeId", "data-v-300314b7"]]), po = { class: "flow-canvas-layout" }, go = { class: "flow-canvas-layout__main" }, ho = { class: "flow-canvas-layout__content" }, vo = {
   key: 0,
   class: "flow-canvas-layout__footer"
-}, Yt = /* @__PURE__ */ ce({
+}, yo = /* @__PURE__ */ le({
   __name: "canvas-layout",
   props: {
     sidebarCollapsed: { type: Boolean, default: !1 },
@@ -2282,37 +2529,34 @@ const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
     paletteItems: { default: void 0 }
   },
   emits: ["update:sidebarCollapsed"],
-  setup(s) {
-    return (e, t) => (I(), N("div", Wt, [
-      !s.hideSidebar && (e.$slots.sidebar || s.editor) ? (I(), N("aside", {
+  setup(n) {
+    return (e, t) => (N(), A("div", po, [
+      !n.hideSidebar && (e.$slots.sidebar || n.editor) ? (N(), A("aside", {
         key: 0,
-        class: Q(["flow-canvas-layout__sidebar", { "is-collapsed": s.sidebarCollapsed }]),
-        style: Ie({ width: s.sidebarCollapsed ? "0px" : `${s.sidebarWidth}px` })
+        class: te(["flow-canvas-layout__sidebar", { "is-collapsed": n.sidebarCollapsed }]),
+        style: ve({ width: n.sidebarCollapsed ? "0px" : `${n.sidebarWidth}px` })
       }, [
-        me(e.$slots, "sidebar", {}, () => [
-          s.editor ? (I(), Ce(Vt, {
+        we(e.$slots, "sidebar", {}, () => [
+          n.editor ? (N(), ye(fo, {
             key: 0,
-            editor: s.editor,
-            items: s.paletteItems
-          }, null, 8, ["editor", "items"])) : F("", !0)
+            editor: n.editor,
+            items: n.paletteItems
+          }, null, 8, ["editor", "items"])) : V("", !0)
         ], !0)
-      ], 6)) : F("", !0),
-      R("div", Qt, [
-        R("div", Xt, [
-          me(e.$slots, "default", {}, void 0, !0)
+      ], 6)) : V("", !0),
+      G("div", go, [
+        G("div", ho, [
+          we(e.$slots, "default", {}, void 0, !0)
         ]),
-        !s.hideFooter && e.$slots.footer ? (I(), N("div", Kt, [
-          me(e.$slots, "footer", {}, void 0, !0)
-        ])) : F("", !0)
+        !n.hideFooter && e.$slots.footer ? (N(), A("div", vo, [
+          we(e.$slots, "footer", {}, void 0, !0)
+        ])) : V("", !0)
       ])
     ]));
   }
-}), xo = /* @__PURE__ */ ue(Yt, [["__scopeId", "data-v-26f35b6b"]]), Zt = ["undo", "redo"];
-function Jt(s) {
-  const e = new Set(s?.include), t = /* @__PURE__ */ new Set([
-    ...Zt.filter((a) => !e.has(a)),
-    ...s?.exclude ?? []
-  ]), o = [
+}), dn = /* @__PURE__ */ pe(yo, [["__scopeId", "data-v-26f35b6b"]]), mo = ["undo", "redo"];
+function bo(n) {
+  const e = new Set(n?.include), t = new Set(mo.filter((a) => !e.has(a))), s = [
     {
       id: "undo",
       type: "undo",
@@ -2329,7 +2573,7 @@ function Jt(s) {
       description: "重做",
       order: 11
     }
-  ], n = [
+  ], o = [
     {
       id: "select",
       type: "select",
@@ -2346,22 +2590,6 @@ function Jt(s) {
       description: "自动排版",
       order: 21
     },
-    {
-      id: "search",
-      type: "search",
-      group: "tools",
-      icon: "flow-canvas-icon canvas-search",
-      description: "搜索节点",
-      order: 22
-    },
-    {
-      id: "minimap",
-      type: "minimap",
-      group: "tools",
-      icon: "flow-canvas-icon canvas-map",
-      description: "缩略图",
-      order: 23
-    },
     {
       id: "export",
       type: "export",
@@ -2398,147 +2626,235 @@ function Jt(s) {
       order: 40
     }
   ];
-  return [...[...o, ...n].filter(
+  return [...[...s, ...o].filter(
     (a) => !t.has(a.type)
   ), ...i, ...r];
 }
-const eo = { class: "flow-canvas-toolbar" }, to = {
+const wo = { class: "flow-canvas-toolbar" }, xo = {
   key: 0,
   class: "flow-canvas-toolbar__separator"
-}, oo = { class: "flow-canvas-toolbar__group" }, no = {
+}, Co = { class: "flow-canvas-toolbar__group" }, Eo = {
   key: 0,
   class: "flow-canvas-toolbar__zoom-display"
-}, so = ["data-description", "disabled", "onClick"], io = ["textContent"], ro = /* @__PURE__ */ ce({
+}, ko = ["data-toolbar-id", "data-toolbar-type", "disabled", "onClick", "onMouseenter"], Io = ["textContent"], So = /* @__PURE__ */ le({
   __name: "canvas-toolbar",
   props: {
     items: {},
     exclude: {},
     editor: {}
   },
-  setup(s) {
-    const e = s, t = H(() => e.items ? e.items : Jt({ exclude: e.exclude })), o = L(1);
-    let n = null;
-    ge(
-      () => e.editor.api.value,
-      (g) => {
-        n?.(), n = null, g && (o.value = g.getZoom(), n = g.onGraphEvent("scale", () => {
-          o.value = g.getZoom();
+  setup(n) {
+    const e = /* @__PURE__ */ new Set([
+      "undo",
+      "redo",
+      "select",
+      "auto-layout",
+      "search",
+      "minimap",
+      "export"
+    ]), t = /* @__PURE__ */ new Set(["select", "search", "minimap"]);
+    function s(d) {
+      return d.id.startsWith("plugin:") || d.type === "custom";
+    }
+    function o(d) {
+      return d !== "custom" && t.has(d);
+    }
+    const i = n, r = j(() => {
+      if (i.items) return i.items;
+      const d = bo(), f = i.editor.toolbarItems.value, I = new Set(i.exclude ?? []), S = /* @__PURE__ */ new Map();
+      for (const w of d)
+        S.set(w.id, w);
+      for (const w of f) {
+        const U = S.get(w.id);
+        U ? S.set(w.id, { ...U, ...w, order: U.order, group: U.group }) : s(w) && S.set(w.id, w);
+      }
+      return [...S.values()].filter((w) => w.type === "custom" || !e.has(w.type) ? !0 : !I.has(w.type)).sort((w, U) => (w.order ?? 0) - (U.order ?? 0));
+    }), l = O(1), a = O(null), p = O(null), c = O(!1);
+    let g = null;
+    fe(
+      () => i.editor.api.value,
+      (d) => {
+        g?.(), g = null, d && (l.value = d.getZoom(), g = d.onGraphEvent("scale", () => {
+          l.value = d.getZoom();
         }));
       },
       { immediate: !0 }
-    ), Ue(() => {
-      n?.();
+    );
+    const u = st({ visible: !1, text: "", x: 0, y: 0 });
+    function y(d, f) {
+      if (!f.description) return;
+      const S = d.currentTarget.getBoundingClientRect();
+      u.text = f.description, u.visible = !0, Te(() => {
+        const w = a.value?.offsetWidth ?? 0, U = a.value?.offsetHeight ?? 0;
+        u.x = S.left + S.width / 2 - w / 2, u.y = S.top - U - 6;
+      });
+    }
+    function v() {
+      u.visible = !1, a.value = null;
+    }
+    Ye(() => {
+      g?.();
     });
-    const i = H(() => `${Math.round(o.value * 100)}%`), r = H(() => e.editor.api.value ? {
-      api: e.editor.api.value,
-      flowModel: e.editor.flowModel.value,
-      history: e.editor.history,
-      mode: e.editor.mode.value
+    const C = j(() => `${Math.round(l.value * 100)}%`), M = j(() => i.editor.api.value ? {
+      api: i.editor.api.value,
+      flowModel: i.editor.flowModel.value,
+      history: i.editor.history,
+      mode: i.editor.mode.value
     } : null);
-    function l(g) {
-      return g.visible === !1 ? !1 : typeof g.visible == "function" ? r.value ? g.visible(r.value) : !1 : !0;
+    function D(d) {
+      return d.visible === !1 ? !1 : typeof d.visible == "function" ? M.value ? d.visible(M.value) : !1 : !0;
+    }
+    function L(d) {
+      return typeof d.active == "function" ? M.value ? d.active(M.value) : !1 : d.active !== void 0 ? d.active : d.type === "select" ? i.editor.selectionMode.value : !1;
+    }
+    const H = j(() => {
+      const d = B.value.filter(
+        (I) => o(I.type) && L(I)
+      );
+      if (d.length === 0) return null;
+      const f = p.value;
+      return f && d.some((I) => I.type === f) ? f : d[0]?.type ?? null;
+    });
+    function K(d) {
+      return o(d.type) ? H.value === d.type : L(d);
     }
-    function a(g) {
-      return g.type === "select" ? e.editor.selectionMode.value : !1;
+    function $(d) {
+      return !M.value || d.disabled === !0 ? !0 : typeof d.disabled == "function" ? d.disabled(M.value) : d.type === "undo" ? !i.editor.history.canUndo.value : d.type === "redo" ? !i.editor.history.canRedo.value : d.type === "export" ? c.value : !1;
     }
-    function f(g) {
-      return !r.value || g.disabled === !0 ? !0 : typeof g.disabled == "function" ? g.disabled(r.value) : g.type === "undo" ? !e.editor.history.canUndo.value : g.type === "redo" ? !e.editor.history.canRedo.value : !1;
+    function W(d) {
+      if (!(!M.value || !o(d.type) || !L(d))) {
+        if (d.type === "select") {
+          i.editor.setSelectionMode(!1);
+          return;
+        }
+        d.onClick?.(M.value);
+      }
+    }
+    function F(d) {
+      if (o(d.type))
+        for (const f of B.value)
+          !o(f.type) || f.id === d.id || W(f);
     }
-    function d(g) {
-      if (!r.value || f(g)) return;
-      if (g.onClick) {
-        g.onClick(r.value);
+    function k(d) {
+      if (!M.value || $(d)) return;
+      if (o(d.type) && (p.value = d.type, F(d)), d.onClick) {
+        d.onClick(M.value);
         return;
       }
-      const { api: S } = r.value;
-      switch (g.type) {
+      const { api: f } = M.value;
+      switch (d.type) {
         case "undo":
-          e.editor.history.undo();
+          i.editor.history.undo();
           break;
         case "redo":
-          e.editor.history.redo();
+          i.editor.history.redo();
           break;
         case "zoom-in":
-          S.zoomIn(), o.value = S.getZoom();
+          f.zoomIn(), l.value = f.getZoom();
           break;
         case "zoom-out":
-          S.zoomOut(), o.value = S.getZoom();
+          f.zoomOut(), l.value = f.getZoom();
           break;
         case "fit":
-          S.zoomToFit();
+          f.zoomToFit();
           break;
         case "reset":
-          S.zoomTo(1), S.scrollToOrigin(), o.value = 1;
+          f.zoomTo(1), f.scrollToOrigin(), l.value = 1;
           break;
         case "export":
-          S.exportAsImage().then((k) => {
-            const w = URL.createObjectURL(k), x = document.createElement("a");
-            x.href = w, x.download = "canvas-export.png", x.click(), URL.revokeObjectURL(w);
-          }).catch((k) => {
-            console.warn("[flow-canvas] Export failed:", k);
+          if (c.value) break;
+          c.value = !0, f.exportAsImage().then((I) => {
+            const S = URL.createObjectURL(I), w = document.createElement("a");
+            w.href = S, w.download = "canvas-export.png", w.click(), URL.revokeObjectURL(S);
+          }).catch((I) => {
+            console.warn("[flow-canvas] Export failed:", I);
+          }).finally(() => {
+            c.value = !1;
           });
           break;
         case "select":
-          e.editor.setSelectionMode(!e.editor.selectionMode.value);
+          i.editor.setSelectionMode(!i.editor.selectionMode.value);
           break;
-        case "search":
         case "auto-layout":
+          i.editor._emitUiEvent({ type: "toolbar.auto-layout" });
+          break;
+        case "search":
         case "minimap":
-          console.warn(`[flow-canvas] "${g.type}" toolbar item has no built-in handler. Provide an onClick callback.`);
+          console.warn(`[flow-canvas] "${d.type}" toolbar item has no built-in handler. Provide an onClick callback.`);
           break;
         default:
-          g.type !== "custom" && console.warn(`[flow-canvas] No default handler for toolbar type "${g.type}". Provide an onClick handler.`);
+          d.type !== "custom" && console.warn(`[flow-canvas] No default handler for toolbar type "${d.type}". Provide an onClick handler.`);
           break;
       }
     }
-    const b = H(() => t.value.filter(l)), m = H(() => {
-      const g = /* @__PURE__ */ new Map(), S = [];
-      for (const k of b.value) {
-        const w = k.group ?? "default";
-        g.has(w) || (g.set(w, []), S.push(w)), g.get(w).push(k);
+    const B = j(() => r.value.filter(D)), h = j(() => {
+      const d = /* @__PURE__ */ new Map(), f = [];
+      for (const I of B.value) {
+        const S = I.group ?? "default";
+        d.has(S) || (d.set(S, []), f.push(S)), d.get(S).push(I);
       }
-      return S.map((k) => ({ name: k, items: g.get(k) })).filter((k) => k.items.length > 0);
+      return f.map((I) => ({ name: I, items: d.get(I) })).filter((I) => I.items.length > 0);
     });
-    return (g, S) => (I(), N("div", eo, [
-      (I(!0), N(de, null, Ee(m.value, (k, w) => (I(), N(de, {
-        key: k.name
+    return (d, f) => (N(), A("div", wo, [
+      (N(!0), A(he, null, xe(h.value, (I, S) => (N(), A(he, {
+        key: I.name
       }, [
-        w > 0 ? (I(), N("div", to)) : F("", !0),
-        R("div", oo, [
-          (I(!0), N(de, null, Ee(k.items, (x) => (I(), N(de, {
-            key: x.id
+        S > 0 ? (N(), A("div", xo)) : V("", !0),
+        G("div", Co, [
+          (N(!0), A(he, null, xe(I.items, (w) => (N(), A(he, {
+            key: w.id
           }, [
-            x.type === "zoom-display" ? (I(), N("span", no, he(i.value), 1)) : (I(), N("button", {
+            w.type === "zoom-display" ? (N(), A("span", Eo, ce(C.value), 1)) : (N(), A("button", {
               key: 1,
-              class: Q(["flow-canvas-toolbar__btn", { "is-disabled": f(x), "is-active": a(x) }]),
-              "data-description": x.description,
-              disabled: f(x),
-              onClick: (A) => d(x)
+              type: "button",
+              class: te(["flow-canvas-toolbar__btn", {
+                "is-disabled": $(w),
+                "is-active": K(w),
+                "is-exporting": w.type === "export" && c.value
+              }]),
+              "data-toolbar-id": w.id,
+              "data-toolbar-type": w.type,
+              disabled: $(w),
+              onClick: (U) => k(w),
+              onMouseenter: (U) => y(U, w),
+              onMouseleave: v
             }, [
-              x.component ? (I(), Ce(tt(x.component), { key: 0 })) : x.icon ? (I(), N("i", {
+              w.component ? (N(), ye(it(w.component), { key: 0 })) : w.icon ? (N(), A("i", {
                 key: 1,
-                class: Q(x.icon)
-              }, null, 2)) : (I(), N("span", {
+                class: te(w.icon)
+              }, null, 2)) : (N(), A("span", {
                 key: 2,
                 class: "flow-canvas-toolbar__text",
-                textContent: he(x.text ?? x.description ?? x.id)
-              }, null, 8, io))
-            ], 10, so))
+                textContent: ce(w.text ?? w.description ?? w.id)
+              }, null, 8, Io))
+            ], 42, ko))
           ], 64))), 128))
         ])
-      ], 64))), 128))
+      ], 64))), 128)),
+      (N(), ye(rt, { to: "body" }, [
+        u.visible ? (N(), A("div", {
+          key: 0,
+          ref_key: "tooltipRef",
+          ref: a,
+          class: "flow-canvas-toolbar-tooltip",
+          style: ve({ left: `${u.x}px`, top: `${u.y}px` })
+        }, [
+          Pe(ce(u.text) + " ", 1),
+          f[0] || (f[0] = G("div", { class: "flow-canvas-toolbar-tooltip__arrow" }, null, -1))
+        ], 4)) : V("", !0)
+      ]))
     ]));
   }
-}), ko = /* @__PURE__ */ ue(ro, [["__scopeId", "data-v-51b5c98a"]]), ao = { class: "flow-canvas-default-node__ep-label" }, lo = {
+}), cn = /* @__PURE__ */ pe(So, [["__scopeId", "data-v-77d4afbb"]]), _o = { class: "flow-canvas-default-node__ep-label" }, No = {
   key: 1,
-  class: "flow-canvas-default-node__diamond"
-}, co = {
+  class: "flow-canvas-default-node__diamond flow-canvas-highlight-target"
+}, Mo = {
   key: 2,
   class: "flow-canvas-default-node__task-label"
-}, uo = /* @__PURE__ */ ce({
+}, Do = /* @__PURE__ */ le({
   __name: "default-node",
-  setup(s) {
-    const t = ot("getNode")?.(), o = H(() => t?.getData?.() ?? null), n = H(() => o.value?.label || o.value?.type || ""), i = {
+  setup(n) {
+    const t = at("getNode")?.(), s = j(() => t?.getData?.() ?? null), o = j(() => s.value?.label || s.value?.type || ""), i = {
       start: "canvas-kaishi",
       end: "canvas-stop",
       "parallel-gateway": "canvas-bingxingwangguan",
@@ -2550,28 +2866,28 @@ const eo = { class: "flow-canvas-toolbar" }, to = {
       "branch-gateway",
       "converge-gateway",
       "conditional-parallel-gateway"
-    ]), a = H(() => {
-      const d = o.value?.type ?? "";
-      return r.has(d) ? "endpoint" : l.has(d) ? "gateway" : "task";
-    }), f = H(() => i[o.value?.type ?? ""] ?? "");
-    return (d, b) => (I(), N("div", {
-      class: Q(["flow-canvas-default-node", `is-${a.value}`])
+    ]), a = j(() => {
+      const c = s.value?.type ?? "";
+      return r.has(c) ? "endpoint" : l.has(c) ? "gateway" : "task";
+    }), p = j(() => i[s.value?.type ?? ""] ?? "");
+    return (c, g) => (N(), A("div", {
+      class: te(["flow-canvas-default-node", [`is-${a.value}`, { "flow-canvas-highlight-target": a.value !== "gateway" }]])
     }, [
-      a.value === "endpoint" ? (I(), N(de, { key: 0 }, [
-        f.value ? (I(), N("i", {
+      a.value === "endpoint" ? (N(), A(he, { key: 0 }, [
+        p.value ? (N(), A("i", {
           key: 0,
-          class: Q([["flow-canvas-icon", f.value], "flow-canvas-default-node__ep-icon"])
-        }, null, 2)) : F("", !0),
-        R("span", ao, he(n.value), 1)
-      ], 64)) : a.value === "gateway" ? (I(), N("div", lo, [
-        f.value ? (I(), N("i", {
+          class: te([["flow-canvas-icon", p.value], "flow-canvas-default-node__ep-icon"])
+        }, null, 2)) : V("", !0),
+        G("span", _o, ce(o.value), 1)
+      ], 64)) : a.value === "gateway" ? (N(), A("div", No, [
+        p.value ? (N(), A("i", {
           key: 0,
-          class: Q([["flow-canvas-icon", f.value], "flow-canvas-default-node__gw-icon"])
-        }, null, 2)) : F("", !0)
-      ])) : (I(), N("span", co, he(n.value), 1))
+          class: te([["flow-canvas-icon", p.value], "flow-canvas-default-node__gw-icon"])
+        }, null, 2)) : V("", !0)
+      ])) : (N(), A("span", Mo, ce(o.value), 1))
     ], 2));
   }
-}), fo = /* @__PURE__ */ ue(uo, [["__scopeId", "data-v-c88cdae7"]]), po = {
+}), Ao = /* @__PURE__ */ pe(Do, [["__scopeId", "data-v-f0e24a9f"]]), Po = {
   start: { label: "开始", icon: "flow-canvas-icon canvas-kaishi", width: 88, height: 40 },
   end: { label: "结束", icon: "flow-canvas-icon canvas-stop", width: 88, height: 40 },
   empty: { label: "空节点", icon: "flow-canvas-icon canvas-jiedi", width: 240, height: 48 },
@@ -2584,11 +2900,11 @@ const eo = { class: "flow-canvas-toolbar" }, to = {
     width: 64,
     height: 64
   }
-}, Fe = (s, e) => ({
+}, Ve = (n, e) => ({
   stroke: e.hovered ? "#3a84ff" : "#abb5cc",
   strokeWidth: 2
 });
-function qe() {
+function Xe() {
   return {
     attrs: {
       line: {
@@ -2599,67 +2915,67 @@ function qe() {
     }
   };
 }
-function go() {
+function To() {
   return {
     manhattan: {
       router: { name: "manhattan", args: { padding: 10, maxDirectionChange: 90 } },
       connector: { name: "rounded", args: { radius: 8 } },
-      style: Fe,
-      x6EdgeConfig: qe()
+      style: Ve,
+      x6EdgeConfig: Xe()
     },
     bezier: {
       connector: { name: "smooth" },
-      style: Fe,
-      x6EdgeConfig: qe()
+      style: Ve,
+      x6EdgeConfig: Xe()
     }
   };
 }
-function Co(s) {
-  const e = s?.nodeTypes ?? po, t = {}, o = [];
+function un(n) {
+  const e = n?.nodeTypes ?? Po, t = {}, s = [];
   for (const [r, l] of Object.entries(e)) {
-    const a = l.width ?? 150, f = l.height ?? 50;
+    const a = l.width ?? 150, p = l.height ?? 50;
     t[r] = {
-      component: fo,
-      getSize: () => ({ width: a, height: f }),
-      getPorts: () => Qe()
-    }, o.push({
+      component: Ao,
+      getSize: () => ({ width: a, height: p }),
+      getPorts: () => et()
+    }, s.push({
       type: r,
       label: l.label ?? r,
       icon: l.icon
     });
   }
-  const n = {
-    ...go(),
-    ...s?.edgeTypes
-  }, i = s?.defaultEdgeType ?? "manhattan";
+  const o = {
+    ...To(),
+    ...n?.edgeTypes
+  }, i = n?.defaultEdgeType ?? "manhattan";
   return {
-    schema: { nodeTypes: t, defaultEdgeType: i, edgeTypes: n },
-    paletteItems: o
+    schema: { nodeTypes: t, defaultEdgeType: i, edgeTypes: o },
+    paletteItems: s
   };
 }
-function Eo(s) {
+function fn(n) {
   return {
     name: "connection-validator",
     priority: 10,
-    transformCommand(e, t, o) {
-      for (const n of e.commands) {
-        if (n.type !== "edge.add" && n.type !== "edge.reconnect") continue;
-        const i = o.flowModel.value, r = n.type === "edge.add" ? n.edge.source.nodeId : n.source?.nodeId, l = n.type === "edge.add" ? n.edge.target.nodeId : n.target?.nodeId;
+    transformCommand(e, t, s) {
+      for (const o of e.commands) {
+        if (o.type !== "edge.add" && o.type !== "edge.reconnect") continue;
+        const i = s.flowModel.value, r = o.type === "edge.add" ? o.edge.source.nodeId : o.source?.nodeId, l = o.type === "edge.add" ? o.edge.target.nodeId : o.target?.nodeId;
         if (!r || !l) continue;
-        const a = i.nodes[r], f = i.nodes[l];
-        if (!a || !f) continue;
-        const d = n.type === "edge.add" ? n.edge.source.portId : n.source?.portId, b = n.type === "edge.add" ? n.edge.target.portId : n.target?.portId, m = d ? a.ports?.find((x) => x.id === d) : void 0, g = b ? f.ports?.find((x) => x.id === b) : void 0, S = n.type === "edge.reconnect" ? n.edgeId : void 0, k = Object.values(i.edges).filter((x) => x.id !== S), w = s({
+        const a = i.nodes[r], p = i.nodes[l];
+        if (!a || !p) continue;
+        const c = o.type === "edge.add" ? o.edge.source.portId : o.source?.portId, g = o.type === "edge.add" ? o.edge.target.portId : o.target?.portId, u = c ? a.ports?.find((D) => D.id === c) : void 0, y = g ? p.ports?.find((D) => D.id === g) : void 0, v = o.type === "edge.reconnect" ? o.edgeId : void 0, C = Object.values(i.edges).filter((D) => D.id !== v), M = n({
           flowModel: i,
           sourceNode: a,
-          targetNode: f,
-          sourcePort: m,
-          targetPort: g,
-          existingEdges: k
+          targetNode: p,
+          sourcePort: u,
+          targetPort: y,
+          existingEdges: C
         });
-        if (!w.valid)
+        if (!M.valid)
           return {
             rejected: !0,
-            reason: w.reason ?? "Connection validation failed",
+            reason: M.reason ?? "Connection validation failed",
             code: "validation_failed"
           };
       }
@@ -2667,113 +2983,433 @@ function Eo(s) {
     }
   };
 }
-function Io(s) {
-  const { rubberband: e = !0, multiple: t = !0, movable: o = !0 } = s ?? {};
+function pn(n) {
+  const { rubberband: e = !0, multiple: t = !0, movable: s = !0 } = n ?? {};
   return {
     name: "selection",
     priority: 90,
-    async attachRuntime(n) {
-      const { Selection: i } = await import("@antv/x6-plugin-selection");
-      n.graph.use(
-        new i({
+    attachRuntime(o) {
+      o.graph.use(
+        new ut({
           enabled: !0,
           rubberband: e,
           multiple: t,
-          movable: o,
+          movable: s,
+          pointerEvents: "none",
           showNodeSelectionBox: !0,
-          filter: (r) => !(r.isNode() && (!n.graph.isRubberbandEnabled?.() || (r.getData?.() ?? {})._selectable === !1))
+          filter: (i) => !(i.isNode() && (i.getData?.() ?? {})._selectable === !1)
         })
       );
     }
   };
 }
-function Mo(s) {
-  const { tolerance: e = 10, color: t = "#3a84ff" } = s ?? {};
-  let o = null;
+function gn(n) {
+  const { tolerance: e = 10, color: t = "#3a84ff" } = n ?? {};
+  let s = null;
   return {
     name: "snapline",
     priority: 90,
-    async attachRuntime(n) {
+    async attachRuntime(o) {
       const { Snapline: i } = await import("@antv/x6-plugin-snapline");
-      n.graph.use(
+      o.graph.use(
         new i({
           enabled: !0,
           tolerance: e,
           className: "flow-canvas-snapline"
         })
-      ), o = document.createElement("style"), o.textContent = `.flow-canvas-snapline line { stroke: ${t} !important; }`, document.head.appendChild(o);
+      ), s = document.createElement("style"), s.textContent = `.flow-canvas-snapline line { stroke: ${t} !important; }`, document.head.appendChild(s);
+    },
+    detachRuntime() {
+      s?.remove(), s = null;
+    }
+  };
+}
+const Ro = { class: "flow-canvas-search-popover__input" }, Lo = ["value", "placeholder"], $o = ["onMouseenter", "onClick"], Oo = { class: "flow-canvas-search-popover__item-label" }, Bo = {
+  key: 0,
+  class: "flow-canvas-search-popover__item-subtitle"
+}, Ho = {
+  key: 1,
+  class: "flow-canvas-search-popover__empty"
+}, Go = /* @__PURE__ */ le({
+  __name: "search-popover",
+  props: {
+    open: { type: Boolean },
+    position: {},
+    query: {},
+    results: {},
+    placeholder: { default: "搜索节点名称" },
+    emptyText: { default: "暂无匹配节点" },
+    isAnchorTarget: { type: Function, default: void 0 }
+  },
+  emits: ["update:query", "select", "close"],
+  setup(n, { emit: e }) {
+    const t = n, s = e, o = O(null), i = O(null), r = O(-1);
+    fe(
+      () => t.open,
+      (v) => {
+        v && (r.value = -1, Te(() => {
+          o.value?.focus(), o.value?.select();
+        }));
+      }
+    ), fe(
+      () => t.query,
+      () => {
+        r.value = -1;
+      }
+    ), fe(
+      () => t.results.length,
+      (v) => {
+        if (!v) {
+          r.value = -1;
+          return;
+        }
+        r.value >= v && (r.value = -1);
+      }
+    );
+    function l(v) {
+      s("update:query", v.target.value);
+    }
+    function a(v) {
+      r.value = v;
+    }
+    function p() {
+      r.value = -1;
+    }
+    function c() {
+      s("update:query", ""), Te(() => {
+        o.value?.focus();
+      });
+    }
+    function g() {
+      const v = t.results[r.value] ?? t.results[0];
+      v && s("select", v.id);
+    }
+    function u(v) {
+      if (v.key === "Escape") {
+        v.preventDefault(), s("close");
+        return;
+      }
+      if (v.key === "ArrowDown") {
+        if (v.preventDefault(), !t.results.length) return;
+        r.value = r.value < t.results.length - 1 ? r.value + 1 : 0;
+        return;
+      }
+      if (v.key === "ArrowUp") {
+        if (v.preventDefault(), !t.results.length) return;
+        r.value = r.value > 0 ? r.value - 1 : t.results.length - 1;
+        return;
+      }
+      v.key === "Enter" && (v.preventDefault(), g());
+    }
+    function y(v) {
+      if (!t.open) return;
+      const C = v.target;
+      C && i.value?.contains(C) || t.isAnchorTarget?.(v.target) || s("close");
+    }
+    return Je(() => {
+      document.addEventListener("mousedown", y);
+    }), Se(() => {
+      document.removeEventListener("mousedown", y);
+    }), (v, C) => n.open ? (N(), A("div", {
+      key: 0,
+      ref_key: "panelRef",
+      ref: i,
+      class: "flow-canvas-search-popover",
+      style: ve({ left: `${n.position.x}px`, top: `${n.position.y}px`, width: `${n.position.width}px` })
+    }, [
+      G("div", Ro, [
+        C[1] || (C[1] = G("i", { class: "flow-canvas-icon canvas-search" }, null, -1)),
+        G("input", {
+          ref_key: "inputRef",
+          ref: o,
+          value: n.query,
+          placeholder: n.placeholder,
+          onInput: l,
+          onKeydown: u
+        }, null, 40, Lo),
+        n.query ? (N(), A("button", {
+          key: 0,
+          type: "button",
+          class: "flow-canvas-search-popover__clear",
+          "aria-label": "清空搜索",
+          onClick: c
+        }, [...C[0] || (C[0] = [
+          G("i", { class: "flow-canvas-icon canvas-close-circle-shape" }, null, -1)
+        ])])) : V("", !0)
+      ]),
+      n.results.length ? (N(), A("div", {
+        key: 0,
+        class: "flow-canvas-search-popover__list",
+        onMouseleave: p
+      }, [
+        (N(!0), A(he, null, xe(n.results, (M, D) => (N(), A("button", {
+          key: M.id,
+          type: "button",
+          class: te(["flow-canvas-search-popover__item", { "is-active": D === r.value }]),
+          onMouseenter: (L) => a(D),
+          onClick: (L) => s("select", M.id)
+        }, [
+          G("span", Oo, ce(M.label), 1),
+          M.subtitle ? (N(), A("span", Bo, ce(M.subtitle), 1)) : V("", !0)
+        ], 42, $o))), 128))
+      ], 32)) : (N(), A("div", Ho, ce(n.emptyText), 1))
+    ], 4)) : V("", !0);
+  }
+}), qo = /* @__PURE__ */ pe(Go, [["__scopeId", "data-v-c80f6b26"]]), Ke = 282, Uo = 4, zo = 300, Fo = 360, Le = 100, jo = Fo * 4 - Le;
+function Wo(n) {
+  return n !== null;
+}
+function Vo(n) {
+  const e = /* @__PURE__ */ new Set();
+  return n.map((t) => t?.trim()).filter((t) => !!t).filter((t) => {
+    const s = t.toLowerCase();
+    return e.has(s) ? !1 : (e.add(s), !0);
+  });
+}
+function Xo(n, e) {
+  const t = Math.max(8, window.innerWidth - e - 8);
+  return Math.min(Math.max(8, n), t);
+}
+function Ko(n, e) {
+  const t = e?.getNodeMeta?.(n);
+  if (t === null) return null;
+  const s = t?.label?.trim() || n.label?.trim() || n.id, o = t?.subtitle?.trim() || void 0, i = Vo(t?.keywords ?? [n.label, o]);
+  return i.length ? {
+    id: n.id,
+    label: s,
+    subtitle: o,
+    keywords: i
+  } : null;
+}
+function hn(n) {
+  let e = null, t = null, s = null, o = null, i = null, r = [];
+  const l = O(!1), a = O(""), p = O({ x: 0, y: 0, width: Ke }), c = j(() => e ? Object.values(e.flowModel.value.nodes).map((k) => Ko(k, n)).filter(Wo) : []), g = j(() => {
+    const k = a.value.trim().toLowerCase(), B = Math.max(1, n?.maxResults ?? zo);
+    return k ? c.value.filter((h) => h.keywords.some((d) => d.toLowerCase().includes(k))).slice(0, B) : c.value.slice(0, B);
+  });
+  function u() {
+    return s?.querySelector('.flow-canvas-toolbar__btn[data-toolbar-type="search"]');
+  }
+  function y() {
+    return u()?.closest(".flow-canvas-toolbar");
+  }
+  function v() {
+    const k = y(), B = s?.getBoundingClientRect(), h = k?.getBoundingClientRect() ?? B;
+    if (!h) return;
+    const d = Math.max(Ke, Math.round(h.width));
+    p.value = {
+      x: Xo(h.left, d),
+      y: h.bottom + Uo,
+      width: d
+    };
+  }
+  function C() {
+    r.forEach((k) => clearTimeout(k)), r = [], t?.api.clearHighlight();
+  }
+  function M(k) {
+    C();
+    const B = setTimeout(() => {
+      t?.api.highlightNodes([k]);
+    }, Le), h = setTimeout(() => {
+      t?.api.clearHighlight(), r = [];
+    }, Le + jo);
+    r.push(B, h);
+  }
+  function D(k) {
+    t && (t.api.scrollToNode(k), M(k));
+  }
+  function L() {
+    t && (l.value = !0, v(), requestAnimationFrame(() => v()));
+  }
+  function H() {
+    l.value = !1, a.value = "";
+  }
+  function K() {
+    if (l.value) {
+      H();
+      return;
+    }
+    L();
+  }
+  function $(k) {
+    const B = u();
+    return !!(B && k instanceof Node && B.contains(k));
+  }
+  function W() {
+    l.value && v();
+  }
+  const F = le({
+    name: "FlowCanvasSearchHost",
+    setup() {
+      return () => Ae(qo, {
+        open: l.value,
+        position: p.value,
+        query: a.value,
+        results: g.value,
+        placeholder: n?.placeholder ?? "搜索节点名称",
+        emptyText: n?.emptyText ?? "暂无匹配节点",
+        isAnchorTarget: $,
+        "onUpdate:query": (k) => {
+          a.value = k;
+        },
+        onSelect: D,
+        onClose: H
+      });
+    }
+  });
+  return {
+    name: "search",
+    priority: 90,
+    install(k) {
+      e = k;
+    },
+    attachRuntime(k) {
+      t = k, s = k.graph.container.closest(".flow-canvas-layout__content") ?? k.graph.container.parentElement, o = document.createElement("div"), o.className = "flow-canvas-search-host", document.body.append(o), i = lt(F), i.mount(o), window.addEventListener("resize", W), window.addEventListener("scroll", W, !0);
     },
     detachRuntime() {
-      o?.remove(), o = null;
+      H(), C(), window.removeEventListener("resize", W), window.removeEventListener("scroll", W, !0), i?.unmount(), i = null, o?.remove(), o = null, s = null, t = null;
+    },
+    dispose() {
+      H(), C(), e = null;
+    },
+    provideToolbarItems() {
+      return [
+        {
+          id: "plugin:search",
+          type: "search",
+          icon: "flow-canvas-icon canvas-search",
+          description: "搜索节点",
+          group: "tools",
+          order: 22,
+          active: () => l.value,
+          onClick: K
+        }
+      ];
     }
   };
 }
-function No(s) {
+const Yo = 52, Zo = 16, Qo = 40;
+function Jo(n) {
+  const e = document.createElement("div");
+  e.className = "flow-canvas-minimap", n.floating !== !1 && e.classList.add("flow-canvas-minimap--floating");
+  const t = document.createElement("div");
+  t.className = "flow-canvas-minimap__host", e.append(t), Object.assign(e.style, {
+    width: `${n.width}px`,
+    height: `${n.height}px`
+  }), n.floating !== !1 && Object.assign(e.style, {
+    top: `${Yo}px`,
+    left: `${Zo}px`
+  });
+  let s = null, o = n.defaultOpen ?? !1, i = null;
+  function r() {
+    !n.onClickOutside || i || (i = (u) => {
+      const y = u.target;
+      y && e.contains(y) || u.target?.closest('[data-toolbar-type="minimap"]') || n.onClickOutside();
+    }, document.addEventListener("mousedown", i));
+  }
+  function l() {
+    i && (document.removeEventListener("mousedown", i), i = null);
+  }
+  function a() {
+    s || (s = new ft({
+      container: t,
+      width: n.width,
+      height: n.height,
+      padding: n.contentPadding ?? Qo,
+      scalable: !1
+    }), n.sourceGraph.use(s));
+  }
+  function p(u) {
+    o = u, e.style.display = o ? "" : "none", o ? (a(), r()) : l();
+  }
+  function c() {
+    p(o), n.mountTarget.appendChild(e);
+  }
+  function g() {
+    l(), s?.dispose(), s = null, e.remove();
+  }
+  return c(), {
+    element: e,
+    isOpen: () => o,
+    setOpen: p,
+    toggle() {
+      const u = !o;
+      return p(u), u;
+    },
+    destroy: g
+  };
+}
+function vn(n) {
   let e = null;
+  const t = O(!1);
+  function s(i) {
+    e?.setOpen(i), t.value = i;
+  }
+  function o() {
+    e && (t.value = e.toggle());
+  }
   return {
     name: "minimap",
     priority: 90,
-    async attachRuntime(t) {
-      if (!s?.container) return;
-      e = s.container;
-      const { MiniMap: o } = await import("@antv/x6-plugin-minimap");
-      t.graph.use(
-        new o({
-          container: s.container,
-          width: s.width ?? 200,
-          height: s.height ?? 160
-        })
-      );
+    attachRuntime(i) {
+      const r = n?.width ?? 334, l = n?.height ?? 180, a = n?.container ?? i.graph.container.closest(".flow-canvas-layout__content") ?? i.graph.container.parentElement;
+      a && (e = Jo({
+        sourceGraph: i.graph,
+        mountTarget: a,
+        width: r,
+        height: l,
+        floating: !n?.container,
+        defaultOpen: !1,
+        onClickOutside: () => s(!1)
+      }), s(!1));
     },
     detachRuntime() {
-      e = null;
+      e?.destroy(), e = null, t.value = !1;
     },
     provideToolbarItems() {
       return [
         {
-          id: "minimap",
+          id: "plugin:minimap",
           type: "minimap",
-          tooltip: "小地图",
-          order: 100,
-          visible: !!s?.container,
-          onClick() {
-            if (!e) return;
-            const t = e.style.display === "none";
-            e.style.display = t ? "" : "none";
-          }
+          icon: "flow-canvas-icon canvas-map",
+          description: "缩略图",
+          group: "tools",
+          order: 23,
+          active: () => t.value,
+          onClick: o
         }
       ];
     }
   };
 }
-function So() {
-  let s = null, e = 0;
+function yn() {
+  let n = null, e = 0;
   return {
     name: "clipboard",
     priority: 90,
-    onKeyboardShortcut(t, o) {
-      const n = t.metaKey || t.ctrlKey;
-      if (n && t.key === "c") {
-        const i = o.graph.getSelectedCells?.() ?? [];
+    onKeyboardShortcut(t, s) {
+      const o = t.metaKey || t.ctrlKey;
+      if (o && t.key === "c") {
+        const i = s.graph.getSelectedCells?.() ?? [];
         if (!i.length) return !1;
-        const r = o.flowModel.value, l = new Set(i.filter((d) => d.isNode()).map((d) => d.id)), a = [...l].map((d) => r.nodes[d]).filter(Boolean);
+        const r = s.flowModel.value, l = new Set(i.filter((c) => c.isNode()).map((c) => c.id)), a = [...l].map((c) => r.nodes[c]).filter(Boolean);
         if (!a.length) return !1;
-        const f = Object.values(r.edges).filter(
-          (d) => l.has(d.source.nodeId) && l.has(d.target.nodeId)
+        const p = Object.values(r.edges).filter(
+          (c) => l.has(c.source.nodeId) && l.has(c.target.nodeId)
         );
-        return s = { nodes: a, edges: f }, e = 0, !0;
+        return n = { nodes: a, edges: p }, e = 0, !0;
       }
-      if (n && t.key === "v") {
-        if (!s?.nodes.length) return !1;
+      if (o && t.key === "v") {
+        if (!n?.nodes.length) return !1;
         e++;
         const i = e * 30, r = /* @__PURE__ */ new Map(), l = [];
-        for (const a of s.nodes) {
-          const f = `${a.id}_cp${$().slice(0, 6)}`;
-          r.set(a.id, f), l.push({
+        for (const a of n.nodes) {
+          const p = `${a.id}_cp${Z().slice(0, 6)}`;
+          r.set(a.id, p), l.push({
             type: "node.add",
             node: {
               ...a,
-              id: f,
+              id: p,
               position: {
                 x: a.position.x + i,
                 y: a.position.y + i
@@ -2783,22 +3419,22 @@ function So() {
             }
           });
         }
-        for (const a of s.edges) {
-          const f = r.get(a.source.nodeId), d = r.get(a.target.nodeId);
-          !f || !d || l.push({
+        for (const a of n.edges) {
+          const p = r.get(a.source.nodeId), c = r.get(a.target.nodeId);
+          !p || !c || l.push({
             type: "edge.add",
             edge: {
               ...a,
-              id: `${a.id}_cp${$().slice(0, 6)}`,
-              source: { ...a.source, nodeId: f },
-              target: { ...a.target, nodeId: d },
-              labels: a.labels?.map((b) => ({ ...b, id: `${b.id}_cp${$().slice(0, 6)}` })),
+              id: `${a.id}_cp${Z().slice(0, 6)}`,
+              source: { ...a.source, nodeId: p },
+              target: { ...a.target, nodeId: c },
+              labels: a.labels?.map((g) => ({ ...g, id: `${g.id}_cp${Z().slice(0, 6)}` })),
               payload: a.payload ? { ...a.payload } : {}
             }
           });
         }
-        return l.length && o.executeCommand({
-          id: $(),
+        return l.length && s.executeCommand({
+          id: Z(),
           source: "user:keyboard",
           label: "粘贴",
           timestamp: Date.now(),
@@ -2810,26 +3446,27 @@ function So() {
   };
 }
 export {
-  Y as CanvasConstraintError,
-  xo as CanvasLayout,
-  Vt as CanvasNodePalette,
-  wo as CanvasRuntime,
-  it as CanvasSchemaError,
-  ko as CanvasToolbar,
-  fo as DefaultNode,
-  $t as NodeActionsToolbar,
-  zt as NodeQuickAddPopover,
-  Te as applyCanvasCommand,
-  So as clipboardPlugin,
-  Eo as connectionValidatorPlugin,
-  go as createBuiltinEdgeTypes,
-  bt as createCanvasHistory,
-  Co as createDefaultSchema,
-  Jt as createDefaultToolbarItems,
-  mo as createEmptyFlowModel,
-  $ as generateId,
-  No as minimapPlugin,
-  Io as selectionPlugin,
-  Mo as snaplinePlugin,
-  bo as useCanvasEditor
+  ae as CanvasConstraintError,
+  dn as CanvasLayout,
+  fo as CanvasNodePalette,
+  ln as CanvasRuntime,
+  pt as CanvasSchemaError,
+  cn as CanvasToolbar,
+  Ao as DefaultNode,
+  Zt as NodeActionsToolbar,
+  to as NodeQuickAddPopover,
+  Re as applyCanvasCommand,
+  yn as clipboardPlugin,
+  fn as connectionValidatorPlugin,
+  To as createBuiltinEdgeTypes,
+  _t as createCanvasHistory,
+  un as createDefaultSchema,
+  bo as createDefaultToolbarItems,
+  rn as createEmptyFlowModel,
+  Z as generateId,
+  vn as minimapPlugin,
+  hn as searchPlugin,
+  pn as selectionPlugin,
+  gn as snaplinePlugin,
+  an as useCanvasEditor
 };