@hlang-org/editor-ui 0.3.0 → 0.5.0

package/lib/index.js

@@ -25,30 +25,51 @@ __export(index_exports, {
   CanvasChrome: () => CanvasChrome,
   CanvasDock: () => CanvasDock,
   Cheatsheet: () => Cheatsheet,
+  ClearIcon: () => ClearIcon,
+  ConnectionInspector: () => ConnectionInspector,
+  DEFAULT_EDGE_CAPACITY: () => DEFAULT_EDGE_CAPACITY,
+  DEFAULT_MIN_CANVAS_HEIGHT: () => DEFAULT_MIN_CANVAS_HEIGHT,
   DiagnosticBadge: () => DiagnosticBadge,
   EditorShell: () => EditorShell,
   EditorUIThemeProvider: () => EditorUIThemeProvider,
   EmptyState: () => EmptyState,
+  FOLLOW_SLACK_PX: () => FOLLOW_SLACK_PX,
+  FOOTER_KEY_STEP: () => FOOTER_KEY_STEP,
+  FilterIcon: () => FilterIcon,
   FlowEdge: () => FlowEdge,
+  FollowIcon: () => FollowIcon,
+  FooterResizer: () => FooterResizer,
   HlangNode: () => HlangNode,
   InspectorPanel: () => InspectorPanel,
   KIND_ROLE: () => KIND_ROLE,
   KIND_TOKEN: () => KIND_TOKEN,
+  LivePulse: () => LivePulse,
   LiveSignalProvider: () => LiveSignalProvider,
   LiveSignalStore: () => LiveSignalStore,
   NodeBodySlot: () => NodeBodySlot,
   NodeChrome: () => NodeChrome,
   NodeContextMenu: () => NodeContextMenu,
   NodeInteractionProvider: () => NodeInteractionProvider,
+  NodeRunStats: () => NodeRunStats,
   NodeSearch: () => NodeSearch,
   OutlineTree: () => OutlineTree,
+  PREVIEW_LENGTH: () => PREVIEW_LENGTH,
+  PanelAction: () => PanelAction,
+  PanelHead: () => PanelHead,
   ParamForm: () => ParamForm,
   PillNodeChrome: () => PillNodeChrome,
   PortRow: () => PortRow,
   PositionPanel: () => PositionPanel,
   PreviewPanel: () => PreviewPanel,
+  RUN_LOG_CAPACITY: () => RUN_LOG_CAPACITY,
   RailTabs: () => RailTabs,
+  ReadOnlyBadge: () => ReadOnlyBadge,
   RunButton: () => RunButton,
+  RunLog: () => RunLog,
+  RunTrace: () => RunTrace,
+  RunTraceProvider: () => RunTraceProvider,
+  SELF_LOOP_CLEARANCE: () => SELF_LOOP_CLEARANCE,
+  SELF_LOOP_RADIUS: () => SELF_LOOP_RADIUS,
   SignalBar: () => SignalBar,
   TOKEN_NAMES: () => TOKEN_NAMES,
   ToastProvider: () => ToastProvider,
@@ -57,26 +78,47 @@ __export(index_exports, {
   ToolbarGhostButton: () => ToolbarGhostButton,
   ToolbarStat: () => ToolbarStat,
   UndoRedo: () => UndoRedo,
+  boundsFields: () => boundsFields,
+  capacityLabel: () => capacityLabel,
+  clampFooter: () => clampFooter,
   connectableCandidates: () => connectableCandidates,
   createHlangFlowTypes: () => createHlangFlowTypes,
   createTheme: () => createTheme,
+  defaultLiveDeps: () => defaultLiveDeps,
   deriveParamSchema: () => deriveParamSchema,
   descriptorCandidates: () => descriptorCandidates,
+  footerBounds: () => footerBounds,
+  formatDuration: () => formatDuration,
+  formatElapsed: () => formatElapsed,
   fuzzyRank: () => fuzzyRank,
   fuzzyScore: () => fuzzyScore,
+  involves: () => involves,
   isEditableTarget: () => isEditableTarget,
+  nextBounds: () => nextBounds,
+  previewValue: () => previewValue,
+  resizeByKey: () => resizeByKey,
   searchNodes: () => searchNodes,
+  selfLoopPath: () => selfLoopPath,
+  toggleCollapsed: () => toggleCollapsed,
   tokenVar: () => tokenVar,
+  useEdgeBounds: () => useEdgeBounds,
   useEdgeFlowing: () => useEdgeFlowing,
+  useEdgePulse: () => useEdgePulse,
   useEditorHotkeys: () => useEditorHotkeys,
+  useFollowScroll: () => useFollowScroll,
+  useFooterResize: () => useFooterResize,
   useLiveSignalStore: () => useLiveSignalStore,
   useLiveSignals: () => useLiveSignals,
   useNodeContextMenu: () => useNodeContextMenu,
   useNodeInteraction: () => useNodeInteraction,
   useNodeLiveState: () => useNodeLiveState,
   useNodeParams: () => useNodeParams,
+  useNodePulse: () => useNodePulse,
   useNodeSearch: () => useNodeSearch,
   useNodeSearchTriggers: () => useNodeSearchTriggers,
+  useRunTrace: () => useRunTrace,
+  useRunTraceStore: () => useRunTraceStore,
+  useRunTraceVersion: () => useRunTraceVersion,
   useToast: () => useToast
 });
 module.exports = __toCommonJS(index_exports);
@@ -149,12 +191,12 @@ function createTheme(overrides) {
 var import_jsx_runtime = require("react/jsx-runtime");
 function EditorUIThemeProvider({
   theme,
-  className,
+  className: className2,
   style,
   children
 }) {
   const themeStyle = theme ? createTheme(theme) : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: { ...themeStyle, ...style }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: className2, style: { ...themeStyle, ...style }, children });
 }
 
 // src/nodes/SignalBar.tsx
@@ -204,7 +246,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),
@@ -215,11 +260,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. */
@@ -230,12 +277,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);
@@ -247,6 +303,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) {
@@ -260,6 +354,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);
@@ -269,7 +368,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();
   }
@@ -290,7 +392,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) {
@@ -350,8 +452,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();
         }
@@ -360,8 +464,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();
         }
@@ -389,6 +495,22 @@ function useNodeLiveState(nodeId) {
     () => "idle"
   );
 }
+function useNodePulse(nodeId) {
+  const store = (0, import_react2.useContext)(LiveSignalContext);
+  return (0, import_react2.useSyncExternalStore)(
+    (onChange) => store === null ? () => void 0 : store.subscribeNode(nodeId, onChange),
+    () => store === null ? 0 : store.getNodePulse(nodeId),
+    () => 0
+  );
+}
+function useEdgePulse(edgeId) {
+  const store = (0, import_react2.useContext)(LiveSignalContext);
+  return (0, import_react2.useSyncExternalStore)(
+    (onChange) => store === null ? () => void 0 : store.subscribeEdge(edgeId, onChange),
+    () => store === null ? 0 : store.getEdgePulse(edgeId),
+    () => 0
+  );
+}
 function useEdgeFlowing(edgeId) {
   const store = (0, import_react2.useContext)(LiveSignalContext);
   return (0, import_react2.useSyncExternalStore)(
@@ -398,8 +520,15 @@ function useEdgeFlowing(edgeId) {
   );
 }
 
-// src/nodes/AssetNode.tsx
+// src/live/LivePulse.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+function LivePulse({ nodeId }) {
+  const pulse = useNodePulse(nodeId);
+  return pulse === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hl-live-pulse", "aria-hidden": "true" }, pulse);
+}
+
+// src/nodes/AssetNode.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function stringParam(node, key) {
   const v = node.params[key];
   return typeof v === "string" ? v : void 0;
@@ -411,22 +540,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__ */ (0, import_jsx_runtime6.jsxs)("div", { className, "data-kind": node.kind, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hl-asset-frame", children: [
-      imageUrl.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { className: "hl-asset-img", src: imageUrl, alt: caption, draggable: false }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hl-asset-placeholder", "aria-hidden": true }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hl-asset-scrim" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hl-asset-caption", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hl-asset-name", children: caption }),
-        role !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hl-asset-role hl-mono", children: role })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: className2, "data-kind": node.kind, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LivePulse, { nodeId: node.id }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hl-asset-frame", children: [
+      imageUrl.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { className: "hl-asset-img", src: imageUrl, alt: caption, draggable: false }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hl-asset-placeholder", "aria-hidden": true }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hl-asset-scrim" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hl-asset-caption", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hl-asset-name", children: caption }),
+        role !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hl-asset-role hl-mono", children: role })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "hl-asset-ports", children: outputs.map((port) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PortRow, { port }, port.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: "hl-asset-ports", children: outputs.map((port) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PortRow, { port }, port.id)) })
   ] });
 }
 
@@ -434,9 +565,9 @@ function AssetNodeChrome({ node, selected }) {
 var import_react4 = require("react");
 
 // src/icons/node-icons.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function svg(size, children) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "svg",
     {
       width: size,
@@ -454,49 +585,49 @@ function svg(size, children) {
 }
 var BY_CODE = {
   "image-source": (s) => svg(s, [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2.5" }, "r"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "8.5", cy: "9", r: "1.6" }, "c"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M4 17l5-5 4 4 3-2 4 4" }, "p")
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2.5" }, "r"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "8.5", cy: "9", r: "1.6" }, "c"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M4 17l5-5 4 4 3-2 4 4" }, "p")
   ]),
-  "text-source": (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M5 6h14M12 6v12M9 18h6" }, "p")]),
+  "text-source": (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M5 6h14M12 6v12M9 18h6" }, "p")]),
   "interval-source": (s) => svg(s, [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "8" }, "c"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 8v4l3 2" }, "h")
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "12", r: "8" }, "c"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 8v4l3 2" }, "h")
   ]),
   "range-source": (s) => svg(s, [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M4 12h16" }, "l"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "6", cy: "12", r: "2" }, "a"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "18", cy: "12", r: "2" }, "b")
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M4 12h16" }, "l"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "6", cy: "12", r: "2" }, "a"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "18", cy: "12", r: "2" }, "b")
   ]),
-  "constant-source": (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M6 12h12M9 8l-3 4 3 4M15 8l3 4-3 4" }, "p")]),
+  "constant-source": (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M6 12h12M9 8l-3 4 3 4M15 8l3 4-3 4" }, "p")]),
   "map-scale": (s) => svg(s, [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M4 20V8l8-4" }, "a"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M4 8l8 4 8-4M12 12v8" }, "b")
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M4 20V8l8-4" }, "a"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M4 8l8 4 8-4M12 12v8" }, "b")
   ]),
