dishui 0.0.46 → 0.0.48

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

@@ -1,31 +1,34 @@
 import g from "../../../Button/index.js";
-import w from "../../../Input/index.js";
-import c from "../../../Label/index.js";
-import _ from "../../../Checkbox/index.js";
-import y from "../../../Select/index.js";
-import { BORDER_STYLE_OPTIONS as J, 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 { useMemo as L, useRef as te, useState as ne } from "react";
-import { Fragment as G, jsx as e, jsxs as a } from "react/jsx-runtime";
-function Ge() {
-  const { showInspector: l } = D(), { panelStyle: h, handleProps: r } = se(), { panelWidth: t, resizeHandleProps: m } = ae("left", 240);
+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: {
-      ...h,
+      ...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",
@@ -34,7 +37,7 @@ function Ge() {
           fontSize: 11,
           fontWeight: 600,
           marginBottom: 8,
-          color: "oklch(var(--bc) / 0.5)",
+          color: "color-mix(in oklch, var(--color-base-content) 50%, transparent)",
           textTransform: "uppercase",
           letterSpacing: "0.05em",
           cursor: "grab"
@@ -43,274 +46,274 @@ function Ge() {
       }),
       /* @__PURE__ */ e("div", {
         className: "flow-inspector-content",
-        children: /* @__PURE__ */ e(oe, {})
+        children: /* @__PURE__ */ e(he, {})
       })
     ]
   }) : null;
 }
-function oe() {
-  const { currentCanvas: l, selection: h, setSelection: r, setDoc: t, currentCanvasId: m } = V(), f = L(() => l.nodes.filter((d) => h.nodeIds.has(d.id)), [l.nodes, h.nodeIds]), s = L(() => l.edges.filter((d) => h.edgeIds.has(d.id)), [l.edges, h.edgeIds]), v = L(() => l.lines.filter((d) => h.lineIds.has(d.id)), [l.lines, h.lineIds]), E = f.length > 0 || s.length > 0 || v.length > 0, I = f.length === 1 && (f[0].type === "flowGroup" || f[0].type === "geometryGroup" || f[0].data.isGroup), F = f.length + v.length, O = (d = "flowGroup") => {
-    if (F < 2) return;
-    const u = 20;
-    let o = 1 / 0, i = 1 / 0, n = -1 / 0, p = -1 / 0;
+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 f)
-      o = Math.min(o, x.position.x), i = Math.min(i, x.position.y), n = Math.max(n, x.position.x + x.width), p = Math.max(p, 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), p = Math.max(p, z.y);
-    const C = d === "geometryGroup", k = U("group"), N = {
-      id: k,
+      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 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 - u,
-        y: i - u
+        x: o - w,
+        y: i - w
       },
-      width: n - o + u * 2,
-      height: p - i + u * 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 = h.nodeIds, b = h.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 ? [N, ...z.nodes] : [N, ...z.nodes.map((T) => S.has(T.id) ? {
-              ...T,
-              parentId: k
-            } : T)],
-            lines: C ? z.lines : z.lines.map((T) => b.has(T.id) ? {
-              ...T,
-              parentId: k
-            } : T)
+          [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 d = /* @__PURE__ */ new Set(), u = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set();
+  }, _ = () => {
+    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) && u.add(i.id);
+      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((p) => !d.has(p.id)).map((p) => u.has(p.id) ? {
-                ...p,
+              nodes: n.nodes.filter((h) => !d.has(h.id)).map((h) => w.has(h.id) ? {
+                ...h,
                 parentId: void 0
-              } : p),
-              lines: n.lines.map((p) => o.has(p.id) ? {
-                ...p,
+              } : h),
+              lines: n.lines.map((h) => o.has(h.id) ? {
+                ...h,
                 parentId: void 0
-              } : p)
+              } : h)
             }
           }
         } : i;
       }), r({
-        nodeIds: u,
+        nodeIds: w,
         edgeIds: /* @__PURE__ */ new Set(),
         lineIds: o
       });
     }
