@hlang-tech/editor-ui 0.4.0 → 0.6.0

package/lib/index.js

@@ -25,6 +25,7 @@ __export(index_exports, {
   CanvasChrome: () => CanvasChrome,
   CanvasDock: () => CanvasDock,
   Cheatsheet: () => Cheatsheet,
+  ClearIcon: () => ClearIcon,
   ConnectionInspector: () => ConnectionInspector,
   DEFAULT_EDGE_CAPACITY: () => DEFAULT_EDGE_CAPACITY,
   DEFAULT_MIN_CANVAS_HEIGHT: () => DEFAULT_MIN_CANVAS_HEIGHT,
@@ -34,7 +35,9 @@ __export(index_exports, {
   EmptyState: () => EmptyState,
   FOLLOW_SLACK_PX: () => FOLLOW_SLACK_PX,
   FOOTER_KEY_STEP: () => FOOTER_KEY_STEP,
+  FilterIcon: () => FilterIcon,
   FlowEdge: () => FlowEdge,
+  FollowIcon: () => FollowIcon,
   FooterResizer: () => FooterResizer,
   HlangNode: () => HlangNode,
   InspectorPanel: () => InspectorPanel,
@@ -51,6 +54,8 @@ __export(index_exports, {
   NodeSearch: () => NodeSearch,
   OutlineTree: () => OutlineTree,
   PREVIEW_LENGTH: () => PREVIEW_LENGTH,
+  PanelAction: () => PanelAction,
+  PanelHead: () => PanelHead,
   ParamForm: () => ParamForm,
   PillNodeChrome: () => PillNodeChrome,
   PortRow: () => PortRow,
@@ -58,6 +63,7 @@ __export(index_exports, {
   PreviewPanel: () => PreviewPanel,
   RUN_LOG_CAPACITY: () => RUN_LOG_CAPACITY,
   RailTabs: () => RailTabs,
+  ReadOnlyBadge: () => ReadOnlyBadge,
   RunButton: () => RunButton,
   RunLog: () => RunLog,
   RunTrace: () => RunTrace,
@@ -669,6 +675,15 @@ function ErrorIcon({ size = 13 }) {
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 16v.5" }, "d")
   ]);
 }
+function FilterIcon({ size = 14 }) {
+  return svg(size, [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M4 5h16l-6 7.5V19l-4-2v-4.5z" }, "f")]);
+}
+function FollowIcon({ size = 14 }) {
+  return svg(size, [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 4v11M7 10.5l5 5 5-5" }, "a"), /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M5 20h14" }, "l")]);
+}
+function ClearIcon({ size = 14 }) {
+  return svg(size, [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "12", r: "8" }, "c"), /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M6.5 17.5l11-11" }, "s")]);
+}
 
 // src/panels/DiagnosticBadge.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -688,8 +703,7 @@ function DiagnosticBadge({ diagnostic, variant, size = 12 }) {
 var import_react3 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var NoopInteraction = {
-  diagnosticFor: () => void 0,
-  rename: () => void 0
+  diagnosticFor: () => void 0
 };
 var NodeInteractionCtx = (0, import_react3.createContext)(NoopInteraction);
 function NodeInteractionProvider({
@@ -721,10 +735,11 @@ function PillNodeChrome({ node, selected }) {
       });
     }
   }, [editing, node.name]);
+  const { rename } = interaction;
   const commit = (0, import_react4.useCallback)(() => {
     setEditing(false);
-    interaction.rename(node.id, draft);
-  }, [interaction, node.id, draft]);
+    rename == null ? void 0 : rename(node.id, draft);
+  }, [rename, node.id, draft]);
   const onKeyDown = (0, import_react4.useCallback)(
     (e) => {
       if (e.key === "Enter") {
@@ -739,6 +754,9 @@ function PillNodeChrome({ node, selected }) {
   );
   const lastClick = (0, import_react4.useRef)(0);
   const onNameClick = (0, import_react4.useCallback)(() => {
+    if (rename === void 0) {
+      return;
+    }
     const now = performance.now();
     if (now - lastClick.current < DOUBLE_CLICK_MS) {
       setEditing(true);
@@ -746,7 +764,7 @@ function PillNodeChrome({ node, selected }) {
     } else {
       lastClick.current = now;
     }
-  }, []);
+  }, [rename]);
   const inputs = node.ports.filter((p) => p.direction === "I" && !p.isError);
   const outputs = node.ports.filter((p) => p.direction === "O" && !p.isError);
   const className2 = [
@@ -781,7 +799,7 @@ function PillNodeChrome({ node, selected }) {
         onClick: () => {
           onNameClick();
         },
-        title: "Double-click to rename",
+        title: rename === void 0 ? void 0 : "Double-click to rename",
         children: node.name
       }
     ),
@@ -1318,12 +1336,21 @@ function ToolbarGhostButton({
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "hl-toolbar-btn", onClick, title, children });
 }
 
-// src/toolbar/ToolCluster.tsx
+// src/toolbar/ReadOnlyBadge.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
+function ReadOnlyBadge({ label = "View only", title }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "hl-readonly-badge", title: title != null ? title : label, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LockIcon, { size: 12 }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "hl-readonly-badge-label", children: label })
+  ] });
+}
+
+// src/toolbar/ToolCluster.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function ToolCluster({ items }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "hl-toolcluster", role: "toolbar", "aria-label": "Canvas tools", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "hl-toolcluster-slot", children: [
-    item.separatorBefore === true && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "hl-toolcluster-sep", "aria-hidden": true }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "hl-toolcluster", role: "toolbar", "aria-label": "Canvas tools", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "hl-toolcluster-slot", children: [
+    item.separatorBefore === true && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "hl-toolcluster-sep", "aria-hidden": true }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "button",
       {
         type: "button",
@@ -1341,30 +1368,30 @@ function ToolCluster({ items }) {
 
 // src/canvas/CanvasChrome.tsx
 var import_react8 = require("@xyflow/react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function CanvasChrome({ background = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: background && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react8.Background, { variant: import_react8.BackgroundVariant.Dots, gap: 26, size: 1, color: "#242830" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: background && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react8.Background, { variant: import_react8.BackgroundVariant.Dots, gap: 26, size: 1, color: "#242830" }) });
 }
 
 // src/canvas/CanvasDock.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function CursorIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M5 3l6 16 2-6 6-2z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M5 3l6 16 2-6 6-2z" }) });
 }
 function HandIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M8 12V6a1.5 1.5 0 013 0v5m0-1V5a1.5 1.5 0 013 0v6m0-1V6.5a1.5 1.5 0 013 0V13c0 3.5-2 6-5.5 6H12c-2 0-3-.8-4.2-2.5L5 12.5c-.7-1 .6-2.3 1.6-1.6z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M8 12V6a1.5 1.5 0 013 0v5m0-1V5a1.5 1.5 0 013 0v6m0-1V6.5a1.5 1.5 0 013 0V13c0 3.5-2 6-5.5 6H12c-2 0-3-.8-4.2-2.5L5 12.5c-.7-1 .6-2.3 1.6-1.6z" }) });
 }
 function PlusIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: 17, height: 17, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M12 5v14M5 12h14" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { width: 17, height: 17, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M12 5v14M5 12h14" }) });
 }
 function FitIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" }) });
 }
 function UndoIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M9 7L4 12l5 5M4 12h11a5 5 0 010 10h-1" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M9 7L4 12l5 5M4 12h11a5 5 0 010 10h-1" }) });
 }
 function RedoIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M15 7l5 5-5 5M20 12H9a5 5 0 000 10h1" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M15 7l5 5-5 5M20 12H9a5 5 0 000 10h1" }) });
 }
 function CanvasDock({
   zoom,
@@ -1377,76 +1404,79 @@ function CanvasDock({
   onUndo,
   onRedo,
   canUndo,
-  canRedo
+  canRedo,
+  readOnly = false
 }) {
   const pct = `${String(Math.round(zoom * 100))}%`;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "hl-dock", role: "toolbar", "aria-label": "Canvas tools", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      "button",
-      {
-        className: "hl-dock-btn",
-        onClick: onUndo,
-        disabled: !canUndo,
-        title: "Undo (\u2318Z)",
-        "aria-label": "Undo",
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(UndoIcon, {})
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      "button",
-      {
-        className: "hl-dock-btn",
-        onClick: onRedo,
-        disabled: !canRedo,
-        title: "Redo (\u2318\u21E7Z)",
-        "aria-label": "Redo",
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RedoIcon, {})
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "hl-dock-sep", "aria-hidden": true }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      "button",
-      {
-        className: "hl-dock-btn" + (mode === "select" ? " is-active" : ""),
-        onClick: () => onModeChange("select"),
-        title: "Select (V)",
-        "aria-pressed": mode === "select",
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CursorIcon, {})
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      "button",
-      {
-        className: "hl-dock-btn" + (mode === "pan" ? " is-active" : ""),
-        onClick: () => onModeChange("pan"),
-        title: "Pan (Space)",
-        "aria-pressed": mode === "pan",
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(HandIcon, {})
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "hl-dock-btn hl-dock-add", onClick: onAdd, title: "Add node", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlusIcon, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "hl-dock-sep", "aria-hidden": true }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "hl-dock-btn", onClick: onZoomOut, title: "Zoom out", "aria-label": "Zoom out", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "hl-dock-glyph", children: "\u2212" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "hl-dock-zoom hl-mono", onClick: onFitView, title: "Fit view", children: pct }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "hl-dock-btn", onClick: onZoomIn, title: "Zoom in", "aria-label": "Zoom in", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "hl-dock-glyph", children: "+" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "hl-dock-btn hl-dock-fit", onClick: onFitView, title: "Fit view", "aria-label": "Fit view", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FitIcon, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "hl-dock", role: "toolbar", "aria-label": "Canvas tools", children: [
+    readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          className: "hl-dock-btn",
+          onClick: onUndo,
+          disabled: !canUndo,
+          title: "Undo (\u2318Z)",
+          "aria-label": "Undo",
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UndoIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          className: "hl-dock-btn",
+          onClick: onRedo,
+          disabled: !canRedo,
+          title: "Redo (\u2318\u21E7Z)",
+          "aria-label": "Redo",
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RedoIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "hl-dock-sep", "aria-hidden": true }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          className: "hl-dock-btn" + (mode === "select" ? " is-active" : ""),
+          onClick: () => onModeChange("select"),
+          title: "Select (V)",
+          "aria-pressed": mode === "select",
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CursorIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          className: "hl-dock-btn" + (mode === "pan" ? " is-active" : ""),
+          onClick: () => onModeChange("pan"),
+          title: "Pan (Space)",
+          "aria-pressed": mode === "pan",
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(HandIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "hl-dock-btn hl-dock-add", onClick: onAdd, title: "Add node", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PlusIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "hl-dock-sep", "aria-hidden": true })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "hl-dock-btn", onClick: onZoomOut, title: "Zoom out", "aria-label": "Zoom out", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "hl-dock-glyph", children: "\u2212" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "hl-dock-zoom hl-mono", onClick: onFitView, title: "Fit view", children: pct }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "hl-dock-btn", onClick: onZoomIn, title: "Zoom in", "aria-label": "Zoom in", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "hl-dock-glyph", children: "+" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "hl-dock-btn hl-dock-fit", onClick: onFitView, title: "Fit view", "aria-label": "Fit view", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FitIcon, {}) })
   ] });
 }
 
 // src/canvas/EmptyState.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function EmptyState({
   title = "An empty canvas.",
   hint = "add a source \xB7 wire it to a sink \xB7 run"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "hl-empty", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "hl-empty-title", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "hl-empty-hint", children: hint })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "hl-empty", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "hl-empty-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "hl-empty-hint", children: hint })
   ] });
 }
 
 // src/panels/InspectorPanel.tsx