-  uppercase: (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M5 18L9 6l4 12M6.5 14h5M15 10v8M15 10c3 0 3 4 0 4" }, "p")]),
-  "filter-threshold": (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M4 5h16l-6 7v6l-4-2v-4z" }, "p")]),
-  "scan-sum": (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M17 6H7l6 6-6 6h10" }, "p")]),
+  uppercase: (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M5 18L9 6l4 12M6.5 14h5M15 10v8M15 10c3 0 3 4 0 4" }, "p")]),
+  "filter-threshold": (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M4 5h16l-6 7v6l-4-2v-4z" }, "p")]),
+  "scan-sum": (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M17 6H7l6 6-6 6h10" }, "p")]),
   delay: (s) => svg(s, [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "13", r: "7" }, "c"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 10v3l2 2M9 3h6" }, "h")
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "13", r: "7" }, "c"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 10v3l2 2M9 3h6" }, "h")
   ]),
-  merge: (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M6 5v4c0 3 3 3 6 3s6 0 6-3V5M12 12v7" }, "p")]),
+  merge: (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M6 5v4c0 3 3 3 6 3s6 0 6-3V5M12 12v7" }, "p")]),
   "console-sink": (s) => svg(s, [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "4", y: "5", width: "16", height: "12", rx: "2" }, "r"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 10l2.5 2L8 14M13 14h3" }, "p")
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "4", y: "5", width: "16", height: "12", rx: "2" }, "r"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M8 10l2.5 2L8 14M13 14h3" }, "p")
   ]),
   "collect-sink": (s) => svg(s, [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M4 7h16M4 12h16M4 17h10" }, "p")
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M4 7h16M4 12h16M4 17h10" }, "p")
   ])
 };
 var BY_KIND = {
-  R: (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 5l10 7-10 7z" }, "p")]),
+  R: (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M8 5l10 7-10 7z" }, "p")]),
   // source ▷ (play)
-  T: (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M4 8h6l4 8h6M14 8h6M4 16h6" }, "p")]),
+  T: (s) => svg(s, [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M4 8h6l4 8h6M14 8h6M4 16h6" }, "p")]),
   // transform
   W: (s) => svg(s, [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M5 4h11l3 3v13H5z" }, "p"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M9 4v5h6" }, "q")
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M5 4h11l3 3v13H5z" }, "p"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M9 4v5h6" }, "q")
   ])
   // sink (save)
 };
@@ -507,78 +638,86 @@ function NodeIcon({ code, kind, size = 15 }) {
 }
 function EyeIcon({ size = 14 }) {
   return svg(size, [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "2.6" }, "c")
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "12", r: "2.6" }, "c")
   ]);
 }
 function EyeOffIcon({ size = 14 }) {
   return svg(size, [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M9.9 9.9a2.6 2.6 0 003.7 3.7" }, "e"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M3 3l18 18" }, "s")
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M9.9 9.9a2.6 2.6 0 003.7 3.7" }, "e"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M3 3l18 18" }, "s")
   ]);
 }
 function UnlockIcon({ size = 14 }) {
   return svg(size, [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }, "r"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 11V7a4 4 0 017.9-1" }, "s")
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }, "r"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M8 11V7a4 4 0 017.9-1" }, "s")
   ]);
 }
 function LockIcon({ size = 14 }) {
   return svg(size, [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }, "r"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 11V7a4 4 0 018 0v4" }, "s")
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }, "r"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M8 11V7a4 4 0 018 0v4" }, "s")
   ]);
 }
 function WarningIcon({ size = 13 }) {
   return svg(size, [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 4l9 15H3z" }, "t"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 10v4" }, "b"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 17v.5" }, "d")
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 4l9 15H3z" }, "t"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 10v4" }, "b"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 17v.5" }, "d")
   ]);
 }
 function ErrorIcon({ size = 13 }) {
   return svg(size, [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "9" }, "c"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 7v6" }, "b"),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 16v.5" }, "d")
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "12", r: "9" }, "c"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 7v6" }, "b"),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 16v.5" }, "d")
   ]);
 }
+function FilterIcon({ size = 14 }) {
+  return svg(size, [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M4 5h16l-6 7.5V19l-4-2v-4.5z" }, "f")]);
+}
+function FollowIcon({ size = 14 }) {
+  return svg(size, [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 4v11M7 10.5l5 5 5-5" }, "a"), /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M5 20h14" }, "l")]);
+}
+function ClearIcon({ size = 14 }) {
+  return svg(size, [/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "12", cy: "12", r: "8" }, "c"), /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M6.5 17.5l11-11" }, "s")]);
+}
 
 // src/panels/DiagnosticBadge.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function DiagnosticBadge({ diagnostic, variant, size = 12 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "span",
     {
       className: `${variant} hl-diag-${diagnostic.severity}`,
       title: diagnostic.message,
       "aria-label": `${diagnostic.severity}: ${diagnostic.message}`,
-      children: diagnostic.severity === "error" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ErrorIcon, { size }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(WarningIcon, { size })
+      children: diagnostic.severity === "error" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ErrorIcon, { size }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(WarningIcon, { size })
     }
   );
 }
 
 // src/nodes/NodeInteractionContext.tsx
 var import_react3 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var NoopInteraction = {
-  diagnosticFor: () => void 0,
-  rename: () => void 0
+  diagnosticFor: () => void 0
 };
 var NodeInteractionCtx = (0, import_react3.createContext)(NoopInteraction);
 function NodeInteractionProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NodeInteractionCtx.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NodeInteractionCtx.Provider, { value, children });
 }
 function useNodeInteraction() {
   return (0, import_react3.useContext)(NodeInteractionCtx);
 }
 
 // src/nodes/PillNode.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var DOUBLE_CLICK_MS = 320;
 function PillNodeChrome({ node, selected }) {
   const live = useNodeLiveState(node.id);
@@ -596,10 +735,11 @@ function PillNodeChrome({ node, selected }) {
       });
     }
   }, [editing, node.name]);
+  const { rename } = interaction;
   const commit = (0, import_react4.useCallback)(() => {
     setEditing(false);
-    interaction.rename(node.id, draft);
-  }, [interaction, node.id, draft]);
+    rename == null ? void 0 : rename(node.id, draft);
+  }, [rename, node.id, draft]);
   const onKeyDown = (0, import_react4.useCallback)(
     (e) => {
       if (e.key === "Enter") {
@@ -614,6 +754,9 @@ function PillNodeChrome({ node, selected }) {
   );
   const lastClick = (0, import_react4.useRef)(0);
   const onNameClick = (0, import_react4.useCallback)(() => {
+    if (rename === void 0) {
+      return;
+    }
     const now = performance.now();
     if (now - lastClick.current < DOUBLE_CLICK_MS) {
       setEditing(true);
@@ -621,21 +764,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__ */ (0, import_jsx_runtime10.jsxs)("div", { className, "data-kind": node.kind, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hl-pill-dot", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NodeIcon, { code: node.code, kind: node.kind, size: 13 }) }),
-    editing ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: className2, "data-kind": node.kind, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LivePulse, { nodeId: node.id }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "hl-pill-dot", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NodeIcon, { code: node.code, kind: node.kind, size: 13 }) }),
+    editing ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "input",
       {
         ref: inputRef,
@@ -647,71 +792,178 @@ function PillNodeChrome({ node, selected }) {
         spellCheck: false,
         "aria-label": "Rename node"
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "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__ */ (0, import_jsx_runtime10.jsx)(DiagnosticBadge, { diagnostic, variant: "hl-pill-diag", size: 12 }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hl-pill-status", "aria-hidden": true }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "hl-pill-ports hl-in", children: inputs.map((port) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PortRow, { port }, port.id)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "hl-pill-ports hl-out", children: outputs.map((port) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PortRow, { port }, port.id)) })
+    diagnostic !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DiagnosticBadge, { diagnostic, variant: "hl-pill-diag", size: 12 }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "hl-pill-status", "aria-hidden": true }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "hl-pill-ports hl-in", children: inputs.map((port) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PortRow, { port }, port.id)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "hl-pill-ports hl-out", children: outputs.map((port) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PortRow, { port }, port.id)) })
   ] });
 }
 
 // src/nodes/HlangNode.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("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__ */ (0, import_jsx_runtime11.jsxs)("div", { className, "data-kind": node.kind, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SignalBar, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("header", { className: "hl-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "hl-kind", children: node.kind }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "hl-name", children: node.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "hl-role", children: KIND_ROLE[node.kind] })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: className2, "data-kind": node.kind, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LivePulse, { nodeId: node.id }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SignalBar, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className: "hl-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "hl-kind", children: node.kind }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "hl-name", children: node.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "hl-role", children: KIND_ROLE[node.kind] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NodeBodySlot, { node, children: body }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hl-ports", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "hl-col hl-in", children: inputs.map((port) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PortRow, { port }, port.id)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "hl-col hl-out", children: outputs.map((port) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PortRow, { port }, port.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NodeBodySlot, { node, children: body }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "hl-ports", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "hl-col hl-in", children: inputs.map((port) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PortRow, { port }, port.id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "hl-col hl-out", children: outputs.map((port) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(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__ */ (0, import_jsx_runtime11.jsx)(AssetNodeChrome, { node, selected });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssetNodeChrome, { node, selected });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PillNodeChrome, { node, selected });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PillNodeChrome, { node, selected });
 }
 
 // src/edges/FlowEdge.tsx
 var import_react5 = require("@xyflow/react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function useSourceRole(sourceId) {
-  const node = (0, import_react5.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
+var import_jsx_runtime13 = require("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] = (0, import_react5.getBezierPath)({
+  var _a, _b, _c, _d, _e, _f;
+  const { id, source, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, selected } = props;
+  const sourceNode = (0, import_react5.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] = (0, import_react5.getBezierPath)({
     sourceX,
     sourceY,
     sourcePosition,
@@ -719,25 +971,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__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react5.BaseEdge, { id, path, className: "hl-edge-base" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: path, className: "hl-edge-flow" })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { className: className2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react5.BaseEdge, { id, path, className: "hl-edge-base" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: path, className: "hl-edge-flow" }),
+      pulse > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: path, className: "hl-edge-pulse" }, pulse)
     ] }),
-    role !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react5.EdgeLabelRenderer, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    capacity !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react5.EdgeLabelRenderer, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "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__ */ (0, import_jsx_runtime13.jsx)(import_react5.EdgeLabelRenderer, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         className: "hl-edge-label hl-mono",
@@ -759,49 +1025,257 @@ function createHlangFlowTypes() {
 }
 
 // src/shell/EditorShell.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react7 = require("react");
