dishui 0.0.45 → 0.0.46

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

@@ -1,26 +1,26 @@
-import v from "../../../Button/index.js";
-import y from "../../../Input/index.js";
-import d from "../../../Label/index.js";
-import A from "../../../Checkbox/index.js";
-import z from "../../../Select/index.js";
-import { BORDER_STYLE_OPTIONS as D, DEFAULT_NODE_DATA as j, EDGE_LINE_STYLE_OPTIONS as R, EDGE_MARKER_OPTIONS as O, EDGE_TYPE_OPTIONS as q } from "../constants.js";
-import { useFlowContext as J } from "../context/FlowContext.js";
-import { useFlowUI as Q } from "../context/FlowUIContext.js";
-import { generateId as V } from "../nodes/nodeUtils.js";
-import { getAllSvgIcons as U, getSvgIcon as ee } from "../nodes/svgIcons.js";
+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 le } from "../hooks/useResizablePanel.js";
+import { useResizablePanel as ae } from "../hooks/useResizablePanel.js";
 import { FLOW_NODE_TYPES as ie } from "../types.js";
-import { useMemo as M } from "react";
-import { Fragment as G, jsx as e, jsxs as i } from "react/jsx-runtime";
-function Se() {
-  const { showInspector: s } = Q(), { panelStyle: f, handleProps: c } = se(), { panelWidth: a, resizeHandleProps: m } = le("left", 240);
-  return s ? /* @__PURE__ */ i("div", {
+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);
+  return l ? /* @__PURE__ */ a("div", {
     className: "flow-inspector",
     "data-flow-panel": !0,
     style: {
-      ...f,
-      width: a
+      ...h,
+      width: t
     },
     children: [
       /* @__PURE__ */ e("div", {
@@ -29,7 +29,7 @@ function Se() {
       }),
       /* @__PURE__ */ e("div", {
         className: "flow-panel-drag-handle",
-        ...c,
+        ...r,
         style: {
           fontSize: 11,
           fontWeight: 600,
@@ -43,78 +43,78 @@ function Se() {
       }),
       /* @__PURE__ */ e("div", {
         className: "flow-inspector-content",
-        children: /* @__PURE__ */ e(ae, {})
+        children: /* @__PURE__ */ e(oe, {})
       })
     ]
   }) : null;
 }
-function ae() {
-  const { currentCanvas: s, selection: f, setSelection: c, setDoc: a, currentCanvasId: m } = J(), h = M(() => s.nodes.filter((r) => f.nodeIds.has(r.id)), [s.nodes, f.nodeIds]), t = M(() => s.edges.filter((r) => f.edgeIds.has(r.id)), [s.edges, f.edgeIds]), g = M(() => s.lines.filter((r) => f.lineIds.has(r.id)), [s.lines, f.lineIds]), _ = h.length > 0 || t.length > 0 || g.length > 0, L = h.length === 1 && (h[0].type === "flowGroup" || h[0].type === "geometryGroup" || h[0].data.isGroup), B = h.length + g.length, P = (r = "flowGroup") => {
-    if (B < 2) return;
+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, l = 1 / 0, n = -1 / 0, p = -1 / 0;
-    for (const b of h)
-      o = Math.min(o, b.position.x), l = Math.min(l, b.position.y), n = Math.max(n, b.position.x + b.width), p = Math.max(p, b.position.y + b.height);
-    for (const b of g) for (const x of b.points)
-      o = Math.min(o, x.x), l = Math.min(l, x.y), n = Math.max(n, x.x), p = Math.max(p, x.y);
-    const I = r === "geometryGroup", C = V("group"), w = {
-      id: C,
-      type: r,
+    let o = 1 / 0, i = 1 / 0, n = -1 / 0, p = -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,
+      type: d,
       position: {
         x: o - u,
-        y: l - u
+        y: i - u
       },
       width: n - o + u * 2,
-      height: p - l + u * 2,
+      height: p - i + u * 2,
       data: {
-        ...j,
-        label: I ? "Geo Group" : "Group",
-        fill: I ? "#fefce8" : "#f0f9ff",
+        ...q,
+        label: C ? "Geo Group" : "Group",
+        fill: C ? "#fefce8" : "#f0f9ff",
         stroke: "#9ca3af",
         strokeWidth: 1.5,
-        borderStyle: I ? "dashed" : "dotted",
+        borderStyle: C ? "dashed" : "dotted",
         isGroup: !0
       }
-    }, S = f.nodeIds, N = f.lineIds;
-    a((b) => {
-      const x = b.canvases[m];
-      return x ? {
-        ...b,
+    }, S = h.nodeIds, b = h.lineIds;
+    t((x) => {
+      const z = x.canvases[m];
+      return z ? {
+        ...x,
         canvases: {
-          ...b.canvases,
+          ...x.canvases,
           [m]: {
-            ...x,
-            nodes: I ? [w, ...x.nodes] : [w, ...x.nodes.map((k) => S.has(k.id) ? {
-              ...k,
-              parentId: C
-            } : k)],
-            lines: I ? x.lines : x.lines.map((k) => N.has(k.id) ? {
-              ...k,
-              parentId: C
-            } : k)
+            ...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)
           }
         }
-      } : b;
-    }), c({
-      nodeIds: /* @__PURE__ */ new Set([C]),
+      } : x;
+    }), r({
+      nodeIds: /* @__PURE__ */ new Set([k]),
       edgeIds: /* @__PURE__ */ new Set(),
       lineIds: /* @__PURE__ */ new Set()
     });
-  }, W = () => {
-    const r = /* @__PURE__ */ new Set(), u = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set();
-    for (const l of h) (l.type === "flowGroup" || l.type === "geometryGroup" || l.data.isGroup) && r.add(l.id);
-    if (r.size !== 0) {
-      for (const l of s.nodes) l.parentId && r.has(l.parentId) && u.add(l.id);
-      for (const l of s.lines) l.parentId && r.has(l.parentId) && o.add(l.id);
-      a((l) => {
-        const n = l.canvases[m];
+  }, R = () => {
+    const d = /* @__PURE__ */ new Set(), u = /* @__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.lines) i.parentId && d.has(i.parentId) && o.add(i.id);
+      t((i) => {
+        const n = i.canvases[m];
         return n ? {
-          ...l,
+          ...i,
           canvases: {
-            ...l.canvases,
+            ...i.canvases,
             [m]: {
               ...n,
-              nodes: n.nodes.filter((p) => !r.has(p.id)).map((p) => u.has(p.id) ? {
+              nodes: n.nodes.filter((p) => !d.has(p.id)).map((p) => u.has(p.id) ? {
                 ...p,
                 parentId: void 0
               } : p),
@@ -124,25 +124,25 @@ function ae() {
               } : p)
             }
           }
-        } : l;
-      }), c({
+        } : i;
+      }), r({
         nodeIds: u,
         edgeIds: /* @__PURE__ */ new Set(),
         lineIds: o
       });
     }
-  }, E = (r) => {
-    const u = f.nodeIds;
-    u.size !== 0 && a((o) => {
-      const l = o.canvases[m];
-      if (!l) return o;
-      const n = l.nodes.map((w) => w.zIndex ?? 0), p = n.length > 0 ? Math.max(...n) : 0, I = n.length > 0 ? Math.min(...n) : 0, C = l.nodes.map((w) => {
-        if (!u.has(w.id)) return w;
-        const S = w.zIndex ?? 0;
-        let N = S;
-        return r === "front" ? N = p + 1 : r === "back" ? N = I - 1 : r === "up" ? N = S + 1 : r === "down" && (N = S - 1), {
-          ...w,
-          zIndex: N
+  }, B = (d) => {
+    const u = h.nodeIds;
+    u.size !== 0 && t((o) => {
+      const i = o.canvases[m];
+      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
         };
       });
       return {
@@ -150,24 +150,24 @@ function ae() {
         canvases: {
           ...o.canvases,
           [m]: {
-            ...l,
-            nodes: C
+            ...i,
+            nodes: k
           }
         }
       };
     });
-  }, T = (r) => {
-    const u = f.lineIds;
-    u.size !== 0 && a((o) => {
-      const l = o.canvases[m];
-      if (!l) return o;
-      const n = l.lines.map((w) => w.zIndex ?? 0), p = n.length > 0 ? Math.max(...n) : 0, I = n.length > 0 ? Math.min(...n) : 0, C = l.lines.map((w) => {
-        if (!u.has(w.id)) return w;
-        const S = w.zIndex ?? 0;
-        let N = S;
-        return r === "front" ? N = p + 1 : r === "back" ? N = I - 1 : r === "up" ? N = S + 1 : r === "down" && (N = S - 1), {
-          ...w,
-          zIndex: N
+  }, M = (d) => {
+    const u = h.lineIds;
+    u.size !== 0 && t((o) => {
+      const i = o.canvases[m];
+      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
         };
       });
       return {
@@ -175,24 +175,24 @@ function ae() {
         canvases: {
           ...o.canvases,
           [m]: {
-            ...l,
-            lines: C
+            ...i,
+            lines: k
           }
         }
       };
     });
-  }, Z = (r, u, o) => {
-    F(r, { [u]: o });
-  }, F = (r, u) => {
-    a((o) => {
-      const l = o.canvases[m];
-      return l ? {
+  }, Z = (d, u, o) => {
+    P(d, { [u]: o });
+  }, P = (d, u) => {
+    t((o) => {
+      const i = o.canvases[m];
+      return i ? {
         ...o,
         canvases: {
           ...o.canvases,
           [m]: {
-            ...l,
-            nodes: l.nodes.map((n) => n.id === r ? {
+            ...i,
+            nodes: i.nodes.map((n) => n.id === d ? {
               ...n,
               data: {
                 ...n.data,
@@ -203,33 +203,33 @@ function ae() {
         }
       } : o;
     });
-  }, Y = (r, u, o) => {
-    a((l) => {
-      const n = l.canvases[m];
+  }, X = (d, u, o) => {
+    t((i) => {
+      const n = i.canvases[m];
       return n ? {
-        ...l,
+        ...i,
         canvases: {
-          ...l.canvases,
+          ...i.canvases,
           [m]: {
             ...n,
-            nodes: n.nodes.map((p) => p.id === r ? {
+            nodes: n.nodes.map((p) => p.id === d ? {
               ...p,
               [u]: o
             } : p)
           }
         }
-      } : l;
+      } : i;
     });
-  }, X = (r, u, o) => {
-    a((l) => {
-      const n = l.canvases[m];
+  }, j = (d, u, o) => {
+    t((i) => {
+      const n = i.canvases[m];
       return n ? {
-        ...l,
+        ...i,
         canvases: {
-          ...l.canvases,
+          ...i.canvases,
           [m]: {
             ...n,
-            edges: n.edges.map((p) => p.id === r ? {
+            edges: n.edges.map((p) => p.id === d ? {
               ...p,
               data: {
                 ...p.data,
@@ -238,18 +238,18 @@ function ae() {
             } : p)
           }
         }
-      } : l;
+      } : i;
     });
-  }, K = (r, u) => {
-    a((o) => {
-      const l = o.canvases[m];
-      return l ? {
+  }, H = (d, u) => {
+    t((o) => {
+      const i = o.canvases[m];
+      return i ? {
         ...o,
         canvases: {
           ...o.canvases,
           [m]: {
-            ...l,
-            nodes: l.nodes.map((n) => n.id === r ? {
+            ...i,
+            nodes: i.nodes.map((n) => n.id === d ? {
               ...n,
               type: u
             } : n)
@@ -257,16 +257,16 @@ function ae() {
         }
       } : o;
     });
-  }, H = (r, u) => {
-    a((o) => {
-      const l = o.canvases[m];
-      return l ? {
+  }, K = (d, u) => {
+    t((o) => {
+      const i = o.canvases[m];
+      return i ? {
         ...o,
         canvases: {
           ...o.canvases,
           [m]: {
-            ...l,
-            edges: l.edges.map((n) => n.id === r ? {
+            ...i,
+            edges: i.edges.map((n) => n.id === d ? {
               ...n,
               type: u
             } : n)
@@ -274,26 +274,26 @@ function ae() {
         }
       } : o;
     });
-  }, $ = (r, u, o) => {
-    a((l) => {
-      const n = l.canvases[m];
+  }, $ = (d, u, o) => {
+    t((i) => {
+      const n = i.canvases[m];
       return n ? {
-        ...l,
+        ...i,
         canvases: {
-          ...l.canvases,
+          ...i.canvases,
           [m]: {
             ...n,
-            lines: n.lines.map((p) => p.id === r ? {
+            lines: n.lines.map((p) => p.id === d ? {
               ...p,
               [u]: o
             } : p)
           }
         }
-      } : l;
+      } : i;
     });
   };
-  return /* @__PURE__ */ i(G, { children: [
-    !_ && /* @__PURE__ */ e("div", {
+  return /* @__PURE__ */ a(G, { children: [
+    !E && /* @__PURE__ */ e("div", {
       style: {
         fontSize: 12,
         color: "oklch(var(--bc) / 0.4)",
@@ -302,62 +302,62 @@ function ae() {
       },
       children: "Select an element to inspect"
     }),
-    h.length === 1 && /* @__PURE__ */ e(ne, {
-      node: h[0],
-      isGroup: L,
+    f.length === 1 && /* @__PURE__ */ e(re, {
+      node: f[0],
+      isGroup: I,
       onUpdateData: Z,
-      onUpdateDataBatch: F,
-      onUpdateDimension: Y,
-      onUpdateType: K
+      onUpdateDataBatch: P,
+      onUpdateDimension: X,
+      onUpdateType: H
     }),
-    B > 1 && /* @__PURE__ */ i("div", {
+    F > 1 && /* @__PURE__ */ a("div", {
       className: "flow-inspector-section",
       children: [
         /* @__PURE__ */ e("div", {
           className: "flow-inspector-section-title",
           children: "Selection"
         }),
-        /* @__PURE__ */ i("div", {
+        /* @__PURE__ */ a("div", {
           style: {
             fontSize: 12,
             color: "oklch(var(--bc) / 0.5)",
             marginBottom: 8
           },
           children: [
-            h.length > 0 && `${h.length} node${h.length > 1 ? "s" : ""}`,
-            h.length > 0 && g.length > 0 && ", ",
-            g.length > 0 && `${g.length} line${g.length > 1 ? "s" : ""}`,
+            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" : ""}`,
             " selected"
           ]
         }),
-        /* @__PURE__ */ i("div", {
+        /* @__PURE__ */ a("div", {
           style: {
             display: "flex",
             flexDirection: "column",
             gap: 4,
             width: "100%"
           },
-          children: [/* @__PURE__ */ e(v, {
+          children: [/* @__PURE__ */ e(g, {
             size: "xs",
-            onClick: () => P("flowGroup"),
+            onClick: () => O("flowGroup"),
             block: !0,
             children: "Group (⌘G)"
-          }), /* @__PURE__ */ e(v, {
+          }), /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => P("geometryGroup"),
+            onClick: () => O("geometryGroup"),
             block: !0,
             children: "Geo Group (⌘⌥G)"
           })]
         })
       ]
     }),
-    L && /* @__PURE__ */ i("div", {
+    I && /* @__PURE__ */ a("div", {
       className: "flow-inspector-section",
       children: [
         /* @__PURE__ */ e("div", {
           className: "flow-inspector-section-title",
-          children: h[0].type === "geometryGroup" ? "Geometry Group" : "Group"
+          children: f[0].type === "geometryGroup" ? "Geometry Group" : "Group"
         }),
         /* @__PURE__ */ e("div", {
           style: {
@@ -365,59 +365,59 @@ function ae() {
             color: "oklch(var(--bc) / 0.45)",
             marginBottom: 6
           },
-          children: h[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(v, {
+        /* @__PURE__ */ e(g, {
           size: "xs",
           variant: "ghost",
-          onClick: W,
+          onClick: R,
           block: !0,
           children: "Ungroup (⌘⇧G)"
         })
       ]
     }),
-    h.length > 0 && /* @__PURE__ */ i("div", {
+    f.length > 0 && /* @__PURE__ */ a("div", {
       className: "flow-inspector-section",
       children: [/* @__PURE__ */ e("div", {
         className: "flow-inspector-section-title",
         children: "Layer"
-      }), /* @__PURE__ */ i("div", {
+      }), /* @__PURE__ */ a("div", {
         style: {
           display: "flex",
           gap: 4
         },
         children: [
-          /* @__PURE__ */ e(v, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => E("front"),
+            onClick: () => B("front"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring to Front (⌘⇧↑)",
               children: "⤒"
             })
           }),
-          /* @__PURE__ */ e(v, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => E("up"),
+            onClick: () => B("up"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring Forward (⌘↑)",
               children: "↑"
             })
           }),
-          /* @__PURE__ */ e(v, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => E("down"),
+            onClick: () => B("down"),
             children: /* @__PURE__ */ e("span", {
               title: "Send Backward (⌘↓)",
               children: "↓"
             })
           }),
-          /* @__PURE__ */ e(v, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => E("back"),
+            onClick: () => B("back"),
             children: /* @__PURE__ */ e("span", {
               title: "Send to Back (⌘⇧↓)",
               children: "⤓"
@@ -426,56 +426,56 @@ function ae() {
         ]
       })]
     }),
-    t.length === 1 && /* @__PURE__ */ e(oe, {
-      edge: t[0],
-      onUpdateData: X,
-      onUpdateType: H
+    s.length === 1 && /* @__PURE__ */ e(de, {
+      edge: s[0],
+      onUpdateData: j,
+      onUpdateType: K
     }),
-    g.length === 1 && /* @__PURE__ */ i(G, { children: [/* @__PURE__ */ e(re, {
-      line: g[0],
+    v.length === 1 && /* @__PURE__ */ a(G, { children: [/* @__PURE__ */ e(he, {
+      line: v[0],
       onUpdateData: $
-    }), /* @__PURE__ */ i("div", {
+    }), /* @__PURE__ */ a("div", {
       className: "flow-inspector-section",
       children: [/* @__PURE__ */ e("div", {
         className: "flow-inspector-section-title",
         children: "Layer"
-      }), /* @__PURE__ */ i("div", {
+      }), /* @__PURE__ */ a("div", {
         style: {
           display: "flex",
           gap: 4
         },
         children: [
-          /* @__PURE__ */ e(v, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => T("front"),
+            onClick: () => M("front"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring to Front",
               children: "⤒"
             })
           }),
-          /* @__PURE__ */ e(v, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => T("up"),
+            onClick: () => M("up"),
             children: /* @__PURE__ */ e("span", {
               title: "Bring Forward",
               children: "↑"
             })
           }),
-          /* @__PURE__ */ e(v, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => T("down"),
+            onClick: () => M("down"),
             children: /* @__PURE__ */ e("span", {
               title: "Send Backward",
               children: "↓"
             })
           }),
-          /* @__PURE__ */ e(v, {
+          /* @__PURE__ */ e(g, {
             size: "xs",
             variant: "ghost",
-            onClick: () => T("back"),
+            onClick: () => M("back"),
             children: /* @__PURE__ */ e("span", {
               title: "Send to Back",
               children: "⤓"
@@ -486,288 +486,303 @@ function ae() {
     })] })
   ] });
 }
-function ne({ node: s, isGroup: f, onUpdateData: c, onUpdateDataBatch: a, onUpdateDimension: m, onUpdateType: h }) {
-  return /* @__PURE__ */ i(G, { children: [
-    /* @__PURE__ */ i("div", {
+function re({ node: l, isGroup: h, onUpdateData: r, onUpdateDataBatch: t, onUpdateDimension: m, onUpdateType: f }) {
+  return /* @__PURE__ */ a(G, { children: [
+    /* @__PURE__ */ a("div", {
       className: "flow-inspector-section",
       children: [
         /* @__PURE__ */ e("div", {
           className: "flow-inspector-section-title",
           children: "Node"
         }),
-        /* @__PURE__ */ i("div", {
+        /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(c, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Label"
-          }), /* @__PURE__ */ e(y, {
+          }), /* @__PURE__ */ e(w, {
             size: "xs",
-            value: s.data.label,
-            onChange: (t) => c(s.id, "label", t.target.value)
+            value: l.data.label,
+            onChange: (s) => r(l.id, "label", s.target.value)
           })]
         }),
-        /* @__PURE__ */ i("div", {
+        /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(c, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Type"
-          }), /* @__PURE__ */ e(z, {
-            options: ie.map((t) => ({
-              value: t,
-              label: t
+          }), /* @__PURE__ */ e(y, {
+            options: ie.map((s) => ({
+              value: s,
+              label: s
             })),
-            value: s.type,
-            onChange: (t) => h(s.id, t),
+            value: l.type,
+            onChange: (s) => f(l.id, s),
             style: { fontSize: 12 }
           })]
         })
       ]
     }),
-    /* @__PURE__ */ i("div", {
+    /* @__PURE__ */ a("div", {
       className: "flow-inspector-section",
       children: [
         /* @__PURE__ */ e("div", {
           className: "flow-inspector-section-title",
           children: "Size"
         }),
-        /* @__PURE__ */ i("div", {
+        /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(c, {
             size: "xs",
             className: "flow-inspector-label",
             children: "W"
-          }), /* @__PURE__ */ e(y, {
+          }), /* @__PURE__ */ e(w, {
             size: "xs",
             type: "number",
-            value: String(Math.round(s.width * 100) / 100),
-            onChange: (t) => m(s.id, "width", Number(t.target.value) || s.width)
+            value: String(Math.round(l.width * 100) / 100),
+            onChange: (s) => m(l.id, "width", Number(s.target.value) || l.width)
           })]
         }),
-        /* @__PURE__ */ i("div", {
+        /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(c, {
             size: "xs",
             className: "flow-inspector-label",
             children: "H"
-          }), /* @__PURE__ */ e(y, {
+          }), /* @__PURE__ */ e(w, {
             size: "xs",
             type: "number",
-            value: String(Math.round(s.height * 100) / 100),
-            onChange: (t) => m(s.id, "height", Number(t.target.value) || s.height)
+            value: String(Math.round(l.height * 100) / 100),
+            onChange: (s) => m(l.id, "height", Number(s.target.value) || l.height)
           })]
         })
       ]
     }),
-    /* @__PURE__ */ i("div", {
+    /* @__PURE__ */ a("div", {
       className: "flow-inspector-section",
       children: [
         /* @__PURE__ */ e("div", {
           className: "flow-inspector-section-title",
           children: "Style"
         }),
-        /* @__PURE__ */ i("div", {
+        /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(c, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Fill"
-          }), /* @__PURE__ */ e("input", {
+          }), /* @__PURE__ */ e(w, {
             type: "color",
-            value: s.data.fill === "transparent" ? "#ffffff" : s.data.fill,
-            onChange: (t) => c(s.id, "fill", t.target.value),
-            style: {
-              width: 28,
-              height: 24,
-              border: "none",
-              borderRadius: 4,
-              cursor: "pointer"
-            }
+            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__ */ i("div", {
+        /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(c, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Stroke"
-          }), /* @__PURE__ */ e("input", {
+          }), /* @__PURE__ */ e(w, {
             type: "color",
-            value: s.data.stroke === "transparent" ? "#000000" : s.data.stroke,
-            onChange: (t) => c(s.id, "stroke", t.target.value),
-            style: {
-              width: 28,
-              height: 24,
-              border: "none",
-              borderRadius: 4,
-              cursor: "pointer"
-            }
+            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__ */ i("div", {
+        /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(c, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Font"
-          }), /* @__PURE__ */ e(y, {
+          }), /* @__PURE__ */ e(w, {
             size: "xs",
             type: "number",
-            value: String(s.data.fontSize),
-            onChange: (t) => c(s.id, "fontSize", Number(t.target.value) || 14)
+            value: String(l.data.fontSize),
+            onChange: (s) => r(l.id, "fontSize", Number(s.target.value) || 14)
           })]
         }),
-        /* @__PURE__ */ i("div", {
+        /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(c, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Color"
-          }), /* @__PURE__ */ e("input", {
+          }), /* @__PURE__ */ e(w, {
             type: "color",
-            value: s.data.color,
-            onChange: (t) => c(s.id, "color", t.target.value),
-            style: {
-              width: 28,
-              height: 24,
-              border: "none",
-              borderRadius: 4,
-              cursor: "pointer"
-            }
+            size: "xs",
+            value: l.data.color,
+            onChange: (s) => r(l.id, "color", s.target.value),
+            className: "flow-inspector-color flow-inspector-compact"
           })]
         }),
-        /* @__PURE__ */ i("div", {
+        /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(c, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Font Color"
-          }), /* @__PURE__ */ e("input", {
+          }), /* @__PURE__ */ e(w, {
             type: "color",
-            value: s.data.labelColor ?? s.data.color,
-            onChange: (t) => c(s.id, "labelColor", t.target.value),
-            style: {
-              width: 28,
-              height: 24,
-              border: "none",
-              borderRadius: 4,
-              cursor: "pointer"
-            }
+            size: "xs",
+            value: l.data.labelColor ?? l.data.color,
+            onChange: (s) => r(l.id, "labelColor", s.target.value),
+            className: "flow-inspector-color flow-inspector-compact"
           })]
         }),
-        /* @__PURE__ */ i("div", {
+        /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
-          children: [/* @__PURE__ */ e(d, {
+          children: [/* @__PURE__ */ e(c, {
             size: "xs",
             className: "flow-inspector-label",
             children: "Border"
-          }), /* @__PURE__ */ e(z, {
+          }), /* @__PURE__ */ e(y, {
             options: [{
               value: "none",
               label: "none"
-            }, ...D.map((t) => ({
-              value: t,
-              label: t
+            }, ...J.map((s) => ({
+              value: s,
+              label: s
             }))],
-            value: s.data.borderStyle ?? (f ? s.type === "geometryGroup" ? "dashed" : "dotted" : "solid"),
-            onChange: (t) => c(s.id, "borderStyle", t),
+            value: l.data.borderStyle ?? (h ? l.type === "geometryGroup" ? "dashed" : "dotted" : "solid"),
+            onChange: (s) => r(l.id, "borderStyle", s),
             style: { fontSize: 12 }
           })]
         }),
-        s.type === "shapeSvg" && /* @__PURE__ */ i(G, { children: [
-          /* @__PURE__ */ i("div", {
+        l.type === "shapeSvg" && /* @__PURE__ */ a(G, { children: [
+          /* @__PURE__ */ a("div", {
             className: "flow-inspector-row",
-            children: [/* @__PURE__ */ e(d, {
+            children: [/* @__PURE__ */ e(c, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Icon"
-            }), /* @__PURE__ */ e(z, {
-              options: U().map((t) => ({
-                value: t.id,
-                label: t.label
+            }), /* @__PURE__ */ e(y, {
+              options: ee().map((s) => ({
+                value: s.id,
+                label: s.label
               })),
-              value: s.data.svgId ?? "",
+              value: l.data.svgId ?? "",
               placeholder: "选择图标",
-              onChange: (t) => {
-                const g = ee(String(t));
-                a(s.id, {
-                  svgId: t,
-                  ...g?.brandColor ? { color: g.brandColor } : {},
-                  ...!s.data.label || s.data.label === "Text" ? { label: g?.label ?? String(t) } : {}
+              onChange: (s) => {
+                const v = le(String(s));
+                t(l.id, {
+                  svgId: s,
+                  ...v?.brandColor ? { color: v.brandColor } : {},
+                  ...!l.data.label || l.data.label === "Text" ? { label: v?.label ?? String(s) } : {}
                 });
               },
               style: { fontSize: 12 }
             })]
           }),
-          /* @__PURE__ */ i("div", {
+          /* @__PURE__ */ a("div", {
             className: "flow-inspector-row",
-            children: [/* @__PURE__ */ e(d, {
+            children: [/* @__PURE__ */ e(c, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Box"
-            }), /* @__PURE__ */ e(A, {
+            }), /* @__PURE__ */ e(_, {
               size: "sm",
-              checked: s.data.iconBox ?? !1,
-              onChange: (t) => c(s.id, "iconBox", t),
+              checked: l.data.iconBox ?? !1,
+              onChange: (s) => r(l.id, "iconBox", s),
               label: "显示边框"
             })]
           }),
-          /* @__PURE__ */ i("div", {
+          /* @__PURE__ */ a("div", {
             className: "flow-inspector-row",
-            children: [/* @__PURE__ */ e(d, {
+            children: [/* @__PURE__ */ e(c, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Label"
-            }), /* @__PURE__ */ e(z, {
+            }), /* @__PURE__ */ e(y, {
               options: [
                 {
-                  value: "below",
-                  label: "下方"
+                  value: "top",
+                  label: "top"
+                },
+                {
+                  value: "middle",
+                  label: "middle"
                 },
                 {
-                  value: "center",
-                  label: "居中"
+                  value: "bottom",
+                  label: "bottom"
                 },
                 {
-                  value: "above",
-                  label: "上方"
+                  value: "left",
+                  label: "left"
+                },
+                {
+                  value: "right",
+                  label: "right"
                 }
               ],
-              value: s.data.labelPlacement ?? "below",
-              onChange: (t) => c(s.id, "labelPlacement", t),
+              value: l.data.labelPlacement === "above" ? "top" : l.data.labelPlacement === "center" ? "middle" : l.data.labelPlacement === "below" ? "bottom" : l.data.labelPlacement ?? "bottom",
+              onChange: (s) => r(l.id, "labelPlacement", s),
               style: { fontSize: 12 }
             })]
+          }),
+          /* @__PURE__ */ a("div", {
+            className: "flow-inspector-row",
+            children: [/* @__PURE__ */ e(c, {
+              size: "xs",
+              className: "flow-inspector-label",
+              children: "Offset X"
+            }), /* @__PURE__ */ e(w, {
+              size: "xs",
+              type: "number",
+              value: String(l.data.labelOffsetX ?? 0),
+              onChange: (s) => r(l.id, "labelOffsetX", Number(s.target.value) || 0)
+            })]
+          }),
+          /* @__PURE__ */ a("div", {
+            className: "flow-inspector-row",
+            children: [/* @__PURE__ */ e(c, {
+              size: "xs",
+              className: "flow-inspector-label",
+              children: "Offset Y"
+            }), /* @__PURE__ */ e(w, {
+              size: "xs",
+              type: "number",
+              value: String(l.data.labelOffsetY ?? 0),
+              onChange: (s) => r(l.id, "labelOffsetY", Number(s.target.value) || 0)
+            })]
           })
         ] })
       ]
     }),
-    s.type === "mediaNode" && /* @__PURE__ */ e(te, {
-      node: s,
-      onUpdateData: c
+    l.type === "mediaNode" && /* @__PURE__ */ e(ce, {
+      node: l,
+      onUpdateData: r
     }),
-    /* @__PURE__ */ i("div", {
+    /* @__PURE__ */ a("div", {
       className: "flow-inspector-section",
       children: [
         /* @__PURE__ */ e("div", {
           className: "flow-inspector-section-title",
           children: "Transform"
         }),
-        /* @__PURE__ */ i("div", {
+        /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
           children: [
-            /* @__PURE__ */ e(d, {
+            /* @__PURE__ */ e(c, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Rotate"
             }),
-            /* @__PURE__ */ e(y, {
+            /* @__PURE__ */ e(w, {
               size: "xs",
               type: "number",
-              value: String(s.data.rotation ?? 0),
-              onChange: (t) => c(s.id, "rotation", Number(t.target.value) || 0)
+              value: String(l.data.rotation ?? 0),
+              onChange: (s) => r(l.id, "rotation", Number(s.target.value) || 0)
             }),
             /* @__PURE__ */ e("span", {
+              className: "flow-inspector-suffix",
               style: {
                 fontSize: 10,
                 opacity: 0.5
@@ -776,28 +791,28 @@ function ne({ node: s, isGroup: f, onUpdateData: c, onUpdateDataBatch: a, onUpda
             })
           ]
         }),
-        /* @__PURE__ */ i("div", {
+        /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
           children: [
-            /* @__PURE__ */ e(d, {
+            /* @__PURE__ */ e(c, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Flip"
             }),
-            /* @__PURE__ */ e(v, {
+            /* @__PURE__ */ e(g, {
               size: "xs",
-              variant: s.data.flipX ? "primary" : "ghost",
-              onClick: () => c(s.id, "flipX", !s.data.flipX),
+              variant: l.data.flipX ? "primary" : "ghost",
+              onClick: () => r(l.id, "flipX", !l.data.flipX),
               square: !0,
               children: /* @__PURE__ */ e("span", {
                 title: "Flip Horizontal",
                 children: "↔"
               })
             }),
-            /* @__PURE__ */ e(v, {
+            /* @__PURE__ */ e(g, {
               size: "xs",
-              variant: s.data.flipY ? "primary" : "ghost",
-              onClick: () => c(s.id, "flipY", !s.data.flipY),
+              variant: l.data.flipY ? "primary" : "ghost",
+              onClick: () => r(l.id, "flipY", !l.data.flipY),
               square: !0,
               children: /* @__PURE__ */ e("span", {
                 title: "Flip Vertical",
@@ -806,24 +821,24 @@ function ne({ node: s, isGroup: f, onUpdateData: c, onUpdateDataBatch: a, onUpda
             })
           ]
         }),
-        /* @__PURE__ */ i("div", {
+        /* @__PURE__ */ a("div", {
           className: "flow-inspector-row",
           children: [
-            /* @__PURE__ */ e(d, {
+            /* @__PURE__ */ e(c, {
               size: "xs",
               className: "flow-inspector-label",
               children: "Quick"
             }),
-            /* @__PURE__ */ e(v, {
+            /* @__PURE__ */ e(g, {
               size: "xs",
               variant: "ghost",
-              onClick: () => c(s.id, "rotation", ((s.data.rotation ?? 0) + 90) % 360),
+              onClick: () => r(l.id, "rotation", ((l.data.rotation ?? 0) + 90) % 360),
               children: "+90°"
             }),
-            /* @__PURE__ */ e(v, {
+            /* @__PURE__ */ e(g, {
               size: "xs",
               variant: "ghost",
-              onClick: () => c(s.id, "rotation", ((s.data.rotation ?? 0) - 90 + 360) % 360),
+              onClick: () => r(l.id, "rotation", ((l.data.rotation ?? 0) - 90 + 360) % 360),
               children: "−90°"
             })
           ]
@@ -832,52 +847,190 @@ function ne({ node: s, isGroup: f, onUpdateData: c, onUpdateDataBatch: a, onUpda
     })
   ] });
 }
-function te({ node: s, onUpdateData: f }) {
-  const c = s.data.mediaKind ?? "markdown", a = s.data.aiConfig, m = (h, t) => {
-    f(s.id, "aiConfig", {
+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", {
       gateway: "",
       protocol: "openai",
       model: "",
-      ...a,
-      [h]: t
+      ...t,
+      [s]: v
     });
   };
-  return /* @__PURE__ */ i("div", {
+  return /* @__PURE__ */ a("div", {
     className: "flow-inspector-section",
-    children: [/* @__PURE__ */ i("div", {
+    children: [/* @__PURE__ */ a("div", {
       className: "flow-inspector-section-title",
-      children: ["Media · ", c]
-    }), c !== "ai" ? /* @__PURE__ */ i("div", {
-      className: "flow-inspector-row",
-      style: {
-        flexDirection: "column",
-        alignItems: "stretch",
-        gap: 4
-      },
-      children: [/* @__PURE__ */ e(d, {
+      children: ["Media · ", r]
+    }), r === "model3d" ? /* @__PURE__ */ a(G, { children: [
+      /* @__PURE__ */ a("div", {
+        className: "flow-inspector-row",
+        children: [/* @__PURE__ */ e(c, {
+          size: "xs",
+          className: "flow-inspector-label",
+          children: "格式"
+        }), /* @__PURE__ */ e(y, {
+          options: [
+            {
+              value: "stl",
+              label: "STL"
+            },
+            {
+              value: "obj",
+              label: "OBJ"
+            },
+            {
+              value: "3mf",
+              label: "3MF"
+            }
+          ],
+          value: l.data.modelFormat ?? "stl",
+          onChange: (s) => h(l.id, "modelFormat", s)
+        })]
+      }),
+      /* @__PURE__ */ a("div", {
+        className: "flow-inspector-row flow-inspector-multiline",
+        children: [/* @__PURE__ */ e(c, {
+          size: "xs",
+          className: "flow-inspector-label",
+          children: "模型链接"
+        }), /* @__PURE__ */ e(w, {
+          size: "xs",
+          value: l.data.mediaContent ?? "",
+          placeholder: "https://example.com/model.stl",
+          onChange: (s) => h(l.id, "mediaContent", s.target.value)
+        })]
+      }),
+      /* @__PURE__ */ a("div", {
+        className: "flow-inspector-row",
+        children: [
+          /* @__PURE__ */ e(c, {
+            size: "xs",
+            className: "flow-inspector-label",
+            children: "本地模型"
+          }),
+          /* @__PURE__ */ e("input", {
+            ref: m,
+            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) {
+                window.alert("本地模型不能超过 10 MiB，请改用模型链接。");
+                return;
+              }
+              const E = v.name.split(".").pop()?.toLowerCase();
+              if (E !== "stl" && E !== "obj" && E !== "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);
+            }
+          }),
+          /* @__PURE__ */ e(g, {
+            size: "xs",
+            variant: "neutral",
+            onClick: () => m.current?.click(),
+            children: "选择文件"
+          }),
+          l.data.mediaContent?.startsWith("data:") && /* @__PURE__ */ e("span", {
+            className: "flow-inspector-file-status",
+            children: "已嵌入"
+          })
+        ]
+      }),
+      /* @__PURE__ */ e("div", {
+        className: "flow-inspector-help",
+        children: "支持 STL、OBJ、3MF；本地文件将以 Base64 嵌入文档，最大 10 MiB。选中节点后可在内部拖拽旋转、滚轮缩放。"
+      })
+    ] }) : r === "image" ? /* @__PURE__ */ a(G, { children: [/* @__PURE__ */ a("div", {
+      className: "flow-inspector-row flow-inspector-multiline",
+      children: [/* @__PURE__ */ e(c, {
         size: "xs",
         className: "flow-inspector-label",
-        children: {
-          markdown: "Markdown 源码",
-          html: "HTML 源码",
-          mermaid: "Mermaid 图表",
-          math: "LaTeX 公式"
-        }[c] ?? "内容"
-      }), /* @__PURE__ */ e("textarea", {
-        className: "flow-inspector-textarea",
-        value: s.data.mediaContent ?? "",
-        onChange: (h) => f(s.id, "mediaContent", h.target.value),
-        rows: 8,
-        spellCheck: !1
+        children: "图片链接"
+      }), /* @__PURE__ */ e(w, {
+        size: "xs",
+        value: l.data.mediaContent ?? "",
+        placeholder: "https://example.com/image.png",
+        onChange: (s) => h(l.id, "mediaContent", s.target.value)
       })]
-    }) : /* @__PURE__ */ i(G, { children: [
-      /* @__PURE__ */ i("div", {
+    }), /* @__PURE__ */ e("div", {
+      className: "flow-inspector-help",
+      children: "支持 HTTP(S) 链接；选中图片节点后可直接粘贴图片并保存为 Base64。"
+    })] }) : r !== "ai" ? /* @__PURE__ */ e(W, {
+      label: {
+        markdown: "Markdown 源码",
+        html: "HTML 源码",
+        mermaid: "Mermaid 图表",
+        math: "LaTeX 公式"
+      }[r] ?? "内容",
+      value: l.data.mediaContent ?? "",
+      onChange: (s) => h(l.id, "mediaContent", s),
+      rows: 8
+    }) : /* @__PURE__ */ a(G, { children: [
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "协议"
-        }), /* @__PURE__ */ e(z, {
+        }), /* @__PURE__ */ e(y, {
           options: [{
             value: "openai",
             label: "OpenAI 兼容"
@@ -885,84 +1038,71 @@ function te({ node: s, onUpdateData: f }) {
             value: "anthropic",
             label: "Anthropic 兼容"
           }],
-          value: a?.protocol ?? "openai",
-          onChange: (h) => m("protocol", h),
+          value: t?.protocol ?? "openai",
+          onChange: (s) => f("protocol", s),
           style: { fontSize: 12 }
         })]
       }),
-      /* @__PURE__ */ i("div", {
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
         style: {
           flexDirection: "column",
           alignItems: "stretch",
           gap: 4
         },
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "接口地址"
-        }), /* @__PURE__ */ e(y, {
+        }), /* @__PURE__ */ e(w, {
           size: "xs",
-          value: a?.gateway ?? "",
+          value: t?.gateway ?? "",
           placeholder: "https://api.openai.com/v1/chat/completions",
-          onChange: (h) => m("gateway", h.target.value)
+          onChange: (s) => f("gateway", s.target.value)
         })]
       }),
-      /* @__PURE__ */ i("div", {
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
         style: {
           flexDirection: "column",
           alignItems: "stretch",
           gap: 4
         },
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "模型"
-        }), /* @__PURE__ */ e(y, {
+        }), /* @__PURE__ */ e(w, {
           size: "xs",
-          value: a?.model ?? "",
+          value: t?.model ?? "",
           placeholder: "gpt-4o-mini",
-          onChange: (h) => m("model", h.target.value)
+          onChange: (s) => f("model", s.target.value)
         })]
       }),
-      /* @__PURE__ */ i("div", {
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
         style: {
           flexDirection: "column",
           alignItems: "stretch",
           gap: 4
         },
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "API Key"
-        }), /* @__PURE__ */ e(y, {
+        }), /* @__PURE__ */ e(w, {
           size: "xs",
           type: "password",
-          value: a?.apiKey ?? "",
+          value: t?.apiKey ?? "",
           placeholder: "sk-...",
-          onChange: (h) => m("apiKey", h.target.value)
+          onChange: (s) => f("apiKey", s.target.value)
         })]
       }),
-      /* @__PURE__ */ i("div", {
-        className: "flow-inspector-row",
-        style: {
-          flexDirection: "column",
-          alignItems: "stretch",
-          gap: 4
-        },
-        children: [/* @__PURE__ */ e(d, {
-          size: "xs",
-          className: "flow-inspector-label",
-          children: "System Prompt"
-        }), /* @__PURE__ */ e("textarea", {
-          className: "flow-inspector-textarea",
-          value: a?.systemPrompt ?? "",
-          onChange: (h) => m("systemPrompt", h.target.value),
-          rows: 3,
-          spellCheck: !1
-        })]
+      /* @__PURE__ */ e(W, {
+        label: "System Prompt",
+        value: t?.systemPrompt ?? "",
+        onChange: (s) => f("systemPrompt", s),
+        rows: 3
       }),
       /* @__PURE__ */ e("div", {
         style: {
@@ -975,150 +1115,145 @@ function te({ node: s, onUpdateData: f }) {
     ] })]
   });
 }
-function oe({ edge: s, onUpdateData: f, onUpdateType: c }) {
-  return /* @__PURE__ */ i("div", {
+function de({ edge: l, onUpdateData: h, onUpdateType: r }) {
+  return /* @__PURE__ */ a("div", {
     className: "flow-inspector-section",
     children: [
       /* @__PURE__ */ e("div", {
         className: "flow-inspector-section-title",
         children: "Edge"
       }),
-      /* @__PURE__ */ i("div", {
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Type"
-        }), /* @__PURE__ */ e(z, {
-          options: q.map((a) => ({
-            value: a,
-            label: a
+        }), /* @__PURE__ */ e(y, {
+          options: Q.map((t) => ({
+            value: t,
+            label: t
           })),
-          value: s.type,
-          onChange: (a) => c(s.id, a),
+          value: l.type,
+          onChange: (t) => r(l.id, t),
           style: { fontSize: 12 }
         })]
       }),
-      /* @__PURE__ */ i("div", {
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Color"
-        }), /* @__PURE__ */ e("input", {
+        }), /* @__PURE__ */ e(w, {
           type: "color",
-          value: s.data.strokeColor ?? "#374151",
-          onChange: (a) => f(s.id, "strokeColor", a.target.value),
-          style: {
-            width: 28,
-            height: 24,
-            border: "none",
-            borderRadius: 4,
-            cursor: "pointer"
-          }
+          size: "xs",
+          value: l.data.strokeColor ?? "#374151",
+          onChange: (t) => h(l.id, "strokeColor", t.target.value),
+          className: "flow-inspector-color flow-inspector-compact"
         })]
       }),
-      /* @__PURE__ */ i("div", {
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Width"
-        }), /* @__PURE__ */ e(y, {
+        }), /* @__PURE__ */ e(w, {
           size: "xs",
           type: "number",
-          value: String(s.data.strokeWidth ?? 2),
-          onChange: (a) => f(s.id, "strokeWidth", Number(a.target.value) || 2)
+          value: String(l.data.strokeWidth ?? 2),
+          onChange: (t) => h(l.id, "strokeWidth", Number(t.target.value) || 2)
         })]
       }),
-      /* @__PURE__ */ i("div", {
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Animation"
-        }), /* @__PURE__ */ e(A, {
+        }), /* @__PURE__ */ e(_, {
           size: "sm",
-          checked: s.data.animated ?? !1,
-          onChange: (a) => f(s.id, "animated", a),
+          checked: l.data.animated ?? !1,
+          onChange: (t) => h(l.id, "animated", t),
           label: "预览时播放"
         })]
       }),
-      /* @__PURE__ */ i("div", {
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Line"
-        }), /* @__PURE__ */ e(z, {
-          options: R.map((a) => ({
-            value: a,
-            label: a
+        }), /* @__PURE__ */ e(y, {
+          options: Y.map((t) => ({
+            value: t,
+            label: t
           })),
-          value: s.data.lineStyle ?? "solid",
-          onChange: (a) => f(s.id, "lineStyle", a),
+          value: l.data.lineStyle ?? "solid",
+          onChange: (t) => h(l.id, "lineStyle", t),
           style: { fontSize: 12 }
         })]
       }),
-      /* @__PURE__ */ i("div", {
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Start"
-        }), /* @__PURE__ */ e(z, {
-          options: O.map((a) => ({
-            value: a,
-            label: a
+        }), /* @__PURE__ */ e(y, {
+          options: A.map((t) => ({
+            value: t,
+            label: t
           })),
-          value: s.data.markerStart ?? "none",
-          onChange: (a) => f(s.id, "markerStart", a),
+          value: l.data.markerStart ?? "none",
+          onChange: (t) => h(l.id, "markerStart", t),
           style: { fontSize: 12 }
         })]
       }),
-      /* @__PURE__ */ i("div", {
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "End"
-        }), /* @__PURE__ */ e(z, {
-          options: O.map((a) => ({
-            value: a,
-            label: a
+        }), /* @__PURE__ */ e(y, {
+          options: A.map((t) => ({
+            value: t,
+            label: t
           })),
-          value: s.data.markerEnd ?? "none",
-          onChange: (a) => f(s.id, "markerEnd", a),
+          value: l.data.markerEnd ?? "none",
+          onChange: (t) => h(l.id, "markerEnd", t),
           style: { fontSize: 12 }
         })]
       }),
-      /* @__PURE__ */ i("div", {
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Label"
-        }), /* @__PURE__ */ e(y, {
+        }), /* @__PURE__ */ e(w, {
           size: "xs",
-          value: s.data.labelText ?? "",
-          onChange: (a) => f(s.id, "labelText", a.target.value),
+          value: l.data.labelText ?? "",
+          onChange: (t) => h(l.id, "labelText", t.target.value),
           placeholder: "Edge label"
         })]
       })
     ]
   });
 }
-function re({ line: s, onUpdateData: f }) {
-  return /* @__PURE__ */ i("div", {
+function he({ line: l, onUpdateData: h }) {
+  return /* @__PURE__ */ a("div", {
     className: "flow-inspector-section",
     children: [
       /* @__PURE__ */ e("div", {
         className: "flow-inspector-section-title",
         children: "Line"
       }),
-      /* @__PURE__ */ i("div", {
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Type"
@@ -1127,54 +1262,49 @@ function re({ line: s, onUpdateData: f }) {
             fontSize: 12,
             color: "oklch(var(--bc) / 0.6)"
           },
-          children: s.type
+          children: l.type
         })]
       }),
-      /* @__PURE__ */ i("div", {
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Color"
-        }), /* @__PURE__ */ e("input", {
+        }), /* @__PURE__ */ e(w, {
           type: "color",
-          value: s.strokeColor,
-          onChange: (c) => f(s.id, "strokeColor", c.target.value),
-          style: {
-            width: 28,
-            height: 24,
-            border: "none",
-            borderRadius: 4,
-            cursor: "pointer"
-          }
+          size: "xs",
+          value: l.strokeColor,
+          onChange: (r) => h(l.id, "strokeColor", r.target.value),
+          className: "flow-inspector-color flow-inspector-compact"
         })]
       }),
-      /* @__PURE__ */ i("div", {
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Width"
-        }), /* @__PURE__ */ e(y, {
+        }), /* @__PURE__ */ e(w, {
           size: "xs",
           type: "number",
-          value: String(s.strokeWidth),
-          onChange: (c) => f(s.id, "strokeWidth", Number(c.target.value) || 2)
+          value: String(l.strokeWidth),
+          onChange: (r) => h(l.id, "strokeWidth", Number(r.target.value) || 2)
         })]
       }),
-      /* @__PURE__ */ i("div", {
+      /* @__PURE__ */ a("div", {
         className: "flow-inspector-row",
-        children: [/* @__PURE__ */ e(d, {
+        children: [/* @__PURE__ */ e(c, {
           size: "xs",
           className: "flow-inspector-label",
           children: "Style"
-        }), /* @__PURE__ */ e(z, {
-          options: R.map((c) => ({
-            value: c,
-            label: c
+        }), /* @__PURE__ */ e(y, {
+          options: Y.map((r) => ({
+            value: r,
+            label: r
           })),
-          value: s.lineStyle,
-          onChange: (c) => f(s.id, "lineStyle", c),
+          value: l.lineStyle,
+          onChange: (r) => h(l.id, "lineStyle", r),
           style: { fontSize: 12 }
         })]
       })
@@ -1182,8 +1312,8 @@ function re({ line: s, onUpdateData: f }) {
   });
 }
 export {
-  ae as InspectorPanelContent,
-  Se as default
+  oe as InspectorPanelContent,
+  Ge as default
 };
 
 //# sourceMappingURL=InspectorPanel.js.map