@xenosystem/blocks 0.13.24 → 0.13.26

package/dist/edit/index.js

@@ -1487,9 +1487,9 @@ function LayersPanelView({ controller }) {
   const getSnapshot = useCallback(() => controller.getRevision(), [controller]);
   useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   const view = layersViewState(controller);
-  const ui9 = (intent) => applyLayersUi(controller, intent);
+  const ui10 = (intent) => applyLayersUi(controller, intent);
   return /* @__PURE__ */ jsxs(Column, { className: "xeno-layers-panel", children: [
-    view.searchShown ? /* @__PURE__ */ jsx2(Toolbar, { children: /* @__PURE__ */ jsx2(SearchField, { value: view.filter, onChange: (v) => ui9({ kind: "filter", value: v }), placeholder: "Search layers", label: "Search layers" }) }) : null,
+    view.searchShown ? /* @__PURE__ */ jsx2(Toolbar, { children: /* @__PURE__ */ jsx2(SearchField, { value: view.filter, onChange: (v) => ui10({ kind: "filter", value: v }), placeholder: "Search layers", label: "Search layers" }) }) : null,
     /* @__PURE__ */ jsxs(LayersScroller, { controller, children: [
       /* @__PURE__ */ jsx2(RowList, { role: "tree", "aria-label": "Layers", children: /* @__PURE__ */ jsx2(VirtualWindow, { totalHeight: view.totalHeight, offsetTop: view.offsetTop, children: view.rows.map((row2) => /* @__PURE__ */ jsx2(LayerRow, { row: row2, thumbnailSize: view.thumbnailSize, controller }, row2.id)) }) }),
       view.empty ? /* @__PURE__ */ jsx2(EmptyState, { title: "No layers" }) : null
@@ -1602,7 +1602,7 @@ function LayersThumbnail({ thumbnailKey, size, controller }) {
   return /* @__PURE__ */ jsx2(Thumbnail, { size, data: controller.getThumbnail(thumbnailKey) });
 }
 function LayerRow({ row: row2, thumbnailSize, controller }) {
-  const ui9 = (intent) => applyLayersUi(controller, intent);
+  const ui10 = (intent) => applyLayersUi(controller, intent);
   return /* @__PURE__ */ jsx2(
     Row,
     {
@@ -1617,11 +1617,11 @@ function LayerRow({ row: row2, thumbnailSize, controller }) {
       title: row2.title,
       icon: row2.hasThumbnail ? /* @__PURE__ */ jsx2(LayersThumbnail, { thumbnailKey: row2.thumbnailKey, size: thumbnailSize, controller }) : /* @__PURE__ */ jsx2(KindGlyph, {}),
       leading: /* @__PURE__ */ jsxs(Fragment, { children: [
-        row2.showVisibility ? /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(VisibilityIcon, { open: row2.visible }), label: row2.visibilityLabel, active: row2.visible, onClick: () => ui9({ kind: "toggleProp", id: row2.id, prop: "visible" }) }) : null,
-        row2.showLock ? /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(LockStateIcon, { locked: row2.locked }), label: row2.lockLabel, active: row2.locked, onClick: () => ui9({ kind: "toggleProp", id: row2.id, prop: "locked" }) }) : null,
-        row2.showSolo ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "S", label: "Solo", on: row2.solo, onChange: () => ui9({ kind: "toggleProp", id: row2.id, prop: "solo" }) }) : null,
-        row2.showMute ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "M", label: "Mute", on: row2.muted, onChange: () => ui9({ kind: "toggleProp", id: row2.id, prop: "muted" }) }) : null,
-        row2.showArm ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "R", label: "Arm", on: row2.armed, onChange: () => ui9({ kind: "toggleProp", id: row2.id, prop: "armed" }) }) : null,
+        row2.showVisibility ? /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(VisibilityIcon, { open: row2.visible }), label: row2.visibilityLabel, active: row2.visible, onClick: () => ui10({ kind: "toggleProp", id: row2.id, prop: "visible" }) }) : null,
+        row2.showLock ? /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(LockStateIcon, { locked: row2.locked }), label: row2.lockLabel, active: row2.locked, onClick: () => ui10({ kind: "toggleProp", id: row2.id, prop: "locked" }) }) : null,
+        row2.showSolo ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "S", label: "Solo", on: row2.solo, onChange: () => ui10({ kind: "toggleProp", id: row2.id, prop: "solo" }) }) : null,
+        row2.showMute ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "M", label: "Mute", on: row2.muted, onChange: () => ui10({ kind: "toggleProp", id: row2.id, prop: "muted" }) }) : null,
+        row2.showArm ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "R", label: "Arm", on: row2.armed, onChange: () => ui10({ kind: "toggleProp", id: row2.id, prop: "armed" }) }) : null,
         row2.showColor ? /* @__PURE__ */ jsx2(ColorTag, { color: row2.colorLabel }) : null
       ] }),
       label: row2.renaming ? /* @__PURE__ */ jsx2(LayersRenameField, { id: row2.id, controller }) : row2.name,
@@ -1629,9 +1629,9 @@ function LayerRow({ row: row2, thumbnailSize, controller }) {
         row2.adornments.map((a) => /* @__PURE__ */ jsx2(Badge, { size: "sm", title: a.title, children: a.text }, a.key)),
         row2.showOpacity ? /* @__PURE__ */ jsx2(Text, { role: "number", children: row2.opacity }) : null
       ] }),
-      onExpandedChange: () => ui9({ kind: "toggleExpanded", id: row2.id }),
-      onDoubleClick: () => ui9({ kind: "beginRename", id: row2.id }),
-      onContextMenuAt: (x, y) => ui9({ kind: "contextMenu", id: row2.id, x, y })
+      onExpandedChange: () => ui10({ kind: "toggleExpanded", id: row2.id }),
+      onDoubleClick: () => ui10({ kind: "beginRename", id: row2.id }),
+      onContextMenuAt: (x, y) => ui10({ kind: "contextMenu", id: row2.id, x, y })
     }
   );
 }
@@ -2023,8 +2023,8 @@ function constraintsOf(field) {
     scale: field.scale
   };
 }