-var import_editor_react2 = require("@hlang-tech/editor-react");
+var import_editor_react3 = require("@hlang-tech/editor-react");
 
 // src/schema/param-field.ts
 function humanizeKey(key) {
@@ -1531,6 +1561,9 @@ function useNodeParams(core, nodeId) {
   );
 }
 
+// src/panels/ConnectionInspector.tsx
+var import_editor_react2 = require("@hlang-tech/editor-react");
+
 // src/hooks/useEdgeBounds.ts
 var import_react10 = require("react");
 var import_editor_core2 = require("@hlang-tech/editor-core");
@@ -1572,17 +1605,17 @@ function useEdgeBounds(core, edgeId) {
 
 // src/panels/ParamForm.tsx
 var import_react11 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-function ParamForm({ fields, onCommit }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "hl-form", children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldRow, { field, onCommit }, field.key)) });
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function ParamForm({ fields, onCommit, disabled = false }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("fieldset", { className: "hl-form", disabled, children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldRow, { field, onCommit }, field.key)) });
 }
 function FieldRow({
   field,
   onCommit
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "hl-field", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "hl-field-label", children: field.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldControl, { field, onCommit })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "hl-field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "hl-field-label", children: field.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldControl, { field, onCommit })
   ] });
 }
 function FieldControl({
@@ -1591,7 +1624,7 @@ function FieldControl({
 }) {
   switch (field.type) {
     case "toggle":
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           type: "button",
@@ -1600,17 +1633,17 @@ function FieldControl({
           className: `hl-toggle${field.value ? " is-on" : ""}`,
           disabled: field.disabled,
           onClick: () => onCommit(field.key, !field.value),
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "hl-toggle-knob" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "hl-toggle-knob" })
         }
       );
     case "number":
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(NumberControl, { field, onCommit });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumberControl, { field, onCommit });
     case "textarea":
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TextControl, { field, onCommit, multiline: true });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TextControl, { field, onCommit, multiline: true });
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TextControl, { field, onCommit });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TextControl, { field, onCommit });
     case "custom":
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "hl-field-custom hl-mono", title: field.fieldType, children: describeCustom(field.value) });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "hl-field-custom hl-mono", title: field.fieldType, children: describeCustom(field.value) });
   }
 }
 function TextControl({
@@ -1632,7 +1665,7 @@ function TextControl({
     onBlur: commit
   };
   if (multiline) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "textarea",
       {
         ...shared,
@@ -1641,7 +1674,7 @@ function TextControl({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "input",
     {
       ...shared,
@@ -1666,7 +1699,7 @@ function NumberControl({
       onCommit(field.key, parsed);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "input",
     {
       className: "hl-input hl-mono",
@@ -1698,9 +1731,10 @@ function describeCustom(value) {
 }
 
 // src/panels/ConnectionInspector.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function ConnectionInspector({ core, edgeId }) {
   const { edge, setBounds } = useEdgeBounds(core, edgeId);
+  const readOnly = (0, import_editor_react2.useReadOnly)(core);
   if (edge === void 0) {
     return null;
   }
@@ -1708,25 +1742,26 @@ function ConnectionInspector({ core, edgeId }) {
     var _a, _b;
     return `${(_b = (_a = core.model.getNode(endpoint.nodeId)) == null ? void 0 : _a.name) != null ? _b : endpoint.nodeId}.${endpoint.portId}`;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "hl-inspector", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("header", { className: "hl-inspector-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "hl-inspector-kind hl-connection", children: "\u2192" }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "hl-inspector-titles", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "hl-inspector-name", children: "Connection" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "hl-inspector-role hl-mono", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "hl-inspector", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("header", { className: "hl-inspector-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hl-inspector-kind hl-connection", children: "\u2192" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "hl-inspector-titles", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hl-inspector-name", children: "Connection" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "hl-inspector-role hl-mono", children: [
           end(edge.source),
           " \u2192 ",
           end(edge.target)
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { className: "hl-inspector-section", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "hl-inspector-section-title", children: "Back-pressure" }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "hl-inspector-hint hl-inspector-note", children: "A bounded connection holds at most its capacity, counting the message being worked on. A sender to a full connection waits, unless it drops its oldest waiting message." }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("section", { className: "hl-inspector-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "hl-inspector-section-title", children: "Back-pressure" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "hl-inspector-hint hl-inspector-note", children: "A bounded connection holds at most its capacity, counting the message being worked on. A sender to a full connection waits, unless it drops its oldest waiting message." }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         ParamForm,
         {
           fields: boundsFields(edge),
+          disabled: readOnly,
           onCommit: (key, value) => {
             setBounds(nextBounds(edge, key, value));
           }
@@ -1852,10 +1887,10 @@ function previewValue(value, maxLength = PREVIEW_LENGTH) {
 
 // src/live/RunTraceContext.tsx
 var import_react12 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var RunTraceContext = (0, import_react12.createContext)(null);
 function RunTraceProvider({ trace, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RunTraceContext.Provider, { value: trace, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RunTraceContext.Provider, { value: trace, children });
 }
 function useRunTraceStore() {
   return (0, import_react12.useContext)(RunTraceContext);
@@ -1869,7 +1904,7 @@ function useRunTraceVersion(trace) {
 }
 
 // src/panels/NodeRunStats.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function NodeRunStats({ nodeId }) {
   const trace = useRunTraceStore();
   useRunTraceVersion(trace);
@@ -1877,105 +1912,107 @@ function NodeRunStats({ nodeId }) {
     return null;
   }
   const stats = trace.statsOf(nodeId);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("section", { className: "hl-inspector-section", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { className: "hl-inspector-section-title", children: "Run" }),
-    stats === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "hl-inspector-hint hl-runstats-hint", children: "No activity in this run." }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("dl", { className: "hl-runstats", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "hl-runstats-cell", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dt", { children: "In" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dd", { className: "hl-mono", children: stats.received })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("section", { className: "hl-inspector-section", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h3", { className: "hl-inspector-section-title", children: "Run" }),
+    stats === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "hl-inspector-hint hl-runstats-hint", children: "No activity in this run." }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("dl", { className: "hl-runstats", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "In" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: stats.received })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "hl-runstats-cell", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dt", { children: "Out" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dd", { className: "hl-mono", children: stats.sent })
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "Out" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: stats.sent })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: `hl-runstats-cell${stats.errors > 0 ? " is-error" : ""}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dt", { children: "Errors" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dd", { className: "hl-mono", children: stats.errors })
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: `hl-runstats-cell${stats.errors > 0 ? " is-error" : ""}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "Errors" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: stats.errors })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "hl-runstats-cell", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dt", { children: "Avg" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dd", { className: "hl-mono", children: stats.received === 0 ? "\u2014" : formatDuration(stats.totalMs / stats.received) })
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "Avg" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: stats.received === 0 ? "\u2014" : formatDuration(stats.totalMs / stats.received) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "hl-runstats-cell", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dt", { children: "Max" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dd", { className: "hl-mono", children: stats.received === 0 ? "\u2014" : formatDuration(stats.maxMs) })
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "Max" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: stats.received === 0 ? "\u2014" : formatDuration(stats.maxMs) })
       ] }),
-      stats.dropped > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "hl-runstats-cell is-warning", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dt", { children: "Dropped" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dd", { className: "hl-mono", children: stats.dropped })
+      stats.dropped > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell is-warning", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "Dropped" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: stats.dropped })
       ] }),
-      stats.finished && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "hl-runstats-cell is-done", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dt", { children: "State" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dd", { children: "Finished" })
+      stats.finished && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell is-done", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "State" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { children: "Finished" })
       ] }),
-      stats.received > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "hl-runstats-cell is-wide", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dt", { children: "Last in" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dd", { className: "hl-mono", children: previewValue(stats.lastReceived) })
+      stats.received > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell is-wide", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "Last in" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: previewValue(stats.lastReceived) })
       ] }),