+
+// src/shell/FooterResizer.tsx
+var import_jsx_runtime14 = require("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__ */ (0, import_jsx_runtime14.jsx)(
+    "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
+var import_react6 = require("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] = (0, import_react6.useState)(null);
+  const [preferred, setPreferred] = (0, import_react6.useState)(defaultHeight);
+  const [restore, setRestore] = (0, import_react6.useState)(defaultHeight);
+  const [dragging, setDragging] = (0, import_react6.useState)(false);
+  const dragStart = (0, import_react6.useRef)(null);
+  const bounds = (0, import_react6.useMemo)(
+    () => available === null ? { min: minHeight, max: Math.max(minHeight, defaultHeight) } : footerBounds({ available, minHeight, minCanvasHeight }),
+    [available, minHeight, minCanvasHeight, defaultHeight]
+  );
+  const height = clampFooter(preferred, bounds);
+  const choose = (0, import_react6.useCallback)(
+    (next) => {
+      setPreferred(next);
+      if (next > bounds.min) {
+        setRestore(next);
+      }
+    },
+    [bounds.min]
+  );
+  const measure = (0, import_react6.useCallback)((next) => {
+    setAvailable(next);
+  }, []);
+  const startDrag = (0, import_react6.useCallback)(
+    (clientY) => {
+      dragStart.current = { clientY, height };
+      setDragging(true);
+    },
+    [height]
+  );
+  const drag = (0, import_react6.useCallback)(
+    (clientY) => {
+      const start = dragStart.current;
+      if (start === null) {
+        return;
+      }
+      choose(clampFooter(start.height + (start.clientY - clientY), bounds));
+    },
+    [bounds, choose]
+  );
+  const endDrag = (0, import_react6.useCallback)(() => {
+    dragStart.current = null;
+    setDragging(false);
+  }, []);
+  const toggle = (0, import_react6.useCallback)(() => {
+    const next = toggleCollapsed({ height, restore }, bounds);
+    setPreferred(next.height);
+    setRestore(next.restore);
+  }, [height, restore, bounds]);
+  const keyDown = (0, import_react6.useCallback)(
+    (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
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function EditorShell({
   toolbar,
   left,
   right,
   canvas,
   footer,
+  footerResize,
   leftCollapsed = false,
   rightCollapsed = false
 }) {
-  const className = [
+  const shellRef = (0, import_react7.useRef)(null);
+  const toolbarRef = (0, import_react7.useRef)(null);
+  const className2 = [
     "hl-shell",
     leftCollapsed ? "hl-left-collapsed" : "",
     rightCollapsed ? "hl-right-collapsed" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className, children: [
-    toolbar !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "hl-region-toolbar", children: toolbar }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "hl-region-body", children: [
-      left !== void 0 && !leftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("aside", { className: "hl-region-left", children: left }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("main", { className: "hl-region-canvas", children: canvas }),
-      right !== void 0 && !rightCollapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("aside", { className: "hl-region-right", children: right })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: className2, ref: shellRef, children: [
+    toolbar !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "hl-region-toolbar", ref: toolbarRef, children: toolbar }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "hl-region-body", children: [
+      left !== void 0 && !leftCollapsed && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("aside", { className: "hl-region-left", children: left }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("main", { className: "hl-region-canvas", children: canvas }),
+      right !== void 0 && !rightCollapsed && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("aside", { className: "hl-region-right", children: right })
     ] }),
-    footer !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "hl-region-footer", children: footer })
+    footer !== void 0 && (footerResize === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "hl-region-footer", children: footer }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ResizableFooter, { options: footerResize, shellRef, toolbarRef, children: footer }))
   ] });
 }
+function ResizableFooter({
+  options,
+  shellRef,
+  toolbarRef,
+  children
+}) {
+  var _a;
+  const resize = useFooterResize(options);
+  const id = (0, import_react7.useId)();
+  const { measure } = resize;
+  (0, import_react7.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      id,
+      className: `hl-region-footer is-resizable${resize.dragging ? " is-resizing" : ""}`,
+      style: { height: resize.height },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FooterResizer, { resize, controls: id, label: (_a = options.label) != null ? _a : "Resize the panel" }),
+        children
+      ]
+    }
+  );
+}
 
 // src/toolbar/Toolbar.tsx
 var import_editor_react = require("@hlang-org/editor-react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Toolbar({ title, center, actions }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("header", { className: "hl-toolbar", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "hl-toolbar-brand", children: title != null ? title : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "hl-toolbar-glyph", "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "hl-toolbar-wordmark", children: "hlang" })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("header", { className: "hl-toolbar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "hl-toolbar-brand", children: title != null ? title : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "hl-toolbar-glyph", "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "hl-toolbar-wordmark", children: "hlang" })
     ] }) }),
-    center !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "hl-toolbar-center", children: center }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "hl-toolbar-actions", children: actions })
+    center !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "hl-toolbar-center", children: center }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "hl-toolbar-actions", children: actions })
   ] });
 }
 function UndoRedo({ core }) {
   const history = (0, import_editor_react.useHistory)(core);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "button",
       {
         type: "button",
@@ -812,7 +1286,7 @@ function UndoRedo({ core }) {
         children: "Undo"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "button",
       {
         type: "button",
@@ -831,7 +1305,7 @@ function RunButton({
   runLabel = "Run",
   stopLabel = "Stop"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "button",
     {
       type: "button",
@@ -839,7 +1313,7 @@ function RunButton({
       onClick: onRun,
       "aria-pressed": running,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "span",
           {
             className: `hl-toolbar-run-icon${running ? " is-stop" : ""}`,
@@ -852,22 +1326,31 @@ function RunButton({
   );
 }
 function ToolbarStat({ label, value }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "hl-toolbar-stat hl-mono", title: label, children: value });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "hl-toolbar-stat hl-mono", title: label, children: value });
 }
 function ToolbarGhostButton({
   children,
   onClick,
   title
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "hl-toolbar-btn", onClick, title, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "hl-toolbar-btn", onClick, title, children });
+}
+
+// src/toolbar/ReadOnlyBadge.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function ReadOnlyBadge({ label = "View only", title }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "hl-readonly-badge", title: title != null ? title : label, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LockIcon, { size: 12 }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "hl-readonly-badge-label", children: label })
+  ] });
 }
 
 // src/toolbar/ToolCluster.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function ToolCluster({ items }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "hl-toolcluster", role: "toolbar", "aria-label": "Canvas tools", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "hl-toolcluster-slot", children: [
-    item.separatorBefore === true && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "hl-toolcluster-sep", "aria-hidden": true }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "hl-toolcluster", role: "toolbar", "aria-label": "Canvas tools", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "hl-toolcluster-slot", children: [
+    item.separatorBefore === true && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "hl-toolcluster-sep", "aria-hidden": true }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "button",
       {
         type: "button",
@@ -884,31 +1367,31 @@ function ToolCluster({ items }) {
 }
 
 // src/canvas/CanvasChrome.tsx
-var import_react6 = require("@xyflow/react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react8 = require("@xyflow/react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function CanvasChrome({ background = true }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: background && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react6.Background, { variant: import_react6.BackgroundVariant.Dots, gap: 26, size: 1, color: "#242830" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: background && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react8.Background, { variant: import_react8.BackgroundVariant.Dots, gap: 26, size: 1, color: "#242830" }) });
 }
 
 // src/canvas/CanvasDock.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function CursorIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M5 3l6 16 2-6 6-2z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M5 3l6 16 2-6 6-2z" }) });
 }
 function HandIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M8 12V6a1.5 1.5 0 013 0v5m0-1V5a1.5 1.5 0 013 0v6m0-1V6.5a1.5 1.5 0 013 0V13c0 3.5-2 6-5.5 6H12c-2 0-3-.8-4.2-2.5L5 12.5c-.7-1 .6-2.3 1.6-1.6z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M8 12V6a1.5 1.5 0 013 0v5m0-1V5a1.5 1.5 0 013 0v6m0-1V6.5a1.5 1.5 0 013 0V13c0 3.5-2 6-5.5 6H12c-2 0-3-.8-4.2-2.5L5 12.5c-.7-1 .6-2.3 1.6-1.6z" }) });
 }
 function PlusIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: 17, height: 17, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M12 5v14M5 12h14" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { width: 17, height: 17, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M12 5v14M5 12h14" }) });
 }
 function FitIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" }) });
 }
 function UndoIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M9 7L4 12l5 5M4 12h11a5 5 0 010 10h-1" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M9 7L4 12l5 5M4 12h11a5 5 0 010 10h-1" }) });
 }
 function RedoIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M15 7l5 5-5 5M20 12H9a5 5 0 000 10h1" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { width: 15, height: 15, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M15 7l5 5-5 5M20 12H9a5 5 0 000 10h1" }) });
 }
 function CanvasDock({
   zoom,
@@ -921,76 +1404,79 @@ function CanvasDock({
   onUndo,
   onRedo,
   canUndo,
-  canRedo
+  canRedo,
+  readOnly = false
 }) {
   const pct = `${String(Math.round(zoom * 100))}%`;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "hl-dock", role: "toolbar", "aria-label": "Canvas tools", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      "button",
-      {
-        className: "hl-dock-btn",
-        onClick: onUndo,
-        disabled: !canUndo,
-        title: "Undo (\u2318Z)",
-        "aria-label": "Undo",
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UndoIcon, {})
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      "button",
-      {
-        className: "hl-dock-btn",
-        onClick: onRedo,
-        disabled: !canRedo,
-        title: "Redo (\u2318\u21E7Z)",
-        "aria-label": "Redo",
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(RedoIcon, {})
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "hl-dock-sep", "aria-hidden": true }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      "button",
-      {
-        className: "hl-dock-btn" + (mode === "select" ? " is-active" : ""),
-        onClick: () => onModeChange("select"),
-        title: "Select (V)",
-        "aria-pressed": mode === "select",
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CursorIcon, {})
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      "button",
-      {
-        className: "hl-dock-btn" + (mode === "pan" ? " is-active" : ""),
-        onClick: () => onModeChange("pan"),
-        title: "Pan (Space)",
-        "aria-pressed": mode === "pan",
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HandIcon, {})
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { className: "hl-dock-btn hl-dock-add", onClick: onAdd, title: "Add node", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PlusIcon, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "hl-dock-sep", "aria-hidden": true }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { className: "hl-dock-btn", onClick: onZoomOut, title: "Zoom out", "aria-label": "Zoom out", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "hl-dock-glyph", children: "\u2212" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { className: "hl-dock-zoom hl-mono", onClick: onFitView, title: "Fit view", children: pct }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { className: "hl-dock-btn", onClick: onZoomIn, title: "Zoom in", "aria-label": "Zoom in", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "hl-dock-glyph", children: "+" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { className: "hl-dock-btn hl-dock-fit", onClick: onFitView, title: "Fit view", "aria-label": "Fit view", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FitIcon, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "hl-dock", role: "toolbar", "aria-label": "Canvas tools", children: [
+    readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          className: "hl-dock-btn",
+          onClick: onUndo,
+          disabled: !canUndo,
+          title: "Undo (\u2318Z)",
+          "aria-label": "Undo",
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UndoIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          className: "hl-dock-btn",
+          onClick: onRedo,
+          disabled: !canRedo,
+          title: "Redo (\u2318\u21E7Z)",
+          "aria-label": "Redo",
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RedoIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "hl-dock-sep", "aria-hidden": true }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          className: "hl-dock-btn" + (mode === "select" ? " is-active" : ""),
+          onClick: () => onModeChange("select"),
+          title: "Select (V)",
+          "aria-pressed": mode === "select",
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CursorIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "button",
+        {
+          className: "hl-dock-btn" + (mode === "pan" ? " is-active" : ""),
+          onClick: () => onModeChange("pan"),
+          title: "Pan (Space)",
+          "aria-pressed": mode === "pan",
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(HandIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "hl-dock-btn hl-dock-add", onClick: onAdd, title: "Add node", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PlusIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "hl-dock-sep", "aria-hidden": true })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "hl-dock-btn", onClick: onZoomOut, title: "Zoom out", "aria-label": "Zoom out", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "hl-dock-glyph", children: "\u2212" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "hl-dock-zoom hl-mono", onClick: onFitView, title: "Fit view", children: pct }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "hl-dock-btn", onClick: onZoomIn, title: "Zoom in", "aria-label": "Zoom in", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "hl-dock-glyph", children: "+" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "hl-dock-btn hl-dock-fit", onClick: onFitView, title: "Fit view", "aria-label": "Fit view", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FitIcon, {}) })
   ] });
 }
 
 // src/canvas/EmptyState.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function EmptyState({
   title = "An empty canvas.",
   hint = "add a source \xB7 wire it to a sink \xB7 run"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "hl-empty", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "hl-empty-title", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "hl-empty-hint", children: hint })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "hl-empty", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "hl-empty-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "hl-empty-hint", children: hint })
   ] });
 }
 
 // src/panels/InspectorPanel.tsx