-function parseNumeric(text9) {
-  const trimmed = String(text9).trim();
+function parseNumeric(text10) {
+  const trimmed = String(text10).trim();
   if (trimmed.length === 0) return { ok: false, reason: "empty" };
   const match = /^[+-]?(\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/.exec(trimmed);
   if (!match) return { ok: false, reason: "nan" };
@@ -2049,8 +2049,8 @@ function normalizeNumeric(value, c) {
 function formatNumeric(value, field) {
   if (!Number.isFinite(value)) return "";
   const precision = field.precision;
-  const text9 = typeof precision === "number" && Number.isFinite(precision) ? value.toFixed(Math.max(0, Math.floor(precision))) : String(value);
-  return field.unit ? `${text9}${field.unit}` : text9;
+  const text10 = typeof precision === "number" && Number.isFinite(precision) ? value.toFixed(Math.max(0, Math.floor(precision))) : String(value);
+  return field.unit ? `${text10}${field.unit}` : text10;
 }
 function usesLogScale(c) {
   return c.scale === "log" && typeof c.min === "number" && typeof c.max === "number" && c.min > 0 && c.max > c.min;
@@ -2384,44 +2384,44 @@ var InspectorPanelController = class {
     if (!field || !isFieldEditable(field)) return;
     const mixed = isFieldMixed(field);
     const value = this.getFieldValue(fieldId);
-    const text9 = mixed ? "" : field.type === "number" && typeof value === "number" ? formatNumeric(value, field) : value === void 0 || value === null ? "" : String(value);
-    this.drafts.set(fieldId, { text: text9, original: value });
+    const text10 = mixed ? "" : field.type === "number" && typeof value === "number" ? formatNumeric(value, field) : value === void 0 || value === null ? "" : String(value);
+    this.drafts.set(fieldId, { text: text10, original: value });
     this.focusedFieldId = fieldId;
     this.emitFieldFocus(fieldId);
     this.notify();
   }
   /** Update the draft text (typing). Emits nothing under the `blur` policy. */
-  setDraft(fieldId, text9) {
+  setDraft(fieldId, text10) {
     const draft = this.drafts.get(fieldId);
     if (!draft) {
-      this.drafts.set(fieldId, { text: text9, original: this.getFieldValue(fieldId) });
+      this.drafts.set(fieldId, { text: text10, original: this.getFieldValue(fieldId) });
     } else {
-      draft.text = text9;
+      draft.text = text10;
     }
     const field = this.getField(fieldId);
     if (field && commitPolicyOf(field) === "live") {
-      const parsed = this.parseDraft(fieldId, text9);
+      const parsed = this.parseDraft(fieldId, text10);
       if (parsed.ok) this.emitSet(fieldId, parsed.value);
     }
     this.notify();
   }
   /** Parse a draft string into a field-appropriate value. */
-  parseDraft(fieldId, text9) {
+  parseDraft(fieldId, text10) {
     const field = this.getField(fieldId);
     if (!field) return { ok: false };
     if (field.type === "number") {
-      const parsed = parseNumeric(text9);
+      const parsed = parseNumeric(text10);
       if (!parsed.ok) return { ok: false };
       return { ok: true, value: normalizeNumeric(parsed.value, constraintsOf(field)) };
     }
     if (field.type === "json") {
       try {
-        return { ok: true, value: JSON.parse(text9) };
+        return { ok: true, value: JSON.parse(text10) };
       } catch {
         return { ok: false };
       }
     }
-    return { ok: true, value: text9 };
+    return { ok: true, value: text10 };
   }
   /**
    * Commit the draft (Enter / blur). Invalid input reverts instead of committing garbage.
@@ -3347,7 +3347,7 @@ function NumberWidget({ field, controller, component }) {
     },
     [controller, editable, field.id, component]
   );
-  const text9 = component !== void 0 ? (() => {
+  const text10 = component !== void 0 ? (() => {
     const raw = controller.getFieldValue(field.id);
     const v = Array.isArray(raw) ? raw[component] : void 0;
     return typeof v === "number" ? formatNumeric(v, field) : "";
@@ -3359,7 +3359,7 @@ function NumberWidget({ field, controller, component }) {
       Input2,
       {
         inputMode: "decimal",
-        value: text9,
+        value: text10,
         placeholder: mixed ? controller.getMixedPlaceholder() : field.placeholder,
         mixed,
         readOnly: !editable,
@@ -3577,7 +3577,7 @@ function ActionGlyph({ glyph }) {
   return /* @__PURE__ */ jsx4("span", { "aria-hidden": true, children: glyph });
 }
 function SectionView({ section, controller }) {
-  const ui9 = (intent) => applyInspectorUi(controller, intent);
+  const ui10 = (intent) => applyInspectorUi(controller, intent);
   const hasActions = section.actions.length > 0 || section.hasAddMenu;
   return /* @__PURE__ */ jsxs3(
     Section,
@@ -3586,13 +3586,13 @@ function SectionView({ section, controller }) {
       flush: true,
       collapsible: section.collapsible,
       collapsed: section.collapsed,
-      onCollapsedChange: () => ui9({ kind: "toggleSectionCollapsed", sectionId: section.id }),
+      onCollapsedChange: () => ui10({ kind: "toggleSectionCollapsed", sectionId: section.id }),
       enabled: section.enabled,
-      onEnabledChange: () => ui9({ kind: "toggleSectionEnabled", sectionId: section.id }),
+      onEnabledChange: () => ui10({ kind: "toggleSectionEnabled", sectionId: section.id }),
       badge: section.badge ? /* @__PURE__ */ jsx4(Badge2, { children: section.badge }) : null,
       actions: hasActions ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
-        section.actions.map((action) => /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(ActionGlyph, { glyph: action.glyph }), label: action.label, disabled: action.disabled, onClick: () => ui9({ kind: "runAction", sectionId: section.id, actionId: action.id }) }, action.id)),
-        section.hasAddMenu ? /* @__PURE__ */ jsx4(Menu, { size: "sm", trigger: "\uFF0B", items: section.addItems, label: section.addLabel, align: "end", onSelect: (id) => ui9({ kind: "addItem", sectionId: section.id, itemId: id }) }) : null
+        section.actions.map((action) => /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(ActionGlyph, { glyph: action.glyph }), label: action.label, disabled: action.disabled, onClick: () => ui10({ kind: "runAction", sectionId: section.id, actionId: action.id }) }, action.id)),
+        section.hasAddMenu ? /* @__PURE__ */ jsx4(Menu, { size: "sm", trigger: "\uFF0B", items: section.addItems, label: section.addLabel, align: "end", onSelect: (id) => ui10({ kind: "addItem", sectionId: section.id, itemId: id }) }) : null
       ] }) : null,
       children: [
         section.showEmptyHint ? /* @__PURE__ */ jsx4(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx4(Text3, { role: "caption", children: section.emptyHint }) }) : null,
@@ -3602,7 +3602,7 @@ function SectionView({ section, controller }) {
   );
 }
 function FieldRow({ row: row2, controller }) {
-  const ui9 = (intent) => applyInspectorUi(controller, intent);
+  const ui10 = (intent) => applyInspectorUi(controller, intent);
   return /* @__PURE__ */ jsxs3(Fragment3, { children: [
     /* @__PURE__ */ jsxs3(
       Field,
@@ -3610,19 +3610,19 @@ function FieldRow({ row: row2, controller }) {
         label: row2.label,
         title: row2.title,
         focused: row2.focused,
-        onLabelClick: () => ui9({ kind: "focusField", fieldId: row2.id }),
-        onContextMenu: (x, y) => ui9({ kind: "contextMenu", fieldId: row2.id, x, y }),
+        onLabelClick: () => ui10({ kind: "focusField", fieldId: row2.id }),
+        onContextMenu: (x, y) => ui10({ kind: "contextMenu", fieldId: row2.id, x, y }),
         leading: row2.showKeyframes ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
-          /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(StopwatchIcon, {}), label: "Toggle animation", active: row2.animated, onClick: () => ui9({ kind: "keyframe", fieldId: row2.id, op: "toggleAnim" }) }),
-          row2.animated ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(PrevIcon, {}), label: "Previous keyframe", disabled: row2.prevDisabled, onClick: () => ui9({ kind: "keyframe", fieldId: row2.id, op: "prev" }) }) : null,
-          row2.animated ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(DiamondIcon, { filled: row2.onKeyframe }), label: row2.keyframeLabel, onClick: () => ui9({ kind: "keyframe", fieldId: row2.id, op: row2.keyframeOp }) }) : null,
-          row2.animated ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(NextIcon, {}), label: "Next keyframe", disabled: row2.nextDisabled, onClick: () => ui9({ kind: "keyframe", fieldId: row2.id, op: "next" }) }) : null
+          /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(StopwatchIcon, {}), label: "Toggle animation", active: row2.animated, onClick: () => ui10({ kind: "keyframe", fieldId: row2.id, op: "toggleAnim" }) }),
+          row2.animated ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(PrevIcon, {}), label: "Previous keyframe", disabled: row2.prevDisabled, onClick: () => ui10({ kind: "keyframe", fieldId: row2.id, op: "prev" }) }) : null,
+          row2.animated ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(DiamondIcon, { filled: row2.onKeyframe }), label: row2.keyframeLabel, onClick: () => ui10({ kind: "keyframe", fieldId: row2.id, op: row2.keyframeOp }) }) : null,
+          row2.animated ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(NextIcon, {}), label: "Next keyframe", disabled: row2.nextDisabled, onClick: () => ui10({ kind: "keyframe", fieldId: row2.id, op: "next" }) }) : null
         ] }) : null,
         trailing: /* @__PURE__ */ jsxs3(Fragment3, { children: [
-          row2.showEasing ? /* @__PURE__ */ jsx4(Select2, { size: "sm", options: row2.easingOptions, value: row2.easing, label: "Easing", onChange: (v) => ui9({ kind: "setEasing", fieldId: row2.id, easing: v }) }) : null,
+          row2.showEasing ? /* @__PURE__ */ jsx4(Select2, { size: "sm", options: row2.easingOptions, value: row2.easing, label: "Easing", onChange: (v) => ui10({ kind: "setEasing", fieldId: row2.id, easing: v }) }) : null,
           row2.showKeyframes ? /* @__PURE__ */ jsx4(Badge2, { size: "sm", children: row2.keyframeChip }) : null,
-          row2.showToken ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(LinkIcon, {}), label: row2.tokenActionLabel, active: row2.bound, onClick: () => ui9({ kind: "bindToken", fieldId: row2.id }) }) : null,
-          row2.showReset ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(ResetIcon, {}), label: "Reset to default", onClick: () => ui9({ kind: "resetField", fieldId: row2.id }) }) : null
+          row2.showToken ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(LinkIcon, {}), label: row2.tokenActionLabel, active: row2.bound, onClick: () => ui10({ kind: "bindToken", fieldId: row2.id }) }) : null,
+          row2.showReset ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(ResetIcon, {}), label: "Reset to default", onClick: () => ui10({ kind: "resetField", fieldId: row2.id }) }) : null
         ] }),
         children: [
           row2.bound ? /* @__PURE__ */ jsx4(Badge2, { title: row2.tokenTitle, children: row2.tokenLabel }) : null,
@@ -4875,23 +4875,23 @@ function HistoryPanelView({ controller }) {
   const getSnapshot = useCallback4(() => controller.getRevision(), [controller]);
   useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
   const view = historyViewState(controller);
-  const ui9 = (intent) => applyHistoryUi(controller, intent);
+  const ui10 = (intent) => applyHistoryUi(controller, intent);
   return /* @__PURE__ */ jsxs4(Column3, { className: "xeno-history-panel", children: [
     /* @__PURE__ */ jsx5(
       Toolbar2,
       {
         left: /* @__PURE__ */ jsxs4(Fragment4, { children: [
-          /* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(UndoIcon, {}), label: "Undo", disabled: !view.canUndo, onClick: () => ui9({ kind: "undo" }) }),
-          /* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(RedoIcon, {}), label: "Redo", disabled: !view.canRedo, onClick: () => ui9({ kind: "redo" }) })
+          /* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(UndoIcon, {}), label: "Undo", disabled: !view.canUndo, onClick: () => ui10({ kind: "undo" }) }),
+          /* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(RedoIcon, {}), label: "Redo", disabled: !view.canRedo, onClick: () => ui10({ kind: "redo" }) })
         ] }),
         right: /* @__PURE__ */ jsxs4(Fragment4, { children: [
           /* @__PURE__ */ jsx5(Text4, { role: "number", children: view.counter }),
-          view.clearAllowed ? /* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(TrashIcon, {}), label: "Clear history", onClick: () => ui9({ kind: "requestClear" }) }) : null
+          view.clearAllowed ? /* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(TrashIcon, {}), label: "Clear history", onClick: () => ui10({ kind: "requestClear" }) }) : null
         ] }),
-        children: view.searchShown ? /* @__PURE__ */ jsx5(SearchField3, { value: view.filter, onChange: (v) => ui9({ kind: "filter", value: v }), placeholder: "Search history", label: "Search history" }) : null
+        children: view.searchShown ? /* @__PURE__ */ jsx5(SearchField3, { value: view.filter, onChange: (v) => ui10({ kind: "filter", value: v }), placeholder: "Search history", label: "Search history" }) : null
       }
     ),
-    view.confirmingClear ? /* @__PURE__ */ jsx5(InlineConfirm, { message: "Clear all history?", label: "Confirm clear history", confirmLabel: "Clear", onConfirm: () => ui9({ kind: "confirmClear" }), onCancel: () => ui9({ kind: "cancelClear" }) }) : null,
+    view.confirmingClear ? /* @__PURE__ */ jsx5(InlineConfirm, { message: "Clear all history?", label: "Confirm clear history", confirmLabel: "Clear", onConfirm: () => ui10({ kind: "confirmClear" }), onCancel: () => ui10({ kind: "cancelClear" }) }) : null,
     view.pruned ? /* @__PURE__ */ jsx5(Text4, { role: "caption", children: "Earlier history discarded (limit reached)" }) : null,
     /* @__PURE__ */ jsxs4(HistoryScroller, { controller, children: [
       /* @__PURE__ */ jsx5(RowList2, { role: "listbox", "aria-label": "History", children: /* @__PURE__ */ jsx5(VirtualWindow2, { totalHeight: view.totalHeight, offsetTop: view.offsetTop, children: view.rows.map((row2) => /* @__PURE__ */ jsx5(HistoryRowView, { row: row2, controller }, row2.key)) }) }),
@@ -4950,7 +4950,7 @@ function HistoryCancelButton({ entryId, controller }) {
   );
 }
 function HistoryRowView({ row: row2, controller }) {
-  const ui9 = (intent) => applyHistoryUi(controller, intent);
+  const ui10 = (intent) => applyHistoryUi(controller, intent);
   return /* @__PURE__ */ jsx5(
     Row2,
     {
@@ -4973,9 +4973,9 @@ function HistoryRowView({ row: row2, controller }) {
         row2.showTime ? /* @__PURE__ */ jsx5(Text4, { role: "meta", children: row2.time }) : null,
         row2.pending ? /* @__PURE__ */ jsx5(HistoryCancelButton, { entryId: row2.cancelId, controller }) : null
       ] }),
-      onClick: () => ui9({ kind: "jump", entryId: row2.entryId }),
-      onMouseEnter: () => ui9({ kind: "hover", entryId: row2.entryId }),
-      onContextMenuAt: (x, y) => ui9({ kind: "contextMenu", entryId: row2.entryId, x, y })
+      onClick: () => ui10({ kind: "jump", entryId: row2.entryId }),
+      onMouseEnter: () => ui10({ kind: "hover", entryId: row2.entryId }),
+      onContextMenuAt: (x, y) => ui10({ kind: "contextMenu", entryId: row2.entryId, x, y })
     }
   );
 }
@@ -6261,27 +6261,27 @@ function ColorPanelView({ controller }) {
   const getSnapshot = useCallback5(() => controller.getRevision(), [controller]);
   useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
   const view = colorViewState(controller);
-  const ui9 = (intent) => applyColorUi(controller, intent);
+  const ui10 = (intent) => applyColorUi(controller, intent);
   return /* @__PURE__ */ jsx6(Column4, { className: "xeno-color-panel", children: /* @__PURE__ */ jsxs5(Stack3, { gap: 8, children: [
     view.fgBg ? /* @__PURE__ */ jsxs5(Stack3, { direction: "row", pad: "none", children: [
-      /* @__PURE__ */ jsx6(ColorChip, { color: view.hex, label: "Foreground", pressed: view.fgActive, onClick: () => ui9({ kind: "setChannel", channel: "fg" }) }),
-      /* @__PURE__ */ jsx6(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx6(SwapIcon, {}), label: "Swap FG/BG (X)", onClick: () => ui9({ kind: "swapChannels" }) }),
-      /* @__PURE__ */ jsx6(ColorChip, { color: null, label: "Background", pressed: view.bgActive, onClick: () => ui9({ kind: "setChannel", channel: "bg" }) })
+      /* @__PURE__ */ jsx6(ColorChip, { color: view.hex, label: "Foreground", pressed: view.fgActive, onClick: () => ui10({ kind: "setChannel", channel: "fg" }) }),
+      /* @__PURE__ */ jsx6(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx6(SwapIcon, {}), label: "Swap FG/BG (X)", onClick: () => ui10({ kind: "swapChannels" }) }),
+      /* @__PURE__ */ jsx6(ColorChip, { color: null, label: "Background", pressed: view.bgActive, onClick: () => ui10({ kind: "setChannel", channel: "bg" }) })
     ] }) : null,
     /* @__PURE__ */ jsx6(ColorPicker, { controller }),
     /* @__PURE__ */ jsxs5(Stack3, { direction: "row", pad: "none", gap: 4, children: [
-      /* @__PURE__ */ jsx6(Select3, { size: "sm", label: "Color model", value: view.space, options: view.spaceOptions, onChange: (v) => ui9({ kind: "setSpace", space: v }) }),
-      view.isHex ? /* @__PURE__ */ jsx6(Input3, { variant: "mono", label: "Hex", value: view.hex, onChange: (v) => ui9({ kind: "setHex", value: v }), disabled: view.bound }) : null,
-      view.components.map((comp) => /* @__PURE__ */ jsx6(NumberInput, { caption: comp.label, value: comp.value, onChange: (n) => ui9({ kind: "setComponent", index: comp.index, value: n }), disabled: view.bound }, comp.key)),
-      view.alphaShown ? /* @__PURE__ */ jsx6(NumberInput, { caption: "A", label: "Alpha", min: 0, max: 100, value: view.alphaPercent, onChange: (n) => ui9({ kind: "setAlpha", percent: n }), disabled: view.bound }) : null,
-      /* @__PURE__ */ jsx6(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx6(EyedropperIcon, {}), label: "Pick from screen", onClick: () => ui9({ kind: "eyedropper" }) })
+      /* @__PURE__ */ jsx6(Select3, { size: "sm", label: "Color model", value: view.space, options: view.spaceOptions, onChange: (v) => ui10({ kind: "setSpace", space: v }) }),
+      view.isHex ? /* @__PURE__ */ jsx6(Input3, { variant: "mono", label: "Hex", value: view.hex, onChange: (v) => ui10({ kind: "setHex", value: v }), disabled: view.bound }) : null,
+      view.components.map((comp) => /* @__PURE__ */ jsx6(NumberInput, { caption: comp.label, value: comp.value, onChange: (n) => ui10({ kind: "setComponent", index: comp.index, value: n }), disabled: view.bound }, comp.key)),
+      view.alphaShown ? /* @__PURE__ */ jsx6(NumberInput, { caption: "A", label: "Alpha", min: 0, max: 100, value: view.alphaPercent, onChange: (n) => ui10({ kind: "setAlpha", percent: n }), disabled: view.bound }) : null,
+      /* @__PURE__ */ jsx6(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx6(EyedropperIcon, {}), label: "Pick from screen", onClick: () => ui10({ kind: "eyedropper" }) })
     ] }),
     view.hasTokens ? /* @__PURE__ */ jsx6(Field2, { label: "Token", htmlFor: "xeno-color-token", children: /* @__PURE__ */ jsxs5(Stack3, { direction: "row", pad: "none", gap: 4, children: [
-      /* @__PURE__ */ jsx6(Select3, { size: "sm", label: "Bind token", value: view.boundTokenId, placeholder: "\u2014 raw \u2014", options: view.tokenOptions, onChange: (id) => ui9({ kind: "bindToken", tokenId: id }) }),
-      view.bound ? /* @__PURE__ */ jsx6(TextButton2, { onClick: () => ui9({ kind: "unbindToken" }), children: "Unbind" }) : null
+      /* @__PURE__ */ jsx6(Select3, { size: "sm", label: "Bind token", value: view.boundTokenId, placeholder: "\u2014 raw \u2014", options: view.tokenOptions, onChange: (id) => ui10({ kind: "bindToken", tokenId: id }) }),
+      view.bound ? /* @__PURE__ */ jsx6(TextButton2, { onClick: () => ui10({ kind: "unbindToken" }), children: "Unbind" }) : null
     ] }) }) : null,
-    /* @__PURE__ */ jsx6(Section2, { title: "Swatches", flush: true, actions: /* @__PURE__ */ jsx6(TextButton2, { onClick: () => ui9({ kind: "addSwatch" }), children: "+ Save" }), children: /* @__PURE__ */ jsx6(SwatchGrid, { label: "Swatches", children: view.swatches.map((sw) => /* @__PURE__ */ jsx6(ColorChip, { size: "grid", color: sw.hex, label: sw.hex, onClick: () => ui9({ kind: "selectColor", hex: sw.hex }), onContextMenu: () => ui9({ kind: "removeSwatch", hex: sw.hex }) }, sw.key)) }) }),
-    view.hasRecent ? /* @__PURE__ */ jsx6(Section2, { title: "Recent", flush: true, children: /* @__PURE__ */ jsx6(SwatchGrid, { label: "Recent", children: view.recent.map((r) => /* @__PURE__ */ jsx6(ColorChip, { size: "grid", color: r.hex, label: r.hex, onClick: () => ui9({ kind: "selectColor", hex: r.hex }) }, r.key)) }) }) : null
+    /* @__PURE__ */ jsx6(Section2, { title: "Swatches", flush: true, actions: /* @__PURE__ */ jsx6(TextButton2, { onClick: () => ui10({ kind: "addSwatch" }), children: "+ Save" }), children: /* @__PURE__ */ jsx6(SwatchGrid, { label: "Swatches", children: view.swatches.map((sw) => /* @__PURE__ */ jsx6(ColorChip, { size: "grid", color: sw.hex, label: sw.hex, onClick: () => ui10({ kind: "selectColor", hex: sw.hex }), onContextMenu: () => ui10({ kind: "removeSwatch", hex: sw.hex }) }, sw.key)) }) }),
+    view.hasRecent ? /* @__PURE__ */ jsx6(Section2, { title: "Recent", flush: true, children: /* @__PURE__ */ jsx6(SwatchGrid, { label: "Recent", children: view.recent.map((r) => /* @__PURE__ */ jsx6(ColorChip, { size: "grid", color: r.hex, label: r.hex, onClick: () => ui10({ kind: "selectColor", hex: r.hex }) }, r.key)) }) }) : null
   ] }) });
 }
 function ColorPicker({ controller }) {
@@ -7799,19 +7799,19 @@ var DASHES = ["none", "4 2", "1 2", "6 2 1 2"];
 function CurvePanelView({ controller, ...options }) {
   useSyncExternalStore5(controller.subscribe, controller.getState, controller.getState);
   const view = curveViewState(controller, options);
-  const ui9 = (intent) => applyCurveUi(controller, intent);
+  const ui10 = (intent) => applyCurveUi(controller, intent);
   return /* @__PURE__ */ jsxs6(Column5, { children: [
     /* @__PURE__ */ jsx7(
       Toolbar3,
       {
-        left: /* @__PURE__ */ jsx7(ToolbarGroup, { children: view.interpolations.map((m) => /* @__PURE__ */ jsx7(TextButton3, { onClick: () => ui9({ kind: "interpolation", mode: m.mode }), children: m.label }, m.key)) }),
+        left: /* @__PURE__ */ jsx7(ToolbarGroup, { children: view.interpolations.map((m) => /* @__PURE__ */ jsx7(TextButton3, { onClick: () => ui10({ kind: "interpolation", mode: m.mode }), children: m.label }, m.key)) }),
         right: /* @__PURE__ */ jsxs6(ToolbarGroup, { end: true, children: [
-          view.tangentModes.map((m) => /* @__PURE__ */ jsx7(TextButton3, { onClick: () => ui9({ kind: "tangentMode", mode: m.mode }), children: m.label }, m.key)),
-          /* @__PURE__ */ jsx7(TextButton3, { onClick: () => ui9({ kind: "fit" }), children: "Fit" })
+          view.tangentModes.map((m) => /* @__PURE__ */ jsx7(TextButton3, { onClick: () => ui10({ kind: "tangentMode", mode: m.mode }), children: m.label }, m.key)),
+          /* @__PURE__ */ jsx7(TextButton3, { onClick: () => ui10({ kind: "fit" }), children: "Fit" })
         ] })
       }
     ),
-    view.presetsShown ? /* @__PURE__ */ jsx7(Toolbar3, { left: /* @__PURE__ */ jsx7(ToolbarGroup, { children: view.presets.map((p) => /* @__PURE__ */ jsx7(TextButton3, { onClick: () => ui9({ kind: "preset", id: p.id }), children: p.label }, p.key)) }) }) : null,
+    view.presetsShown ? /* @__PURE__ */ jsx7(Toolbar3, { left: /* @__PURE__ */ jsx7(ToolbarGroup, { children: view.presets.map((p) => /* @__PURE__ */ jsx7(TextButton3, { onClick: () => ui10({ kind: "preset", id: p.id }), children: p.label }, p.key)) }) }) : null,
     view.empty ? /* @__PURE__ */ jsx7(EmptyState4, { title: "No curves", hint: "Wire an animated property into this panel's input." }) : null,
     view.drawn ? /* @__PURE__ */ jsx7(CurveSurface, { controller }) : null,
     /* @__PURE__ */ jsx7(StatusBar3, { left: /* @__PURE__ */ jsx7(Text5, { role: "number", children: view.channelsLabel }), right: /* @__PURE__ */ jsx7(Text5, { role: "number", children: view.playheadLabel }) })
@@ -7825,7 +7825,7 @@ function CurveSurface({ controller }) {
     if (!el) return;
     const measure = () => {
       const rect = el.getBoundingClientRect();
-      controller.resize(rect.width, rect.height);
+      if (rect.width > 0 && rect.height > 0) controller.resize(rect.width, rect.height);
     };
     measure();
     if (typeof ResizeObserver === "undefined") return;
@@ -9016,11 +9016,11 @@ var FindController = class {
    * @param text - The new query text.
    * @param immediate - Skip the debounce (a paste, or pressing Enter).
    */
-  setText(text9, immediate = false) {
-    if (text9 === this.text) return;
-    this.text = text9;
+  setText(text10, immediate = false) {
+    if (text10 === this.text) return;
+    this.text = text10;
     this.index = -1;
-    if (text9 === "") {
+    if (text10 === "") {
       this.clearResults("idle");
       this.emitQuery(true);
       return;
@@ -9048,8 +9048,8 @@ var FindController = class {
     this.notify();
   }
   /** The replacement text. Never emitted on its own — a replacement is not a search. */
-  setReplaceText(text9) {
-    this.replaceText = text9;
+  setReplaceText(text10) {
+    this.replaceText = text10;
     this.notify();
   }
   /** Show or hide the replace row. */
@@ -9698,7 +9698,7 @@ function findRuntimeComponents(controller) {
 function FindPanelView({ controller, showResults, placeholder }) {
   useSyncExternalStore7(controller.subscribe, controller.getState, controller.getState);
   const view = findViewState(controller, { showResults, placeholder });
-  const ui9 = (intent) => applyFindUi(controller, intent);
+  const ui10 = (intent) => applyFindUi(controller, intent);
   const renderRow = (row2) => /* @__PURE__ */ jsx9(
     Row3,
     {
@@ -9706,8 +9706,8 @@ function FindPanelView({ controller, showResults, placeholder }) {
       selected: row2.current,
       meta: row2.location,
       label: /* @__PURE__ */ jsx9(Highlight, { segments: row2.segments }),
-      onClick: () => ui9({ kind: "select", matchId: row2.id }),
-      onContextMenuAt: (x, y) => ui9({ kind: "contextMenu", matchId: row2.id, x, y })
+      onClick: () => ui10({ kind: "select", matchId: row2.id }),
+      onContextMenuAt: (x, y) => ui10({ kind: "contextMenu", matchId: row2.id, x, y })
     },
     row2.id
   );
@@ -9715,11 +9715,11 @@ function FindPanelView({ controller, showResults, placeholder }) {
     /* @__PURE__ */ jsx9(
       Toolbar4,
       {
-        left: /* @__PURE__ */ jsx9(SearchField4, { value: view.text, placeholder: view.placeholder, onChange: (value) => ui9({ kind: "text", value }) }),
+        left: /* @__PURE__ */ jsx9(SearchField4, { value: view.text, placeholder: view.placeholder, onChange: (value) => ui10({ kind: "text", value }) }),
         right: /* @__PURE__ */ jsxs8(ToolbarGroup2, { end: true, children: [
-          /* @__PURE__ */ jsx9(IconButton6, { label: "Match case", active: view.caseSensitive, icon: /* @__PURE__ */ jsx9(CaseIcon, { size: 12 }), onClick: () => ui9({ kind: "option", option: "caseSensitive" }) }),
-          /* @__PURE__ */ jsx9(IconButton6, { label: "Whole word", active: view.wholeWord, icon: /* @__PURE__ */ jsx9(WordIcon, { size: 12 }), onClick: () => ui9({ kind: "option", option: "wholeWord" }) }),
-          /* @__PURE__ */ jsx9(IconButton6, { label: "Regular expression", active: view.regex, icon: /* @__PURE__ */ jsx9(RegexIcon, { size: 12 }), onClick: () => ui9({ kind: "option", option: "regex" }) })
+          /* @__PURE__ */ jsx9(IconButton6, { label: "Match case", active: view.caseSensitive, icon: /* @__PURE__ */ jsx9(CaseIcon, { size: 12 }), onClick: () => ui10({ kind: "option", option: "caseSensitive" }) }),
+          /* @__PURE__ */ jsx9(IconButton6, { label: "Whole word", active: view.wholeWord, icon: /* @__PURE__ */ jsx9(WordIcon, { size: 12 }), onClick: () => ui10({ kind: "option", option: "wholeWord" }) }),
+          /* @__PURE__ */ jsx9(IconButton6, { label: "Regular expression", active: view.regex, icon: /* @__PURE__ */ jsx9(RegexIcon, { size: 12 }), onClick: () => ui10({ kind: "option", option: "regex" }) })
         ] })
       }
     ),
@@ -9734,9 +9734,9 @@ function FindPanelView({ controller, showResults, placeholder }) {
           view.countShown ? /* @__PURE__ */ jsx9(Text6, { role: "number", children: view.counter }) : null
         ] }),
         right: /* @__PURE__ */ jsxs8(ToolbarGroup2, { end: true, children: [
-          /* @__PURE__ */ jsx9(IconButton6, { label: "Previous match", disabled: !view.hasMatches, icon: /* @__PURE__ */ jsx9(Chevron, { direction: "up", size: 12 }), onClick: () => ui9({ kind: "previous" }) }),
-          /* @__PURE__ */ jsx9(IconButton6, { label: "Next match", disabled: !view.hasMatches, icon: /* @__PURE__ */ jsx9(Chevron, { direction: "down", size: 12 }), onClick: () => ui9({ kind: "next" }) }),
-          /* @__PURE__ */ jsx9(TextButton4, { onClick: () => ui9({ kind: "toggleReplace" }), children: view.replaceLabel })
+          /* @__PURE__ */ jsx9(IconButton6, { label: "Previous match", disabled: !view.hasMatches, icon: /* @__PURE__ */ jsx9(Chevron, { direction: "up", size: 12 }), onClick: () => ui10({ kind: "previous" }) }),
+          /* @__PURE__ */ jsx9(IconButton6, { label: "Next match", disabled: !view.hasMatches, icon: /* @__PURE__ */ jsx9(Chevron, { direction: "down", size: 12 }), onClick: () => ui10({ kind: "next" }) }),
+          /* @__PURE__ */ jsx9(TextButton4, { onClick: () => ui10({ kind: "toggleReplace" }), children: view.replaceLabel })
         ] })
       }
     ),
@@ -9744,10 +9744,10 @@ function FindPanelView({ controller, showResults, placeholder }) {
     view.replaceVisible ? /* @__PURE__ */ jsx9(
       Toolbar4,
       {
-        left: /* @__PURE__ */ jsx9(SearchField4, { value: view.replaceText, placeholder: "Replace with", onChange: (value) => ui9({ kind: "replaceText", value }) }),
+        left: /* @__PURE__ */ jsx9(SearchField4, { value: view.replaceText, placeholder: "Replace with", onChange: (value) => ui10({ kind: "replaceText", value }) }),
         right: /* @__PURE__ */ jsxs8(ToolbarGroup2, { end: true, children: [
-          /* @__PURE__ */ jsx9(TextButton4, { disabled: !view.canReplace, onClick: () => ui9({ kind: "replaceCurrent" }), children: "Replace" }),
-          /* @__PURE__ */ jsx9(TextButton4, { disabled: !view.canReplace, onClick: () => ui9({ kind: "replaceAll" }), children: view.allLabel })
+          /* @__PURE__ */ jsx9(TextButton4, { disabled: !view.canReplace, onClick: () => ui10({ kind: "replaceCurrent" }), children: "Replace" }),
+          /* @__PURE__ */ jsx9(TextButton4, { disabled: !view.canReplace, onClick: () => ui10({ kind: "replaceAll" }), children: view.allLabel })
         ] })
       }
     ) : null,
@@ -10646,37 +10646,37 @@ import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function CommentsPanelView({ controller, ...options }) {
   useSyncExternalStore8(controller.subscribe, controller.getState, controller.getState);
   const view = commentsViewState(controller, options);
-  const ui9 = (intent) => applyCommentsUi(controller, intent);
-  const card = (t) => /* @__PURE__ */ jsxs9(ThreadCard, { active: t.active, resolved: t.resolved, onContextMenuAt: (x, y) => ui9({ kind: "contextMenu", id: t.id, x, y }), children: [
+  const ui10 = (intent) => applyCommentsUi(controller, intent);
+  const card = (t) => /* @__PURE__ */ jsxs9(ThreadCard, { active: t.active, resolved: t.resolved, onContextMenuAt: (x, y) => ui10({ kind: "contextMenu", id: t.id, x, y }), children: [
     /* @__PURE__ */ jsxs9(Stack4, { direction: "row", gap: 4, pad: "none", children: [
       t.hasAnchorBadge ? /* @__PURE__ */ jsx10(Badge6, { tone: t.anchorTone, title: t.anchorTitle, children: t.anchorLabel }) : null,
       t.resolved ? /* @__PURE__ */ jsx10(Badge6, { children: "resolved" }) : null,
       /* @__PURE__ */ jsx10(Text7, { role: "caption", children: t.age })
     ] }),
-    t.hasQuote ? /* @__PURE__ */ jsx10(Quote, { orphaned: t.orphaned, onActivate: () => ui9({ kind: "activate", id: t.id }), children: t.quote }) : null,
+    t.hasQuote ? /* @__PURE__ */ jsx10(Quote, { orphaned: t.orphaned, onActivate: () => ui10({ kind: "activate", id: t.id }), children: t.quote }) : null,
     t.messages.map((m) => /* @__PURE__ */ jsx10(Message, { author: m.author, age: m.age, edited: m.edited, children: m.body }, m.id)),
-    t.hasReactions ? /* @__PURE__ */ jsx10(Stack4, { direction: "row", gap: 4, pad: "none", children: t.reactions.map((r) => /* @__PURE__ */ jsx10(TextButton5, { onClick: () => ui9({ kind: "react", id: r.threadId, emoji: r.emoji, on: r.reactTo }), children: r.label }, r.emoji)) }) : null,
+    t.hasReactions ? /* @__PURE__ */ jsx10(Stack4, { direction: "row", gap: 4, pad: "none", children: t.reactions.map((r) => /* @__PURE__ */ jsx10(TextButton5, { onClick: () => ui10({ kind: "react", id: r.threadId, emoji: r.emoji, on: r.reactTo }), children: r.label }, r.emoji)) }) : null,
     t.replying ? /* @__PURE__ */ jsxs9(Stack4, { direction: "row", gap: 4, pad: "none", children: [
-      /* @__PURE__ */ jsx10(Input4, { value: t.replyDraft, placeholder: "Reply", autoFocus: true, label: "Reply", onChange: (value) => ui9({ kind: "replyDraft", value }), onKeyDown: (e) => ui9({ kind: "replyKey", id: t.id, key: e.key, shift: e.shiftKey }) }),
-      /* @__PURE__ */ jsx10(TextButton5, { onClick: () => ui9({ kind: "reply", id: t.id }), children: "Send" })
+      /* @__PURE__ */ jsx10(Input4, { value: t.replyDraft, placeholder: "Reply", autoFocus: true, label: "Reply", onChange: (value) => ui10({ kind: "replyDraft", value }), onKeyDown: (e) => ui10({ kind: "replyKey", id: t.id, key: e.key, shift: e.shiftKey }) }),
+      /* @__PURE__ */ jsx10(TextButton5, { onClick: () => ui10({ kind: "reply", id: t.id }), children: "Send" })
     ] }) : null,
     t.idle ? /* @__PURE__ */ jsxs9(Stack4, { direction: "row", gap: 6, pad: "none", children: [
-      /* @__PURE__ */ jsx10(TextButton5, { onClick: () => ui9({ kind: "startReply", id: t.id }), children: "Reply" }),
-      /* @__PURE__ */ jsx10(TextButton5, { onClick: () => ui9({ kind: "resolve", id: t.id, resolved: t.resolveTo }), children: t.resolveLabel }),
-      /* @__PURE__ */ jsx10(TextButton5, { onClick: () => ui9({ kind: "remove", id: t.id }), children: "Delete" })
+      /* @__PURE__ */ jsx10(TextButton5, { onClick: () => ui10({ kind: "startReply", id: t.id }), children: "Reply" }),
+      /* @__PURE__ */ jsx10(TextButton5, { onClick: () => ui10({ kind: "resolve", id: t.id, resolved: t.resolveTo }), children: t.resolveLabel }),
+      /* @__PURE__ */ jsx10(TextButton5, { onClick: () => ui10({ kind: "remove", id: t.id }), children: "Delete" })
     ] }) : null
   ] }, t.id);
   return /* @__PURE__ */ jsxs9(Column7, { children: [
     /* @__PURE__ */ jsx10(
       Toolbar5,
       {
-        left: /* @__PURE__ */ jsx10(SegmentedControl2, { label: "Show", options: view.shows, value: view.show, onChange: (show) => ui9({ kind: "show", show }) }),
-        right: /* @__PURE__ */ jsx10(ToolbarGroup3, { end: true, children: /* @__PURE__ */ jsx10(SegmentedControl2, { label: "Sort", options: view.sorts, value: view.sort, onChange: (sort) => ui9({ kind: "sort", sort }) }) })
+        left: /* @__PURE__ */ jsx10(SegmentedControl2, { label: "Show", options: view.shows, value: view.show, onChange: (show) => ui10({ kind: "show", show }) }),
+        right: /* @__PURE__ */ jsx10(ToolbarGroup3, { end: true, children: /* @__PURE__ */ jsx10(SegmentedControl2, { label: "Sort", options: view.sorts, value: view.sort, onChange: (sort) => ui10({ kind: "sort", sort }) }) })
       }
     ),
     view.orphanedNotice ? /* @__PURE__ */ jsxs9(Note, { children: [
       view.orphanedNotice,
-      view.orphanedHidden ? /* @__PURE__ */ jsx10(TextButton5, { onClick: () => ui9({ kind: "showOrphaned" }), children: "Show" }) : null
+      view.orphanedHidden ? /* @__PURE__ */ jsx10(TextButton5, { onClick: () => ui10({ kind: "showOrphaned" }), children: "Show" }) : null
     ] }) : null,
     /* @__PURE__ */ jsxs9(ScrollArea5, { children: [
       view.filteredEmpty ? /* @__PURE__ */ jsx10(EmptyState6, { title: "Nothing matches this filter", hint: view.filteredHint }) : null,
@@ -10685,8 +10685,8 @@ function CommentsPanelView({ controller, ...options }) {
       view.hasResolved ? /* @__PURE__ */ jsx10(Section4, { title: view.resolvedTitle, flush: true, children: view.resolved.map(card) }) : null
     ] }),
     /* @__PURE__ */ jsxs9(Stack4, { gap: 2, pad: "gutter", className: "xeno-comments-composer", children: [
-      /* @__PURE__ */ jsx10(TextArea2, { value: view.draft, placeholder: view.placeholder, disabled: view.composerDisabled, rows: 2, label: "New comment", onChange: (value) => ui9({ kind: "draft", value }), onKeyDown: (e) => ui9({ kind: "draftKey", key: e.key, ctrl: e.ctrlKey, meta: e.metaKey }) }),
-      /* @__PURE__ */ jsx10(Toolbar5, { divided: false, right: /* @__PURE__ */ jsx10(ToolbarGroup3, { end: true, children: /* @__PURE__ */ jsx10(TextButton5, { strong: true, disabled: view.commentDisabled, onClick: () => ui9({ kind: "create" }), children: "Comment" }) }) })
+      /* @__PURE__ */ jsx10(TextArea2, { value: view.draft, placeholder: view.placeholder, disabled: view.composerDisabled, rows: 2, label: "New comment", onChange: (value) => ui10({ kind: "draft", value }), onKeyDown: (e) => ui10({ kind: "draftKey", key: e.key, ctrl: e.ctrlKey, meta: e.metaKey }) }),
+      /* @__PURE__ */ jsx10(Toolbar5, { divided: false, right: /* @__PURE__ */ jsx10(ToolbarGroup3, { end: true, children: /* @__PURE__ */ jsx10(TextButton5, { strong: true, disabled: view.commentDisabled, onClick: () => ui10({ kind: "create" }), children: "Comment" }) }) })
     ] }),
     /* @__PURE__ */ jsx10(StatusBar6, { left: view.countLabel, right: view.staleLabel })
   ] });
@@ -11855,11 +11855,104 @@ var nodegraphManifest = {
 
 // src/edit/nodegraph/react/NodeGraphPanelView.tsx
 import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef8, useSyncExternalStore as useSyncExternalStore9 } from "react";
-import { EmptyState as EmptyState7, StatusBar as StatusBar7, Toolbar as Toolbar6, ToolbarGroup as ToolbarGroup4 } from "@xenosystem/components/chrome";
+import { Column as Column8, EmptyState as EmptyState7, StatusBar as StatusBar7, Text as Text8, TextButton as TextButton6, Toolbar as Toolbar6, ToolbarGroup as ToolbarGroup4 } from "@xenosystem/components/chrome";
+
+// src/edit/nodegraph/declaration.ts
+function nodegraphViewState(c, _options = {}) {
+  const state = c.getState();
+  const total = state.graph?.nodes.length ?? 0;
+  return {
+    empty: total === 0,
+    drawn: total > 0,
+    nodesLabel: `${total} node${total === 1 ? "" : "s"}`,
+    zoomLabel: `${Math.round(state.scale.zoom * 100)}%`
+  };
+}
+function applyNodeGraphUi(c, intent) {
+  switch (intent.kind) {
+    case "fit":
+      c.fit(false);
+      break;
+    case "fitSelection":
+      c.fit(true);
+      break;
+  }
+}
+var nodegraphViewManifest = {
+  id: nodegraphManifest.id,
+  version: "1.0.0",
+  title: "Node Graph",
+  category: "edit",
+  layout: { slot: "center" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The NodeGraphViewModel the runtime derives from the controller on every draw." }],
+  outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind } \u2014 applied by the runtime to the controller." }],
+  commands: []
+};
+var EMPTY8 = { empty: true, drawn: false, nodesLabel: "0 nodes", zoomLabel: "100%" };
+var BEHAVIOURS8 = {
+  "edit/nodegraphPanelView": (inputs) => inputs.view ?? EMPTY8
+};
+var text8 = (b) => ({ component: "text", props: { text: b } });
+var ui8 = (kind) => ({ emit: "ui", value: { object: { kind: { value: kind } } } });
+var NODEGRAPH_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: nodegraphViewManifest,
+  behaviour: "edit/nodegraphPanelView",
+  composition: {
+    component: "chrome/Column",
+    children: [
+      {
+        component: "chrome/Toolbar",
+        props: {
+          right: {
+            node: {
+              component: "chrome/ToolbarGroup",
+              props: { end: { value: true } },
+              children: [
+                { component: "chrome/TextButton", children: [text8({ value: "Fit" })], on: { onClick: ui8("fit") } },
+                { component: "chrome/TextButton", children: [text8({ value: "Fit selection" })], on: { onClick: ui8("fitSelection") } }
+              ]
+            }
+          }
+        }
+      },
+      { component: "chrome/EmptyState", when: { input: "view.empty" }, props: { title: { value: "Empty graph" }, hint: { value: "Wire a host graph into this panel's input." } } },
+      { component: "nodegraph/Surface", when: { input: "view.drawn" } },
+      {
+        component: "chrome/StatusBar",
+        props: {
+          left: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text8({ input: "view.nodesLabel" })] } },
+          right: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text8({ input: "view.zoomLabel" })] } }
+        }
+      }
+    ]
+  }
+};
+
+// src/edit/nodegraph/react/NodeGraphPanelView.tsx
 import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var HEADER_H2 = 24;
 var PORT_ROW_H2 = 18;
-function NodeGraphPanelView({ controller }) {
+function NodeGraphPanelView({ controller, ...options }) {
+  useSyncExternalStore9(controller.subscribe, controller.getState, controller.getState);
+  const view = nodegraphViewState(controller, options);
+  const ui10 = (intent) => applyNodeGraphUi(controller, intent);
+  return /* @__PURE__ */ jsxs10(Column8, { children: [
+    /* @__PURE__ */ jsx11(
+      Toolbar6,
+      {
+        right: /* @__PURE__ */ jsxs10(ToolbarGroup4, { end: true, children: [
+          /* @__PURE__ */ jsx11(TextButton6, { onClick: () => ui10({ kind: "fit" }), children: "Fit" }),
+          /* @__PURE__ */ jsx11(TextButton6, { onClick: () => ui10({ kind: "fitSelection" }), children: "Fit selection" })
+        ] })
+      }
+    ),
+    view.empty ? /* @__PURE__ */ jsx11(EmptyState7, { title: "Empty graph", hint: "Wire a host graph into this panel's input." }) : null,
+    view.drawn ? /* @__PURE__ */ jsx11(NodeGraphSurface, { controller }) : null,
+    /* @__PURE__ */ jsx11(StatusBar7, { left: /* @__PURE__ */ jsx11(Text8, { role: "number", children: view.nodesLabel }), right: /* @__PURE__ */ jsx11(Text8, { role: "number", children: view.zoomLabel }) })
+  ] });
+}
+function NodeGraphSurface({ controller }) {
   const state = useSyncExternalStore9(controller.subscribe, controller.getState, controller.getState);
   const containerRef = useRef8(null);
   useEffect7(() => {
@@ -11867,7 +11960,7 @@ function NodeGraphPanelView({ controller }) {
     if (!el) return;
     const measure = () => {
       const rect = el.getBoundingClientRect();
-      controller.resize(rect.width, rect.height);
+      if (rect.width > 0 && rect.height > 0) controller.resize(rect.width, rect.height);
     };
     measure();
     if (typeof ResizeObserver === "undefined") return;
@@ -11934,91 +12027,69 @@ function NodeGraphPanelView({ controller }) {
   const preview = state.preview;
   const selectedNodes = new Set(state.selection.nodeIds);
   const selectedEdges = new Set(state.selection.edgeIds);
-  const total = state.graph?.nodes.length ?? 0;
-  return /* @__PURE__ */ jsxs10("div", { style: SHELL, children: [
-    /* @__PURE__ */ jsx11(
-      Toolbar6,
-      {
-        right: /* @__PURE__ */ jsxs10(ToolbarGroup4, { end: true, children: [
-          /* @__PURE__ */ jsx11("button", { type: "button", style: button(), onClick: () => controller.fit(false), children: "Fit" }),
-          /* @__PURE__ */ jsx11("button", { type: "button", style: button(), onClick: () => controller.fit(true), children: "Fit selection" })
-        ] })
-      }
-    ),
-    total === 0 ? /* @__PURE__ */ jsx11(EmptyState7, { title: "Empty graph", hint: "Wire a host graph into this panel's input." }) : /* @__PURE__ */ jsxs10(
-      "div",
-      {
-        ref: containerRef,
-        tabIndex: 0,
-        role: "application",
-        "aria-label": "Node graph",
-        style: SURFACE2,
-        onWheel,
-        onPointerDown,
-        onPointerMove,
-        onPointerUp,
-        onPointerCancel: onPointerUp,
-        onKeyDown,
-        children: [
-          /* @__PURE__ */ jsx11(
-            "svg",
-            {
-              "data-canvas": "nodegraph-surface",
-              width: "100%",
-              height: "100%",
-              style: { position: "absolute", inset: 0, display: "block" },
-              children: /* @__PURE__ */ jsxs10("g", { transform: `translate(${-scale.x * scale.zoom} ${-scale.y * scale.zoom}) scale(${scale.zoom})`, children: [
-                state.edges.map(({ edge, from, to }) => /* @__PURE__ */ jsx11(
-                  "path",
-                  {
-                    d: edgePath(from, to),
-                    fill: "none",
-                    stroke: selectedEdges.has(edge.id) ? "var(--xeno-text)" : "var(--xeno-active)",
-                    strokeWidth: selectedEdges.has(edge.id) ? 2 / scale.zoom : 1.5 / scale.zoom,
-                    opacity: edge.disabled ? 0.35 : 1
-                  },
-                  edge.id
-                )),
-                preview?.connection ? /* @__PURE__ */ jsx11(PendingWire, { controller, preview, zoom: scale.zoom }) : null,
-                state.nodes.map((node) => /* @__PURE__ */ jsx11(
-                  NodeRect,
-                  {
-                    node,
-                    selected: selectedNodes.has(node.id),
-                    zoom: scale.zoom
-                  },
-                  node.id
-                )),
-                preview?.marquee ? /* @__PURE__ */ jsx11(
-                  "rect",
-                  {
-                    x: preview.marquee.x,
-                    y: preview.marquee.y,
-                    width: preview.marquee.width,
-                    height: preview.marquee.height,
-                    fill: "var(--xeno-border-subtle)",
-                    stroke: "var(--xeno-active)",
-                    strokeWidth: 1 / scale.zoom
-                  }
-                ) : null
-              ] })
-            }
-          ),
-          preview?.connection && !preview.connection.verdict.ok && preview.connection.target ? /* @__PURE__ */ jsx11("div", { style: REASON, children: preview.connection.verdict.reason }) : null
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx11(
-      StatusBar7,
-      {
-        left: `${total} node${total === 1 ? "" : "s"}`,
-        right: /* @__PURE__ */ jsxs10("span", { className: "tabular-nums", children: [
-          Math.round(scale.zoom * 100),
-          "%"
-        ] })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      ref: containerRef,
+      tabIndex: 0,
+      role: "application",
+      "aria-label": "Node graph",
+      style: SURFACE2,
+      onWheel,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: onPointerUp,
+      onKeyDown,
+      children: [
+        /* @__PURE__ */ jsx11(
+          "svg",
+          {
+            "data-canvas": "nodegraph-surface",
+            width: "100%",
+            height: "100%",
+            style: { position: "absolute", inset: 0, display: "block" },
+            children: /* @__PURE__ */ jsxs10("g", { transform: `translate(${-scale.x * scale.zoom} ${-scale.y * scale.zoom}) scale(${scale.zoom})`, children: [
+              state.edges.map(({ edge, from, to }) => /* @__PURE__ */ jsx11(
+                "path",
+                {
+                  d: edgePath(from, to),
+                  fill: "none",
+                  stroke: selectedEdges.has(edge.id) ? "var(--xeno-text)" : "var(--xeno-active)",
+                  strokeWidth: selectedEdges.has(edge.id) ? 2 / scale.zoom : 1.5 / scale.zoom,
+                  opacity: edge.disabled ? 0.35 : 1
+                },
+                edge.id
+              )),
+              preview?.connection ? /* @__PURE__ */ jsx11(PendingWire, { controller, preview, zoom: scale.zoom }) : null,
+              state.nodes.map((node) => /* @__PURE__ */ jsx11(
+                NodeRect,
+                {
+                  node,
+                  selected: selectedNodes.has(node.id),
+                  zoom: scale.zoom
+                },
+                node.id
+              )),
+              preview?.marquee ? /* @__PURE__ */ jsx11(
+                "rect",
+                {
+                  x: preview.marquee.x,
+                  y: preview.marquee.y,
+                  width: preview.marquee.width,
+                  height: preview.marquee.height,
+                  fill: "var(--xeno-border-subtle)",
+                  stroke: "var(--xeno-active)",
+                  strokeWidth: 1 / scale.zoom
+                }
+              ) : null
+            ] })
+          }
+        ),
+        preview?.connection && !preview.connection.verdict.ok && preview.connection.target ? /* @__PURE__ */ jsx11("div", { style: REASON, children: preview.connection.verdict.reason }) : null
+      ]
+    }
+  );
 }
 function PendingWire({
   controller,
@@ -12139,7 +12210,6 @@ function Port({
     )
   ] });
 }
-var SHELL = { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 };
 var SURFACE2 = {
   position: "relative",
   flex: 1,
@@ -12161,17 +12231,9 @@ var REASON = {
   color: "var(--xeno-text)",
   pointerEvents: "none"
 };
-function button() {
-  return {
-    height: 18,
-    padding: "0 6px",
-    fontSize: 10,
-    borderRadius: 2,
-    border: "1px solid var(--xeno-control)",
-    background: "transparent",
-    color: "var(--xeno-muted)",
-    cursor: "pointer"
-  };
+var NODEGRAPH_RUNTIME_UNITS = ["nodegraph/Surface"];
+function nodegraphRuntimeComponents(controller) {
+  return { "nodegraph/Surface": () => /* @__PURE__ */ jsx11(NodeGraphSurface, { controller }) };
 }
 
 // src/edit/nodegraph/panel.ts
@@ -12828,12 +12890,12 @@ var TreeController = class {
     }
     if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
       const fresh = now - this.typeAhead.at > this.typeAheadMs;
-      const text9 = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
-      this.typeAhead = { text: text9, at: now };
+      const text10 = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
+      this.typeAhead = { text: text10, at: now };
       const from = fresh ? current : current + 1;
       for (let i = 0; i < rows.length; i += 1) {
         const candidate = rows[(from + i) % rows.length];
-        if (candidate.node.label.toLowerCase().startsWith(text9)) {
+        if (candidate.node.label.toLowerCase().startsWith(text10)) {
           this.focusedId = candidate.id;
           this.select([candidate.id]);
           return true;
@@ -12859,9 +12921,9 @@ var TreeController = class {
     return true;
   }
   /** Update the rename draft. */
-  updateRenameDraft(text9) {
+  updateRenameDraft(text10) {
     if (!this.renaming) return;
-    this.renaming = { ...this.renaming, draft: text9 };
+    this.renaming = { ...this.renaming, draft: text10 };
     this.notify();
   }
   /**
@@ -13401,7 +13463,7 @@ var treeManifest = {
 import { useCallback as useCallback8, useEffect as useEffect8, useRef as useRef9, useSyncExternalStore as useSyncExternalStore10 } from "react";
 import {
   Badge as Badge7,
-  Column as Column8,
+  Column as Column9,
   EmptyState as EmptyState8,
   ErrorState,
   IconButton as IconButton7,
@@ -13412,8 +13474,8 @@ import {
   ScrollArea as ScrollArea6,
   SearchField as SearchField5,
   StatusBar as StatusBar8,
-  Text as Text8,
-  TextButton as TextButton6,
+  Text as Text9,
+  TextButton as TextButton7,
   Toolbar as Toolbar7,
   ToolbarGroup as ToolbarGroup5,
   VirtualWindow as VirtualWindow3
@@ -13575,7 +13637,7 @@ var treeViewManifest = {
   outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, id?, value?, key?, actionId?, x?, y?, ctrlKey?, metaKey?, shiftKey?, altKey? } \u2014 applied by the runtime to the controller." }],
   commands: []
 };
-var EMPTY8 = {
+var EMPTY9 = {
   searchShown: true,
   filter: "",
   noSource: true,
@@ -13596,16 +13658,16 @@ var EMPTY8 = {
   rows: [],
   countLabel: "0 items"
 };
-var BEHAVIOURS8 = {
-  "edit/treePanelView": (inputs) => inputs.view ?? EMPTY8
+var BEHAVIOURS9 = {
+  "edit/treePanelView": (inputs) => inputs.view ?? EMPTY9
 };
-var text8 = (b) => ({ component: "text", props: { text: b } });
-var ui8 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var text9 = (b) => ({ component: "text", props: { text: b } });
+var ui9 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
 var nodeIcon = () => ({
   component: "fragment",
   children: [
     { component: "icons/TreeKind", when: { item: "iconName" }, props: { name: { item: "iconName" } } },
-    { component: "chrome/Text", when: { item: "iconText" }, props: { role: { value: "caption" } }, children: [text8({ item: "iconText" })] }
+    { component: "chrome/Text", when: { item: "iconText" }, props: { role: { value: "caption" } }, children: [text9({ item: "iconText" })] }
   ]
 });
 var TREE_DECLARATION = {
@@ -13618,15 +13680,15 @@ var TREE_DECLARATION = {
       {
         component: "chrome/Toolbar",
         props: {
-          left: { node: { component: "chrome/SearchField", when: { input: "view.searchShown" }, props: { value: { input: "view.filter" }, placeholder: { value: "Filter\u2026" } }, on: { onChange: ui8("filter", { value: { arg: "" } }) } } },
+          left: { node: { component: "chrome/SearchField", when: { input: "view.searchShown" }, props: { value: { input: "view.filter" }, placeholder: { value: "Filter\u2026" } }, on: { onChange: ui9("filter", { value: { arg: "" } }) } } },
           right: {
             node: {
               component: "chrome/ToolbarGroup",
               props: { end: { value: true } },
               children: [
-                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Expand" } }, label: { value: "Expand all" } }, on: { onClick: ui8("expandAll") } },
-                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Collapse" } }, label: { value: "Collapse all" } }, on: { onClick: ui8("collapseAll") } },
-                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Refresh" } }, label: { value: "Refresh" } }, on: { onClick: ui8("refresh") } }
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Expand" } }, label: { value: "Expand all" } }, on: { onClick: ui9("expandAll") } },
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Collapse" } }, label: { value: "Collapse all" } }, on: { onClick: ui9("collapseAll") } },
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Refresh" } }, label: { value: "Refresh" } }, on: { onClick: ui9("refresh") } }
               ]
             }
           }
@@ -13634,7 +13696,7 @@ var TREE_DECLARATION = {
       },
       { component: "chrome/EmptyState", when: { input: "view.noSource" }, props: { title: { value: "No source" }, hint: { input: "view.noSourceHint" } } },
       { component: "chrome/LoadingState", when: { input: "view.loading" }, props: { label: { input: "view.loadingLabel" } } },
-      { component: "chrome/ErrorState", when: { input: "view.failed" }, props: { title: { input: "view.failedTitle" }, message: { input: "view.failedMessage" }, retryLabel: { input: "view.retryLabel" } }, on: { onRetry: ui8("retry") } },
+      { component: "chrome/ErrorState", when: { input: "view.failed" }, props: { title: { input: "view.failedTitle" }, message: { input: "view.failedMessage" }, retryLabel: { input: "view.retryLabel" } }, on: { onRetry: ui9("retry") } },
       { component: "chrome/EmptyState", when: { input: "view.noMatches" }, props: { title: { value: "No matches" }, hint: { input: "view.noMatchesHint" } } },
       { component: "chrome/EmptyState", when: { input: "view.emptyTree" }, props: { title: { value: "Nothing here" }, hint: { input: "view.emptyHint" } } },
       {
@@ -13667,7 +13729,7 @@ var TREE_DECLARATION = {
                         node: {
                           component: "fragment",
                           children: [
-                            { component: "chrome/Input", when: { item: "renaming" }, props: { autoFocus: { value: true }, value: { item: "draft" }, label: { value: "Name" } }, on: { onChange: ui8("renameDraft", { value: { arg: "" } }), onBlur: ui8("commitRename"), onKeyDown: ui8("renameKey", { key: { arg: "key" } }) } },
+                            { component: "chrome/Input", when: { item: "renaming" }, props: { autoFocus: { value: true }, value: { item: "draft" }, label: { value: "Name" } }, on: { onChange: ui9("renameDraft", { value: { arg: "" } }), onBlur: ui9("commitRename"), onKeyDown: ui9("renameKey", { key: { arg: "key" } }) } },
                             { component: "text", when: { not: { item: "renaming" } }, props: { text: { item: "label" } } }
                           ]
                         }
@@ -13676,11 +13738,11 @@ var TREE_DECLARATION = {
                         node: {
                           component: "fragment",
                           children: [
-                            { component: "chrome/Text", when: { item: "chipLoading" }, props: { role: { value: "caption" } }, children: [text8({ value: "loading\u2026" })] },
-                            { component: "chrome/Badge", when: { item: "chipError" }, props: { tone: { value: "error" } }, children: [text8({ item: "chipErrorText" })] },
-                            { component: "chrome/TextButton", when: { item: "chipLoadMore" }, children: [text8({ value: "load more\u2026" })], on: { onClick: ui8("loadMore", { id: { item: "id" } }) } },
-                            { component: "chrome/Badge", when: { item: "chipTruncated" }, props: { tone: { value: "warning" } }, children: [text8({ item: "chipTruncatedText" })] },
-                            { component: "chrome/Text", when: { item: "chipEmpty" }, props: { role: { value: "caption" } }, children: [text8({ value: "empty" })] }
+                            { component: "chrome/Text", when: { item: "chipLoading" }, props: { role: { value: "caption" } }, children: [text9({ value: "loading\u2026" })] },
+                            { component: "chrome/Badge", when: { item: "chipError" }, props: { tone: { value: "error" } }, children: [text9({ item: "chipErrorText" })] },
+                            { component: "chrome/TextButton", when: { item: "chipLoadMore" }, children: [text9({ value: "load more\u2026" })], on: { onClick: ui9("loadMore", { id: { item: "id" } }) } },
+                            { component: "chrome/Badge", when: { item: "chipTruncated" }, props: { tone: { value: "warning" } }, children: [text9({ item: "chipTruncatedText" })] },
+                            { component: "chrome/Text", when: { item: "chipEmpty" }, props: { role: { value: "caption" } }, children: [text9({ value: "empty" })] }
                           ]
                         }
                       },
@@ -13688,19 +13750,19 @@ var TREE_DECLARATION = {
                         node: {
                           component: "fragment",
                           children: [
-                            { component: "chrome/Text", each: { item: "columns", key: "key" }, props: { role: { value: "number" } }, children: [text8({ item: "text" })] },
+                            { component: "chrome/Text", each: { item: "columns", key: "key" }, props: { role: { value: "number" } }, children: [text9({ item: "text" })] },
                             { component: "chrome/Text", each: { item: "glyphs", key: "key" }, props: { role: { value: "meta" }, title: { item: "title" } }, children: [nodeIcon()] },
-                            { component: "chrome/Badge", each: { item: "badges", key: "key" }, props: { tone: { item: "tone" } }, children: [text8({ item: "text" })] },
-                            { component: "chrome/IconButton", each: { item: "actions", key: "key" }, props: { size: { value: "sm" }, icon: { node: nodeIcon() }, label: { item: "label" }, disabled: { item: "disabled" } }, on: { onClick: ui8("action", { id: { item: "rowId" }, actionId: { item: "actionId" } }) } }
+                            { component: "chrome/Badge", each: { item: "badges", key: "key" }, props: { tone: { item: "tone" } }, children: [text9({ item: "text" })] },
+                            { component: "chrome/IconButton", each: { item: "actions", key: "key" }, props: { size: { value: "sm" }, icon: { node: nodeIcon() }, label: { item: "label" }, disabled: { item: "disabled" } }, on: { onClick: ui9("action", { id: { item: "rowId" }, actionId: { item: "actionId" } }) } }
                           ]
                         }
                       }
                     },
                     on: {
-                      onExpandedChange: ui8("toggleExpanded", { id: { item: "id" } }),
-                      onClick: ui8("click", { id: { item: "id" }, ctrlKey: { arg: "ctrlKey" }, metaKey: { arg: "metaKey" }, shiftKey: { arg: "shiftKey" }, altKey: { arg: "altKey" } }),
-                      onDoubleClick: ui8("doubleClick", { id: { item: "id" } }),
-                      onContextMenuAt: ui8("contextMenu", { id: { item: "id" }, x: { arg: "" }, y: { arg: "", index: 1 } })
+                      onExpandedChange: ui9("toggleExpanded", { id: { item: "id" } }),
+                      onClick: ui9("click", { id: { item: "id" }, ctrlKey: { arg: "ctrlKey" }, metaKey: { arg: "metaKey" }, shiftKey: { arg: "shiftKey" }, altKey: { arg: "altKey" } }),
+                      onDoubleClick: ui9("doubleClick", { id: { item: "id" } }),
+                      onContextMenuAt: ui9("contextMenu", { id: { item: "id" }, x: { arg: "" }, y: { arg: "", index: 1 } })
                     }
                   }
                 ]
@@ -13712,8 +13774,8 @@ var TREE_DECLARATION = {
       {
         component: "chrome/StatusBar",
         props: {
-          left: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text8({ input: "view.countLabel" })] } },
-          right: { node: { component: "chrome/Text", when: { input: "view.selectedLabel" }, props: { role: { value: "meta" } }, children: [text8({ input: "view.selectedLabel" })] } }
+          left: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text9({ input: "view.countLabel" })] } },
+          right: { node: { component: "chrome/Text", when: { input: "view.selectedLabel" }, props: { role: { value: "meta" } }, children: [text9({ input: "view.selectedLabel" })] } }
         }
       }
     ]
@@ -13726,10 +13788,10 @@ var DRAG_THRESHOLD2 = 4;
 function TreePanelView({ controller, ...options }) {
   useSyncExternalStore10(controller.subscribe, controller.getState, controller.getState);
   const view = treeViewState(controller, options);
-  const ui9 = (intent) => applyTreeUi(controller, intent, options);
+  const ui10 = (intent) => applyTreeUi(controller, intent, options);
   const icon = (name, textValue) => /* @__PURE__ */ jsxs11(Fragment8, { children: [
     name ? /* @__PURE__ */ jsx12(TreeIcon, { name }) : null,
-    textValue ? /* @__PURE__ */ jsx12(Text8, { role: "caption", children: textValue }) : null
+    textValue ? /* @__PURE__ */ jsx12(Text9, { role: "caption", children: textValue }) : null
   ] });
   const row2 = (r) => /* @__PURE__ */ jsx12(
     Row4,
@@ -13745,48 +13807,48 @@ function TreePanelView({ controller, ...options }) {
       title: r.dropTitle,
       icon: icon(r.iconName, r.iconText),
       label: /* @__PURE__ */ jsxs11(Fragment8, { children: [
-        r.renaming ? /* @__PURE__ */ jsx12(Input5, { autoFocus: true, value: r.draft, label: "Name", onChange: (value) => ui9({ kind: "renameDraft", value }), onBlur: () => ui9({ kind: "commitRename" }), onKeyDown: (e) => ui9({ kind: "renameKey", key: e.key }) }) : null,
+        r.renaming ? /* @__PURE__ */ jsx12(Input5, { autoFocus: true, value: r.draft, label: "Name", onChange: (value) => ui10({ kind: "renameDraft", value }), onBlur: () => ui10({ kind: "commitRename" }), onKeyDown: (e) => ui10({ kind: "renameKey", key: e.key }) }) : null,
         !r.renaming ? r.label : null
       ] }),
       meta: /* @__PURE__ */ jsxs11(Fragment8, { children: [
-        r.chipLoading ? /* @__PURE__ */ jsx12(Text8, { role: "caption", children: "loading\u2026" }) : null,
+        r.chipLoading ? /* @__PURE__ */ jsx12(Text9, { role: "caption", children: "loading\u2026" }) : null,
         r.chipError ? /* @__PURE__ */ jsx12(Badge7, { tone: "error", children: r.chipErrorText }) : null,
-        r.chipLoadMore ? /* @__PURE__ */ jsx12(TextButton6, { onClick: () => ui9({ kind: "loadMore", id: r.id }), children: "load more\u2026" }) : null,
+        r.chipLoadMore ? /* @__PURE__ */ jsx12(TextButton7, { onClick: () => ui10({ kind: "loadMore", id: r.id }), children: "load more\u2026" }) : null,
         r.chipTruncated ? /* @__PURE__ */ jsx12(Badge7, { tone: "warning", children: r.chipTruncatedText }) : null,
-        r.chipEmpty ? /* @__PURE__ */ jsx12(Text8, { role: "caption", children: "empty" }) : null
+        r.chipEmpty ? /* @__PURE__ */ jsx12(Text9, { role: "caption", children: "empty" }) : null
       ] }),
       trailing: /* @__PURE__ */ jsxs11(Fragment8, { children: [
-        r.columns.map((c) => /* @__PURE__ */ jsx12(Text8, { role: "number", children: c.text }, c.key)),
-        r.glyphs.map((g) => /* @__PURE__ */ jsx12(Text8, { role: "meta", title: g.title, children: icon(g.iconName, g.iconText) }, g.key)),
+        r.columns.map((c) => /* @__PURE__ */ jsx12(Text9, { role: "number", children: c.text }, c.key)),
+        r.glyphs.map((g) => /* @__PURE__ */ jsx12(Text9, { role: "meta", title: g.title, children: icon(g.iconName, g.iconText) }, g.key)),
         r.badges.map((b) => /* @__PURE__ */ jsx12(Badge7, { tone: b.tone, children: b.text }, b.key)),
-        r.actions.map((a) => /* @__PURE__ */ jsx12(IconButton7, { size: "sm", icon: icon(a.iconName, a.iconText), label: a.label, disabled: a.disabled, onClick: () => ui9({ kind: "action", id: a.rowId, actionId: a.actionId }) }, a.key))
+        r.actions.map((a) => /* @__PURE__ */ jsx12(IconButton7, { size: "sm", icon: icon(a.iconName, a.iconText), label: a.label, disabled: a.disabled, onClick: () => ui10({ kind: "action", id: a.rowId, actionId: a.actionId }) }, a.key))
       ] }),
-      onExpandedChange: () => ui9({ kind: "toggleExpanded", id: r.id }),
-      onClick: (e) => ui9({ kind: "click", id: r.id, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey, altKey: e.altKey }),
-      onDoubleClick: () => ui9({ kind: "doubleClick", id: r.id }),
-      onContextMenuAt: (x, y) => ui9({ kind: "contextMenu", id: r.id, x, y })
+      onExpandedChange: () => ui10({ kind: "toggleExpanded", id: r.id }),
+      onClick: (e) => ui10({ kind: "click", id: r.id, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey, altKey: e.altKey }),
+      onDoubleClick: () => ui10({ kind: "doubleClick", id: r.id }),
+      onContextMenuAt: (x, y) => ui10({ kind: "contextMenu", id: r.id, x, y })
     },
     r.id
   );
-  return /* @__PURE__ */ jsxs11(Column8, { children: [
+  return /* @__PURE__ */ jsxs11(Column9, { children: [
     /* @__PURE__ */ jsx12(
       Toolbar7,
       {
-        left: view.searchShown ? /* @__PURE__ */ jsx12(SearchField5, { value: view.filter, placeholder: "Filter\u2026", onChange: (value) => ui9({ kind: "filter", value }) }) : null,
+        left: view.searchShown ? /* @__PURE__ */ jsx12(SearchField5, { value: view.filter, placeholder: "Filter\u2026", onChange: (value) => ui10({ kind: "filter", value }) }) : null,
         right: /* @__PURE__ */ jsxs11(ToolbarGroup5, { end: true, children: [
-          /* @__PURE__ */ jsx12(IconButton7, { icon: /* @__PURE__ */ jsx12(ExpandGlyph, {}), label: "Expand all", onClick: () => ui9({ kind: "expandAll" }) }),
-          /* @__PURE__ */ jsx12(IconButton7, { icon: /* @__PURE__ */ jsx12(CollapseGlyph, {}), label: "Collapse all", onClick: () => ui9({ kind: "collapseAll" }) }),
-          /* @__PURE__ */ jsx12(IconButton7, { icon: /* @__PURE__ */ jsx12(RefreshGlyph, {}), label: "Refresh", onClick: () => ui9({ kind: "refresh" }) })
+          /* @__PURE__ */ jsx12(IconButton7, { icon: /* @__PURE__ */ jsx12(ExpandGlyph, {}), label: "Expand all", onClick: () => ui10({ kind: "expandAll" }) }),
+          /* @__PURE__ */ jsx12(IconButton7, { icon: /* @__PURE__ */ jsx12(CollapseGlyph, {}), label: "Collapse all", onClick: () => ui10({ kind: "collapseAll" }) }),
+          /* @__PURE__ */ jsx12(IconButton7, { icon: /* @__PURE__ */ jsx12(RefreshGlyph, {}), label: "Refresh", onClick: () => ui10({ kind: "refresh" }) })
         ] })
       }
     ),
     view.noSource ? /* @__PURE__ */ jsx12(EmptyState8, { title: "No source", hint: view.noSourceHint }) : null,
     view.loading ? /* @__PURE__ */ jsx12(LoadingState, { label: view.loadingLabel }) : null,
-    view.failed ? /* @__PURE__ */ jsx12(ErrorState, { title: view.failedTitle, message: view.failedMessage, retryLabel: view.retryLabel, onRetry: () => ui9({ kind: "retry" }) }) : null,
+    view.failed ? /* @__PURE__ */ jsx12(ErrorState, { title: view.failedTitle, message: view.failedMessage, retryLabel: view.retryLabel, onRetry: () => ui10({ kind: "retry" }) }) : null,
     view.noMatches ? /* @__PURE__ */ jsx12(EmptyState8, { title: "No matches", hint: view.noMatchesHint }) : null,
     view.emptyTree ? /* @__PURE__ */ jsx12(EmptyState8, { title: "Nothing here", hint: view.emptyHint }) : null,
     view.listShown ? /* @__PURE__ */ jsx12(TreeScroller, { controller, children: /* @__PURE__ */ jsx12(RowList4, { role: "tree", "aria-label": "Tree", "aria-multiselectable": true, children: /* @__PURE__ */ jsx12(VirtualWindow3, { totalHeight: view.totalHeight, offsetTop: view.offsetTop, children: view.rows.map(row2) }) }) }) : null,
-    /* @__PURE__ */ jsx12(StatusBar8, { left: /* @__PURE__ */ jsx12(Text8, { role: "number", children: view.countLabel }), right: view.selectedLabel ? /* @__PURE__ */ jsx12(Text8, { role: "meta", children: view.selectedLabel }) : null })
+    /* @__PURE__ */ jsx12(StatusBar8, { left: /* @__PURE__ */ jsx12(Text9, { role: "number", children: view.countLabel }), right: view.selectedLabel ? /* @__PURE__ */ jsx12(Text9, { role: "meta", children: view.selectedLabel }) : null })
   ] });
 }
 function TreeScroller({ controller, children }) {
@@ -14127,10 +14189,14 @@ export {
   LayersPanelController,
   LayersPanelView,
   MIXED,
+  BEHAVIOURS8 as NODEGRAPH_BEHAVIOURS,
+  NODEGRAPH_DECLARATION,
   NODEGRAPH_PANEL_ID,
+  NODEGRAPH_RUNTIME_UNITS,
   NodeGraphPanelView,
+  NodeGraphSurface,
   SPACE_LABEL,
-  BEHAVIOURS8 as TREE_BEHAVIOURS,
+  BEHAVIOURS9 as TREE_BEHAVIOURS,
   TREE_DECLARATION,
   TREE_PANEL_ID,
   TREE_RUNTIME_UNITS,
@@ -14158,6 +14224,7 @@ export {
   applyHistoryUi,
   applyInspectorUi,
   applyLayersUi,
+  applyNodeGraphUi,
   applyPrecision,
   applyTangentDrag,
   applyTreeUi,
@@ -14280,6 +14347,9 @@ export {
   nodeBounds,
   nodegraphManifest,
   nodegraphPanel,
+  nodegraphRuntimeComponents,
+  nodegraphViewManifest,
+  nodegraphViewState,
   normalizeColorInput,
   normalizeHistoryState,
   normalizeKindKey,