-  }, B = (d) => {
-    const u = h.nodeIds;
-    u.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((N) => N.zIndex ?? 0), p = n.length > 0 ? Math.max(...n) : 0, C = n.length > 0 ? Math.min(...n) : 0, k = i.nodes.map((N) => {
-        if (!u.has(N.id)) return N;
-        const S = N.zIndex ?? 0;
-        let b = S;
-        return d === "front" ? b = p + 1 : d === "back" ? b = C - 1 : d === "up" ? b = S + 1 : d === "down" && (b = S - 1), {
-          ...N,
-          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 = (d) => {
-    const u = h.lineIds;
-    u.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((N) => N.zIndex ?? 0), p = n.length > 0 ? Math.max(...n) : 0, C = n.length > 0 ? Math.min(...n) : 0, k = i.lines.map((N) => {
-        if (!u.has(N.id)) return N;
-        const S = N.zIndex ?? 0;
-        let b = S;
-        return d === "front" ? b = p + 1 : d === "back" ? b = C - 1 : d === "up" ? b = S + 1 : d === "down" && (b = S - 1), {
-          ...N,
-          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 = (d, u, o) => {
-    P(d, { [u]: o });
-  }, P = (d, u) => {
+  }, 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 === d ? {
               ...n,
               data: {
                 ...n.data,
-                ...u
+                ...w
               }
             } : n)
           }
         }
       } : o;
     });
-  }, X = (d, u, 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((p) => p.id === d ? {
-              ...p,
-              [u]: o
-            } : p)
+            nodes: n.nodes.map((h) => h.id === d ? {
+              ...h,
+              [w]: o
+            } : h)
           }
         }
       } : i;
     });
-  }, j = (d, u, 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((p) => p.id === d ? {
-              ...p,
+            edges: n.edges.map((h) => h.id === d ? {
+              ...h,
               data: {
-                ...p.data,
-                [u]: o
+                ...h.data,
+                [w]: o
               }
-            } : p)
+            } : h)
           }
         }
       } : i;
     });
-  }, H = (d, u) => {
+  }, 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 === d ? {
               ...n,
-              type: u
+              type: w
             } : n)
           }
         }
       } : o;
     });
-  }, K = (d, u) => {
+  }, 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 === d ? {
               ...n,
-              type: u
+              type: w
             } : n)
           }
         }
       } : o;
     });
-  }, $ = (d, u, 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((p) => p.id === d ? {
-              ...p,
-              [u]: o
-            } : p)
+            lines: n.lines.map((h) => h.id === d ? {
+              ...h,
+              [w]: o
+            } : h)
           }
         }
       } : i;
     });
   };
