@hlang-tech/editor-ui 0.3.0 → 0.5.0

package/lib/index.mjs

@@ -66,12 +66,12 @@ function createTheme(overrides) {
 import { jsx } from "react/jsx-runtime";
 function EditorUIThemeProvider({
   theme,
-  className,
+  className: className2,
   style,
   children
 }) {
   const themeStyle = theme ? createTheme(theme) : void 0;
-  return /* @__PURE__ */ jsx("div", { className, style: { ...themeStyle, ...style }, children });
+  return /* @__PURE__ */ jsx("div", { className: className2, style: { ...themeStyle, ...style }, children });
 }
 
 // src/nodes/SignalBar.tsx
@@ -121,7 +121,10 @@ var ACTIVE_WINDOW_MS = 700;
 function portKey(nodeId, portId) {
   return `${nodeId}@${portId}`;
 }
-var defaultDeps = {
+function connectionKey(sourceNodeId, sourcePortId, targetNodeId, targetPortId) {
+  return `${portKey(sourceNodeId, sourcePortId)}->${portKey(targetNodeId, targetPortId)}`;
+}
+var defaultLiveDeps = {
   now: () => typeof performance !== "undefined" ? performance.now() : Date.now(),
   schedule: (cb) => typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame(cb) : (
     // `window.setTimeout` returns a numeric handle (the DOM overload),
@@ -132,11 +135,13 @@ var defaultDeps = {
   cancel: (h) => typeof cancelAnimationFrame !== "undefined" ? cancelAnimationFrame(h) : window.clearTimeout(h)
 };
 var LiveSignalStore = class {
-  constructor(deps = defaultDeps) {
+  constructor(deps = defaultLiveDeps) {
     /** nodeId -> last-active timestamp. */
     this.nodeActiveAt = /* @__PURE__ */ new Map();
     /** nodeId set that errored during this run. */
     this.erroredNodes = /* @__PURE__ */ new Set();
+    /** nodeId set that finished during this run (RFC 0001). */
+    this.finishedNodes = /* @__PURE__ */ new Set();
     /** edgeId -> last-flowing timestamp. */
     this.edgeFlowAt = /* @__PURE__ */ new Map();
     /** Per-id listeners. */
@@ -147,12 +152,21 @@ var LiveSignalStore = class {
     this.lastEdgeFlowing = /* @__PURE__ */ new Map();
     /** Edges sourced by a given (nodeId@portId), for pulse -> edge mapping. */
     this.edgesBySourcePort = /* @__PURE__ */ new Map();
+    /** Edges by the connection they carry (source port -> target port). */
+    this.edgesByConnection = /* @__PURE__ */ new Map();
+    /** How many messages each node has handled or sent, and each edge carried, this run. */
+    this.nodePulse = /* @__PURE__ */ new Map();
+    this.edgePulse = /* @__PURE__ */ new Map();
+    /** The pulse counts last notified, so a new message notifies even while the state stays active. */
+    this.lastNodePulse = /* @__PURE__ */ new Map();
+    this.lastEdgePulse = /* @__PURE__ */ new Map();
     this.rafHandle = null;
     this.running = false;
     this.deps = deps;
   }
   /** Provide the current edge index (call whenever edges change). */
   setEdgeIndex(edges) {
+    var _a;
     const next = /* @__PURE__ */ new Map();
     for (const edge of edges) {
       const key = portKey(edge.sourceNodeId, edge.sourcePortId);
@@ -164,6 +178,44 @@ var LiveSignalStore = class {
       }
     }
     this.edgesBySourcePort = next;
+    const byConnection = /* @__PURE__ */ new Map();
+    for (const edge of edges) {
+      if (edge.targetNodeId !== void 0 && edge.targetPortId !== void 0) {
+        const key = connectionKey(edge.sourceNodeId, edge.sourcePortId, edge.targetNodeId, edge.targetPortId);
+        byConnection.set(key, [...(_a = byConnection.get(key)) != null ? _a : [], edge]);
+      }
+    }
+    this.edgesByConnection = byConnection;
+  }
+  /**
+   * Record a message delivered on a connection, when it happens: its source
+   * and its target each pulse once (each ran), and so does the edge that
+   * carried it, and only that edge. Subscribers are notified on the next
+   * frame, once however many messages arrived in it.
+   */
+  markDelivery(signal) {
+    var _a;
+    const t = this.deps.now();
+    for (const nodeId of [signal.sourceNodeId, signal.targetNodeId]) {
+      this.nodeActiveAt.set(nodeId, t);
+      this.nodePulse.set(nodeId, this.getNodePulse(nodeId) + 1);
+    }
+    const key = connectionKey(signal.sourceNodeId, signal.sourcePortId, signal.targetNodeId, signal.targetPortId);
+    for (const edge of (_a = this.edgesByConnection.get(key)) != null ? _a : []) {
+      this.edgeFlowAt.set(edge.id, t);
+      this.edgePulse.set(edge.id, this.getEdgePulse(edge.id) + 1);
+    }
+    this.ensureLoop();
+  }
+  /** How many messages a node has handled or sent this run; it changes each time the node runs. */
+  getNodePulse(nodeId) {
+    var _a;
+    return (_a = this.nodePulse.get(nodeId)) != null ? _a : 0;
+  }
+  /** How many messages an edge has carried this run. */
+  getEdgePulse(edgeId) {
+    var _a;
+    return (_a = this.edgePulse.get(edgeId)) != null ? _a : 0;
   }
   /** Record a node emitting on an output port (drives node + edge activity). */
   markActivity(nodeId, portId) {
@@ -177,6 +229,11 @@ var LiveSignalStore = class {
     }
     this.ensureLoop();
   }
+  /** Record a node finishing (RFC 0001): shown once its last flash has faded. */
+  markFinished(nodeId) {
+    this.finishedNodes.add(nodeId);
+    this.ensureLoop();
+  }
   /** Record a node erroring (sticky for the run). */
   markError(nodeId) {
     this.erroredNodes.add(nodeId);
@@ -186,7 +243,10 @@ var LiveSignalStore = class {
   reset() {
     this.nodeActiveAt.clear();
     this.erroredNodes.clear();
+    this.finishedNodes.clear();
     this.edgeFlowAt.clear();
+    this.nodePulse.clear();
+    this.edgePulse.clear();
     this.stopLoop();
     this.flushNotifications();
   }
@@ -207,7 +267,7 @@ var LiveSignalStore = class {
     if (at !== void 0 && this.deps.now() - at <= ACTIVE_WINDOW_MS) {
       return "active";
     }
-    return "idle";
+    return this.finishedNodes.has(nodeId) ? "finished" : "idle";
   }
   /** Whether an edge is currently flowing. */
   isEdgeFlowing(edgeId) {
@@ -267,8 +327,10 @@ var LiveSignalStore = class {
       if (state !== "idle") {
         anyLive = anyLive || state === "active";
       }
-      if (this.lastNodeState.get(nodeId) !== state) {
+      const pulse = this.getNodePulse(nodeId);
+      if (this.lastNodeState.get(nodeId) !== state || this.lastNodePulse.get(nodeId) !== pulse) {
         this.lastNodeState.set(nodeId, state);
+        this.lastNodePulse.set(nodeId, pulse);
         for (const listener of listeners) {
           listener();
         }
@@ -277,8 +339,10 @@ var LiveSignalStore = class {
     for (const [edgeId, listeners] of this.edgeListeners) {
       const flowing = this.isEdgeFlowing(edgeId);
       anyLive = anyLive || flowing;
-      if (this.lastEdgeFlowing.get(edgeId) !== flowing) {
+      const pulse = this.getEdgePulse(edgeId);
+      if (this.lastEdgeFlowing.get(edgeId) !== flowing || this.lastEdgePulse.get(edgeId) !== pulse) {
         this.lastEdgeFlowing.set(edgeId, flowing);
+        this.lastEdgePulse.set(edgeId, pulse);
         for (const listener of listeners) {
           listener();
         }
@@ -306,6 +370,22 @@ function useNodeLiveState(nodeId) {
     () => "idle"
   );
 }
+function useNodePulse(nodeId) {
+  const store = useContext(LiveSignalContext);
+  return useSyncExternalStore(
+    (onChange) => store === null ? () => void 0 : store.subscribeNode(nodeId, onChange),
+    () => store === null ? 0 : store.getNodePulse(nodeId),
+    () => 0
+  );
+}
+function useEdgePulse(edgeId) {
+  const store = useContext(LiveSignalContext);
+  return useSyncExternalStore(
+    (onChange) => store === null ? () => void 0 : store.subscribeEdge(edgeId, onChange),
+    () => store === null ? 0 : store.getEdgePulse(edgeId),
+    () => 0
+  );
+}
 function useEdgeFlowing(edgeId) {
   const store = useContext(LiveSignalContext);
   return useSyncExternalStore(
@@ -315,8 +395,15 @@ function useEdgeFlowing(edgeId) {
   );
 }
 
+// src/live/LivePulse.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function LivePulse({ nodeId }) {
+  const pulse = useNodePulse(nodeId);
+  return pulse === 0 ? null : /* @__PURE__ */ jsx6("span", { className: "hl-live-pulse", "aria-hidden": "true" }, pulse);
+}
+
 // src/nodes/AssetNode.tsx
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 function stringParam(node, key) {
   const v = node.params[key];
   return typeof v === "string" ? v : void 0;
@@ -328,22 +415,24 @@ function AssetNodeChrome({ node, selected }) {
   const role = stringParam(node, "role");
   const live = useNodeLiveState(node.id);
   const outputs = node.ports.filter((p) => p.direction === "O" && !p.isError);
-  const className = [
+  const className2 = [
     "hl-asset",
     selected ? "is-selected" : "",
     live === "active" ? "is-active" : "",
-    live === "error" ? "is-live-error" : ""
+    live === "error" ? "is-live-error" : "",
+    live === "finished" ? "is-finished" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs2("div", { className, "data-kind": node.kind, children: [
+  return /* @__PURE__ */ jsxs2("div", { className: className2, "data-kind": node.kind, children: [
+    /* @__PURE__ */ jsx7(LivePulse, { nodeId: node.id }),
     /* @__PURE__ */ jsxs2("div", { className: "hl-asset-frame", children: [
-      imageUrl.length > 0 ? /* @__PURE__ */ jsx6("img", { className: "hl-asset-img", src: imageUrl, alt: caption, draggable: false }) : /* @__PURE__ */ jsx6("div", { className: "hl-asset-placeholder", "aria-hidden": true }),
-      /* @__PURE__ */ jsx6("div", { className: "hl-asset-scrim" }),
+      imageUrl.length > 0 ? /* @__PURE__ */ jsx7("img", { className: "hl-asset-img", src: imageUrl, alt: caption, draggable: false }) : /* @__PURE__ */ jsx7("div", { className: "hl-asset-placeholder", "aria-hidden": true }),
+      /* @__PURE__ */ jsx7("div", { className: "hl-asset-scrim" }),
       /* @__PURE__ */ jsxs2("div", { className: "hl-asset-caption", children: [
-        /* @__PURE__ */ jsx6("span", { className: "hl-asset-name", children: caption }),
-        role !== void 0 && /* @__PURE__ */ jsx6("span", { className: "hl-asset-role hl-mono", children: role })
+        /* @__PURE__ */ jsx7("span", { className: "hl-asset-name", children: caption }),
+        role !== void 0 && /* @__PURE__ */ jsx7("span", { className: "hl-asset-role hl-mono", children: role })
       ] })
     ] }),
-    /* @__PURE__ */ jsx6("ul", { className: "hl-asset-ports", children: outputs.map((port) => /* @__PURE__ */ jsx6(PortRow, { port }, port.id)) })
+    /* @__PURE__ */ jsx7("ul", { className: "hl-asset-ports", children: outputs.map((port) => /* @__PURE__ */ jsx7(PortRow, { port }, port.id)) })
   ] });
 }
 
@@ -351,9 +440,9 @@ function AssetNodeChrome({ node, selected }) {
 import { useCallback, useEffect, useRef, useState } from "react";
 
 // src/icons/node-icons.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function svg(size, children) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "svg",
     {
       width: size,
@@ -371,49 +460,49 @@ function svg(size, children) {
 }
 var BY_CODE = {
   "image-source": (s) => svg(s, [
-    /* @__PURE__ */ jsx7("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2.5" }, "r"),
-    /* @__PURE__ */ jsx7("circle", { cx: "8.5", cy: "9", r: "1.6" }, "c"),
-    /* @__PURE__ */ jsx7("path", { d: "M4 17l5-5 4 4 3-2 4 4" }, "p")
+    /* @__PURE__ */ jsx8("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2.5" }, "r"),
+    /* @__PURE__ */ jsx8("circle", { cx: "8.5", cy: "9", r: "1.6" }, "c"),
+    /* @__PURE__ */ jsx8("path", { d: "M4 17l5-5 4 4 3-2 4 4" }, "p")
   ]),
-  "text-source": (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M5 6h14M12 6v12M9 18h6" }, "p")]),
+  "text-source": (s) => svg(s, [/* @__PURE__ */ jsx8("path", { d: "M5 6h14M12 6v12M9 18h6" }, "p")]),
   "interval-source": (s) => svg(s, [
-    /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "8" }, "c"),
-    /* @__PURE__ */ jsx7("path", { d: "M12 8v4l3 2" }, "h")
+    /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "8" }, "c"),
+    /* @__PURE__ */ jsx8("path", { d: "M12 8v4l3 2" }, "h")
   ]),
   "range-source": (s) => svg(s, [
-    /* @__PURE__ */ jsx7("path", { d: "M4 12h16" }, "l"),
-    /* @__PURE__ */ jsx7("circle", { cx: "6", cy: "12", r: "2" }, "a"),
-    /* @__PURE__ */ jsx7("circle", { cx: "18", cy: "12", r: "2" }, "b")
+    /* @__PURE__ */ jsx8("path", { d: "M4 12h16" }, "l"),
+    /* @__PURE__ */ jsx8("circle", { cx: "6", cy: "12", r: "2" }, "a"),
+    /* @__PURE__ */ jsx8("circle", { cx: "18", cy: "12", r: "2" }, "b")
   ]),
-  "constant-source": (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M6 12h12M9 8l-3 4 3 4M15 8l3 4-3 4" }, "p")]),
+  "constant-source": (s) => svg(s, [/* @__PURE__ */ jsx8("path", { d: "M6 12h12M9 8l-3 4 3 4M15 8l3 4-3 4" }, "p")]),
   "map-scale": (s) => svg(s, [
-    /* @__PURE__ */ jsx7("path", { d: "M4 20V8l8-4" }, "a"),
-    /* @__PURE__ */ jsx7("path", { d: "M4 8l8 4 8-4M12 12v8" }, "b")
+    /* @__PURE__ */ jsx8("path", { d: "M4 20V8l8-4" }, "a"),
+    /* @__PURE__ */ jsx8("path", { d: "M4 8l8 4 8-4M12 12v8" }, "b")
   ]),
-  uppercase: (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M5 18L9 6l4 12M6.5 14h5M15 10v8M15 10c3 0 3 4 0 4" }, "p")]),
-  "filter-threshold": (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M4 5h16l-6 7v6l-4-2v-4z" }, "p")]),
-  "scan-sum": (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M17 6H7l6 6-6 6h10" }, "p")]),
+  uppercase: (s) => svg(s, [/* @__PURE__ */ jsx8("path", { d: "M5 18L9 6l4 12M6.5 14h5M15 10v8M15 10c3 0 3 4 0 4" }, "p")]),
+  "filter-threshold": (s) => svg(s, [/* @__PURE__ */ jsx8("path", { d: "M4 5h16l-6 7v6l-4-2v-4z" }, "p")]),
+  "scan-sum": (s) => svg(s, [/* @__PURE__ */ jsx8("path", { d: "M17 6H7l6 6-6 6h10" }, "p")]),
   delay: (s) => svg(s, [
-    /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "13", r: "7" }, "c"),
-    /* @__PURE__ */ jsx7("path", { d: "M12 10v3l2 2M9 3h6" }, "h")
+    /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "13", r: "7" }, "c"),
+    /* @__PURE__ */ jsx8("path", { d: "M12 10v3l2 2M9 3h6" }, "h")
   ]),
-  merge: (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M6 5v4c0 3 3 3 6 3s6 0 6-3V5M12 12v7" }, "p")]),
+  merge: (s) => svg(s, [/* @__PURE__ */ jsx8("path", { d: "M6 5v4c0 3 3 3 6 3s6 0 6-3V5M12 12v7" }, "p")]),
   "console-sink": (s) => svg(s, [
-    /* @__PURE__ */ jsx7("rect", { x: "4", y: "5", width: "16", height: "12", rx: "2" }, "r"),
-    /* @__PURE__ */ jsx7("path", { d: "M8 10l2.5 2L8 14M13 14h3" }, "p")
+    /* @__PURE__ */ jsx8("rect", { x: "4", y: "5", width: "16", height: "12", rx: "2" }, "r"),
+    /* @__PURE__ */ jsx8("path", { d: "M8 10l2.5 2L8 14M13 14h3" }, "p")
   ]),
   "collect-sink": (s) => svg(s, [
-    /* @__PURE__ */ jsx7("path", { d: "M4 7h16M4 12h16M4 17h10" }, "p")
+    /* @__PURE__ */ jsx8("path", { d: "M4 7h16M4 12h16M4 17h10" }, "p")
   ])
 };
 var BY_KIND = {
-  R: (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M8 5l10 7-10 7z" }, "p")]),
+  R: (s) => svg(s, [/* @__PURE__ */ jsx8("path", { d: "M8 5l10 7-10 7z" }, "p")]),
   // source ▷ (play)
-  T: (s) => svg(s, [/* @__PURE__ */ jsx7("path", { d: "M4 8h6l4 8h6M14 8h6M4 16h6" }, "p")]),
+  T: (s) => svg(s, [/* @__PURE__ */ jsx8("path", { d: "M4 8h6l4 8h6M14 8h6M4 16h6" }, "p")]),
   // transform
   W: (s) => svg(s, [
-    /* @__PURE__ */ jsx7("path", { d: "M5 4h11l3 3v13H5z" }, "p"),
-    /* @__PURE__ */ jsx7("path", { d: "M9 4v5h6" }, "q")
+    /* @__PURE__ */ jsx8("path", { d: "M5 4h11l3 3v13H5z" }, "p"),
+    /* @__PURE__ */ jsx8("path", { d: "M9 4v5h6" }, "q")
   ])
   // sink (save)
 };
@@ -424,78 +513,86 @@ function NodeIcon({ code, kind, size = 15 }) {
 }
 function EyeIcon({ size = 14 }) {
   return svg(size, [
-    /* @__PURE__ */ jsx7("path", { d: "M2 12s3.5-6.5 10-6.5S22 12 22 12s-3.5 6.5-10 6.5S2 12 2 12z" }, "p"),
-    /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "2.6" }, "c")
+    /* @__PURE__ */ jsx8("path", { d: "M2 12s3.5-6.5 10-6.5S22 12 22 12s-3.5 6.5-10 6.5S2 12 2 12z" }, "p"),
+    /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "2.6" }, "c")
   ]);
 }
 function EyeOffIcon({ size = 14 }) {
   return svg(size, [
-    /* @__PURE__ */ jsx7("path", { d: "M2 12s3.5-6.5 10-6.5c1.7 0 3.2.45 4.5 1.1M22 12s-3.5 6.5-10 6.5c-1.7 0-3.2-.45-4.5-1.1" }, "p"),
-    /* @__PURE__ */ jsx7("path", { d: "M9.9 9.9a2.6 2.6 0 003.7 3.7" }, "e"),
-    /* @__PURE__ */ jsx7("path", { d: "M3 3l18 18" }, "s")
+    /* @__PURE__ */ jsx8("path", { d: "M2 12s3.5-6.5 10-6.5c1.7 0 3.2.45 4.5 1.1M22 12s-3.5 6.5-10 6.5c-1.7 0-3.2-.45-4.5-1.1" }, "p"),
+    /* @__PURE__ */ jsx8("path", { d: "M9.9 9.9a2.6 2.6 0 003.7 3.7" }, "e"),
+    /* @__PURE__ */ jsx8("path", { d: "M3 3l18 18" }, "s")
   ]);
 }
 function UnlockIcon({ size = 14 }) {
   return svg(size, [
-    /* @__PURE__ */ jsx7("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }, "r"),
-    /* @__PURE__ */ jsx7("path", { d: "M8 11V7a4 4 0 017.9-1" }, "s")
+    /* @__PURE__ */ jsx8("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }, "r"),
+    /* @__PURE__ */ jsx8("path", { d: "M8 11V7a4 4 0 017.9-1" }, "s")
   ]);
 }
 function LockIcon({ size = 14 }) {
   return svg(size, [
-    /* @__PURE__ */ jsx7("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }, "r"),
-    /* @__PURE__ */ jsx7("path", { d: "M8 11V7a4 4 0 018 0v4" }, "s")
+    /* @__PURE__ */ jsx8("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }, "r"),
+    /* @__PURE__ */ jsx8("path", { d: "M8 11V7a4 4 0 018 0v4" }, "s")
   ]);
 }
 function WarningIcon({ size = 13 }) {
   return svg(size, [
-    /* @__PURE__ */ jsx7("path", { d: "M12 4l9 15H3z" }, "t"),
-    /* @__PURE__ */ jsx7("path", { d: "M12 10v4" }, "b"),
-    /* @__PURE__ */ jsx7("path", { d: "M12 17v.5" }, "d")
+    /* @__PURE__ */ jsx8("path", { d: "M12 4l9 15H3z" }, "t"),
+    /* @__PURE__ */ jsx8("path", { d: "M12 10v4" }, "b"),
+    /* @__PURE__ */ jsx8("path", { d: "M12 17v.5" }, "d")
   ]);
 }
 function ErrorIcon({ size = 13 }) {
   return svg(size, [
-    /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "9" }, "c"),
-    /* @__PURE__ */ jsx7("path", { d: "M12 7v6" }, "b"),
-    /* @__PURE__ */ jsx7("path", { d: "M12 16v.5" }, "d")
+    /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "9" }, "c"),
+    /* @__PURE__ */ jsx8("path", { d: "M12 7v6" }, "b"),
+    /* @__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 jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function DiagnosticBadge({ diagnostic, variant, size = 12 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "span",
     {
       className: `${variant} hl-diag-${diagnostic.severity}`,
       title: diagnostic.message,
       "aria-label": `${diagnostic.severity}: ${diagnostic.message}`,
-      children: diagnostic.severity === "error" ? /* @__PURE__ */ jsx8(ErrorIcon, { size }) : /* @__PURE__ */ jsx8(WarningIcon, { size })
+      children: diagnostic.severity === "error" ? /* @__PURE__ */ jsx9(ErrorIcon, { size }) : /* @__PURE__ */ jsx9(WarningIcon, { size })
     }
   );
 }
 
 // src/nodes/NodeInteractionContext.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+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({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx9(NodeInteractionCtx.Provider, { value, children });
+  return /* @__PURE__ */ jsx10(NodeInteractionCtx.Provider, { value, children });
 }
 function useNodeInteraction() {
   return useContext2(NodeInteractionCtx);
 }
 
 // src/nodes/PillNode.tsx
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var DOUBLE_CLICK_MS = 320;
 function PillNodeChrome({ node, selected }) {
   const live = useNodeLiveState(node.id);
@@ -513,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") {
@@ -531,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);
@@ -538,21 +639,23 @@ 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 className = [
+  const className2 = [
     "hl-pill",
     `hl-pill-${node.kind.toLowerCase()}`,
     selected ? "is-selected" : "",
     live === "active" ? "is-active" : "",
     live === "error" ? "is-live-error" : "",
+    live === "finished" ? "is-finished" : "",
     (diagnostic == null ? void 0 : diagnostic.severity) === "error" ? "has-diag-error" : "",
     (diagnostic == null ? void 0 : diagnostic.severity) === "warning" ? "has-diag-warning" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs3("div", { className, "data-kind": node.kind, children: [
-    /* @__PURE__ */ jsx10("span", { className: "hl-pill-dot", "aria-hidden": true, children: /* @__PURE__ */ jsx10(NodeIcon, { code: node.code, kind: node.kind, size: 13 }) }),
-    editing ? /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs3("div", { className: className2, "data-kind": node.kind, children: [
+    /* @__PURE__ */ jsx11(LivePulse, { nodeId: node.id }),
+    /* @__PURE__ */ jsx11("span", { className: "hl-pill-dot", "aria-hidden": true, children: /* @__PURE__ */ jsx11(NodeIcon, { code: node.code, kind: node.kind, size: 13 }) }),
+    editing ? /* @__PURE__ */ jsx11(
       "input",
       {
         ref: inputRef,
@@ -564,71 +667,178 @@ function PillNodeChrome({ node, selected }) {
         spellCheck: false,
         "aria-label": "Rename node"
       }
-    ) : /* @__PURE__ */ jsx10(
+    ) : /* @__PURE__ */ jsx11(
       "span",
       {
         className: "hl-pill-name",
         onClick: () => {
           onNameClick();
         },
-        title: "Double-click to rename",
+        title: rename === void 0 ? void 0 : "Double-click to rename",
         children: node.name
       }
     ),
-    diagnostic !== void 0 && /* @__PURE__ */ jsx10(DiagnosticBadge, { diagnostic, variant: "hl-pill-diag", size: 12 }),
-    /* @__PURE__ */ jsx10("span", { className: "hl-pill-status", "aria-hidden": true }),
-    /* @__PURE__ */ jsx10("ul", { className: "hl-pill-ports hl-in", children: inputs.map((port) => /* @__PURE__ */ jsx10(PortRow, { port }, port.id)) }),
-    /* @__PURE__ */ jsx10("ul", { className: "hl-pill-ports hl-out", children: outputs.map((port) => /* @__PURE__ */ jsx10(PortRow, { port }, port.id)) })
+    diagnostic !== void 0 && /* @__PURE__ */ jsx11(DiagnosticBadge, { diagnostic, variant: "hl-pill-diag", size: 12 }),
+    /* @__PURE__ */ jsx11("span", { className: "hl-pill-status", "aria-hidden": true }),
+    /* @__PURE__ */ jsx11("ul", { className: "hl-pill-ports hl-in", children: inputs.map((port) => /* @__PURE__ */ jsx11(PortRow, { port }, port.id)) }),
+    /* @__PURE__ */ jsx11("ul", { className: "hl-pill-ports hl-out", children: outputs.map((port) => /* @__PURE__ */ jsx11(PortRow, { port }, port.id)) })
   ] });
 }
 
 // src/nodes/HlangNode.tsx
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 function NodeChrome({ node, selected, body }) {
   const inputs = node.ports.filter((p) => p.direction === "I");
   const outputs = node.ports.filter((p) => p.direction === "O");
   const live = useNodeLiveState(node.id);
-  const className = [
+  const className2 = [
     "hl-node",
     `hl-${node.kind.toLowerCase()}`,
     selected ? "is-selected" : "",
     live === "active" ? "is-active" : "",
-    live === "error" ? "is-live-error" : ""
+    live === "error" ? "is-live-error" : "",
+    live === "finished" ? "is-finished" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs4("div", { className, "data-kind": node.kind, children: [
-    /* @__PURE__ */ jsx11(SignalBar, {}),
+  return /* @__PURE__ */ jsxs4("div", { className: className2, "data-kind": node.kind, children: [
+    /* @__PURE__ */ jsx12(LivePulse, { nodeId: node.id }),
+    /* @__PURE__ */ jsx12(SignalBar, {}),
     /* @__PURE__ */ jsxs4("header", { className: "hl-head", children: [
-      /* @__PURE__ */ jsx11("span", { className: "hl-kind", children: node.kind }),
-      /* @__PURE__ */ jsx11("span", { className: "hl-name", children: node.name }),
-      /* @__PURE__ */ jsx11("span", { className: "hl-role", children: KIND_ROLE[node.kind] })
+      /* @__PURE__ */ jsx12("span", { className: "hl-kind", children: node.kind }),
+      /* @__PURE__ */ jsx12("span", { className: "hl-name", children: node.name }),
+      /* @__PURE__ */ jsx12("span", { className: "hl-role", children: KIND_ROLE[node.kind] })
     ] }),
-    /* @__PURE__ */ jsx11(NodeBodySlot, { node, children: body }),
+    /* @__PURE__ */ jsx12(NodeBodySlot, { node, children: body }),
     /* @__PURE__ */ jsxs4("div", { className: "hl-ports", children: [
-      /* @__PURE__ */ jsx11("ul", { className: "hl-col hl-in", children: inputs.map((port) => /* @__PURE__ */ jsx11(PortRow, { port }, port.id)) }),
-      /* @__PURE__ */ jsx11("ul", { className: "hl-col hl-out", children: outputs.map((port) => /* @__PURE__ */ jsx11(PortRow, { port }, port.id)) })
+      /* @__PURE__ */ jsx12("ul", { className: "hl-col hl-in", children: inputs.map((port) => /* @__PURE__ */ jsx12(PortRow, { port }, port.id)) }),
+      /* @__PURE__ */ jsx12("ul", { className: "hl-col hl-out", children: outputs.map((port) => /* @__PURE__ */ jsx12(PortRow, { port }, port.id)) })
     ] })
   ] });
 }
 function HlangNode({ data, selected }) {
   const node = data.editorNode;
   if (typeof node.params.imageUrl === "string" && node.params.imageUrl.length > 0) {
-    return /* @__PURE__ */ jsx11(AssetNodeChrome, { node, selected });
+    return /* @__PURE__ */ jsx12(AssetNodeChrome, { node, selected });
   }
-  return /* @__PURE__ */ jsx11(PillNodeChrome, { node, selected });
+  return /* @__PURE__ */ jsx12(PillNodeChrome, { node, selected });
 }
 
 // src/edges/FlowEdge.tsx
 import { BaseEdge, EdgeLabelRenderer, getBezierPath, useInternalNode } from "@xyflow/react";
-import { Fragment, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
-function useSourceRole(sourceId) {
-  const node = useInternalNode(sourceId);
+
+// src/edges/self-loop.ts
+var SELF_LOOP_CLEARANCE = 28;
+var SELF_LOOP_RADIUS = 16;
+function format(value) {
+  return String(Math.round(value * 100) / 100);
+}
+function distance(a, b) {
+  return Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+}
+function toward(from, to, length) {
+  const span = distance(from, to);
+  const share = span === 0 ? 0 : length / span;
+  return { x: from.x + (to.x - from.x) * share, y: from.y + (to.y - from.y) * share };
+}
+function selfLoopPath(input) {
+  var _a, _b, _c, _d, _e;
+  const clearance = (_a = input.clearance) != null ? _a : SELF_LOOP_CLEARANCE;
+  const radius = (_b = input.radius) != null ? _b : SELF_LOOP_RADIUS;
+  const { source, target, node } = input;
+  const right = Math.max(source.x, node.x + node.width) + clearance;
+  const left = Math.min(target.x, node.x) - clearance;
+  const below = node.y + node.height + clearance;
+  const points = [
+    source,
+    { x: right, y: source.y },
+    { x: right, y: below },
+    { x: left, y: below },
+    { x: left, y: target.y },
+    target
+  ];
+  const parts = [`M ${format(source.x)} ${format(source.y)}`];
+  for (let i = 1; i < points.length - 1; i += 1) {
+    const before = (_c = points[i - 1]) != null ? _c : source;
+    const corner = (_d = points[i]) != null ? _d : source;
+    const after = (_e = points[i + 1]) != null ? _e : target;
+    const r = Math.min(radius, distance(before, corner) / 2, distance(corner, after) / 2);
+    if (r <= 0) {
+      parts.push(`L ${format(corner.x)} ${format(corner.y)}`);
+      continue;
+    }
+    const enter = toward(corner, before, r);
+    const leave = toward(corner, after, r);
+    parts.push(
+      `L ${format(enter.x)} ${format(enter.y)} Q ${format(corner.x)} ${format(corner.y)} ${format(leave.x)} ${format(leave.y)}`
+    );
+  }
+  parts.push(`L ${format(target.x)} ${format(target.y)}`);
+  return { path: parts.join(" "), labelX: (right + left) / 2, labelY: below };
+}
+
+// src/edges/edge-bounds.ts
+var DEFAULT_EDGE_CAPACITY = 10;
+function boundsFields(bounds) {
+  var _a;
+  const bounded = bounds.capacity !== void 0;
+  return [
+    { key: "bounded", label: "Bounded", type: "toggle", value: bounded },
+    { key: "capacity", label: "Capacity", type: "number", value: (_a = bounds.capacity) != null ? _a : DEFAULT_EDGE_CAPACITY, disabled: !bounded },
+    {
+      key: "dropOldest",
+      label: "Drop oldest when full",
+      type: "toggle",
+      value: bounds.overflow === "drop-oldest",
+      disabled: !bounded
+    }
+  ];
+}
+function nextBounds(bounds, key, value) {
+  const { capacity, overflow } = bounds;
+  if (key === "bounded") {
+    return value === true ? { capacity: capacity != null ? capacity : DEFAULT_EDGE_CAPACITY } : {};
+  }
+  if (capacity === void 0) {
+    return {};
+  }
+  const keep = overflow === void 0 ? {} : { overflow };
+  if (key === "capacity") {
+    if (typeof value !== "number" || Number.isNaN(value)) {
+      return bounds;
+    }
+    return { capacity: Math.max(1, Math.round(value)), ...keep };
+  }
+  if (key === "dropOldest") {
+    return value === true ? { capacity, overflow: "drop-oldest" } : { capacity };
+  }
+  return bounds;
+}
+function capacityLabel(bounds) {
+  if (bounds.capacity === void 0) {
+    return void 0;
+  }
+  const label = `[${String(bounds.capacity)}]`;
+  return bounds.overflow === "drop-oldest" ? `${label} drop oldest` : label;
+}
+
+// src/edges/FlowEdge.tsx
+import { Fragment, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+function roleOf(node) {
   const role = node == null ? void 0 : node.data.editorNode.params.role;
   return typeof role === "string" && role.length > 0 ? role : void 0;
 }
 function FlowEdge(props) {
-  var _a;
-  const { id, source, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data } = props;
-  const [path] = getBezierPath({
+  var _a, _b, _c, _d, _e, _f;
+  const { id, source, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, selected } = props;
+  const sourceNode = useInternalNode(source);
+  const role = roleOf(sourceNode);
+  const width = sourceNode == null ? void 0 : sourceNode.measured.width;
+  const height = sourceNode == null ? void 0 : sourceNode.measured.height;
+  const loop = source === target && sourceNode !== void 0 && width !== void 0 && height !== void 0 ? selfLoopPath({
+    source: { x: sourceX, y: sourceY },
+    target: { x: targetX, y: targetY },
+    node: { ...sourceNode.internals.positionAbsolute, width, height }
+  }) : void 0;
+  const [curve] = getBezierPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -636,25 +846,39 @@ function FlowEdge(props) {
     targetY,
     targetPosition
   });
+  const path = (_a = loop == null ? void 0 : loop.path) != null ? _a : curve;
   const t = 0.62;
-  const labelX = sourceX + (targetX - sourceX) * t;
-  const labelY = sourceY + (targetY - sourceY) * t;
-  const isError = (_a = data == null ? void 0 : data.isError) != null ? _a : false;
+  const labelX = (_b = loop == null ? void 0 : loop.labelX) != null ? _b : sourceX + (targetX - sourceX) * t;
+  const labelY = (_c = loop == null ? void 0 : loop.labelY) != null ? _c : sourceY + (targetY - sourceY) * t;
+  const capacity = capacityLabel(data != null ? data : {});
+  const capacityX = (_d = loop == null ? void 0 : loop.labelX) != null ? _d : sourceX + (targetX - sourceX) * 0.38;
+  const capacityY = (_e = loop == null ? void 0 : loop.labelY) != null ? _e : sourceY + (targetY - sourceY) * 0.38;
+  const isError = (_f = data == null ? void 0 : data.isError) != null ? _f : false;
   const isValue = (data == null ? void 0 : data.stream) === "value";
   const flowing = useEdgeFlowing(id);
-  const role = useSourceRole(source);
-  const className = [
+  const pulse = useEdgePulse(id);
+  const className2 = [
     "hl-edge",
     isError ? "is-error" : "",
     isValue ? "is-value" : "is-live",
-    flowing ? "is-flowing" : ""
+    flowing ? "is-flowing" : "",
+    selected === true ? "is-selected" : ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs5(Fragment, { children: [
-    /* @__PURE__ */ jsxs5("g", { className, children: [
-      /* @__PURE__ */ jsx12(BaseEdge, { id, path, className: "hl-edge-base" }),
-      /* @__PURE__ */ jsx12("path", { d: path, className: "hl-edge-flow" })
+    /* @__PURE__ */ jsxs5("g", { className: className2, children: [
+      /* @__PURE__ */ jsx13(BaseEdge, { id, path, className: "hl-edge-base" }),
+      /* @__PURE__ */ jsx13("path", { d: path, className: "hl-edge-flow" }),
+      pulse > 0 && /* @__PURE__ */ jsx13("path", { d: path, className: "hl-edge-pulse" }, pulse)
     ] }),
-    role !== void 0 && /* @__PURE__ */ jsx12(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx12(
+    capacity !== void 0 && /* @__PURE__ */ jsx13(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx13(
+      "div",
+      {
+        className: `hl-edge-capacity hl-mono${(data == null ? void 0 : data.overflow) === "drop-oldest" ? " is-lossy" : ""}`,
+        style: { transform: `translate(-50%, -50%) translate(${String(capacityX)}px, ${String(capacityY)}px)` },
+        children: capacity
+      }
+    ) }),
+    role !== void 0 && /* @__PURE__ */ jsx13(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx13(
       "div",
       {
         className: "hl-edge-label hl-mono",
@@ -676,49 +900,257 @@ function createHlangFlowTypes() {
 }
 
 // src/shell/EditorShell.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useId, useRef as useRef3 } from "react";
+
+// src/shell/FooterResizer.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function FooterResizer({ resize, controls, label }) {
+  const onPointerDown = (event) => {
+    if (event.pointerType === "mouse" && event.button !== 0) {
+      return;
+    }
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    resize.startDrag(event.clientY);
+  };
+  const onPointerMove = (event) => {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      resize.drag(event.clientY);
+    }
+  };
+  const onPointerEnd = (event) => {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    resize.endDrag();
+  };
+  const onKeyDown = (event) => {
+    if (resize.keyDown(event.key, event.shiftKey)) {
+      event.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "horizontal",
+      "aria-label": label,
+      "aria-controls": controls,
+      "aria-valuemin": resize.bounds.min,
+      "aria-valuemax": resize.bounds.max,
+      "aria-valuenow": resize.height,
+      tabIndex: 0,
+      className: `hl-footer-resizer${resize.dragging ? " is-dragging" : ""}`,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: onPointerEnd,
+      onPointerCancel: onPointerEnd,
+      onLostPointerCapture: () => {
+        resize.endDrag();
+      },
+      onDoubleClick: () => {
+        resize.toggle();
+      },
+      onKeyDown
+    }
+  );
+}
+
+// src/shell/useFooterResize.ts
+import { useCallback as useCallback2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+
+// src/shell/footer-size.ts
+var FOOTER_KEY_STEP = 16;
+function footerBounds(options) {
+  const { available, minHeight, minCanvasHeight } = options;
+  return { min: minHeight, max: Math.max(minHeight, available - minCanvasHeight) };
+}
+function clampFooter(height, bounds) {
+  return Math.round(Math.min(bounds.max, Math.max(bounds.min, height)));
+}
+function resizeByKey(height, key, shift, bounds) {
+  const step = FOOTER_KEY_STEP * (shift ? 4 : 1);
+  switch (key) {
+    case "ArrowUp":
+      return clampFooter(height + step, bounds);
+    case "ArrowDown":
+      return clampFooter(height - step, bounds);
+    case "Home":
+      return bounds.min;
+    case "End":
+      return bounds.max;
+    default:
+      return void 0;
+  }
+}
+function toggleCollapsed(size, bounds) {
+  if (size.height > bounds.min) {
+    return { height: bounds.min, restore: size.height };
+  }
+  return { height: clampFooter(size.restore, bounds), restore: size.restore };
+}
+
+// src/shell/useFooterResize.ts
+var DEFAULT_MIN_CANVAS_HEIGHT = 160;
+function useFooterResize(options) {
+  var _a;
+  const { defaultHeight, minHeight } = options;
+  const minCanvasHeight = (_a = options.minCanvasHeight) != null ? _a : DEFAULT_MIN_CANVAS_HEIGHT;
+  const [available, setAvailable] = useState2(null);
+  const [preferred, setPreferred] = useState2(defaultHeight);
+  const [restore, setRestore] = useState2(defaultHeight);
+  const [dragging, setDragging] = useState2(false);
+  const dragStart = useRef2(null);
+  const bounds = useMemo2(
+    () => available === null ? { min: minHeight, max: Math.max(minHeight, defaultHeight) } : footerBounds({ available, minHeight, minCanvasHeight }),
+    [available, minHeight, minCanvasHeight, defaultHeight]
+  );
+  const height = clampFooter(preferred, bounds);
+  const choose = useCallback2(
+    (next) => {
+      setPreferred(next);
+      if (next > bounds.min) {
+        setRestore(next);
+      }
+    },
+    [bounds.min]
+  );
+  const measure = useCallback2((next) => {
+    setAvailable(next);
+  }, []);
+  const startDrag = useCallback2(
+    (clientY) => {
+      dragStart.current = { clientY, height };
+      setDragging(true);
+    },
+    [height]
+  );
+  const drag = useCallback2(
+    (clientY) => {
+      const start = dragStart.current;
+      if (start === null) {
+        return;
+      }
+      choose(clampFooter(start.height + (start.clientY - clientY), bounds));
+    },
+    [bounds, choose]
+  );
+  const endDrag = useCallback2(() => {
+    dragStart.current = null;
+    setDragging(false);
+  }, []);
+  const toggle = useCallback2(() => {
+    const next = toggleCollapsed({ height, restore }, bounds);
+    setPreferred(next.height);
+    setRestore(next.restore);
+  }, [height, restore, bounds]);
+  const keyDown = useCallback2(
+    (key, shift) => {
+      if (key === "Enter") {
+        toggle();
+        return true;
+      }
+      const next = resizeByKey(height, key, shift, bounds);
+      if (next === void 0) {
+        return false;
+      }
+      choose(next);
+      return true;
+    },
+    [height, bounds, choose, toggle]
+  );
+  return { height, bounds, dragging, measure, startDrag, drag, endDrag, keyDown, toggle };
+}
+
+// src/shell/EditorShell.tsx
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 function EditorShell({
   toolbar,
   left,
   right,
   canvas,
   footer,
+  footerResize,
   leftCollapsed = false,
   rightCollapsed = false
 }) {
-  const className = [
+  const shellRef = useRef3(null);
+  const toolbarRef = useRef3(null);
+  const className2 = [
     "hl-shell",
     leftCollapsed ? "hl-left-collapsed" : "",
     rightCollapsed ? "hl-right-collapsed" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs6("div", { className, children: [
-    toolbar !== void 0 && /* @__PURE__ */ jsx13("div", { className: "hl-region-toolbar", children: toolbar }),
+  return /* @__PURE__ */ jsxs6("div", { className: className2, ref: shellRef, children: [
+    toolbar !== void 0 && /* @__PURE__ */ jsx15("div", { className: "hl-region-toolbar", ref: toolbarRef, children: toolbar }),
     /* @__PURE__ */ jsxs6("div", { className: "hl-region-body", children: [
-      left !== void 0 && !leftCollapsed && /* @__PURE__ */ jsx13("aside", { className: "hl-region-left", children: left }),
-      /* @__PURE__ */ jsx13("main", { className: "hl-region-canvas", children: canvas }),
-      right !== void 0 && !rightCollapsed && /* @__PURE__ */ jsx13("aside", { className: "hl-region-right", children: right })
+      left !== void 0 && !leftCollapsed && /* @__PURE__ */ jsx15("aside", { className: "hl-region-left", children: left }),
+      /* @__PURE__ */ jsx15("main", { className: "hl-region-canvas", children: canvas }),
+      right !== void 0 && !rightCollapsed && /* @__PURE__ */ jsx15("aside", { className: "hl-region-right", children: right })
     ] }),
-    footer !== void 0 && /* @__PURE__ */ jsx13("div", { className: "hl-region-footer", children: footer })
+    footer !== void 0 && (footerResize === void 0 ? /* @__PURE__ */ jsx15("div", { className: "hl-region-footer", children: footer }) : /* @__PURE__ */ jsx15(ResizableFooter, { options: footerResize, shellRef, toolbarRef, children: footer }))
   ] });
 }
+function ResizableFooter({
+  options,
+  shellRef,
+  toolbarRef,
+  children
+}) {
+  var _a;
+  const resize = useFooterResize(options);
+  const id = useId();
+  const { measure } = resize;
+  useEffect2(() => {
+    const shell = shellRef.current;
+    if (shell === null) {
+      return;
+    }
+    const update = () => {
+      var _a2, _b;
+      measure(shell.clientHeight - ((_b = (_a2 = toolbarRef.current) == null ? void 0 : _a2.offsetHeight) != null ? _b : 0));
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(shell);
+    if (toolbarRef.current !== null) {
+      observer.observe(toolbarRef.current);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [measure, shellRef, toolbarRef]);
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      id,
+      className: `hl-region-footer is-resizable${resize.dragging ? " is-resizing" : ""}`,
+      style: { height: resize.height },
+      children: [
+        /* @__PURE__ */ jsx15(FooterResizer, { resize, controls: id, label: (_a = options.label) != null ? _a : "Resize the panel" }),
+        children
+      ]
+    }
+  );
+}
 
 // src/toolbar/Toolbar.tsx
 import { useHistory } from "@hlang-tech/editor-react";
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function Toolbar({ title, center, actions }) {
   return /* @__PURE__ */ jsxs7("header", { className: "hl-toolbar", children: [
-    /* @__PURE__ */ jsx14("div", { className: "hl-toolbar-brand", children: title != null ? title : /* @__PURE__ */ jsxs7(Fragment2, { children: [
-      /* @__PURE__ */ jsx14("span", { className: "hl-toolbar-glyph", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx14("span", { className: "hl-toolbar-wordmark", children: "hlang" })
+    /* @__PURE__ */ jsx16("div", { className: "hl-toolbar-brand", children: title != null ? title : /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      /* @__PURE__ */ jsx16("span", { className: "hl-toolbar-glyph", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx16("span", { className: "hl-toolbar-wordmark", children: "hlang" })
     ] }) }),
-    center !== void 0 && /* @__PURE__ */ jsx14("div", { className: "hl-toolbar-center", children: center }),
-    /* @__PURE__ */ jsx14("div", { className: "hl-toolbar-actions", children: actions })
+    center !== void 0 && /* @__PURE__ */ jsx16("div", { className: "hl-toolbar-center", children: center }),
+    /* @__PURE__ */ jsx16("div", { className: "hl-toolbar-actions", children: actions })
   ] });
 }
 function UndoRedo({ core }) {
   const history = useHistory(core);
   return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx16(
       "button",
       {
         type: "button",
@@ -729,7 +1161,7 @@ function UndoRedo({ core }) {
         children: "Undo"
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx16(
       "button",
       {
         type: "button",
@@ -756,7 +1188,7 @@ function RunButton({
       onClick: onRun,
       "aria-pressed": running,
       children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx16(
           "span",
           {
             className: `hl-toolbar-run-icon${running ? " is-stop" : ""}`,
@@ -769,22 +1201,31 @@ function RunButton({
   );
 }
 function ToolbarStat({ label, value }) {
-  return /* @__PURE__ */ jsx14("span", { className: "hl-toolbar-stat hl-mono", title: label, children: value });
+  return /* @__PURE__ */ jsx16("span", { className: "hl-toolbar-stat hl-mono", title: label, children: value });
 }
 function ToolbarGhostButton({
   children,
   onClick,
   title
 }) {
-  return /* @__PURE__ */ jsx14("button", { type: "button", className: "hl-toolbar-btn", onClick, title, children });
+  return /* @__PURE__ */ jsx16("button", { type: "button", className: "hl-toolbar-btn", onClick, title, children });
+}
+
+// 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 jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function ToolCluster({ items }) {
-  return /* @__PURE__ */ jsx15("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__ */ jsx15("span", { className: "hl-toolcluster-sep", "aria-hidden": true }),
-    /* @__PURE__ */ jsx15(
+  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",
@@ -802,30 +1243,30 @@ function ToolCluster({ items }) {
 
 // src/canvas/CanvasChrome.tsx
 import { Background, BackgroundVariant } from "@xyflow/react";
-import { Fragment as Fragment3, jsx as jsx16 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx19 } from "react/jsx-runtime";
 function CanvasChrome({ background = true }) {
-  return /* @__PURE__ */ jsx16(Fragment3, { children: background && /* @__PURE__ */ jsx16(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 jsx17, 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__ */ jsx17("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__ */ jsx17("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__ */ jsx17("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__ */ jsx17("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__ */ jsx17("svg", { width: 17, height: 17, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx17("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__ */ jsx17("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__ */ jsx17("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__ */ jsx17("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__ */ jsx17("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__ */ jsx17("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__ */ jsx17("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,
@@ -838,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__ */ jsx17(
-      "button",
-      {
-        className: "hl-dock-btn",
-        onClick: onUndo,
-        disabled: !canUndo,
-        title: "Undo (\u2318Z)",
-        "aria-label": "Undo",
-        children: /* @__PURE__ */ jsx17(UndoIcon, {})
-      }
-    ),
-    /* @__PURE__ */ jsx17(
-      "button",
-      {
-        className: "hl-dock-btn",
-        onClick: onRedo,
-        disabled: !canRedo,
-        title: "Redo (\u2318\u21E7Z)",
-        "aria-label": "Redo",
-        children: /* @__PURE__ */ jsx17(RedoIcon, {})
-      }
-    ),
-    /* @__PURE__ */ jsx17("span", { className: "hl-dock-sep", "aria-hidden": true }),
-    /* @__PURE__ */ jsx17(
-      "button",
-      {
-        className: "hl-dock-btn" + (mode === "select" ? " is-active" : ""),
-        onClick: () => onModeChange("select"),
-        title: "Select (V)",
-        "aria-pressed": mode === "select",
-        children: /* @__PURE__ */ jsx17(CursorIcon, {})
-      }
-    ),
-    /* @__PURE__ */ jsx17(
-      "button",
-      {
-        className: "hl-dock-btn" + (mode === "pan" ? " is-active" : ""),
-        onClick: () => onModeChange("pan"),
-        title: "Pan (Space)",
-        "aria-pressed": mode === "pan",
-        children: /* @__PURE__ */ jsx17(HandIcon, {})
-      }
-    ),
-    /* @__PURE__ */ jsx17("button", { className: "hl-dock-btn hl-dock-add", onClick: onAdd, title: "Add node", children: /* @__PURE__ */ jsx17(PlusIcon, {}) }),
-    /* @__PURE__ */ jsx17("span", { className: "hl-dock-sep", "aria-hidden": true }),
-    /* @__PURE__ */ jsx17("button", { className: "hl-dock-btn", onClick: onZoomOut, title: "Zoom out", "aria-label": "Zoom out", children: /* @__PURE__ */ jsx17("span", { className: "hl-dock-glyph", children: "\u2212" }) }),
-    /* @__PURE__ */ jsx17("button", { className: "hl-dock-zoom hl-mono", onClick: onFitView, title: "Fit view", children: pct }),
-    /* @__PURE__ */ jsx17("button", { className: "hl-dock-btn", onClick: onZoomIn, title: "Zoom in", "aria-label": "Zoom in", children: /* @__PURE__ */ jsx17("span", { className: "hl-dock-glyph", children: "+" }) }),
-    /* @__PURE__ */ jsx17("button", { className: "hl-dock-btn hl-dock-fit", onClick: onFitView, title: "Fit view", "aria-label": "Fit view", children: /* @__PURE__ */ jsx17(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 jsx18, 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__ */ jsx18("p", { className: "hl-empty-title", children: title }),
-    /* @__PURE__ */ jsx18("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) {
@@ -938,11 +1382,11 @@ function deriveParamSchema(descriptor, node) {
 }
 
 // src/hooks/useNodeParams.ts
-import { useCallback as useCallback2, useMemo as useMemo2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo3, useRef as useRef4, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import { UpdateParamsCommand } from "@hlang-tech/editor-core";
 function useNodeParams(core, nodeId) {
-  const versionRef = useRef2(0);
-  const subscribe = useCallback2(
+  const versionRef = useRef4(0);
+  const subscribe = useCallback3(
     (onStoreChange) => {
       const disposable = core.events.on("nodeChanged", (event) => {
         if (nodeId !== void 0 && event.node.id === nodeId) {
@@ -956,9 +1400,9 @@ function useNodeParams(core, nodeId) {
     },
     [core, nodeId]
   );
-  const getSnapshot = useCallback2(() => versionRef.current, []);
+  const getSnapshot = useCallback3(() => versionRef.current, []);
   const version = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
-  const setParams = useCallback2(
+  const setParams = useCallback3(
     (next) => {
       if (nodeId === void 0) {
         return;
@@ -967,7 +1411,7 @@ function useNodeParams(core, nodeId) {
     },
     [core, nodeId]
   );
-  const setParam = useCallback2(
+  const setParam = useCallback3(
     (key, value) => {
       if (nodeId === void 0) {
         return;
@@ -980,7 +1424,7 @@ function useNodeParams(core, nodeId) {
     },
     [core, nodeId, setParams]
   );
-  return useMemo2(
+  return useMemo3(
     () => ({
       node: nodeId === void 0 ? void 0 : core.model.getNode(nodeId),
       setParam,
@@ -992,19 +1436,61 @@ 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";
+function useEdgeBounds(core, edgeId) {
+  const subscribe = useCallback4(
+    (onStoreChange) => {
+      const changed = core.events.on("edgeChanged", (event) => {
+        if (event.edge.id === edgeId) {
+          onStoreChange();
+        }
+      });
+      const removed = core.events.on("edgeRemoved", (event) => {
+        if (event.edgeId === edgeId) {
+          onStoreChange();
+        }
+      });
+      return () => {
+        changed.dispose();
+        removed.dispose();
+      };
+    },
+    [core, edgeId]
+  );
+  const getSnapshot = useCallback4(
+    () => edgeId === void 0 ? void 0 : core.model.getEdge(edgeId),
+    [core, edgeId]
+  );
+  const edge = useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
+  const setBounds = useCallback4(
+    (bounds) => {
+      if (edgeId !== void 0) {
+        core.commands.execute(new SetEdgeBoundsCommand(edgeId, bounds));
+      }
+    },
+    [core, edgeId]
+  );
+  return { edge, setBounds };
+}
+
 // src/panels/ParamForm.tsx
-import { useState as useState2 } from "react";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
-function ParamForm({ fields, onCommit }) {
-  return /* @__PURE__ */ jsx19("div", { className: "hl-form", children: fields.map((field) => /* @__PURE__ */ jsx19(FieldRow, { field, onCommit }, field.key)) });
+import { useState as useState3 } from "react";
+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__ */ jsx19("span", { className: "hl-field-label", children: field.label }),
-    /* @__PURE__ */ jsx19(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({
@@ -1013,7 +1499,7 @@ function FieldControl({
 }) {
   switch (field.type) {
     case "toggle":
-      return /* @__PURE__ */ jsx19(
+      return /* @__PURE__ */ jsx22(
         "button",
         {
           type: "button",
@@ -1022,17 +1508,17 @@ function FieldControl({
           className: `hl-toggle${field.value ? " is-on" : ""}`,
           disabled: field.disabled,
           onClick: () => onCommit(field.key, !field.value),
-          children: /* @__PURE__ */ jsx19("span", { className: "hl-toggle-knob" })
+          children: /* @__PURE__ */ jsx22("span", { className: "hl-toggle-knob" })
         }
       );
     case "number":
-      return /* @__PURE__ */ jsx19(NumberControl, { field, onCommit });
+      return /* @__PURE__ */ jsx22(NumberControl, { field, onCommit });
     case "textarea":
-      return /* @__PURE__ */ jsx19(TextControl, { field, onCommit, multiline: true });
+      return /* @__PURE__ */ jsx22(TextControl, { field, onCommit, multiline: true });
     case "text":
-      return /* @__PURE__ */ jsx19(TextControl, { field, onCommit });
+      return /* @__PURE__ */ jsx22(TextControl, { field, onCommit });
     case "custom":
-      return /* @__PURE__ */ jsx19("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({
@@ -1040,7 +1526,7 @@ function TextControl({
   onCommit,
   multiline = false
 }) {
-  const [draft, setDraft] = useState2(field.value);
+  const [draft, setDraft] = useState3(field.value);
   const commit = () => {
     if (draft !== field.value) {
       onCommit(field.key, draft);
@@ -1054,7 +1540,7 @@ function TextControl({
     onBlur: commit
   };
   if (multiline) {
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx22(
       "textarea",
       {
         ...shared,
@@ -1063,7 +1549,7 @@ function TextControl({
       }
     );
   }
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx22(
     "input",
     {
       ...shared,
@@ -1081,14 +1567,14 @@ function NumberControl({
   field,
   onCommit
 }) {
-  const [draft, setDraft] = useState2(String(field.value));
+  const [draft, setDraft] = useState3(String(field.value));
   const commit = () => {
     const parsed = Number(draft);
     if (!Number.isNaN(parsed) && parsed !== field.value) {
       onCommit(field.key, parsed);
     }
   };
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx22(
     "input",
     {
       className: "hl-input hl-mono",
@@ -1119,57 +1605,289 @@ function describeCustom(value) {
   return String(value);
 }
 
+// src/panels/ConnectionInspector.tsx
+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;
+  }
+  const end = (endpoint) => {
+    var _a, _b;
+    return `${(_b = (_a = core.model.getNode(endpoint.nodeId)) == null ? void 0 : _a.name) != null ? _b : endpoint.nodeId}.${endpoint.portId}`;
+  };
+  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__ */ 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));
+          }
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/live/format.ts
+function formatDuration(ms) {
+  if (ms === 0) {
+    return "0 ms";
+  }
+  if (ms < 0.01) {
+    return "<0.01 ms";
+  }
+  if (ms < 1) {
+    return `${ms.toFixed(2)} ms`;
+  }
+  if (ms < 10) {
+    return `${ms.toFixed(1)} ms`;
+  }
+  if (ms < 1e3) {
+    return `${Math.round(ms).toString()} ms`;
+  }
+  return `${(ms / 1e3).toFixed(2)} s`;
+}
+function formatElapsed(ms) {
+  return `${(ms / 1e3).toFixed(3)}s`;
+}
+
+// src/live/preview.ts
+var PREVIEW_LENGTH = 120;
+var CIRCULAR = "[Circular]";
+function functionPreview(value) {
+  return `\u0192 ${value.name === "" ? "anonymous" : value.name}`;
+}
+function bigintPreview(value) {
+  return `${value.toString()}n`;
+}
+function className(value) {
+  const prototype = Object.getPrototypeOf(value);
+  if (prototype === null || prototype === Object.prototype) {
+    return "Object";
+  }
+  const name = typeof prototype === "object" && "constructor" in prototype ? prototype.constructor : void 0;
+  return typeof name === "function" && name.name !== "" ? name.name : "Object";
+}
+function nestedPreview(value) {
+  if (typeof value === "bigint") {
+    return bigintPreview(value);
+  }
+  if (typeof value === "function") {
+    return functionPreview(value);
+  }
+  if (typeof value === "symbol") {
+    return value.toString();
+  }
+  if (value instanceof Error) {
+    return `${value.name}: ${value.message}`;
+  }
+  if (value instanceof Map || value instanceof Set) {
+    return `${value instanceof Map ? "Map" : "Set"}(${String(value.size)})`;
+  }
+  return value;
+}
+function json(value) {
+  const ancestors = [];
+  return JSON.stringify(value, function replace(_key, nested) {
+    while (ancestors.length > 0 && ancestors[ancestors.length - 1] !== this) {
+      ancestors.pop();
+    }
+    if (typeof nested === "object" && nested !== null) {
+      if (ancestors.includes(nested)) {
+        return CIRCULAR;
+      }
+      ancestors.push(nested);
+    }
+    return nestedPreview(nested);
+  });
+}
+function fullPreview(value) {
+  switch (typeof value) {
+    case "string":
+      return JSON.stringify(value);
+    case "bigint":
+    case "function":
+    case "symbol": {
+      const preview = nestedPreview(value);
+      return typeof preview === "string" ? preview : String(preview);
+    }
+    case "object":
+      break;
+    default:
+      return String(value);
+  }
+  if (value === null) {
+    return "null";
+  }
+  if (value instanceof Error || value instanceof Map || value instanceof Set) {
+    return String(nestedPreview(value));
+  }
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? "Invalid Date" : value.toISOString();
+  }
+  const name = Array.isArray(value) ? "Array" : className(value);
+  let body;
+  try {
+    body = json(value);
+  } catch {
+    return name;
+  }
+  if (body === void 0) {
+    return name;
+  }
+  return name === "Object" || name === "Array" ? body : `${name} ${body}`;
+}
+function previewValue(value, maxLength = PREVIEW_LENGTH) {
+  const preview = fullPreview(value);
+  return preview.length <= maxLength ? preview : `${preview.slice(0, maxLength - 1)}\u2026`;
+}
+
+// src/live/RunTraceContext.tsx
+import { createContext as createContext3, useContext as useContext3, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var RunTraceContext = createContext3(null);
+function RunTraceProvider({ trace, children }) {
+  return /* @__PURE__ */ jsx24(RunTraceContext.Provider, { value: trace, children });
+}
+function useRunTraceStore() {
+  return useContext3(RunTraceContext);
+}
+function useRunTraceVersion(trace) {
+  return useSyncExternalStore4(
+    (onChange) => trace === null ? () => void 0 : trace.subscribe(onChange),
+    () => trace === null ? 0 : trace.getVersion(),
+    () => 0
+  );
+}
+
+// src/panels/NodeRunStats.tsx
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+function NodeRunStats({ nodeId }) {
+  const trace = useRunTraceStore();
+  useRunTraceVersion(trace);
+  if (trace === null) {
+    return null;
+  }
+  const stats = trace.statsOf(nodeId);
+  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__ */ jsxs14("div", { className: "hl-runstats-cell", children: [
+        /* @__PURE__ */ jsx25("dt", { children: "Out" }),
+        /* @__PURE__ */ jsx25("dd", { className: "hl-mono", children: stats.sent })
+      ] }),
+      /* @__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__ */ 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__ */ 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__ */ 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__ */ jsxs14("div", { className: "hl-runstats-cell is-done", children: [
+        /* @__PURE__ */ jsx25("dt", { children: "State" }),
+        /* @__PURE__ */ jsx25("dd", { children: "Finished" })
+      ] }),
+      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__ */ 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 jsx20, jsxs as jsxs12 } 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__ */ jsx26(ConnectionInspector, { core, edgeId: singleEdgeId });
+  }
   if (node === void 0) {
-    return /* @__PURE__ */ jsx20("div", { className: "hl-inspector hl-inspector-empty", children: emptyState != null ? emptyState : /* @__PURE__ */ jsxs12("div", { className: "hl-inspector-blank", children: [
-      /* @__PURE__ */ jsx20("span", { className: "hl-inspector-blank-badge", "aria-hidden": true }),
-      /* @__PURE__ */ jsx20("p", { className: "hl-inspector-blank-title", children: selectedNodes2.length > 1 ? `${String(selectedNodes2.length)} nodes selected` : "Nothing selected" }),
-      /* @__PURE__ */ jsx20("p", { className: "hl-inspector-hint", children: selectedNodes2.length > 1 ? "Select a single node to edit its parameters." : "Pick a node on the canvas or in the outline 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__ */ jsxs12("div", { className: "hl-inspector", children: [
-    /* @__PURE__ */ jsx20("div", { className: `hl-inspector-preview hl-${node.kind.toLowerCase()}`, children: imageUrl !== void 0 ? /* @__PURE__ */ jsx20("img", { className: "hl-inspector-preview-img", src: imageUrl, alt: node.name }) : /* @__PURE__ */ jsx20("span", { className: "hl-inspector-preview-badge hl-mono", children: node.kind }) }),
-    /* @__PURE__ */ jsxs12("header", { className: "hl-inspector-head", children: [
-      /* @__PURE__ */ jsx20("span", { className: `hl-inspector-kind hl-${node.kind.toLowerCase()}`, children: node.kind }),
-      /* @__PURE__ */ jsxs12("div", { className: "hl-inspector-titles", children: [
-        /* @__PURE__ */ jsx20("span", { className: "hl-inspector-name", children: node.name }),
-        /* @__PURE__ */ jsxs12("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__ */ jsxs12("section", { className: "hl-inspector-section", children: [
-      /* @__PURE__ */ jsx20("h3", { className: "hl-inspector-section-title", children: "Parameters" }),
-      fields.length === 0 ? /* @__PURE__ */ jsx20("p", { className: "hl-inspector-hint", children: "This node has no parameters." }) : /* @__PURE__ */ jsx20(
+    /* @__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__ */ jsxs12("section", { className: "hl-inspector-section", children: [
-      /* @__PURE__ */ jsx20("h3", { className: "hl-inspector-section-title", children: "Ports" }),
-      /* @__PURE__ */ jsx20("ul", { className: "hl-inspector-ports", children: node.ports.map((port) => /* @__PURE__ */ jsxs12(
+    /* @__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__ */ jsx20("span", { className: `hl-port-dot hl-dir-${port.direction.toLowerCase()}` }),
-            /* @__PURE__ */ jsx20("span", { className: "hl-mono", children: port.name }),
-            /* @__PURE__ */ jsx20("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
@@ -1179,14 +1897,14 @@ function InspectorPanel({ core, emptyState }) {
 }
 
 // src/panels/OutlineTree.tsx
-import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useState as useState3 } from "react";
+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 jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 function useTopologyComponents(core) {
-  const [tick, setTick] = useState3(0);
-  const bump = useCallback3(() => setTick((t) => t + 1), []);
-  useEffect2(() => {
+  const [tick, setTick] = useState4(0);
+  const bump = useCallback5(() => setTick((t) => t + 1), []);
+  useEffect3(() => {
     const kinds = ["nodeAdded", "nodeRemoved", "nodeChanged", "edgeAdded", "edgeRemoved"];
     const disposers = kinds.map((k) => core.events.on(k, bump));
     bump();
@@ -1196,7 +1914,7 @@ function useTopologyComponents(core) {
       }
     };
   }, [core, bump]);
-  return useMemo3(() => {
+  return useMemo4(() => {
     void tick;
     const topo = new GraphTopology();
     topo.reset(core.model.getNodes(), core.model.getEdges());
@@ -1208,15 +1926,15 @@ function OutlineTree({ core, onFocus }) {
   const selection = useSelection2(core);
   const viewState = useViewState(core);
   const diagnostics = useDiagnostics(core);
-  const [collapsed, setCollapsed] = useState3(/* @__PURE__ */ new Set());
-  const nodeById = useMemo3(() => {
+  const [collapsed, setCollapsed] = useState4(/* @__PURE__ */ new Set());
+  const nodeById = useMemo4(() => {
     const m = /* @__PURE__ */ new Map();
     for (const n of core.model.getNodes()) {
       m.set(n.id, n);
     }
     return m;
   }, [core, components]);
-  const toggleGroup = useCallback3((id) => {
+  const toggleGroup = useCallback5((id) => {
     setCollapsed((prev) => {
       const next = new Set(prev);
       if (next.has(id)) {
@@ -1227,7 +1945,7 @@ function OutlineTree({ core, onFocus }) {
       return next;
     });
   }, []);
-  const select = useCallback3(
+  const select = useCallback5(
     (id) => {
       selection.selectNodes([id], "replace");
       onFocus == null ? void 0 : onFocus(id);
@@ -1235,80 +1953,80 @@ function OutlineTree({ core, onFocus }) {
     [selection, onFocus]
   );
   if (components.length === 0) {
-    return /* @__PURE__ */ jsx21("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__ */ jsx21("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__ */ jsxs13("div", { className: "hl-outline-group", role: "treeitem", "aria-expanded": open, children: [
-      /* @__PURE__ */ jsxs13(
+    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__ */ jsx21("span", { className: "hl-outline-caret" + (open ? " is-open" : ""), "aria-hidden": true, children: "\u25B8" }),
-            /* @__PURE__ */ jsx21("span", { className: "hl-outline-groupname", children: groupName }),
-            /* @__PURE__ */ jsx21("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__ */ jsx21("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__ */ jsx21("li", { children: /* @__PURE__ */ jsxs13(
+        return /* @__PURE__ */ jsx27("li", { children: /* @__PURE__ */ jsxs16(
           "div",
           {
             className: "hl-outline-row" + (active ? " is-active" : "") + (isHidden ? " is-hidden" : "") + (isLocked ? " is-locked" : ""),
             children: [
-              /* @__PURE__ */ jsxs13("button", { className: "hl-outline-main", onClick: () => select(node.id), children: [
-                /* @__PURE__ */ jsx21(
+              /* @__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__ */ jsx21(
+                    children: thumbnail !== void 0 ? /* @__PURE__ */ jsx27(
                       "img",
                       {
                         className: "hl-outline-thumb",
                         src: thumbnail,
                         alt: ""
                       }
-                    ) : /* @__PURE__ */ jsx21(NodeIcon, { code: node.code, kind: node.kind, size: 13 })
+                    ) : /* @__PURE__ */ jsx27(NodeIcon, { code: node.code, kind: node.kind, size: 13 })
                   }
                 ),
-                /* @__PURE__ */ jsx21("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__ */ jsx21(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__ */ jsx21("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ jsx21(LockIcon, { size: 11 }) }),
-                isHidden && /* @__PURE__ */ jsx21("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ jsx21(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__ */ jsxs13("span", { className: "hl-outline-controls", children: [
-                /* @__PURE__ */ jsx21(
+              /* @__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__ */ jsx21(EyeOffIcon, {}) : /* @__PURE__ */ jsx21(EyeIcon, {})
+                    children: isHidden ? /* @__PURE__ */ jsx27(EyeOffIcon, {}) : /* @__PURE__ */ jsx27(EyeIcon, {})
                   }
                 ),
-                /* @__PURE__ */ jsx21(
+                /* @__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__ */ jsx21(LockIcon, {}) : /* @__PURE__ */ jsx21(UnlockIcon, {})
+                    children: isLocked ? /* @__PURE__ */ jsx27(LockIcon, {}) : /* @__PURE__ */ jsx27(UnlockIcon, {})
                   }
                 )
               ] })
@@ -1321,21 +2039,48 @@ function OutlineTree({ core, onFocus }) {
 }
 
 // src/panels/PreviewPanel.tsx
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 function PreviewPanel({ imageUrl, title = "Preview", status }) {
-  return /* @__PURE__ */ jsxs14("section", { className: "hl-preview", "aria-label": "Preview", children: [
-    /* @__PURE__ */ jsxs14("div", { className: "hl-preview-head", children: [
-      /* @__PURE__ */ jsx22("span", { className: "hl-preview-title", children: title }),
-      status !== void 0 && /* @__PURE__ */ jsx22("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__ */ jsx22("div", { className: "hl-preview-frame", children: imageUrl !== void 0 && imageUrl.length > 0 ? /* @__PURE__ */ jsx22("img", { className: "hl-preview-img", src: imageUrl, alt: title, draggable: false }) : /* @__PURE__ */ jsx22("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 jsx23 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function RailTabs({ tabs, active, onChange }) {
-  return /* @__PURE__ */ jsx23("div", { className: "hl-railtabs", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx30("div", { className: "hl-railtabs", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsx30(
     "button",
     {
       role: "tab",
@@ -1349,20 +2094,20 @@ function RailTabs({ tabs, active, onChange }) {
 }
 
 // src/panels/AssetGrid.tsx
-import { jsx as jsx24 } 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__ */ jsx24("p", { className: "hl-assetgrid-empty hl-mono", children: emptyHint });
+    return /* @__PURE__ */ jsx31("p", { className: "hl-assetgrid-empty hl-mono", children: emptyHint });
   }
-  return /* @__PURE__ */ jsx24("div", { className: "hl-assetgrid", children: items.map((item) => {
+  return /* @__PURE__ */ jsx31("div", { className: "hl-assetgrid", children: items.map((item) => {
     var _a;
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx31(
       "button",
       {
         className: "hl-assetgrid-cell",
         onClick: () => onSelect == null ? void 0 : onSelect(item.id),
         title: item.label,
-        children: /* @__PURE__ */ jsx24("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
     );
@@ -1370,10 +2115,10 @@ function AssetGrid({ items, onSelect, emptyHint = "No assets yet" }) {
 }
 
 // src/panels/PositionPanel.tsx
-import { useCallback as useCallback4, useEffect as useEffect3, useReducer } from "react";
+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 jsx25, jsxs as jsxs15 } 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 = [];
@@ -1388,8 +2133,9 @@ function selectedNodes(core) {
 function PositionPanel({ core, livePosition }) {
   var _a;
   useSelection3(core);
+  const readOnly = useReadOnly3(core);
   const [, bump] = useReducer((n) => n + 1, 0);
-  useEffect3(() => {
+  useEffect4(() => {
     const kinds = ["nodeChanged", "nodeAdded", "nodeRemoved"];
     const disposers = kinds.map((k) => core.events.on(k, bump));
     return () => {
@@ -1401,7 +2147,7 @@ function PositionPanel({ core, livePosition }) {
   const nodes = selectedNodes(core);
   const single = nodes.length === 1 ? nodes[0] : void 0;
   const shownPos = single !== void 0 ? (_a = livePosition == null ? void 0 : livePosition(single.id)) != null ? _a : single.position : void 0;
-  const moveAll = useCallback4(
+  const moveAll = useCallback6(
     (fn) => {
       const targets = selectedNodes(core);
       if (targets.length === 0) {
@@ -1415,7 +2161,7 @@ function PositionPanel({ core, livePosition }) {
     },
     [core]
   );
-  const align = useCallback4(
+  const align = useCallback6(
     (kind) => {
       const targets = selectedNodes(core);
       if (targets.length === 0) {
@@ -1448,7 +2194,7 @@ function PositionPanel({ core, livePosition }) {
     },
     [core, moveAll]
   );
-  const setCoord = useCallback4(
+  const setCoord = useCallback6(
     (axis, value) => {
       if (single === void 0 || Number.isNaN(value)) {
         return;
@@ -1458,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" },
@@ -1467,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__ */ jsxs15("section", { className: "hl-position", children: [
-    /* @__PURE__ */ jsx25("h3", { className: "hl-position-title hl-mono", children: "Position" }),
-    /* @__PURE__ */ jsx25("div", { className: "hl-position-align", role: "group", "aria-label": "Align", children: alignButtons.map((b) => /* @__PURE__ */ jsx25(
+  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",
@@ -1477,55 +2223,55 @@ function PositionPanel({ core, livePosition }) {
         disabled,
         title: b.label,
         "aria-label": b.label,
-        children: /* @__PURE__ */ jsx25("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__ */ jsx25("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__ */ jsxs15("div", { className: "hl-position-coords", children: [
-      /* @__PURE__ */ jsxs15("label", { className: "hl-position-field", children: [
-        /* @__PURE__ */ jsx25(
+    /* @__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__ */ jsx25("span", { className: "hl-position-axis hl-mono", children: "X" })
+        /* @__PURE__ */ jsx32("span", { className: "hl-position-axis hl-mono", children: "X" })
       ] }),
-      /* @__PURE__ */ jsxs15("label", { className: "hl-position-field", children: [
-        /* @__PURE__ */ jsx25(
+      /* @__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__ */ jsx25("span", { className: "hl-position-axis hl-mono", children: "Y" })
+        /* @__PURE__ */ jsx32("span", { className: "hl-position-axis hl-mono", children: "Y" })
       ] })
     ] })
   ] });
 }
 
 // src/command-palette/NodeSearch.tsx
-import { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef3, useState as useState4 } from "react";
-import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useCallback as useCallback7, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef5, useState as useState5 } from "react";
+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 }) {
   const { state } = controller;
-  const [query, setQuery] = useState4("");
-  const [active, setActive] = useState4(0);
-  const inputRef = useRef3(null);
+  const [query, setQuery] = useState5("");
+  const [active, setActive] = useState5(0);
+  const inputRef = useRef5(null);
   const isOpen = state !== void 0;
-  useEffect4(() => {
+  useEffect5(() => {
     var _a;
     if (isOpen) {
       setQuery("");
@@ -1533,12 +2279,12 @@ function NodeSearch({ controller }) {
       (_a = inputRef.current) == null ? void 0 : _a.focus();
     }
   }, [isOpen]);
-  const results = useMemo4(
+  const results = useMemo5(
     () => state !== void 0 ? controller.results(query) : [],
     [controller, state, query]
   );
   const clampedActive = results.length === 0 ? 0 : Math.min(active, results.length - 1);
-  const choose = useCallback5(
+  const choose = useCallback7(
     (view) => {
       if (view !== void 0) {
         controller.commit(view);
@@ -1546,7 +2292,7 @@ function NodeSearch({ controller }) {
     },
     [controller]
   );
-  const onKeyDown = useCallback5(
+  const onKeyDown = useCallback7(
     (event) => {
       switch (event.key) {
         case "ArrowDown":
@@ -1576,8 +2322,8 @@ function NodeSearch({ controller }) {
   }
   const style = clampToViewport(state.screen.x, state.screen.y);
   const connectMode = state.pending !== void 0;
-  return /* @__PURE__ */ jsxs16(Fragment4, { children: [
-    /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs20(Fragment5, { children: [
+    /* @__PURE__ */ jsx33(
       "div",
       {
         className: "hl-node-search-scrim",
@@ -1586,10 +2332,10 @@ function NodeSearch({ controller }) {
         }
       }
     ),
-    /* @__PURE__ */ jsxs16("div", { className: "hl-node-search", style, role: "dialog", "aria-label": "Create node", children: [
-      /* @__PURE__ */ jsxs16("div", { className: "hl-node-search-field", children: [
-        /* @__PURE__ */ jsx26("span", { className: "hl-node-search-glyph", "aria-hidden": true, children: connectMode ? "\u2933" : "\uFF0B" }),
-        /* @__PURE__ */ jsx26(
+    /* @__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,
@@ -1607,12 +2353,12 @@ function NodeSearch({ controller }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs16("ul", { className: "hl-node-search-list", role: "listbox", children: [
-        results.length === 0 && /* @__PURE__ */ jsx26("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__ */ jsxs16(
+          return /* @__PURE__ */ jsxs20(
             "li",
             {
               role: "option",
@@ -1624,15 +2370,15 @@ function NodeSearch({ controller }) {
                 choose(view);
               },
               children: [
-                /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsx33(
                   "span",
                   {
                     className: `hl-node-search-kind hl-mono hl-kind-${kind.toLowerCase()}`,
                     children: kind
                   }
                 ),
-                /* @__PURE__ */ jsx26("span", { className: "hl-node-search-label", children: highlight(descriptor.displayName, view.result.match) }),
-                view.connectPortId !== void 0 && /* @__PURE__ */ jsx26("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
@@ -1646,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__ */ jsx26("mark", { className: "hl-node-search-hit", children: ch }, i) : /* @__PURE__ */ jsx26("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) {
@@ -1659,7 +2405,7 @@ function clampToViewport(x, y) {
 }
 
 // src/command-palette/useNodeSearch.ts
-import { useCallback as useCallback6, useMemo as useMemo5, useState as useState5 } from "react";
+import { useCallback as useCallback8, useMemo as useMemo6, useState as useState6 } from "react";
 import { AddNodeCommand, ConnectCommand } from "@hlang-tech/editor-core";
 
 // src/command-palette/fuzzy.ts
@@ -1750,21 +2496,21 @@ function firstCompletingPort(ports, pending, validator) {
 
 // src/command-palette/useNodeSearch.ts
 function useNodeSearch(core) {
-  const [state, setState] = useState5(void 0);
-  const openBlank = useCallback6((screen, flow) => {
+  const [state, setState] = useState6(void 0);
+  const openBlank = useCallback8((screen, flow) => {
     setState({ screen, flow });
   }, []);
-  const openFromConnection = useCallback6(
+  const openFromConnection = useCallback8(
     (screen, flow, pending) => {
       setState({ screen, flow, pending });
     },
     []
   );
-  const close = useCallback6(() => {
+  const close = useCallback8(() => {
     setState(void 0);
   }, []);
   const descriptors = core.registry.list();
-  const results = useCallback6(
+  const results = useCallback8(
     (query) => {
       if ((state == null ? void 0 : state.pending) !== void 0) {
         return connectableCandidates(
@@ -1778,7 +2524,7 @@ function useNodeSearch(core) {
     },
     [state, descriptors, core]
   );
-  const commit = useCallback6(
+  const commit = useCallback8(
     (view) => {
       if (state === void 0) {
         return;
@@ -1802,14 +2548,14 @@ function useNodeSearch(core) {
     },
     [state, core]
   );
-  return useMemo5(
+  return useMemo6(
     () => ({ state, openBlank, openFromConnection, close, results, commit }),
     [state, openBlank, openFromConnection, close, results, commit]
   );
 }
 
 // src/command-palette/useNodeSearchTriggers.ts
-import { useCallback as useCallback7, useRef as useRef4 } from "react";
+import { useCallback as useCallback9, useRef as useRef6 } from "react";
 import { useReactFlow } from "@xyflow/react";
 var DEFAULT_DOUBLE_CLICK_MS = 350;
 function useNodeSearchTriggers(core, search, options = {}) {
@@ -1817,16 +2563,16 @@ function useNodeSearchTriggers(core, search, options = {}) {
   const flow = useReactFlow();
   const doubleClickMs = (_a = options.doubleClickMs) != null ? _a : DEFAULT_DOUBLE_CLICK_MS;
   const now = (_b = options.now) != null ? _b : defaultNow;
-  const startRef = useRef4(null);
-  const lastPaneClickRef = useRef4(Number.NEGATIVE_INFINITY);
-  const onConnectStart = useCallback7((_event, params) => {
+  const startRef = useRef6(null);
+  const lastPaneClickRef = useRef6(Number.NEGATIVE_INFINITY);
+  const onConnectStart = useCallback9((_event, params) => {
     startRef.current = params;
   }, []);
-  const onConnectEnd = useCallback7(
+  const onConnectEnd = useCallback9(
     (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) {
@@ -1855,8 +2601,11 @@ function useNodeSearchTriggers(core, search, options = {}) {
     },
     [core, flow, search]
   );
-  const onPaneClick = useCallback7(
+  const onPaneClick = useCallback9(
     (event) => {
+      if (core.mode.readOnly) {
+        return;
+      }
       const t = now();
       const isDouble = t - lastPaneClickRef.current <= doubleClickMs;
       lastPaneClickRef.current = t;
@@ -1867,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 };
 }
@@ -1887,7 +2636,7 @@ function pointerOf(event) {
 }
 
 // src/hooks/useEditorHotkeys.ts
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 import { useClipboard } from "@hlang-tech/editor-react";
 function isEditableTarget(target) {
   if (!(target instanceof HTMLElement)) {
@@ -1906,7 +2655,7 @@ function withinScope(target, scope) {
 function useEditorHotkeys(core, options = {}) {
   const clipboard = useClipboard(core);
   const { scope } = options;
-  useEffect5(() => {
+  useEffect6(() => {
     const onKeyDown = (event) => {
       if (!withinScope(event.target, scope) || isEditableTarget(event.target)) {
         return;
@@ -1969,33 +2718,33 @@ function useEditorHotkeys(core, options = {}) {
 }
 
 // src/context-menu/NodeContextMenu.tsx
-import { useCallback as useCallback8, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef5, useState as useState6 } from "react";
-import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useCallback as useCallback10, useEffect as useEffect7, useMemo as useMemo7, useRef as useRef7, useState as useState7 } from "react";
+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;
 var MENU_VPAD = 12;
 function NodeContextMenu({ controller, items }) {
   const { state } = controller;
-  const [active, setActive] = useState6(0);
-  const menuRef = useRef5(null);
+  const [active, setActive] = useState7(0);
+  const menuRef = useRef7(null);
   const isOpen = state !== void 0;
-  useEffect6(() => {
+  useEffect7(() => {
     var _a;
     if (isOpen) {
       setActive(0);
       (_a = menuRef.current) == null ? void 0 : _a.focus();
     }
   }, [isOpen]);
-  const rows = useMemo6(
+  const rows = useMemo7(
     () => state !== void 0 ? items(state.nodeId) : [],
     [items, state]
   );
-  const enabledIndices = useMemo6(
+  const enabledIndices = useMemo7(
     () => rows.map((r, i) => r.disabled ? -1 : i).filter((i) => i >= 0),
     [rows]
   );
-  const move = useCallback8(
+  const move = useCallback10(
     (delta) => {
       if (enabledIndices.length === 0) {
         return;
@@ -2009,7 +2758,7 @@ function NodeContextMenu({ controller, items }) {
     },
     [enabledIndices]
   );
-  const choose = useCallback8(
+  const choose = useCallback10(
     (item) => {
       if (item === void 0 || item.disabled) {
         return;
@@ -2019,7 +2768,7 @@ function NodeContextMenu({ controller, items }) {
     },
     [controller]
   );
-  const onKeyDown = useCallback8(
+  const onKeyDown = useCallback10(
     (event) => {
       switch (event.key) {
         case "ArrowDown":
@@ -2048,8 +2797,8 @@ function NodeContextMenu({ controller, items }) {
     return null;
   }
   const style = clampToViewport2(state.screen.x, state.screen.y, rows.length);
-  return /* @__PURE__ */ jsxs17(Fragment5, { children: [
-    /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs21(Fragment6, { children: [
+    /* @__PURE__ */ jsx34(
       "div",
       {
         className: "hl-ctx-scrim",
@@ -2062,7 +2811,7 @@ function NodeContextMenu({ controller, items }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx34(
       "div",
       {
         ref: menuRef,
@@ -2072,7 +2821,7 @@ function NodeContextMenu({ controller, items }) {
         "aria-label": "Node actions",
         tabIndex: -1,
         onKeyDown,
-        children: rows.map((item, index) => /* @__PURE__ */ jsxs17(
+        children: rows.map((item, index) => /* @__PURE__ */ jsxs21(
           "button",
           {
             type: "button",
@@ -2085,9 +2834,9 @@ function NodeContextMenu({ controller, items }) {
               choose(item);
             },
             children: [
-              /* @__PURE__ */ jsx27("span", { className: "hl-ctx-item-icon", "aria-hidden": true, children: item.icon }),
-              /* @__PURE__ */ jsx27("span", { className: "hl-ctx-item-label", children: item.label }),
-              item.shortcut !== void 0 && /* @__PURE__ */ jsx27("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
@@ -2107,21 +2856,21 @@ function clampToViewport2(x, y, rowCount) {
 }
 
 // src/context-menu/useNodeContextMenu.ts
-import { useCallback as useCallback9, useMemo as useMemo7, useState as useState7 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo8, useState as useState8 } from "react";
 function useNodeContextMenu() {
-  const [state, setState] = useState7(void 0);
-  const openForNode = useCallback9((screen, nodeId) => {
+  const [state, setState] = useState8(void 0);
+  const openForNode = useCallback11((screen, nodeId) => {
     setState({ screen, nodeId });
   }, []);
-  const close = useCallback9(() => {
+  const close = useCallback11(() => {
     setState(void 0);
   }, []);
-  return useMemo7(() => ({ state, openForNode, close }), [state, openForNode, close]);
+  return useMemo8(() => ({ state, openForNode, close }), [state, openForNode, close]);
 }
 
 // src/overlays/Cheatsheet.tsx
-import { useEffect as useEffect7, useRef as useRef6 } from "react";
-import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useRef as useRef8 } from "react";
+import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
 var DEFAULT_GROUPS = [
   {
     title: "Edit",
@@ -2157,8 +2906,8 @@ var DEFAULT_GROUPS = [
   }
 ];
 function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
-  const dialogRef = useRef6(null);
-  useEffect7(() => {
+  const dialogRef = useRef8(null);
+  useEffect8(() => {
     var _a;
     if (!open) {
       return;
@@ -2175,9 +2924,9 @@ function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ jsxs18(Fragment6, { children: [
-    /* @__PURE__ */ jsx28("div", { className: "hl-cheat-scrim", onPointerDown: onClose }),
-    /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs22(Fragment7, { children: [
+    /* @__PURE__ */ jsx35("div", { className: "hl-cheat-scrim", onPointerDown: onClose }),
+    /* @__PURE__ */ jsxs22(
       "div",
       {
         ref: dialogRef,
@@ -2187,18 +2936,18 @@ function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
         "aria-label": "Keyboard shortcuts",
         tabIndex: -1,
         children: [
-          /* @__PURE__ */ jsxs18("div", { className: "hl-cheat-head", children: [
-            /* @__PURE__ */ jsx28("span", { className: "hl-cheat-title", children: "Shortcuts" }),
-            /* @__PURE__ */ jsx28("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__ */ jsx28("div", { className: "hl-cheat-grid", children: groups.map((group) => /* @__PURE__ */ jsxs18("section", { className: "hl-cheat-group", children: [
-            /* @__PURE__ */ jsx28("h3", { className: "hl-cheat-group-title hl-mono", children: group.title }),
-            /* @__PURE__ */ jsx28("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__ */ jsxs18("li", { className: "hl-cheat-row", children: [
-                /* @__PURE__ */ jsx28("span", { className: "hl-cheat-label", children: row.label }),
-                /* @__PURE__ */ jsx28("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)) })
@@ -2209,13 +2958,13 @@ function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
 }
 
 // src/overlays/Toast.tsx
-import { createContext as createContext3, useCallback as useCallback10, useContext as useContext3, useMemo as useMemo8, useRef as useRef7, useState as useState8 } from "react";
-import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
-var ToastCtx = createContext3({ show: () => void 0 });
+import { createContext as createContext4, useCallback as useCallback12, useContext as useContext4, useMemo as useMemo9, useRef as useRef9, useState as useState9 } from "react";
+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] = useState8([]);
-  const seq = useRef7(0);
-  const show = useCallback10(
+  const [items, setItems] = useState9([]);
+  const seq = useRef9(0);
+  const show = useCallback12(
     (message) => {
       seq.current += 1;
       const id = seq.current;
@@ -2226,22 +2975,22 @@ function ToastProvider({ children, duration = 2200 }) {
     },
     [duration]
   );
-  const api = useMemo8(() => ({ show }), [show]);
-  return /* @__PURE__ */ jsxs19(ToastCtx.Provider, { value: api, children: [
+  const api = useMemo9(() => ({ show }), [show]);
+  return /* @__PURE__ */ jsxs23(ToastCtx.Provider, { value: api, children: [
     children,
-    /* @__PURE__ */ jsx29("div", { className: "hl-toast-stack", "aria-live": "polite", children: items.map((t) => /* @__PURE__ */ jsx29("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() {
-  return useContext3(ToastCtx);
+  return useContext4(ToastCtx);
 }
 
 // src/hooks/useLiveSignals.ts
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 function useLiveSignals(core, handle, explicitStore) {
   const contextStore = useLiveSignalStore();
   const store = explicitStore != null ? explicitStore : contextStore;
-  useEffect8(() => {
+  useEffect9(() => {
     if (store === null) {
       return;
     }
@@ -2250,6 +2999,8 @@ function useLiveSignals(core, handle, explicitStore) {
         id: edge.id,
         sourceNodeId: edge.source.nodeId,
         sourcePortId: edge.source.portId,
+        targetNodeId: edge.target.nodeId,
+        targetPortId: edge.target.portId,
         isError: edge.source.portId === "@node/error"
       }));
       store.setEdgeIndex(entries);
@@ -2262,7 +3013,8 @@ function useLiveSignals(core, handle, explicitStore) {
       removed.dispose();
     };
   }, [core, store]);
-  useEffect8(() => {
+  useEffect9(() => {
+    var _a, _b, _c;
     if (store === null) {
       return;
     }
@@ -2270,45 +3022,457 @@ function useLiveSignals(core, handle, explicitStore) {
       store.reset();
       return;
     }
-    const activitySub = handle.onActivity((e) => store.markActivity(e.nodeId, e.portId));
+    const signalSub = (_b = (_a = handle.onDelivery) == null ? void 0 : _a.call(handle, (event) => {
+      store.markDelivery(event);
+    })) != null ? _b : handle.onActivity((e) => store.markActivity(e.nodeId, e.portId));
     const errorSub = handle.onError((e) => store.markError(e.nodeId));
+    const finishedSub = (_c = handle.onFinished) == null ? void 0 : _c.call(handle, (e) => {
+      store.markFinished(e.nodeId);
+    });
     return () => {
-      activitySub.dispose();
+      signalSub.dispose();
       errorSub.dispose();
+      finishedSub == null ? void 0 : finishedSub.dispose();
       store.reset();
     };
   }, [store, handle]);
 }
+
+// src/live/run-trace.ts
+var RUN_LOG_CAPACITY = 500;
+var RunTrace = class {
+  constructor(options = {}) {
+    /** The log as a ring: `ring[(head + i) % capacity]` is the i-th oldest entry. */
+    this.ring = [];
+    this.head = 0;
+    this.droppedCount = 0;
+    this.seq = 0;
+    this.startedAt = 0;
+    this.stats = /* @__PURE__ */ new Map();
+    this.listeners = /* @__PURE__ */ new Set();
+    /** Bumped by every change; the entries cache follows it. */
+    this.revision = 0;
+    /** Bumped once per notified frame; what subscribers compare. */
+    this.version = 0;
+    this.frame = null;
+    /** The entries as an array, rebuilt only after a change. */
+    this.entriesCache = [];
+    this.entriesRevision = -1;
+    var _a, _b;
+    const capacity = (_a = options.capacity) != null ? _a : RUN_LOG_CAPACITY;
+    if (!Number.isInteger(capacity) || capacity < 1) {
+      throw new RangeError("RunTrace capacity must be a positive integer.");
+    }
+    this.capacity = capacity;
+    this.deps = (_b = options.deps) != null ? _b : defaultLiveDeps;
+  }
+  /** Begins a run: clears everything and times entries from now. */
+  start() {
+    this.clear();
+    this.startedAt = this.deps.now();
+  }
+  /** Forgets the log and the statistics. */
+  clear() {
+    this.ring.length = 0;
+    this.head = 0;
+    this.droppedCount = 0;
+    this.stats.clear();
+    this.changed();
+  }
+  recordDelivery(event) {
+    this.append({
+      kind: "delivery",
+      seq: this.nextSeq(),
+      at: this.elapsed(),
+      sourceNodeId: event.sourceNodeId,
+      sourcePortId: event.sourcePortId,
+      targetNodeId: event.targetNodeId,
+      targetPortId: event.targetPortId,
+      message: event.message,
+      duration: event.duration
+    });
+    const source = this.statsFor(event.sourceNodeId);
+    source.sent += 1;
+    source.lastSent = event.message;
+    const target = this.statsFor(event.targetNodeId);
+    target.received += 1;
+    target.totalMs += event.duration;
+    target.maxMs = Math.max(target.maxMs, event.duration);
+    target.lastReceived = event.message;
+    this.changed();
+  }
+  recordError(event) {
+    this.append({ kind: "error", seq: this.nextSeq(), at: this.elapsed(), nodeId: event.nodeId, error: event.error });
+    this.statsFor(event.nodeId).errors += 1;
+    this.changed();
+  }
+  recordEnded(event) {
+    this.append({ kind: "ended", seq: this.nextSeq(), at: this.elapsed(), nodeId: event.nodeId, portId: event.portId });
+    this.statsFor(event.nodeId);
+    this.changed();
+  }
+  recordFinished(event) {
+    this.append({ kind: "finished", seq: this.nextSeq(), at: this.elapsed(), nodeId: event.nodeId });
+    this.statsFor(event.nodeId).finished = true;
+    this.changed();
+  }
+  recordDropped(event) {
+    this.append({
+      kind: "dropped",
+      seq: this.nextSeq(),
+      at: this.elapsed(),
+      sourceNodeId: event.sourceNodeId,
+      sourcePortId: event.sourcePortId,
+      targetNodeId: event.targetNodeId,
+      targetPortId: event.targetPortId,
+      message: event.message
+    });
+    this.statsFor(event.sourceNodeId);
+    this.statsFor(event.targetNodeId).dropped += 1;
+    this.changed();
+  }
+  /** The log, oldest first. The same array is returned until something changes. */
+  entries() {
+    if (this.entriesRevision !== this.revision) {
+      const count = this.ring.length;
+      const ordered = [];
+      for (let i = 0; i < count; i += 1) {
+        const entry = this.ring[(this.head + i) % count];
+        if (entry !== void 0) {
+          ordered.push(entry);
+        }
+      }
+      this.entriesCache = ordered;
+      this.entriesRevision = this.revision;
+    }
+    return this.entriesCache;
+  }
+  /** A node's statistics, or `undefined` when it has done nothing this run. */
+  statsOf(nodeId) {
+    const stats = this.stats.get(nodeId);
+    return stats === void 0 ? void 0 : { ...stats };
+  }
+  /** How many entries the log has let go of to stay within its capacity. */
+  get dropped() {
+    return this.droppedCount;
+  }
+  /** Changes once per notified frame; a snapshot for `useSyncExternalStore`. */
+  getVersion() {
+    return this.version;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  append(entry) {
+    if (this.ring.length < this.capacity) {
+      this.ring.push(entry);
+      return;
+    }
+    this.ring[this.head] = entry;
+    this.head = (this.head + 1) % this.capacity;
+    this.droppedCount += 1;
+  }
+  nextSeq() {
+    this.seq += 1;
+    return this.seq;
+  }
+  elapsed() {
+    return this.deps.now() - this.startedAt;
+  }
+  statsFor(nodeId) {
+    let stats = this.stats.get(nodeId);
+    if (stats === void 0) {
+      stats = {
+        received: 0,
+        sent: 0,
+        errors: 0,
+        totalMs: 0,
+        maxMs: 0,
+        lastReceived: void 0,
+        lastSent: void 0,
+        dropped: 0,
+        finished: false
+      };
+      this.stats.set(nodeId, stats);
+    }
+    return stats;
+  }
+  /** Schedules one notification for the next frame, however many changes come before it. */
+  changed() {
+    this.revision += 1;
+    if (this.frame !== null) {
+      return;
+    }
+    this.frame = this.deps.schedule(() => {
+      this.frame = null;
+      this.version += 1;
+      for (const listener of [...this.listeners]) {
+        listener();
+      }
+    });
+  }
+};
+function involves(entry, nodeId) {
+  switch (entry.kind) {
+    case "delivery":
+    case "dropped":
+      return entry.sourceNodeId === nodeId || entry.targetNodeId === nodeId;
+    case "error":
+    case "ended":
+    case "finished":
+      return entry.nodeId === nodeId;
+  }
+}
+
+// src/hooks/useRunTrace.ts
+import { useEffect as useEffect10 } from "react";
+function useRunTrace(trace, handle) {
+  useEffect10(() => {
+    var _a, _b, _c, _d;
+    if (handle === void 0) {
+      return;
+    }
+    trace.start();
+    const deliveries = (_a = handle.onDelivery) == null ? void 0 : _a.call(handle, (event) => {
+      trace.recordDelivery(event);
+    });
+    const errors = handle.onError((event) => {
+      trace.recordError(event);
+    });
+    const ended = (_b = handle.onEnded) == null ? void 0 : _b.call(handle, (event) => {
+      trace.recordEnded(event);
+    });
+    const finished = (_c = handle.onFinished) == null ? void 0 : _c.call(handle, (event) => {
+      trace.recordFinished(event);
+    });
+    const dropped = (_d = handle.onDropped) == null ? void 0 : _d.call(handle, (event) => {
+      trace.recordDropped(event);
+    });
+    return () => {
+      deliveries == null ? void 0 : deliveries.dispose();
+      errors.dispose();
+      ended == null ? void 0 : ended.dispose();
+      finished == null ? void 0 : finished.dispose();
+      dropped == null ? void 0 : dropped.dispose();
+    };
+  }, [trace, handle]);
+}
+
+// src/hooks/useFollowScroll.ts
+import { useCallback as useCallback13, useLayoutEffect, useRef as useRef10, useState as useState10 } from "react";
+var FOLLOW_SLACK_PX = 24;
+function useFollowScroll() {
+  const ref = useRef10(null);
+  const [follow, setFollow] = useState10(true);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (follow && element !== null) {
+      element.scrollTop = element.scrollHeight;
+    }
+  });
+  const onScroll = useCallback13((event) => {
+    const element = event.currentTarget;
+    setFollow(element.scrollHeight - element.scrollTop - element.clientHeight <= FOLLOW_SLACK_PX);
+  }, []);
+  return { ref, onScroll, follow, setFollow };
+}
+
+// src/panels/RunLog.tsx
+import { useState as useState11 } from "react";
+import { useSelection as useSelection4 } from "@hlang-tech/editor-react";
+import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
+function RunLog({ core, onSelectNode, title = "Run log", leading }) {
+  const trace = useRunTraceStore();
+  useRunTraceVersion(trace);
+  const selection = useSelection4(core);
+  const [onlySelected, setOnlySelected] = useState11(false);
+  const { ref: bodyRef, onScroll, follow, setFollow } = useFollowScroll();
+  const all = trace === null ? [] : trace.entries();
+  const selectedId = selection.selectedNodes.length === 1 ? selection.selectedNodes[0] : void 0;
+  const filterId = onlySelected ? selectedId : void 0;
+  const entries = filterId === void 0 ? all : all.filter((entry) => involves(entry, filterId));
+  if (trace === null) {
+    return null;
+  }
+  const label = (nodeId) => {
+    var _a, _b;
+    return (_b = (_a = core.model.getNode(nodeId)) == null ? void 0 : _a.name) != null ? _b : nodeId;
+  };
+  const choose = (nodeId) => {
+    core.selection.selectNodes([nodeId], "replace");
+    onSelectNode == null ? void 0 : onSelectNode(nodeId);
+  };
+  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({
+  entry,
+  label,
+  onChoose
+}) {
+  switch (entry.kind) {
+    case "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__ */ 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__ */ 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__ */ 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__ */ 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) })
+      ] });
+  }
+}
+function Event({
+  className: className2,
+  at,
+  ms,
+  onChoose,
+  children
+}) {
+  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__ */ jsx37("span", { className: "hl-runlog-ms", children: ms })
+  ] }) });
+}
+function NodePort({ node, 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__ */ 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 {
   AssetGrid,
   AssetNodeChrome,
   CanvasChrome,
   CanvasDock,
   Cheatsheet,
+  ClearIcon,
+  ConnectionInspector,
+  DEFAULT_EDGE_CAPACITY,
+  DEFAULT_MIN_CANVAS_HEIGHT,
   DiagnosticBadge,
   EditorShell,
   EditorUIThemeProvider,
   EmptyState,
+  FOLLOW_SLACK_PX,
+  FOOTER_KEY_STEP,
+  FilterIcon,
   FlowEdge,
+  FollowIcon,
+  FooterResizer,
   HlangNode,
   InspectorPanel,
   KIND_ROLE,
   KIND_TOKEN,
+  LivePulse,
   LiveSignalProvider,
   LiveSignalStore,
   NodeBodySlot,
   NodeChrome,
   NodeContextMenu,
   NodeInteractionProvider,
+  NodeRunStats,
   NodeSearch,
   OutlineTree,
+  PREVIEW_LENGTH,
+  PanelAction,
+  PanelHead,
   ParamForm,
   PillNodeChrome,
   PortRow,
   PositionPanel,
   PreviewPanel,
+  RUN_LOG_CAPACITY,
   RailTabs,
+  ReadOnlyBadge,
   RunButton,
+  RunLog,
+  RunTrace,
+  RunTraceProvider,
+  SELF_LOOP_CLEARANCE,
+  SELF_LOOP_RADIUS,
   SignalBar,
   TOKEN_NAMES,
   ToastProvider,
@@ -2317,26 +3481,47 @@ export {
   ToolbarGhostButton,
   ToolbarStat,
   UndoRedo,
+  boundsFields,
+  capacityLabel,
+  clampFooter,
   connectableCandidates,
   createHlangFlowTypes,
   createTheme,
+  defaultLiveDeps,
   deriveParamSchema,
   descriptorCandidates,
+  footerBounds,
+  formatDuration,
+  formatElapsed,
   fuzzyRank,
   fuzzyScore,
+  involves,
   isEditableTarget,
+  nextBounds,
+  previewValue,
+  resizeByKey,
   searchNodes,
+  selfLoopPath,
+  toggleCollapsed,
   tokenVar,
+  useEdgeBounds,
   useEdgeFlowing,
+  useEdgePulse,
   useEditorHotkeys,
+  useFollowScroll,
+  useFooterResize,
   useLiveSignalStore,
   useLiveSignals,
   useNodeContextMenu,
   useNodeInteraction,
   useNodeLiveState,
   useNodeParams,
+  useNodePulse,
   useNodeSearch,
   useNodeSearchTriggers,
+  useRunTrace,
+  useRunTraceStore,
+  useRunTraceVersion,
   useToast
 };
 //# sourceMappingURL=index.mjs.map