@hlang-tech/editor-ui 0.4.0 → 0.5.0

package/lib/index.mjs

@@ -550,6 +550,15 @@ function ErrorIcon({ size = 13 }) {
     /* @__PURE__ */ jsx8("path", { d: "M12 16v.5" }, "d")
   ]);
 }
+function FilterIcon({ size = 14 }) {
+  return svg(size, [/* @__PURE__ */ jsx8("path", { d: "M4 5h16l-6 7.5V19l-4-2v-4.5z" }, "f")]);
+}
+function FollowIcon({ size = 14 }) {
+  return svg(size, [/* @__PURE__ */ jsx8("path", { d: "M12 4v11M7 10.5l5 5 5-5" }, "a"), /* @__PURE__ */ jsx8("path", { d: "M5 20h14" }, "l")]);
+}
+function ClearIcon({ size = 14 }) {
+  return svg(size, [/* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "8" }, "c"), /* @__PURE__ */ jsx8("path", { d: "M6.5 17.5l11-11" }, "s")]);
+}
 
 // src/panels/DiagnosticBadge.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
@@ -569,8 +578,7 @@ function DiagnosticBadge({ diagnostic, variant, size = 12 }) {
 import { createContext as createContext2, useContext as useContext2 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var NoopInteraction = {
-  diagnosticFor: () => void 0,
-  rename: () => void 0
+  diagnosticFor: () => void 0
 };
 var NodeInteractionCtx = createContext2(NoopInteraction);
 function NodeInteractionProvider({
@@ -602,10 +610,11 @@ function PillNodeChrome({ node, selected }) {
       });
     }
   }, [editing, node.name]);
