@blueking/flow-canvas 0.0.3 → 0.0.4

package/dist/index.esm.js

@@ -1,14 +1,16 @@
-import { ref as O, computed as F, onScopeDispose as et, defineComponent as ge, onBeforeUnmount as ze, createElementBlock as S, openBlock as M, normalizeStyle as _e, createElementVNode as B, createVNode as tt, createCommentVNode as U, normalizeClass as ee, Transition as ot, withCtx as je, withModifiers as rt, createTextVNode as Ve, renderSlot as ke, onMounted as at, watch as fe, createBlock as De, Fragment as pe, renderList as Pe, toDisplayString as me, unref as lt, resolveDynamicComponent as dt, inject as ct } from "vue";
-import { Graph as ut } from "@antv/x6";
-import { register as ft } 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 ne extends Error {
+class ae extends Error {
   constructor(e) {
     super(e), this.name = "CanvasConstraintError";
   }
@@ -18,214 +20,214 @@ class pt extends Error {
     super(e), this.name = "CanvasSchemaError";
   }
 }
-function Ae(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;
-  for (let i = 0; i < e.length - 1; i++) {
-    const l = e[i], a = n[l];
-    a && typeof a == "object" && !Array.isArray(a) ? n[l] = { ...a } : n[l] = {}, n = n[l];
+  const s = n ? { ...n } : {};
+  let o = s;
+  for (let r = 0; r < e.length - 1; r++) {
+    const l = e[r], a = o[l];
+    a && typeof a == "object" && !Array.isArray(a) ? o[l] = { ...a } : o[l] = {}, o = o[l];
   }
-  const r = e[e.length - 1];
-  return t === void 0 ? delete n[r] : n[r] = t, o;
+  const i = e[e.length - 1];
+  return t === void 0 ? delete o[i] : o[i] = t, s;
 }
-function Ge(s, e) {
+function Re(n, e) {
   switch (e.type) {
     case "node.add":
-      return gt(s, e.node);
+      return gt(n, e.node);
     case "node.move":
-      return ht(s, e.nodeId, e.position);
+      return ht(n, e.nodeId, e.position);
     case "node.remove":
-      return vt(s, e.nodeId);
+      return vt(n, e.nodeId);
     case "node.update":
-      return yt(s, e.nodeId, e.patch);
+      return yt(n, e.nodeId, e.patch);
     case "node.set-payload":
-      return mt(s, e.nodeId, e.path, e.value);
+      return mt(n, e.nodeId, e.path, e.value);
     case "node.set-extensions":
-      return bt(s, e.nodeId, e.path, e.value);
+      return bt(n, e.nodeId, e.path, e.value);
     case "edge.add":
-      return wt(s, e.edge);
+      return wt(n, e.edge);
     case "edge.remove":
-      return xt(s, e.edgeId);
+      return xt(n, e.edgeId);
     case "edge.reconnect":
-      return kt(s, e.edgeId, e.source, e.target);
+      return Ct(n, e.edgeId, e.source, e.target);
     case "edge.update":
-      return Ct(s, e.edgeId, e.patch);
+      return Et(n, e.edgeId, e.patch);
     case "edge.set-payload":
-      return Et(s, e.edgeId, e.path, e.value);
+      return kt(n, e.edgeId, e.path, e.value);
     case "edge.label.update":
-      return It(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 ne(`Unknown command type: ${e.type}`);
+      throw new ae(`Unknown command type: ${e.type}`);
   }
 }
-function Ce(s, e) {
-  const t = s.nodes[e];
-  if (!t) throw new ne(`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 Ee(s, e) {
-  const t = s.edges[e];
-  if (!t) throw new ne(`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 be(s, e, t) {
-  const o = s.nodes[e.nodeId];
-  if (!o)
-    throw new ne(`${t} node "${e.nodeId}" does not exist`);
-  if (e.portId && o.ports && !o.ports.some((r) => r.id === e.portId))
-    throw new ne(`${t} port "${e.portId}" not found on node "${e.nodeId}"`);
-}
-function Te(s, e, t) {
-  return { ...s, nodes: { ...s.nodes, [e]: t } };
-}
-function Re(s, e, t) {
-  return { ...s, edges: { ...s.edges, [e]: t } };
-}
-function gt(s, e) {
-  if (s.nodes[e.id])
-    throw new ne(`Node id "${e.id}" already exists`);
-  return { ...s, nodes: { ...s.nodes, [e.id]: e } };
-}
-function ht(s, e, t) {
-  const o = Ce(s, e);
-  return Te(s, e, { ...o, position: t });
-}
-function vt(s, e) {
-  Ce(s, e);
-  const { [e]: t, ...o } = s.nodes, n = {};
-  for (const [r, i] of Object.entries(s.edges))
-    i.source.nodeId !== e && i.target.nodeId !== e && (n[r] = i);
-  return { ...s, nodes: o, edges: n };
-}
-function yt(s, e, t) {
-  const o = Ce(s, e);
-  return Te(s, e, { ...o, ...t, id: o.id });
-}
-function mt(s, e, t, o) {
-  const n = Ce(s, e), r = Ae(n.payload, t, o);
-  return Te(s, e, { ...n, payload: r });
-}
-function bt(s, e, t, o) {
-  const n = Ce(s, e), r = Ae(n.extensions, t, o);
-  return Te(s, e, { ...n, extensions: r });
-}
-function wt(s, e) {
-  if (s.edges[e.id])
-    throw new ne(`Edge id "${e.id}" already exists`);
-  if (be(s, e.source, "Source"), be(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 ne(`Duplicate label id "${o.id}" in edge "${e.id}"`);
-      t.add(o.id);
-    }
-  }
-  return { ...s, edges: { ...s.edges, [e.id]: e } };
-}
-function xt(s, e) {
-  Ee(s, e);
-  const { [e]: t, ...o } = s.edges;
-  return { ...s, edges: o };
-}
-function kt(s, e, t, o) {
-  const n = Ee(s, e), r = t ?? n.source, i = o ?? n.target;
-  return be(s, r, "Source"), be(s, i, "Target"), Re(s, e, { ...n, source: r, target: i });
-}
-function Ct(s, e, t) {
-  const o = Ee(s, e), n = { ...o, ...t, id: o.id };
-  return t.source && be(s, n.source, "Source"), t.target && be(s, n.target, "Target"), Re(s, e, n);
-}
-function Et(s, e, t, o) {
-  const n = Ee(s, e), r = Ae(n.payload, t, o);
-  return Re(s, e, { ...n, payload: r });
-}
-function It(s, e, t, o) {
-  const n = Ee(s, e);
-  if (!n.labels)
-    throw new ne(`Edge "${e}" has no labels`);
-  const r = n.labels.findIndex((l) => l.id === t);
-  if (r === -1)
-    throw new ne(`Label "${t}" not found in edge "${e}"`);
-  const i = [...n.labels];
-  return i[r] = { ...i[r], ...o, id: t }, Re(s, e, { ...n, labels: i });
-}
-function Mt(s, e, t) {
-  const o = Ae(s.meta, e, t);
-  return { ...s, meta: o };
-}
-function Nt(s, e) {
-  const t = e?.maxHistorySize ?? 100, o = O(s), n = [], r = [], i = O(!1), l = O(!1);
+    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 { ...n, edges: { ...n.edges, [e.id]: e } };
+}
+function xt(n, e) {
+  Ee(n, e);
+  const { [e]: t, ...s } = n.edges;
+  return { ...n, edges: s };
+}
+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 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 kt(n, e, t, s) {
+  const o = Ee(n, e), i = _e(o.payload, t, s);
+  return Me(n, e, { ...o, payload: i });
+}
+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 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 St(n, e, t) {
+  const s = _e(n.meta, e, t);
+  return { ...n, meta: s };
+}
+function _t(n, e) {
+  const t = e?.maxHistorySize ?? 100, s = O(n), o = [], i = [], r = O(!1), l = O(!1);
   function a() {
-    i.value = n.length > 0, l.value = r.length > 0;
+    r.value = o.length > 0, l.value = i.length > 0;
   }
-  function g(w) {
-    const N = o.value;
-    let m = N;
-    for (const D of w.commands)
-      m = Ge(m, D);
-    return n.push({ snapshot: N, envelope: w }), n.length > t && n.shift(), r.length = 0, o.value = m, a(), m;
+  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 d() {
-    const w = n.pop();
-    return w ? (r.push({ snapshot: o.value, envelope: w.envelope }), o.value = w.snapshot, a(), w.snapshot) : null;
+  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 v() {
-    const w = r.pop();
-    if (!w) return null;
-    n.push({ snapshot: o.value, envelope: w.envelope });
-    let N = o.value;
-    for (const m of w.envelope.commands)
-      N = Ge(N, m);
-    return o.value = N, a(), N;
+  function g() {
+    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 f() {
-    n.length = 0, r.length = 0, a();
+  function u() {
+    o.length = 0, i.length = 0, a();
   }
-  function p() {
-    return o.value;
+  function y() {
+    return s.value;
   }
-  function E(w) {
-    o.value = w, f();
+  function v(C) {
+    s.value = C, u();
   }
   return {
-    currentFlowModel: o,
-    execute: g,
-    undo: d,
-    redo: v,
-    canUndo: i,
+    currentFlowModel: s,
+    execute: p,
+    undo: c,
+    redo: g,
+    canUndo: r,
     canRedo: l,
     get undoStack() {
-      return n.map((w) => w.envelope);
+      return o.map((C) => C.envelope);
     },
     get redoStack() {
-      return r.map((w) => w.envelope);
+      return i.map((C) => C.envelope);
     },
-    clear: f,
-    createSnapshot: p,
-    replaceFlowModel: E
+    clear: u,
+    createSnapshot: y,
+    replaceFlowModel: v
   };
 }
-function St(s) {
-  return s !== null && typeof s == "object" && s.rejected === !0;
+function Nt(n) {
+  return n !== null && typeof n == "object" && n.rejected === !0;
 }
-class Dt {
+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 Dt {
   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 Dt {
    * 如果在 await 期间 detachRuntime 已执行，代理会将 graph 操作变为 no-op。
    */
   createSafeRuntimeContext(e, t) {
-    const o = this, n = new Proxy(e.graph, {
-      get(r, i, l) {
-        const a = Reflect.get(r, i, l);
-        return i === "use" && typeof a == "function" ? function(...d) {
-          if (o.runtimeVersion === t)
-            return a.apply(r, d);
+    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(...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 Dt {
   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), r = o.transformCommand(t, n, this.editorContext);
-      if (r === null)
+    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 (St(r))
+      if (Nt(i))
         return {
           rejected: !0,
           error: {
-            code: r.code ?? "plugin_rejected",
-            reason: r.reason,
-            source: o.name
+            code: i.code ?? "plugin_rejected",
+            reason: i.reason,
+            source: s.name
           }
         };
-      t = r;
+      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 Dt {
   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 Dt {
     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 Dt {
   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 Dt {
     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,152 +372,156 @@ class Dt {
   createPreview(e) {
     const t = this.editorContext;
     return {
-      previewFlowModel(o) {
-        const n = o ?? e.commands;
-        let r = t.flowModel.value;
-        for (const i of n)
-          r = Ge(r, i);
-        return r;
+      previewFlowModel(s) {
+        const o = s ?? e.commands;
+        let i = t.flowModel.value;
+        for (const r of o)
+          i = Re(i, r);
+        return i;
       }
     };
   }
 }
-let Pt = 0;
-function W() {
-  const s = Date.now().toString(36), e = Math.random().toString(36).substring(2, 8);
-  return `${s}-${e}-${++Pt}`;
+let Dt = 0;
+function Z() {
+  const n = Date.now().toString(36), e = Math.random().toString(36).substring(2, 8);
+  return `${n}-${e}-${++Dt}`;
 }
-const He = () => W();
-function No(s) {
-  const { schema: e, plugins: t = [], historyOptions: o } = s, n = s.idGenerator ?? He, r = { version: "1.0", ...s.initialFlowModel }, i = Nt(r, o), l = O(s.mode ?? "edit"), a = O(!1), g = O(null), d = O([]), v = {}, f = new Dt();
-  function p(m, D, z, X = "user:toolbar") {
-    const j = {
+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: X,
-      label: m,
+      source: K,
+      label: D,
       timestamp: Date.now(),
       commands: []
     };
-    f.afterCommand(j, D, z), d.value = f.collectToolbarItems(), s.onCommandResult?.({
+    u.afterCommand($, L, H), c.value = u.collectToolbarItems(), n.onCommandResult?.({
       status: "applied",
-      envelope: j,
-      flowModel: z
-    }), s.onFlowModelChange?.({
-      flowModel: z,
-      prevFlowModel: D,
-      envelope: j,
-      source: X
+      envelope: $,
+      flowModel: H
+    }), n.onFlowModelChange?.({
+      flowModel: H,
+      prevFlowModel: L,
+      envelope: $,
+      source: K
     });
   }
-  const E = {
-    execute: i.execute,
+  const v = {
+    execute: r.execute,
     undo() {
-      const m = i.currentFlowModel.value, D = i.undo();
-      return D && p("撤销", m, D), D;
+      const D = r.currentFlowModel.value, L = r.undo();
+      return L && y("撤销", D, L), L;
     },
     redo() {
-      const m = i.currentFlowModel.value, D = i.redo();
-      return D && p("重做", m, D), D;
+      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(m) {
-      const D = i.currentFlowModel.value;
-      i.replaceFlowModel(m), p("替换 FlowModel", D, m, "system:replace");
-    }
-  }, w = {
-    flowModel: F(() => i.currentFlowModel.value),
-    history: E,
+    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: l,
-    idGenerator: n,
-    executeCommand: N,
-    replaceFlowModel(m) {
-      E.replaceFlowModel(m);
+    idGenerator: o,
+    executeCommand: M,
+    replaceFlowModel(D) {
+      v.replaceFlowModel(D);
     },
-    setMode(m) {
-      l.value = m;
+    setMode(D) {
+      l.value = D;
     },
     selectionMode: a,
-    setSelectionMode(m) {
-      a.value = m;
+    setSelectionMode(D) {
+      a.value = D;
     },
-    api: g,
-    toolbarItems: d,
-    extendedApi: v,
-    _pluginManager: f
+    api: p,
+    toolbarItems: c,
+    extendedApi: g,
+    _pluginManager: u,
+    _emitUiEvent: (D) => {
+      u.dispatchUiEvent(D);
+    }
   };
-  f.install(t, {
-    flowModel: w.flowModel,
-    history: E,
+  u.install(t, {
+    flowModel: C.flowModel,
+    history: v,
     schema: e,
     mode: l,
-    idGenerator: n,
-    executeCommand: N
-  }), d.value = f.collectToolbarItems(), et(() => {
-    f.dispose();
+    idGenerator: o,
+    executeCommand: M
+  }), c.value = u.collectToolbarItems(), Ye(() => {
+    u.dispose();
   });
-  function N(m) {
-    const D = f.transformCommand(m);
-    if ("rejected" in D) {
-      const j = {
+  function M(D) {
+    const L = u.transformCommand(D);
+    if ("rejected" in L) {
+      const $ = {
         status: "rejected",
-        envelope: m,
-        error: D.error
+        envelope: D,
+        error: L.error
       };
-      return s.onCommandResult?.(j), j;
+      return n.onCommandResult?.($), $;
     }
-    const z = D.envelope, X = i.currentFlowModel.value;
+    const H = L.envelope, K = r.currentFlowModel.value;
     try {
-      const j = i.execute(z), oe = {
+      const $ = r.execute(H), W = {
         status: "applied",
-        envelope: z,
-        flowModel: j
+        envelope: H,
+        flowModel: $
       };
-      return f.afterCommand(z, X, j), d.value = f.collectToolbarItems(), s.onCommandResult?.(oe), s.onFlowModelChange?.({
-        flowModel: j,
-        prevFlowModel: X,
-        envelope: z,
-        source: z.source
-      }), oe;
-    } catch (j) {
-      if (j instanceof ne) {
-        const oe = {
+      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: z,
+          envelope: H,
           error: {
             code: "constraint_violated",
-            reason: j.message,
+            reason: $.message,
             source: "engine"
           }
         };
-        return s.onCommandResult?.(oe), oe;
+        return n.onCommandResult?.(W), W;
       }
-      throw j;
+      throw $;
     }
   }
-  return w;
+  return C;
 }
-const _t = ["top", "right", "bottom", "left"];
-function nt() {
-  return _t.map((s) => ({ id: s, group: s }));
+const At = ["top", "right", "bottom", "left"];
+function et() {
+  return At.map((n) => ({ id: n, group: n }));
 }
-function Fe(s, e) {
-  return e?.(s) ?? s.ports ?? nt();
+function Be(n, e) {
+  return e?.(n) ?? n.ports ?? et();
 }
-class At {
+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;
@@ -540,15 +546,15 @@ class At {
   /** x6EdgeConfig 中 attrs.line 的基线值，清理时恢复而非删除 */
   edgeDefaultAttrs = /* @__PURE__ */ new Map();
   lastModel = null;
-  constructor(e, t, o, n, r, i) {
-    this.graph = e, this.schema = t, this.shapeRegistry = o, this.resolveNodeDecoration = n, this.resolveEdgeDecoration = r, this.resolveCanvasContext = i;
+  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;
       }
@@ -562,100 +568,113 @@ class At {
    * 仅在节点首次创建时调用一次。
    */
   saveNodeDefaultAttrs(e, t) {
-    const n = t.x6CellConfig?.attrs?.body;
-    if (!n) return;
-    const r = {};
-    let i = !1;
-    n.stroke !== void 0 && (r.stroke = n.stroke, i = !0), n.strokeWidth !== void 0 && (r.strokeWidth = n.strokeWidth, i = !0), i && this.nodeDefaultAttrs.set(e, r);
+    const o = t.x6CellConfig?.attrs?.body;
+    if (!o) return;
+    const i = {};
+    let r = !1;
+    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 r = {};
-    let i = !1;
-    n.stroke !== void 0 && (r.stroke = n.stroke, i = !0), n.strokeWidth !== void 0 && (r.strokeWidth = n.strokeWidth, i = !0), n.strokeDasharray !== void 0 && (r.strokeDasharray = n.strokeDasharray, i = !0), i && this.edgeDefaultAttrs.set(e, r);
+    const o = t?.x6EdgeConfig?.attrs?.line;
+    if (!o) return;
+    const i = {};
+    let r = !1;
+    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 r = t?.x6EdgeConfig?.attrs?.line?.[o], i = `line/${o}`;
-    e.removeAttrByPath(i), r !== void 0 && e.setAttrByPath(i, r);
+  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() {
     this.knownNodeIds.clear(), this.knownEdgeIds.clear();
   }
   resolveNodes(e) {
     const t = /* @__PURE__ */ new Map();
-    for (const [o, n] of Object.entries(e.nodes)) {
-      const r = this.schema.nodeTypes[n.type];
-      if (!r)
+    for (const [s, o] of Object.entries(e.nodes)) {
+      const i = this.schema.nodeTypes[o.type];
+      if (!i)
         throw new pt(
-          `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.`
+          `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 i = this.shapeRegistry.registerNodeType(n.type, r.component), l = r.getSize(n), a = Fe(n, r.getPorts);
-      t.set(o, { model: n, definition: r, shapeName: i, 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 r = n.type ?? this.schema.defaultEdgeType ?? "default", i = this.schema.edgeTypes?.[r];
-      t.set(o, { model: n, definition: i });
+    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 r = this.graph.getCellById(o);
-      r ? this.updateExistingNode(r, 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: r, definition: i } = t;
-    if (e.getData()?.type !== o.type) {
+    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 !== o.position.x || a.y !== o.position.y) && e.setPosition(o.position.x, o.position.y);
-    const g = e.getSize();
-    (g.width !== n.width || g.height !== n.height) && e.setSize(n.width, n.height, { silent: !0 }), this.syncNodePorts(e, r), e.setData({ ...o }), this.applyNodeBehavior(e, o, i), this.applyNodeHighlightAndDecoration(e, o);
+    (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((i) => i.id)), r = new Set(o.map((i) => i.id));
-    for (const i of o)
-      i.id && !n.has(i.id) && e.removePort(i.id);
-    for (const i of t)
-      r.has(i.id) || e.addPort({ id: i.id, group: i.group, ...i.x6PortConfig });
+    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: r, ports: i, definition: l } = t, a = {
-      id: o.id,
-      shape: n,
-      x: o.position.x,
-      y: o.position.y,
-      width: r.width,
-      height: r.height,
-      data: { ...o },
+    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: { ...s },
       ports: {
         groups: {
           top: {
@@ -683,51 +702,54 @@ class At {
             }
           }
         },
-        items: i.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 g = this.graph.getCellById(e);
-    g && (this.applyNodeBehavior(g, o, l), this.applyNodeHighlightAndDecoration(g, 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 r = o.getBehavior(t, n);
-    if (r.draggable !== void 0 && e.setProp("draggable", r.draggable, { silent: !0 }), r.connectable !== void 0) {
-      const l = r.connectable;
+  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 ? !0 : i.targetable === !1 ? !1 : "passive";
       for (const a of e.getPorts())
         e.setPortProp(a.id, "attrs/circle/magnet", l, { silent: !0 });
     }
-    if (r.showPorts !== void 0) {
-      const l = r.showPorts;
+    if (i.showPorts !== void 0) {
+      const l = i.showPorts;
       for (const a of e.getPorts())
         e.setPortProp(a.id, "attrs/circle/visibility", l ? "visible" : "hidden", { silent: !0 });
     }
-    const i = e.getData() ?? {};
-    r.deletable !== void 0 && i._deletable !== r.deletable && e.setData({ ...i, _deletable: r.deletable }, { silent: !0 }), r.selectable !== void 0 && i._selectable !== r.selectable && e.setData({ ...e.getData(), _selectable: r.selectable }, { 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 r = this.graph.getCellById(n);
-        r && this.graph.removeCell(r), 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, r] of e) {
-      const i = this.graph.getCellById(n), { model: l, definition: a } = r;
-      i ? (this.updateExistingEdge(i, 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);
     }
   }
   /**
@@ -735,45 +757,45 @@ class At {
    * X6 Edge.getSource() 返回 { cell, port } 格式，与 FlowEdgeModel 的 { nodeId, portId } 不同，
    * 需要用 (currentSource as any).cell 来比较。
    */
-  updateExistingEdge(e, t, o, n) {
-    const r = e.getSource(), i = e.getTarget();
-    if ((r.cell !== t.source.nodeId || r.port !== t.source.portId) && e.setSource({ cell: t.source.nodeId, port: t.source.portId }), (i.cell !== t.target.nodeId || i.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;
+  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 }), 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((i) => ({
-      attrs: { label: { text: i.text ?? "" } },
-      position: i.position != null ? { distance: i.position } : void 0
-    }))), this.graph.addEdge(n), this.knownEdgeIds.add(e), this.saveEdgeDefaultAttrs(e, o);
-    const r = this.graph.getCellById(e);
-    r && this.applyEdgeStyleAndDecoration(r, t, o);
+    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(o), this.knownEdgeIds.add(e), this.saveEdgeDefaultAttrs(e, s);
+    const i = this.graph.getCellById(e);
+    i && this.applyEdgeStyleAndDecoration(i, t, s);
   }
   /**
    * 外部通知选区、高亮或 hover 变化时，重算所有边的视觉样式。
@@ -783,10 +805,10 @@ class At {
   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", r = this.schema.edgeTypes?.[n];
-        this.applyEdgeStyleAndDecoration(o, t, r);
+        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);
       }
   }
   /**
@@ -795,26 +817,30 @@ class At {
   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), r = this.prevNodeDecorationClasses.get(e.id);
-    r && (this.graph.findViewByCell(e)?.container?.classList.remove(r), this.prevNodeDecorationClasses.delete(e.id)), n?.className && (this.graph.findViewByCell(e)?.container?.classList.add(n.className), this.prevNodeDecorationClasses.set(e.id, n.className));
-    const i = n?.borderColor, a = i ?? (o ? "#3a84ff" : void 0), g = this.prevNodeDecorationColors.has(e.id) || this.defaultHighlightedNodeIds.has(e.id);
-    a ? (e.setAttrByPath("body/stroke", a), e.setAttrByPath("body/strokeWidth", 2)) : g && (this.restoreNodeAttr(e, "body/stroke", "stroke"), this.restoreNodeAttr(e, "body/strokeWidth", "strokeWidth")), i ? this.prevNodeDecorationColors.add(e.id) : this.prevNodeDecorationColors.delete(e.id), o && !i ? 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;
@@ -836,47 +862,54 @@ class At {
    * strokeWidth / strokeDasharray 仅由 schema style() 控制，不受装饰影响。
    * 最终值 = decorationStroke ?? styleStroke ?? defaultHighlightStroke ?? (清除)。
    */
-  applyEdgeStyleAndDecoration(e, t, o) {
-    const n = this.highlightedEdgeIds.has(e.id), r = this.resolveEdgeDecoration?.(t), i = this.prevEdgeDecorationClasses.get(e.id);
-    i && (this.graph.findViewByCell(e)?.container?.classList.remove(i), this.prevEdgeDecorationClasses.delete(e.id)), r?.className && (this.graph.findViewByCell(e)?.container?.classList.add(r.className), this.prevEdgeDecorationClasses.set(e.id, r.className));
-    let l, a, g;
-    if (o?.style) {
-      const E = this.graph.isSelected?.(e) ?? !1, w = this.hoveredEdgeId === e.id, N = o.style(t, { selected: E, highlighted: n, hovered: w });
-      l = N.stroke, a = N.strokeWidth, g = N.strokeDasharray;
+  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, 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, v = r?.strokeColor, f = v ?? l ?? d, p = !!o?.style || this.prevEdgeDecorationColors.has(e.id) || this.defaultHighlightedEdgeIds.has(e.id) || this.prevEdgeStyleIds.has(e.id);
-    f ? e.setAttrByPath("line/stroke", f) : p && 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"), g ? e.setAttrByPath("line/strokeDasharray", g) : 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)), v ? 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);
   }
 }
-class Tt {
-  instanceId = W();
+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 ft({
-      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 Rt {
+class $t {
   graph;
   onUiEvent;
   onCommand;
   flowModelRef;
   idGenerator;
   disposers = [];
-  constructor(e, t, o, n, r) {
-    this.graph = e, this.onUiEvent = t, this.onCommand = o, this.flowModelRef = n, this.idGenerator = r ?? He, 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();
@@ -894,13 +927,13 @@ class Rt {
         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 i = e.getData?.()?.labels ?? [], l = n.parentElement?.querySelectorAll(".x6-edge-label"), a = l ? Array.from(l).indexOf(n) : 0, g = i[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: g?.id ?? `label-${a}`
+          labelId: p?.id ?? `label-${a}`
         });
         return;
       }
@@ -916,18 +949,18 @@ class Rt {
     }), this.on("node:moved", ({ node: e }) => {
       const t = e.getPosition();
       this.onCommand({
-        id: W(),
+        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 r = e.getSourcePortId(), i = e.getTargetPortId(), l = e.id in this.flowModelRef.value.edges;
+      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.graph.removeCell(e), this.onCommand({
-        id: W(),
+        id: Z(),
         source: "user:drag",
         label: "连线",
         timestamp: Date.now(),
@@ -936,13 +969,13 @@ class Rt {
             type: "edge.add",
             edge: {
               id: this.idGenerator("edge"),
-              source: { nodeId: o.id, portId: r ?? void 0 },
-              target: { nodeId: n.id, portId: i ?? void 0 }
+              source: { nodeId: s.id, portId: i ?? void 0 },
+              target: { nodeId: o.id, portId: r ?? void 0 }
             }
           }
         ]
       })) : this.onCommand({
-        id: W(),
+        id: Z(),
         source: "user:drag",
         label: "重连",
         timestamp: Date.now(),
@@ -950,32 +983,32 @@ class Rt {
           {
             type: "edge.reconnect",
             edgeId: e.id,
-            source: { nodeId: o.id, portId: r ?? void 0 },
-            target: { nodeId: n.id, portId: i ?? 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 r = [];
-      for (let i = 0; i < Math.min(n.length, t.length); i++) {
-        const l = t[i], a = n[i];
+      const o = e.getData?.()?.labels ?? [];
+      if (!o.length || !t?.length) return;
+      const i = [];
+      for (let r = 0; r < Math.min(o.length, t.length); r++) {
+        const l = t[r], a = o[r];
         if (!a?.id) continue;
-        const g = typeof l.position == "object" ? l.position?.distance : l.position;
-        g != null && r.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: g }
+          patch: { position: p }
         });
       }
-      r.length && this.onCommand({
-        id: W(),
+      i.length && this.onCommand({
+        id: Z(),
         source: "user:drag",
         label: "拖动标签",
         timestamp: Date.now(),
-        commands: r
+        commands: i
       });
     });
   }
@@ -983,121 +1016,154 @@ class Rt {
     this.graph.on(e, t), this.disposers.push(() => this.graph.off(e, t));
   }
 }
-function $t(s) {
+function Ot(n) {
   function e(t) {
-    const o = s.getCellById(t);
-    if (!o || !o.isNode()) return null;
-    const n = o, r = n.getPosition(), i = n.getSize(), l = { x: r.x, y: r.y, width: i.width, height: i.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 Lt = 100;
-function Bt({
-  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,
+  schema: s,
+  flowModel: o,
+  getNodeBehavior: i,
   idGenerator: r,
-  defaultInsertGap: i,
-  getContextMenuItems: l,
-  onHighlightChange: a,
-  resolveNodeShape: g
+  defaultInsertGap: l,
+  getContextMenuItems: a,
+  onHighlightChange: p,
+  resolveNodeShape: c
 }) {
-  const d = r ?? He;
-  let v = [], f = [], p = null, E = !1, w = null, N = !1;
-  async function m() {
-    if (E) return p;
-    E = !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 h = await import("@antv/x6-plugin-dnd"), b = h.Dnd ?? h.default;
-      return b ? (p = new b({
-        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()
-      }), p) : 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 D() {
-    if (!N) {
-      N = !0;
-      try {
-        const h = await import("@antv/x6-plugin-export"), b = h.Export ?? h.default;
-        b && s.use(new b());
-      } 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 z = ({ node: h }) => {
-    const b = h.getData?.();
-    if (!b?._dndSessionId || b._dndSessionId !== w) return;
-    w = null;
-    const C = h.getPosition();
-    s.removeNode(h.id);
-    const { _dndSessionId: L, ...R } = b, q = R.id || d("node");
+  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: W(),
+      id: Z(),
       source: "user:drag",
       label: "拖入节点",
       timestamp: Date.now(),
       commands: [
         {
           type: "node.add",
-          node: { ...R, id: q, position: { x: C.x, y: C.y } }
+          node: { ...S, id: w, position: { x: f.x, y: f.y } }
         }
       ]
     });
   };
-  s.on("node:added", z);
-  function X(h) {
-    const b = o.nodeTypes[h.type];
-    return Fe(h, b?.getPorts);
+  n.on("node:added", H);
+  function K(h) {
+    const d = s.nodeTypes[h.type];
+    return Be(h, d?.getPorts);
+  }
+  function $(h) {
+    return h ?? tt(n.getSelectedCells?.() ?? []);
   }
-  function j(h, b, C, L, R) {
+  function W(h, d, f, I, S) {
     switch (h) {
       case "left":
         return {
-          x: b.position.x - R - L.width,
-          y: b.position.y + (C.height - L.height) / 2
+          x: d.position.x - S - I.width,
+          y: d.position.y + (f.height - I.height) / 2
         };
       case "top":
         return {
-          x: b.position.x + (C.width - L.width) / 2,
-          y: b.position.y - R - L.height
+          x: d.position.x + (f.width - I.width) / 2,
+          y: d.position.y - S - I.height
         };
       case "bottom":
         return {
-          x: b.position.x + (C.width - L.width) / 2,
-          y: b.position.y + C.height + R
+          x: d.position.x + (f.width - I.width) / 2,
+          y: d.position.y + f.height + S
         };
       default:
         return {
-          x: b.position.x + C.width + R,
-          y: b.position.y + (C.height - L.height) / 2
+          x: d.position.x + f.width + S,
+          y: d.position.y + (f.height - I.height) / 2
         };
     }
   }
-  function oe(h, b, C) {
+  function F(h, d, f) {
     switch (h) {
       case "left":
-        return { x: -(b.width + C), y: 0 };
+        return { x: -(d.width + f), y: 0 };
       case "top":
-        return { x: 0, y: -(b.height + C) };
+        return { x: 0, y: -(d.height + f) };
       case "bottom":
-        return { x: 0, y: b.height + C };
+        return { x: 0, y: d.height + f };
       default:
-        return { x: b.width + C, y: 0 };
+        return { x: d.width + f, y: 0 };
     }
   }
-  function G(h) {
+  function k(h) {
     switch (h) {
       case "left":
         return "right";
@@ -1109,355 +1175,675 @@ function Bt({
         return "left";
     }
   }
-  return {
+  const B = {
     zoomIn() {
-      s.zoom(0.1);
+      n.zoom(0.1);
     },
     zoomOut() {
-      s.zoom(-0.1);
+      n.zoom(-0.1);
     },
     zoomTo(h) {
-      s.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(h) {
-      const b = s.getCellById(h);
-      b && s.centerCell(b);
+      const d = n.getCellById(h);
+      d && n.centerCell(d);
     },
     getSelection() {
-      const h = s.getSelectedCells?.() ?? [];
-      return {
-        nodeIds: h.filter((b) => b.isNode()).map((b) => b.id),
-        edgeIds: h.filter((b) => b.isEdge()).map((b) => b.id)
-      };
+      return $();
+    },
+    getSelectionBounds(h) {
+      return Bt(n, $(h));
     },
     selectNodes(h) {
-      const b = h.map((C) => s.getCellById(C)).filter(Boolean);
-      s.select?.(b);
+      const d = h.map((f) => n.getCellById(f)).filter(Boolean);
+      n.select?.(d);
     },
     selectEdges(h) {
-      const b = h.map((C) => s.getCellById(C)).filter(Boolean);
-      s.select?.(b);
+      const d = h.map((f) => n.getCellById(f)).filter(Boolean);
+      n.select?.(d);
     },
     clearSelection() {
-      const h = s.getSelectedCells?.();
-      h?.length && s.unselect?.(h);
+      const h = n.getSelectedCells?.();
+      h?.length && n.unselect?.(h);
+    },
+    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, b) {
-      const C = async (L) => {
-        const R = await m();
-        if (!R) return;
-        const q = W();
-        w = q;
-        const Y = b(), H = g?.(Y.type), Q = s.createNode({
-          width: H?.width ?? 154,
-          height: H?.height ?? 54,
-          shape: H?.shapeName ?? "rect",
-          data: { ...Y, _dndSessionId: q }
+    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 }
         });
-        R.start(Q, L);
+        S.start(E, I);
       };
-      return h.addEventListener("mousedown", C), () => {
-        h.removeEventListener("mousedown", C);
+      return h.addEventListener("mousedown", f), () => {
+        h.removeEventListener("mousedown", f);
       };
     },
     /**
      * 通过编程方式发起连线：直接命中真实 port 元素，
      * 复用 X6 原生的连线拖拽流程与 connecting.createEdge 配置。
      */
-    startConnection(h, b) {
-      const C = s.getCellById(h);
-      if (!C?.isNode()) return;
-      const L = C, R = s.findViewByCell(L);
-      if (!R) return;
-      const q = R.findPortElem(b, "circle") ?? R.findPortElem(b);
-      if (!q) return;
-      const H = (q.matches?.("[magnet]") ? q : q.querySelector?.("[magnet]")) ?? q, Q = H.getBoundingClientRect(), de = Q.left + Q.width / 2, re = Q.top + Q.height / 2, ce = new MouseEvent("mousedown", {
-        clientX: de,
-        clientY: re,
+    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
       });
-      H.dispatchEvent(ce);
+      oe.dispatchEvent(P);
     },
     async exportAsImage(h) {
-      await D();
-      const b = s;
-      return typeof b.toPNG != "function" ? (console.warn("[flow-canvas] exportAsImage requires @antv/x6-plugin-export, add it to your dependencies"), new Blob()) : new Promise((C) => {
-        b.toPNG(
-          (L) => {
-            fetch(L).then((R) => R.blob()).then(C).catch(() => C(new Blob()));
-          },
-          {
-            backgroundColor: h?.backgroundColor ?? "#ffffff",
-            padding: h?.padding ?? 20,
-            quality: h?.quality,
-            copyStyles: !0
+      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 D();
-      const h = s;
-      return typeof h.toSVG != "function" ? (console.warn("[flow-canvas] exportAsSVG requires @antv/x6-plugin-export, add it to your dependencies"), "") : new Promise((b) => {
-        h.toSVG((C) => b(C));
-      });
+        });
+      } catch (de) {
+        return console.warn("[flow-canvas] Export failed:", de), new Blob();
+      } finally {
+        Y.remove();
+      }
     },
     highlightNodes(h) {
-      v = h, a?.(v, f);
+      u = h, p?.(u, y);
     },
     highlightEdges(h) {
-      f = h, a?.(v, f);
+      y = h, p?.(u, y);
     },
     clearHighlight() {
-      v = [], f = [], a?.([], []);
+      u = [], y = [], p?.([], []);
     },
     overlay: e,
     getContextMenuItems(h) {
-      return l?.(h) ?? [];
+      return a?.(h) ?? [];
     },
-    insertNodeToRight(h, b, C) {
-      const L = n.value, R = L.nodes[h];
-      if (!R)
+    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 "${h}" not found`, source: "api" }
         };
-      const q = C?.gap ?? i ?? Lt, Y = C?.direction ?? "right", H = o.nodeTypes[R.type], Q = o.nodeTypes[b.type], de = H?.getSize(R) ?? { width: 154, height: 54 }, re = Q?.getSize({ ...b, 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
-      }, ce = j(Y, R, de, re, q), ue = b.id || d("node"), Ie = { ...b, id: ue, position: ce }, se = [{ type: "node.add", node: Ie }], Me = oe(Y, re, q), ie = { x: ce.x, y: ce.y, width: re.width, height: re.height };
-      for (const [ae, Z] of Object.entries(L.nodes)) {
-        if (ae === h || ae === ue) continue;
-        const ve = o.nodeTypes[Z.type]?.getSize(Z) ?? { width: 154, height: 54 }, te = ie.x < Z.position.x + ve.width && ie.x + ie.width > Z.position.x, ye = ie.y < Z.position.y + ve.height && ie.y + ie.height > Z.position.y;
-        te && ye && se.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: ae,
-          position: { x: Z.position.x + Me.x, y: Z.position.y + Me.y }
+          nodeId: se,
+          position: { x: x.position.x + ne.x, y: x.position.y + ne.y }
         });
       }
-      if (C?.autoWireEdges) {
-        const ae = X(R), Z = X(Ie), we = Y, ve = G(Y), te = ae.find((K) => K.group === we), ye = Z.find((K) => K.group === ve), Ne = Z.find((K) => K.group === we), xe = te ? Object.values(L.edges).find(
-          (K) => K.source.nodeId === h && K.source.portId === te.id
-        ) : Object.values(L.edges).find((K) => K.source.nodeId === h);
-        if (xe) {
-          const K = xe.target;
-          se.push({ type: "edge.remove", edgeId: xe.id }), se.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: d("edge"),
-              source: { nodeId: h, portId: te?.id },
-              target: { nodeId: ue, portId: ye?.id }
+              id: g("edge"),
+              source: { nodeId: h, portId: q?.id },
+              target: { nodeId: z, portId: J?.id }
             }
-          }), se.push({
+          }), X.push({
             type: "edge.add",
             edge: {
-              id: d("edge"),
-              source: { nodeId: ue, portId: Ne?.id },
-              target: K
+              id: g("edge"),
+              source: { nodeId: z, portId: ue?.id },
+              target: ee
             }
           });
         } else
-          se.push({
+          X.push({
             type: "edge.add",
             edge: {
-              id: d("edge"),
-              source: { nodeId: h, portId: te?.id },
-              target: { nodeId: ue, portId: ye?.id }
+              id: g("edge"),
+              source: { nodeId: h, portId: q?.id },
+              target: { nodeId: z, portId: J?.id }
             }
           });
       }
-      const $e = {
-        id: W(),
-        source: C?.source ?? "user:toolbar",
-        label: C?.label ?? "插入节点",
+      const de = {
+        id: Z(),
+        source: f?.source ?? "user:toolbar",
+        label: f?.label ?? "插入节点",
         timestamp: Date.now(),
-        commands: se
+        commands: X
       };
-      return t($e);
+      return t(de);
     },
-    onGraphEvent(h, b) {
-      return s.on(h, b), () => s.off(h, b);
+    onGraphEvent(h, d) {
+      return n.on(h, d), () => n.off(h, d);
     },
     unsafeGetGraph() {
-      return s;
+      return n;
     }
   };
+  return B;
 }
-function Ot() {
-  const s = O(null), e = O(!1);
-  let t = null, o = !1;
-  function n(v) {
-    t && (clearTimeout(t), t = null), s.value = v;
+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 r(v = 100) {
-    o || (t && clearTimeout(t), t = setTimeout(() => {
-      s.value = null, t = null;
-    }, v));
+  function i(g = 100) {
+    s || (t && clearTimeout(t), t = setTimeout(() => {
+      n.value = null, t = null;
+    }, g));
   }
-  function i() {
-    o = !0, t && (clearTimeout(t), t = null);
+  function r() {
+    s = !0, t && (clearTimeout(t), t = null);
   }
-  function l(v = 100) {
-    o = !1, r(v);
+  function l(g = 100) {
+    s = !1, i(g);
   }
   function a() {
     t && (clearTimeout(t), t = null);
   }
-  function g() {
-    a(), o = !1, s.value = null;
+  function p() {
+    a(), s = !1, n.value = null;
   }
-  function d() {
+  function c() {
     t && clearTimeout(t);
   }
-  return { hoveredNodeId: s, isDraggingNode: e, enter: n, leave: r, enterOverlay: i, leaveOverlay: l, cancelLeave: a, reset: g, cleanup: d };
+  return { hoveredNodeId: n, isDraggingNode: e, enter: o, leave: i, enterOverlay: r, leaveOverlay: l, cancelLeave: a, reset: p, cleanup: c };
 }
-const We = 10, Se = 12;
-function Qe(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;
-  const r = 50, i = t / r;
+  let s = n.getPointAtLength(0), o = 1 / 0;
+  const i = 50, r = t / i;
   let l = 0;
-  for (let v = 0; v <= r; v++) {
-    const f = v * i, p = s.getPointAtLength(f), E = (p.x - e.x) ** 2 + (p.y - e.y) ** 2;
-    E < n && (n = E, o = p, l = f);
+  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 - i), g = Math.min(t, l + i), d = (g - a) / 20;
-  for (let v = a; v <= g; v += d) {
-    const f = s.getPointAtLength(v), p = (f.x - e.x) ** 2 + (f.y - e.y) ** 2;
-    p < n && (n = p, o = f, l = v);
+  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 Xe(s, e) {
-  return s < We || s > e - We;
+function ze(n, e) {
+  return n < qe || n > e - qe;
 }
-function Ye(s, e, t) {
-  const o = s.querySelectorAll(".x6-edge-label");
-  for (const n of o) {
-    const r = n.getBoundingClientRect();
-    if (e >= r.left - Se && e <= r.right + Se && t >= r.top - Se && t <= r.bottom + Se)
+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 Ke() {
-  const s = "http://www.w3.org/2000/svg", e = document.createElementNS(s, "g");
+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 Gt(s) {
+function zt(n) {
   let e = null, t = null;
-  function o(l, a) {
-    if (r(), t = l, a.target?.closest?.(".x6-edge-label")) return;
-    const d = s.getCellById(l);
-    if (!d?.isEdge()) return;
-    const v = s.findViewByCell(d);
-    if (!v) return;
-    const f = v.container.querySelector("path");
-    if (!f) return;
-    const p = s.clientToLocal(a.clientX, a.clientY), E = Qe(f, p);
-    if (Xe(E.length, E.totalLength) || Ye(v.container, a.clientX, a.clientY)) return;
-    const w = Ke();
-    w.setAttribute("transform", `translate(${E.x}, ${E.y})`), v.container.appendChild(w), e = w;
-  }
-  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;
     if (l.target?.closest?.(".x6-edge-label")) {
       e && e.setAttribute("display", "none");
       return;
     }
-    const g = s.getCellById(t);
-    if (!g?.isEdge()) return;
-    const d = s.findViewByCell(g);
-    if (!d) return;
-    const v = d.container.querySelector("path");
-    if (!v) return;
-    const f = s.clientToLocal(l.clientX, l.clientY), p = Qe(v, f);
-    if (Xe(p.length, p.totalLength) || Ye(d.container, l.clientX, l.clientY))
+    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(${p.x}, ${p.y})`);
+      e.removeAttribute("display"), e.setAttribute("transform", `translate(${y.x}, ${y.y})`);
     else {
-      const E = Ke();
-      E.setAttribute("transform", `translate(${p.x}, ${p.y})`), d.container.appendChild(E), e = E;
+      const v = je();
+      v.setAttribute("transform", `translate(${y.x}, ${y.y})`), c.container.appendChild(v), e = v;
     }
   }
-  function r() {
+  function i() {
     e && (e.remove(), e = null), t = null;
   }
-  function i(l) {
+  function r(l) {
     l === t && (e = null, t = null);
   }
-  return { show: o, move: n, remove: r, handleEdgeRemoved: i };
+  return { show: s, move: o, remove: i, handleEdgeRemoved: r };
 }
-function zt(s) {
+function Ft(n) {
   let e = null, t = 0;
-  function o(d) {
-    const v = d ? "visible" : "hidden";
-    for (const f of s.getNodes())
-      for (const p of f.getPorts())
-        f.setPortProp(p.id, "attrs/circle/visibility", v);
+  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 v of d.getPorts())
-        d.setPortProp(v.id, "attrs/circle/visibility", "visible");
+      for (const g of c.getPorts())
+        c.setPortProp(g.id, "attrs/circle/visibility", "visible");
   }
-  function r(d) {
+  function i(c) {
     if (!e)
-      for (const v of d.getPorts())
-        d.setPortProp(v.id, "attrs/circle/visibility", "hidden");
-  }
-  function i(d, v) {
-    if (!d.getTargetCell())
-      if (e = d.id, v?.size)
-        for (const f of s.getNodes()) {
-          const p = v.has(f.id) ? "hidden" : "visible";
-          for (const E of f.getPorts())
-            f.setPortProp(E.id, "attrs/circle/visibility", p);
+      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
-        o(!0);
+        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 g() {
+  function p() {
     return !e && Date.now() >= t;
   }
   return {
-    showNodePorts: n,
-    hideNodePorts: r,
-    handleEdgeAdded: i,
+    showNodePorts: o,
+    hideNodePorts: i,
+    handleEdgeAdded: r,
     handleEdgeConnected: l,
     handleEdgeRemoved: a,
-    canShowEdgeTool: g
+    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
   };
 }
-const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
+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)"
+      }
+    ]
+  };
+}
+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: {},
@@ -1467,15 +1853,15 @@ const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
     actionsOffset: {}
   },
   emits: ["action"],
-  setup(s, { emit: e }) {
-    const t = s, o = F(() => {
-      const v = t.actionsOffset?.x ?? 0, f = t.actionsOffset?.y ?? 0, p = v !== 0 || f !== 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: p ? `translate(${v}px, ${f}px)` : "translateX(-100%)"
+        transform: y ? `translate(${g}px, ${u}px)` : "translateX(-100%)"
       };
-    }), n = e, r = F(() => ({
+    }), o = e, i = j(() => ({
       debug: {
         visible: t.config.showDebug && t.behavior.debuggable !== !1,
         disabled: t.behavior.debugDisabled === !0
@@ -1496,189 +1882,213 @@ const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
         visible: t.config.showDisconnect && t.behavior.disconnectable !== !1,
         disabled: t.behavior.disconnectDisabled === !0
       }
-    })), i = F(() => r.value.copy.visible || r.value.copyInsert.visible || r.value.disconnect.visible), l = O(!1);
+    })), r = j(() => i.value.copy.visible || i.value.copyInsert.visible || i.value.disconnect.visible), l = O(!1);
     let a = null;
-    function g() {
+    function p() {
       a && (clearTimeout(a), a = null), l.value = !0;
     }
-    function d() {
+    function c() {
       a = setTimeout(() => {
         l.value = !1, a = null;
       }, 100);
     }
-    return ze(() => {
+    return Se(() => {
       a && clearTimeout(a);
-    }), (v, f) => (M(), S("div", {
+    }), (g, u) => (N(), A("div", {
       class: "flow-canvas-node-actions",
-      style: _e(o.value)
+      style: ve(s.value)
     }, [
-      B("div", jt, [
-        r.value.debug.visible ? (M(), S("i", {
+      G("div", Kt, [
+        i.value.debug.visible ? (N(), A("i", {
           key: 0,
-          class: ee(["flow-canvas-icon canvas-debug flow-canvas-node-actions__icon", { "is-disabled": r.value.debug.disabled }]),
-          onClick: f[0] || (f[0] = (p) => !r.value.debug.disabled && n("action", "debug", s.node.id))
-        }, null, 2)) : U("", !0),
-        r.value.delete.visible ? (M(), S("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: ee(["flow-canvas-icon canvas-shanchu flow-canvas-node-actions__icon", { "is-disabled": r.value.delete.disabled }]),
-          onClick: f[1] || (f[1] = (p) => !r.value.delete.disabled && n("action", "delete", s.node.id))
-        }, null, 2)) : U("", !0),
-        i.value ? (M(), S("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: g,
-          onMouseleave: d
-        }, [...f[5] || (f[5] = [
-          B("i", { class: "flow-canvas-icon canvas-gengduo flow-canvas-node-actions__icon" }, null, -1)
-        ])], 32)) : U("", !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)
       ]),
-      tt(ot, { name: "flow-canvas-fade" }, {
-        default: je(() => [
-          l.value && i.value ? (M(), S("div", {
+      Ze(Qe, { name: "flow-canvas-fade" }, {
+        default: $e(() => [
+          l.value && r.value ? (N(), A("div", {
             key: 0,
             class: "flow-canvas-node-actions__dropdown",
-            onMouseenter: g,
-            onMouseleave: d
+            onMouseenter: p,
+            onMouseleave: c
           }, [
-            r.value.copy.visible ? (M(), S("div", {
+            i.value.copy.visible ? (N(), A("div", {
               key: 0,
-              class: ee(["flow-canvas-node-actions__dropdown-item", { "is-disabled": r.value.copy.disabled }]),
-              onClick: f[2] || (f[2] = (p) => !r.value.copy.disabled && n("action", "copy", s.node.id))
-            }, [...f[6] || (f[6] = [
-              B("i", { class: "flow-canvas-icon canvas-copy-fuzhi-2" }, null, -1),
-              B("span", null, "复制", -1)
-            ])], 2)) : U("", !0),
-            r.value.copyInsert.visible ? (M(), S("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: ee(["flow-canvas-node-actions__dropdown-item", { "is-disabled": r.value.copyInsert.disabled }]),
-              onClick: f[3] || (f[3] = (p) => !r.value.copyInsert.disabled && n("action", "copy-insert", s.node.id))
-            }, [...f[7] || (f[7] = [
-              B("i", { class: "flow-canvas-icon canvas-fuzhibingcharu" }, null, -1),
-              B("span", null, "复制并插入", -1)
-            ])], 2)) : U("", !0),
-            r.value.disconnect.visible ? (M(), S("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: ee(["flow-canvas-node-actions__dropdown-item", { "is-disabled": r.value.disconnect.disabled }]),
-              onClick: f[4] || (f[4] = (p) => !r.value.disconnect.disabled && n("action", "disconnect", s.node.id))
-            }, [...f[8] || (f[8] = [
-              B("i", { class: "flow-canvas-icon canvas-unlock-jiebang" }, null, -1),
-              B("span", null, "断开连线", -1)
-            ])], 2)) : U("", !0)
-          ], 32)) : U("", !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));
   }
-}), he = (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;
-}, Ft = /* @__PURE__ */ he(Ht, [["__scopeId", "data-v-3b39dab5"]]), qt = {
+}, Zt = /* @__PURE__ */ pe(Yt, [["__scopeId", "data-v-3b39dab5"]]), Qt = {
   key: 0,
   class: "flow-canvas-quick-add__tooltip"
-}, Ut = 5, Vt = /* @__PURE__ */ ge({
+}, 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, r = O(), i = O(), l = O(!1), a = O(!1);
-    let g = null, d = !1, v = null;
-    function f(G) {
-      G.preventDefault(), G.stopPropagation(), g = { x: G.clientX, y: G.clientY }, d = !1, document.addEventListener("mousemove", p), document.addEventListener("mouseup", E);
+  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 p(G) {
-      if (!g) return;
-      const T = G.clientX - g.x, h = G.clientY - g.y;
-      Math.sqrt(T * T + h * h) >= Ut && (d = !0, w(), 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 E() {
-      w(), d || N(), g = null, d = !1;
+    function v() {
+      C(), c || M(), p = null, c = !1;
     }
-    function w() {
-      document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", E);
+    function C() {
+      document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", v);
     }
-    function N() {
-      a.value ? D() : m();
+    function M() {
+      a.value ? L() : D();
     }
-    function m() {
-      a.value = !0, n("open", o.node.id), requestAnimationFrame(() => {
-        document.addEventListener("mousedown", z);
+    function D() {
+      a.value = !0, o("open", s.node.id), requestAnimationFrame(() => {
+        document.addEventListener("mousedown", H);
       });
     }
-    function D() {
-      a.value = !1, n("close"), document.removeEventListener("mousedown", z);
+    function L() {
+      a.value = !1, o("close"), document.removeEventListener("mousedown", H);
     }
-    function z(G) {
-      const T = G.target;
-      r.value?.contains(T) || i.value?.contains(T) || D();
+    function H(F) {
+      const k = F.target;
+      i.value?.contains(k) || r.value?.contains(k) || L();
     }
-    function X() {
-      a.value || n("mouseleave");
+    function K() {
+      a.value || o("mouseleave");
     }
-    function j() {
-      v && (clearTimeout(v), v = null), n("mouseenter");
+    function $() {
+      g && (clearTimeout(g), g = null), o("mouseenter");
     }
-    function oe() {
-      v = setTimeout(() => {
-        D(), n("mouseleave"), v = null;
+    function W() {
+      g = setTimeout(() => {
+        L(), o("mouseleave"), g = null;
       }, 150);
     }
-    return ze(() => {
-      w(), v && clearTimeout(v), document.removeEventListener("mousedown", z);
-    }), e({ closePopover: D }), (G, T) => (M(), S("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: _e({ left: `${s.portPosition.x}px`, top: `${s.portPosition.y}px` }),
-      onMouseenter: T[2] || (T[2] = (h) => n("mouseenter")),
-      onMouseleave: X,
-      onClick: T[3] || (T[3] = rt(() => {
+      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"]))
     }, [
-      B("div", {
+      G("div", {
         ref_key: "btnRef",
-        ref: r,
-        class: ee(["flow-canvas-quick-add__btn", { "is-hovered": l.value, "is-active": a.value }]),
-        onMouseenter: T[0] || (T[0] = (h) => l.value = !0),
-        onMouseleave: T[1] || (T[1] = (h) => l.value = !1),
-        onMousedown: f
-      }, [...T[4] || (T[4] = [
-        B("i", { class: "flow-canvas-icon canvas-zoom-add" }, null, -1)
+        ref: i,
+        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 ? (M(), S("div", qt, [...T[5] || (T[5] = [
-        B("div", null, [
-          B("b", null, "点击"),
-          Ve(" 添加节点")
+      l.value && !a.value ? (N(), A("div", Qt, [...k[5] || (k[5] = [
+        G("div", null, [
+          G("b", null, "点击"),
+          Pe(" 添加节点")
         ], -1),
-        B("div", null, [
-          B("b", null, "拖拽"),
-          Ve(" 连接节点")
+        G("div", null, [
+          G("b", null, "拖拽"),
+          Pe(" 连接节点")
         ], -1)
-      ])])) : U("", !0),
-      tt(ot, { name: "flow-canvas-fade" }, {
-        default: je(() => [
-          a.value ? (M(), S("div", {
+      ])])) : V("", !0),
+      Ze(Qe, { name: "flow-canvas-fade" }, {
+        default: $e(() => [
+          a.value ? (N(), A("div", {
             key: 0,
             ref_key: "popoverRef",
-            ref: i,
+            ref: r,
             class: "flow-canvas-quick-add__popover",
-            onMouseenter: j,
-            onMouseleave: oe
+            onMouseenter: $,
+            onMouseleave: W
           }, [
-            ke(G.$slots, "default", {}, () => [
-              T[6] || (T[6] = B("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)) : U("", !0)
+          ], 544)) : V("", !0)
         ]),
         _: 3
       })
     ], 36));
   }
-}), Wt = /* @__PURE__ */ he(Vt, [["__scopeId", "data-v-b98695cf"]]), Qt = { class: "flow-canvas-runtime-core__overlay" }, Xt = /* @__PURE__ */ ge({
+}), 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: {},
@@ -1688,47 +2098,20 @@ const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
     getConnectionExcludedNodeIds: { type: Function }
   },
   emits: ["ui-event"],
-  setup(s, { emit: e }) {
-    const t = s, o = e, n = O(), r = O();
-    let i, l, a, g;
-    const d = Ot(), { hoveredNodeId: v, isDraggingNode: f } = d, p = d.enterOverlay, E = () => d.leaveOverlay(), w = O(null), N = O(!1);
-    let m = null;
-    function D(y) {
-      return N.value ? !0 : (X(), ie(y) ? (w.value = y, !0) : (w.value = null, !1));
-    }
-    function z() {
-      m && clearTimeout(m), m = setTimeout(() => {
-        w.value = null, m = null;
-      }, 150);
-    }
-    function X() {
-      m && (clearTimeout(m), m = null);
-    }
-    function j() {
-      X(), d.enterOverlay();
-    }
-    function oe() {
-      z(), 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 G = null, T = null, h = null, b = null, C = null;
-    const L = O(0), R = F(
-      () => {
-        if (L.value, !t.editor.api.value) return [];
-        const y = t.editor.flowModel.value, x = t.editor.api.value.overlay, c = [];
-        for (const [I, P] of Object.entries(y.nodes)) {
-          const _ = t.editor._pluginManager.collectNodeDecorations(P);
-          if (!_?.badge) continue;
-          const $ = x.getNodeScreenRect(I);
-          $ && c.push({
-            nodeId: I,
-            x: $.x + $.width - 4,
-            y: $.y - 8,
-            badge: _.badge
-          });
-        }
-        return c;
-      }
-    ), q = F(() => ({
+    const W = j(() => t.editor.mode.value === "edit" && t.editor.selectionMode.value), F = j(() => ({
       showDebug: !1,
       showDelete: !0,
       showCopy: !0,
@@ -1736,301 +2119,188 @@ const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
       showDisconnect: !0,
       insertGap: 100,
       ...t.nodeActions
-    })), Y = F(() => {
-      L.value;
-      const y = v.value;
-      if (!y || f.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
-      const x = t.editor.flowModel.value, c = x.nodes[y];
-      if (!c) return null;
-      const I = t.editor.api.value.overlay.getNodeScreenRect(y);
-      if (!I) return null;
-      const _ = t.editor.schema.nodeTypes[c.type]?.getBehavior?.(c, {
-        api: t.editor.api.value,
-        flowModel: x,
-        history: t.editor.history,
-        mode: t.editor.mode.value
-      }) ?? {};
-      return _.showActions === !1 ? null : {
-        node: c,
-        position: { x: I.x + I.width, y: I.y + I.height + 4 },
-        behavior: _
+    })), 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
       };
-    }), H = F(
-      () => ({
-        enabled: !0,
-        tooltipText: "",
-        portGroup: "right",
-        ...t.quickAdd
-      })
-    ), Q = F(() => {
-      if (L.value, !H.value.enabled) return null;
-      const y = w.value;
-      if (!y || f.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
-      const x = t.editor.flowModel.value, c = x.nodes[y];
-      if (!c) return null;
-      const P = t.editor.schema.nodeTypes[c.type]?.getBehavior?.(c, {
-        api: t.editor.api.value,
-        flowModel: x,
-        history: t.editor.history,
-        mode: t.editor.mode.value
-      }) ?? {};
-      if (P.quickAddEnabled === !1) return null;
-      const _ = te(c);
-      return _ ? {
-        node: c,
-        portId: _.portId,
-        portGroup: _.portGroup,
-        portPosition: _.portPosition,
-        behavior: P
-      } : null;
-    }), de = O();
-    function re(y) {
-      N.value = !0;
-      const x = Q.value;
-      x && o("ui-event", {
-        type: "node.quick-add",
-        nodeId: y,
-        position: x.portPosition
-      });
-    }
-    function ce() {
-      N.value = !1;
-    }
-    function ue(y) {
-      const x = t.editor.api.value;
-      if (!x) return;
-      const I = t.editor.flowModel.value.nodes[y];
-      if (!I) return;
-      const P = te(I);
-      P && x.startConnection(y, P.portId);
-    }
-    function Ie(y, x) {
-      const c = t.editor.api.value;
-      if (!c) return;
-      const I = x.id || t.editor.idGenerator("node"), P = { ...x, id: I }, _ = t.editor.flowModel.value.nodes[y];
-      if (!_) return;
-      c.insertNodeToRight(y, P, {
-        autoWireEdges: !0,
-        direction: ye(_),
-        gap: q.value.insertGap,
-        source: "user:quick-add",
-        label: "快捷插入节点"
-      }).status === "applied" && o("ui-event", { type: "node.action.quick-insert", sourceNodeId: y, newNodeId: I }), de.value?.closePopover();
-    }
-    function se(y) {
+    }), 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: t.editor.idGenerator("node"),
-        type: y.type,
-        label: y.label,
-        ports: y.ports ? JSON.parse(JSON.stringify(y.ports)) : void 0,
-        payload: y.payload ? JSON.parse(JSON.stringify(y.payload)) : void 0,
-        extensions: y.extensions ? JSON.parse(JSON.stringify(y.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 Me(y, x) {
-      const c = t.editor, I = c.api.value;
-      switch (y) {
-        case "delete": {
-          c.executeCommand({
-            id: W(),
-            source: "user:toolbar",
-            label: "删除节点",
-            timestamp: Date.now(),
-            commands: [{ type: "node.remove", nodeId: x }]
-          }), o("ui-event", { type: "node.action.delete", nodeId: x }), v.value = null;
-          break;
-        }
-        case "copy": {
-          if (!I) break;
-          const P = c.flowModel.value.nodes[x];
-          if (!P) break;
-          const _ = se(P);
-          I.insertNodeToRight(x, _, {
-            autoWireEdges: !1,
-            gap: q.value.insertGap,
-            label: "复制节点"
-          }), o("ui-event", { type: "node.action.copy", sourceNodeId: x, newNodeId: _.id });
-          break;
-        }
-        case "copy-insert": {
-          if (!I) break;
-          const P = c.flowModel.value.nodes[x];
-          if (!P) break;
-          const _ = se(P);
-          I.insertNodeToRight(x, _, {
-            autoWireEdges: !0,
-            gap: q.value.insertGap,
-            label: "复制并插入节点"
-          }), o("ui-event", { type: "node.action.copy-insert", sourceNodeId: x, newNodeId: _.id });
-          break;
-        }
-        case "disconnect": {
-          const P = c.flowModel.value, _ = Object.entries(P.edges).filter(([, $]) => {
-            const J = $;
-            return J.source.nodeId === x || J.target.nodeId === x;
-          }).map(([$]) => $);
-          if (_.length === 0) break;
-          c.executeCommand({
-            id: W(),
-            source: "user:toolbar",
-            label: "断开连线",
-            timestamp: Date.now(),
-            commands: _.map(($) => ({ type: "edge.remove", edgeId: $ }))
-          }), o("ui-event", { type: "node.action.disconnect", nodeId: x, edgeIds: _ });
-          break;
+    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 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: x });
-          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 ie(y) {
-      if (!H.value.enabled || t.editor.mode.value !== "edit") return !1;
-      const x = t.editor.flowModel.value, c = x.nodes[y];
-      return !c || (t.editor.schema.nodeTypes[c.type]?.getBehavior?.(c, {
-        api: t.editor.api.value,
-        flowModel: x,
-        history: t.editor.history,
-        mode: t.editor.mode.value
-      }) ?? {}).quickAddEnabled === !1 ? !1 : !!te(c);
-    }
-    function $e(y) {
-      const x = t.editor.schema.nodeTypes[y.type];
-      return Fe(y, x?.getPorts);
-    }
-    function ae(y) {
-      return y === "top" || y === "right" || y === "bottom" || y === "left";
-    }
-    function Z(y, x) {
-      const c = H.value.getPort?.(y, x);
-      if (!c) return null;
-      const I = typeof c == "string" ? c : c.id;
-      return x.find((P) => P.id === I) ?? null;
-    }
-    function we(y, x) {
-      const c = t.editor.api.value?.overlay.getNodeScreenRect(y);
-      if (!c) return null;
-      switch (x) {
-        case "top":
-          return { x: c.x + c.width / 2, y: c.y };
-        case "bottom":
-          return { x: c.x + c.width / 2, y: c.y + c.height };
-        case "left":
-          return { x: c.x, y: c.y + c.height / 2 };
-        case "right":
-          return { x: c.x + c.width, y: c.y + c.height / 2 };
-        default:
-          return null;
-      }
-    }
-    function ve(y, x, c) {
-      const I = i.getCellById(y);
-      if (I?.isNode()) {
-        const P = I, _ = i.findViewByCell(P), $ = _?.findPortElem(x, "circle") ?? _?.findPortElem(x);
-        if ($) {
-          const J = i.container.getBoundingClientRect(), le = $.getBoundingClientRect();
-          return {
-            x: le.left - J.left + le.width / 2,
-            y: le.top - J.top + le.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 we(y, c);
-    }
-    function te(y) {
-      const x = $e(y), c = Z(y, x) ?? x.find((P) => P.group === H.value.portGroup) ?? null;
-      if (!c) return null;
-      const I = ve(y.id, c.id, c.group);
-      return I ? {
-        portId: c.id,
-        portGroup: c.group,
-        portPosition: I
-      } : null;
-    }
-    function ye(y) {
-      const x = te(y), c = H.value.insertDirection;
-      if (typeof c == "function") {
-        const I = c(
-          y,
-          x ? { id: x.portId, group: x.portGroup } : null
-        );
-        if (I) return I;
-      } else if (c)
-        return c;
-      return x && ae(x.portGroup) ? x.portGroup : ae(H.value.portGroup) ? H.value.portGroup : "right";
-    }
-    function Ne(y) {
-      if (t.editor.mode.value !== "edit") return;
-      t.editor._pluginManager.dispatchKeyboardShortcut(y) && (y.preventDefault(), y.stopPropagation());
-    }
-    function xe() {
-      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 K(y) {
-      const x = t.editor.schema.defaultEdgeType ?? "default", c = t.editor.schema.edgeTypes?.[x], I = {
-        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);
           }
         }
-      };
-      c?.router && (I.router = typeof c.router == "string" ? { name: c.router } : c.router), c?.connector && (I.connector = typeof c.connector == "string" ? { name: c.connector } : c.connector), c?.x6EdgeConfig && Object.assign(I, c.x6EdgeConfig);
-      const P = I.attrs ?? {}, _ = P.line ?? {};
-      return I.attrs = {
-        ...P,
-        line: {
-          ..._,
-          targetMarker: xe()
+        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;
         }
-      }, y.createEdge(I);
+        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);
     }
-    return at(() => {
-      if (!r.value) return;
-      const y = /* @__PURE__ */ new Set(["model", "container"]), x = {};
+    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 x = /* @__PURE__ */ new Set(["model", "container"]), b = {};
       if (t.graphOptions)
-        for (const [u, k] of Object.entries(t.graphOptions)) {
-          if (y.has(u)) {
-            console.warn(`[flow-canvas] graphOptions.${u} 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;
           }
-          x[u] = k;
+          b[R] = ge;
         }
-      i = new ut({
-        container: r.value,
+      r = new dt({
+        container: i.value,
         autoResize: !0,
         background: { color: "#edf2fc" },
         grid: { visible: !0, size: 20, type: "dot" },
         highlighting: {
-          // 连接吸附到 port 时不再叠加 X6 默认橙色高亮，由业务层自行控制端口视觉。
           magnetAdsorbed: { name: "className", args: { className: "flow-canvas-magnet-adsorbed" } }
         },
         panning: { enabled: !0 },
         mousewheel: { enabled: !0, modifiers: ["ctrl", "meta"] },
         interacting: {
-          nodeMovable(u) {
-            return u.cell.getProp("draggable") !== !1;
+          nodeMovable(R) {
+            return R.cell.getProp("draggable") !== !1;
           }
         },
         connecting: {
@@ -2044,16 +2314,16 @@ const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
           connectionPoint: "anchor",
           snap: { radius: 30 },
           createEdge() {
-            return K(this);
+            return Xt(this, t.editor.schema);
           }
         },
-        ...x
-      }), a = new Tt(), l = new At(
-        i,
+        ...b
+      }), a = new Lt(), l = new Rt(
+        r,
         t.editor.schema,
         a,
-        (u) => t.editor._pluginManager.collectNodeDecorations(u),
-        (u) => t.editor._pluginManager.collectEdgeDecorations(u),
+        (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,
@@ -2061,313 +2331,194 @@ const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
           mode: t.editor.mode.value
         } : null
       );
-      const c = $t(i), I = Bt({
-        graph: i,
-        overlayManager: c,
-        executeCommand: (u) => t.editor.executeCommand(u),
+      const _ = Ot(r), q = qt({
+        graph: r,
+        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: (u) => t.editor._pluginManager.collectContextMenuItems(u),
-        onHighlightChange: (u, k) => {
-          l.setHighlightedNodes(u), l.setHighlightedEdges(k), 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: (u) => {
-          const k = t.editor.schema.nodeTypes[u];
-          if (!k) return null;
-          const A = a.registerNodeType(u, k.component), V = k.getSize({ id: "", type: u, position: { x: 0, y: 0 } });
-          return { shapeName: A, width: V.width, height: V.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 = I;
-      const P = {
+      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: I,
-        overlay: c,
-        graph: i
+        selectionMode: t.editor.selectionMode,
+        api: q,
+        overlay: _,
+        graph: r
       };
-      t.editor._pluginManager.attachRuntime(P);
-      const _ = t.editor._pluginManager.collectExtendedApi();
-      Object.assign(t.editor.extendedApi, _), g = new Rt(
-        i,
-        (u) => {
-          (u.type === "node.click" || u.type === "node.dblclick" || u.type === "node.contextmenu") && d.enter(u.nodeId), t.editor._pluginManager.dispatchUiEvent(u), o("ui-event", u);
+      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,
+        (R) => {
+          (R.type === "node.click" || R.type === "node.dblclick" || R.type === "node.contextmenu") && v.enter(R.nodeId), t.editor._emitUiEvent(R);
         },
-        (u) => {
+        (R) => {
           if (l.isSyncing) return;
-          if (t.editor.executeCommand(u).status !== "applied") {
-            for (const A of u.commands)
-              if (A.type === "edge.add") {
-                const V = i.getCellById(A.edge.id);
-                V && i.removeCell(V);
+          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,
         t.editor.idGenerator
-      ), G = Gt(i);
-      const $ = zt(i), J = i, le = (u) => {
-        const k = J.isRubberbandEnabled?.() ?? !1;
-        k && J.disableRubberband?.(), u ? i.enablePanning() : i.disablePanning(), k && J.enableRubberband?.();
-      }, Le = () => {
-        L.value++;
-      };
-      i.on("translate", Le), i.on("scale", Le), i.on("resize", Le), i.on("node:move", ({ node: u }) => {
-        f.value = !0;
-        const k = t.editor.flowModel.value.nodes[u.id];
-        k && t.editor.api.value && t.editor.schema.nodeTypes[k.type]?.getBehavior?.(k, {
-          api: t.editor.api.value,
-          flowModel: t.editor.flowModel.value,
-          history: t.editor.history,
-          mode: t.editor.mode.value
-        })?.bringToFrontOnDrag === !1 || u.toFront?.();
-      }), i.on("node:moved", () => {
-        f.value = !1;
-      }), i.on("node:mouseenter", ({ node: u }) => {
-        d.enter(u.id);
-        const k = t.editor.flowModel.value.nodes[u.id];
-        if (k && t.editor.api.value && t.editor.schema.nodeTypes[k.type]?.getBehavior?.(k, {
-          api: t.editor.api.value,
-          flowModel: t.editor.flowModel.value,
-          history: t.editor.history,
-          mode: t.editor.mode.value
-        })?.showPorts === !1) {
-          H.value.enabled && D(u.id);
-          return;
-        }
-        H.value.enabled && D(u.id) || $.showNodePorts(u);
-      }), i.on("node:mouseleave", ({ node: u }) => {
-        const k = t.editor.flowModel.value.nodes[u.id];
-        let A = 100;
-        k && t.editor.api.value && t.editor.schema.nodeTypes[k.type]?.getBehavior?.(k, {
-          api: t.editor.api.value,
-          flowModel: t.editor.flowModel.value,
-          history: t.editor.history,
-          mode: t.editor.mode.value
-        })?.actionsOffset && (A = 300), d.leave(A), H.value.enabled ? w.value === u.id && !N.value ? z() : w.value !== u.id && $.hideNodePorts(u) : $.hideNodePorts(u);
-      });
-      function st(u) {
-        const k = i.getCellById(u);
-        if (!k?.isNode()) return;
-        const A = k, V = t.editor.flowModel.value.nodes[u];
-        if (!V) return;
-        const Be = te(V);
-        let qe = !0;
-        t.editor.api.value && t.editor.schema.nodeTypes[V.type]?.getBehavior?.(V, {
-          api: t.editor.api.value,
-          flowModel: t.editor.flowModel.value,
-          history: t.editor.history,
-          mode: t.editor.mode.value
-        })?.hidePortForQuickAdd === !1 && (qe = !1);
-        const it = qe && !f.value && !!Be && ie(u);
-        for (const Oe of A.getPorts()) {
-          const Ue = it && Oe.id === Be?.portId ? "hidden" : "visible";
-          A.setPortProp(Oe.id, "attrs/circle/visibility", Ue);
-        }
-      }
-      fe(
-        [w, f],
-        ([u], [k]) => {
-          if (k && k !== u) {
-            const A = i.getCellById(k);
-            A?.isNode() && $.hideNodePorts(A);
-          }
-          u && st(u);
-        },
-        { flush: "sync" }
-      ), fe(Q, (u) => {
-        u || (N.value = !1);
-      }), i.on("edge:added", ({ edge: u }) => {
-        let k;
-        if (t.getConnectionExcludedNodeIds && !u.getTargetCell()) {
-          const A = u.getSourceCell();
-          if (A) {
-            const V = t.getConnectionExcludedNodeIds(A.id);
-            k = V instanceof Set ? V : new Set(V);
-          }
-        }
-        $.handleEdgeAdded(u, k);
-      }), i.on("edge:connected", () => {
-        $.handleEdgeConnected();
-      }), i.on("edge:removed", ({ edge: u }) => {
-        $.handleEdgeRemoved(u.id), G.handleEdgeRemoved(u.id);
-      }), i.on("selection:changed", () => {
-        const u = i.getSelectedCells?.() ?? [], k = {
-          nodeIds: u.filter((A) => A.isNode()).map((A) => A.id),
-          edgeIds: u.filter((A) => A.isEdge()).map((A) => A.id)
-        };
-        t.editor._pluginManager.dispatchSelectionChange(k), o("ui-event", {
+      ), 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: k.nodeIds,
-          edgeIds: k.edgeIds
-        }), l.refreshEdgeStyles();
-      }), i.on("edge:mouseenter", ({ edge: u, e: k }) => {
-        l.setHoveredEdge(u.id), l.refreshEdgeStyles(), t.editor.mode.value === "edit" && $.canShowEdgeTool() && G.show(u.id, k);
-      }), T = (u) => G.move(u), i.container.addEventListener("mousemove", T), h = (u) => {
-        if (!v.value && !w.value) return;
-        const k = u.target;
-        if (k?.closest?.(".x6-node") || k?.closest?.(".flow-canvas-node-actions") || k?.closest?.(".flow-canvas-quick-add")) {
-          d.cancelLeave(), X();
-          return;
-        }
-        d.leave(180), N.value || z();
-      }, n.value?.addEventListener("mousemove", h), b = () => {
-        d.reset(), N.value || (w.value = null);
-      }, n.value?.addEventListener("mouseleave", b), i.on("edge:mouseleave", () => {
-        l.setHoveredEdge(null), l.refreshEdgeStyles(), G.remove();
-      }), i.on("edge:click", ({ edge: u, e: k }) => {
-        k.target?.closest?.(".flow-canvas-edge-delete-tool") && t.editor.mode.value === "edit" && (G.remove(), t.editor.executeCommand({
-          id: W(),
-          source: "user:toolbar",
-          label: "删除连线",
-          timestamp: Date.now(),
-          commands: [{ type: "edge.remove", edgeId: u.id }]
-        }));
-      }), n.value?.addEventListener("keydown", Ne), l.syncFlowModel(t.editor.flowModel.value), fe(
-        () => t.editor.flowModel.value,
-        (u) => l.syncFlowModel(u)
-      ), fe(
-        () => t.editor.selectionMode.value,
-        (u) => {
-          if (C?.(), C = null, u) {
-            le(!1), J.enableRubberband?.();
-            const k = () => {
-              i.container.removeEventListener("mouseup", k), C = null, setTimeout(() => {
-                t.editor.selectionMode.value && t.editor.setSelectionMode(!1);
-              }, 50);
-            };
-            i.container.addEventListener("mouseup", k), C = () => i.container.removeEventListener("mouseup", k);
-          } else
-            J.disableRubberband?.(), le(!0);
-        }
-      ), fe(
-        () => t.editor.mode.value,
-        (u) => {
-          const k = u === "edit";
-          le(!0), k ? J.enableSelection?.() : J.disableSelection?.();
-        }
-      );
-    }), ze(() => {
-      d.cleanup(), m && clearTimeout(m), G?.remove(), C?.(), T && i?.container?.removeEventListener("mousemove", T), h && n.value?.removeEventListener("mousemove", h), b && n.value?.removeEventListener("mouseleave", b), n.value?.removeEventListener("keydown", Ne), t.editor._pluginManager.detachRuntime(), t.editor.api.value = null;
-      for (const y of Object.keys(t.editor.extendedApi))
-        delete t.editor.extendedApi[y];
-      g?.dispose(), l?.dispose(), a?.dispose(), i?.dispose();
-    }), (y, x) => (M(), S("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"
     }, [
-      B("div", {
+      G("div", {
         ref_key: "containerRef",
-        ref: r,
+        ref: i,
         class: "flow-canvas-runtime-core__graph"
       }, null, 512),
-      B("div", Qt, [
-        (M(!0), S(pe, null, Pe(R.value, (c) => (M(), S("div", {
-          key: `badge-${c.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: _e({ left: `${c.x}px`, top: `${c.y}px`, backgroundColor: c.badge.color })
-        }, me(c.badge.text), 5))), 128)),
-        Q.value ? (M(), De(Wt, {
+          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: de,
-          node: Q.value.node,
-          "port-position": Q.value.portPosition,
-          "tooltip-text": H.value.tooltipText,
-          onOpen: re,
-          onClose: ce,
-          onStartDrag: ue,
-          onMouseenter: j,
-          onMouseleave: oe
+          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: je(() => [
-            ke(y.$slots, "quick-add-panel", {
-              node: Q.value.node,
-              api: s.editor.api.value,
-              insertNodeToRight: (c) => Ie(Q.value.node.id, c),
-              closePopover: () => de.value?.closePopover()
+          default: $e(() => [
+            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"])) : U("", !0),
-        Y.value ? (M(), De(Ft, {
+        }, 8, ["node", "port-position", "onOpen", "onClose", "onStartDrag", "onMouseenter", "onMouseleave"])) : V("", !0),
+        B.value ? (N(), ye(Zt, {
           key: 1,
-          node: Y.value.node,
-          position: Y.value.position,
-          config: q.value,
-          behavior: Y.value.behavior,
-          "actions-offset": Y.value.behavior.actionsOffset,
-          onAction: Me,
-          onMouseenter: lt(p),
-          onMouseleave: E
-        }, null, 8, ["node", "position", "config", "behavior", "actions-offset", "onMouseenter"])) : U("", !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));
   }
-}), So = /* @__PURE__ */ he(Xt, [["__scopeId", "data-v-b37732f8"]]), Yt = { class: "flow-canvas-node-palette" }, Kt = ["data-node-type"], Zt = { class: "flow-canvas-node-palette__item-label" }, Jt = /* @__PURE__ */ ge({
+}), 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 = O(), o = F(() => 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 fe(
-      [() => e.editor.api.value, o, t],
-      ([n, r, i], l, a) => {
-        if (!n || !i) return;
-        const g = [];
-        for (const d of r) {
-          const v = i.querySelector(`[data-node-type="${d.type}"]`);
-          if (!v) continue;
-          const f = n.registerDndSource(v, () => ({
-            id: W(),
-            type: d.type,
-            label: d.label,
+      [() => 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 }
           }));
-          g.push(f);
+          p.push(u);
         }
         a(() => {
-          for (const d of g) d();
+          for (const c of p) c();
         });
       },
       { flush: "post" }
-    ), (n, r) => (M(), S("div", Yt, [
-      B("div", {
+    ), (o, i) => (N(), A("div", ao, [
+      G("div", {
         ref_key: "listRef",
         ref: t,
         class: "flow-canvas-node-palette__list"
       }, [
-        (M(!0), S(pe, null, Pe(o.value, (i) => (M(), S("div", {
-          key: i.type,
+        (N(!0), A(he, null, xe(s.value, (r) => (N(), A("div", {
+          key: r.type,
           class: "flow-canvas-node-palette__item",
-          "data-node-type": i.type
+          "data-node-type": r.type
         }, [
-          i.icon ? (M(), S("i", {
+          r.icon ? (N(), A("i", {
             key: 0,
-            class: ee([i.icon, "flow-canvas-node-palette__item-icon"])
-          }, null, 2)) : U("", !0),
-          B("span", Zt, me(i.label), 1)
-        ], 8, Kt))), 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)
     ]));
   }
-}), eo = /* @__PURE__ */ he(Jt, [["__scopeId", "data-v-300314b7"]]), to = { class: "flow-canvas-layout" }, oo = { class: "flow-canvas-layout__main" }, no = { class: "flow-canvas-layout__content" }, so = {
+}), 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"
-}, io = /* @__PURE__ */ ge({
+}, yo = /* @__PURE__ */ le({
   __name: "canvas-layout",
   props: {
     sidebarCollapsed: { type: Boolean, default: !1 },
@@ -2378,34 +2529,34 @@ const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
     paletteItems: { default: void 0 }
   },
   emits: ["update:sidebarCollapsed"],
-  setup(s) {
-    return (e, t) => (M(), S("div", to, [
-      !s.hideSidebar && (e.$slots.sidebar || s.editor) ? (M(), S("aside", {
+  setup(n) {
+    return (e, t) => (N(), A("div", po, [
+      !n.hideSidebar && (e.$slots.sidebar || n.editor) ? (N(), A("aside", {
         key: 0,
-        class: ee(["flow-canvas-layout__sidebar", { "is-collapsed": s.sidebarCollapsed }]),
-        style: _e({ 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` })
       }, [
-        ke(e.$slots, "sidebar", {}, () => [
-          s.editor ? (M(), De(eo, {
+        we(e.$slots, "sidebar", {}, () => [
+          n.editor ? (N(), ye(fo, {
             key: 0,
-            editor: s.editor,
-            items: s.paletteItems
-          }, null, 8, ["editor", "items"])) : U("", !0)
+            editor: n.editor,
+            items: n.paletteItems
+          }, null, 8, ["editor", "items"])) : V("", !0)
         ], !0)
-      ], 6)) : U("", !0),
-      B("div", oo, [
-        B("div", no, [
-          ke(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 ? (M(), S("div", so, [
-          ke(e.$slots, "footer", {}, void 0, !0)
-        ])) : U("", !0)
+        !n.hideFooter && e.$slots.footer ? (N(), A("div", vo, [
+          we(e.$slots, "footer", {}, void 0, !0)
+        ])) : V("", !0)
       ])
     ]));
   }
-}), Do = /* @__PURE__ */ he(io, [["__scopeId", "data-v-26f35b6b"]]), ro = ["undo", "redo"];
-function ao(s) {
-  const e = new Set(s?.include), t = /* @__PURE__ */ new Set([...ro.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",
@@ -2422,7 +2573,7 @@ function ao(s) {
       description: "重做",
       order: 11
     }
-  ], n = [
+  ], o = [
     {
       id: "select",
       type: "select",
@@ -2439,22 +2590,6 @@ function ao(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",
@@ -2463,7 +2598,7 @@ function ao(s) {
       description: "导出为图片",
       order: 24
     }
-  ], r = [
+  ], i = [
     {
       id: "zoom-out",
       type: "zoom-out",
@@ -2481,7 +2616,7 @@ function ao(s) {
       description: "放大画布",
       order: 32
     }
-  ], i = [
+  ], r = [
     {
       id: "reset",
       type: "reset",
@@ -2491,180 +2626,268 @@ function ao(s) {
       order: 40
     }
   ];
-  return [...[...o, ...n].filter(
+  return [...[...s, ...o].filter(
     (a) => !t.has(a.type)
-  ), ...r, ...i];
+  ), ...i, ...r];
 }
-const lo = { class: "flow-canvas-toolbar" }, co = {
+const wo = { class: "flow-canvas-toolbar" }, xo = {
   key: 0,
   class: "flow-canvas-toolbar__separator"
-}, uo = { class: "flow-canvas-toolbar__group" }, fo = {
+}, Co = { class: "flow-canvas-toolbar__group" }, Eo = {
   key: 0,
   class: "flow-canvas-toolbar__zoom-display"
-}, po = ["data-description", "disabled", "onClick"], go = ["textContent"], ho = /* @__PURE__ */ ge({
+}, 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 = F(() => e.items ? e.items : ao({ exclude: e.exclude })), o = O(1);
-    let n = null;
+  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(
-      () => e.editor.api.value,
-      (p) => {
-        n?.(), n = null, p && (o.value = p.getZoom(), n = p.onGraphEvent("scale", () => {
-          o.value = p.getZoom();
+      () => i.editor.api.value,
+      (d) => {
+        g?.(), g = null, d && (l.value = d.getZoom(), g = d.onGraphEvent("scale", () => {
+          l.value = d.getZoom();
         }));
       },
       { immediate: !0 }
-    ), et(() => {
-      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 r = F(() => `${Math.round(o.value * 100)}%`), i = F(() => 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(p) {
-      return p.visible === !1 ? !1 : typeof p.visible == "function" ? i.value ? p.visible(i.value) : !1 : !0;
+    function D(d) {
+      return d.visible === !1 ? !1 : typeof d.visible == "function" ? M.value ? d.visible(M.value) : !1 : !0;
     }
-    function a(p) {
-      return p.type === "select" ? e.editor.selectionMode.value : !1;
+    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;
     }
-    function g(p) {
-      return !i.value || p.disabled === !0 ? !0 : typeof p.disabled == "function" ? p.disabled(i.value) : p.type === "undo" ? !e.editor.history.canUndo.value : p.type === "redo" ? !e.editor.history.canRedo.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 $(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 W(d) {
+      if (!(!M.value || !o(d.type) || !L(d))) {
+        if (d.type === "select") {
+          i.editor.setSelectionMode(!1);
+          return;
+        }
+        d.onClick?.(M.value);
+      }
     }
-    function d(p) {
-      if (!i.value || g(p)) return;
-      if (p.onClick) {
-        p.onClick(i.value);
+    function F(d) {
+      if (o(d.type))
+        for (const f of B.value)
+          !o(f.type) || f.id === d.id || W(f);
+    }
+    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: E } = i.value;
-      switch (p.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":
-          E.zoomIn(), o.value = E.getZoom();
+          f.zoomIn(), l.value = f.getZoom();
           break;
         case "zoom-out":
-          E.zoomOut(), o.value = E.getZoom();
+          f.zoomOut(), l.value = f.getZoom();
           break;
         case "fit":
-          E.zoomToFit();
+          f.zoomToFit();
           break;
         case "reset":
-          E.zoomTo(1), E.scrollToOrigin(), o.value = 1;
+          f.zoomTo(1), f.scrollToOrigin(), l.value = 1;
           break;
         case "export":
-          E.exportAsImage().then((w) => {
-            const N = URL.createObjectURL(w), m = document.createElement("a");
-            m.href = N, m.download = "canvas-export.png", m.click(), URL.revokeObjectURL(N);
-          }).catch((w) => {
-            console.warn("[flow-canvas] Export failed:", w);
+          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] "${p.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:
-          p.type !== "custom" && console.warn(`[flow-canvas] No default handler for toolbar type "${p.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 v = F(() => t.value.filter(l)), f = F(() => {
-      const p = /* @__PURE__ */ new Map(), E = [];
-      for (const w of v.value) {
-        const N = w.group ?? "default";
-        p.has(N) || (p.set(N, []), E.push(N)), p.get(N).push(w);
+    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 E.map((w) => ({ name: w, items: p.get(w) })).filter((w) => w.items.length > 0);
+      return f.map((I) => ({ name: I, items: d.get(I) })).filter((I) => I.items.length > 0);
     });
-    return (p, E) => (M(), S("div", lo, [
-      (M(!0), S(pe, null, Pe(f.value, (w, N) => (M(), S(pe, {
-        key: w.name
+    return (d, f) => (N(), A("div", wo, [
+      (N(!0), A(he, null, xe(h.value, (I, S) => (N(), A(he, {
+        key: I.name
       }, [
-        N > 0 ? (M(), S("div", co)) : U("", !0),
-        B("div", uo, [
-          (M(!0), S(pe, null, Pe(w.items, (m) => (M(), S(pe, {
-            key: m.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
           }, [
-            m.type === "zoom-display" ? (M(), S("span", fo, me(r.value), 1)) : (M(), S("button", {
+            w.type === "zoom-display" ? (N(), A("span", Eo, ce(C.value), 1)) : (N(), A("button", {
               key: 1,
-              class: ee(["flow-canvas-toolbar__btn", { "is-disabled": g(m), "is-active": a(m) }]),
-              "data-description": m.description,
-              disabled: g(m),
-              onClick: (D) => d(m)
+              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
             }, [
-              m.component ? (M(), De(dt(m.component), { key: 0 })) : m.icon ? (M(), S("i", {
+              w.component ? (N(), ye(it(w.component), { key: 0 })) : w.icon ? (N(), A("i", {
                 key: 1,
-                class: ee(m.icon)
-              }, null, 2)) : (M(), S("span", {
+                class: te(w.icon)
+              }, null, 2)) : (N(), A("span", {
                 key: 2,
                 class: "flow-canvas-toolbar__text",
-                textContent: me(m.text ?? m.description ?? m.id)
-              }, null, 8, go))
-            ], 10, po))
+                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)
+      ]))
     ]));
   }
-}), Po = /* @__PURE__ */ he(ho, [["__scopeId", "data-v-51b5c98a"]]), vo = { class: "flow-canvas-default-node__ep-label" }, yo = {
+}), 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"
-}, mo = {
+  class: "flow-canvas-default-node__diamond flow-canvas-highlight-target"
+}, Mo = {
   key: 2,
   class: "flow-canvas-default-node__task-label"
-}, bo = /* @__PURE__ */ ge({
+}, Do = /* @__PURE__ */ le({
   __name: "default-node",
-  setup(s) {
-    const t = ct("getNode")?.(), o = F(() => t?.getData?.() ?? null), n = F(() => o.value?.label || o.value?.type || ""), r = {
+  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",
       "branch-gateway": "canvas-fenzhiwangguan",
       "converge-gateway": "canvas-huijuwangguan",
       "conditional-parallel-gateway": "canvas-tiaojianbingxingwangguan"
-    }, i = /* @__PURE__ */ new Set(["start", "end"]), l = /* @__PURE__ */ new Set([
+    }, r = /* @__PURE__ */ new Set(["start", "end"]), l = /* @__PURE__ */ new Set([
       "parallel-gateway",
       "branch-gateway",
       "converge-gateway",
       "conditional-parallel-gateway"
-    ]), a = F(() => {
-      const d = o.value?.type ?? "";
-      return i.has(d) ? "endpoint" : l.has(d) ? "gateway" : "task";
-    }), g = F(() => r[o.value?.type ?? ""] ?? "");
-    return (d, v) => (M(), S("div", {
-      class: ee(["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" ? (M(), S(pe, { key: 0 }, [
-        g.value ? (M(), S("i", {
+      a.value === "endpoint" ? (N(), A(he, { key: 0 }, [
+        p.value ? (N(), A("i", {
           key: 0,
-          class: ee([["flow-canvas-icon", g.value], "flow-canvas-default-node__ep-icon"])
-        }, null, 2)) : U("", !0),
-        B("span", vo, me(n.value), 1)
-      ], 64)) : a.value === "gateway" ? (M(), S("div", yo, [
-        g.value ? (M(), S("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: ee([["flow-canvas-icon", g.value], "flow-canvas-default-node__gw-icon"])
-        }, null, 2)) : U("", !0)
-      ])) : (M(), S("span", mo, me(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));
   }
-}), wo = /* @__PURE__ */ he(bo, [["__scopeId", "data-v-c88cdae7"]]), xo = {
+}), 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 },
@@ -2677,11 +2900,11 @@ const lo = { class: "flow-canvas-toolbar" }, co = {
     width: 64,
     height: 64
   }
-}, Ze = (s, e) => ({
+}, Ve = (n, e) => ({
   stroke: e.hovered ? "#3a84ff" : "#abb5cc",
   strokeWidth: 2
 });
-function Je() {
+function Xe() {
   return {
     attrs: {
       line: {
@@ -2692,67 +2915,67 @@ function Je() {
     }
   };
 }
-function ko() {
+function To() {
   return {
     manhattan: {
       router: { name: "manhattan", args: { padding: 10, maxDirectionChange: 90 } },
       connector: { name: "rounded", args: { radius: 8 } },
-      style: Ze,
-      x6EdgeConfig: Je()
+      style: Ve,
+      x6EdgeConfig: Xe()
     },
     bezier: {
       connector: { name: "smooth" },
-      style: Ze,
-      x6EdgeConfig: Je()
+      style: Ve,
+      x6EdgeConfig: Xe()
     }
   };
 }
-function _o(s) {
-  const e = s?.nodeTypes ?? xo, t = {}, o = [];
-  for (const [i, l] of Object.entries(e)) {
-    const a = l.width ?? 150, g = l.height ?? 50;
-    t[i] = {
-      component: wo,
-      getSize: () => ({ width: a, height: g }),
-      getPorts: () => nt()
-    }, o.push({
-      type: i,
-      label: l.label ?? i,
+function un(n) {
+  const e = n?.nodeTypes ?? Po, t = {}, s = [];
+  for (const [r, l] of Object.entries(e)) {
+    const a = l.width ?? 150, p = l.height ?? 50;
+    t[r] = {
+      component: Ao,
+      getSize: () => ({ width: a, height: p }),
+      getPorts: () => et()
+    }, s.push({
+      type: r,
+      label: l.label ?? r,
       icon: l.icon
     });
   }
-  const n = {
-    ...ko(),
-    ...s?.edgeTypes
-  }, r = s?.defaultEdgeType ?? "manhattan";
+  const o = {
+    ...To(),
+    ...n?.edgeTypes
+  }, i = n?.defaultEdgeType ?? "manhattan";
   return {
-    schema: { nodeTypes: t, defaultEdgeType: r, edgeTypes: n },
-    paletteItems: o
+    schema: { nodeTypes: t, defaultEdgeType: i, edgeTypes: o },
+    paletteItems: s
   };
 }
-function Ao(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 r = o.flowModel.value, i = n.type === "edge.add" ? n.edge.source.nodeId : n.source?.nodeId, l = n.type === "edge.add" ? n.edge.target.nodeId : n.target?.nodeId;
-        if (!i || !l) continue;
-        const a = r.nodes[i], g = r.nodes[l];
-        if (!a || !g) continue;
-        const d = n.type === "edge.add" ? n.edge.source.portId : n.source?.portId, v = n.type === "edge.add" ? n.edge.target.portId : n.target?.portId, f = d ? a.ports?.find((m) => m.id === d) : void 0, p = v ? g.ports?.find((m) => m.id === v) : void 0, E = n.type === "edge.reconnect" ? n.edgeId : void 0, w = Object.values(r.edges).filter((m) => m.id !== E), N = s({
-          flowModel: r,
+    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], 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: g,
-          sourcePort: f,
-          targetPort: p,
-          existingEdges: w
+          targetNode: p,
+          sourcePort: u,
+          targetPort: y,
+          existingEdges: C
         });
-        if (!N.valid)
+        if (!M.valid)
           return {
             rejected: !0,
-            reason: N.reason ?? "Connection validation failed",
+            reason: M.reason ?? "Connection validation failed",
             code: "validation_failed"
           };
       }
@@ -2760,138 +2983,458 @@ function Ao(s) {
     }
   };
 }
-function To(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: r } = await import("@antv/x6-plugin-selection");
-      n.graph.use(
-        new r({
+    attachRuntime(o) {
+      o.graph.use(
+        new ut({
           enabled: !0,
           rubberband: e,
           multiple: t,
-          movable: o,
+          movable: s,
+          pointerEvents: "none",
           showNodeSelectionBox: !0,
-          filter: (i) => !(i.isNode() && (!n.graph.isRubberbandEnabled?.() || (i.getData?.() ?? {})._selectable === !1))
+          filter: (i) => !(i.isNode() && (i.getData?.() ?? {})._selectable === !1)
         })
       );
     }
   };
 }
-function Ro(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) {
-      const { Snapline: r } = await import("@antv/x6-plugin-snapline");
-      n.graph.use(
-        new r({
+    async attachRuntime(o) {
+      const { Snapline: i } = await import("@antv/x6-plugin-snapline");
+      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() {
-      o?.remove(), o = null;
+      s?.remove(), s = null;
     }
   };
 }
-function $o(s) {
+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() {
+      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
+        }
+      ];
+    }
+  };
+}
+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 Lo() {
-  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 r = o.graph.getSelectedCells?.() ?? [];
-        if (!r.length) return !1;
-        const i = o.flowModel.value, l = new Set(r.filter((d) => d.isNode()).map((d) => d.id)), a = [...l].map((d) => i.nodes[d]).filter(Boolean);
+    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 = 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 g = Object.values(i.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: g }, 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 r = e * 30, i = /* @__PURE__ */ new Map(), l = [];
-        for (const a of s.nodes) {
-          const g = `${a.id}_cp${W().slice(0, 6)}`;
-          i.set(a.id, g), l.push({
+        const i = e * 30, r = /* @__PURE__ */ new Map(), l = [];
+        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: g,
+              id: p,
               position: {
-                x: a.position.x + r,
-                y: a.position.y + r
+                x: a.position.x + i,
+                y: a.position.y + i
               },
               payload: a.payload ? { ...a.payload } : {},
               extensions: a.extensions ? { ...a.extensions } : void 0
             }
           });
         }
-        for (const a of s.edges) {
-          const g = i.get(a.source.nodeId), d = i.get(a.target.nodeId);
-          !g || !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${W().slice(0, 6)}`,
-              source: { ...a.source, nodeId: g },
-              target: { ...a.target, nodeId: d },
-              labels: a.labels?.map((v) => ({ ...v, id: `${v.id}_cp${W().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: W(),
+        return l.length && s.executeCommand({
+          id: Z(),
           source: "user:keyboard",
           label: "粘贴",
           timestamp: Date.now(),
@@ -2903,26 +3446,27 @@ function Lo() {
   };
 }
 export {
-  ne as CanvasConstraintError,
-  Do as CanvasLayout,
-  eo as CanvasNodePalette,
-  So as CanvasRuntime,
+  ae as CanvasConstraintError,
+  dn as CanvasLayout,
+  fo as CanvasNodePalette,
+  ln as CanvasRuntime,
   pt as CanvasSchemaError,
-  Po as CanvasToolbar,
-  wo as DefaultNode,
-  Ft as NodeActionsToolbar,
-  Wt as NodeQuickAddPopover,
-  Ge as applyCanvasCommand,
-  Lo as clipboardPlugin,
-  Ao as connectionValidatorPlugin,
-  ko as createBuiltinEdgeTypes,
-  Nt as createCanvasHistory,
-  _o as createDefaultSchema,
-  ao as createDefaultToolbarItems,
-  Mo as createEmptyFlowModel,
-  W as generateId,
-  $o as minimapPlugin,
-  To as selectionPlugin,
-  Ro as snaplinePlugin,
-  No as useCanvasEditor
+  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
 };