-      stats.sent > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "hl-runstats-cell is-wide", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dt", { children: "Last out" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("dd", { className: "hl-mono", children: previewValue(stats.lastSent) })
+      stats.sent > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell is-wide", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "Last out" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: previewValue(stats.lastSent) })
       ] })
     ] })
   ] });
 }
 
 // src/panels/InspectorPanel.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function InspectorPanel({ core, emptyState }) {
-  const selection = (0, import_editor_react2.useSelection)(core);
+  const selection = (0, import_editor_react3.useSelection)(core);
+  const readOnly = (0, import_editor_react3.useReadOnly)(core);
   const selectedNodes2 = selection.selectedNodes;
   const singleId = selectedNodes2.length === 1 ? selectedNodes2[0] : void 0;
   const params = useNodeParams(core, singleId);
   const node = params.node;
   const singleEdgeId = selectedNodes2.length === 0 && selection.selectedEdges.length === 1 ? selection.selectedEdges[0] : void 0;
   if (node === void 0 && singleEdgeId !== void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ConnectionInspector, { core, edgeId: singleEdgeId });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ConnectionInspector, { core, edgeId: singleEdgeId });
   }
   if (node === void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "hl-inspector hl-inspector-empty", children: emptyState != null ? emptyState : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-inspector-blank", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "hl-inspector-blank-badge", "aria-hidden": true }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "hl-inspector-blank-title", children: selectedNodes2.length > 1 ? `${String(selectedNodes2.length)} nodes selected` : "Nothing selected" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "hl-inspector-hint", children: selectedNodes2.length > 1 ? "Select a single node to edit its parameters." : "Pick a node or a connection on the canvas to inspect and tune it." })
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "hl-inspector hl-inspector-empty", children: emptyState != null ? emptyState : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "hl-inspector-blank", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-inspector-blank-badge", "aria-hidden": true }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "hl-inspector-blank-title", children: selectedNodes2.length > 1 ? `${String(selectedNodes2.length)} nodes selected` : "Nothing selected" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "hl-inspector-hint", children: selectedNodes2.length > 1 ? "Select a single node to edit its parameters." : "Pick a node or a connection on the canvas to inspect and tune it." })
     ] }) });
   }
   const descriptor = core.registry.get(node.code);
   const fields = descriptor === void 0 ? [] : deriveParamSchema(descriptor, node);
   const imageUrl = typeof node.params.imageUrl === "string" && node.params.imageUrl.length > 0 ? node.params.imageUrl : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-inspector", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `hl-inspector-preview hl-${node.kind.toLowerCase()}`, children: imageUrl !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("img", { className: "hl-inspector-preview-img", src: imageUrl, alt: node.name }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "hl-inspector-preview-badge hl-mono", children: node.kind }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("header", { className: "hl-inspector-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: `hl-inspector-kind hl-${node.kind.toLowerCase()}`, children: node.kind }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-inspector-titles", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "hl-inspector-name", children: node.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "hl-inspector-role hl-mono", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "hl-inspector", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `hl-inspector-preview hl-${node.kind.toLowerCase()}`, children: imageUrl !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("img", { className: "hl-inspector-preview-img", src: imageUrl, alt: node.name }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-inspector-preview-badge hl-mono", children: node.kind }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("header", { className: "hl-inspector-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: `hl-inspector-kind hl-${node.kind.toLowerCase()}`, children: node.kind }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "hl-inspector-titles", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-inspector-name", children: node.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "hl-inspector-role hl-mono", children: [
           node.code,
           " \xB7 ",
           KIND_ROLE[node.kind]
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("section", { className: "hl-inspector-section", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h3", { className: "hl-inspector-section-title", children: "Parameters" }),
-      fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "hl-inspector-hint", children: "This node has no parameters." }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("section", { className: "hl-inspector-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h3", { className: "hl-inspector-section-title", children: "Parameters" }),
+      fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "hl-inspector-hint", children: "This node has no parameters." }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         ParamForm,
         {
           fields,
+          disabled: readOnly,
           onCommit: (key, value) => params.setParam(key, value)
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(NodeRunStats, { nodeId: node.id }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("section", { className: "hl-inspector-section", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h3", { className: "hl-inspector-section-title", children: "Ports" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "hl-inspector-ports", children: node.ports.map((port) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NodeRunStats, { nodeId: node.id }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("section", { className: "hl-inspector-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h3", { className: "hl-inspector-section-title", children: "Ports" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { className: "hl-inspector-ports", children: node.ports.map((port) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         "li",
         {
           className: `hl-inspector-port${port.isError ? " is-error" : ""}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: `hl-port-dot hl-dir-${port.direction.toLowerCase()}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "hl-mono", children: port.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "hl-inspector-port-dir hl-mono", children: port.direction })
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: `hl-port-dot hl-dir-${port.direction.toLowerCase()}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-mono", children: port.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-inspector-port-dir hl-mono", children: port.direction })
           ]
         },
         port.id
@@ -1987,8 +2024,8 @@ function InspectorPanel({ core, emptyState }) {
 // src/panels/OutlineTree.tsx
 var import_react13 = require("react");
 var import_editor_core3 = require("@hlang-tech/editor-core");
-var import_editor_react3 = require("@hlang-tech/editor-react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_editor_react4 = require("@hlang-tech/editor-react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function useTopologyComponents(core) {
   const [tick, setTick] = (0, import_react13.useState)(0);
   const bump = (0, import_react13.useCallback)(() => setTick((t) => t + 1), []);
@@ -2011,9 +2048,9 @@ function useTopologyComponents(core) {
 }
 function OutlineTree({ core, onFocus }) {
   const components = useTopologyComponents(core);
-  const selection = (0, import_editor_react3.useSelection)(core);
-  const viewState = (0, import_editor_react3.useViewState)(core);
-  const diagnostics = (0, import_editor_react3.useDiagnostics)(core);
+  const selection = (0, import_editor_react4.useSelection)(core);
+  const viewState = (0, import_editor_react4.useViewState)(core);
+  const diagnostics = (0, import_editor_react4.useDiagnostics)(core);
   const [collapsed, setCollapsed] = (0, import_react13.useState)(/* @__PURE__ */ new Set());
   const nodeById = (0, import_react13.useMemo)(() => {
     const m = /* @__PURE__ */ new Map();
@@ -2041,80 +2078,80 @@ function OutlineTree({ core, onFocus }) {
     [selection, onFocus]
   );
   if (components.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "hl-outline-empty hl-mono", children: "no layers yet" });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "hl-outline-empty hl-mono", children: "no layers yet" });
   }
   const groups = [...components].sort((a, b) => b.nodeIds.size - a.nodeIds.size);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "hl-outline", role: "tree", "aria-label": "Outline", children: groups.map((group, gi) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "hl-outline", role: "tree", "aria-label": "Outline", children: groups.map((group, gi) => {
     const members = [...group.nodeIds].map((id) => nodeById.get(id)).filter((n) => n !== void 0);
     const open = !collapsed.has(group.id);
     const groupName = `Flow ${String(gi + 1)}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "hl-outline-group", role: "treeitem", "aria-expanded": open, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "hl-outline-group", role: "treeitem", "aria-expanded": open, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         "button",
         {
           className: "hl-outline-grouphead",
           onClick: () => toggleGroup(group.id),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-outline-caret" + (open ? " is-open" : ""), "aria-hidden": true, children: "\u25B8" }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-outline-groupname", children: groupName }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-outline-count hl-mono", children: group.nodeIds.size })
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-outline-caret" + (open ? " is-open" : ""), "aria-hidden": true, children: "\u25B8" }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-outline-groupname", children: groupName }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-outline-count hl-mono", children: group.nodeIds.size })
           ]
         }
       ),
-      open && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { className: "hl-outline-members", children: members.map((node) => {
+      open && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ul", { className: "hl-outline-members", children: members.map((node) => {
         const active = selection.isSelected(node.id);
         const isHidden = viewState.isHidden(node.id);
         const isLocked = viewState.isLocked(node.id);
         const { imageUrl } = node.params;
         const thumbnail = typeof imageUrl === "string" && imageUrl.length > 0 ? imageUrl : void 0;
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
           "div",
           {
             className: "hl-outline-row" + (active ? " is-active" : "") + (isHidden ? " is-hidden" : "") + (isLocked ? " is-locked" : ""),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("button", { className: "hl-outline-main", onClick: () => select(node.id), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("button", { className: "hl-outline-main", onClick: () => select(node.id), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "span",
                   {
                     className: `hl-outline-icon hl-kind-${node.kind.toLowerCase()}`,
                     "aria-hidden": true,
-                    children: thumbnail !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    children: thumbnail !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       "img",
                       {
                         className: "hl-outline-thumb",
                         src: thumbnail,
                         alt: ""
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NodeIcon, { code: node.code, kind: node.kind, size: 13 })
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NodeIcon, { code: node.code, kind: node.kind, size: 13 })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-outline-name", children: node.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-outline-name", children: node.name }),
                 (() => {
                   const diag = diagnostics.worstOf(node.id);
-                  return diag === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DiagnosticBadge, { diagnostic: diag, variant: "hl-outline-diag", size: 11 });
+                  return diag === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DiagnosticBadge, { diagnostic: diag, variant: "hl-outline-diag", size: 11 });
                 })(),
-                isLocked && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LockIcon, { size: 11 }) }),
-                isHidden && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(EyeOffIcon, { size: 11 }) })
+                isLocked && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LockIcon, { size: 11 }) }),
+                isHidden && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(EyeOffIcon, { size: 11 }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "hl-outline-controls", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "hl-outline-controls", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     className: "hl-outline-ctl" + (isHidden ? " is-active-ctl" : ""),
                     onClick: () => viewState.toggleHidden(node.id),
                     "aria-label": isHidden ? "Show layer" : "Hide layer",
                     title: isHidden ? "Show" : "Hide",
-                    children: isHidden ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(EyeOffIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(EyeIcon, {})
+                    children: isHidden ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(EyeOffIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(EyeIcon, {})
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     className: "hl-outline-ctl" + (isLocked ? " is-active-ctl" : ""),
                     onClick: () => viewState.toggleLocked(node.id),
                     "aria-label": isLocked ? "Unlock layer" : "Lock layer",
                     title: isLocked ? "Unlock" : "Lock",
-                    children: isLocked ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LockIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UnlockIcon, {})
+                    children: isLocked ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LockIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UnlockIcon, {})
                   }
                 )
               ] })
