dishui 0.0.47 → 0.0.49

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

@@ -1,33 +1,34 @@
-import N from "../../../Button/index.js";
-import w from "../../../Input/index.js";
-import d from "../../../Label/index.js";
-import _ from "../../../Checkbox/index.js";
-import y from "../../../Select/index.js";
-import { BORDER_STYLE_OPTIONS as $, DEFAULT_NODE_DATA as q, EDGE_LINE_STYLE_OPTIONS as Y, EDGE_MARKER_OPTIONS as A, EDGE_TYPE_OPTIONS as Q } from "../constants.js";
-import { useFlowContext as V } from "../context/FlowContext.js";
-import { useFlowUI as D } from "../context/FlowUIContext.js";
-import { generateId as U } from "../nodes/nodeUtils.js";
-import { getAllSvgIcons as ee, getSvgIcon as le } from "../nodes/svgIcons.js";
-import { useDraggablePanel as se } from "../hooks/useDraggablePanel.js";
-import { useResizablePanel as ae } from "../hooks/useResizablePanel.js";
-import { FLOW_NODE_TYPES as ie } from "../types.js";
-import { ExpandableTextarea as W } from "./ExpandableTextarea.js";
-import { DataInspectorSection as te } from "./DataInspectorSection.js";
-import { useMemo as L, useRef as ne } from "react";
-import { Fragment as T, jsx as e, jsxs as a } from "react/jsx-runtime";
-function Ee() {
-  const { showInspector: l } = D(), { panelStyle: p, handleProps: r } = se(), { panelWidth: t, resizeHandleProps: m } = ae("left", 240);
+import g from "../../../Button/index.js";
+import b from "../../../Input/index.js";
+import m from "../../../Label/index.js";
+import X from "../../../Checkbox/index.js";
+import k from "../../../Select/index.js";
+import { BORDER_STYLE_OPTIONS as q, DEFAULT_NODE_DATA as Q, EDGE_LINE_STYLE_OPTIONS as $, EDGE_MARKER_OPTIONS as Y, EDGE_TYPE_OPTIONS as D } from "../constants.js";
+import { useFlowContext as U } from "../context/FlowContext.js";
+import { useFlowUI as ee } from "../context/FlowUIContext.js";
+import { COMMON_COLORS as R, THEME_SYNC_TOKEN as le, isThemeToken as se, themeTokenCssVar as ae } from "../utils/themeColor.js";
+import { generateId as ie } from "../nodes/nodeUtils.js";
+import { getAllSvgIcons as te, getSvgIcon as ne } from "../nodes/svgIcons.js";
+import { useDraggablePanel as oe } from "../hooks/useDraggablePanel.js";
+import { useResizablePanel as re } from "../hooks/useResizablePanel.js";
+import { FLOW_NODE_TYPES as ce } from "../types.js";
+import { ExpandableTextarea as Z } from "./ExpandableTextarea.js";
+import { DataInspectorSection as de } from "./DataInspectorSection.js";
+import { useMemo as A, useRef as me } from "react";
+import { Fragment as L, jsx as e, jsxs as a } from "react/jsx-runtime";
+function Pe() {
+  const { showInspector: l } = ee(), { panelStyle: c, handleProps: r } = oe(), { panelWidth: t, resizeHandleProps: p } = re("left", 240);
   return l ? /* @__PURE__ */ a("div", {
     className: "flow-inspector",
     "data-flow-panel": !0,
     style: {
-      ...p,
+      ...c,
       width: t
     },
     children: [
       /* @__PURE__ */ e("div", {
         className: "flow-panel-resize-handle flow-panel-resize-handle--left",
-        ...m
+        ...p
       }),
       /* @__PURE__ */ e("div", {
         className: "flow-panel-drag-handle",
@@ -45,78 +46,78 @@ function Ee() {
       }),
       /* @__PURE__ */ e("div", {
         className: "flow-inspector-content",
-        children: /* @__PURE__ */ e(oe, {})
+        children: /* @__PURE__ */ e(he, {})
       })
     ]
   }) : null;
 }
-function oe() {
-  const { currentCanvas: l, selection: p, setSelection: r, setDoc: t, currentCanvasId: m } = V(), u = L(() => l.nodes.filter((c) => p.nodeIds.has(c.id)), [l.nodes, p.nodeIds]), s = L(() => l.edges.filter((c) => p.edgeIds.has(c.id)), [l.edges, p.edgeIds]), v = L(() => l.lines.filter((c) => p.lineIds.has(c.id)), [l.lines, p.lineIds]), E = u.length > 0 || s.length > 0 || v.length > 0, I = u.length === 1 && (u[0].type === "flowGroup" || u[0].type === "geometryGroup" || u[0].data.isGroup), F = u.length + v.length, O = (c = "flowGroup") => {
-    if (F < 2) return;
-    const f = 20;
+function he() {
+  const { currentCanvas: l, selection: c, setSelection: r, setDoc: t, currentCanvasId: p } = U(), f = A(() => l.nodes.filter((d) => c.nodeIds.has(d.id)), [l.nodes, c.nodeIds]), s = A(() => l.edges.filter((d) => c.edgeIds.has(d.id)), [l.edges, c.edgeIds]), u = A(() => l.lines.filter((d) => c.lineIds.has(d.id)), [l.lines, c.lineIds]), S = f.length > 0 || s.length > 0 || u.length > 0, z = f.length === 1 && (f[0].type === "flowGroup" || f[0].type === "geometryGroup" || f[0].data.isGroup), M = f.length + u.length, P = (d = "flowGroup") => {
+    if (M < 2) return;
+    const w = 20;
     let o = 1 / 0, i = 1 / 0, n = -1 / 0, h = -1 / 0;
-    for (const x of u)
+    for (const x of f)
       o = Math.min(o, x.position.x), i = Math.min(i, x.position.y), n = Math.max(n, x.position.x + x.width), h = Math.max(h, x.position.y + x.height);
-    for (const x of v) for (const z of x.points)
-      o = Math.min(o, z.x), i = Math.min(i, z.y), n = Math.max(n, z.x), h = Math.max(h, z.y);
-    const C = c === "geometryGroup", k = U("group"), g = {
-      id: k,
-      type: c,
+    for (const x of u) for (const C of x.points)
+      o = Math.min(o, C.x), i = Math.min(i, C.y), n = Math.max(n, C.x), h = Math.max(h, C.y);
+    const I = d === "geometryGroup", E = ie("group"), v = {
+      id: E,
+      type: d,
       position: {
-        x: o - f,
-        y: i - f
+        x: o - w,
+        y: i - w
       },
-      width: n - o + f * 2,
-      height: h - i + f * 2,
+      width: n - o + w * 2,
+      height: h - i + w * 2,
       data: {
-        ...q,
-        label: C ? "Geo Group" : "Group",
-        fill: C ? "#fefce8" : "#f0f9ff",
+        ...Q,
+        label: I ? "Geo Group" : "Group",
+        fill: I ? "#fefce8" : "#f0f9ff",
         stroke: "#9ca3af",
         strokeWidth: 1.5,
-        borderStyle: C ? "dashed" : "dotted",
+        borderStyle: I ? "dashed" : "dotted",
         isGroup: !0
       }
-    }, S = p.nodeIds, b = p.lineIds;
+    }, T = c.nodeIds, N = c.lineIds;
     t((x) => {
-      const z = x.canvases[m];
-      return z ? {
+      const C = x.canvases[p];
+      return C ? {
         ...x,
         canvases: {
           ...x.canvases,
-          [m]: {
-            ...z,
-            nodes: C ? [g, ...z.nodes] : [g, ...z.nodes.map((G) => S.has(G.id) ? {
-              ...G,
-              parentId: k
-            } : G)],
-            lines: C ? z.lines : z.lines.map((G) => b.has(G.id) ? {
-              ...G,
-              parentId: k
-            } : G)
+          [p]: {
+            ...C,
+            nodes: I ? [v, ...C.nodes] : [v, ...C.nodes.map((F) => T.has(F.id) ? {
+              ...F,
+              parentId: E
+            } : F)],
+            lines: I ? C.lines : C.lines.map((F) => N.has(F.id) ? {
+              ...F,
+              parentId: E
+            } : F)
           }
         }
       } : x;
     }), r({
-      nodeIds: /* @__PURE__ */ new Set([k]),
+      nodeIds: /* @__PURE__ */ new Set([E]),
       edgeIds: /* @__PURE__ */ new Set(),
       lineIds: /* @__PURE__ */ new Set()
     });
-  }, R = () => {
-    const c = /* @__PURE__ */ new Set(), f = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set();
-    for (const i of u) (i.type === "flowGroup" || i.type === "geometryGroup" || i.data.isGroup) && c.add(i.id);
-    if (c.size !== 0) {
-      for (const i of l.nodes) i.parentId && c.has(i.parentId) && f.add(i.id);
-      for (const i of l.lines) i.parentId && c.has(i.parentId) && o.add(i.id);
+  }, _ = () => {
+    const d = /* @__PURE__ */ new Set(), w = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set();
+    for (const i of f) (i.type === "flowGroup" || i.type === "geometryGroup" || i.data.isGroup) && d.add(i.id);
+    if (d.size !== 0) {
+      for (const i of l.nodes) i.parentId && d.has(i.parentId) && w.add(i.id);
+      for (const i of l.lines) i.parentId && d.has(i.parentId) && o.add(i.id);
       t((i) => {
-        const n = i.canvases[m];
+        const n = i.canvases[p];
         return n ? {
           ...i,
           canvases: {
             ...i.canvases,
-            [m]: {
+            [p]: {
               ...n,
-              nodes: n.nodes.filter((h) => !c.has(h.id)).map((h) => f.has(h.id) ? {
+              nodes: n.nodes.filter((h) => !d.has(h.id)).map((h) => w.has(h.id) ? {
                 ...h,
                 parentId: void 0
               } : h),
@@ -128,174 +129,174 @@ function oe() {
           }
         } : i;
       }), r({
-        nodeIds: f,
+        nodeIds: w,
         edgeIds: /* @__PURE__ */ new Set(),
         lineIds: o
       });
     }
-  }, B = (c) => {
-    const f = p.nodeIds;
-    f.size !== 0 && t((o) => {
-      const i = o.canvases[m];
+  }, G = (d) => {
+    const w = c.nodeIds;
+    w.size !== 0 && t((o) => {
+      const i = o.canvases[p];
       if (!i) return o;
-      const n = i.nodes.map((g) => g.zIndex ?? 0), h = n.length > 0 ? Math.max(...n) : 0, C = n.length > 0 ? Math.min(...n) : 0, k = i.nodes.map((g) => {
-        if (!f.has(g.id)) return g;
-        const S = g.zIndex ?? 0;
-        let b = S;
-        return c === "front" ? b = h + 1 : c === "back" ? b = C - 1 : c === "up" ? b = S + 1 : c === "down" && (b = S - 1), {
-          ...g,
-          zIndex: b
+      const n = i.nodes.map((v) => v.zIndex ?? 0), h = n.length > 0 ? Math.max(...n) : 0, I = n.length > 0 ? Math.min(...n) : 0, E = i.nodes.map((v) => {
+        if (!w.has(v.id)) return v;
+        const T = v.zIndex ?? 0;
+        let N = T;
+        return d === "front" ? N = h + 1 : d === "back" ? N = I - 1 : d === "up" ? N = T + 1 : d === "down" && (N = T - 1), {
+          ...v,
+          zIndex: N
         };
       });
       return {
         ...o,
         canvases: {
           ...o.canvases,
-          [m]: {
+          [p]: {
             ...i,
-            nodes: k
+            nodes: E
           }
         }
       };
     });
-  }, M = (c) => {
-    const f = p.lineIds;
-    f.size !== 0 && t((o) => {
-      const i = o.canvases[m];
+  }, O = (d) => {
+    const w = c.lineIds;
+    w.size !== 0 && t((o) => {
+      const i = o.canvases[p];
       if (!i) return o;
-      const n = i.lines.map((g) => g.zIndex ?? 0), h = n.length > 0 ? Math.max(...n) : 0, C = n.length > 0 ? Math.min(...n) : 0, k = i.lines.map((g) => {
-        if (!f.has(g.id)) return g;
-        const S = g.zIndex ?? 0;
-        let b = S;
-        return c === "front" ? b = h + 1 : c === "back" ? b = C - 1 : c === "up" ? b = S + 1 : c === "down" && (b = S - 1), {
-          ...g,
-          zIndex: b
+      const n = i.lines.map((v) => v.zIndex ?? 0), h = n.length > 0 ? Math.max(...n) : 0, I = n.length > 0 ? Math.min(...n) : 0, E = i.lines.map((v) => {
+        if (!w.has(v.id)) return v;
+        const T = v.zIndex ?? 0;
+        let N = T;
+        return d === "front" ? N = h + 1 : d === "back" ? N = I - 1 : d === "up" ? N = T + 1 : d === "down" && (N = T - 1), {
+          ...v,
+          zIndex: N
         };
       });
       return {
         ...o,
         canvases: {
           ...o.canvases,
-          [m]: {
+          [p]: {
             ...i,
-            lines: k
+            lines: E
           }
         }
       };
     });
-  }, Z = (c, f, o) => {
-    P(c, { [f]: o });
-  }, P = (c, f) => {
+  }, y = (d, w, o) => {
+    W(d, { [w]: o });
+  }, W = (d, w) => {
     t((o) => {
-      const i = o.canvases[m];
+      const i = o.canvases[p];
       return i ? {
         ...o,
         canvases: {
           ...o.canvases,
-          [m]: {
+          [p]: {
             ...i,
-            nodes: i.nodes.map((n) => n.id === c ? {
+            nodes: i.nodes.map((n) => n.id === d ? {
               ...n,
               data: {
                 ...n.data,
-                ...f
+                ...w
               }
             } : n)
           }
         }
       } : o;
     });
-  }, X = (c, f, o) => {
+  }, j = (d, w, o) => {
     t((i) => {
-      const n = i.canvases[m];
+      const n = i.canvases[p];
       return n ? {
         ...i,
         canvases: {
           ...i.canvases,
-          [m]: {
+          [p]: {
             ...n,
-            nodes: n.nodes.map((h) => h.id === c ? {
+            nodes: n.nodes.map((h) => h.id === d ? {
               ...h,
-              [f]: o
+              [w]: o
             } : h)
           }
         }
       } : i;
     });
-  }, j = (c, f, o) => {
+  }, H = (d, w, o) => {
     t((i) => {
-      const n = i.canvases[m];
+      const n = i.canvases[p];
       return n ? {
         ...i,
         canvases: {
           ...i.canvases,
-          [m]: {
+          [p]: {
             ...n,
-            edges: n.edges.map((h) => h.id === c ? {
+            edges: n.edges.map((h) => h.id === d ? {
               ...h,
               data: {
                 ...h.data,
-                [f]: o
+                [w]: o
               }
             } : h)
           }
         }
       } : i;
     });
-  }, H = (c, f) => {
+  }, K = (d, w) => {
     t((o) => {
-      const i = o.canvases[m];
+      const i = o.canvases[p];
       return i ? {
         ...o,
         canvases: {
           ...o.canvases,
-          [m]: {
+          [p]: {
             ...i,
-            nodes: i.nodes.map((n) => n.id === c ? {
+            nodes: i.nodes.map((n) => n.id === d ? {
               ...n,
-              type: f
+              type: w
             } : n)
           }
         }
       } : o;
     });
-  }, K = (c, f) => {
+  }, V = (d, w) => {
     t((o) => {
-      const i = o.canvases[m];
+      const i = o.canvases[p];
       return i ? {
         ...o,
         canvases: {
           ...o.canvases,
-          [m]: {
+          [p]: {
             ...i,
-            edges: i.edges.map((n) => n.id === c ? {
+            edges: i.edges.map((n) => n.id === d ? {
               ...n,
-              type: f
+              type: w
             } : n)
           }
         }
       } : o;
     });
-  }, J = (c, f, o) => {
+  }, J = (d, w, o) => {
     t((i) => {
-      const n = i.canvases[m];
+      const n = i.canvases[p];
       return n ? {
         ...i,
         canvases: {
           ...i.canvases,
-          [m]: {
+          [p]: {
             ...n,
-            lines: n.lines.map((h) => h.id === c ? {
+            lines: n.lines.map((h) => h.id === d ? {
               ...h,
-              [f]: o
+              [w]: o
             } : h)
           }
         }
       } : i;
     });
   };
-  return /* @__PURE__ */ a(T, { children: [
-    !E && /* @__PURE__ */ e("div", {
+  return /* @__PURE__ */ a(L, { children: [
+    !S && /* @__PURE__ */ e("div", {
       style: {
         fontSize: 12,
         color: "color-mix(in oklch, var(--color-base-content) 40%, transparent)",
@@ -304,15 +305,15 @@ function oe() {
       },
       children: "Select an element to inspect"
     }),
-    u.length === 1 && /* @__PURE__ */ e(re, {
-      node: u[0],
-      isGroup: I,
-      onUpdateData: Z,
-      onUpdateDataBatch: P,
-      onUpdateDimension: X,
-      onUpdateType: H
+    f.length === 1 && /* @__PURE__ */ e(pe, {
+      node: f[0],
+      isGroup: z,
+      onUpdateData: y,
+      onUpdateDataBatch: W,
+      onUpdateDimension: j,
+      onUpdateType: K
     }),
-    F > 1 && /* @__PURE__ */ a("div", {
+    M > 1 && /* @__PURE__ */ a("div", {
       className: "flow-inspector-section",
       children: [
         /* @__PURE__ */ e("div", {
@@ -326,9 +327,9 @@ function oe() {
             marginBottom: 8
           },
           children: [
-            u.length > 0 && `${u.length} node${u.length > 1 ? "s" : ""}`,
-            u.length > 0 && v.length > 0 && ", ",
-            v.length > 0 && `${v.length} line${v.length > 1 ? "s" : ""}`,
+            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" : ""}`,
             " selected"
           ]
         }),
@@ -339,27 +340,27 @@ function oe() {
             gap: 4,
             width: "100%"
           },
-          children: [/* @__PURE__ */ e(N, {
+          children: [/* @__PURE__ */ e(g, {
             size: "xs",
-            onClick: () => O("flowGroup"),
+            onClick: () => P("flowGroup"),
             block: !0,
             children: "Group (⌘G)"
-          }), /* @__PURE__ */ e(N, {
+          }), /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => O("geometryGroup"),
+            onClick: () => P("geometryGroup"),
             block: !0,
             children: "Geo Group (⌘⌥G)"
           })]
         })
       ]
     }),
-    I && /* @__PURE__ */ a("div", {
+    z && /* @__PURE__ */ a("div", {
       className: "flow-inspector-section",
       children: [
         /* @__PURE__ */ e("div", {
           className: "flow-inspector-section-title",
-          children: u[0].type === "geometryGroup" ? "Geometry Group" : "Group"
+          children: f[0].type === "geometryGroup" ? "Geometry Group" : "Group"
         }),
         /* @__PURE__ */ e("div", {
           style: {
@@ -367,18 +368,18 @@ function oe() {
             color: "color-mix(in oklch, var(--color-base-content) 45%, transparent)",
             marginBottom: 6
           },
-          children: u[0].type === "geometryGroup" ? "Auto-binds spatially contained nodes" : "Explicit membership via add/remove"
+          children: f[0].type === "geometryGroup" ? "Auto-binds spatially contained nodes" : "Explicit membership via add/remove"
         }),
-        /* @__PURE__ */ e(N, {
+        /* @__PURE__ */ e(g, {
           size: "xs",
           variant: "ghost",
-          onClick: R,
+          onClick: _,
           block: !0,
           children: "Ungroup (⌘⇧G)"
         })
       ]
     }),
-    u.length > 0 && /* @__PURE__ */ a("div", {
+    f.length > 0 && /* @__PURE__ */ a("div", {
       className: "flow-inspector-section",
       children: [/* @__PURE__ */ e("div", {
         className: "flow-inspector-section-title",
@@ -389,37 +390,37 @@ function oe() {
           gap: 4
         },
         children: [
-          /* @__PURE__ */ e(N, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => B("front"),
+            onClick: () => G("front"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring to Front (⌘⇧↑)",
               children: "⤒"
             })
           }),
-          /* @__PURE__ */ e(N, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => B("up"),
+            onClick: () => G("up"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring Forward (⌘↑)",
               children: "↑"
             })
           }),
-          /* @__PURE__ */ e(N, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => B("down"),
+            onClick: () => G("down"),
             children: /* @__PURE__ */ e("span", {
               title: "Send Backward (⌘↓)",
               children: "↓"
             })
           }),
-          /* @__PURE__ */ e(N, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => B("back"),
+            onClick: () => G("back"),
             children: /* @__PURE__ */ e("span", {
               title: "Send to Back (⌘⇧↓)",
               children: "⤓"
@@ -428,13 +429,13 @@ function oe() {
         ]
       })]
     }),
-    s.length === 1 && /* @__PURE__ */ e(de, {
+    s.length === 1 && /* @__PURE__ */ e(ue, {
       edge: s[0],
-      onUpdateData: j,
-      onUpdateType: K
+      onUpdateData: H,
+      onUpdateType: V
     }),
-    v.length === 1 && /* @__PURE__ */ a(T, { children: [/* @__PURE__ */ e(pe, {
-      line: v[0],
+    u.length === 1 && /* @__PURE__ */ a(L, { children: [/* @__PURE__ */ e(we, {
+      line: u[0],
       onUpdateData: J
     }), /* @__PURE__ */ a("div", {
       className: "flow-inspector-section",
@@ -447,37 +448,37 @@ function oe() {
           gap: 4
         },
         children: [
-          /* @__PURE__ */ e(N, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => M("front"),
+            onClick: () => O("front"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring to Front",
               children: "⤒"
             })
           }),
-          /* @__PURE__ */ e(N, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => M("up"),
+            onClick: () => O("up"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring Forward",
               children: "↑"
             })
           }),
-          /* @__PURE__ */ e(N, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => M("down"),
+            onClick: () => O("down"),
             children: /* @__PURE__ */ e("span", {
               title: "Send Backward",
               children: "↓"
             })
           }),
-          /* @__PURE__ */ e(N, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => M("back"),
+            onClick: () => O("back"),
             children: /* @__PURE__ */ e("span", {
               title: "Send to Back",
               children: "⤓"
@@ -488,8 +489,51 @@ function oe() {
     })] })
   ] });
 }
-function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpdateDimension: m, onUpdateType: u }) {
-  return /* @__PURE__ */ a(T, { children: [
+function B({ value: l, onChange: c, kind: r, allowTransparent: t, customFallback: p = "#ffffff" }) {
+  const f = le[r], s = ae(f) ?? "var(--color-base-content)", u = l ?? "", S = u.toLowerCase(), z = se(u), M = u === "transparent", P = R.some((y) => y.value.toLowerCase() === S), _ = u === f, G = !!u && !z && !M && !P, O = G ? u : p;
+  return /* @__PURE__ */ a("div", {
+    className: "flow-color-field",
+    children: [
+      /* @__PURE__ */ e("button", {
+        type: "button",
+        title: "跟随主题切换",
+        "aria-label": "跟随主题切换",
+        className: `flow-color-swatch flow-color-swatch--sync${_ ? " is-active" : ""}`,
+        style: { background: s },
+        onClick: () => c(f)
+      }),
+      /* @__PURE__ */ e("span", { className: "flow-color-divider" }),
+      R.map((y) => /* @__PURE__ */ e("button", {
+        type: "button",
+        title: y.label,
+        "aria-label": y.label,
+        className: `flow-color-swatch${!z && !M && S === y.value.toLowerCase() ? " is-active" : ""}`,
+        style: { background: y.value },
+        onClick: () => c(y.value)
+      }, y.value)),
+      /* @__PURE__ */ e("span", { className: "flow-color-divider" }),
+      /* @__PURE__ */ e("label", {
+        className: `flow-color-swatch flow-color-swatch--custom${G ? " is-active" : ""}`,
+        title: "自定义颜色",
+        style: G ? { background: u } : void 0,
+        children: /* @__PURE__ */ e("input", {
+          type: "color",
+          value: O,
+          onChange: (y) => c(y.target.value)
+        })
+      }),
+      t && /* @__PURE__ */ e("button", {
+        type: "button",
+        title: "透明",
+        "aria-label": "透明",
+        className: `flow-color-swatch flow-color-swatch--transparent${M ? " is-active" : ""}`,
+        onClick: () => c("transparent")
+      })
+    ]
+  });
+}
+function pe({ node: l, isGroup: c, onUpdateData: r, onUpdateDataBatch: t, onUpdateDimension: p, onUpdateType: f }) {
+  return /* @__PURE__ */ a(L, { children: [
     /* @__PURE__ */ a("div", {
       className: "flow-inspector-section",
       children: [
@@ -499,11 +543,11 @@ function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpda
         }),
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(m, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Label"
-          }), /* @__PURE__ */ e(w, {
+          }), /* @__PURE__ */ e(b, {
             size: "xs",
             value: l.data.label,
             onChange: (s) => r(l.id, "label", s.target.value)
@@ -511,17 +555,17 @@ function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpda
         }),
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(m, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Type"
-          }), /* @__PURE__ */ e(y, {
-            options: ie.map((s) => ({
+          }), /* @__PURE__ */ e(k, {
+            options: ce.map((s) => ({
               value: s,
               label: s
             })),
             value: l.type,
-            onChange: (s) => u(l.id, s),
+            onChange: (s) => f(l.id, s),
             style: { fontSize: 12 }
           })]
         })
@@ -536,28 +580,28 @@ function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpda
         }),
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(m, {
             size: "xs",
             className: "flow-inspector-label",
             children: "W"
-          }), /* @__PURE__ */ e(w, {
+          }), /* @__PURE__ */ e(b, {
             size: "xs",
             type: "number",
             value: String(Math.round(l.width * 100) / 100),
-            onChange: (s) => m(l.id, "width", Number(s.target.value) || l.width)
+            onChange: (s) => p(l.id, "width", Number(s.target.value) || l.width)
           })]
         }),
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(m, {
             size: "xs",
             className: "flow-inspector-label",
             children: "H"
-          }), /* @__PURE__ */ e(w, {
+          }), /* @__PURE__ */ e(b, {
             size: "xs",
             type: "number",
             value: String(Math.round(l.height * 100) / 100),
-            onChange: (s) => m(l.id, "height", Number(s.target.value) || l.height)
+            onChange: (s) => p(l.id, "height", Number(s.target.value) || l.height)
           })]
         })
       ]
@@ -571,39 +615,39 @@ function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpda
         }),
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(m, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Fill"
-          }), /* @__PURE__ */ e(w, {
-            type: "color",
-            size: "xs",
-            value: l.data.fill === "transparent" ? "#ffffff" : l.data.fill,
-            onChange: (s) => r(l.id, "fill", s.target.value),
-            className: "flow-inspector-color flow-inspector-compact"
+          }), /* @__PURE__ */ e(B, {
+            value: l.data.fill,
+            kind: "fill",
+            allowTransparent: !0,
+            customFallback: "#ffffff",
+            onChange: (s) => r(l.id, "fill", s)
           })]
         }),
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(m, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Stroke"
-          }), /* @__PURE__ */ e(w, {
-            type: "color",
-            size: "xs",
-            value: l.data.stroke === "transparent" ? "#000000" : l.data.stroke,
-            onChange: (s) => r(l.id, "stroke", s.target.value),
-            className: "flow-inspector-color flow-inspector-compact"
+          }), /* @__PURE__ */ e(B, {
+            value: l.data.stroke,
+            kind: "stroke",
+            allowTransparent: !0,
+            customFallback: "#000000",
+            onChange: (s) => r(l.id, "stroke", s)
           })]
         }),
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(m, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Font"
-          }), /* @__PURE__ */ e(w, {
+          }), /* @__PURE__ */ e(b, {
             size: "xs",
             type: "number",
             value: String(l.data.fontSize),
@@ -612,71 +656,69 @@ function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpda
         }),
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(m, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Color"
-          }), /* @__PURE__ */ e(w, {
-            type: "color",
-            size: "xs",
+          }), /* @__PURE__ */ e(B, {
             value: l.data.color,
-            onChange: (s) => r(l.id, "color", s.target.value),
-            className: "flow-inspector-color flow-inspector-compact"
+            kind: "text",
+            customFallback: "#111827",
+            onChange: (s) => r(l.id, "color", s)
           })]
         }),
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(m, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Font Color"
-          }), /* @__PURE__ */ e(w, {
-            type: "color",
-            size: "xs",
+          }), /* @__PURE__ */ e(B, {
             value: l.data.labelColor ?? l.data.color,
-            onChange: (s) => r(l.id, "labelColor", s.target.value),
-            className: "flow-inspector-color flow-inspector-compact"
+            kind: "text",
+            customFallback: "#111827",
+            onChange: (s) => r(l.id, "labelColor", s)
           })]
         }),
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(m, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Border"
-          }), /* @__PURE__ */ e(y, {
+          }), /* @__PURE__ */ e(k, {
             options: [{
               value: "none",
               label: "none"
-            }, ...$.map((s) => ({
+            }, ...q.map((s) => ({
               value: s,
               label: s
             }))],
-            value: l.data.borderStyle ?? (p ? l.type === "geometryGroup" ? "dashed" : "dotted" : "solid"),
+            value: l.data.borderStyle ?? (c ? l.type === "geometryGroup" ? "dashed" : "dotted" : "solid"),
             onChange: (s) => r(l.id, "borderStyle", s),
             style: { fontSize: 12 }
           })]
         }),
-        l.type === "shapeSvg" && /* @__PURE__ */ a(T, { children: [
+        l.type === "shapeSvg" && /* @__PURE__ */ a(L, { children: [
           /* @__PURE__ */ a("div", {
             className: "flow-inspector-row",
-            children: [/* @__PURE__ */ e(d, {
+            children: [/* @__PURE__ */ e(m, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Icon"
-            }), /* @__PURE__ */ e(y, {
-              options: ee().map((s) => ({
+            }), /* @__PURE__ */ e(k, {
+              options: te().map((s) => ({
                 value: s.id,
                 label: s.label
               })),
               value: l.data.svgId ?? "",
               placeholder: "选择图标",
               onChange: (s) => {
-                const v = le(String(s));
+                const u = ne(String(s));
                 t(l.id, {
                   svgId: s,
-                  ...v?.brandColor ? { color: v.brandColor } : {},
-                  ...!l.data.label || l.data.label === "Text" ? { label: v?.label ?? String(s) } : {}
+                  ...u?.brandColor ? { color: u.brandColor } : {},
+                  ...!l.data.label || l.data.label === "Text" ? { label: u?.label ?? String(s) } : {}
                 });
               },
               style: { fontSize: 12 }
@@ -684,11 +726,11 @@ function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpda
           }),
           /* @__PURE__ */ a("div", {
             className: "flow-inspector-row",
-            children: [/* @__PURE__ */ e(d, {
+            children: [/* @__PURE__ */ e(m, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Box"
-            }), /* @__PURE__ */ e(_, {
+            }), /* @__PURE__ */ e(X, {
               size: "sm",
               checked: l.data.iconBox ?? !1,
               onChange: (s) => r(l.id, "iconBox", s),
@@ -697,11 +739,11 @@ function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpda
           }),
           /* @__PURE__ */ a("div", {
             className: "flow-inspector-row",
-            children: [/* @__PURE__ */ e(d, {
+            children: [/* @__PURE__ */ e(m, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Label"
-            }), /* @__PURE__ */ e(y, {
+            }), /* @__PURE__ */ e(k, {
               options: [
                 {
                   value: "top",
@@ -731,11 +773,11 @@ function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpda
           }),
           /* @__PURE__ */ a("div", {
             className: "flow-inspector-row",
-            children: [/* @__PURE__ */ e(d, {
+            children: [/* @__PURE__ */ e(m, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Offset X"
-            }), /* @__PURE__ */ e(w, {
+            }), /* @__PURE__ */ e(b, {
               size: "xs",
               type: "number",
               value: String(l.data.labelOffsetX ?? 0),
@@ -744,11 +786,11 @@ function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpda
           }),
           /* @__PURE__ */ a("div", {
             className: "flow-inspector-row",
-            children: [/* @__PURE__ */ e(d, {
+            children: [/* @__PURE__ */ e(m, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Offset Y"
-            }), /* @__PURE__ */ e(w, {
+            }), /* @__PURE__ */ e(b, {
               size: "xs",
               type: "number",
               value: String(l.data.labelOffsetY ?? 0),
@@ -758,7 +800,7 @@ function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpda
         ] })
       ]
     }),
-    l.type === "mediaNode" && /* @__PURE__ */ e(ce, {
+    l.type === "mediaNode" && /* @__PURE__ */ e(fe, {
       node: l,
       onUpdateData: r
     }),
@@ -772,12 +814,12 @@ function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpda
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
           children: [
-            /* @__PURE__ */ e(d, {
+            /* @__PURE__ */ e(m, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Rotate"
             }),
-            /* @__PURE__ */ e(w, {
+            /* @__PURE__ */ e(b, {
               size: "xs",
               type: "number",
               value: String(l.data.rotation ?? 0),
@@ -796,12 +838,12 @@ function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpda
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
           children: [
-            /* @__PURE__ */ e(d, {
+            /* @__PURE__ */ e(m, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Flip"
             }),
-            /* @__PURE__ */ e(N, {
+            /* @__PURE__ */ e(g, {
               size: "xs",
               variant: l.data.flipX ? "primary" : "ghost",
               onClick: () => r(l.id, "flipX", !l.data.flipX),
@@ -811,7 +853,7 @@ function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpda
                 children: "↔"
               })
             }),
-            /* @__PURE__ */ e(N, {
+            /* @__PURE__ */ e(g, {
               size: "xs",
               variant: l.data.flipY ? "primary" : "ghost",
               onClick: () => r(l.id, "flipY", !l.data.flipY),
@@ -826,18 +868,18 @@ function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpda
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
           children: [
-            /* @__PURE__ */ e(d, {
+            /* @__PURE__ */ e(m, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Quick"
             }),
-            /* @__PURE__ */ e(N, {
+            /* @__PURE__ */ e(g, {
               size: "xs",
               variant: "ghost",
               onClick: () => r(l.id, "rotation", ((l.data.rotation ?? 0) + 90) % 360),
               children: "+90°"
             }),
-            /* @__PURE__ */ e(N, {
+            /* @__PURE__ */ e(g, {
               size: "xs",
               variant: "ghost",
               onClick: () => r(l.id, "rotation", ((l.data.rotation ?? 0) - 90 + 360) % 360),
@@ -849,14 +891,14 @@ function re({ node: l, isGroup: p, onUpdateData: r, onUpdateDataBatch: t, onUpda
     })
   ] });
 }
-function ce({ node: l, onUpdateData: p }) {
-  const r = l.data.mediaKind ?? "markdown", t = l.data.aiConfig, m = ne(null), u = (s, v) => {
-    p(l.id, "aiConfig", {
+function fe({ node: l, onUpdateData: c }) {
+  const r = l.data.mediaKind ?? "markdown", t = l.data.aiConfig, p = me(null), f = (s, u) => {
+    c(l.id, "aiConfig", {
       gateway: "",
       protocol: "openai",
       model: "",
       ...t,
-      [s]: v
+      [s]: u
     });
   };
   return /* @__PURE__ */ a("div", {
@@ -864,17 +906,17 @@ function ce({ node: l, onUpdateData: p }) {
     children: [/* @__PURE__ */ a("div", {
       className: "flow-inspector-section-title",
       children: ["Media · ", r]
-    }), r === "data" ? /* @__PURE__ */ e(te, {
+    }), r === "data" ? /* @__PURE__ */ e(de, {
       node: l,
-      onUpdateData: p
-    }) : r === "model3d" ? /* @__PURE__ */ a(T, { children: [
+      onUpdateData: c
+    }) : r === "model3d" ? /* @__PURE__ */ a(L, { children: [
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "格式"
-        }), /* @__PURE__ */ e(y, {
+        }), /* @__PURE__ */ e(k, {
           options: [
             {
               value: "stl",
@@ -890,57 +932,57 @@ function ce({ node: l, onUpdateData: p }) {
             }
           ],
           value: l.data.modelFormat ?? "stl",
-          onChange: (s) => p(l.id, "modelFormat", s)
+          onChange: (s) => c(l.id, "modelFormat", s)
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row flow-inspector-multiline",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "模型链接"
-        }), /* @__PURE__ */ e(w, {
+        }), /* @__PURE__ */ e(b, {
           size: "xs",
           value: l.data.mediaContent ?? "",
           placeholder: "https://example.com/model.stl",
-          onChange: (s) => p(l.id, "mediaContent", s.target.value)
+          onChange: (s) => c(l.id, "mediaContent", s.target.value)
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
         children: [
-          /* @__PURE__ */ e(d, {
+          /* @__PURE__ */ e(m, {
             size: "xs",
             className: "flow-inspector-label",
             children: "本地模型"
           }),
           /* @__PURE__ */ e("input", {
-            ref: m,
+            ref: p,
             type: "file",
             accept: ".stl,.obj,.3mf,model/stl,model/obj,model/3mf,application/vnd.ms-package.3dmanufacturing-3dmodel+xml",
             hidden: !0,
             onChange: (s) => {
-              const v = s.target.files?.[0];
-              if (s.target.value = "", !v) return;
-              if (v.size > 10 * 1024 * 1024) {
+              const u = s.target.files?.[0];
+              if (s.target.value = "", !u) return;
+              if (u.size > 10 * 1024 * 1024) {
                 window.alert("本地模型不能超过 10 MiB，请改用模型链接。");
                 return;
               }
-              const E = v.name.split(".").pop()?.toLowerCase();
-              if (E !== "stl" && E !== "obj" && E !== "3mf") {
+              const S = u.name.split(".").pop()?.toLowerCase();
+              if (S !== "stl" && S !== "obj" && S !== "3mf") {
                 window.alert("仅支持 STL、OBJ 和 3MF 模型。");
                 return;
               }
-              const I = new FileReader();
-              I.onload = () => {
-                typeof I.result == "string" && (p(l.id, "modelFormat", E), p(l.id, "mediaContent", I.result));
-              }, I.onerror = () => window.alert("读取本地模型失败。"), I.readAsDataURL(v);
+              const z = new FileReader();
+              z.onload = () => {
+                typeof z.result == "string" && (c(l.id, "modelFormat", S), c(l.id, "mediaContent", z.result));
+              }, z.onerror = () => window.alert("读取本地模型失败。"), z.readAsDataURL(u);
             }
           }),
-          /* @__PURE__ */ e(N, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "neutral",
-            onClick: () => m.current?.click(),
+            onClick: () => p.current?.click(),
             children: "选择文件"
           }),
           l.data.mediaContent?.startsWith("data:") && /* @__PURE__ */ e("span", {
@@ -953,22 +995,22 @@ function ce({ node: l, onUpdateData: p }) {
         className: "flow-inspector-help",
         children: "支持 STL、OBJ、3MF；本地文件将以 Base64 嵌入文档，最大 10 MiB。选中节点后可在内部拖拽旋转、滚轮缩放。"
       })
-    ] }) : r === "image" ? /* @__PURE__ */ a(T, { children: [/* @__PURE__ */ a("div", {
+    ] }) : r === "image" ? /* @__PURE__ */ a(L, { children: [/* @__PURE__ */ a("div", {
       className: "flow-inspector-row flow-inspector-multiline",
-      children: [/* @__PURE__ */ e(d, {
+      children: [/* @__PURE__ */ e(m, {
         size: "xs",
         className: "flow-inspector-label",
         children: "图片链接"
-      }), /* @__PURE__ */ e(w, {
+      }), /* @__PURE__ */ e(b, {
         size: "xs",
         value: l.data.mediaContent ?? "",
         placeholder: "https://example.com/image.png",
-        onChange: (s) => p(l.id, "mediaContent", s.target.value)
+        onChange: (s) => c(l.id, "mediaContent", s.target.value)
       })]
     }), /* @__PURE__ */ e("div", {
       className: "flow-inspector-help",
       children: "支持 HTTP(S) 链接；选中图片节点后可直接粘贴图片并保存为 Base64。"
-    })] }) : r !== "ai" ? /* @__PURE__ */ e(W, {
+    })] }) : r !== "ai" ? /* @__PURE__ */ e(Z, {
       label: {
         markdown: "Markdown 源码",
         html: "HTML 源码",
@@ -976,16 +1018,16 @@ function ce({ node: l, onUpdateData: p }) {
         math: "LaTeX 公式"
       }[r] ?? "内容",
       value: l.data.mediaContent ?? "",
-      onChange: (s) => p(l.id, "mediaContent", s),
+      onChange: (s) => c(l.id, "mediaContent", s),
       rows: 8
-    }) : /* @__PURE__ */ a(T, { children: [
+    }) : /* @__PURE__ */ a(L, { children: [
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "协议"
-        }), /* @__PURE__ */ e(y, {
+        }), /* @__PURE__ */ e(k, {
           options: [{
             value: "openai",
             label: "OpenAI 兼容"
@@ -994,7 +1036,7 @@ function ce({ node: l, onUpdateData: p }) {
             label: "Anthropic 兼容"
           }],
           value: t?.protocol ?? "openai",
-          onChange: (s) => u("protocol", s),
+          onChange: (s) => f("protocol", s),
           style: { fontSize: 12 }
         })]
       }),
@@ -1005,15 +1047,15 @@ function ce({ node: l, onUpdateData: p }) {
           alignItems: "stretch",
           gap: 4
         },
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "接口地址"
-        }), /* @__PURE__ */ e(w, {
+        }), /* @__PURE__ */ e(b, {
           size: "xs",
           value: t?.gateway ?? "",
           placeholder: "https://api.openai.com/v1/chat/completions",
-          onChange: (s) => u("gateway", s.target.value)
+          onChange: (s) => f("gateway", s.target.value)
         })]
       }),
       /* @__PURE__ */ a("div", {
@@ -1023,15 +1065,15 @@ function ce({ node: l, onUpdateData: p }) {
           alignItems: "stretch",
           gap: 4
         },
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "模型"
-        }), /* @__PURE__ */ e(w, {
+        }), /* @__PURE__ */ e(b, {
           size: "xs",
           value: t?.model ?? "",
           placeholder: "gpt-4o-mini",
-          onChange: (s) => u("model", s.target.value)
+          onChange: (s) => f("model", s.target.value)
         })]
       }),
       /* @__PURE__ */ a("div", {
@@ -1041,22 +1083,22 @@ function ce({ node: l, onUpdateData: p }) {
           alignItems: "stretch",
           gap: 4
         },
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "API Key"
-        }), /* @__PURE__ */ e(w, {
+        }), /* @__PURE__ */ e(b, {
           size: "xs",
           type: "password",
           value: t?.apiKey ?? "",
           placeholder: "sk-...",
-          onChange: (s) => u("apiKey", s.target.value)
+          onChange: (s) => f("apiKey", s.target.value)
         })]
       }),
-      /* @__PURE__ */ e(W, {
+      /* @__PURE__ */ e(Z, {
         label: "System Prompt",
         value: t?.systemPrompt ?? "",
-        onChange: (s) => u("systemPrompt", s),
+        onChange: (s) => f("systemPrompt", s),
         rows: 3
       }),
       /* @__PURE__ */ e("div", {
@@ -1070,7 +1112,7 @@ function ce({ node: l, onUpdateData: p }) {
     ] })]
   });
 }
-function de({ edge: l, onUpdateData: p, onUpdateType: r }) {
+function ue({ edge: l, onUpdateData: c, onUpdateType: r }) {
   return /* @__PURE__ */ a("div", {
     className: "flow-inspector-section",
     children: [
@@ -1080,12 +1122,12 @@ function de({ edge: l, onUpdateData: p, onUpdateType: r }) {
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Type"
-        }), /* @__PURE__ */ e(y, {
-          options: Q.map((t) => ({
+        }), /* @__PURE__ */ e(k, {
+          options: D.map((t) => ({
             value: t,
             label: t
           })),
@@ -1096,109 +1138,108 @@ function de({ edge: l, onUpdateData: p, onUpdateType: r }) {
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Color"
-        }), /* @__PURE__ */ e(w, {
-          type: "color",
-          size: "xs",
-          value: l.data.strokeColor ?? "#374151",
-          onChange: (t) => p(l.id, "strokeColor", t.target.value),
-          className: "flow-inspector-color flow-inspector-compact"
+        }), /* @__PURE__ */ e(B, {
+          value: l.data.strokeColor,
+          kind: "line",
+          customFallback: "#374151",
+          onChange: (t) => c(l.id, "strokeColor", t)
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Width"
-        }), /* @__PURE__ */ e(w, {
+        }), /* @__PURE__ */ e(b, {
           size: "xs",
           type: "number",
           value: String(l.data.strokeWidth ?? 2),
-          onChange: (t) => p(l.id, "strokeWidth", Number(t.target.value) || 2)
+          onChange: (t) => c(l.id, "strokeWidth", Number(t.target.value) || 2)
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Animation"
-        }), /* @__PURE__ */ e(_, {
+        }), /* @__PURE__ */ e(X, {
           size: "sm",
           checked: l.data.animated ?? !1,
-          onChange: (t) => p(l.id, "animated", t),
+          onChange: (t) => c(l.id, "animated", t),
           label: "预览时播放"
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Line"
-        }), /* @__PURE__ */ e(y, {
-          options: Y.map((t) => ({
+        }), /* @__PURE__ */ e(k, {
+          options: $.map((t) => ({
             value: t,
             label: t
           })),
           value: l.data.lineStyle ?? "solid",
-          onChange: (t) => p(l.id, "lineStyle", t),
+          onChange: (t) => c(l.id, "lineStyle", t),
           style: { fontSize: 12 }
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Start"
-        }), /* @__PURE__ */ e(y, {
-          options: A.map((t) => ({
+        }), /* @__PURE__ */ e(k, {
+          options: Y.map((t) => ({
             value: t,
             label: t
           })),
           value: l.data.markerStart ?? "none",
-          onChange: (t) => p(l.id, "markerStart", t),
+          onChange: (t) => c(l.id, "markerStart", t),
           style: { fontSize: 12 }
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "End"
-        }), /* @__PURE__ */ e(y, {
-          options: A.map((t) => ({
+        }), /* @__PURE__ */ e(k, {
+          options: Y.map((t) => ({
             value: t,
             label: t
           })),
           value: l.data.markerEnd ?? "none",
-          onChange: (t) => p(l.id, "markerEnd", t),
+          onChange: (t) => c(l.id, "markerEnd", t),
           style: { fontSize: 12 }
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Label"
-        }), /* @__PURE__ */ e(w, {
+        }), /* @__PURE__ */ e(b, {
           size: "xs",
           value: l.data.labelText ?? "",
-          onChange: (t) => p(l.id, "labelText", t.target.value),
+          onChange: (t) => c(l.id, "labelText", t.target.value),
           placeholder: "Edge label"
         })]
       })
     ]
   });
 }
-function pe({ line: l, onUpdateData: p }) {
+function we({ line: l, onUpdateData: c }) {
   return /* @__PURE__ */ a("div", {
     className: "flow-inspector-section",
     children: [
@@ -1208,7 +1249,7 @@ function pe({ line: l, onUpdateData: p }) {
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Type"
@@ -1222,44 +1263,43 @@ function pe({ line: l, onUpdateData: p }) {
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Color"
-        }), /* @__PURE__ */ e(w, {
-          type: "color",
-          size: "xs",
+        }), /* @__PURE__ */ e(B, {
           value: l.strokeColor,
-          onChange: (r) => p(l.id, "strokeColor", r.target.value),
-          className: "flow-inspector-color flow-inspector-compact"
+          kind: "line",
+          customFallback: "#374151",
+          onChange: (r) => c(l.id, "strokeColor", r)
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Width"
-        }), /* @__PURE__ */ e(w, {
+        }), /* @__PURE__ */ e(b, {
           size: "xs",
           type: "number",
           value: String(l.strokeWidth),
-          onChange: (r) => p(l.id, "strokeWidth", Number(r.target.value) || 2)
+          onChange: (r) => c(l.id, "strokeWidth", Number(r.target.value) || 2)
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Style"
-        }), /* @__PURE__ */ e(y, {
-          options: Y.map((r) => ({
+        }), /* @__PURE__ */ e(k, {
+          options: $.map((r) => ({
             value: r,
             label: r
           })),
           value: l.lineStyle,
-          onChange: (r) => p(l.id, "lineStyle", r),
+          onChange: (r) => c(l.id, "lineStyle", r),
           style: { fontSize: 12 }
         })]
       })
@@ -1267,8 +1307,8 @@ function pe({ line: l, onUpdateData: p }) {
   });
 }
 export {
-  oe as InspectorPanelContent,
-  Ee as default
+  he as InspectorPanelContent,
+  Pe as default
 };
 
 //# sourceMappingURL=InspectorPanel.js.map