-var import_editor_react2 = require("@hlang-org/editor-react");
+var import_editor_react3 = require("@hlang-org/editor-react");
 
 // src/schema/param-field.ts
 function humanizeKey(key) {
@@ -1021,11 +1507,11 @@ function deriveParamSchema(descriptor, node) {
 }
 
 // src/hooks/useNodeParams.ts
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_editor_core = require("@hlang-org/editor-core");
 function useNodeParams(core, nodeId) {
-  const versionRef = (0, import_react7.useRef)(0);
-  const subscribe = (0, import_react7.useCallback)(
+  const versionRef = (0, import_react9.useRef)(0);
+  const subscribe = (0, import_react9.useCallback)(
     (onStoreChange) => {
       const disposable = core.events.on("nodeChanged", (event) => {
         if (nodeId !== void 0 && event.node.id === nodeId) {
@@ -1039,9 +1525,9 @@ function useNodeParams(core, nodeId) {
     },
     [core, nodeId]
   );
-  const getSnapshot = (0, import_react7.useCallback)(() => versionRef.current, []);
-  const version = (0, import_react7.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-  const setParams = (0, import_react7.useCallback)(
+  const getSnapshot = (0, import_react9.useCallback)(() => versionRef.current, []);
+  const version = (0, import_react9.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const setParams = (0, import_react9.useCallback)(
     (next) => {
       if (nodeId === void 0) {
         return;
@@ -1050,7 +1536,7 @@ function useNodeParams(core, nodeId) {
     },
     [core, nodeId]
   );
-  const setParam = (0, import_react7.useCallback)(
+  const setParam = (0, import_react9.useCallback)(
     (key, value) => {
       if (nodeId === void 0) {
         return;
@@ -1063,7 +1549,7 @@ function useNodeParams(core, nodeId) {
     },
     [core, nodeId, setParams]
   );
-  return (0, import_react7.useMemo)(
+  return (0, import_react9.useMemo)(
     () => ({
       node: nodeId === void 0 ? void 0 : core.model.getNode(nodeId),
       setParam,
@@ -1075,19 +1561,61 @@ function useNodeParams(core, nodeId) {
   );
 }
 
+// src/panels/ConnectionInspector.tsx
+var import_editor_react2 = require("@hlang-org/editor-react");
+
+// src/hooks/useEdgeBounds.ts
+var import_react10 = require("react");
+var import_editor_core2 = require("@hlang-org/editor-core");
+function useEdgeBounds(core, edgeId) {
+  const subscribe = (0, import_react10.useCallback)(
+    (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 = (0, import_react10.useCallback)(
+    () => edgeId === void 0 ? void 0 : core.model.getEdge(edgeId),
+    [core, edgeId]
+  );
+  const edge = (0, import_react10.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const setBounds = (0, import_react10.useCallback)(
+    (bounds) => {
+      if (edgeId !== void 0) {
+        core.commands.execute(new import_editor_core2.SetEdgeBoundsCommand(edgeId, bounds));
+      }
+    },
+    [core, edgeId]
+  );
+  return { edge, setBounds };
+}
+
 // src/panels/ParamForm.tsx
-var import_react8 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-function ParamForm({ fields, onCommit }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "hl-form", children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FieldRow, { field, onCommit }, field.key)) });
+var import_react11 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function ParamForm({ fields, onCommit, disabled = false }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("fieldset", { className: "hl-form", disabled, children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldRow, { field, onCommit }, field.key)) });
 }
 function FieldRow({
   field,
   onCommit
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "hl-field", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "hl-field-label", children: field.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FieldControl, { field, onCommit })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "hl-field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "hl-field-label", children: field.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldControl, { field, onCommit })
   ] });
 }
 function FieldControl({
@@ -1096,7 +1624,7 @@ function FieldControl({
 }) {
   switch (field.type) {
     case "toggle":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           type: "button",
@@ -1105,17 +1633,17 @@ function FieldControl({
           className: `hl-toggle${field.value ? " is-on" : ""}`,
           disabled: field.disabled,
           onClick: () => onCommit(field.key, !field.value),
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "hl-toggle-knob" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "hl-toggle-knob" })
         }
       );
     case "number":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(NumberControl, { field, onCommit });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumberControl, { field, onCommit });
     case "textarea":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TextControl, { field, onCommit, multiline: true });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TextControl, { field, onCommit, multiline: true });
     case "text":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TextControl, { field, onCommit });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TextControl, { field, onCommit });
     case "custom":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "hl-field-custom hl-mono", title: field.fieldType, children: describeCustom(field.value) });
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "hl-field-custom hl-mono", title: field.fieldType, children: describeCustom(field.value) });
   }
 }
 function TextControl({
@@ -1123,7 +1651,7 @@ function TextControl({
   onCommit,
   multiline = false
 }) {
-  const [draft, setDraft] = (0, import_react8.useState)(field.value);
+  const [draft, setDraft] = (0, import_react11.useState)(field.value);
   const commit = () => {
     if (draft !== field.value) {
       onCommit(field.key, draft);
@@ -1137,7 +1665,7 @@ function TextControl({
     onBlur: commit
   };
   if (multiline) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "textarea",
       {
         ...shared,
@@ -1146,7 +1674,7 @@ function TextControl({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "input",
     {
       ...shared,
@@ -1164,14 +1692,14 @@ function NumberControl({
   field,
   onCommit
 }) {
-  const [draft, setDraft] = (0, import_react8.useState)(String(field.value));
+  const [draft, setDraft] = (0, import_react11.useState)(String(field.value));
   const commit = () => {
     const parsed = Number(draft);
     if (!Number.isNaN(parsed) && parsed !== field.value) {
       onCommit(field.key, parsed);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "input",
     {
       className: "hl-input hl-mono",
@@ -1202,57 +1730,289 @@ function describeCustom(value) {
   return String(value);
 }
 
+// src/panels/ConnectionInspector.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function ConnectionInspector({ core, edgeId }) {
+  const { edge, setBounds } = useEdgeBounds(core, edgeId);
+  const readOnly = (0, import_editor_react2.useReadOnly)(core);
+  if (edge === void 0) {
+    return null;
+  }
+  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__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "hl-inspector", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("header", { className: "hl-inspector-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hl-inspector-kind hl-connection", children: "\u2192" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "hl-inspector-titles", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hl-inspector-name", children: "Connection" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "hl-inspector-role hl-mono", children: [
+          end(edge.source),
+          " \u2192 ",
+          end(edge.target)
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("section", { className: "hl-inspector-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "hl-inspector-section-title", children: "Back-pressure" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "hl-inspector-hint hl-inspector-note", children: "A bounded connection holds at most its capacity, counting the message being worked on. A sender to a full connection waits, unless it drops its oldest waiting message." }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        ParamForm,
+        {
+          fields: boundsFields(edge),
+          disabled: readOnly,
+          onCommit: (key, value) => {
+            setBounds(nextBounds(edge, key, value));
+          }
+        }
+      )
+    ] })
+  ] });
+}
+
+// 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
+var import_react12 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var RunTraceContext = (0, import_react12.createContext)(null);
+function RunTraceProvider({ trace, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RunTraceContext.Provider, { value: trace, children });
+}
+function useRunTraceStore() {
+  return (0, import_react12.useContext)(RunTraceContext);
+}
+function useRunTraceVersion(trace) {
+  return (0, import_react12.useSyncExternalStore)(
+    (onChange) => trace === null ? () => void 0 : trace.subscribe(onChange),
+    () => trace === null ? 0 : trace.getVersion(),
+    () => 0
+  );
+}
+
+// src/panels/NodeRunStats.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function NodeRunStats({ nodeId }) {
+  const trace = useRunTraceStore();
+  useRunTraceVersion(trace);
+  if (trace === null) {
+    return null;
+  }
+  const stats = trace.statsOf(nodeId);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("section", { className: "hl-inspector-section", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h3", { className: "hl-inspector-section-title", children: "Run" }),
+    stats === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "hl-inspector-hint hl-runstats-hint", children: "No activity in this run." }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("dl", { className: "hl-runstats", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "In" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: stats.received })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "Out" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: stats.sent })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: `hl-runstats-cell${stats.errors > 0 ? " is-error" : ""}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "Errors" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: stats.errors })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "Avg" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: stats.received === 0 ? "\u2014" : formatDuration(stats.totalMs / stats.received) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "Max" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: stats.received === 0 ? "\u2014" : formatDuration(stats.maxMs) })
+      ] }),
+      stats.dropped > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell is-warning", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "Dropped" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: stats.dropped })
+      ] }),
+      stats.finished && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell is-done", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "State" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { children: "Finished" })
+      ] }),
+      stats.received > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell is-wide", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "Last in" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: previewValue(stats.lastReceived) })
+      ] }),
+      stats.sent > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-runstats-cell is-wide", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dt", { children: "Last out" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("dd", { className: "hl-mono", children: previewValue(stats.lastSent) })
+      ] })
+    ] })
+  ] });
+}
+
 // src/panels/InspectorPanel.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function InspectorPanel({ core, emptyState }) {
-  const selection = (0, import_editor_react2.useSelection)(core);
+  const selection = (0, import_editor_react3.useSelection)(core);
+  const readOnly = (0, import_editor_react3.useReadOnly)(core);
   const selectedNodes2 = selection.selectedNodes;
   const singleId = selectedNodes2.length === 1 ? selectedNodes2[0] : void 0;
   const params = useNodeParams(core, singleId);
   const node = params.node;
+  const singleEdgeId = selectedNodes2.length === 0 && selection.selectedEdges.length === 1 ? selection.selectedEdges[0] : void 0;
+  if (node === void 0 && singleEdgeId !== void 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ConnectionInspector, { core, edgeId: singleEdgeId });
+  }
   if (node === void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "hl-inspector hl-inspector-empty", children: emptyState != null ? emptyState : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "hl-inspector-blank", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "hl-inspector-blank-badge", "aria-hidden": true }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "hl-inspector-blank-title", children: selectedNodes2.length > 1 ? `${String(selectedNodes2.length)} nodes selected` : "Nothing selected" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime26.jsx)("div", { className: "hl-inspector hl-inspector-empty", children: emptyState != null ? emptyState : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "hl-inspector-blank", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-inspector-blank-badge", "aria-hidden": true }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "hl-inspector-blank-title", children: selectedNodes2.length > 1 ? `${String(selectedNodes2.length)} nodes selected` : "Nothing selected" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "hl-inspector-hint", children: selectedNodes2.length > 1 ? "Select a single node to edit its parameters." : "Pick a node or a connection on the canvas to inspect and tune it." })
     ] }) });
   }
   const descriptor = core.registry.get(node.code);
   const fields = descriptor === void 0 ? [] : deriveParamSchema(descriptor, node);
   const imageUrl = typeof node.params.imageUrl === "string" && node.params.imageUrl.length > 0 ? node.params.imageUrl : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "hl-inspector", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `hl-inspector-preview hl-${node.kind.toLowerCase()}`, children: imageUrl !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { className: "hl-inspector-preview-img", src: imageUrl, alt: node.name }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "hl-inspector-preview-badge hl-mono", children: node.kind }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("header", { className: "hl-inspector-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: `hl-inspector-kind hl-${node.kind.toLowerCase()}`, children: node.kind }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "hl-inspector-titles", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "hl-inspector-name", children: node.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "hl-inspector-role hl-mono", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "hl-inspector", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `hl-inspector-preview hl-${node.kind.toLowerCase()}`, children: imageUrl !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("img", { className: "hl-inspector-preview-img", src: imageUrl, alt: node.name }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-inspector-preview-badge hl-mono", children: node.kind }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("header", { className: "hl-inspector-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: `hl-inspector-kind hl-${node.kind.toLowerCase()}`, children: node.kind }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "hl-inspector-titles", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-inspector-name", children: node.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "hl-inspector-role hl-mono", children: [
           node.code,
           " \xB7 ",
           KIND_ROLE[node.kind]
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("section", { className: "hl-inspector-section", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "hl-inspector-section-title", children: "Parameters" }),
-      fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "hl-inspector-hint", children: "This node has no parameters." }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("section", { className: "hl-inspector-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h3", { className: "hl-inspector-section-title", children: "Parameters" }),
+      fields.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "hl-inspector-hint", children: "This node has no parameters." }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         ParamForm,
         {
           fields,
+          disabled: readOnly,
           onCommit: (key, value) => params.setParam(key, value)
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("section", { className: "hl-inspector-section", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "hl-inspector-section-title", children: "Ports" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { className: "hl-inspector-ports", children: node.ports.map((port) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NodeRunStats, { nodeId: node.id }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("section", { className: "hl-inspector-section", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h3", { className: "hl-inspector-section-title", children: "Ports" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { className: "hl-inspector-ports", children: node.ports.map((port) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         "li",
         {
           className: `hl-inspector-port${port.isError ? " is-error" : ""}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: `hl-port-dot hl-dir-${port.direction.toLowerCase()}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "hl-mono", children: port.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "hl-inspector-port-dir hl-mono", children: port.direction })
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: `hl-port-dot hl-dir-${port.direction.toLowerCase()}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-mono", children: port.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-inspector-port-dir hl-mono", children: port.direction })
           ]
         },
         port.id
@@ -1262,14 +2022,14 @@ function InspectorPanel({ core, emptyState }) {
 }
 
 // src/panels/OutlineTree.tsx
-var import_react9 = require("react");
-var import_editor_core2 = require("@hlang-org/editor-core");
-var import_editor_react3 = require("@hlang-org/editor-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_editor_core3 = require("@hlang-org/editor-core");
+var import_editor_react4 = require("@hlang-org/editor-react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function useTopologyComponents(core) {
-  const [tick, setTick] = (0, import_react9.useState)(0);
-  const bump = (0, import_react9.useCallback)(() => setTick((t) => t + 1), []);
-  (0, import_react9.useEffect)(() => {
+  const [tick, setTick] = (0, import_react13.useState)(0);
+  const bump = (0, import_react13.useCallback)(() => setTick((t) => t + 1), []);
+  (0, import_react13.useEffect)(() => {
     const kinds = ["nodeAdded", "nodeRemoved", "nodeChanged", "edgeAdded", "edgeRemoved"];
     const disposers = kinds.map((k) => core.events.on(k, bump));
     bump();
@@ -1279,27 +2039,27 @@ function useTopologyComponents(core) {
       }
     };
   }, [core, bump]);
-  return (0, import_react9.useMemo)(() => {
+  return (0, import_react13.useMemo)(() => {
     void tick;
-    const topo = new import_editor_core2.GraphTopology();
+    const topo = new import_editor_core3.GraphTopology();
     topo.reset(core.model.getNodes(), core.model.getEdges());
     return topo.components();
   }, [core, tick]);
 }
 function OutlineTree({ core, onFocus }) {
   const components = useTopologyComponents(core);
-  const selection = (0, import_editor_react3.useSelection)(core);
-  const viewState = (0, import_editor_react3.useViewState)(core);
-  const diagnostics = (0, import_editor_react3.useDiagnostics)(core);
-  const [collapsed, setCollapsed] = (0, import_react9.useState)(/* @__PURE__ */ new Set());
-  const nodeById = (0, import_react9.useMemo)(() => {
+  const selection = (0, import_editor_react4.useSelection)(core);
+  const viewState = (0, import_editor_react4.useViewState)(core);
+  const diagnostics = (0, import_editor_react4.useDiagnostics)(core);
+  const [collapsed, setCollapsed] = (0, import_react13.useState)(/* @__PURE__ */ new Set());
+  const nodeById = (0, import_react13.useMemo)(() => {
     const m = /* @__PURE__ */ new Map();
     for (const n of core.model.getNodes()) {
       m.set(n.id, n);
     }
     return m;
   }, [core, components]);
-  const toggleGroup = (0, import_react9.useCallback)((id) => {
+  const toggleGroup = (0, import_react13.useCallback)((id) => {
     setCollapsed((prev) => {
       const next = new Set(prev);
       if (next.has(id)) {
@@ -1310,7 +2070,7 @@ function OutlineTree({ core, onFocus }) {
       return next;
     });
   }, []);
-  const select = (0, import_react9.useCallback)(
+  const select = (0, import_react13.useCallback)(
     (id) => {
       selection.selectNodes([id], "replace");
       onFocus == null ? void 0 : onFocus(id);
@@ -1318,80 +2078,80 @@ function OutlineTree({ core, onFocus }) {
     [selection, onFocus]
   );
   if (components.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "hl-outline-empty hl-mono", children: "no layers yet" });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "hl-outline-empty hl-mono", children: "no layers yet" });
   }
   const groups = [...components].sort((a, b) => b.nodeIds.size - a.nodeIds.size);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "hl-outline", role: "tree", "aria-label": "Outline", children: groups.map((group, gi) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "hl-outline", role: "tree", "aria-label": "Outline", children: groups.map((group, gi) => {
     const members = [...group.nodeIds].map((id) => nodeById.get(id)).filter((n) => n !== void 0);
     const open = !collapsed.has(group.id);
     const groupName = `Flow ${String(gi + 1)}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "hl-outline-group", role: "treeitem", "aria-expanded": open, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "hl-outline-group", role: "treeitem", "aria-expanded": open, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         "button",
         {
           className: "hl-outline-grouphead",
           onClick: () => toggleGroup(group.id),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "hl-outline-caret" + (open ? " is-open" : ""), "aria-hidden": true, children: "\u25B8" }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "hl-outline-groupname", children: groupName }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "hl-outline-count hl-mono", children: group.nodeIds.size })
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-outline-caret" + (open ? " is-open" : ""), "aria-hidden": true, children: "\u25B8" }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-outline-groupname", children: groupName }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-outline-count hl-mono", children: group.nodeIds.size })
           ]
         }
       ),
-      open && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { className: "hl-outline-members", children: members.map((node) => {
+      open && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ul", { className: "hl-outline-members", children: members.map((node) => {
         const active = selection.isSelected(node.id);
         const isHidden = viewState.isHidden(node.id);
         const isLocked = viewState.isLocked(node.id);
         const { imageUrl } = node.params;
         const thumbnail = typeof imageUrl === "string" && imageUrl.length > 0 ? imageUrl : void 0;
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
           "div",
           {
             className: "hl-outline-row" + (active ? " is-active" : "") + (isHidden ? " is-hidden" : "") + (isLocked ? " is-locked" : ""),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { className: "hl-outline-main", onClick: () => select(node.id), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("button", { className: "hl-outline-main", onClick: () => select(node.id), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "span",
                   {
                     className: `hl-outline-icon hl-kind-${node.kind.toLowerCase()}`,
                     "aria-hidden": true,
-                    children: thumbnail !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    children: thumbnail !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                       "img",
                       {
                         className: "hl-outline-thumb",
                         src: thumbnail,
                         alt: ""
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(NodeIcon, { code: node.code, kind: node.kind, size: 13 })
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NodeIcon, { code: node.code, kind: node.kind, size: 13 })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "hl-outline-name", children: node.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-outline-name", children: node.name }),
                 (() => {
                   const diag = diagnostics.worstOf(node.id);
-                  return diag === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DiagnosticBadge, { diagnostic: diag, variant: "hl-outline-diag", size: 11 });
+                  return diag === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DiagnosticBadge, { diagnostic: diag, variant: "hl-outline-diag", size: 11 });
                 })(),
-                isLocked && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LockIcon, { size: 11 }) }),
-                isHidden && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EyeOffIcon, { size: 11 }) })
+                isLocked && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LockIcon, { size: 11 }) }),
+                isHidden && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-outline-badge", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(EyeOffIcon, { size: 11 }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "hl-outline-controls", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "hl-outline-controls", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     className: "hl-outline-ctl" + (isHidden ? " is-active-ctl" : ""),
                     onClick: () => viewState.toggleHidden(node.id),
                     "aria-label": isHidden ? "Show layer" : "Hide layer",
                     title: isHidden ? "Show" : "Hide",
-                    children: isHidden ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EyeOffIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EyeIcon, {})
+                    children: isHidden ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(EyeOffIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(EyeIcon, {})
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                   "button",
                   {
                     className: "hl-outline-ctl" + (isLocked ? " is-active-ctl" : ""),
                     onClick: () => viewState.toggleLocked(node.id),
                     "aria-label": isLocked ? "Unlock layer" : "Lock layer",
                     title: isLocked ? "Unlock" : "Lock",
-                    children: isLocked ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LockIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(UnlockIcon, {})
+                    children: isLocked ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LockIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UnlockIcon, {})
                   }
                 )
               ] })
@@ -1404,21 +2164,48 @@ function OutlineTree({ core, onFocus }) {
 }
 
 // src/panels/PreviewPanel.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function PreviewPanel({ imageUrl, title = "Preview", status }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { className: "hl-preview", "aria-label": "Preview", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "hl-preview-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "hl-preview-title", children: title }),
-      status !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "hl-preview-status hl-mono", children: status })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("section", { className: "hl-preview", "aria-label": "Preview", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "hl-preview-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "hl-preview-title", children: title }),
+      status !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "hl-preview-status hl-mono", children: status })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "hl-preview-frame", children: imageUrl !== void 0 && imageUrl.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { className: "hl-preview-img", src: imageUrl, alt: title, draggable: false }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "hl-preview-placeholder hl-mono", children: "no output yet" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hl-preview-frame", children: imageUrl !== void 0 && imageUrl.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", { className: "hl-preview-img", src: imageUrl, alt: title, draggable: false }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hl-preview-placeholder hl-mono", children: "no output yet" }) })
   ] });
 }
 
+// src/panels/PanelHead.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function PanelHead({ leading, meta, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("header", { className: "hl-panel-head", children: [
+    leading,
+    meta === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "hl-panel-meta hl-mono", children: meta }),
+    children === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "hl-panel-actions", children })
+  ] });
+}
+function PanelAction({ icon, label, onClick, pressed, disabled = false, title }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: `hl-panel-action${pressed === true ? " is-on" : ""}`,
+      "aria-pressed": pressed,
+      disabled,
+      title: title != null ? title : label,
+      onClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "hl-panel-action-icon", "aria-hidden": true, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "hl-panel-action-label", children: label })
+      ]
+    }
+  );
+}
+
 // src/panels/RailTabs.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function RailTabs({ tabs, active, onChange }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hl-railtabs", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "hl-railtabs", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "button",
     {
       role: "tab",
@@ -1432,20 +2219,20 @@ function RailTabs({ tabs, active, onChange }) {
 }
 
 // src/panels/AssetGrid.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function AssetGrid({ items, onSelect, emptyHint = "No assets yet" }) {
   if (items.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "hl-assetgrid-empty hl-mono", children: emptyHint });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "hl-assetgrid-empty hl-mono", children: emptyHint });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "hl-assetgrid", children: items.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "hl-assetgrid", children: items.map((item) => {
     var _a;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "button",
       {
         className: "hl-assetgrid-cell",
         onClick: () => onSelect == null ? void 0 : onSelect(item.id),
         title: item.label,
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { className: "hl-assetgrid-img", src: item.url, alt: (_a = item.label) != null ? _a : "", loading: "lazy" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { className: "hl-assetgrid-img", src: item.url, alt: (_a = item.label) != null ? _a : "", loading: "lazy" })
       },
       item.id
     );
@@ -1453,10 +2240,10 @@ function AssetGrid({ items, onSelect, emptyHint = "No assets yet" }) {
 }
 
 // src/panels/PositionPanel.tsx
-var import_react10 = require("react");
-var import_editor_core3 = require("@hlang-org/editor-core");
-var import_editor_react4 = require("@hlang-org/editor-react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_editor_core4 = require("@hlang-org/editor-core");
+var import_editor_react5 = require("@hlang-org/editor-react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function selectedNodes(core) {
   const ids = core.selection.getSelectedNodes();
   const out = [];
@@ -1470,9 +2257,10 @@ function selectedNodes(core) {
 }
 function PositionPanel({ core, livePosition }) {
   var _a;
-  (0, import_editor_react4.useSelection)(core);
-  const [, bump] = (0, import_react10.useReducer)((n) => n + 1, 0);
-  (0, import_react10.useEffect)(() => {
+  (0, import_editor_react5.useSelection)(core);
+  const readOnly = (0, import_editor_react5.useReadOnly)(core);
+  const [, bump] = (0, import_react14.useReducer)((n) => n + 1, 0);
+  (0, import_react14.useEffect)(() => {
     const kinds = ["nodeChanged", "nodeAdded", "nodeRemoved"];
     const disposers = kinds.map((k) => core.events.on(k, bump));
     return () => {
@@ -1484,7 +2272,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 = (0, import_react10.useCallback)(
+  const moveAll = (0, import_react14.useCallback)(
     (fn) => {
       const targets = selectedNodes(core);
       if (targets.length === 0) {
@@ -1492,13 +2280,13 @@ function PositionPanel({ core, livePosition }) {
       }
       core.history.transact("Align", () => {
         for (const n of targets) {
-          core.commands.execute(new import_editor_core3.MoveNodeCommand(n.id, fn(n)));
+          core.commands.execute(new import_editor_core4.MoveNodeCommand(n.id, fn(n)));
         }
       });
     },
     [core]
   );
-  const align = (0, import_react10.useCallback)(
+  const align = (0, import_react14.useCallback)(
     (kind) => {
       const targets = selectedNodes(core);
       if (targets.length === 0) {
@@ -1531,17 +2319,17 @@ function PositionPanel({ core, livePosition }) {
     },
     [core, moveAll]
   );
-  const setCoord = (0, import_react10.useCallback)(
+  const setCoord = (0, import_react14.useCallback)(
     (axis, value) => {
       if (single === void 0 || Number.isNaN(value)) {
         return;
       }
       const next = axis === "x" ? { x: value, y: single.position.y } : { x: single.position.x, y: value };
-      core.commands.execute(new import_editor_core3.MoveNodeCommand(single.id, next));
+      core.commands.execute(new import_editor_core4.MoveNodeCommand(single.id, next));
     },
     [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" },
@@ -1550,9 +2338,9 @@ function PositionPanel({ core, livePosition }) {
     { kind: "vcenter", label: "Align middle", d: "M4 12h16M9 8v8M15 9v6" },
     { kind: "bottom", label: "Align bottom", d: "M4 19h16M8 7v8M16 12v3" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("section", { className: "hl-position", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h3", { className: "hl-position-title hl-mono", children: "Position" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "hl-position-align", role: "group", "aria-label": "Align", children: alignButtons.map((b) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("section", { className: "hl-position", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { className: "hl-position-title hl-mono", children: "Position" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "hl-position-align", role: "group", "aria-label": "Align", children: alignButtons.map((b) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "button",
       {
         className: "hl-position-alignbtn",
@@ -1560,55 +2348,55 @@ function PositionPanel({ core, livePosition }) {
         disabled,
         title: b.label,
         "aria-label": b.label,
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: b.d }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: b.d }) })
       },
       b.kind
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "hl-position-coords", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "hl-position-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "hl-position-coords", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "hl-position-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "input",
           {
             type: "number",
             className: "hl-position-input hl-mono",
             value: shownPos !== void 0 ? Math.round(shownPos.x) : "",
-            disabled: single === void 0,
+            disabled: readOnly || single === void 0,
             onChange: (e) => setCoord("x", Number(e.target.value)),
             "aria-label": "X position"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "hl-position-axis hl-mono", children: "X" })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "hl-position-axis hl-mono", children: "X" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "hl-position-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "hl-position-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "input",
           {
             type: "number",
             className: "hl-position-input hl-mono",
             value: shownPos !== void 0 ? Math.round(shownPos.y) : "",
-            disabled: single === void 0,
+            disabled: readOnly || single === void 0,
             onChange: (e) => setCoord("y", Number(e.target.value)),
             "aria-label": "Y position"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "hl-position-axis hl-mono", children: "Y" })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "hl-position-axis hl-mono", children: "Y" })
       ] })
     ] })
   ] });
 }
 
 // src/command-palette/NodeSearch.tsx
-var import_react11 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var PANEL_WIDTH = 320;
 var PANEL_MAX_HEIGHT = 360;
 function NodeSearch({ controller }) {
   const { state } = controller;
-  const [query, setQuery] = (0, import_react11.useState)("");
-  const [active, setActive] = (0, import_react11.useState)(0);
-  const inputRef = (0, import_react11.useRef)(null);
+  const [query, setQuery] = (0, import_react15.useState)("");
+  const [active, setActive] = (0, import_react15.useState)(0);
+  const inputRef = (0, import_react15.useRef)(null);
   const isOpen = state !== void 0;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     var _a;
     if (isOpen) {
       setQuery("");
@@ -1616,12 +2404,12 @@ function NodeSearch({ controller }) {
       (_a = inputRef.current) == null ? void 0 : _a.focus();
     }
   }, [isOpen]);
-  const results = (0, import_react11.useMemo)(
+  const results = (0, import_react15.useMemo)(
     () => state !== void 0 ? controller.results(query) : [],
     [controller, state, query]
   );
   const clampedActive = results.length === 0 ? 0 : Math.min(active, results.length - 1);
-  const choose = (0, import_react11.useCallback)(
+  const choose = (0, import_react15.useCallback)(
     (view) => {
       if (view !== void 0) {
         controller.commit(view);
@@ -1629,7 +2417,7 @@ function NodeSearch({ controller }) {
     },
     [controller]
   );
-  const onKeyDown = (0, import_react11.useCallback)(
+  const onKeyDown = (0, import_react15.useCallback)(
     (event) => {
       switch (event.key) {
         case "ArrowDown":
@@ -1659,8 +2447,8 @@ function NodeSearch({ controller }) {
   }
   const style = clampToViewport(state.screen.x, state.screen.y);
   const connectMode = state.pending !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
         className: "hl-node-search-scrim",
@@ -1669,10 +2457,10 @@ function NodeSearch({ controller }) {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "hl-node-search", style, role: "dialog", "aria-label": "Create node", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "hl-node-search-field", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-node-search-glyph", "aria-hidden": true, children: connectMode ? "\u2933" : "\uFF0B" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "hl-node-search", style, role: "dialog", "aria-label": "Create node", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "hl-node-search-field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "hl-node-search-glyph", "aria-hidden": true, children: connectMode ? "\u2933" : "\uFF0B" }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "input",
           {
             ref: inputRef,
@@ -1690,12 +2478,12 @@ function NodeSearch({ controller }) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("ul", { className: "hl-node-search-list", role: "listbox", children: [
-        results.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { className: "hl-node-search-empty hl-mono", children: "no matching nodes" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("ul", { className: "hl-node-search-list", role: "listbox", children: [
+        results.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { className: "hl-node-search-empty hl-mono", children: "no matching nodes" }),
         results.map((view, index) => {
           const descriptor = view.result.value;
           const kind = descriptor.kind;
-          return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
             "li",
             {
               role: "option",
@@ -1707,15 +2495,15 @@ function NodeSearch({ controller }) {
                 choose(view);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   "span",
                   {
                     className: `hl-node-search-kind hl-mono hl-kind-${kind.toLowerCase()}`,
                     children: kind
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-node-search-label", children: highlight(descriptor.displayName, view.result.match) }),
-                view.connectPortId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hl-node-search-port hl-mono", children: view.connectPortId })
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "hl-node-search-label", children: highlight(descriptor.displayName, view.result.match) }),
+                view.connectPortId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "hl-node-search-port hl-mono", children: view.connectPortId })
               ]
             },
             descriptor.code
@@ -1729,7 +2517,7 @@ function highlight(text, match) {
   const hit = new Set(match.positions);
   const chars = Array.from(text);
   return chars.map(
-    (ch, i) => hit.has(i) ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("mark", { className: "hl-node-search-hit", children: ch }, i) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: ch }, i)
+    (ch, i) => hit.has(i) ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("mark", { className: "hl-node-search-hit", children: ch }, i) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: ch }, i)
   );
 }
 function clampToViewport(x, y) {
@@ -1742,8 +2530,8 @@ function clampToViewport(x, y) {
 }
 
 // src/command-palette/useNodeSearch.ts
-var import_react12 = require("react");
-var import_editor_core4 = require("@hlang-org/editor-core");
+var import_react16 = require("react");
+var import_editor_core5 = require("@hlang-org/editor-core");
 
 // src/command-palette/fuzzy.ts
 function fuzzyScore(query, target) {
@@ -1833,21 +2621,21 @@ function firstCompletingPort(ports, pending, validator) {
 
 // src/command-palette/useNodeSearch.ts
 function useNodeSearch(core) {
-  const [state, setState] = (0, import_react12.useState)(void 0);
-  const openBlank = (0, import_react12.useCallback)((screen, flow) => {
+  const [state, setState] = (0, import_react16.useState)(void 0);
+  const openBlank = (0, import_react16.useCallback)((screen, flow) => {
     setState({ screen, flow });
   }, []);
-  const openFromConnection = (0, import_react12.useCallback)(
+  const openFromConnection = (0, import_react16.useCallback)(
     (screen, flow, pending) => {
       setState({ screen, flow, pending });
     },
     []
   );
-  const close = (0, import_react12.useCallback)(() => {
+  const close = (0, import_react16.useCallback)(() => {
     setState(void 0);
   }, []);
   const descriptors = core.registry.list();
-  const results = (0, import_react12.useCallback)(
+  const results = (0, import_react16.useCallback)(
     (query) => {
       if ((state == null ? void 0 : state.pending) !== void 0) {
         return connectableCandidates(
@@ -1861,7 +2649,7 @@ function useNodeSearch(core) {
     },
     [state, descriptors, core]
   );
-  const commit = (0, import_react12.useCallback)(
+  const commit = (0, import_react16.useCallback)(
     (view) => {
       if (state === void 0) {
         return;
@@ -1872,44 +2660,44 @@ function useNodeSearch(core) {
         const pending = state.pending;
         const connectPortId = view.connectPortId;
         core.history.transact("Create & Connect Node", () => {
-          core.commands.execute(new import_editor_core4.AddNodeCommand(node));
+          core.commands.execute(new import_editor_core5.AddNodeCommand(node));
           const edgeId = core.idGenerator.nextEdgeId();
           const newEndpoint = { nodeId: node.id, portId: connectPortId };
           const [source, target] = pending.direction === "from-source" ? [pending.fromEndpoint, newEndpoint] : [newEndpoint, pending.fromEndpoint];
-          core.commands.execute(new import_editor_core4.ConnectCommand(edgeId, source, target));
+          core.commands.execute(new import_editor_core5.ConnectCommand(edgeId, source, target));
         });
       } else {
-        core.commands.execute(new import_editor_core4.AddNodeCommand(node));
+        core.commands.execute(new import_editor_core5.AddNodeCommand(node));
       }
       setState(void 0);
     },
     [state, core]
   );
-  return (0, import_react12.useMemo)(
+  return (0, import_react16.useMemo)(
     () => ({ state, openBlank, openFromConnection, close, results, commit }),
     [state, openBlank, openFromConnection, close, results, commit]
   );
 }
 
 // src/command-palette/useNodeSearchTriggers.ts
-var import_react13 = require("react");
-var import_react14 = require("@xyflow/react");
+var import_react17 = require("react");
+var import_react18 = require("@xyflow/react");
 var DEFAULT_DOUBLE_CLICK_MS = 350;
 function useNodeSearchTriggers(core, search, options = {}) {
   var _a, _b;
-  const flow = (0, import_react14.useReactFlow)();
+  const flow = (0, import_react18.useReactFlow)();
   const doubleClickMs = (_a = options.doubleClickMs) != null ? _a : DEFAULT_DOUBLE_CLICK_MS;
   const now = (_b = options.now) != null ? _b : defaultNow;
-  const startRef = (0, import_react13.useRef)(null);
-  const lastPaneClickRef = (0, import_react13.useRef)(Number.NEGATIVE_INFINITY);
-  const onConnectStart = (0, import_react13.useCallback)((_event, params) => {
+  const startRef = (0, import_react17.useRef)(null);
+  const lastPaneClickRef = (0, import_react17.useRef)(Number.NEGATIVE_INFINITY);
+  const onConnectStart = (0, import_react17.useCallback)((_event, params) => {
     startRef.current = params;
   }, []);
-  const onConnectEnd = (0, import_react13.useCallback)(
+  const onConnectEnd = (0, import_react17.useCallback)(
     (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) {
@@ -1938,8 +2726,11 @@ function useNodeSearchTriggers(core, search, options = {}) {
     },
     [core, flow, search]
   );
-  const onPaneClick = (0, import_react13.useCallback)(
+  const onPaneClick = (0, import_react17.useCallback)(
     (event) => {
+      if (core.mode.readOnly) {
+        return;
+      }
       const t = now();
       const isDouble = t - lastPaneClickRef.current <= doubleClickMs;
       lastPaneClickRef.current = t;
@@ -1950,7 +2741,7 @@ function useNodeSearchTriggers(core, search, options = {}) {
       const screen = { x: event.clientX, y: event.clientY };
       search.openBlank(screen, flow.screenToFlowPosition(screen));
     },
-    [flow, search, doubleClickMs, now]
+    [core, flow, search, doubleClickMs, now]
   );
   return { onConnectStart, onConnectEnd, onPaneClick };
 }
@@ -1970,8 +2761,8 @@ function pointerOf(event) {
 }
 
 // src/hooks/useEditorHotkeys.ts
-var import_react15 = require("react");
-var import_editor_react5 = require("@hlang-org/editor-react");
+var import_react19 = require("react");
+var import_editor_react6 = require("@hlang-org/editor-react");
 function isEditableTarget(target) {
   if (!(target instanceof HTMLElement)) {
     return false;
@@ -1987,9 +2778,9 @@ function withinScope(target, scope) {
   return root !== null && target instanceof Node && root.contains(target);
 }
 function useEditorHotkeys(core, options = {}) {
-  const clipboard = (0, import_editor_react5.useClipboard)(core);
+  const clipboard = (0, import_editor_react6.useClipboard)(core);
   const { scope } = options;
-  (0, import_react15.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const onKeyDown = (event) => {
       if (!withinScope(event.target, scope) || isEditableTarget(event.target)) {
         return;
@@ -2052,33 +2843,33 @@ function useEditorHotkeys(core, options = {}) {
 }
 
 // src/context-menu/NodeContextMenu.tsx
-var import_react16 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime34 = require("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] = (0, import_react16.useState)(0);
-  const menuRef = (0, import_react16.useRef)(null);
+  const [active, setActive] = (0, import_react20.useState)(0);
+  const menuRef = (0, import_react20.useRef)(null);
   const isOpen = state !== void 0;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     var _a;
     if (isOpen) {
       setActive(0);
       (_a = menuRef.current) == null ? void 0 : _a.focus();
     }
   }, [isOpen]);
-  const rows = (0, import_react16.useMemo)(
+  const rows = (0, import_react20.useMemo)(
     () => state !== void 0 ? items(state.nodeId) : [],
     [items, state]
   );
-  const enabledIndices = (0, import_react16.useMemo)(
+  const enabledIndices = (0, import_react20.useMemo)(
     () => rows.map((r, i) => r.disabled ? -1 : i).filter((i) => i >= 0),
     [rows]
   );
-  const move = (0, import_react16.useCallback)(
+  const move = (0, import_react20.useCallback)(
     (delta) => {
       if (enabledIndices.length === 0) {
         return;
@@ -2092,7 +2883,7 @@ function NodeContextMenu({ controller, items }) {
     },
     [enabledIndices]
   );
-  const choose = (0, import_react16.useCallback)(
+  const choose = (0, import_react20.useCallback)(
     (item) => {
       if (item === void 0 || item.disabled) {
         return;
@@ -2102,7 +2893,7 @@ function NodeContextMenu({ controller, items }) {
     },
     [controller]
   );
-  const onKeyDown = (0, import_react16.useCallback)(
+  const onKeyDown = (0, import_react20.useCallback)(
     (event) => {
       switch (event.key) {
         case "ArrowDown":
@@ -2131,8 +2922,8 @@ function NodeContextMenu({ controller, items }) {
     return null;
   }
   const style = clampToViewport2(state.screen.x, state.screen.y, rows.length);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
         className: "hl-ctx-scrim",
@@ -2145,7 +2936,7 @@ function NodeContextMenu({ controller, items }) {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
         ref: menuRef,
@@ -2155,7 +2946,7 @@ function NodeContextMenu({ controller, items }) {
         "aria-label": "Node actions",
         tabIndex: -1,
         onKeyDown,
-        children: rows.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        children: rows.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           "button",
           {
             type: "button",
@@ -2168,9 +2959,9 @@ function NodeContextMenu({ controller, items }) {
               choose(item);
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-ctx-item-icon", "aria-hidden": true, children: item.icon }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-ctx-item-label", children: item.label }),
-              item.shortcut !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "hl-ctx-item-key hl-mono", children: item.shortcut })
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "hl-ctx-item-icon", "aria-hidden": true, children: item.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "hl-ctx-item-label", children: item.label }),
+              item.shortcut !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "hl-ctx-item-key hl-mono", children: item.shortcut })
             ]
           },
           item.id
@@ -2190,21 +2981,21 @@ function clampToViewport2(x, y, rowCount) {
 }
 
 // src/context-menu/useNodeContextMenu.ts
-var import_react17 = require("react");
+var import_react21 = require("react");
 function useNodeContextMenu() {
-  const [state, setState] = (0, import_react17.useState)(void 0);
-  const openForNode = (0, import_react17.useCallback)((screen, nodeId) => {
+  const [state, setState] = (0, import_react21.useState)(void 0);
+  const openForNode = (0, import_react21.useCallback)((screen, nodeId) => {
     setState({ screen, nodeId });
   }, []);
-  const close = (0, import_react17.useCallback)(() => {
+  const close = (0, import_react21.useCallback)(() => {
     setState(void 0);
   }, []);
-  return (0, import_react17.useMemo)(() => ({ state, openForNode, close }), [state, openForNode, close]);
+  return (0, import_react21.useMemo)(() => ({ state, openForNode, close }), [state, openForNode, close]);
 }
 
 // src/overlays/Cheatsheet.tsx
-var import_react18 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var DEFAULT_GROUPS = [
   {
     title: "Edit",
@@ -2240,8 +3031,8 @@ var DEFAULT_GROUPS = [
   }
 ];
 function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
-  const dialogRef = (0, import_react18.useRef)(null);
-  (0, import_react18.useEffect)(() => {
+  const dialogRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     var _a;
     if (!open) {
       return;
@@ -2258,9 +3049,9 @@ function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hl-cheat-scrim", onPointerDown: onClose }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "hl-cheat-scrim", onPointerDown: onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "div",
       {
         ref: dialogRef,
@@ -2270,18 +3061,18 @@ function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
         "aria-label": "Keyboard shortcuts",
         tabIndex: -1,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "hl-cheat-head", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "hl-cheat-title", children: "Shortcuts" }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { className: "hl-cheat-close", onClick: onClose, "aria-label": "Close", children: "\u2715" })
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "hl-cheat-head", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-cheat-title", children: "Shortcuts" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", { className: "hl-cheat-close", onClick: onClose, "aria-label": "Close", children: "\u2715" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hl-cheat-grid", children: groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("section", { className: "hl-cheat-group", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "hl-cheat-group-title hl-mono", children: group.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "hl-cheat-rows", children: group.rows.map((row) => (
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "hl-cheat-grid", children: groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("section", { className: "hl-cheat-group", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { className: "hl-cheat-group-title hl-mono", children: group.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "hl-cheat-rows", children: group.rows.map((row) => (
               // A row is a binding: one action can have several (two ways to pan),
               // so neither the label nor the keys alone identify it.
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { className: "hl-cheat-row", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "hl-cheat-label", children: row.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("kbd", { className: "hl-cheat-keys hl-mono", children: row.keys })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "hl-cheat-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "hl-cheat-label", children: row.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("kbd", { className: "hl-cheat-keys hl-mono", children: row.keys })
               ] }, `${row.keys}\0${row.label}`)
             )) })
           ] }, group.title)) })
@@ -2292,13 +3083,13 @@ function Cheatsheet({ open, onClose, groups = DEFAULT_GROUPS }) {
 }
 
 // src/overlays/Toast.tsx
-var import_react19 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var ToastCtx = (0, import_react19.createContext)({ show: () => void 0 });
+var import_react23 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var ToastCtx = (0, import_react23.createContext)({ show: () => void 0 });
 function ToastProvider({ children, duration = 2200 }) {
-  const [items, setItems] = (0, import_react19.useState)([]);
-  const seq = (0, import_react19.useRef)(0);
-  const show = (0, import_react19.useCallback)(
+  const [items, setItems] = (0, import_react23.useState)([]);
+  const seq = (0, import_react23.useRef)(0);
+  const show = (0, import_react23.useCallback)(
     (message) => {
       seq.current += 1;
       const id = seq.current;
@@ -2309,22 +3100,22 @@ function ToastProvider({ children, duration = 2200 }) {
     },
     [duration]
   );
-  const api = (0, import_react19.useMemo)(() => ({ show }), [show]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(ToastCtx.Provider, { value: api, children: [
+  const api = (0, import_react23.useMemo)(() => ({ show }), [show]);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(ToastCtx.Provider, { value: api, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "hl-toast-stack", "aria-live": "polite", children: items.map((t) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "hl-toast", children: t.message }, t.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "hl-toast-stack", "aria-live": "polite", children: items.map((t) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "hl-toast", children: t.message }, t.id)) })
   ] });
 }
 function useToast() {
-  return (0, import_react19.useContext)(ToastCtx);
+  return (0, import_react23.useContext)(ToastCtx);
 }
 
 // src/hooks/useLiveSignals.ts
-var import_react20 = require("react");
+var import_react24 = require("react");
 function useLiveSignals(core, handle, explicitStore) {
   const contextStore = useLiveSignalStore();
   const store = explicitStore != null ? explicitStore : contextStore;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (store === null) {
       return;
     }
@@ -2333,6 +3124,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);
@@ -2345,7 +3138,8 @@ function useLiveSignals(core, handle, explicitStore) {
       removed.dispose();
     };
   }, [core, store]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
+    var _a, _b, _c;
     if (store === null) {
       return;
     }
@@ -2353,15 +3147,406 @@ 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
+var import_react25 = require("react");
+function useRunTrace(trace, handle) {
+  (0, import_react25.useEffect)(() => {
+    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
+var import_react26 = require("react");
+var FOLLOW_SLACK_PX = 24;
+function useFollowScroll() {
+  const ref = (0, import_react26.useRef)(null);
+  const [follow, setFollow] = (0, import_react26.useState)(true);
+  (0, import_react26.useLayoutEffect)(() => {
+    const element = ref.current;
+    if (follow && element !== null) {
+      element.scrollTop = element.scrollHeight;
+    }
+  });
+  const onScroll = (0, import_react26.useCallback)((event) => {
+    const element = event.currentTarget;
+    setFollow(element.scrollHeight - element.scrollTop - element.clientHeight <= FOLLOW_SLACK_PX);
+  }, []);
+  return { ref, onScroll, follow, setFollow };
+}
+
+// src/panels/RunLog.tsx
+var import_react27 = require("react");
+var import_editor_react7 = require("@hlang-org/editor-react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function RunLog({ core, onSelectNode, title = "Run log", leading }) {
+  const trace = useRunTraceStore();
+  useRunTraceVersion(trace);
+  const selection = (0, import_editor_react7.useSelection)(core);
+  const [onlySelected, setOnlySelected] = (0, import_react27.useState)(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__ */ (0, import_jsx_runtime37.jsxs)("section", { className: "hl-runlog", "aria-label": title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      PanelHead,
+      {
+        leading: leading != null ? leading : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-panel-title", children: title }),
+        meta: (entries.length === all.length ? `${String(all.length)} events` : `${String(entries.length)} of ${String(all.length)} events`) + (trace.dropped > 0 ? ` \xB7 ${String(trace.dropped)} earlier not kept` : ""),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            PanelAction,
+            {
+              icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FilterIcon, {}),
+              label: onlySelected && selectedId !== void 0 ? `Only ${label(selectedId)}` : "Selected node",
+              title: selectedId === void 0 ? "Select a node to filter by it" : `Only ${label(selectedId)}`,
+              pressed: onlySelected,
+              disabled: selectedId === void 0 && !onlySelected,
+              onClick: () => {
+                setOnlySelected((value) => !value);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            PanelAction,
+            {
+              icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FollowIcon, {}),
+              label: "Follow",
+              title: "Follow the newest event",
+              pressed: follow,
+              onClick: () => {
+                setFollow(!follow);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            PanelAction,
+            {
+              icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ClearIcon, {}),
+              label: "Clear",
+              title: "Clear the log",
+              disabled: all.length === 0,
+              onClick: () => {
+                trace.clear();
+              }
+            }
+          )
+        ]
+      }
+    ),
+    entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "hl-runlog-empty", children: all.length === 0 ? "Run the graph to see every message as it moves through it." : "Nothing involving the selected node yet." }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ol", { className: "hl-runlog-body hl-mono", ref: bodyRef, onScroll, children: entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Row, { entry, label, onChoose: choose }, entry.seq)) })
+  ] });
+}
+function Row({
+  entry,
+  label,
+  onChoose
+}) {
+  switch (entry.kind) {
+    case "error":
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Event, { className: "is-error", at: entry.at, onChoose: () => onChoose(entry.nodeId), ms: "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NodePort, { node: label(entry.nodeId), port: "error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-value", children: previewValue(entry.error) })
+      ] });
+    case "ended":
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Event, { className: "is-end", at: entry.at, onChoose: () => onChoose(entry.nodeId), ms: "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NodePort, { node: label(entry.nodeId), port: entry.portId }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-value", children: "ended" })
+      ] });
+    case "finished":
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Event, { className: "is-end", at: entry.at, onChoose: () => onChoose(entry.nodeId), ms: "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NodePort, { node: label(entry.nodeId), port: "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-value", children: "finished" })
+      ] });
+    case "dropped":
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Event, { className: "is-dropped", at: entry.at, onChoose: () => onChoose(entry.targetNodeId), ms: "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Route, { entry, label }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "hl-runlog-value", children: [
+          "dropped ",
+          previewValue(entry.message)
+        ] })
+      ] });
+    case "delivery":
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Event, { className: "", at: entry.at, onChoose: () => onChoose(entry.targetNodeId), ms: formatDuration(entry.duration), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Route, { entry, label }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-value", children: previewValue(entry.message) })
+      ] });
+  }
+}
+function Event({
+  className: className2,
+  at,
+  ms,
+  onChoose,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { className: `hl-runlog-row ${className2}`.trim(), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("button", { type: "button", className: "hl-runlog-hit", onClick: onChoose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-at", children: formatElapsed(at) }),
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-ms", children: ms })
+  ] }) });
+}
+function NodePort({ node, port }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "hl-runlog-route", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-node", children: node }),
+    port === "" ? null : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-port", children: port })
+  ] });
+}
+function Route({
+  entry,
+  label
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "hl-runlog-route", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-node", children: label(entry.sourceNodeId) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-port", children: entry.sourcePortId }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-arrow", "aria-label": "to", children: "\u2192" }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-node", children: label(entry.targetNodeId) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "hl-runlog-port", children: entry.targetPortId })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AssetGrid,
@@ -2369,30 +3554,51 @@ function useLiveSignals(core, handle, explicitStore) {
   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,
@@ -2401,26 +3607,47 @@ function useLiveSignals(core, handle, explicitStore) {
   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.js.map