@@ -2127,21 +2164,48 @@ function OutlineTree({ core, onFocus }) {
 }
 
 // src/panels/PreviewPanel.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function PreviewPanel({ imageUrl, title = "Preview", status }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("section", { className: "hl-preview", "aria-label": "Preview", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "hl-preview-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-preview-title", children: title }),
-      status !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-preview-status hl-mono", children: status })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("section", { className: "hl-preview", "aria-label": "Preview", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "hl-preview-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "hl-preview-title", children: title }),
+      status !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "hl-preview-status hl-mono", children: status })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "hl-preview-frame", children: imageUrl !== void 0 && imageUrl.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", { className: "hl-preview-img", src: imageUrl, alt: title, draggable: false }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "hl-preview-placeholder hl-mono", children: "no output yet" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hl-preview-frame", children: imageUrl !== void 0 && imageUrl.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", { className: "hl-preview-img", src: imageUrl, alt: title, draggable: false }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hl-preview-placeholder hl-mono", children: "no output yet" }) })
+  ] });
+}
+
+// src/panels/PanelHead.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function PanelHead({ leading, meta, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("header", { className: "hl-panel-head", children: [
+    leading,
+    meta === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "hl-panel-meta hl-mono", children: meta }),
+    children === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "hl-panel-actions", children })
   ] });
 }