-  return /* @__PURE__ */ a(G, { children: [
-    !E && /* @__PURE__ */ e("div", {
+  return /* @__PURE__ */ a(L, { children: [
+    !S && /* @__PURE__ */ e("div", {
       style: {
         fontSize: 12,
-        color: "oklch(var(--bc) / 0.4)",
+        color: "color-mix(in oklch, var(--color-base-content) 40%, transparent)",
         textAlign: "center",
         padding: "20px 0"
       },
       children: "Select an element to inspect"
     }),
-    f.length === 1 && /* @__PURE__ */ e(re, {
+    f.length === 1 && /* @__PURE__ */ e(pe, {
       node: f[0],
-      isGroup: I,
-      onUpdateData: Z,
-      onUpdateDataBatch: P,
-      onUpdateDimension: X,
-      onUpdateType: H
+      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", {
@@ -320,13 +323,13 @@ function oe() {
         /* @__PURE__ */ a("div", {
           style: {
             fontSize: 12,
-            color: "oklch(var(--bc) / 0.5)",
+            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 && v.length > 0 && ", ",
-            v.length > 0 && `${v.length} line${v.length > 1 ? "s" : ""}`,
+            f.length > 0 && u.length > 0 && ", ",
+            u.length > 0 && `${u.length} line${u.length > 1 ? "s" : ""}`,
             " selected"
           ]
         }),
@@ -339,20 +342,20 @@ function oe() {
           },
           children: [/* @__PURE__ */ e(g, {
             size: "xs",
-            onClick: () => O("flowGroup"),
+            onClick: () => P("flowGroup"),
             block: !0,
             children: "Group (⌘G)"
           }), /* @__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", {
@@ -362,7 +365,7 @@ function oe() {
         /* @__PURE__ */ e("div", {
           style: {
             fontSize: 11,
-            color: "oklch(var(--bc) / 0.45)",
+            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"
@@ -370,7 +373,7 @@ function oe() {
         /* @__PURE__ */ e(g, {
           size: "xs",
           variant: "ghost",
-          onClick: R,
+          onClick: _,
           block: !0,
           children: "Ungroup (⌘⇧G)"
         })
@@ -390,7 +393,7 @@ function oe() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => B("front"),
+            onClick: () => G("front"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring to Front (⌘⇧↑)",
               children: "⤒"
@@ -399,7 +402,7 @@ function oe() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => B("up"),
+            onClick: () => G("up"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring Forward (⌘↑)",
               children: "↑"
@@ -408,7 +411,7 @@ function oe() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => B("down"),
+            onClick: () => G("down"),
             children: /* @__PURE__ */ e("span", {
               title: "Send Backward (⌘↓)",
               children: "↓"
@@ -417,7 +420,7 @@ function oe() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => B("back"),
+            onClick: () => G("back"),
             children: /* @__PURE__ */ e("span", {
               title: "Send to Back (⌘⇧↓)",
               children: "⤓"
@@ -426,14 +429,14 @@ 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(G, { children: [/* @__PURE__ */ e(he, {
-      line: v[0],
-      onUpdateData: $
+    u.length === 1 && /* @__PURE__ */ a(L, { children: [/* @__PURE__ */ e(we, {
+      line: u[0],
+      onUpdateData: J
     }), /* @__PURE__ */ a("div", {
       className: "flow-inspector-section",
       children: [/* @__PURE__ */ e("div", {
@@ -448,7 +451,7 @@ function oe() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => M("front"),
+            onClick: () => O("front"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring to Front",
               children: "⤒"
@@ -457,7 +460,7 @@ function oe() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => M("up"),
+            onClick: () => O("up"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring Forward",
               children: "↑"
@@ -466,7 +469,7 @@ function oe() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => M("down"),
+            onClick: () => O("down"),
             children: /* @__PURE__ */ e("span", {
               title: "Send Backward",
               children: "↓"
@@ -475,7 +478,7 @@ function oe() {
           /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => M("back"),
+            onClick: () => O("back"),
             children: /* @__PURE__ */ e("span", {
               title: "Send to Back",
               children: "⤓"
@@ -486,8 +489,51 @@ function oe() {
     })] })
   ] });
 }
-function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpdateDimension: m, onUpdateType: f }) {
-  return /* @__PURE__ */ a(G, { 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: [
@@ -497,11 +543,11 @@ function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpda
         }),
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(c, {
+          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)
@@ -509,12 +555,12 @@ function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpda
         }),
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(c, {
+          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
             })),
@@ -534,28 +580,28 @@ function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpda
         }),
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(c, {
+          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(c, {
+          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)
           })]
         })
       ]
@@ -569,39 +615,39 @@ function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpda
         }),
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(c, {
+          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(c, {
+          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(c, {
+          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),
@@ -610,71 +656,69 @@ function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpda
         }),
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(c, {
+          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(c, {
+          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(c, {
+          children: [/* @__PURE__ */ e(m, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Border"
-          }), /* @__PURE__ */ e(y, {
+          }), /* @__PURE__ */ e(k, {
             options: [{
               value: "none",
               label: "none"
-            }, ...J.map((s) => ({
+            }, ...q.map((s) => ({
               value: s,
               label: s
             }))],
-            value: l.data.borderStyle ?? (h ? 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(G, { children: [
+        l.type === "shapeSvg" && /* @__PURE__ */ a(L, { children: [
           /* @__PURE__ */ a("div", {
             className: "flow-inspector-row",
-            children: [/* @__PURE__ */ e(c, {
+            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 }
@@ -682,11 +726,11 @@ function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpda
           }),
           /* @__PURE__ */ a("div", {
             className: "flow-inspector-row",
-            children: [/* @__PURE__ */ e(c, {
+            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),
@@ -695,11 +739,11 @@ function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpda
           }),
           /* @__PURE__ */ a("div", {
             className: "flow-inspector-row",
-            children: [/* @__PURE__ */ e(c, {
+            children: [/* @__PURE__ */ e(m, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Label"
-            }), /* @__PURE__ */ e(y, {
+            }), /* @__PURE__ */ e(k, {
               options: [
                 {
                   value: "top",
@@ -729,11 +773,11 @@ function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpda
           }),
           /* @__PURE__ */ a("div", {
             className: "flow-inspector-row",
-            children: [/* @__PURE__ */ e(c, {
+            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),
@@ -742,11 +786,11 @@ function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpda
           }),
           /* @__PURE__ */ a("div", {
             className: "flow-inspector-row",
-            children: [/* @__PURE__ */ e(c, {
+            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),
@@ -756,7 +800,7 @@ function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpda
         ] })
       ]
     }),
-    l.type === "mediaNode" && /* @__PURE__ */ e(ce, {
+    l.type === "mediaNode" && /* @__PURE__ */ e(fe, {
       node: l,
       onUpdateData: r
     }),
@@ -770,12 +814,12 @@ function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpda
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
           children: [
-            /* @__PURE__ */ e(c, {
+            /* @__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),
@@ -794,7 +838,7 @@ function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpda
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
           children: [
-            /* @__PURE__ */ e(c, {
+            /* @__PURE__ */ e(m, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Flip"
@@ -824,7 +868,7 @@ function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpda
         /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
           children: [
-            /* @__PURE__ */ e(c, {
+            /* @__PURE__ */ e(m, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Quick"
@@ -847,64 +891,14 @@ function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpda
     })
   ] });
 }
-function W({ label: l, value: h, onChange: r, rows: t }) {
-  const [m, f] = ne(!1);
-  return /* @__PURE__ */ a(G, { children: [/* @__PURE__ */ a("div", {
-    className: "flow-inspector-row flow-inspector-multiline",
-    children: [/* @__PURE__ */ a("div", {
-      className: "flow-inspector-field-heading",
-      children: [/* @__PURE__ */ e(c, {
-        size: "xs",
-        className: "flow-inspector-label",
-        children: l
-      }), /* @__PURE__ */ e(g, {
-        size: "xs",
-        variant: "ghost",
-        square: !0,
-        onClick: () => f(!0),
-        children: /* @__PURE__ */ e("span", {
-          "aria-label": "全屏编辑",
-          title: "全屏编辑",
-          children: "↗"
-        })
-      })]
-    }), /* @__PURE__ */ e("textarea", {
-      className: "flow-inspector-textarea",
-      value: h,
-      onChange: (s) => r(s.target.value),
-      rows: t,
-      spellCheck: !1
-    })]
-  }), m && /* @__PURE__ */ a("div", {
-    className: "flow-editor-fullscreen",
-    role: "dialog",
-    "aria-modal": "true",
-    "aria-label": `${l} 全屏编辑`,
-    children: [/* @__PURE__ */ a("div", {
-      className: "flow-editor-fullscreen-header",
-      children: [/* @__PURE__ */ e("strong", { children: l }), /* @__PURE__ */ e(g, {
-        size: "sm",
-        variant: "ghost",
-        onClick: () => f(!1),
-        children: "退出全屏"
-      })]
-    }), /* @__PURE__ */ e("textarea", {
-      className: "flow-inspector-textarea flow-editor-fullscreen-input",
-      value: h,
-      onChange: (s) => r(s.target.value),
-      spellCheck: !1,
-      autoFocus: !0
-    })]
-  })] });
-}
-function ce({ node: l, onUpdateData: h }) {
-  const r = l.data.mediaKind ?? "markdown", t = l.data.aiConfig, m = te(null), f = (s, v) => {
-    h(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", {
@@ -912,14 +906,17 @@ function ce({ node: l, onUpdateData: h }) {
     children: [/* @__PURE__ */ a("div", {
       className: "flow-inspector-section-title",
       children: ["Media · ", r]
-    }), r === "model3d" ? /* @__PURE__ */ a(G, { children: [
+    }), r === "data" ? /* @__PURE__ */ e(de, {
+      node: l,
+      onUpdateData: c
+    }) : r === "model3d" ? /* @__PURE__ */ a(L, { children: [
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(c, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "格式"
-        }), /* @__PURE__ */ e(y, {
+        }), /* @__PURE__ */ e(k, {
           options: [
             {
               value: "stl",
@@ -935,57 +932,57 @@ function ce({ node: l, onUpdateData: h }) {
             }
           ],
           value: l.data.modelFormat ?? "stl",
-          onChange: (s) => h(l.id, "modelFormat", s)
+          onChange: (s) => c(l.id, "modelFormat", s)
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row flow-inspector-multiline",
-        children: [/* @__PURE__ */ e(c, {
+        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) => h(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(c, {
+          /* @__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" && (h(l.id, "modelFormat", E), h(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(g, {
             size: "xs",
             variant: "neutral",
-            onClick: () => m.current?.click(),
+            onClick: () => p.current?.click(),
             children: "选择文件"
           }),
           l.data.mediaContent?.startsWith("data:") && /* @__PURE__ */ e("span", {
@@ -998,22 +995,22 @@ function ce({ node: l, onUpdateData: h }) {
         className: "flow-inspector-help",
         children: "支持 STL、OBJ、3MF；本地文件将以 Base64 嵌入文档，最大 10 MiB。选中节点后可在内部拖拽旋转、滚轮缩放。"
       })
-    ] }) : r === "image" ? /* @__PURE__ */ a(G, { children: [/* @__PURE__ */ a("div", {
+    ] }) : r === "image" ? /* @__PURE__ */ a(L, { children: [/* @__PURE__ */ a("div", {
       className: "flow-inspector-row flow-inspector-multiline",
-      children: [/* @__PURE__ */ e(c, {
+      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) => h(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 源码",
@@ -1021,16 +1018,16 @@ function ce({ node: l, onUpdateData: h }) {
         math: "LaTeX 公式"
       }[r] ?? "内容",
       value: l.data.mediaContent ?? "",
-      onChange: (s) => h(l.id, "mediaContent", s),
+      onChange: (s) => c(l.id, "mediaContent", s),
       rows: 8
-    }) : /* @__PURE__ */ a(G, { children: [
+    }) : /* @__PURE__ */ a(L, { children: [
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(c, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "协议"
-        }), /* @__PURE__ */ e(y, {
+        }), /* @__PURE__ */ e(k, {
           options: [{
             value: "openai",
             label: "OpenAI 兼容"
@@ -1050,11 +1047,11 @@ function ce({ node: l, onUpdateData: h }) {
           alignItems: "stretch",
           gap: 4
         },
-        children: [/* @__PURE__ */ e(c, {
+        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",
@@ -1068,11 +1065,11 @@ function ce({ node: l, onUpdateData: h }) {
           alignItems: "stretch",
           gap: 4
         },
-        children: [/* @__PURE__ */ e(c, {
+        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",
@@ -1086,11 +1083,11 @@ function ce({ node: l, onUpdateData: h }) {
           alignItems: "stretch",
           gap: 4
         },
-        children: [/* @__PURE__ */ e(c, {
+        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 ?? "",
@@ -1098,7 +1095,7 @@ function ce({ node: l, onUpdateData: h }) {
           onChange: (s) => f("apiKey", s.target.value)
         })]
       }),
-      /* @__PURE__ */ e(W, {
+      /* @__PURE__ */ e(Z, {
         label: "System Prompt",
         value: t?.systemPrompt ?? "",
         onChange: (s) => f("systemPrompt", s),
@@ -1107,7 +1104,7 @@ function ce({ node: l, onUpdateData: h }) {
       /* @__PURE__ */ e("div", {
         style: {
           fontSize: 10,
-          color: "oklch(var(--bc) / 0.45)",
+          color: "color-mix(in oklch, var(--color-base-content) 45%, transparent)",
           marginTop: 4
         },
         children: "密钥会随文档 JSON 一同导出，请谨慎分享。"
@@ -1115,7 +1112,7 @@ function ce({ node: l, onUpdateData: h }) {
     ] })]
   });
 }
-function de({ edge: l, onUpdateData: h, onUpdateType: r }) {
+function ue({ edge: l, onUpdateData: c, onUpdateType: r }) {
   return /* @__PURE__ */ a("div", {
     className: "flow-inspector-section",
     children: [
@@ -1125,12 +1122,12 @@ function de({ edge: l, onUpdateData: h, onUpdateType: r }) {
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(c, {
+        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
           })),
@@ -1141,109 +1138,108 @@ function de({ edge: l, onUpdateData: h, onUpdateType: r }) {
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(c, {
+        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) => h(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(c, {
+        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) => h(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(c, {
+        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) => h(l.id, "animated", t),
+          onChange: (t) => c(l.id, "animated", t),
           label: "预览时播放"
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(c, {
+        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) => h(l.id, "lineStyle", t),
+          onChange: (t) => c(l.id, "lineStyle", t),
           style: { fontSize: 12 }
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(c, {
+        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) => h(l.id, "markerStart", t),
+          onChange: (t) => c(l.id, "markerStart", t),
           style: { fontSize: 12 }
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(c, {
+        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) => h(l.id, "markerEnd", t),
+          onChange: (t) => c(l.id, "markerEnd", t),
           style: { fontSize: 12 }
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(c, {
+        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) => h(l.id, "labelText", t.target.value),
+          onChange: (t) => c(l.id, "labelText", t.target.value),
           placeholder: "Edge label"
         })]
       })
     ]
   });
 }
-function he({ line: l, onUpdateData: h }) {
+function we({ line: l, onUpdateData: c }) {
   return /* @__PURE__ */ a("div", {
     className: "flow-inspector-section",
     children: [
@@ -1253,58 +1249,57 @@ function he({ line: l, onUpdateData: h }) {
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(c, {
+        children: [/* @__PURE__ */ e(m, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Type"
         }), /* @__PURE__ */ e("span", {
           style: {
             fontSize: 12,
-            color: "oklch(var(--bc) / 0.6)"
+            color: "color-mix(in oklch, var(--color-base-content) 60%, transparent)"
           },
           children: l.type
         })]
       }),
       /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(c, {
+        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) => h(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(c, {
+        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) => h(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(c, {
+        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) => h(l.id, "lineStyle", r),
+          onChange: (r) => c(l.id, "lineStyle", r),
           style: { fontSize: 12 }
         })]
       })
@@ -1312,8 +1307,8 @@ function he({ line: l, onUpdateData: h }) {
   });
 }
 export {
-  oe as InspectorPanelContent,
-  Ge as default
+  he as InspectorPanelContent,
+  Pe as default
 };
 
 //# sourceMappingURL=InspectorPanel.js.map