+  const { rename } = interaction;
   const commit = 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 = useCallback(
     (e) => {
       if (e.key === "Enter") {
@@ -620,6 +629,9 @@ function PillNodeChrome({ node, selected }) {
   );
   const lastClick = useRef(0);
   const onNameClick = useCallback(() => {
+    if (rename === void 0) {
+      return;
+    }
     const now = performance.now();
     if (now - lastClick.current < DOUBLE_CLICK_MS) {
       setEditing(true);
@@ -627,7 +639,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 = [
@@ -662,7 +674,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
       }
     ),
@@ -1199,12 +1211,21 @@ function ToolbarGhostButton({
   return /* @__PURE__ */ jsx16("button", { type: "button", className: "hl-toolbar-btn", onClick, title, children });
 }
 
-// src/toolbar/ToolCluster.tsx
+// src/toolbar/ReadOnlyBadge.tsx
 import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+function ReadOnlyBadge({ label = "View only", title }) {
+  return /* @__PURE__ */ jsxs8("span", { className: "hl-readonly-badge", title: title != null ? title : label, children: [
+    /* @__PURE__ */ jsx17(LockIcon, { size: 12 }),
+    /* @__PURE__ */ jsx17("span", { className: "hl-readonly-badge-label", children: label })
+  ] });
+}
+
+// src/toolbar/ToolCluster.tsx
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function ToolCluster({ items }) {
-  return /* @__PURE__ */ jsx17("div", { className: "hl-toolcluster", role: "toolbar", "aria-label": "Canvas tools", children: items.map((item) => /* @__PURE__ */ jsxs8("span", { className: "hl-toolcluster-slot", children: [
-    item.separatorBefore === true && /* @__PURE__ */ jsx17("span", { className: "hl-toolcluster-sep", "aria-hidden": true }),
-    /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18("div", { className: "hl-toolcluster", role: "toolbar", "aria-label": "Canvas tools", children: items.map((item) => /* @__PURE__ */ jsxs9("span", { className: "hl-toolcluster-slot", children: [
+    item.separatorBefore === true && /* @__PURE__ */ jsx18("span", { className: "hl-toolcluster-sep", "aria-hidden": true }),
+    /* @__PURE__ */ jsx18(
       "button",
       {
         type: "button",
@@ -1222,30 +1243,30 @@ function ToolCluster({ items }) {
 
 // src/canvas/CanvasChrome.tsx
 import { Background, BackgroundVariant } from "@xyflow/react";
-import { Fragment as Fragment3, jsx as jsx18 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx19 } from "react/jsx-runtime";
 function CanvasChrome({ background = true }) {
-  return /* @__PURE__ */ jsx18(Fragment3, { children: background && /* @__PURE__ */ jsx18(Background, { variant: BackgroundVariant.Dots, gap: 26, size: 1, color: "#242830" }) });
+  return /* @__PURE__ */ jsx19(Fragment3, { children: background && /* @__PURE__ */ jsx19(Background, { variant: BackgroundVariant.Dots, gap: 26, size: 1, color: "#242830" }) });
 }
 
 // src/canvas/CanvasDock.tsx
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function CursorIcon() {
-  return /* @__PURE__ */ jsx19("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__ */ jsx19("path", { d: "M5 3l6 16 2-6 6-2z" }) });
+  return /* @__PURE__ */ jsx20("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__ */ jsx20("path", { d: "M5 3l6 16 2-6 6-2z" }) });
 }
 function HandIcon() {
-  return /* @__PURE__ */ jsx19("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__ */ jsx19("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__ */ jsx20("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__ */ jsx20("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__ */ jsx19("svg", { width: 17, height: 17, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx19("path", { d: "M12 5v14M5 12h14" }) });
+  return /* @__PURE__ */ jsx20("svg", { width: 17, height: 17, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx20("path", { d: "M12 5v14M5 12h14" }) });
 }
 function FitIcon() {
-  return /* @__PURE__ */ jsx19("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__ */ jsx19("path", { d: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" }) });
+  return /* @__PURE__ */ jsx20("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__ */ jsx20("path", { d: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" }) });
 }
 function UndoIcon() {
-  return /* @__PURE__ */ jsx19("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__ */ jsx19("path", { d: "M9 7L4 12l5 5M4 12h11a5 5 0 010 10h-1" }) });
+  return /* @__PURE__ */ jsx20("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__ */ jsx20("path", { d: "M9 7L4 12l5 5M4 12h11a5 5 0 010 10h-1" }) });
 }
 function RedoIcon() {
-  return /* @__PURE__ */ jsx19("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__ */ jsx19("path", { d: "M15 7l5 5-5 5M20 12H9a5 5 0 000 10h1" }) });
+  return /* @__PURE__ */ jsx20("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__ */ jsx20("path", { d: "M15 7l5 5-5 5M20 12H9a5 5 0 000 10h1" }) });
 }
 function CanvasDock({
   zoom,
@@ -1258,76 +1279,79 @@ function CanvasDock({
   onUndo,
   onRedo,
   canUndo,
-  canRedo
+  canRedo,
+  readOnly = false
 }) {
   const pct = `${String(Math.round(zoom * 100))}%`;
-  return /* @__PURE__ */ jsxs9("div", { className: "hl-dock", role: "toolbar", "aria-label": "Canvas tools", children: [
-    /* @__PURE__ */ jsx19(
-      "button",
-      {
-        className: "hl-dock-btn",
-        onClick: onUndo,
-        disabled: !canUndo,
-        title: "Undo (\u2318Z)",
-        "aria-label": "Undo",
-        children: /* @__PURE__ */ jsx19(UndoIcon, {})
-      }
-    ),
-    /* @__PURE__ */ jsx19(
-      "button",
-      {
-        className: "hl-dock-btn",
-        onClick: onRedo,
-        disabled: !canRedo,
-        title: "Redo (\u2318\u21E7Z)",
-        "aria-label": "Redo",
-        children: /* @__PURE__ */ jsx19(RedoIcon, {})
-      }
-    ),
-    /* @__PURE__ */ jsx19("span", { className: "hl-dock-sep", "aria-hidden": true }),
-    /* @__PURE__ */ jsx19(
-      "button",
-      {
-        className: "hl-dock-btn" + (mode === "select" ? " is-active" : ""),
-        onClick: () => onModeChange("select"),
-        title: "Select (V)",
-        "aria-pressed": mode === "select",
-        children: /* @__PURE__ */ jsx19(CursorIcon, {})
-      }
-    ),
-    /* @__PURE__ */ jsx19(
-      "button",
-      {
-        className: "hl-dock-btn" + (mode === "pan" ? " is-active" : ""),
-        onClick: () => onModeChange("pan"),
-        title: "Pan (Space)",
-        "aria-pressed": mode === "pan",
-        children: /* @__PURE__ */ jsx19(HandIcon, {})
-      }
-    ),
-    /* @__PURE__ */ jsx19("button", { className: "hl-dock-btn hl-dock-add", onClick: onAdd, title: "Add node", children: /* @__PURE__ */ jsx19(PlusIcon, {}) }),
-    /* @__PURE__ */ jsx19("span", { className: "hl-dock-sep", "aria-hidden": true }),
-    /* @__PURE__ */ jsx19("button", { className: "hl-dock-btn", onClick: onZoomOut, title: "Zoom out", "aria-label": "Zoom out", children: /* @__PURE__ */ jsx19("span", { className: "hl-dock-glyph", children: "\u2212" }) }),
-    /* @__PURE__ */ jsx19("button", { className: "hl-dock-zoom hl-mono", onClick: onFitView, title: "Fit view", children: pct }),
-    /* @__PURE__ */ jsx19("button", { className: "hl-dock-btn", onClick: onZoomIn, title: "Zoom in", "aria-label": "Zoom in", children: /* @__PURE__ */ jsx19("span", { className: "hl-dock-glyph", children: "+" }) }),
-    /* @__PURE__ */ jsx19("button", { className: "hl-dock-btn hl-dock-fit", onClick: onFitView, title: "Fit view", "aria-label": "Fit view", children: /* @__PURE__ */ jsx19(FitIcon, {}) })
+  return /* @__PURE__ */ jsxs10("div", { className: "hl-dock", role: "toolbar", "aria-label": "Canvas tools", children: [
+    readOnly ? null : /* @__PURE__ */ jsxs10(Fragment4, { children: [
+      /* @__PURE__ */ jsx20(
+        "button",
+        {
+          className: "hl-dock-btn",
+          onClick: onUndo,
+          disabled: !canUndo,
+          title: "Undo (\u2318Z)",
+          "aria-label": "Undo",
+          children: /* @__PURE__ */ jsx20(UndoIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx20(
+        "button",
+        {
+          className: "hl-dock-btn",
+          onClick: onRedo,
+          disabled: !canRedo,
+          title: "Redo (\u2318\u21E7Z)",
+          "aria-label": "Redo",
+          children: /* @__PURE__ */ jsx20(RedoIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx20("span", { className: "hl-dock-sep", "aria-hidden": true }),
+      /* @__PURE__ */ jsx20(
+        "button",
+        {
+          className: "hl-dock-btn" + (mode === "select" ? " is-active" : ""),
+          onClick: () => onModeChange("select"),
+          title: "Select (V)",
+          "aria-pressed": mode === "select",
+          children: /* @__PURE__ */ jsx20(CursorIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx20(
+        "button",
+        {
+          className: "hl-dock-btn" + (mode === "pan" ? " is-active" : ""),
+          onClick: () => onModeChange("pan"),
+          title: "Pan (Space)",
+          "aria-pressed": mode === "pan",
+          children: /* @__PURE__ */ jsx20(HandIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx20("button", { className: "hl-dock-btn hl-dock-add", onClick: onAdd, title: "Add node", children: /* @__PURE__ */ jsx20(PlusIcon, {}) }),
+      /* @__PURE__ */ jsx20("span", { className: "hl-dock-sep", "aria-hidden": true })
+    ] }),
+    /* @__PURE__ */ jsx20("button", { className: "hl-dock-btn", onClick: onZoomOut, title: "Zoom out", "aria-label": "Zoom out", children: /* @__PURE__ */ jsx20("span", { className: "hl-dock-glyph", children: "\u2212" }) }),
+    /* @__PURE__ */ jsx20("button", { className: "hl-dock-zoom hl-mono", onClick: onFitView, title: "Fit view", children: pct }),
+    /* @__PURE__ */ jsx20("button", { className: "hl-dock-btn", onClick: onZoomIn, title: "Zoom in", "aria-label": "Zoom in", children: /* @__PURE__ */ jsx20("span", { className: "hl-dock-glyph", children: "+" }) }),
+    /* @__PURE__ */ jsx20("button", { className: "hl-dock-btn hl-dock-fit", onClick: onFitView, title: "Fit view", "aria-label": "Fit view", children: /* @__PURE__ */ jsx20(FitIcon, {}) })
   ] });
 }
 
 // src/canvas/EmptyState.tsx
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 function EmptyState({
   title = "An empty canvas.",
   hint = "add a source \xB7 wire it to a sink \xB7 run"
 }) {
-  return /* @__PURE__ */ jsxs10("div", { className: "hl-empty", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx20("p", { className: "hl-empty-title", children: title }),
-    /* @__PURE__ */ jsx20("p", { className: "hl-empty-hint", children: hint })
+  return /* @__PURE__ */ jsxs11("div", { className: "hl-empty", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx21("p", { className: "hl-empty-title", children: title }),
+    /* @__PURE__ */ jsx21("p", { className: "hl-empty-hint", children: hint })
   ] });
 }
 
 // src/panels/InspectorPanel.tsx
-import { useSelection } from "@hlang-tech/editor-react";
+import { useReadOnly as useReadOnly2, useSelection } from "@hlang-tech/editor-react";
 
 // src/schema/param-field.ts
 function humanizeKey(key) {
@@ -1412,6 +1436,9 @@ function useNodeParams(core, nodeId) {
   );
 }
 
+// src/panels/ConnectionInspector.tsx
+import { useReadOnly } from "@hlang-tech/editor-react";
+
 // src/hooks/useEdgeBounds.ts
 import { useCallback as useCallback4, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import { SetEdgeBoundsCommand } from "@hlang-tech/editor-core";
@@ -1453,17 +1480,17 @@ function useEdgeBounds(core, edgeId) {
 
 // src/panels/ParamForm.tsx
 import { useState as useState3 } from "react";
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
-function ParamForm({ fields, onCommit }) {
-  return /* @__PURE__ */ jsx21("div", { className: "hl-form", children: fields.map((field) => /* @__PURE__ */ jsx21(FieldRow, { field, onCommit }, field.key)) });
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+function ParamForm({ fields, onCommit, disabled = false }) {
+  return /* @__PURE__ */ jsx22("fieldset", { className: "hl-form", disabled, children: fields.map((field) => /* @__PURE__ */ jsx22(FieldRow, { field, onCommit }, field.key)) });
 }
 function FieldRow({
   field,
   onCommit
 }) {
-  return /* @__PURE__ */ jsxs11("label", { className: "hl-field", children: [
-    /* @__PURE__ */ jsx21("span", { className: "hl-field-label", children: field.label }),
-    /* @__PURE__ */ jsx21(FieldControl, { field, onCommit })
+  return /* @__PURE__ */ jsxs12("label", { className: "hl-field", children: [
+    /* @__PURE__ */ jsx22("span", { className: "hl-field-label", children: field.label }),
+    /* @__PURE__ */ jsx22(FieldControl, { field, onCommit })
   ] });
 }
 function FieldControl({
@@ -1472,7 +1499,7 @@ function FieldControl({
 }) {
   switch (field.type) {
     case "toggle":
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx22(
         "button",
         {
           type: "button",
@@ -1481,17 +1508,17 @@ function FieldControl({
           className: `hl-toggle${field.value ? " is-on" : ""}`,
           disabled: field.disabled,
           onClick: () => onCommit(field.key, !field.value),
-          children: /* @__PURE__ */ jsx21("span", { className: "hl-toggle-knob" })
+          children: /* @__PURE__ */ jsx22("span", { className: "hl-toggle-knob" })
         }
       );
     case "number":
-      return /* @__PURE__ */ jsx21(NumberControl, { field, onCommit });
+      return /* @__PURE__ */ jsx22(NumberControl, { field, onCommit });
     case "textarea":
-      return /* @__PURE__ */ jsx21(TextControl, { field, onCommit, multiline: true });
+      return /* @__PURE__ */ jsx22(TextControl, { field, onCommit, multiline: true });
     case "text":
-      return /* @__PURE__ */ jsx21(TextControl, { field, onCommit });
+      return /* @__PURE__ */ jsx22(TextControl, { field, onCommit });
     case "custom":
-      return /* @__PURE__ */ jsx21("span", { className: "hl-field-custom hl-mono", title: field.fieldType, children: describeCustom(field.value) });
+      return /* @__PURE__ */ jsx22("span", { className: "hl-field-custom hl-mono", title: field.fieldType, children: describeCustom(field.value) });
   }
 }
 function TextControl({
@@ -1513,7 +1540,7 @@ function TextControl({
     onBlur: commit
   };
   if (multiline) {
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(
       "textarea",
       {
         ...shared,
@@ -1522,7 +1549,7 @@ function TextControl({
       }
     );
   }
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "input",
     {
       ...shared,
@@ -1547,7 +1574,7 @@ function NumberControl({
       onCommit(field.key, parsed);
     }
   };
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "input",
     {
       className: "hl-input hl-mono",
@@ -1579,9 +1606,10 @@ function describeCustom(value) {
 }
 
 // src/panels/ConnectionInspector.tsx
-import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 function ConnectionInspector({ core, edgeId }) {
   const { edge, setBounds } = useEdgeBounds(core, edgeId);
+  const readOnly = useReadOnly(core);
   if (edge === void 0) {
     return null;
   }
@@ -1589,25 +1617,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__ */ jsxs12("div", { className: "hl-inspector", children: [
-    /* @__PURE__ */ jsxs12("header", { className: "hl-inspector-head", children: [
-      /* @__PURE__ */ jsx22("span", { className: "hl-inspector-kind hl-connection", children: "\u2192" }),
-      /* @__PURE__ */ jsxs12("div", { className: "hl-inspector-titles", children: [
-        /* @__PURE__ */ jsx22("span", { className: "hl-inspector-name", children: "Connection" }),
-        /* @__PURE__ */ jsxs12("span", { className: "hl-inspector-role hl-mono", children: [
+  return /* @__PURE__ */ jsxs13("div", { className: "hl-inspector", children: [
+    /* @__PURE__ */ jsxs13("header", { className: "hl-inspector-head", children: [
+      /* @__PURE__ */ jsx23("span", { className: "hl-inspector-kind hl-connection", children: "\u2192" }),
+      /* @__PURE__ */ jsxs13("div", { className: "hl-inspector-titles", children: [
+        /* @__PURE__ */ jsx23("span", { className: "hl-inspector-name", children: "Connection" }),
+        /* @__PURE__ */ jsxs13("span", { className: "hl-inspector-role hl-mono", children: [
           end(edge.source),
           " \u2192 ",
           end(edge.target)
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs12("section", { className: "hl-inspector-section", children: [
-      /* @__PURE__ */ jsx22("h3", { className: "hl-inspector-section-title", children: "Back-pressure" }),
-      /* @__PURE__ */ jsx22("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__ */ jsx22(
+    /* @__PURE__ */ jsxs13("section", { className: "hl-inspector-section", children: [
+      /* @__PURE__ */ jsx23("h3", { className: "hl-inspector-section-title", children: "Back-pressure" }),
+      /* @__PURE__ */ jsx23("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__ */ jsx23(
         ParamForm,
         {
           fields: boundsFields(edge),
+          disabled: readOnly,
           onCommit: (key, value) => {
             setBounds(nextBounds(edge, key, value));
           }
@@ -1733,10 +1762,10 @@ function previewValue(value, maxLength = PREVIEW_LENGTH) {
 
 // src/live/RunTraceContext.tsx
 import { createContext as createContext3, useContext as useContext3, useSyncExternalStore as useSyncExternalStore4 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var RunTraceContext = createContext3(null);
 function RunTraceProvider({ trace, children }) {
-  return /* @__PURE__ */ jsx23(RunTraceContext.Provider, { value: trace, children });
+  return /* @__PURE__ */ jsx24(RunTraceContext.Provider, { value: trace, children });
 }
 function useRunTraceStore() {
   return useContext3(RunTraceContext);
@@ -1750,7 +1779,7 @@ function useRunTraceVersion(trace) {
 }
 
 // src/panels/NodeRunStats.tsx
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 function NodeRunStats({ nodeId }) {
   const trace = useRunTraceStore();
   useRunTraceVersion(trace);
@@ -1758,105 +1787,107 @@ function NodeRunStats({ nodeId }) {
     return null;
   }
   const stats = trace.statsOf(nodeId);
-  return /* @__PURE__ */ jsxs13("section", { className: "hl-inspector-section", children: [
-    /* @__PURE__ */ jsx24("h3", { className: "hl-inspector-section-title", children: "Run" }),
-    stats === void 0 ? /* @__PURE__ */ jsx24("p", { className: "hl-inspector-hint hl-runstats-hint", children: "No activity in this run." }) : /* @__PURE__ */ jsxs13("dl", { className: "hl-runstats", children: [
-      /* @__PURE__ */ jsxs13("div", { className: "hl-runstats-cell", children: [
-        /* @__PURE__ */ jsx24("dt", { children: "In" }),
-        /* @__PURE__ */ jsx24("dd", { className: "hl-mono", children: stats.received })
+  return /* @__PURE__ */ jsxs14("section", { className: "hl-inspector-section", children: [
+    /* @__PURE__ */ jsx25("h3", { className: "hl-inspector-section-title", children: "Run" }),
+    stats === void 0 ? /* @__PURE__ */ jsx25("p", { className: "hl-inspector-hint hl-runstats-hint", children: "No activity in this run." }) : /* @__PURE__ */ jsxs14("dl", { className: "hl-runstats", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "hl-runstats-cell", children: [
+        /* @__PURE__ */ jsx25("dt", { children: "In" }),
+        /* @__PURE__ */ jsx25("dd", { className: "hl-mono", children: stats.received })
       ] }),
-      /* @__PURE__ */ jsxs13("div", { className: "hl-runstats-cell", children: [
-        /* @__PURE__ */ jsx24("dt", { children: "Out" }),
-        /* @__PURE__ */ jsx24("dd", { className: "hl-mono", children: stats.sent })
+      /* @__PURE__ */ jsxs14("div", { className: "hl-runstats-cell", children: [
+        /* @__PURE__ */ jsx25("dt", { children: "Out" }),
+        /* @__PURE__ */ jsx25("dd", { className: "hl-mono", children: stats.sent })
       ] }),
-      /* @__PURE__ */ jsxs13("div", { className: `hl-runstats-cell${stats.errors > 0 ? " is-error" : ""}`, children: [
-        /* @__PURE__ */ jsx24("dt", { children: "Errors" }),
-        /* @__PURE__ */ jsx24("dd", { className: "hl-mono", children: stats.errors })
+      /* @__PURE__ */ jsxs14("div", { className: `hl-runstats-cell${stats.errors > 0 ? " is-error" : ""}`, children: [
+        /* @__PURE__ */ jsx25("dt", { children: "Errors" }),
+        /* @__PURE__ */ jsx25("dd", { className: "hl-mono", children: stats.errors })
       ] }),
-      /* @__PURE__ */ jsxs13("div", { className: "hl-runstats-cell", children: [
-        /* @__PURE__ */ jsx24("dt", { children: "Avg" }),
-        /* @__PURE__ */ jsx24("dd", { className: "hl-mono", children: stats.received === 0 ? "\u2014" : formatDuration(stats.totalMs / stats.received) })
+      /* @__PURE__ */ jsxs14("div", { className: "hl-runstats-cell", children: [
+        /* @__PURE__ */ jsx25("dt", { children: "Avg" }),
+        /* @__PURE__ */ jsx25("dd", { className: "hl-mono", children: stats.received === 0 ? "\u2014" : formatDuration(stats.totalMs / stats.received) })
       ] }),
-      /* @__PURE__ */ jsxs13("div", { className: "hl-runstats-cell", children: [
-        /* @__PURE__ */ jsx24("dt", { children: "Max" }),
-        /* @__PURE__ */ jsx24("dd", { className: "hl-mono", children: stats.received === 0 ? "\u2014" : formatDuration(stats.maxMs) })
+      /* @__PURE__ */ jsxs14("div", { className: "hl-runstats-cell", children: [
+        /* @__PURE__ */ jsx25("dt", { children: "Max" }),
+        /* @__PURE__ */ jsx25("dd", { className: "hl-mono", children: stats.received === 0 ? "\u2014" : formatDuration(stats.maxMs) })
       ] }),
-      stats.dropped > 0 && /* @__PURE__ */ jsxs13("div", { className: "hl-runstats-cell is-warning", children: [
-        /* @__PURE__ */ jsx24("dt", { children: "Dropped" }),
-        /* @__PURE__ */ jsx24("dd", { className: "hl-mono", children: stats.dropped })
+      stats.dropped > 0 && /* @__PURE__ */ jsxs14("div", { className: "hl-runstats-cell is-warning", children: [
+        /* @__PURE__ */ jsx25("dt", { children: "Dropped" }),
+        /* @__PURE__ */ jsx25("dd", { className: "hl-mono", children: stats.dropped })
       ] }),
-      stats.finished && /* @__PURE__ */ jsxs13("div", { className: "hl-runstats-cell is-done", children: [
-        /* @__PURE__ */ jsx24("dt", { children: "State" }),
-        /* @__PURE__ */ jsx24("dd", { children: "Finished" })
+      stats.finished && /* @__PURE__ */ jsxs14("div", { className: "hl-runstats-cell is-done", children: [
+        /* @__PURE__ */ jsx25("dt", { children: "State" }),
+        /* @__PURE__ */ jsx25("dd", { children: "Finished" })
       ] }),
-      stats.received > 0 && /* @__PURE__ */ jsxs13("div", { className: "hl-runstats-cell is-wide", children: [
-        /* @__PURE__ */ jsx24("dt", { children: "Last in" }),
-        /* @__PURE__ */ jsx24("dd", { className: "hl-mono", children: previewValue(stats.lastReceived) })
+      stats.received > 0 && /* @__PURE__ */ jsxs14("div", { className: "hl-runstats-cell is-wide", children: [
+        /* @__PURE__ */ jsx25("dt", { children: "Last in" }),
+        /* @__PURE__ */ jsx25("dd", { className: "hl-mono", children: previewValue(stats.lastReceived) })
       ] }),
-      stats.sent > 0 && /* @__PURE__ */ jsxs13("div", { className: "hl-runstats-cell is-wide", children: [
-        /* @__PURE__ */ jsx24("dt", { children: "Last out" }),
-        /* @__PURE__ */ jsx24("dd", { className: "hl-mono", children: previewValue(stats.lastSent) })
+      stats.sent > 0 && /* @__PURE__ */ jsxs14("div", { className: "hl-runstats-cell is-wide", children: [
+        /* @__PURE__ */ jsx25("dt", { children: "Last out" }),
+        /* @__PURE__ */ jsx25("dd", { className: "hl-mono", children: previewValue(stats.lastSent) })
       ] })
     ] })
   ] });
 }
 
 // src/panels/InspectorPanel.tsx
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 function InspectorPanel({ core, emptyState }) {
   const selection = useSelection(core);
+  const readOnly = useReadOnly2(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__ */ jsx25(ConnectionInspector, { core, edgeId: singleEdgeId });
+    return /* @__PURE__ */ jsx26(ConnectionInspector, { core, edgeId: singleEdgeId });
   }
   if (node === void 0) {
-    return /* @__PURE__ */ jsx25("div", { className: "hl-inspector hl-inspector-empty", children: emptyState != null ? emptyState : /* @__PURE__ */ jsxs14("div", { className: "hl-inspector-blank", children: [
-      /* @__PURE__ */ jsx25("span", { className: "hl-inspector-blank-badge", "aria-hidden": true }),
-      /* @__PURE__ */ jsx25("p", { className: "hl-inspector-blank-title", children: selectedNodes2.length > 1 ? `${String(selectedNodes2.length)} nodes selected` : "Nothing selected" }),
-      /* @__PURE__ */ jsx25("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__ */ jsx26("div", { className: "hl-inspector hl-inspector-empty", children: emptyState != null ? emptyState : /* @__PURE__ */ jsxs15("div", { className: "hl-inspector-blank", children: [
+      /* @__PURE__ */ jsx26("span", { className: "hl-inspector-blank-badge", "aria-hidden": true }),
+      /* @__PURE__ */ jsx26("p", { className: "hl-inspector-blank-title", children: selectedNodes2.length > 1 ? `${String(selectedNodes2.length)} nodes selected` : "Nothing selected" }),
+      /* @__PURE__ */ jsx26("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__ */ jsxs14("div", { className: "hl-inspector", children: [
-    /* @__PURE__ */ jsx25("div", { className: `hl-inspector-preview hl-${node.kind.toLowerCase()}`, children: imageUrl !== void 0 ? /* @__PURE__ */ jsx25("img", { className: "hl-inspector-preview-img", src: imageUrl, alt: node.name }) : /* @__PURE__ */ jsx25("span", { className: "hl-inspector-preview-badge hl-mono", children: node.kind }) }),
-    /* @__PURE__ */ jsxs14("header", { className: "hl-inspector-head", children: [
-      /* @__PURE__ */ jsx25("span", { className: `hl-inspector-kind hl-${node.kind.toLowerCase()}`, children: node.kind }),
-      /* @__PURE__ */ jsxs14("div", { className: "hl-inspector-titles", children: [
-        /* @__PURE__ */ jsx25("span", { className: "hl-inspector-name", children: node.name }),
-        /* @__PURE__ */ jsxs14("span", { className: "hl-inspector-role hl-mono", children: [
+  return /* @__PURE__ */ jsxs15("div", { className: "hl-inspector", children: [
+    /* @__PURE__ */ jsx26("div", { className: `hl-inspector-preview hl-${node.kind.toLowerCase()}`, children: imageUrl !== void 0 ? /* @__PURE__ */ jsx26("img", { className: "hl-inspector-preview-img", src: imageUrl, alt: node.name }) : /* @__PURE__ */ jsx26("span", { className: "hl-inspector-preview-badge hl-mono", children: node.kind }) }),
+    /* @__PURE__ */ jsxs15("header", { className: "hl-inspector-head", children: [
+      /* @__PURE__ */ jsx26("span", { className: `hl-inspector-kind hl-${node.kind.toLowerCase()}`, children: node.kind }),
+      /* @__PURE__ */ jsxs15("div", { className: "hl-inspector-titles", children: [
+        /* @__PURE__ */ jsx26("span", { className: "hl-inspector-name", children: node.name }),
+        /* @__PURE__ */ jsxs15("span", { className: "hl-inspector-role hl-mono", children: [
           node.code,
           " \xB7 ",
           KIND_ROLE[node.kind]
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs14("section", { className: "hl-inspector-section", children: [
-      /* @__PURE__ */ jsx25("h3", { className: "hl-inspector-section-title", children: "Parameters" }),
-      fields.length === 0 ? /* @__PURE__ */ jsx25("p", { className: "hl-inspector-hint", children: "This node has no parameters." }) : /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsxs15("section", { className: "hl-inspector-section", children: [
+      /* @__PURE__ */ jsx26("h3", { className: "hl-inspector-section-title", children: "Parameters" }),
+      fields.length === 0 ? /* @__PURE__ */ jsx26("p", { className: "hl-inspector-hint", children: "This node has no parameters." }) : /* @__PURE__ */ jsx26(
         ParamForm,
         {
           fields,
+          disabled: readOnly,
           onCommit: (key, value) => params.setParam(key, value)
         }
       )
     ] }),
-    /* @__PURE__ */ jsx25(NodeRunStats, { nodeId: node.id }),
-    /* @__PURE__ */ jsxs14("section", { className: "hl-inspector-section", children: [
-      /* @__PURE__ */ jsx25("h3", { className: "hl-inspector-section-title", children: "Ports" }),
-      /* @__PURE__ */ jsx25("ul", { className: "hl-inspector-ports", children: node.ports.map((port) => /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsx26(NodeRunStats, { nodeId: node.id }),
+    /* @__PURE__ */ jsxs15("section", { className: "hl-inspector-section", children: [
+      /* @__PURE__ */ jsx26("h3", { className: "hl-inspector-section-title", children: "Ports" }),
+      /* @__PURE__ */ jsx26("ul", { className: "hl-inspector-ports", children: node.ports.map((port) => /* @__PURE__ */ jsxs15(
         "li",
         {
           className: `hl-inspector-port${port.isError ? " is-error" : ""}`,
           children: [
-            /* @__PURE__ */ jsx25("span", { className: `hl-port-dot hl-dir-${port.direction.toLowerCase()}` }),
-            /* @__PURE__ */ jsx25("span", { className: "hl-mono", children: port.name }),
-            /* @__PURE__ */ jsx25("span", { className: "hl-inspector-port-dir hl-mono", children: port.direction })
+            /* @__PURE__ */ jsx26("span", { className: `hl-port-dot hl-dir-${port.direction.toLowerCase()}` }),
+            /* @__PURE__ */ jsx26("span", { className: "hl-mono", children: port.name }),
+            /* @__PURE__ */ jsx26("span", { className: "hl-inspector-port-dir hl-mono", children: port.direction })
           ]
         },
         port.id
@@ -1869,7 +1900,7 @@ function InspectorPanel({ core, emptyState }) {
 import { useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo4, useState as useState4 } from "react";
 import { GraphTopology } from "@hlang-tech/editor-core";
 import { useSelection as useSelection2, useViewState, useDiagnostics } from "@hlang-tech/editor-react";
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 function useTopologyComponents(core) {
   const [tick, setTick] = useState4(0);
   const bump = useCallback5(() => setTick((t) => t + 1), []);
@@ -1922,80 +1953,80 @@ function OutlineTree({ core, onFocus }) {
     [selection, onFocus]
   );
   if (components.length === 0) {
-    return /* @__PURE__ */ jsx26("p", { className: "hl-outline-empty hl-mono", children: "no layers yet" });
+    return /* @__PURE__ */ jsx27("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__ */ jsx26("div", { className: "hl-outline", role: "tree", "aria-label": "Outline", children: groups.map((group, gi) => {
+  return /* @__PURE__ */ jsx27("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__ */ jsxs15("div", { className: "hl-outline-group", role: "treeitem", "aria-expanded": open, children: [
-      /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs16("div", { className: "hl-outline-group", role: "treeitem", "aria-expanded": open, children: [
+      /* @__PURE__ */ jsxs16(
         "button",
         {
           className: "hl-outline-grouphead",
           onClick: () => toggleGroup(group.id),
           children: [
-            /* @__PURE__ */ jsx26("span", { className: "hl-outline-caret" + (open ? " is-open" : ""), "aria-hidden": true, children: "\u25B8" }),
-            /* @__PURE__ */ jsx26("span", { className: "hl-outline-groupname", children: groupName }),
-            /* @__PURE__ */ jsx26("span", { className: "hl-outline-count hl-mono", children: group.nodeIds.size })
+            /* @__PURE__ */ jsx27("span", { className: "hl-outline-caret" + (open ? " is-open" : ""), "aria-hidden": true, children: "\u25B8" }),
+            /* @__PURE__ */ jsx27("span", { className: "hl-outline-groupname", children: groupName }),
+            /* @__PURE__ */ jsx27("span", { className: "hl-outline-count hl-mono", children: group.nodeIds.size })
           ]
         }
       ),
-      open && /* @__PURE__ */ jsx26("ul", { className: "hl-outline-members", children: members.map((node) => {
+      open && /* @__PURE__ */ jsx27("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__ */ jsx26("li", { children: /* @__PURE__ */ jsxs15(
+        return /* @__PURE__ */ jsx27("li", { children: /* @__PURE__ */ jsxs16(
           "div",
           {
             className: "hl-outline-row" + (active ? " is-active" : "") + (isHidden ? " is-hidden" : "") + (isLocked ? " is-locked" : ""),
             children: [
-              /* @__PURE__ */ jsxs15("button", { className: "hl-outline-main", onClick: () => select(node.id), children: [
-                /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsxs16("button", { className: "hl-outline-main", onClick: () => select(node.id), children: [
+                /* @__PURE__ */ jsx27(
                   "span",
                   {
                     className: `hl-outline-icon hl-kind-${node.kind.toLowerCase()}`,
                     "aria-hidden": true,
-                    children: thumbnail !== void 0 ? /* @__PURE__ */ jsx26(
+                    children: thumbnail !== void 0 ? /* @__PURE__ */ jsx27(
                       "img",
                       {
                         className: "hl-outline-thumb",
                         src: thumbnail,
                         alt: ""
                       }
-                    ) : /* @__PURE__ */ jsx26(NodeIcon, { code: node.code, kind: node.kind, size: 13 })
+                    ) : /* @__PURE__ */ jsx27(NodeIcon, { code: node.code, kind: node.kind, size: 13 })
                   }
                 ),
-                /* @__PURE__ */ jsx26("span", { className: "hl-outline-name", children: node.name }),
+                /* @__PURE__ */ jsx27("span", { className: "hl-outline-name", children: node.name }),
                 (() => {
                   const diag = diagnostics.worstOf(node.id);
-                  return diag === void 0 ? null : /* @__PURE__ */ jsx26(DiagnosticBadge, { diagnostic: diag, variant: "hl-outline-diag", size: 11 });
+                  return diag === void 0 ? null : /* @__PURE__ */ jsx27(DiagnosticBadge, { diagnostic: diag, variant: "hl-outline-diag", size: 11 });
                 })(),
-                isLocked && /* @__PURE__ */ jsx26("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ jsx26(LockIcon, { size: 11 }) }),
-                isHidden && /* @__PURE__ */ jsx26("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ jsx26(EyeOffIcon, { size: 11 }) })
+                isLocked && /* @__PURE__ */ jsx27("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ jsx27(LockIcon, { size: 11 }) }),
+                isHidden && /* @__PURE__ */ jsx27("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ jsx27(EyeOffIcon, { size: 11 }) })
               ] }),
-              /* @__PURE__ */ jsxs15("span", { className: "hl-outline-controls", children: [
-                /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsxs16("span", { className: "hl-outline-controls", children: [
+                /* @__PURE__ */ jsx27(
                   "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__ */ jsx26(EyeOffIcon, {}) : /* @__PURE__ */ jsx26(EyeIcon, {})
+                    children: isHidden ? /* @__PURE__ */ jsx27(EyeOffIcon, {}) : /* @__PURE__ */ jsx27(EyeIcon, {})
                   }
                 ),
-                /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsx27(
                   "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__ */ jsx26(LockIcon, {}) : /* @__PURE__ */ jsx26(UnlockIcon, {})
+                    children: isLocked ? /* @__PURE__ */ jsx27(LockIcon, {}) : /* @__PURE__ */ jsx27(UnlockIcon, {})
                   }
                 )
               ] })
@@ -2008,21 +2039,48 @@ function OutlineTree({ core, onFocus }) {
 }
 
 // src/panels/PreviewPanel.tsx
-import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 function PreviewPanel({ imageUrl, title = "Preview", status }) {
-  return /* @__PURE__ */ jsxs16("section", { className: "hl-preview", "aria-label": "Preview", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "hl-preview-head", children: [
-      /* @__PURE__ */ jsx27("span", { className: "hl-preview-title", children: title }),
-      status !== void 0 && /* @__PURE__ */ jsx27("span", { className: "hl-preview-status hl-mono", children: status })
+  return /* @__PURE__ */ jsxs17("section", { className: "hl-preview", "aria-label": "Preview", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "hl-preview-head", children: [
+      /* @__PURE__ */ jsx28("span", { className: "hl-preview-title", children: title }),
+      status !== void 0 && /* @__PURE__ */ jsx28("span", { className: "hl-preview-status hl-mono", children: status })
     ] }),
-    /* @__PURE__ */ jsx27("div", { className: "hl-preview-frame", children: imageUrl !== void 0 && imageUrl.length > 0 ? /* @__PURE__ */ jsx27("img", { className: "hl-preview-img", src: imageUrl, alt: title, draggable: false }) : /* @__PURE__ */ jsx27("div", { className: "hl-preview-placeholder hl-mono", children: "no output yet" }) })
+    /* @__PURE__ */ jsx28("div", { className: "hl-preview-frame", children: imageUrl !== void 0 && imageUrl.length > 0 ? /* @__PURE__ */ jsx28("img", { className: "hl-preview-img", src: imageUrl, alt: title, draggable: false }) : /* @__PURE__ */ jsx28("div", { className: "hl-preview-placeholder hl-mono", children: "no output yet" }) })
   ] });
 }
 
+// src/panels/PanelHead.tsx
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+function PanelHead({ leading, meta, children }) {
+  return /* @__PURE__ */ jsxs18("header", { className: "hl-panel-head", children: [
+    leading,
+    meta === void 0 ? null : /* @__PURE__ */ jsx29("span", { className: "hl-panel-meta hl-mono", children: meta }),
+    children === void 0 ? null : /* @__PURE__ */ jsx29("span", { className: "hl-panel-actions", children })
+  ] });
+}
+function PanelAction({ icon, label, onClick, pressed, disabled = false, title }) {
+  return /* @__PURE__ */ jsxs18(
+    "button",
+    {
+      type: "button",
+      className: `hl-panel-action${pressed === true ? " is-on" : ""}`,
+      "aria-pressed": pressed,
+      disabled,
+      title: title != null ? title : label,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx29("span", { className: "hl-panel-action-icon", "aria-hidden": true, children: icon }),
+        /* @__PURE__ */ jsx29("span", { className: "hl-panel-action-label", children: label })
+      ]
+    }
+  );
+}
+
 // src/panels/RailTabs.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function RailTabs({ tabs, active, onChange }) {
-  return /* @__PURE__ */ jsx28("div", { className: "hl-railtabs", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx30("div", { className: "hl-railtabs", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsx30(
     "button",
     {
       role: "tab",
@@ -2036,20 +2094,20 @@ function RailTabs({ tabs, active, onChange }) {
 }
 
 // src/panels/AssetGrid.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function AssetGrid({ items, onSelect, emptyHint = "No assets yet" }) {
   if (items.length === 0) {
-    return /* @__PURE__ */ jsx29("p", { className: "hl-assetgrid-empty hl-mono", children: emptyHint });
+    return /* @__PURE__ */ jsx31("p", { className: "hl-assetgrid-empty hl-mono", children: emptyHint });
   }
-  return /* @__PURE__ */ jsx29("div", { className: "hl-assetgrid", children: items.map((item) => {
+  return /* @__PURE__ */ jsx31("div", { className: "hl-assetgrid", children: items.map((item) => {
     var _a;
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx31(
       "button",
       {
         className: "hl-assetgrid-cell",
         onClick: () => onSelect == null ? void 0 : onSelect(item.id),
         title: item.label,
-        children: /* @__PURE__ */ jsx29("img", { className: "hl-assetgrid-img", src: item.url, alt: (_a = item.label) != null ? _a : "", loading: "lazy" })
+        children: /* @__PURE__ */ jsx31("img", { className: "hl-assetgrid-img", src: item.url, alt: (_a = item.label) != null ? _a : "", loading: "lazy" })
       },
       item.id
     );
@@ -2059,8 +2117,8 @@ function AssetGrid({ items, onSelect, emptyHint = "No assets yet" }) {
 // src/panels/PositionPanel.tsx
 import { useCallback as useCallback6, useEffect as useEffect4, useReducer } from "react";
 import { MoveNodeCommand } from "@hlang-tech/editor-core";
-import { useSelection as useSelection3 } from "@hlang-tech/editor-react";
-import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useReadOnly as useReadOnly3, useSelection as useSelection3 } from "@hlang-tech/editor-react";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 function selectedNodes(core) {
   const ids = core.selection.getSelectedNodes();
   const out = [];
@@ -2075,6 +2133,7 @@ function selectedNodes(core) {
 function PositionPanel({ core, livePosition }) {
   var _a;
   useSelection3(core);
+  const readOnly = useReadOnly3(core);
   const [, bump] = useReducer((n) => n + 1, 0);
   useEffect4(() => {
     const kinds = ["nodeChanged", "nodeAdded", "nodeRemoved"];
@@ -2145,7 +2204,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" },
@@ -2154,9 +2213,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__ */ jsxs17("section", { className: "hl-position", children: [
-    /* @__PURE__ */ jsx30("h3", { className: "hl-position-title hl-mono", children: "Position" }),
-    /* @__PURE__ */ jsx30("div", { className: "hl-position-align", role: "group", "aria-label": "Align", children: alignButtons.map((b) => /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs19("section", { className: "hl-position", children: [
+    /* @__PURE__ */ jsx32("h3", { className: "hl-position-title hl-mono", children: "Position" }),
+    /* @__PURE__ */ jsx32("div", { className: "hl-position-align", role: "group", "aria-label": "Align", children: alignButtons.map((b) => /* @__PURE__ */ jsx32(
       "button",
       {
         className: "hl-position-alignbtn",
@@ -2164,38 +2223,38 @@ function PositionPanel({ core, livePosition }) {
         disabled,
         title: b.label,
         "aria-label": b.label,
-        children: /* @__PURE__ */ jsx30("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__ */ jsx30("path", { d: b.d }) })
+        children: /* @__PURE__ */ jsx32("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__ */ jsx32("path", { d: b.d }) })
       },
       b.kind
     )) }),
-    /* @__PURE__ */ jsxs17("div", { className: "hl-position-coords", children: [
-      /* @__PURE__ */ jsxs17("label", { className: "hl-position-field", children: [
-        /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsxs19("div", { className: "hl-position-coords", children: [
+      /* @__PURE__ */ jsxs19("label", { className: "hl-position-field", children: [
+        /* @__PURE__ */ jsx32(
           "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__ */ jsx30("span", { className: "hl-position-axis hl-mono", children: "X" })
+        /* @__PURE__ */ jsx32("span", { className: "hl-position-axis hl-mono", children: "X" })
       ] }),
-      /* @__PURE__ */ jsxs17("label", { className: "hl-position-field", children: [
-        /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsxs19("label", { className: "hl-position-field", children: [
+        /* @__PURE__ */ jsx32(
           "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__ */ jsx30("span", { className: "hl-position-axis hl-mono", children: "Y" })
+        /* @__PURE__ */ jsx32("span", { className: "hl-position-axis hl-mono", children: "Y" })
       ] })
     ] })
   ] });
@@ -2203,7 +2262,7 @@ function PositionPanel({ core, livePosition }) {
 
 // src/command-palette/NodeSearch.tsx
 import { useCallback as useCallback7, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef5, useState as useState5 } from "react";
-import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 var PANEL_WIDTH = 320;
 var PANEL_MAX_HEIGHT = 360;
 function NodeSearch({ controller }) {
@@ -2263,8 +2322,8 @@ function NodeSearch({ controller }) {
   }
   const style = clampToViewport(state.screen.x, state.screen.y);
   const connectMode = state.pending !== void 0;
-  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs20(Fragment5, { children: [
+    /* @__PURE__ */ jsx33(
       "div",
       {
         className: "hl-node-search-scrim",
@@ -2273,10 +2332,10 @@ function NodeSearch({ controller }) {
         }
       }
     ),
-    /* @__PURE__ */ jsxs18("div", { className: "hl-node-search", style, role: "dialog", "aria-label": "Create node", children: [
-      /* @__PURE__ */ jsxs18("div", { className: "hl-node-search-field", children: [
-        /* @__PURE__ */ jsx31("span", { className: "hl-node-search-glyph", "aria-hidden": true, children: connectMode ? "\u2933" : "\uFF0B" }),
-        /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsxs20("div", { className: "hl-node-search", style, role: "dialog", "aria-label": "Create node", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "hl-node-search-field", children: [
+        /* @__PURE__ */ jsx33("span", { className: "hl-node-search-glyph", "aria-hidden": true, children: connectMode ? "\u2933" : "\uFF0B" }),
+        /* @__PURE__ */ jsx33(
           "input",
           {
             ref: inputRef,
@@ -2294,12 +2353,12 @@ function NodeSearch({ controller }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs18("ul", { className: "hl-node-search-list", role: "listbox", children: [
-        results.length === 0 && /* @__PURE__ */ jsx31("li", { className: "hl-node-search-empty hl-mono", children: "no matching nodes" }),
+      /* @__PURE__ */ jsxs20("ul", { className: "hl-node-search-list", role: "listbox", children: [
+        results.length === 0 && /* @__PURE__ */ jsx33("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__ */ jsxs18(
+          return /* @__PURE__ */ jsxs20(
             "li",
             {
               role: "option",
@@ -2311,15 +2370,15 @@ function NodeSearch({ controller }) {
                 choose(view);
               },
               children: [
-                /* @__PURE__ */ jsx31(
+                /* @__PURE__ */ jsx33(
                   "span",
                   {
                     className: `hl-node-search-kind hl-mono hl-kind-${kind.toLowerCase()}`,
                     children: kind
                   }
                 ),
-                /* @__PURE__ */ jsx31("span", { className: "hl-node-search-label", children: highlight(descriptor.displayName, view.result.match) }),
-                view.connectPortId !== void 0 && /* @__PURE__ */ jsx31("span", { className: "hl-node-search-port hl-mono", children: view.connectPortId })
+                /* @__PURE__ */ jsx33("span", { className: "hl-node-search-label", children: highlight(descriptor.displayName, view.result.match) }),
+                view.connectPortId !== void 0 && /* @__PURE__ */ jsx33("span", { className: "hl-node-search-port hl-mono", children: view.connectPortId })
               ]
             },
             descriptor.code
@@ -2333,7 +2392,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__ */ jsx31("mark", { className: "hl-node-search-hit", children: ch }, i) : /* @__PURE__ */ jsx31("span", { children: ch }, i)
+    (ch, i) => hit.has(i) ? /* @__PURE__ */ jsx33("mark", { className: "hl-node-search-hit", children: ch }, i) : /* @__PURE__ */ jsx33("span", { children: ch }, i)
   );
 }
 function clampToViewport(x, y) {
@@ -2513,7 +2572,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) {
@@ -2544,6 +2603,9 @@ function useNodeSearchTriggers(core, search, options = {}) {
   );
   const onPaneClick = useCallback9(
     (event) => {
+      if (core.mode.readOnly) {
+        return;
+      }
       const t = now();
       const isDouble = t - lastPaneClickRef.current <= doubleClickMs;
       lastPaneClickRef.current = t;
@@ -2554,7 +2616,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 };
 }
@@ -2657,7 +2719,7 @@ function useEditorHotkeys(core, options = {}) {
 
 // src/context-menu/NodeContextMenu.tsx
 import { useCallback as useCallback10, useEffect as useEffect7, useMemo as useMemo7, useRef as useRef7, useState as useState7 } from "react";
-import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
 var PANEL_WIDTH2 = 208;
 var ITEM_HEIGHT = 34;
 var VIEWPORT_MARGIN = 8;
@@ -2735,8 +2797,8 @@ function NodeContextMenu({ controller, items }) {
     return null;
   }
   const style = clampToViewport2(state.screen.x, state.screen.y, rows.length);
-  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs21(Fragment6, { children: [
+    /* @__PURE__ */ jsx34(
       "div",
       {
         className: "hl-ctx-scrim",
@@ -2749,7 +2811,7 @@ function NodeContextMenu({ controller, items }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx34(
       "div",
       {
         ref: menuRef,
@@ -2759,7 +2821,7 @@ function NodeContextMenu({ controller, items }) {
         "aria-label": "Node actions",
         tabIndex: -1,
         onKeyDown,
-        children: rows.map((item, index) => /* @__PURE__ */ jsxs19(
+        children: rows.map((item, index) => /* @__PURE__ */ jsxs21(
           "button",
           {
             type: "button",
@@ -2772,9 +2834,9 @@ function NodeContextMenu({ controller, items }) {
               choose(item);
             },
             children: [
-              /* @__PURE__ */ jsx32("span", { className: "hl-ctx-item-icon", "aria-hidden": true, children: item.icon }),
-              /* @__PURE__ */ jsx32("span", { className: "hl-ctx-item-label", children: item.label }),
-              item.shortcut !== void 0 && /* @__PURE__ */ jsx32("span", { className: "hl-ctx-item-key hl-mono", children: item.shortcut })
+              /* @__PURE__ */ jsx34("span", { className: "hl-ctx-item-icon", "aria-hidden": true, children: item.icon }),
+              /* @__PURE__ */ jsx34("span", { className: "hl-ctx-item-label", children: item.label }),
+              item.shortcut !== void 0 && /* @__PURE__ */ jsx34("span", { className: "hl-ctx-item-key hl-mono", children: item.shortcut })
             ]
           },
           item.id
@@ -2808,7 +2870,7 @@ function useNodeContextMenu() {
 
 // src/overlays/Cheatsheet.tsx
 import { useEffect as useEffect8, useRef as useRef8 } from "react";
-import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 var DEFAULT_GROUPS = [
   {
     title: "Edit",
@@ -2862,9 +2924,9 @@ function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ jsxs20(Fragment6, { children: [
-    /* @__PURE__ */ jsx33("div", { className: "hl-cheat-scrim", onPointerDown: onClose }),
-    /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs22(Fragment7, { children: [
+    /* @__PURE__ */ jsx35("div", { className: "hl-cheat-scrim", onPointerDown: onClose }),
+    /* @__PURE__ */ jsxs22(
       "div",
       {
         ref: dialogRef,
@@ -2874,18 +2936,18 @@ function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
         "aria-label": "Keyboard shortcuts",
         tabIndex: -1,
         children: [
-          /* @__PURE__ */ jsxs20("div", { className: "hl-cheat-head", children: [
-            /* @__PURE__ */ jsx33("span", { className: "hl-cheat-title", children: "Shortcuts" }),
-            /* @__PURE__ */ jsx33("button", { className: "hl-cheat-close", onClick: onClose, "aria-label": "Close", children: "\u2715" })
+          /* @__PURE__ */ jsxs22("div", { className: "hl-cheat-head", children: [
+            /* @__PURE__ */ jsx35("span", { className: "hl-cheat-title", children: "Shortcuts" }),
+            /* @__PURE__ */ jsx35("button", { className: "hl-cheat-close", onClick: onClose, "aria-label": "Close", children: "\u2715" })
           ] }),
-          /* @__PURE__ */ jsx33("div", { className: "hl-cheat-grid", children: groups.map((group) => /* @__PURE__ */ jsxs20("section", { className: "hl-cheat-group", children: [
-            /* @__PURE__ */ jsx33("h3", { className: "hl-cheat-group-title hl-mono", children: group.title }),
-            /* @__PURE__ */ jsx33("ul", { className: "hl-cheat-rows", children: group.rows.map((row) => (
+          /* @__PURE__ */ jsx35("div", { className: "hl-cheat-grid", children: groups.map((group) => /* @__PURE__ */ jsxs22("section", { className: "hl-cheat-group", children: [
+            /* @__PURE__ */ jsx35("h3", { className: "hl-cheat-group-title hl-mono", children: group.title }),
+            /* @__PURE__ */ jsx35("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__ */ jsxs20("li", { className: "hl-cheat-row", children: [
-                /* @__PURE__ */ jsx33("span", { className: "hl-cheat-label", children: row.label }),
-                /* @__PURE__ */ jsx33("kbd", { className: "hl-cheat-keys hl-mono", children: row.keys })
+              /* @__PURE__ */ jsxs22("li", { className: "hl-cheat-row", children: [
+                /* @__PURE__ */ jsx35("span", { className: "hl-cheat-label", children: row.label }),
+                /* @__PURE__ */ jsx35("kbd", { className: "hl-cheat-keys hl-mono", children: row.keys })
               ] }, `${row.keys}\0${row.label}`)
             )) })
           ] }, group.title)) })
@@ -2897,7 +2959,7 @@ function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
 
 // src/overlays/Toast.tsx
 import { createContext as createContext4, useCallback as useCallback12, useContext as useContext4, useMemo as useMemo9, useRef as useRef9, useState as useState9 } from "react";
-import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 var ToastCtx = createContext4({ show: () => void 0 });
 function ToastProvider({ children, duration = 2200 }) {
   const [items, setItems] = useState9([]);
@@ -2914,9 +2976,9 @@ function ToastProvider({ children, duration = 2200 }) {
     [duration]
   );
   const api = useMemo9(() => ({ show }), [show]);
-  return /* @__PURE__ */ jsxs21(ToastCtx.Provider, { value: api, children: [
+  return /* @__PURE__ */ jsxs23(ToastCtx.Provider, { value: api, children: [
     children,
-    /* @__PURE__ */ jsx34("div", { className: "hl-toast-stack", "aria-live": "polite", children: items.map((t) => /* @__PURE__ */ jsx34("div", { className: "hl-toast", children: t.message }, t.id)) })
+    /* @__PURE__ */ jsx36("div", { className: "hl-toast-stack", "aria-live": "polite", children: items.map((t) => /* @__PURE__ */ jsx36("div", { className: "hl-toast", children: t.message }, t.id)) })
   ] });
 }
 function useToast() {
@@ -3221,7 +3283,7 @@ function useFollowScroll() {
 // src/panels/RunLog.tsx
 import { useState as useState11 } from "react";
 import { useSelection as useSelection4 } from "@hlang-tech/editor-react";
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 function RunLog({ core, onSelectNode, title = "Run log", leading }) {
   const trace = useRunTraceStore();
   useRunTraceVersion(trace);
@@ -3243,55 +3305,54 @@ function RunLog({ core, onSelectNode, title = "Run log", leading }) {
     core.selection.selectNodes([nodeId], "replace");
     onSelectNode == null ? void 0 : onSelectNode(nodeId);
   };
-  return /* @__PURE__ */ jsxs22("section", { className: "hl-runlog", "aria-label": title, children: [
-    /* @__PURE__ */ jsxs22("header", { className: "hl-runlog-head", children: [
-      leading != null ? leading : /* @__PURE__ */ jsx35("span", { className: "hl-runlog-title", children: title }),
-      /* @__PURE__ */ jsxs22("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__ */ jsxs22("span", { className: "hl-runlog-actions", children: [
-        /* @__PURE__ */ jsx35(
-          "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__ */ jsx35(
-          "button",
-          {
-            type: "button",
-            className: `hl-runlog-toggle${follow ? " is-on" : ""}`,
-            "aria-pressed": follow,
-            onClick: () => {
-              setFollow(!follow);
-            },
-            children: "Follow"
-          }
-        ),
-        /* @__PURE__ */ jsx35(
-          "button",
-          {
-            type: "button",
-            className: "hl-runlog-toggle",
-            disabled: all.length === 0,
-            onClick: () => {
-              trace.clear();
-            },
-            children: "Clear"
-          }
-        )
-      ] })
-    ] }),
-    entries.length === 0 ? /* @__PURE__ */ jsx35("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__ */ jsx35("ol", { className: "hl-runlog-body hl-mono", ref: bodyRef, onScroll, children: entries.map((entry) => /* @__PURE__ */ jsx35(Row, { entry, label, onChoose: choose }, entry.seq)) })
+  return /* @__PURE__ */ jsxs24("section", { className: "hl-runlog", "aria-label": title, children: [
+    /* @__PURE__ */ jsxs24(
+      PanelHead,
+      {
+        leading: leading != null ? leading : /* @__PURE__ */ jsx37("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__ */ jsx37(
+            PanelAction,
+            {
+              icon: /* @__PURE__ */ jsx37(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__ */ jsx37(
+            PanelAction,
+            {
+              icon: /* @__PURE__ */ jsx37(FollowIcon, {}),
+              label: "Follow",
+              title: "Follow the newest event",
+              pressed: follow,
+              onClick: () => {
+                setFollow(!follow);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx37(
+            PanelAction,
+            {
+              icon: /* @__PURE__ */ jsx37(ClearIcon, {}),
+              label: "Clear",
+              title: "Clear the log",
+              disabled: all.length === 0,
+              onClick: () => {
+                trace.clear();
+              }
+            }
+          )
+        ]
+      }
+    ),
+    entries.length === 0 ? /* @__PURE__ */ jsx37("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__ */ jsx37("ol", { className: "hl-runlog-body hl-mono", ref: bodyRef, onScroll, children: entries.map((entry) => /* @__PURE__ */ jsx37(Row, { entry, label, onChoose: choose }, entry.seq)) })
   ] });
 }
 function Row({
@@ -3301,32 +3362,32 @@ function Row({
 }) {
   switch (entry.kind) {
     case "error":
-      return /* @__PURE__ */ jsxs22(Event, { className: "is-error", at: entry.at, onChoose: () => onChoose(entry.nodeId), ms: "", children: [
-        /* @__PURE__ */ jsx35(NodePort, { node: label(entry.nodeId), port: "error" }),
-        /* @__PURE__ */ jsx35("span", { className: "hl-runlog-value", children: previewValue(entry.error) })
+      return /* @__PURE__ */ jsxs24(Event, { className: "is-error", at: entry.at, onChoose: () => onChoose(entry.nodeId), ms: "", children: [
+        /* @__PURE__ */ jsx37(NodePort, { node: label(entry.nodeId), port: "error" }),
+        /* @__PURE__ */ jsx37("span", { className: "hl-runlog-value", children: previewValue(entry.error) })
       ] });
     case "ended":
-      return /* @__PURE__ */ jsxs22(Event, { className: "is-end", at: entry.at, onChoose: () => onChoose(entry.nodeId), ms: "", children: [
-        /* @__PURE__ */ jsx35(NodePort, { node: label(entry.nodeId), port: entry.portId }),
-        /* @__PURE__ */ jsx35("span", { className: "hl-runlog-value", children: "ended" })
+      return /* @__PURE__ */ jsxs24(Event, { className: "is-end", at: entry.at, onChoose: () => onChoose(entry.nodeId), ms: "", children: [
+        /* @__PURE__ */ jsx37(NodePort, { node: label(entry.nodeId), port: entry.portId }),
+        /* @__PURE__ */ jsx37("span", { className: "hl-runlog-value", children: "ended" })
       ] });
     case "finished":
-      return /* @__PURE__ */ jsxs22(Event, { className: "is-end", at: entry.at, onChoose: () => onChoose(entry.nodeId), ms: "", children: [
-        /* @__PURE__ */ jsx35(NodePort, { node: label(entry.nodeId), port: "" }),
-        /* @__PURE__ */ jsx35("span", { className: "hl-runlog-value", children: "finished" })
+      return /* @__PURE__ */ jsxs24(Event, { className: "is-end", at: entry.at, onChoose: () => onChoose(entry.nodeId), ms: "", children: [
+        /* @__PURE__ */ jsx37(NodePort, { node: label(entry.nodeId), port: "" }),
+        /* @__PURE__ */ jsx37("span", { className: "hl-runlog-value", children: "finished" })
       ] });
     case "dropped":
-      return /* @__PURE__ */ jsxs22(Event, { className: "is-dropped", at: entry.at, onChoose: () => onChoose(entry.targetNodeId), ms: "", children: [
-        /* @__PURE__ */ jsx35(Route, { entry, label }),
-        /* @__PURE__ */ jsxs22("span", { className: "hl-runlog-value", children: [
+      return /* @__PURE__ */ jsxs24(Event, { className: "is-dropped", at: entry.at, onChoose: () => onChoose(entry.targetNodeId), ms: "", children: [
+        /* @__PURE__ */ jsx37(Route, { entry, label }),
+        /* @__PURE__ */ jsxs24("span", { className: "hl-runlog-value", children: [
           "dropped ",
           previewValue(entry.message)
         ] })
       ] });
     case "delivery":
-      return /* @__PURE__ */ jsxs22(Event, { className: "", at: entry.at, onChoose: () => onChoose(entry.targetNodeId), ms: formatDuration(entry.duration), children: [
-        /* @__PURE__ */ jsx35(Route, { entry, label }),
-        /* @__PURE__ */ jsx35("span", { className: "hl-runlog-value", children: previewValue(entry.message) })
+      return /* @__PURE__ */ jsxs24(Event, { className: "", at: entry.at, onChoose: () => onChoose(entry.targetNodeId), ms: formatDuration(entry.duration), children: [
+        /* @__PURE__ */ jsx37(Route, { entry, label }),
+        /* @__PURE__ */ jsx37("span", { className: "hl-runlog-value", children: previewValue(entry.message) })
       ] });
   }
 }
@@ -3337,28 +3398,28 @@ function Event({
   onChoose,
   children
 }) {
-  return /* @__PURE__ */ jsx35("li", { className: `hl-runlog-row ${className2}`.trim(), children: /* @__PURE__ */ jsxs22("button", { type: "button", className: "hl-runlog-hit", onClick: onChoose, children: [
-    /* @__PURE__ */ jsx35("span", { className: "hl-runlog-at", children: formatElapsed(at) }),
+  return /* @__PURE__ */ jsx37("li", { className: `hl-runlog-row ${className2}`.trim(), children: /* @__PURE__ */ jsxs24("button", { type: "button", className: "hl-runlog-hit", onClick: onChoose, children: [
+    /* @__PURE__ */ jsx37("span", { className: "hl-runlog-at", children: formatElapsed(at) }),
     children,
-    /* @__PURE__ */ jsx35("span", { className: "hl-runlog-ms", children: ms })
+    /* @__PURE__ */ jsx37("span", { className: "hl-runlog-ms", children: ms })
   ] }) });
 }
 function NodePort({ node, port }) {
-  return /* @__PURE__ */ jsxs22("span", { className: "hl-runlog-route", children: [
-    /* @__PURE__ */ jsx35("span", { className: "hl-runlog-node", children: node }),
-    port === "" ? null : /* @__PURE__ */ jsx35("span", { className: "hl-runlog-port", children: port })
+  return /* @__PURE__ */ jsxs24("span", { className: "hl-runlog-route", children: [
+    /* @__PURE__ */ jsx37("span", { className: "hl-runlog-node", children: node }),
+    port === "" ? null : /* @__PURE__ */ jsx37("span", { className: "hl-runlog-port", children: port })
   ] });
 }
 function Route({
   entry,
   label
 }) {
-  return /* @__PURE__ */ jsxs22("span", { className: "hl-runlog-route", children: [
-    /* @__PURE__ */ jsx35("span", { className: "hl-runlog-node", children: label(entry.sourceNodeId) }),
-    /* @__PURE__ */ jsx35("span", { className: "hl-runlog-port", children: entry.sourcePortId }),
-    /* @__PURE__ */ jsx35("span", { className: "hl-runlog-arrow", "aria-label": "to", children: "\u2192" }),
-    /* @__PURE__ */ jsx35("span", { className: "hl-runlog-node", children: label(entry.targetNodeId) }),
-    /* @__PURE__ */ jsx35("span", { className: "hl-runlog-port", children: entry.targetPortId })
+  return /* @__PURE__ */ jsxs24("span", { className: "hl-runlog-route", children: [
+    /* @__PURE__ */ jsx37("span", { className: "hl-runlog-node", children: label(entry.sourceNodeId) }),
+    /* @__PURE__ */ jsx37("span", { className: "hl-runlog-port", children: entry.sourcePortId }),
+    /* @__PURE__ */ jsx37("span", { className: "hl-runlog-arrow", "aria-label": "to", children: "\u2192" }),
+    /* @__PURE__ */ jsx37("span", { className: "hl-runlog-node", children: label(entry.targetNodeId) }),
+    /* @__PURE__ */ jsx37("span", { className: "hl-runlog-port", children: entry.targetPortId })
   ] });
 }
 export {
@@ -3367,6 +3428,7 @@ export {
   CanvasChrome,
   CanvasDock,
   Cheatsheet,
+  ClearIcon,
   ConnectionInspector,
   DEFAULT_EDGE_CAPACITY,
   DEFAULT_MIN_CANVAS_HEIGHT,
@@ -3376,7 +3438,9 @@ export {
   EmptyState,
   FOLLOW_SLACK_PX,
   FOOTER_KEY_STEP,
+  FilterIcon,
   FlowEdge,
+  FollowIcon,
   FooterResizer,
   HlangNode,
   InspectorPanel,
@@ -3393,6 +3457,8 @@ export {
   NodeSearch,
   OutlineTree,
   PREVIEW_LENGTH,
+  PanelAction,
+  PanelHead,
   ParamForm,
   PillNodeChrome,
   PortRow,
@@ -3400,6 +3466,7 @@ export {
   PreviewPanel,
   RUN_LOG_CAPACITY,
   RailTabs,
+  ReadOnlyBadge,
   RunButton,
   RunLog,
   RunTrace,