+function PanelAction({ icon, label, onClick, pressed, disabled = false, title }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: `hl-panel-action${pressed === true ? " is-on" : ""}`,
+      "aria-pressed": pressed,
+      disabled,
+      title: title != null ? title : label,
+      onClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "hl-panel-action-icon", "aria-hidden": true, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "hl-panel-action-label", children: label })
+      ]
+    }
+  );
+}
 
 // src/panels/RailTabs.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function RailTabs({ tabs, active, onChange }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hl-railtabs", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "hl-railtabs", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "button",
     {
       role: "tab",
@@ -2155,20 +2219,20 @@ function RailTabs({ tabs, active, onChange }) {
 }
 
 // src/panels/AssetGrid.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function AssetGrid({ items, onSelect, emptyHint = "No assets yet" }) {
   if (items.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "hl-assetgrid-empty hl-mono", children: emptyHint });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "hl-assetgrid-empty hl-mono", children: emptyHint });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "hl-assetgrid", children: items.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "hl-assetgrid", children: items.map((item) => {
     var _a;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "button",
       {
         className: "hl-assetgrid-cell",
         onClick: () => onSelect == null ? void 0 : onSelect(item.id),
         title: item.label,
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { className: "hl-assetgrid-img", src: item.url, alt: (_a = item.label) != null ? _a : "", loading: "lazy" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { className: "hl-assetgrid-img", src: item.url, alt: (_a = item.label) != null ? _a : "", loading: "lazy" })
       },
       item.id
     );
@@ -2178,8 +2242,8 @@ function AssetGrid({ items, onSelect, emptyHint = "No assets yet" }) {
 // src/panels/PositionPanel.tsx
 var import_react14 = require("react");
 var import_editor_core4 = require("@hlang-tech/editor-core");
-var import_editor_react4 = require("@hlang-tech/editor-react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_editor_react5 = require("@hlang-tech/editor-react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function selectedNodes(core) {
   const ids = core.selection.getSelectedNodes();
   const out = [];
@@ -2193,7 +2257,8 @@ function selectedNodes(core) {
 }
 function PositionPanel({ core, livePosition }) {
   var _a;
-  (0, import_editor_react4.useSelection)(core);
+  (0, import_editor_react5.useSelection)(core);
+  const readOnly = (0, import_editor_react5.useReadOnly)(core);
   const [, bump] = (0, import_react14.useReducer)((n) => n + 1, 0);
   (0, import_react14.useEffect)(() => {
     const kinds = ["nodeChanged", "nodeAdded", "nodeRemoved"];
@@ -2264,7 +2329,7 @@ function PositionPanel({ core, livePosition }) {
     },
     [core, single]
   );
-  const disabled = nodes.length === 0;
+  const disabled = readOnly || nodes.length === 0;
   const alignButtons = [
     { kind: "left", label: "Align left", d: "M5 4v16M9 8h8M9 16h5" },
     { kind: "hcenter", label: "Align centre", d: "M12 4v16M8 9h8M9 15h6" },
@@ -2273,9 +2338,9 @@ function PositionPanel({ core, livePosition }) {
     { kind: "vcenter", label: "Align middle", d: "M4 12h16M9 8v8M15 9v6" },
     { kind: "bottom", label: "Align bottom", d: "M4 19h16M8 7v8M16 12v3" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("section", { className: "hl-position", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { className: "hl-position-title hl-mono", children: "Position" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "hl-position-align", role: "group", "aria-label": "Align", children: alignButtons.map((b) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("section", { className: "hl-position", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { className: "hl-position-title hl-mono", children: "Position" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "hl-position-align", role: "group", "aria-label": "Align", children: alignButtons.map((b) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "button",
       {
         className: "hl-position-alignbtn",
@@ -2283,38 +2348,38 @@ function PositionPanel({ core, livePosition }) {
         disabled,
         title: b.label,
         "aria-label": b.label,
-        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: b.d }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: b.d }) })
       },
       b.kind
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "hl-position-coords", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { className: "hl-position-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "hl-position-coords", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "hl-position-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "input",
           {
             type: "number",
             className: "hl-position-input hl-mono",
             value: shownPos !== void 0 ? Math.round(shownPos.x) : "",
-            disabled: single === void 0,
+            disabled: readOnly || single === void 0,
             onChange: (e) => setCoord("x", Number(e.target.value)),
             "aria-label": "X position"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "hl-position-axis hl-mono", children: "X" })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "hl-position-axis hl-mono", children: "X" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { className: "hl-position-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "hl-position-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "input",
           {
             type: "number",
             className: "hl-position-input hl-mono",
             value: shownPos !== void 0 ? Math.round(shownPos.y) : "",
-            disabled: single === void 0,
+            disabled: readOnly || single === void 0,
             onChange: (e) => setCoord("y", Number(e.target.value)),
             "aria-label": "Y position"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "hl-position-axis hl-mono", children: "Y" })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "hl-position-axis hl-mono", children: "Y" })
       ] })
     ] })
   ] });
@@ -2322,7 +2387,7 @@ function PositionPanel({ core, livePosition }) {
 
 // src/command-palette/NodeSearch.tsx
 var import_react15 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var PANEL_WIDTH = 320;
 var PANEL_MAX_HEIGHT = 360;
 function NodeSearch({ controller }) {
@@ -2382,8 +2447,8 @@ function NodeSearch({ controller }) {
   }
   const style = clampToViewport(state.screen.x, state.screen.y);
   const connectMode = state.pending !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
         className: "hl-node-search-scrim",
@@ -2392,10 +2457,10 @@ function NodeSearch({ controller }) {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "hl-node-search", style, role: "dialog", "aria-label": "Create node", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "hl-node-search-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "hl-node-search-glyph", "aria-hidden": true, children: connectMode ? "\u2933" : "\uFF0B" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "hl-node-search", style, role: "dialog", "aria-label": "Create node", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "hl-node-search-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "hl-node-search-glyph", "aria-hidden": true, children: connectMode ? "\u2933" : "\uFF0B" }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "input",
           {
             ref: inputRef,
@@ -2413,12 +2478,12 @@ function NodeSearch({ controller }) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("ul", { className: "hl-node-search-list", role: "listbox", children: [
-        results.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { className: "hl-node-search-empty hl-mono", children: "no matching nodes" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("ul", { className: "hl-node-search-list", role: "listbox", children: [
+        results.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { className: "hl-node-search-empty hl-mono", children: "no matching nodes" }),
         results.map((view, index) => {
           const descriptor = view.result.value;
           const kind = descriptor.kind;
-          return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
             "li",
             {
               role: "option",
@@ -2430,15 +2495,15 @@ function NodeSearch({ controller }) {
                 choose(view);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   "span",
                   {
                     className: `hl-node-search-kind hl-mono hl-kind-${kind.toLowerCase()}`,
                     children: kind
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "hl-node-search-label", children: highlight(descriptor.displayName, view.result.match) }),
-                view.connectPortId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "hl-node-search-port hl-mono", children: view.connectPortId })
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "hl-node-search-label", children: highlight(descriptor.displayName, view.result.match) }),
+                view.connectPortId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "hl-node-search-port hl-mono", children: view.connectPortId })
               ]
             },
             descriptor.code
@@ -2452,7 +2517,7 @@ function highlight(text, match) {
   const hit = new Set(match.positions);
   const chars = Array.from(text);
   return chars.map(
-    (ch, i) => hit.has(i) ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("mark", { className: "hl-node-search-hit", children: ch }, i) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: ch }, i)
+    (ch, i) => hit.has(i) ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("mark", { className: "hl-node-search-hit", children: ch }, i) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: ch }, i)
   );
 }
 function clampToViewport(x, y) {
@@ -2632,7 +2697,7 @@ function useNodeSearchTriggers(core, search, options = {}) {
     (event, connectionState) => {
       const start = startRef.current;
       startRef.current = null;
-      if (connectionState.toNode !== null || start === null) {
+      if (core.mode.readOnly || connectionState.toNode !== null || start === null) {
         return;
       }
       if (start.nodeId === null || start.handleId === null || start.handleType === null) {
@@ -2663,6 +2728,9 @@ function useNodeSearchTriggers(core, search, options = {}) {
   );
   const onPaneClick = (0, import_react17.useCallback)(
     (event) => {
+      if (core.mode.readOnly) {
+        return;
+      }
       const t = now();
       const isDouble = t - lastPaneClickRef.current <= doubleClickMs;
       lastPaneClickRef.current = t;
@@ -2673,7 +2741,7 @@ function useNodeSearchTriggers(core, search, options = {}) {
       const screen = { x: event.clientX, y: event.clientY };
       search.openBlank(screen, flow.screenToFlowPosition(screen));
     },
-    [flow, search, doubleClickMs, now]
+    [core, flow, search, doubleClickMs, now]
   );
   return { onConnectStart, onConnectEnd, onPaneClick };
 }
@@ -2694,7 +2762,7 @@ function pointerOf(event) {
 
 // src/hooks/useEditorHotkeys.ts
 var import_react19 = require("react");
-var import_editor_react5 = require("@hlang-tech/editor-react");
+var import_editor_react6 = require("@hlang-tech/editor-react");
 function isEditableTarget(target) {
   if (!(target instanceof HTMLElement)) {
     return false;
@@ -2710,7 +2778,7 @@ function withinScope(target, scope) {
   return root !== null && target instanceof Node && root.contains(target);
 }
 function useEditorHotkeys(core, options = {}) {
-  const clipboard = (0, import_editor_react5.useClipboard)(core);
+  const clipboard = (0, import_editor_react6.useClipboard)(core);
   const { scope } = options;
   (0, import_react19.useEffect)(() => {
     const onKeyDown = (event) => {
@@ -2776,7 +2844,7 @@ function useEditorHotkeys(core, options = {}) {
 
 // src/context-menu/NodeContextMenu.tsx
 var import_react20 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var PANEL_WIDTH2 = 208;
 var ITEM_HEIGHT = 34;
 var VIEWPORT_MARGIN = 8;
@@ -2854,8 +2922,8 @@ function NodeContextMenu({ controller, items }) {
     return null;
   }
   const style = clampToViewport2(state.screen.x, state.screen.y, rows.length);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
         className: "hl-ctx-scrim",
@@ -2868,7 +2936,7 @@ function NodeContextMenu({ controller, items }) {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
         ref: menuRef,
@@ -2878,7 +2946,7 @@ function NodeContextMenu({ controller, items }) {
         "aria-label": "Node actions",
         tabIndex: -1,
         onKeyDown,
-        children: rows.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        children: rows.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           "button",
           {
             type: "button",
@@ -2891,9 +2959,9 @@ function NodeContextMenu({ controller, items }) {
               choose(item);
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "hl-ctx-item-icon", "aria-hidden": true, children: item.icon }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "hl-ctx-item-label", children: item.label }),
-              item.shortcut !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "hl-ctx-item-key hl-mono", children: item.shortcut })
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "hl-ctx-item-icon", "aria-hidden": true, children: item.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "hl-ctx-item-label", children: item.label }),
+              item.shortcut !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "hl-ctx-item-key hl-mono", children: item.shortcut })
             ]
           },
           item.id
@@ -2927,7 +2995,7 @@ function useNodeContextMenu() {
 
 // src/overlays/Cheatsheet.tsx
 var import_react22 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var DEFAULT_GROUPS = [
   {
     title: "Edit",
@@ -2981,9 +3049,9 @@ function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "hl-cheat-scrim", onPointerDown: onClose }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "hl-cheat-scrim", onPointerDown: onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "div",
       {
         ref: dialogRef,
@@ -2993,18 +3061,18 @@ function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
         "aria-label": "Keyboard shortcuts",
         tabIndex: -1,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "hl-cheat-head", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "hl-cheat-title", children: "Shortcuts" }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { className: "hl-cheat-close", onClick: onClose, "aria-label": "Close", children: "\u2715" })
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "hl-cheat-head", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-cheat-title", children: "Shortcuts" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", { className: "hl-cheat-close", onClick: onClose, "aria-label": "Close", children: "\u2715" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "hl-cheat-grid", children: groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("section", { className: "hl-cheat-group", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { className: "hl-cheat-group-title hl-mono", children: group.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "hl-cheat-rows", children: group.rows.map((row) => (
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "hl-cheat-grid", children: groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("section", { className: "hl-cheat-group", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { className: "hl-cheat-group-title hl-mono", children: group.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "hl-cheat-rows", children: group.rows.map((row) => (
               // A row is a binding: one action can have several (two ways to pan),
               // so neither the label nor the keys alone identify it.
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("li", { className: "hl-cheat-row", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "hl-cheat-label", children: row.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("kbd", { className: "hl-cheat-keys hl-mono", children: row.keys })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "hl-cheat-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-cheat-label", children: row.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("kbd", { className: "hl-cheat-keys hl-mono", children: row.keys })
               ] }, `${row.keys}\0${row.label}`)
             )) })
           ] }, group.title)) })
@@ -3016,7 +3084,7 @@ function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
 
 // src/overlays/Toast.tsx
 var import_react23 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var ToastCtx = (0, import_react23.createContext)({ show: () => void 0 });
 function ToastProvider({ children, duration = 2200 }) {
   const [items, setItems] = (0, import_react23.useState)([]);
@@ -3033,9 +3101,9 @@ function ToastProvider({ children, duration = 2200 }) {
     [duration]
   );
   const api = (0, import_react23.useMemo)(() => ({ show }), [show]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(ToastCtx.Provider, { value: api, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ToastCtx.Provider, { value: api, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "hl-toast-stack", "aria-live": "polite", children: items.map((t) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "hl-toast", children: t.message }, t.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "hl-toast-stack", "aria-live": "polite", children: items.map((t) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "hl-toast", children: t.message }, t.id)) })
   ] });
 }
 function useToast() {
@@ -3339,12 +3407,12 @@ function useFollowScroll() {
 
 // src/panels/RunLog.tsx
 var import_react27 = require("react");
-var import_editor_react6 = require("@hlang-tech/editor-react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_editor_react7 = require("@hlang-tech/editor-react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function RunLog({ core, onSelectNode, title = "Run log", leading }) {
   const trace = useRunTraceStore();
   useRunTraceVersion(trace);
-  const selection = (0, import_editor_react6.useSelection)(core);
+  const selection = (0, import_editor_react7.useSelection)(core);
   const [onlySelected, setOnlySelected] = (0, import_react27.useState)(false);
   const { ref: bodyRef, onScroll, follow, setFollow } = useFollowScroll();
   const all = trace === null ? [] : trace.entries();
@@ -3362,55 +3430,54 @@ function RunLog({ core, onSelectNode, title = "Run log", leading }) {
     core.selection.selectNodes([nodeId], "replace");
     onSelectNode == null ? void 0 : onSelectNode(nodeId);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("section", { className: "hl-runlog", "aria-label": title, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("header", { className: "hl-runlog-head", children: [
-      leading != null ? leading : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-runlog-title", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "hl-runlog-count hl-mono", children: [
-        entries.length === all.length ? `${String(all.length)} events` : `${String(entries.length)} of ${String(all.length)} events`,
-        trace.dropped > 0 ? ` \xB7 ${String(trace.dropped)} earlier not kept` : ""
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "hl-runlog-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-          "button",
-          {
-            type: "button",
-            className: `hl-runlog-toggle${onlySelected ? " is-on" : ""}`,
-            "aria-pressed": onlySelected,
-            disabled: selectedId === void 0 && !onlySelected,
-            title: selectedId === void 0 ? "Select a node to filter by it" : `Only ${label(selectedId)}`,
-            onClick: () => {
-              setOnlySelected((value) => !value);
-            },
-            children: onlySelected && selectedId !== void 0 ? `Only ${label(selectedId)}` : "Selected node"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-          "button",
-          {
-            type: "button",
-            className: `hl-runlog-toggle${follow ? " is-on" : ""}`,
-            "aria-pressed": follow,
-            onClick: () => {
-              setFollow(!follow);
-            },
-            children: "Follow"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "hl-runlog-toggle",
-            disabled: all.length === 0,
-            onClick: () => {
-              trace.clear();
-            },
-            children: "Clear"
-          }
-        )
-      ] })
-    ] }),
-    entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "hl-runlog-empty", children: all.length === 0 ? "Run the graph to see every message as it moves through it." : "Nothing involving the selected node yet." }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ol", { className: "hl-runlog-body hl-mono", ref: bodyRef, onScroll, children: entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Row, { entry, label, onChoose: choose }, entry.seq)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("section", { className: "hl-runlog", "aria-label": title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      PanelHead,
+      {
+        leading: leading != null ? leading : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-panel-title", children: title }),
+        meta: (entries.length === all.length ? `${String(all.length)} events` : `${String(entries.length)} of ${String(all.length)} events`) + (trace.dropped > 0 ? ` \xB7 ${String(trace.dropped)} earlier not kept` : ""),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            PanelAction,
+            {
+              icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FilterIcon, {}),
+              label: onlySelected && selectedId !== void 0 ? `Only ${label(selectedId)}` : "Selected node",
+              title: selectedId === void 0 ? "Select a node to filter by it" : `Only ${label(selectedId)}`,
+              pressed: onlySelected,
+              disabled: selectedId === void 0 && !onlySelected,
+              onClick: () => {
+                setOnlySelected((value) => !value);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            PanelAction,
+            {
+              icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FollowIcon, {}),
+              label: "Follow",
+              title: "Follow the newest event",
+              pressed: follow,
+              onClick: () => {
+                setFollow(!follow);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            PanelAction,
+            {
+              icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ClearIcon, {}),
+              label: "Clear",
+              title: "Clear the log",
+              disabled: all.length === 0,
+              onClick: () => {
+                trace.clear();
+              }
+            }
+          )
+        ]
+      }
+    ),
+    entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "hl-runlog-empty", children: all.length === 0 ? "Run the graph to see every message as it moves through it." : "Nothing involving the selected node yet." }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ol", { className: "hl-runlog-body hl-mono", ref: bodyRef, onScroll, children: entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Row, { entry, label, onChoose: choose }, entry.seq)) })
   ] });
 }
 function Row({
@@ -3420,32 +3487,32 @@ function Row({
 }) {
   switch (entry.kind) {
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Event, { className: "is-error", at: entry.at, onChoose: () => onChoose(entry.nodeId), ms: "", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(NodePort, { node: label(entry.nodeId), port: "error" }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-runlog-value", children: previewValue(entry.error) })
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Event, { className: "is-error", at: entry.at, onChoose: () => onChoose(entry.nodeId), ms: "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NodePort, { node: label(entry.nodeId), port: "error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-value", children: previewValue(entry.error) })
       ] });
     case "ended":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Event, { className: "is-end", at: entry.at, onChoose: () => onChoose(entry.nodeId), ms: "", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(NodePort, { node: label(entry.nodeId), port: entry.portId }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-runlog-value", children: "ended" })
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Event, { className: "is-end", at: entry.at, onChoose: () => onChoose(entry.nodeId), ms: "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NodePort, { node: label(entry.nodeId), port: entry.portId }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-value", children: "ended" })
       ] });
     case "finished":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Event, { className: "is-end", at: entry.at, onChoose: () => onChoose(entry.nodeId), ms: "", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(NodePort, { node: label(entry.nodeId), port: "" }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-runlog-value", children: "finished" })
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Event, { className: "is-end", at: entry.at, onChoose: () => onChoose(entry.nodeId), ms: "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NodePort, { node: label(entry.nodeId), port: "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-value", children: "finished" })
       ] });
     case "dropped":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Event, { className: "is-dropped", at: entry.at, onChoose: () => onChoose(entry.targetNodeId), ms: "", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Route, { entry, label }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "hl-runlog-value", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Event, { className: "is-dropped", at: entry.at, onChoose: () => onChoose(entry.targetNodeId), ms: "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Route, { entry, label }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "hl-runlog-value", children: [
           "dropped ",
           previewValue(entry.message)
         ] })
       ] });
     case "delivery":
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Event, { className: "", at: entry.at, onChoose: () => onChoose(entry.targetNodeId), ms: formatDuration(entry.duration), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Route, { entry, label }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-runlog-value", children: previewValue(entry.message) })
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Event, { className: "", at: entry.at, onChoose: () => onChoose(entry.targetNodeId), ms: formatDuration(entry.duration), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Route, { entry, label }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-value", children: previewValue(entry.message) })
       ] });
   }
 }
