dishui 0.0.59 → 0.0.60

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

@@ -1,40 +1,41 @@
 import g from "../../../Button/index.js";
-import v from "../../../Input/index.js";
+import b from "../../../Input/index.js";
 import n from "../../../Label/index.js";
-import K from "../../../Checkbox/index.js";
+import W from "../../../Checkbox/index.js";
 import y from "../../../Select/index.js";
-import { BORDER_STYLE_OPTIONS as ee, DEFAULT_NODE_DATA as le, EDGE_LINE_STYLE_OPTIONS as V, EDGE_MARKER_OPTIONS as X, EDGE_TYPE_OPTIONS as se } from "../constants.js";
-import { useFlowContext as ae } from "../context/FlowContext.js";
-import { useFlowUI as te } from "../context/FlowUIContext.js";
-import { COMMON_COLORS as Z, THEME_SYNC_TOKEN as ie, isThemeToken as oe, themeTokenCssVar as ne } from "../utils/themeColor.js";
-import { generateId as re } from "../nodes/nodeUtils.js";
-import { getAllSvgIcons as ce, getSvgIcon as de } from "../nodes/svgIcons.js";
-import { COMPONENT_STYLES as _ } from "../archify/palette.js";
-import { ARCHIFY_COMPONENT_LABELS as A, ARCHIFY_COMPONENT_ORDER as $, archifyStylePatch as H } from "../archify/presets.js";
-import { useDraggablePanel as he } from "../hooks/useDraggablePanel.js";
-import { useResizablePanel as me } from "../hooks/useResizablePanel.js";
-import { FLOW_NODE_TYPES as pe } from "../types.js";
-import { ExpandableTextarea as j } from "./ExpandableTextarea.js";
-import { DataInspectorSection as fe } from "./DataInspectorSection.js";
-import { useMemo as R, useRef as ue } from "react";
-import { Fragment as F, jsx as e, jsxs as a } from "react/jsx-runtime";
-function Xe() {
-  const { showInspector: l } = te(), { panelStyle: d, handleProps: o } = he(), { panelWidth: i, resizeHandleProps: p } = me("left", 240);
-  return l ? /* @__PURE__ */ a("div", {
+import { BORDER_STYLE_OPTIONS as le, DEFAULT_NODE_DATA as te, EDGE_LINE_STYLE_OPTIONS as J, EDGE_MARKER_OPTIONS as Z, EDGE_TYPE_OPTIONS as se } from "../constants.js";
+import { useFlowContext as ie } from "../context/FlowContext.js";
+import { useFlowUI as ae } from "../context/FlowUIContext.js";
+import { COMMON_COLORS as H, THEME_SYNC_TOKEN as oe, isThemeToken as ne, resolveThemeColor as re, themeTokenCssVar as ce } from "../utils/themeColor.js";
+import { BORDER_SIDE_NAMES as de, BORDER_SIDE_TYPES as he, hasBorderSideOverrides as pe } from "../nodes/shapes.js";
+import { generateId as me } from "../nodes/nodeUtils.js";
+import { SVG_ICON_CATEGORIES as fe, buildSvgMarkup as ue, getAllSvgIcons as ve, getSvgIcon as $, getSvgIconsByCategory as we } from "../nodes/svgIcons.js";
+import { COMPONENT_STYLES as R } from "../archify/palette.js";
+import { ARCHIFY_COMPONENT_LABELS as _, ARCHIFY_COMPONENT_ORDER as j, archifyStylePatch as V } from "../archify/presets.js";
+import { useDraggablePanel as be } from "../hooks/useDraggablePanel.js";
+import { useResizablePanel as ge } from "../hooks/useResizablePanel.js";
+import { FLOW_NODE_TYPES as Ne } from "../types.js";
+import { ExpandableTextarea as K } from "./ExpandableTextarea.js";
+import { DataInspectorSection as xe } from "./DataInspectorSection.js";
+import { useMemo as A, useRef as ye, useState as ze } from "react";
+import { Fragment as E, jsx as e, jsxs as s } from "react/jsx-runtime";
+function Ue() {
+  const { showInspector: l } = ae(), { panelStyle: c, handleProps: a } = be(), { panelWidth: o, resizeHandleProps: f } = ge("left", 240);
+  return l ? /* @__PURE__ */ s("div", {
     className: "flow-inspector",
     "data-flow-panel": !0,
     style: {
-      ...d,
-      width: i
+      ...c,
+      width: o
     },
     children: [
       /* @__PURE__ */ e("div", {
         className: "flow-panel-resize-handle flow-panel-resize-handle--left",
-        ...p
+        ...f
       }),
       /* @__PURE__ */ e("div", {
         className: "flow-panel-drag-handle",
-        ...o,
+        ...a,
         style: {
           fontSize: 11,
           fontWeight: 600,
@@ -48,257 +49,257 @@ function Xe() {
       }),
       /* @__PURE__ */ e("div", {
         className: "flow-inspector-content",
-        children: /* @__PURE__ */ e(we, {})
+        children: /* @__PURE__ */ e(Ce, {})
       })
     ]
   }) : null;
 }
-function we() {
-  const { currentCanvas: l, selection: d, setSelection: o, setDoc: i, currentCanvasId: p } = ae(), f = R(() => l.nodes.filter((h) => d.nodeIds.has(h.id)), [l.nodes, d.nodeIds]), s = R(() => l.edges.filter((h) => d.edgeIds.has(h.id)), [l.edges, d.edgeIds]), u = R(() => l.lines.filter((h) => d.lineIds.has(h.id)), [l.lines, d.lineIds]), k = f.length > 0 || s.length > 0 || u.length > 0, C = f.length === 1 && (f[0].type === "flowGroup" || f[0].type === "geometryGroup" || f[0].data.isGroup), L = f.length + u.length, B = (h = "flowGroup") => {
-    if (L < 2) return;
-    const w = 20;
-    let c = 1 / 0, t = 1 / 0, r = -1 / 0, m = -1 / 0;
-    for (const x of f)
-      c = Math.min(c, x.position.x), t = Math.min(t, x.position.y), r = Math.max(r, x.position.x + x.width), m = Math.max(m, x.position.y + x.height);
-    for (const x of u) for (const S of x.points)
-      c = Math.min(c, S.x), t = Math.min(t, S.y), r = Math.max(r, S.x), m = Math.max(m, S.y);
-    const I = h === "geometryGroup", E = re("group"), b = {
-      id: E,
-      type: h,
+function Ce() {
+  const { currentCanvas: l, selection: c, setSelection: a, setDoc: o, currentCanvasId: f } = ie(), m = A(() => l.nodes.filter((p) => c.nodeIds.has(p.id)), [l.nodes, c.nodeIds]), t = A(() => l.edges.filter((p) => c.edgeIds.has(p.id)), [l.edges, c.edgeIds]), r = A(() => l.lines.filter((p) => c.lineIds.has(p.id)), [l.lines, c.lineIds]), N = m.length > 0 || t.length > 0 || r.length > 0, w = m.length === 1 && (m[0].type === "flowGroup" || m[0].type === "geometryGroup" || m[0].data.isGroup), z = m.length + r.length, T = (p = "flowGroup") => {
+    if (z < 2) return;
+    const v = 20;
+    let h = 1 / 0, i = 1 / 0, d = -1 / 0, u = -1 / 0;
+    for (const S of m)
+      h = Math.min(h, S.position.x), i = Math.min(i, S.position.y), d = Math.max(d, S.position.x + S.width), u = Math.max(u, S.position.y + S.height);
+    for (const S of r) for (const I of S.points)
+      h = Math.min(h, I.x), i = Math.min(i, I.y), d = Math.max(d, I.x), u = Math.max(u, I.y);
+    const M = p === "geometryGroup", B = me("group"), x = {
+      id: B,
+      type: p,
       position: {
-        x: c - w,
-        y: t - w
+        x: h - v,
+        y: i - v
       },
-      width: r - c + w * 2,
-      height: m - t + w * 2,
+      width: d - h + v * 2,
+      height: u - i + v * 2,
       data: {
-        ...le,
-        label: I ? "Geo Group" : "Group",
-        fill: I ? "#fefce8" : "#f0f9ff",
+        ...te,
+        label: M ? "Geo Group" : "Group",
+        fill: M ? "#fefce8" : "#f0f9ff",
         stroke: "#9ca3af",
         strokeWidth: 1.5,
-        borderStyle: I ? "dashed" : "dotted",
+        borderStyle: M ? "dashed" : "dotted",
         isGroup: !0
       }
-    }, T = d.nodeIds, N = d.lineIds;
-    i((x) => {
-      const S = x.canvases[p];
-      return S ? {
-        ...x,
+    }, F = c.nodeIds, C = c.lineIds;
+    o((S) => {
+      const I = S.canvases[f];
+      return I ? {
+        ...S,
         canvases: {
-          ...x.canvases,
-          [p]: {
-            ...S,
-            nodes: I ? [b, ...S.nodes] : [b, ...S.nodes.map((G) => T.has(G.id) ? {
+          ...S.canvases,
+          [f]: {
+            ...I,
+            nodes: M ? [x, ...I.nodes] : [x, ...I.nodes.map((G) => F.has(G.id) ? {
               ...G,
-              parentId: E
+              parentId: B
             } : G)],
-            lines: I ? S.lines : S.lines.map((G) => N.has(G.id) ? {
+            lines: M ? I.lines : I.lines.map((G) => C.has(G.id) ? {
               ...G,
-              parentId: E
+              parentId: B
             } : G)
           }
         }
-      } : x;
-    }), o({
-      nodeIds: /* @__PURE__ */ new Set([E]),
+      } : S;
+    }), a({
+      nodeIds: /* @__PURE__ */ new Set([B]),
       edgeIds: /* @__PURE__ */ new Set(),
       lineIds: /* @__PURE__ */ new Set()
     });
   }, Y = () => {
-    const h = /* @__PURE__ */ new Set(), w = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Set();
-    for (const t of f) (t.type === "flowGroup" || t.type === "geometryGroup" || t.data.isGroup) && h.add(t.id);
-    if (h.size !== 0) {
-      for (const t of l.nodes) t.parentId && h.has(t.parentId) && w.add(t.id);
-      for (const t of l.lines) t.parentId && h.has(t.parentId) && c.add(t.id);
-      i((t) => {
-        const r = t.canvases[p];
-        return r ? {
-          ...t,
+    const p = /* @__PURE__ */ new Set(), v = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set();
+    for (const i of m) (i.type === "flowGroup" || i.type === "geometryGroup" || i.data.isGroup) && p.add(i.id);
+    if (p.size !== 0) {
+      for (const i of l.nodes) i.parentId && p.has(i.parentId) && v.add(i.id);
+      for (const i of l.lines) i.parentId && p.has(i.parentId) && h.add(i.id);
+      o((i) => {
+        const d = i.canvases[f];
+        return d ? {
+          ...i,
           canvases: {
-            ...t.canvases,
-            [p]: {
-              ...r,
-              nodes: r.nodes.filter((m) => !h.has(m.id)).map((m) => w.has(m.id) ? {
-                ...m,
+            ...i.canvases,
+            [f]: {
+              ...d,
+              nodes: d.nodes.filter((u) => !p.has(u.id)).map((u) => v.has(u.id) ? {
+                ...u,
                 parentId: void 0
-              } : m),
-              lines: r.lines.map((m) => c.has(m.id) ? {
-                ...m,
+              } : u),
+              lines: d.lines.map((u) => h.has(u.id) ? {
+                ...u,
                 parentId: void 0
-              } : m)
+              } : u)
             }
           }
-        } : t;
-      }), o({
-        nodeIds: w,
+        } : i;
+      }), a({
+        nodeIds: v,
         edgeIds: /* @__PURE__ */ new Set(),
-        lineIds: c
+        lineIds: h
       });
     }
-  }, O = (h) => {
-    const w = d.nodeIds;
-    w.size !== 0 && i((c) => {
-      const t = c.canvases[p];
-      if (!t) return c;
-      const r = t.nodes.map((b) => b.zIndex ?? 0), m = r.length > 0 ? Math.max(...r) : 0, I = r.length > 0 ? Math.min(...r) : 0, E = t.nodes.map((b) => {
-        if (!w.has(b.id)) return b;
-        const T = b.zIndex ?? 0;
-        let N = T;
-        return h === "front" ? N = m + 1 : h === "back" ? N = I - 1 : h === "up" ? N = T + 1 : h === "down" && (N = T - 1), {
-          ...b,
-          zIndex: N
+  }, P = (p) => {
+    const v = c.nodeIds;
+    v.size !== 0 && o((h) => {
+      const i = h.canvases[f];
+      if (!i) return h;
+      const d = i.nodes.map((x) => x.zIndex ?? 0), u = d.length > 0 ? Math.max(...d) : 0, M = d.length > 0 ? Math.min(...d) : 0, B = i.nodes.map((x) => {
+        if (!v.has(x.id)) return x;
+        const F = x.zIndex ?? 0;
+        let C = F;
+        return p === "front" ? C = u + 1 : p === "back" ? C = M - 1 : p === "up" ? C = F + 1 : p === "down" && (C = F - 1), {
+          ...x,
+          zIndex: C
         };
       });
       return {
-        ...c,
+        ...h,
         canvases: {
-          ...c.canvases,
-          [p]: {
-            ...t,
-            nodes: E
+          ...h.canvases,
+          [f]: {
+            ...i,
+            nodes: B
           }
         }
       };
     });
-  }, M = (h) => {
-    const w = d.lineIds;
-    w.size !== 0 && i((c) => {
-      const t = c.canvases[p];
-      if (!t) return c;
-      const r = t.lines.map((b) => b.zIndex ?? 0), m = r.length > 0 ? Math.max(...r) : 0, I = r.length > 0 ? Math.min(...r) : 0, E = t.lines.map((b) => {
-        if (!w.has(b.id)) return b;
-        const T = b.zIndex ?? 0;
-        let N = T;
-        return h === "front" ? N = m + 1 : h === "back" ? N = I - 1 : h === "up" ? N = T + 1 : h === "down" && (N = T - 1), {
-          ...b,
-          zIndex: N
+  }, L = (p) => {
+    const v = c.lineIds;
+    v.size !== 0 && o((h) => {
+      const i = h.canvases[f];
+      if (!i) return h;
+      const d = i.lines.map((x) => x.zIndex ?? 0), u = d.length > 0 ? Math.max(...d) : 0, M = d.length > 0 ? Math.min(...d) : 0, B = i.lines.map((x) => {
+        if (!v.has(x.id)) return x;
+        const F = x.zIndex ?? 0;
+        let C = F;
+        return p === "front" ? C = u + 1 : p === "back" ? C = M - 1 : p === "up" ? C = F + 1 : p === "down" && (C = F - 1), {
+          ...x,
+          zIndex: C
         };
       });
       return {
-        ...c,
+        ...h,
         canvases: {
-          ...c.canvases,
-          [p]: {
-            ...t,
-            lines: E
+          ...h.canvases,
+          [f]: {
+            ...i,
+            lines: B
           }
         }
       };
     });
-  }, z = (h, w, c) => {
-    W(h, { [w]: c });
-  }, W = (h, w) => {
-    i((c) => {
-      const t = c.canvases[p];
-      return t ? {
-        ...c,
+  }, k = (p, v, h) => {
+    X(p, { [v]: h });
+  }, X = (p, v) => {
+    o((h) => {
+      const i = h.canvases[f];
+      return i ? {
+        ...h,
         canvases: {
-          ...c.canvases,
-          [p]: {
-            ...t,
-            nodes: t.nodes.map((r) => r.id === h ? {
-              ...r,
+          ...h.canvases,
+          [f]: {
+            ...i,
+            nodes: i.nodes.map((d) => d.id === p ? {
+              ...d,
               data: {
-                ...r.data,
-                ...w
+                ...d.data,
+                ...v
               }
-            } : r)
+            } : d)
           }
         }
-      } : c;
+      } : h;
     });
-  }, J = (h, w, c) => {
-    i((t) => {
-      const r = t.canvases[p];
-      return r ? {
-        ...t,
+  }, q = (p, v, h) => {
+    o((i) => {
+      const d = i.canvases[f];
+      return d ? {
+        ...i,
         canvases: {
-          ...t.canvases,
-          [p]: {
-            ...r,
-            nodes: r.nodes.map((m) => m.id === h ? {
-              ...m,
-              [w]: c
-            } : m)
+          ...i.canvases,
+          [f]: {
+            ...d,
+            nodes: d.nodes.map((u) => u.id === p ? {
+              ...u,
+              [v]: h
+            } : u)
           }
         }
-      } : t;
+      } : i;
     });
-  }, q = (h, w, c) => {
-    i((t) => {
-      const r = t.canvases[p];
-      return r ? {
-        ...t,
+  }, Q = (p, v, h) => {
+    o((i) => {
+      const d = i.canvases[f];
+      return d ? {
+        ...i,
         canvases: {
-          ...t.canvases,
-          [p]: {
-            ...r,
-            edges: r.edges.map((m) => m.id === h ? {
-              ...m,
+          ...i.canvases,
+          [f]: {
+            ...d,
+            edges: d.edges.map((u) => u.id === p ? {
+              ...u,
               data: {
-                ...m.data,
-                [w]: c
+                ...u.data,
+                [v]: h
               }
-            } : m)
+            } : u)
           }
         }
-      } : t;
+      } : i;
     });
-  }, Q = (h, w) => {
-    i((c) => {
-      const t = c.canvases[p];
-      return t ? {
-        ...c,
+  }, D = (p, v) => {
+    o((h) => {
+      const i = h.canvases[f];
+      return i ? {
+        ...h,
         canvases: {
-          ...c.canvases,
-          [p]: {
-            ...t,
-            nodes: t.nodes.map((r) => r.id === h ? {
-              ...r,
-              type: w
-            } : r)
+          ...h.canvases,
+          [f]: {
+            ...i,
+            nodes: i.nodes.map((d) => d.id === p ? {
+              ...d,
+              type: v
+            } : d)
           }
         }
-      } : c;
+      } : h;
     });
-  }, D = (h, w) => {
-    i((c) => {
-      const t = c.canvases[p];
-      return t ? {
-        ...c,
+  }, U = (p, v) => {
+    o((h) => {
+      const i = h.canvases[f];
+      return i ? {
+        ...h,
         canvases: {
-          ...c.canvases,
-          [p]: {
-            ...t,
-            edges: t.edges.map((r) => r.id === h ? {
-              ...r,
-              type: w
-            } : r)
+          ...h.canvases,
+          [f]: {
+            ...i,
+            edges: i.edges.map((d) => d.id === p ? {
+              ...d,
+              type: v
+            } : d)
           }
         }
-      } : c;
+      } : h;
     });
-  }, U = (h, w, c) => {
-    i((t) => {
-      const r = t.canvases[p];
-      return r ? {
-        ...t,
+  }, ee = (p, v, h) => {
+    o((i) => {
+      const d = i.canvases[f];
+      return d ? {
+        ...i,
         canvases: {
-          ...t.canvases,
-          [p]: {
-            ...r,
-            lines: r.lines.map((m) => m.id === h ? {
-              ...m,
-              [w]: c
-            } : m)
+          ...i.canvases,
+          [f]: {
+            ...d,
+            lines: d.lines.map((u) => u.id === p ? {
+              ...u,
+              [v]: h
+            } : u)
           }
         }
-      } : t;
+      } : i;
     });
   };
-  return /* @__PURE__ */ a(F, { children: [
-    !k && /* @__PURE__ */ e("div", {
+  return /* @__PURE__ */ s(E, { children: [
+    !N && /* @__PURE__ */ e("div", {
       style: {
         fontSize: 12,
         color: "color-mix(in oklch, var(--color-base-content) 40%, transparent)",
@@ -307,35 +308,35 @@ function we() {
       },
       children: "Select an element to inspect"
     }),
-    f.length === 1 && /* @__PURE__ */ e(ve, {
-      node: f[0],
-      isGroup: C,
-      onUpdateData: z,
-      onUpdateDataBatch: W,
-      onUpdateDimension: J,
-      onUpdateType: Q
+    m.length === 1 && /* @__PURE__ */ e(Ie, {
+      node: m[0],
+      isGroup: w,
+      onUpdateData: k,
+      onUpdateDataBatch: X,
+      onUpdateDimension: q,
+      onUpdateType: D
     }),
-    L > 1 && /* @__PURE__ */ a("div", {
+    z > 1 && /* @__PURE__ */ s("div", {
       className: "flow-inspector-section",
       children: [
         /* @__PURE__ */ e("div", {
           className: "flow-inspector-section-title",
           children: "Selection"
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           style: {
             fontSize: 12,
             color: "color-mix(in oklch, var(--color-base-content) 50%, transparent)",
             marginBottom: 8
           },
           children: [
-            f.length > 0 && `${f.length} node${f.length > 1 ? "s" : ""}`,
-            f.length > 0 && u.length > 0 && ", ",
-            u.length > 0 && `${u.length} line${u.length > 1 ? "s" : ""}`,
+            m.length > 0 && `${m.length} node${m.length > 1 ? "s" : ""}`,
+            m.length > 0 && r.length > 0 && ", ",
+            r.length > 0 && `${r.length} line${r.length > 1 ? "s" : ""}`,
             " selected"
           ]
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -344,25 +345,25 @@ function we() {
           },
           children: [/* @__PURE__ */ e(g, {
             size: "xs",
-            onClick: () => B("flowGroup"),
+            onClick: () => T("flowGroup"),
             block: !0,
             children: "Group (⌘G)"
           }), /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => B("geometryGroup"),
+            onClick: () => T("geometryGroup"),
             block: !0,
             children: "Geo Group (⌘⌥G)"
           })]
         })
       ]
     }),
-    C && /* @__PURE__ */ a("div", {
+    w && /* @__PURE__ */ s("div", {
       className: "flow-inspector-section",
       children: [
         /* @__PURE__ */ e("div", {
           className: "flow-inspector-section-title",
-          children: f[0].type === "geometryGroup" ? "Geometry Group" : "Group"
+          children: m[0].type === "geometryGroup" ? "Geometry Group" : "Group"
         }),
         /* @__PURE__ */ e("div", {
           style: {
@@ -370,7 +371,7 @@ function we() {
             color: "color-mix(in oklch, var(--color-base-content) 45%, transparent)",
             marginBottom: 6
           },
-          children: f[0].type === "geometryGroup" ? "Auto-binds spatially contained nodes" : "Explicit membership via add/remove"
+          children: m[0].type === "geometryGroup" ? "Auto-binds spatially contained nodes" : "Explicit membership via add/remove"
         }),
         /* @__PURE__ */ e(g, {
           size: "xs",
@@ -381,12 +382,12 @@ function we() {
         })
       ]
     }),
-    f.length > 0 && /* @__PURE__ */ a("div", {
+    m.length > 0 && /* @__PURE__ */ s("div", {
       className: "flow-inspector-section",
       children: [/* @__PURE__ */ e("div", {
         className: "flow-inspector-section-title",
         children: "Layer"
-      }), /* @__PURE__ */ a("div", {
+      }), /* @__PURE__ */ s("div", {
         style: {
           display: "flex",
           gap: 4
@@ -395,7 +396,7 @@ function we() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => O("front"),
+            onClick: () => P("front"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring to Front (⌘⇧↑)",
               children: "⤒"
@@ -404,7 +405,7 @@ function we() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => O("up"),
+            onClick: () => P("up"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring Forward (⌘↑)",
               children: "↑"
@@ -413,7 +414,7 @@ function we() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => O("down"),
+            onClick: () => P("down"),
             children: /* @__PURE__ */ e("span", {
               title: "Send Backward (⌘↓)",
               children: "↓"
@@ -422,7 +423,7 @@ function we() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => O("back"),
+            onClick: () => P("back"),
             children: /* @__PURE__ */ e("span", {
               title: "Send to Back (⌘⇧↓)",
               children: "⤓"
@@ -431,20 +432,20 @@ function we() {
         ]
       })]
     }),
-    s.length === 1 && /* @__PURE__ */ e(ge, {
-      edge: s[0],
-      onUpdateData: q,
-      onUpdateType: D
+    t.length === 1 && /* @__PURE__ */ e(Oe, {
+      edge: t[0],
+      onUpdateData: Q,
+      onUpdateType: U
     }),
-    u.length === 1 && /* @__PURE__ */ a(F, { children: [/* @__PURE__ */ e(Ne, {
-      line: u[0],
-      onUpdateData: U
-    }), /* @__PURE__ */ a("div", {
+    r.length === 1 && /* @__PURE__ */ s(E, { children: [/* @__PURE__ */ e(Ee, {
+      line: r[0],
+      onUpdateData: ee
+    }), /* @__PURE__ */ s("div", {
       className: "flow-inspector-section",
       children: [/* @__PURE__ */ e("div", {
         className: "flow-inspector-section-title",
         children: "Layer"
-      }), /* @__PURE__ */ a("div", {
+      }), /* @__PURE__ */ s("div", {
         style: {
           display: "flex",
           gap: 4
@@ -453,7 +454,7 @@ function we() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => M("front"),
+            onClick: () => L("front"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring to Front",
               children: "⤒"
@@ -462,7 +463,7 @@ function we() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => M("up"),
+            onClick: () => L("up"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring Forward",
               children: "↑"
@@ -471,7 +472,7 @@ function we() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => M("down"),
+            onClick: () => L("down"),
             children: /* @__PURE__ */ e("span", {
               title: "Send Backward",
               children: "↓"
@@ -480,7 +481,7 @@ function we() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => M("back"),
+            onClick: () => L("back"),
             children: /* @__PURE__ */ e("span", {
               title: "Send to Back",
               children: "⤓"
@@ -491,9 +492,9 @@ function we() {
     })] })
   ] });
 }
-function P({ value: l, onChange: d, kind: o, allowTransparent: i, customFallback: p = "#ffffff" }) {
-  const f = ie[o], s = ne(f) ?? "var(--color-base-content)", u = l ?? "", k = u.toLowerCase(), C = oe(u), L = u === "transparent", B = Z.some((z) => z.value.toLowerCase() === k), Y = u === f, O = !!u && !C && !L && !B, M = O ? u : p;
-  return /* @__PURE__ */ a("div", {
+function O({ value: l, onChange: c, kind: a, allowTransparent: o, customFallback: f = "#ffffff" }) {
+  const m = oe[a], t = ce(m) ?? "var(--color-base-content)", r = l ?? "", N = r.toLowerCase(), w = ne(r), z = r === "transparent", T = H.some((k) => k.value.toLowerCase() === N), Y = r === m, P = !!r && !w && !z && !T, L = P ? r : f;
+  return /* @__PURE__ */ s("div", {
     className: "flow-color-field",
     children: [
       /* @__PURE__ */ e("button", {
@@ -501,189 +502,350 @@ function P({ value: l, onChange: d, kind: o, allowTransparent: i, customFallback
         title: "跟随主题切换",
         "aria-label": "跟随主题切换",
         className: `flow-color-swatch flow-color-swatch--sync${Y ? " is-active" : ""}`,
-        style: { background: s },
-        onClick: () => d(f)
+        style: { background: t },
+        onClick: () => c(m)
       }),
       /* @__PURE__ */ e("span", { className: "flow-color-divider" }),
-      Z.map((z) => /* @__PURE__ */ e("button", {
+      H.map((k) => /* @__PURE__ */ e("button", {
         type: "button",
-        title: z.label,
-        "aria-label": z.label,
-        className: `flow-color-swatch${!C && !L && k === z.value.toLowerCase() ? " is-active" : ""}`,
-        style: { background: z.value },
-        onClick: () => d(z.value)
-      }, z.value)),
+        title: k.label,
+        "aria-label": k.label,
+        className: `flow-color-swatch${!w && !z && N === k.value.toLowerCase() ? " is-active" : ""}`,
+        style: { background: k.value },
+        onClick: () => c(k.value)
+      }, k.value)),
       /* @__PURE__ */ e("span", { className: "flow-color-divider" }),
       /* @__PURE__ */ e("label", {
-        className: `flow-color-swatch flow-color-swatch--custom${O ? " is-active" : ""}`,
+        className: `flow-color-swatch flow-color-swatch--custom${P ? " is-active" : ""}`,
         title: "自定义颜色",
-        style: O ? { background: u } : void 0,
+        style: P ? { background: r } : void 0,
         children: /* @__PURE__ */ e("input", {
           type: "color",
-          value: M,
-          onChange: (z) => d(z.target.value)
+          value: L,
+          onChange: (k) => c(k.target.value)
         })
       }),
-      i && /* @__PURE__ */ e("button", {
+      o && /* @__PURE__ */ e("button", {
         type: "button",
         title: "透明",
         "aria-label": "透明",
-        className: `flow-color-swatch flow-color-swatch--transparent${L ? " is-active" : ""}`,
-        onClick: () => d("transparent")
+        className: `flow-color-swatch flow-color-swatch--transparent${z ? " is-active" : ""}`,
+        onClick: () => c("transparent")
       })
     ]
   });
 }
-function ve({ node: l, isGroup: d, onUpdateData: o, onUpdateDataBatch: i, onUpdateDimension: p, onUpdateType: f }) {
-  return /* @__PURE__ */ a(F, { children: [
-    /* @__PURE__ */ a("div", {
+function Se(l) {
+  const c = ue(l, re($(l)?.brandColor, "") || "#475569");
+  return c ? `data:image/svg+xml;utf8,${encodeURIComponent(c)}` : "";
+}
+function ke({ node: l, onUpdateData: c }) {
+  const [a, o] = ze("lang"), f = A(() => we(a), [a]), m = l.data.titleIcon ?? "", t = l.data.titleIconSide ?? "left";
+  return /* @__PURE__ */ s("div", {
+    className: "flow-inspector-section",
+    children: [
+      /* @__PURE__ */ e("div", {
+        className: "flow-inspector-section-title",
+        children: "Title Icon"
+      }),
+      /* @__PURE__ */ s("div", {
+        className: "flow-inspector-row",
+        children: [/* @__PURE__ */ e(n, {
+          size: "xs",
+          className: "flow-inspector-label",
+          children: "Icon"
+        }), /* @__PURE__ */ s("div", {
+          style: {
+            display: "flex",
+            gap: 4,
+            alignItems: "center",
+            flex: 1,
+            minWidth: 0
+          },
+          children: [/* @__PURE__ */ e(y, {
+            options: fe.map((r) => ({
+              value: r.id,
+              label: r.label
+            })),
+            value: a,
+            onChange: (r) => o(r),
+            style: {
+              fontSize: 12,
+              flex: 1,
+              minWidth: 0
+            }
+          }), /* @__PURE__ */ e(g, {
+            size: "xs",
+            variant: m ? "ghost" : "primary",
+            square: !0,
+            onClick: () => c(l.id, "titleIcon", void 0),
+            children: /* @__PURE__ */ e("span", {
+              title: "移除标题图标",
+              children: "✕"
+            })
+          })]
+        })]
+      }),
+      m && !f.some((r) => r.id === m) && /* @__PURE__ */ e("div", {
+        style: {
+          fontSize: 10,
+          opacity: 0.55,
+          marginBottom: 4
+        },
+        children: "当前图标在其他分类"
+      }),
+      /* @__PURE__ */ e("div", {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(22px, 1fr))",
+          gap: 3,
+          maxHeight: 92,
+          overflowY: "auto",
+          padding: 3,
+          border: "1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent)",
+          borderRadius: 6,
+          marginBottom: 6
+        },
+        children: f.map((r) => {
+          const N = Se(r.id), w = m === r.id;
+          return /* @__PURE__ */ e("button", {
+            type: "button",
+            title: r.label,
+            "aria-label": r.label,
+            onClick: () => c(l.id, "titleIcon", r.id),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 22,
+              height: 22,
+              borderRadius: 4,
+              cursor: "pointer",
+              padding: 0,
+              border: w ? "1.5px solid var(--color-primary)" : "1px solid transparent",
+              background: w ? "color-mix(in oklch, var(--color-primary) 12%, transparent)" : "transparent"
+            },
+            children: N && /* @__PURE__ */ e("img", {
+              src: N,
+              width: 16,
+              height: 16,
+              alt: "",
+              style: { objectFit: "contain" }
+            })
+          }, r.id);
+        })
+      }),
+      m && /* @__PURE__ */ s(E, { children: [
+        /* @__PURE__ */ s("div", {
+          className: "flow-inspector-row",
+          children: [/* @__PURE__ */ e(n, {
+            size: "xs",
+            className: "flow-inspector-label",
+            children: "Side"
+          }), /* @__PURE__ */ e(y, {
+            options: [{
+              value: "left",
+              label: "left"
+            }, {
+              value: "right",
+              label: "right"
+            }],
+            value: t,
+            onChange: (r) => c(l.id, "titleIconSide", r),
+            style: { fontSize: 12 }
+          })]
+        }),
+        /* @__PURE__ */ s("div", {
+          className: "flow-inspector-row",
+          children: [
+            /* @__PURE__ */ e(n, {
+              size: "xs",
+              className: "flow-inspector-label",
+              children: "Size"
+            }),
+            /* @__PURE__ */ e(b, {
+              size: "xs",
+              type: "number",
+              value: String(l.data.titleIconSize ?? Math.max(8, Math.round(l.data.fontSize * 1.15))),
+              onChange: (r) => c(l.id, "titleIconSize", Math.max(8, Number(r.target.value) || 8))
+            }),
+            /* @__PURE__ */ e("span", {
+              className: "flow-inspector-suffix",
+              style: {
+                fontSize: 10,
+                opacity: 0.5
+              },
+              children: "px"
+            })
+          ]
+        }),
+        /* @__PURE__ */ s("div", {
+          className: "flow-inspector-row",
+          children: [/* @__PURE__ */ e(n, {
+            size: "xs",
+            className: "flow-inspector-label",
+            children: "Color"
+          }), /* @__PURE__ */ e(O, {
+            value: l.data.titleIconColor ?? $(m)?.brandColor ?? l.data.labelColor ?? l.data.color,
+            kind: "stroke",
+            customFallback: "#334155",
+            onChange: (r) => c(l.id, "titleIconColor", r)
+          })]
+        })
+      ] })
+    ]
+  });
+}
+function Ie({ node: l, isGroup: c, onUpdateData: a, onUpdateDataBatch: o, onUpdateDimension: f, onUpdateType: m }) {
+  return /* @__PURE__ */ s(E, { children: [
+    /* @__PURE__ */ s("div", {
       className: "flow-inspector-section",
       children: [
         /* @__PURE__ */ e("div", {
           className: "flow-inspector-section-title",
           children: "Node"
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Label"
-          }), /* @__PURE__ */ e(v, {
+          }), /* @__PURE__ */ e(b, {
             size: "xs",
             value: l.data.label,
-            onChange: (s) => o(l.id, "label", s.target.value)
+            onChange: (t) => a(l.id, "label", t.target.value)
           })]
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Type"
           }), /* @__PURE__ */ e(y, {
-            options: pe.map((s) => ({
-              value: s,
-              label: s
+            options: Ne.map((t) => ({
+              value: t,
+              label: t
             })),
             value: l.type,
-            onChange: (s) => f(l.id, s),
+            onChange: (t) => m(l.id, t),
             style: { fontSize: 12 }
           })]
         })
       ]
     }),
-    /* @__PURE__ */ a("div", {
+    /* @__PURE__ */ s("div", {
       className: "flow-inspector-section",
       children: [
         /* @__PURE__ */ e("div", {
           className: "flow-inspector-section-title",
           children: "Size"
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
             className: "flow-inspector-label",
             children: "W"
-          }), /* @__PURE__ */ e(v, {
+          }), /* @__PURE__ */ e(b, {
             size: "xs",
             type: "number",
             value: String(Math.round(l.width * 100) / 100),
-            onChange: (s) => p(l.id, "width", Number(s.target.value) || l.width)
+            onChange: (t) => f(l.id, "width", Number(t.target.value) || l.width)
           })]
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
             className: "flow-inspector-label",
             children: "H"
-          }), /* @__PURE__ */ e(v, {
+          }), /* @__PURE__ */ e(b, {
             size: "xs",
             type: "number",
             value: String(Math.round(l.height * 100) / 100),
-            onChange: (s) => p(l.id, "height", Number(s.target.value) || l.height)
+            onChange: (t) => f(l.id, "height", Number(t.target.value) || l.height)
           })]
         })
       ]
     }),
-    /* @__PURE__ */ a("div", {
+    /* @__PURE__ */ s("div", {
       className: "flow-inspector-section",
       children: [
         /* @__PURE__ */ e("div", {
           className: "flow-inspector-section-title",
           children: "Style"
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Fill"
-          }), /* @__PURE__ */ e(P, {
+          }), /* @__PURE__ */ e(O, {
             value: l.data.fill,
             kind: "fill",
             allowTransparent: !0,
             customFallback: "#ffffff",
-            onChange: (s) => o(l.id, "fill", s)
+            onChange: (t) => a(l.id, "fill", t)
           })]
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Stroke"
-          }), /* @__PURE__ */ e(P, {
+          }), /* @__PURE__ */ e(O, {
             value: l.data.stroke,
             kind: "stroke",
             allowTransparent: !0,
             customFallback: "#000000",
-            onChange: (s) => o(l.id, "stroke", s)
+            onChange: (t) => a(l.id, "stroke", t)
           })]
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Font"
-          }), /* @__PURE__ */ e(v, {
+          }), /* @__PURE__ */ e(b, {
             size: "xs",
             type: "number",
             value: String(l.data.fontSize),
-            onChange: (s) => o(l.id, "fontSize", Number(s.target.value) || 14)
+            onChange: (t) => a(l.id, "fontSize", Number(t.target.value) || 14)
           })]
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Color"
-          }), /* @__PURE__ */ e(P, {
+          }), /* @__PURE__ */ e(O, {
             value: l.data.color,
             kind: "text",
             customFallback: "#111827",
-            onChange: (s) => o(l.id, "color", s)
+            onChange: (t) => a(l.id, "color", t)
           })]
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Font Color"
-          }), /* @__PURE__ */ e(P, {
+          }), /* @__PURE__ */ e(O, {
             value: l.data.labelColor ?? l.data.color,
             kind: "text",
             customFallback: "#111827",
-            onChange: (s) => o(l.id, "labelColor", s)
+            onChange: (t) => a(l.id, "labelColor", t)
           })]
         }),
-        l.type !== "shapeSvg" && l.type !== "mediaNode" && /* @__PURE__ */ a(F, { children: [
-          /* @__PURE__ */ a("div", {
+        l.type !== "shapeSvg" && l.type !== "mediaNode" && /* @__PURE__ */ s(E, { children: [
+          /* @__PURE__ */ s("div", {
             className: "flow-inspector-row",
             children: [/* @__PURE__ */ e(n, {
               size: "xs",
@@ -728,39 +890,39 @@ function ve({ node: l, isGroup: d, onUpdateData: o, onUpdateDataBatch: i, onUpda
                   label: "bottom-right"
                 }
               ],
-              value: l.data.textPlacement ?? (d || l.type === "animAnchor" ? "top" : "center"),
-              onChange: (s) => o(l.id, "textPlacement", s),
+              value: l.data.textPlacement ?? (c || l.type === "animAnchor" ? "top" : "center"),
+              onChange: (t) => a(l.id, "textPlacement", t),
               style: { fontSize: 12 }
             })]
           }),
-          /* @__PURE__ */ a("div", {
+          /* @__PURE__ */ s("div", {
             className: "flow-inspector-row",
             children: [/* @__PURE__ */ e(n, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Text Off X"
-            }), /* @__PURE__ */ e(v, {
+            }), /* @__PURE__ */ e(b, {
               size: "xs",
               type: "number",
               value: String(l.data.labelOffsetX ?? 0),
-              onChange: (s) => o(l.id, "labelOffsetX", Number(s.target.value) || 0)
+              onChange: (t) => a(l.id, "labelOffsetX", Number(t.target.value) || 0)
             })]
           }),
-          /* @__PURE__ */ a("div", {
+          /* @__PURE__ */ s("div", {
             className: "flow-inspector-row",
             children: [/* @__PURE__ */ e(n, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Text Off Y"
-            }), /* @__PURE__ */ e(v, {
+            }), /* @__PURE__ */ e(b, {
               size: "xs",
               type: "number",
               value: String(l.data.labelOffsetY ?? 0),
-              onChange: (s) => o(l.id, "labelOffsetY", Number(s.target.value) || 0)
+              onChange: (t) => a(l.id, "labelOffsetY", Number(t.target.value) || 0)
             })]
           })
         ] }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
@@ -770,54 +932,151 @@ function ve({ node: l, isGroup: d, onUpdateData: o, onUpdateDataBatch: i, onUpda
             options: [{
               value: "none",
               label: "none"
-            }, ...ee.map((s) => ({
-              value: s,
-              label: s
+            }, ...le.map((t) => ({
+              value: t,
+              label: t
             }))],
-            value: l.data.borderStyle ?? (d ? l.type === "geometryGroup" ? "dashed" : "dotted" : "solid"),
-            onChange: (s) => o(l.id, "borderStyle", s),
+            value: l.data.borderStyle ?? (c ? l.type === "geometryGroup" ? "dashed" : "dotted" : "solid"),
+            onChange: (t) => a(l.id, "borderStyle", t),
             style: { fontSize: 12 }
           })]
         }),
-        l.type === "shapeSvg" && /* @__PURE__ */ a(F, { children: [
-          /* @__PURE__ */ a("div", {
+        he.has(l.type) && (() => {
+          const t = l.data.borderSides ?? {}, r = (w, z) => {
+            a(l.id, "borderSides", {
+              ...l.data.borderSides ?? {},
+              [w]: {
+                ...l.data.borderSides?.[w] ?? {},
+                ...z
+              }
+            });
+          }, N = {
+            top: "Top",
+            right: "Right",
+            bottom: "Bottom",
+            left: "Left"
+          };
+          return /* @__PURE__ */ s(E, { children: [/* @__PURE__ */ s("div", {
+            className: "flow-inspector-row",
+            children: [/* @__PURE__ */ e(n, {
+              size: "xs",
+              className: "flow-inspector-label",
+              children: "Sides"
+            }), /* @__PURE__ */ s("div", {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                flex: 1
+              },
+              children: [/* @__PURE__ */ e("span", {
+                style: {
+                  fontSize: 10,
+                  opacity: 0.55
+                },
+                children: "上下左右独立边框"
+              }), pe(l.data, l.type) && /* @__PURE__ */ e("span", {
+                title: "恢复与 Border 设置一致",
+                style: { display: "inline-flex" },
+                children: /* @__PURE__ */ e(g, {
+                  size: "xs",
+                  variant: "ghost",
+                  onClick: () => a(l.id, "borderSides", void 0),
+                  children: "重置"
+                })
+              })]
+            })]
+          }), de.map((w) => {
+            const z = t[w];
+            return /* @__PURE__ */ s("div", {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 4,
+                marginBottom: 4
+              },
+              children: [
+                /* @__PURE__ */ e("span", {
+                  title: `独立设置${N[w]}边`,
+                  style: {
+                    fontSize: 10,
+                    width: 40,
+                    flexShrink: 0,
+                    opacity: z ? 0.95 : 0.6
+                  },
+                  children: N[w]
+                }),
+                /* @__PURE__ */ e("span", {
+                  title: `显示/隐藏 ${N[w]} 边`,
+                  style: { display: "inline-flex" },
+                  children: /* @__PURE__ */ e(W, {
+                    size: "sm",
+                    checked: z?.visible ?? !0,
+                    onChange: (T) => r(w, { visible: T })
+                  })
+                }),
+                /* @__PURE__ */ e(O, {
+                  value: z?.color ?? l.data.stroke,
+                  kind: "stroke",
+                  customFallback: "#334155",
+                  onChange: (T) => r(w, { color: T })
+                }),
+                /* @__PURE__ */ e("span", {
+                  title: `${N[w]} 粗细`,
+                  style: {
+                    display: "inline-flex",
+                    width: 52
+                  },
+                  children: /* @__PURE__ */ e(b, {
+                    size: "xs",
+                    type: "number",
+                    value: String(z?.width ?? l.data.strokeWidth),
+                    onChange: (T) => r(w, { width: Math.max(0, Number(T.target.value) || 0) })
+                  })
+                })
+              ]
+            }, w);
+          })] });
+        })(),
+        l.type === "shapeSvg" && /* @__PURE__ */ s(E, { children: [
+          /* @__PURE__ */ s("div", {
             className: "flow-inspector-row",
             children: [/* @__PURE__ */ e(n, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Icon"
             }), /* @__PURE__ */ e(y, {
-              options: ce().map((s) => ({
-                value: s.id,
-                label: s.label
+              options: ve().map((t) => ({
+                value: t.id,
+                label: t.label
               })),
               value: l.data.svgId ?? "",
               placeholder: "选择图标",
-              onChange: (s) => {
-                const u = de(String(s));
-                i(l.id, {
-                  svgId: s,
-                  ...u?.brandColor ? { color: u.brandColor } : {},
-                  ...!l.data.label || l.data.label === "Text" ? { label: u?.label ?? String(s) } : {}
+              onChange: (t) => {
+                const r = $(String(t));
+                o(l.id, {
+                  svgId: t,
+                  ...r?.brandColor ? { color: r.brandColor } : {},
+                  ...!l.data.label || l.data.label === "Text" ? { label: r?.label ?? String(t) } : {}
                 });
               },
               style: { fontSize: 12 }
             })]
           }),
-          /* @__PURE__ */ a("div", {
+          /* @__PURE__ */ s("div", {
             className: "flow-inspector-row",
             children: [/* @__PURE__ */ e(n, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Box"
-            }), /* @__PURE__ */ e(K, {
+            }), /* @__PURE__ */ e(W, {
               size: "sm",
               checked: l.data.iconBox ?? !1,
-              onChange: (s) => o(l.id, "iconBox", s),
+              onChange: (t) => a(l.id, "iconBox", t),
               label: "显示边框"
             })]
           }),
-          /* @__PURE__ */ a("div", {
+          /* @__PURE__ */ s("div", {
             className: "flow-inspector-row",
             children: [/* @__PURE__ */ e(n, {
               size: "xs",
@@ -847,45 +1106,45 @@ function ve({ node: l, isGroup: d, onUpdateData: o, onUpdateDataBatch: i, onUpda
                 }
               ],
               value: l.data.labelPlacement === "above" ? "top" : l.data.labelPlacement === "center" ? "middle" : l.data.labelPlacement === "below" ? "bottom" : l.data.labelPlacement ?? "bottom",
-              onChange: (s) => o(l.id, "labelPlacement", s),
+              onChange: (t) => a(l.id, "labelPlacement", t),
               style: { fontSize: 12 }
             })]
           }),
-          /* @__PURE__ */ a("div", {
+          /* @__PURE__ */ s("div", {
             className: "flow-inspector-row",
             children: [/* @__PURE__ */ e(n, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Offset X"
-            }), /* @__PURE__ */ e(v, {
+            }), /* @__PURE__ */ e(b, {
               size: "xs",
               type: "number",
               value: String(l.data.labelOffsetX ?? 0),
-              onChange: (s) => o(l.id, "labelOffsetX", Number(s.target.value) || 0)
+              onChange: (t) => a(l.id, "labelOffsetX", Number(t.target.value) || 0)
             })]
           }),
-          /* @__PURE__ */ a("div", {
+          /* @__PURE__ */ s("div", {
             className: "flow-inspector-row",
             children: [/* @__PURE__ */ e(n, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Offset Y"
-            }), /* @__PURE__ */ e(v, {
+            }), /* @__PURE__ */ e(b, {
               size: "xs",
               type: "number",
               value: String(l.data.labelOffsetY ?? 0),
-              onChange: (s) => o(l.id, "labelOffsetY", Number(s.target.value) || 0)
+              onChange: (t) => a(l.id, "labelOffsetY", Number(t.target.value) || 0)
             })]
           })
         ] })
       ]
     }),
-    l.type === "mediaNode" && /* @__PURE__ */ a("div", {
+    l.type === "mediaNode" && /* @__PURE__ */ s("div", {
       className: "flow-inspector-section",
       children: [/* @__PURE__ */ e("div", {
         className: "flow-inspector-section-title",
         children: "Palette (Archify)"
-      }), /* @__PURE__ */ a("div", {
+      }), /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
@@ -897,83 +1156,87 @@ function ve({ node: l, isGroup: d, onUpdateData: o, onUpdateDataBatch: i, onUpda
             flexWrap: "wrap",
             gap: 4
           },
-          children: $.map((s) => /* @__PURE__ */ e("button", {
+          children: j.map((t) => /* @__PURE__ */ e("button", {
             type: "button",
-            title: A[s],
-            "aria-label": A[s],
-            onClick: () => i(l.id, H(s)),
+            title: _[t],
+            "aria-label": _[t],
+            onClick: () => o(l.id, V(t)),
             style: {
               width: 18,
               height: 18,
               borderRadius: 4,
               cursor: "pointer",
-              background: _[s].fill,
-              border: `1.5px solid ${_[s].stroke}`
+              background: R[t].fill,
+              border: `1.5px solid ${R[t].stroke}`
             }
-          }, s))
+          }, t))
         })]
       })]
     }),
-    l.type !== "mediaNode" && /* @__PURE__ */ a("div", {
+    l.type !== "mediaNode" && l.type !== "shapeSvg" && /* @__PURE__ */ e(ke, {
+      node: l,
+      onUpdateData: a
+    }),
+    l.type !== "mediaNode" && /* @__PURE__ */ s("div", {
       className: "flow-inspector-section",
       children: [
         /* @__PURE__ */ e("div", {
           className: "flow-inspector-section-title",
           children: "Card (Archify)"
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Subtitle"
-          }), /* @__PURE__ */ e(v, {
+          }), /* @__PURE__ */ e(b, {
             size: "xs",
             value: l.data.sublabel ?? "",
             placeholder: "secondary line",
-            onChange: (s) => o(l.id, "sublabel", s.target.value)
+            onChange: (t) => a(l.id, "sublabel", t.target.value)
           })]
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Sub Color"
-          }), /* @__PURE__ */ e(P, {
+          }), /* @__PURE__ */ e(O, {
             value: l.data.sublabelColor ?? "#94a3b8",
             kind: "text",
             customFallback: "#94a3b8",
-            onChange: (s) => o(l.id, "sublabelColor", s)
+            onChange: (t) => a(l.id, "sublabelColor", t)
           })]
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Tag"
-          }), /* @__PURE__ */ e(v, {
+          }), /* @__PURE__ */ e(b, {
             size: "xs",
             value: l.data.tag ?? "",
             placeholder: "corner pill",
-            onChange: (s) => o(l.id, "tag", s.target.value)
+            onChange: (t) => a(l.id, "tag", t.target.value)
           })]
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Tag Color"
-          }), /* @__PURE__ */ e(P, {
+          }), /* @__PURE__ */ e(O, {
             value: l.data.tagColor ?? l.data.stroke,
             kind: "stroke",
             customFallback: "#334155",
-            onChange: (s) => o(l.id, "tagColor", s)
+            onChange: (t) => a(l.id, "tagColor", t)
           })]
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
@@ -999,11 +1262,11 @@ function ve({ node: l, isGroup: d, onUpdateData: o, onUpdateDataBatch: i, onUpda
               }
             ],
             value: l.data.tagPlacement ?? "top-right",
-            onChange: (s) => o(l.id, "tagPlacement", s),
+            onChange: (t) => a(l.id, "tagPlacement", t),
             style: { fontSize: 12 }
           })]
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [/* @__PURE__ */ e(n, {
             size: "xs",
@@ -1015,36 +1278,36 @@ function ve({ node: l, isGroup: d, onUpdateData: o, onUpdateDataBatch: i, onUpda
               flexWrap: "wrap",
               gap: 4
             },
-            children: $.map((s) => /* @__PURE__ */ e("button", {
+            children: j.map((t) => /* @__PURE__ */ e("button", {
               type: "button",
-              title: A[s],
-              "aria-label": A[s],
-              onClick: () => i(l.id, H(s)),
+              title: _[t],
+              "aria-label": _[t],
+              onClick: () => o(l.id, V(t)),
               style: {
                 width: 18,
                 height: 18,
                 borderRadius: 4,
                 cursor: "pointer",
-                background: _[s].fill,
-                border: `1.5px solid ${_[s].stroke}`
+                background: R[t].fill,
+                border: `1.5px solid ${R[t].stroke}`
               }
-            }, s))
+            }, t))
           })]
         })
       ]
     }),
-    l.type === "mediaNode" && /* @__PURE__ */ e(be, {
+    l.type === "mediaNode" && /* @__PURE__ */ e(Te, {
       node: l,
-      onUpdateData: o
+      onUpdateData: a
     }),
-    /* @__PURE__ */ a("div", {
+    /* @__PURE__ */ s("div", {
       className: "flow-inspector-section",
       children: [
         /* @__PURE__ */ e("div", {
           className: "flow-inspector-section-title",
           children: "Transform"
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [
             /* @__PURE__ */ e(n, {
@@ -1052,11 +1315,11 @@ function ve({ node: l, isGroup: d, onUpdateData: o, onUpdateDataBatch: i, onUpda
               className: "flow-inspector-label",
               children: "Rotate"
             }),
-            /* @__PURE__ */ e(v, {
+            /* @__PURE__ */ e(b, {
               size: "xs",
               type: "number",
               value: String(l.data.rotation ?? 0),
-              onChange: (s) => o(l.id, "rotation", Number(s.target.value) || 0)
+              onChange: (t) => a(l.id, "rotation", Number(t.target.value) || 0)
             }),
             /* @__PURE__ */ e("span", {
               className: "flow-inspector-suffix",
@@ -1068,7 +1331,7 @@ function ve({ node: l, isGroup: d, onUpdateData: o, onUpdateDataBatch: i, onUpda
             })
           ]
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [
             /* @__PURE__ */ e(n, {
@@ -1079,7 +1342,7 @@ function ve({ node: l, isGroup: d, onUpdateData: o, onUpdateDataBatch: i, onUpda
             /* @__PURE__ */ e(g, {
               size: "xs",
               variant: l.data.flipX ? "primary" : "ghost",
-              onClick: () => o(l.id, "flipX", !l.data.flipX),
+              onClick: () => a(l.id, "flipX", !l.data.flipX),
               square: !0,
               children: /* @__PURE__ */ e("span", {
                 title: "Flip Horizontal",
@@ -1089,7 +1352,7 @@ function ve({ node: l, isGroup: d, onUpdateData: o, onUpdateDataBatch: i, onUpda
             /* @__PURE__ */ e(g, {
               size: "xs",
               variant: l.data.flipY ? "primary" : "ghost",
-              onClick: () => o(l.id, "flipY", !l.data.flipY),
+              onClick: () => a(l.id, "flipY", !l.data.flipY),
               square: !0,
               children: /* @__PURE__ */ e("span", {
                 title: "Flip Vertical",
@@ -1098,7 +1361,7 @@ function ve({ node: l, isGroup: d, onUpdateData: o, onUpdateDataBatch: i, onUpda
             })
           ]
         }),
-        /* @__PURE__ */ a("div", {
+        /* @__PURE__ */ s("div", {
           className: "flow-inspector-row",
           children: [
             /* @__PURE__ */ e(n, {
@@ -1109,13 +1372,13 @@ function ve({ node: l, isGroup: d, onUpdateData: o, onUpdateDataBatch: i, onUpda
             /* @__PURE__ */ e(g, {
               size: "xs",
               variant: "ghost",
-              onClick: () => o(l.id, "rotation", ((l.data.rotation ?? 0) + 90) % 360),
+              onClick: () => a(l.id, "rotation", ((l.data.rotation ?? 0) + 90) % 360),
               children: "+90°"
             }),
             /* @__PURE__ */ e(g, {
               size: "xs",
               variant: "ghost",
-              onClick: () => o(l.id, "rotation", ((l.data.rotation ?? 0) - 90 + 360) % 360),
+              onClick: () => a(l.id, "rotation", ((l.data.rotation ?? 0) - 90 + 360) % 360),
               children: "−90°"
             })
           ]
@@ -1124,26 +1387,26 @@ function ve({ node: l, isGroup: d, onUpdateData: o, onUpdateDataBatch: i, onUpda
     })
   ] });
 }
-function be({ node: l, onUpdateData: d }) {
-  const o = l.data.mediaKind ?? "markdown", i = l.data.aiConfig, p = ue(null), f = (s, u) => {
-    d(l.id, "aiConfig", {
+function Te({ node: l, onUpdateData: c }) {
+  const a = l.data.mediaKind ?? "markdown", o = l.data.aiConfig, f = ye(null), m = (t, r) => {
+    c(l.id, "aiConfig", {
       gateway: "",
       protocol: "openai",
       model: "",
-      ...i,
-      [s]: u
+      ...o,
+      [t]: r
     });
   };
-  return /* @__PURE__ */ a("div", {
+  return /* @__PURE__ */ s("div", {
     className: "flow-inspector-section",
-    children: [/* @__PURE__ */ a("div", {
+    children: [/* @__PURE__ */ s("div", {
       className: "flow-inspector-section-title",
-      children: ["Media · ", o]
-    }), o === "data" ? /* @__PURE__ */ e(fe, {
+      children: ["Media · ", a]
+    }), a === "data" ? /* @__PURE__ */ e(xe, {
       node: l,
-      onUpdateData: d
-    }) : o === "model3d" ? /* @__PURE__ */ a(F, { children: [
-      /* @__PURE__ */ a("div", {
+      onUpdateData: c
+    }) : a === "model3d" ? /* @__PURE__ */ s(E, { children: [
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
@@ -1165,23 +1428,23 @@ function be({ node: l, onUpdateData: d }) {
             }
           ],
           value: l.data.modelFormat ?? "stl",
-          onChange: (s) => d(l.id, "modelFormat", s)
+          onChange: (t) => c(l.id, "modelFormat", t)
         })]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row flow-inspector-multiline",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
           className: "flow-inspector-label",
           children: "模型链接"
-        }), /* @__PURE__ */ e(v, {
+        }), /* @__PURE__ */ e(b, {
           size: "xs",
           value: l.data.mediaContent ?? "",
           placeholder: "https://example.com/model.stl",
-          onChange: (s) => d(l.id, "mediaContent", s.target.value)
+          onChange: (t) => c(l.id, "mediaContent", t.target.value)
         })]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [
           /* @__PURE__ */ e(n, {
@@ -1190,32 +1453,32 @@ function be({ node: l, onUpdateData: d }) {
             children: "本地模型"
           }),
           /* @__PURE__ */ e("input", {
-            ref: p,
+            ref: f,
             type: "file",
             accept: ".stl,.obj,.3mf,model/stl,model/obj,model/3mf,application/vnd.ms-package.3dmanufacturing-3dmodel+xml",
             hidden: !0,
-            onChange: (s) => {
-              const u = s.target.files?.[0];
-              if (s.target.value = "", !u) return;
-              if (u.size > 10 * 1024 * 1024) {
+            onChange: (t) => {
+              const r = t.target.files?.[0];
+              if (t.target.value = "", !r) return;
+              if (r.size > 10 * 1024 * 1024) {
                 window.alert("本地模型不能超过 10 MiB，请改用模型链接。");
                 return;
               }
-              const k = u.name.split(".").pop()?.toLowerCase();
-              if (k !== "stl" && k !== "obj" && k !== "3mf") {
+              const N = r.name.split(".").pop()?.toLowerCase();
+              if (N !== "stl" && N !== "obj" && N !== "3mf") {
                 window.alert("仅支持 STL、OBJ 和 3MF 模型。");
                 return;
               }
-              const C = new FileReader();
-              C.onload = () => {
-                typeof C.result == "string" && (d(l.id, "modelFormat", k), d(l.id, "mediaContent", C.result));
-              }, C.onerror = () => window.alert("读取本地模型失败。"), C.readAsDataURL(u);
+              const w = new FileReader();
+              w.onload = () => {
+                typeof w.result == "string" && (c(l.id, "modelFormat", N), c(l.id, "mediaContent", w.result));
+              }, w.onerror = () => window.alert("读取本地模型失败。"), w.readAsDataURL(r);
             }
           }),
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "neutral",
-            onClick: () => p.current?.click(),
+            onClick: () => f.current?.click(),
             children: "选择文件"
           }),
           l.data.mediaContent?.startsWith("data:") && /* @__PURE__ */ e("span", {
@@ -1228,33 +1491,33 @@ function be({ node: l, onUpdateData: d }) {
         className: "flow-inspector-help",
         children: "支持 STL、OBJ、3MF；本地文件将以 Base64 嵌入文档，最大 10 MiB。选中节点后可在内部拖拽旋转、滚轮缩放。"
       })
-    ] }) : o === "image" ? /* @__PURE__ */ a(F, { children: [/* @__PURE__ */ a("div", {
+    ] }) : a === "image" ? /* @__PURE__ */ s(E, { children: [/* @__PURE__ */ s("div", {
       className: "flow-inspector-row flow-inspector-multiline",
       children: [/* @__PURE__ */ e(n, {
         size: "xs",
         className: "flow-inspector-label",
         children: "图片链接"
-      }), /* @__PURE__ */ e(v, {
+      }), /* @__PURE__ */ e(b, {
         size: "xs",
         value: l.data.mediaContent ?? "",
         placeholder: "https://example.com/image.png",
-        onChange: (s) => d(l.id, "mediaContent", s.target.value)
+        onChange: (t) => c(l.id, "mediaContent", t.target.value)
       })]
     }), /* @__PURE__ */ e("div", {
       className: "flow-inspector-help",
       children: "支持 HTTP(S) 链接；选中图片节点后可直接粘贴图片并保存为 Base64。"
-    })] }) : o !== "ai" ? /* @__PURE__ */ e(j, {
+    })] }) : a !== "ai" ? /* @__PURE__ */ e(K, {
       label: {
         markdown: "Markdown 源码",
         html: "HTML 源码",
         mermaid: "Mermaid 图表",
         math: "LaTeX 公式"
-      }[o] ?? "内容",
+      }[a] ?? "内容",
       value: l.data.mediaContent ?? "",
-      onChange: (s) => d(l.id, "mediaContent", s),
+      onChange: (t) => c(l.id, "mediaContent", t),
       rows: 8
-    }) : /* @__PURE__ */ a(F, { children: [
-      /* @__PURE__ */ a("div", {
+    }) : /* @__PURE__ */ s(E, { children: [
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
@@ -1268,12 +1531,12 @@ function be({ node: l, onUpdateData: d }) {
             value: "anthropic",
             label: "Anthropic 兼容"
           }],
-          value: i?.protocol ?? "openai",
-          onChange: (s) => f("protocol", s),
+          value: o?.protocol ?? "openai",
+          onChange: (t) => m("protocol", t),
           style: { fontSize: 12 }
         })]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         style: {
           flexDirection: "column",
@@ -1284,14 +1547,14 @@ function be({ node: l, onUpdateData: d }) {
           size: "xs",
           className: "flow-inspector-label",
           children: "接口地址"
-        }), /* @__PURE__ */ e(v, {
+        }), /* @__PURE__ */ e(b, {
           size: "xs",
-          value: i?.gateway ?? "",
+          value: o?.gateway ?? "",
           placeholder: "https://api.openai.com/v1/chat/completions",
-          onChange: (s) => f("gateway", s.target.value)
+          onChange: (t) => m("gateway", t.target.value)
         })]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         style: {
           flexDirection: "column",
@@ -1302,14 +1565,14 @@ function be({ node: l, onUpdateData: d }) {
           size: "xs",
           className: "flow-inspector-label",
           children: "模型"
-        }), /* @__PURE__ */ e(v, {
+        }), /* @__PURE__ */ e(b, {
           size: "xs",
-          value: i?.model ?? "",
+          value: o?.model ?? "",
           placeholder: "gpt-4o-mini",
-          onChange: (s) => f("model", s.target.value)
+          onChange: (t) => m("model", t.target.value)
         })]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         style: {
           flexDirection: "column",
@@ -1320,18 +1583,18 @@ function be({ node: l, onUpdateData: d }) {
           size: "xs",
           className: "flow-inspector-label",
           children: "API Key"
-        }), /* @__PURE__ */ e(v, {
+        }), /* @__PURE__ */ e(b, {
           size: "xs",
           type: "password",
-          value: i?.apiKey ?? "",
+          value: o?.apiKey ?? "",
           placeholder: "sk-...",
-          onChange: (s) => f("apiKey", s.target.value)
+          onChange: (t) => m("apiKey", t.target.value)
         })]
       }),
-      /* @__PURE__ */ e(j, {
+      /* @__PURE__ */ e(K, {
         label: "System Prompt",
-        value: i?.systemPrompt ?? "",
-        onChange: (s) => f("systemPrompt", s),
+        value: o?.systemPrompt ?? "",
+        onChange: (t) => m("systemPrompt", t),
         rows: 3
       }),
       /* @__PURE__ */ e("div", {
@@ -1345,142 +1608,142 @@ function be({ node: l, onUpdateData: d }) {
     ] })]
   });
 }
-function ge({ edge: l, onUpdateData: d, onUpdateType: o }) {
-  return /* @__PURE__ */ a("div", {
+function Oe({ edge: l, onUpdateData: c, onUpdateType: a }) {
+  return /* @__PURE__ */ s("div", {
     className: "flow-inspector-section",
     children: [
       /* @__PURE__ */ e("div", {
         className: "flow-inspector-section-title",
         children: "Edge"
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Type"
         }), /* @__PURE__ */ e(y, {
-          options: se.map((i) => ({
-            value: i,
-            label: i
+          options: se.map((o) => ({
+            value: o,
+            label: o
           })),
           value: l.type,
-          onChange: (i) => o(l.id, i),
+          onChange: (o) => a(l.id, o),
           style: { fontSize: 12 }
         })]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Color"
-        }), /* @__PURE__ */ e(P, {
+        }), /* @__PURE__ */ e(O, {
           value: l.data.strokeColor,
           kind: "line",
           customFallback: "#374151",
-          onChange: (i) => d(l.id, "strokeColor", i)
+          onChange: (o) => c(l.id, "strokeColor", o)
         })]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Width"
-        }), /* @__PURE__ */ e(v, {
+        }), /* @__PURE__ */ e(b, {
           size: "xs",
           type: "number",
           value: String(l.data.strokeWidth ?? 2),
-          onChange: (i) => d(l.id, "strokeWidth", Number(i.target.value) || 2)
+          onChange: (o) => c(l.id, "strokeWidth", Number(o.target.value) || 2)
         })]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Animation"
-        }), /* @__PURE__ */ e(K, {
+        }), /* @__PURE__ */ e(W, {
           size: "sm",
           checked: l.data.animated ?? !1,
-          onChange: (i) => d(l.id, "animated", i),
+          onChange: (o) => c(l.id, "animated", o),
           label: "预览时播放"
         })]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Line"
         }), /* @__PURE__ */ e(y, {
-          options: V.map((i) => ({
-            value: i,
-            label: i
+          options: J.map((o) => ({
+            value: o,
+            label: o
           })),
           value: l.data.lineStyle ?? "solid",
-          onChange: (i) => d(l.id, "lineStyle", i),
+          onChange: (o) => c(l.id, "lineStyle", o),
           style: { fontSize: 12 }
         })]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Start"
         }), /* @__PURE__ */ e(y, {
-          options: X.map((i) => ({
-            value: i,
-            label: i
+          options: Z.map((o) => ({
+            value: o,
+            label: o
           })),
           value: l.data.markerStart ?? "none",
-          onChange: (i) => d(l.id, "markerStart", i),
+          onChange: (o) => c(l.id, "markerStart", o),
           style: { fontSize: 12 }
         })]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
           className: "flow-inspector-label",
           children: "End"
         }), /* @__PURE__ */ e(y, {
-          options: X.map((i) => ({
-            value: i,
-            label: i
+          options: Z.map((o) => ({
+            value: o,
+            label: o
           })),
           value: l.data.markerEnd ?? "none",
-          onChange: (i) => d(l.id, "markerEnd", i),
+          onChange: (o) => c(l.id, "markerEnd", o),
           style: { fontSize: 12 }
         })]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Label"
-        }), /* @__PURE__ */ e(v, {
+        }), /* @__PURE__ */ e(b, {
           size: "xs",
           value: l.data.labelText ?? "",
-          onChange: (i) => d(l.id, "labelText", i.target.value),
+          onChange: (o) => c(l.id, "labelText", o.target.value),
           placeholder: "Edge label"
         })]
       })
     ]
   });
 }
-function Ne({ line: l, onUpdateData: d }) {
-  return /* @__PURE__ */ a("div", {
+function Ee({ line: l, onUpdateData: c }) {
+  return /* @__PURE__ */ s("div", {
     className: "flow-inspector-section",
     children: [
       /* @__PURE__ */ e("div", {
         className: "flow-inspector-section-title",
         children: "Line"
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
@@ -1494,45 +1757,45 @@ function Ne({ line: l, onUpdateData: d }) {
           children: l.type
         })]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Color"
-        }), /* @__PURE__ */ e(P, {
+        }), /* @__PURE__ */ e(O, {
           value: l.strokeColor,
           kind: "line",
           customFallback: "#374151",
-          onChange: (o) => d(l.id, "strokeColor", o)
+          onChange: (a) => c(l.id, "strokeColor", a)
         })]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Width"
-        }), /* @__PURE__ */ e(v, {
+        }), /* @__PURE__ */ e(b, {
           size: "xs",
           type: "number",
           value: String(l.strokeWidth),
-          onChange: (o) => d(l.id, "strokeWidth", Number(o.target.value) || 2)
+          onChange: (a) => c(l.id, "strokeWidth", Number(a.target.value) || 2)
         })]
       }),
-      /* @__PURE__ */ a("div", {
+      /* @__PURE__ */ s("div", {
         className: "flow-inspector-row",
         children: [/* @__PURE__ */ e(n, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Style"
         }), /* @__PURE__ */ e(y, {
-          options: V.map((o) => ({
-            value: o,
-            label: o
+          options: J.map((a) => ({
+            value: a,
+            label: a
           })),
           value: l.lineStyle,
-          onChange: (o) => d(l.id, "lineStyle", o),
+          onChange: (a) => c(l.id, "lineStyle", a),
           style: { fontSize: 12 }
         })]
       })
@@ -1540,8 +1803,8 @@ function Ne({ line: l, onUpdateData: d }) {
   });
 }
 export {
-  we as InspectorPanelContent,
-  Xe as default
+  Ce as InspectorPanelContent,
+  Ue as default
 };
 
 //# sourceMappingURL=InspectorPanel.js.map