@@ -3456,28 +3523,28 @@ function Event({
   onChoose,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { className: `hl-runlog-row ${className2}`.trim(), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("button", { type: "button", className: "hl-runlog-hit", onClick: onChoose, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-runlog-at", children: formatElapsed(at) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { className: `hl-runlog-row ${className2}`.trim(), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("button", { type: "button", className: "hl-runlog-hit", onClick: onChoose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-at", children: formatElapsed(at) }),
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-runlog-ms", children: ms })
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-ms", children: ms })
   ] }) });
 }
 function NodePort({ node, port }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "hl-runlog-route", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-runlog-node", children: node }),
-    port === "" ? null : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-runlog-port", children: port })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "hl-runlog-route", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-node", children: node }),
+    port === "" ? null : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-port", children: port })
   ] });
 }
 function Route({
   entry,
   label
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "hl-runlog-route", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-runlog-node", children: label(entry.sourceNodeId) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-runlog-port", children: entry.sourcePortId }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-runlog-arrow", "aria-label": "to", children: "\u2192" }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-runlog-node", children: label(entry.targetNodeId) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-runlog-port", children: entry.targetPortId })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "hl-runlog-route", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-node", children: label(entry.sourceNodeId) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-port", children: entry.sourcePortId }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-arrow", "aria-label": "to", children: "\u2192" }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-node", children: label(entry.targetNodeId) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-port", children: entry.targetPortId })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -3487,6 +3554,7 @@ function Route({
   CanvasChrome,
   CanvasDock,
   Cheatsheet,
+  ClearIcon,
   ConnectionInspector,
   DEFAULT_EDGE_CAPACITY,
   DEFAULT_MIN_CANVAS_HEIGHT,
@@ -3496,7 +3564,9 @@ function Route({
   EmptyState,
   FOLLOW_SLACK_PX,
   FOOTER_KEY_STEP,
+  FilterIcon,
   FlowEdge,
+  FollowIcon,
   FooterResizer,
   HlangNode,
   InspectorPanel,
@@ -3513,6 +3583,8 @@ function Route({
   NodeSearch,
   OutlineTree,
   PREVIEW_LENGTH,
+  PanelAction,
+  PanelHead,
   ParamForm,
   PillNodeChrome,
   PortRow,
@@ -3520,6 +3592,7 @@ function Route({
   PreviewPanel,
   RUN_LOG_CAPACITY,
   RailTabs,
+  ReadOnlyBadge,
   RunButton,
   RunLog,
   RunTrace,