@xenosystem/blocks 0.13.16 → 0.13.18

package/dist/edit/index.js

@@ -1,5 +1,4 @@
 import {
-  ChevronGlyph,
   CollapseGlyph,
   DiamondIcon,
   EntryIcon,
@@ -22,7 +21,7 @@ import {
   VisibilityIcon,
   XIcon,
   XIcon2
-} from "../chunk-PI5WOATA.js";
+} from "../chunk-7S2RKUAM.js";
 import "../chunk-2KG3PWR4.js";
 
 // src/edit/layers/panel.ts
@@ -1488,9 +1487,9 @@ function LayersPanelView({ controller }) {
   const getSnapshot = useCallback(() => controller.getRevision(), [controller]);
   useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   const view = layersViewState(controller);
-  const ui6 = (intent) => applyLayersUi(controller, intent);
+  const ui8 = (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) => ui6({ 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) => ui8({ 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
@@ -1603,7 +1602,7 @@ function LayersThumbnail({ thumbnailKey, size, controller }) {
   return /* @__PURE__ */ jsx2(Thumbnail, { size, data: controller.getThumbnail(thumbnailKey) });
 }
 function LayerRow({ row: row2, thumbnailSize, controller }) {
-  const ui6 = (intent) => applyLayersUi(controller, intent);
+  const ui8 = (intent) => applyLayersUi(controller, intent);
   return /* @__PURE__ */ jsx2(
     Row,
     {
@@ -1618,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: () => ui6({ 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: () => ui6({ kind: "toggleProp", id: row2.id, prop: "locked" }) }) : null,
-        row2.showSolo ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "S", label: "Solo", on: row2.solo, onChange: () => ui6({ kind: "toggleProp", id: row2.id, prop: "solo" }) }) : null,
-        row2.showMute ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "M", label: "Mute", on: row2.muted, onChange: () => ui6({ kind: "toggleProp", id: row2.id, prop: "muted" }) }) : null,
-        row2.showArm ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "R", label: "Arm", on: row2.armed, onChange: () => ui6({ 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: () => ui8({ 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: () => ui8({ kind: "toggleProp", id: row2.id, prop: "locked" }) }) : null,
+        row2.showSolo ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "S", label: "Solo", on: row2.solo, onChange: () => ui8({ kind: "toggleProp", id: row2.id, prop: "solo" }) }) : null,
+        row2.showMute ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "M", label: "Mute", on: row2.muted, onChange: () => ui8({ kind: "toggleProp", id: row2.id, prop: "muted" }) }) : null,
+        row2.showArm ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "R", label: "Arm", on: row2.armed, onChange: () => ui8({ 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,
@@ -1630,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: () => ui6({ kind: "toggleExpanded", id: row2.id }),
-      onDoubleClick: () => ui6({ kind: "beginRename", id: row2.id }),
-      onContextMenuAt: (x, y) => ui6({ kind: "contextMenu", id: row2.id, x, y })
+      onExpandedChange: () => ui8({ kind: "toggleExpanded", id: row2.id }),
+      onDoubleClick: () => ui8({ kind: "beginRename", id: row2.id }),
+      onContextMenuAt: (x, y) => ui8({ kind: "contextMenu", id: row2.id, x, y })
     }
   );
 }
@@ -2024,8 +2023,8 @@ function constraintsOf(field) {
     scale: field.scale
   };
 }
-function parseNumeric(text6) {
-  const trimmed = String(text6).trim();
+function parseNumeric(text8) {
+  const trimmed = String(text8).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" };
@@ -2050,8 +2049,8 @@ function normalizeNumeric(value, c) {
 function formatNumeric(value, field) {
   if (!Number.isFinite(value)) return "";
   const precision = field.precision;
-  const text6 = typeof precision === "number" && Number.isFinite(precision) ? value.toFixed(Math.max(0, Math.floor(precision))) : String(value);
-  return field.unit ? `${text6}${field.unit}` : text6;
+  const text8 = typeof precision === "number" && Number.isFinite(precision) ? value.toFixed(Math.max(0, Math.floor(precision))) : String(value);
+  return field.unit ? `${text8}${field.unit}` : text8;
 }
 function usesLogScale(c) {
   return c.scale === "log" && typeof c.min === "number" && typeof c.max === "number" && c.min > 0 && c.max > c.min;
@@ -2385,44 +2384,44 @@ var InspectorPanelController = class {
     if (!field || !isFieldEditable(field)) return;
     const mixed = isFieldMixed(field);
     const value = this.getFieldValue(fieldId);
-    const text6 = mixed ? "" : field.type === "number" && typeof value === "number" ? formatNumeric(value, field) : value === void 0 || value === null ? "" : String(value);
-    this.drafts.set(fieldId, { text: text6, original: value });
+    const text8 = mixed ? "" : field.type === "number" && typeof value === "number" ? formatNumeric(value, field) : value === void 0 || value === null ? "" : String(value);
+    this.drafts.set(fieldId, { text: text8, original: value });
     this.focusedFieldId = fieldId;
     this.emitFieldFocus(fieldId);
     this.notify();
   }
   /** Update the draft text (typing). Emits nothing under the `blur` policy. */
-  setDraft(fieldId, text6) {
+  setDraft(fieldId, text8) {
     const draft = this.drafts.get(fieldId);
     if (!draft) {
-      this.drafts.set(fieldId, { text: text6, original: this.getFieldValue(fieldId) });
+      this.drafts.set(fieldId, { text: text8, original: this.getFieldValue(fieldId) });
     } else {
-      draft.text = text6;
+      draft.text = text8;
     }
     const field = this.getField(fieldId);
     if (field && commitPolicyOf(field) === "live") {
-      const parsed = this.parseDraft(fieldId, text6);
+      const parsed = this.parseDraft(fieldId, text8);
       if (parsed.ok) this.emitSet(fieldId, parsed.value);
     }
     this.notify();
   }
   /** Parse a draft string into a field-appropriate value. */
-  parseDraft(fieldId, text6) {
+  parseDraft(fieldId, text8) {
     const field = this.getField(fieldId);
     if (!field) return { ok: false };
     if (field.type === "number") {
-      const parsed = parseNumeric(text6);
+      const parsed = parseNumeric(text8);
       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(text6) };
+        return { ok: true, value: JSON.parse(text8) };
       } catch {
         return { ok: false };
       }
     }
-    return { ok: true, value: text6 };
+    return { ok: true, value: text8 };
   }
   /**
    * Commit the draft (Enter / blur). Invalid input reverts instead of committing garbage.
@@ -3348,7 +3347,7 @@ function NumberWidget({ field, controller, component }) {
     },
     [controller, editable, field.id, component]
   );
-  const text6 = component !== void 0 ? (() => {
+  const text8 = 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) : "";
@@ -3360,7 +3359,7 @@ function NumberWidget({ field, controller, component }) {
       Input2,
       {
         inputMode: "decimal",
-        value: text6,
+        value: text8,
         placeholder: mixed ? controller.getMixedPlaceholder() : field.placeholder,
         mixed,
         readOnly: !editable,
@@ -3578,7 +3577,7 @@ function ActionGlyph({ glyph }) {
   return /* @__PURE__ */ jsx4("span", { "aria-hidden": true, children: glyph });
 }
 function SectionView({ section, controller }) {
-  const ui6 = (intent) => applyInspectorUi(controller, intent);
+  const ui8 = (intent) => applyInspectorUi(controller, intent);
   const hasActions = section.actions.length > 0 || section.hasAddMenu;
   return /* @__PURE__ */ jsxs3(
     Section,
@@ -3587,13 +3586,13 @@ function SectionView({ section, controller }) {
       flush: true,
       collapsible: section.collapsible,
       collapsed: section.collapsed,
-      onCollapsedChange: () => ui6({ kind: "toggleSectionCollapsed", sectionId: section.id }),
+      onCollapsedChange: () => ui8({ kind: "toggleSectionCollapsed", sectionId: section.id }),
       enabled: section.enabled,
-      onEnabledChange: () => ui6({ kind: "toggleSectionEnabled", sectionId: section.id }),
+      onEnabledChange: () => ui8({ 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: () => ui6({ 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) => ui6({ 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: () => ui8({ 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) => ui8({ 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,
@@ -3603,7 +3602,7 @@ function SectionView({ section, controller }) {
   );
 }
 function FieldRow({ row: row2, controller }) {
-  const ui6 = (intent) => applyInspectorUi(controller, intent);
+  const ui8 = (intent) => applyInspectorUi(controller, intent);
   return /* @__PURE__ */ jsxs3(Fragment3, { children: [
     /* @__PURE__ */ jsxs3(
       Field,
@@ -3611,19 +3610,19 @@ function FieldRow({ row: row2, controller }) {
         label: row2.label,
         title: row2.title,
         focused: row2.focused,
-        onLabelClick: () => ui6({ kind: "focusField", fieldId: row2.id }),
-        onContextMenu: (x, y) => ui6({ kind: "contextMenu", fieldId: row2.id, x, y }),
+        onLabelClick: () => ui8({ kind: "focusField", fieldId: row2.id }),
+        onContextMenu: (x, y) => ui8({ 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: () => ui6({ 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: () => ui6({ 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: () => ui6({ 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: () => ui6({ kind: "keyframe", fieldId: row2.id, op: "next" }) }) : null
+          /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(StopwatchIcon, {}), label: "Toggle animation", active: row2.animated, onClick: () => ui8({ 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: () => ui8({ 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: () => ui8({ 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: () => ui8({ 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) => ui6({ 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) => ui8({ 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: () => ui6({ kind: "bindToken", fieldId: row2.id }) }) : null,
-          row2.showReset ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(ResetIcon, {}), label: "Reset to default", onClick: () => ui6({ kind: "resetField", fieldId: row2.id }) }) : null
+          row2.showToken ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(LinkIcon, {}), label: row2.tokenActionLabel, active: row2.bound, onClick: () => ui8({ kind: "bindToken", fieldId: row2.id }) }) : null,
+          row2.showReset ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(ResetIcon, {}), label: "Reset to default", onClick: () => ui8({ kind: "resetField", fieldId: row2.id }) }) : null
         ] }),
         children: [
           row2.bound ? /* @__PURE__ */ jsx4(Badge2, { title: row2.tokenTitle, children: row2.tokenLabel }) : null,
@@ -4876,23 +4875,23 @@ function HistoryPanelView({ controller }) {
   const getSnapshot = useCallback4(() => controller.getRevision(), [controller]);
   useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
   const view = historyViewState(controller);
-  const ui6 = (intent) => applyHistoryUi(controller, intent);
+  const ui8 = (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: () => ui6({ kind: "undo" }) }),
-          /* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(RedoIcon, {}), label: "Redo", disabled: !view.canRedo, onClick: () => ui6({ kind: "redo" }) })
+          /* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(UndoIcon, {}), label: "Undo", disabled: !view.canUndo, onClick: () => ui8({ kind: "undo" }) }),
+          /* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(RedoIcon, {}), label: "Redo", disabled: !view.canRedo, onClick: () => ui8({ 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: () => ui6({ kind: "requestClear" }) }) : null
+          view.clearAllowed ? /* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(TrashIcon, {}), label: "Clear history", onClick: () => ui8({ kind: "requestClear" }) }) : null
         ] }),
-        children: view.searchShown ? /* @__PURE__ */ jsx5(SearchField3, { value: view.filter, onChange: (v) => ui6({ kind: "filter", value: v }), placeholder: "Search history", label: "Search history" }) : null
+        children: view.searchShown ? /* @__PURE__ */ jsx5(SearchField3, { value: view.filter, onChange: (v) => ui8({ 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: () => ui6({ kind: "confirmClear" }), onCancel: () => ui6({ kind: "cancelClear" }) }) : null,
+    view.confirmingClear ? /* @__PURE__ */ jsx5(InlineConfirm, { message: "Clear all history?", label: "Confirm clear history", confirmLabel: "Clear", onConfirm: () => ui8({ kind: "confirmClear" }), onCancel: () => ui8({ 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)) }) }),
@@ -4951,7 +4950,7 @@ function HistoryCancelButton({ entryId, controller }) {
   );
 }
 function HistoryRowView({ row: row2, controller }) {
-  const ui6 = (intent) => applyHistoryUi(controller, intent);
+  const ui8 = (intent) => applyHistoryUi(controller, intent);
   return /* @__PURE__ */ jsx5(
     Row2,
     {
@@ -4974,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: () => ui6({ kind: "jump", entryId: row2.entryId }),
-      onMouseEnter: () => ui6({ kind: "hover", entryId: row2.entryId }),
-      onContextMenuAt: (x, y) => ui6({ kind: "contextMenu", entryId: row2.entryId, x, y })
+      onClick: () => ui8({ kind: "jump", entryId: row2.entryId }),
+      onMouseEnter: () => ui8({ kind: "hover", entryId: row2.entryId }),
+      onContextMenuAt: (x, y) => ui8({ kind: "contextMenu", entryId: row2.entryId, x, y })
     }
   );
 }
@@ -6262,27 +6261,27 @@ function ColorPanelView({ controller }) {
   const getSnapshot = useCallback5(() => controller.getRevision(), [controller]);
   useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
   const view = colorViewState(controller);
-  const ui6 = (intent) => applyColorUi(controller, intent);
+  const ui8 = (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: () => ui6({ kind: "setChannel", channel: "fg" }) }),
-      /* @__PURE__ */ jsx6(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx6(SwapIcon, {}), label: "Swap FG/BG (X)", onClick: () => ui6({ kind: "swapChannels" }) }),
-      /* @__PURE__ */ jsx6(ColorChip, { color: null, label: "Background", pressed: view.bgActive, onClick: () => ui6({ kind: "setChannel", channel: "bg" }) })
+      /* @__PURE__ */ jsx6(ColorChip, { color: view.hex, label: "Foreground", pressed: view.fgActive, onClick: () => ui8({ kind: "setChannel", channel: "fg" }) }),
+      /* @__PURE__ */ jsx6(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx6(SwapIcon, {}), label: "Swap FG/BG (X)", onClick: () => ui8({ kind: "swapChannels" }) }),
+      /* @__PURE__ */ jsx6(ColorChip, { color: null, label: "Background", pressed: view.bgActive, onClick: () => ui8({ 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) => ui6({ kind: "setSpace", space: v }) }),
-      view.isHex ? /* @__PURE__ */ jsx6(Input3, { variant: "mono", label: "Hex", value: view.hex, onChange: (v) => ui6({ kind: "setHex", value: v }), disabled: view.bound }) : null,
-      view.components.map((comp) => /* @__PURE__ */ jsx6(NumberInput, { caption: comp.label, value: comp.value, onChange: (n) => ui6({ 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) => ui6({ kind: "setAlpha", percent: n }), disabled: view.bound }) : null,
-      /* @__PURE__ */ jsx6(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx6(EyedropperIcon, {}), label: "Pick from screen", onClick: () => ui6({ kind: "eyedropper" }) })
+      /* @__PURE__ */ jsx6(Select3, { size: "sm", label: "Color model", value: view.space, options: view.spaceOptions, onChange: (v) => ui8({ kind: "setSpace", space: v }) }),
+      view.isHex ? /* @__PURE__ */ jsx6(Input3, { variant: "mono", label: "Hex", value: view.hex, onChange: (v) => ui8({ kind: "setHex", value: v }), disabled: view.bound }) : null,
+      view.components.map((comp) => /* @__PURE__ */ jsx6(NumberInput, { caption: comp.label, value: comp.value, onChange: (n) => ui8({ 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) => ui8({ kind: "setAlpha", percent: n }), disabled: view.bound }) : null,
+      /* @__PURE__ */ jsx6(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx6(EyedropperIcon, {}), label: "Pick from screen", onClick: () => ui8({ 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) => ui6({ kind: "bindToken", tokenId: id }) }),
-      view.bound ? /* @__PURE__ */ jsx6(TextButton2, { onClick: () => ui6({ 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) => ui8({ kind: "bindToken", tokenId: id }) }),
+      view.bound ? /* @__PURE__ */ jsx6(TextButton2, { onClick: () => ui8({ kind: "unbindToken" }), children: "Unbind" }) : null
     ] }) }) : null,
-    /* @__PURE__ */ jsx6(Section2, { title: "Swatches", flush: true, actions: /* @__PURE__ */ jsx6(TextButton2, { onClick: () => ui6({ 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: () => ui6({ kind: "selectColor", hex: sw.hex }), onContextMenu: () => ui6({ 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: () => ui6({ kind: "selectColor", hex: r.hex }) }, r.key)) }) }) : null
+    /* @__PURE__ */ jsx6(Section2, { title: "Swatches", flush: true, actions: /* @__PURE__ */ jsx6(TextButton2, { onClick: () => ui8({ 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: () => ui8({ kind: "selectColor", hex: sw.hex }), onContextMenu: () => ui8({ 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: () => ui8({ kind: "selectColor", hex: r.hex }) }, r.key)) }) }) : null
   ] }) });
 }
 function ColorPicker({ controller }) {
@@ -8944,11 +8943,11 @@ var FindController = class {
    * @param text - The new query text.
    * @param immediate - Skip the debounce (a paste, or pressing Enter).
    */
-  setText(text6, immediate = false) {
-    if (text6 === this.text) return;
-    this.text = text6;
+  setText(text8, immediate = false) {
+    if (text8 === this.text) return;
+    this.text = text8;
     this.index = -1;
-    if (text6 === "") {
+    if (text8 === "") {
       this.clearResults("idle");
       this.emitQuery(true);
       return;
@@ -8976,8 +8975,8 @@ var FindController = class {
     this.notify();
   }
   /** The replacement text. Never emitted on its own — a replacement is not a search. */
-  setReplaceText(text6) {
-    this.replaceText = text6;
+  setReplaceText(text8) {
+    this.replaceText = text8;
     this.notify();
   }
   /** Show or hide the replace row. */
@@ -9626,7 +9625,7 @@ function findRuntimeComponents(controller) {
 function FindPanelView({ controller, showResults, placeholder }) {
   useSyncExternalStore7(controller.subscribe, controller.getState, controller.getState);
   const view = findViewState(controller, { showResults, placeholder });
-  const ui6 = (intent) => applyFindUi(controller, intent);
+  const ui8 = (intent) => applyFindUi(controller, intent);
   const renderRow = (row2) => /* @__PURE__ */ jsx9(
     Row3,
     {
@@ -9634,8 +9633,8 @@ function FindPanelView({ controller, showResults, placeholder }) {
       selected: row2.current,
       meta: row2.location,
       label: /* @__PURE__ */ jsx9(Highlight, { segments: row2.segments }),
-      onClick: () => ui6({ kind: "select", matchId: row2.id }),
-      onContextMenuAt: (x, y) => ui6({ kind: "contextMenu", matchId: row2.id, x, y })
+      onClick: () => ui8({ kind: "select", matchId: row2.id }),
+      onContextMenuAt: (x, y) => ui8({ kind: "contextMenu", matchId: row2.id, x, y })
     },
     row2.id
   );
@@ -9643,11 +9642,11 @@ function FindPanelView({ controller, showResults, placeholder }) {
     /* @__PURE__ */ jsx9(
       Toolbar4,
       {
-        left: /* @__PURE__ */ jsx9(SearchField4, { value: view.text, placeholder: view.placeholder, onChange: (value) => ui6({ kind: "text", value }) }),
+        left: /* @__PURE__ */ jsx9(SearchField4, { value: view.text, placeholder: view.placeholder, onChange: (value) => ui8({ 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: () => ui6({ kind: "option", option: "caseSensitive" }) }),
-          /* @__PURE__ */ jsx9(IconButton6, { label: "Whole word", active: view.wholeWord, icon: /* @__PURE__ */ jsx9(WordIcon, { size: 12 }), onClick: () => ui6({ kind: "option", option: "wholeWord" }) }),
-          /* @__PURE__ */ jsx9(IconButton6, { label: "Regular expression", active: view.regex, icon: /* @__PURE__ */ jsx9(RegexIcon, { size: 12 }), onClick: () => ui6({ kind: "option", option: "regex" }) })
+          /* @__PURE__ */ jsx9(IconButton6, { label: "Match case", active: view.caseSensitive, icon: /* @__PURE__ */ jsx9(CaseIcon, { size: 12 }), onClick: () => ui8({ kind: "option", option: "caseSensitive" }) }),
+          /* @__PURE__ */ jsx9(IconButton6, { label: "Whole word", active: view.wholeWord, icon: /* @__PURE__ */ jsx9(WordIcon, { size: 12 }), onClick: () => ui8({ kind: "option", option: "wholeWord" }) }),
+          /* @__PURE__ */ jsx9(IconButton6, { label: "Regular expression", active: view.regex, icon: /* @__PURE__ */ jsx9(RegexIcon, { size: 12 }), onClick: () => ui8({ kind: "option", option: "regex" }) })
         ] })
       }
     ),
@@ -9662,9 +9661,9 @@ function FindPanelView({ controller, showResults, placeholder }) {
           view.countShown ? /* @__PURE__ */ jsx9(Text5, { 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: () => ui6({ kind: "previous" }) }),
-          /* @__PURE__ */ jsx9(IconButton6, { label: "Next match", disabled: !view.hasMatches, icon: /* @__PURE__ */ jsx9(Chevron, { direction: "down", size: 12 }), onClick: () => ui6({ kind: "next" }) }),
-          /* @__PURE__ */ jsx9(TextButton3, { onClick: () => ui6({ kind: "toggleReplace" }), children: view.replaceLabel })
+          /* @__PURE__ */ jsx9(IconButton6, { label: "Previous match", disabled: !view.hasMatches, icon: /* @__PURE__ */ jsx9(Chevron, { direction: "up", size: 12 }), onClick: () => ui8({ kind: "previous" }) }),
+          /* @__PURE__ */ jsx9(IconButton6, { label: "Next match", disabled: !view.hasMatches, icon: /* @__PURE__ */ jsx9(Chevron, { direction: "down", size: 12 }), onClick: () => ui8({ kind: "next" }) }),
+          /* @__PURE__ */ jsx9(TextButton3, { onClick: () => ui8({ kind: "toggleReplace" }), children: view.replaceLabel })
         ] })
       }
     ),
@@ -9672,10 +9671,10 @@ function FindPanelView({ controller, showResults, placeholder }) {
     view.replaceVisible ? /* @__PURE__ */ jsx9(
       Toolbar4,
       {
-        left: /* @__PURE__ */ jsx9(SearchField4, { value: view.replaceText, placeholder: "Replace with", onChange: (value) => ui6({ kind: "replaceText", value }) }),
+        left: /* @__PURE__ */ jsx9(SearchField4, { value: view.replaceText, placeholder: "Replace with", onChange: (value) => ui8({ kind: "replaceText", value }) }),
         right: /* @__PURE__ */ jsxs8(ToolbarGroup2, { end: true, children: [
-          /* @__PURE__ */ jsx9(TextButton3, { disabled: !view.canReplace, onClick: () => ui6({ kind: "replaceCurrent" }), children: "Replace" }),
-          /* @__PURE__ */ jsx9(TextButton3, { disabled: !view.canReplace, onClick: () => ui6({ kind: "replaceAll" }), children: view.allLabel })
+          /* @__PURE__ */ jsx9(TextButton3, { disabled: !view.canReplace, onClick: () => ui8({ kind: "replaceCurrent" }), children: "Replace" }),
+          /* @__PURE__ */ jsx9(TextButton3, { disabled: !view.canReplace, onClick: () => ui8({ kind: "replaceAll" }), children: view.allLabel })
         ] })
       }
     ) : null,
@@ -10333,279 +10332,290 @@ var commentsManifest = {
 import { useSyncExternalStore as useSyncExternalStore8 } from "react";
 import {
   Badge as Badge6,
+  Column as Column6,
   EmptyState as EmptyState6,
+  Input as Input4,
+  Message,
+  Note,
+  Quote,
   ScrollArea as ScrollArea5,
   Section as Section4,
   SegmentedControl as SegmentedControl2,
+  Stack as Stack4,
   StatusBar as StatusBar6,
+  Text as Text6,
+  TextArea as TextArea2,
   TextButton as TextButton4,
+  ThreadCard,
   Toolbar as Toolbar5,
   ToolbarGroup as ToolbarGroup3
 } from "@xenosystem/components/chrome";
-import { Fragment as Fragment7, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// src/edit/comments/declaration.ts
 var ANCHOR_BADGE = {
   live: null,
-  stale: {
-    label: "edited",
-    tone: "warning",
-    title: "The content this comment is about has changed since it was written."
-  },
-  orphaned: {
-    label: "content deleted",
-    tone: "error",
-    title: "The content this comment was about no longer exists. The comment is kept."
+  stale: { label: "edited", tone: "warning", title: "The content this comment is about has changed since it was written." },
+  orphaned: { label: "content deleted", tone: "error", title: "The content this comment was about no longer exists. The comment is kept." }
+};
+function commentsViewState(c, options = {}) {
+  const s = c.getState();
+  const now = c.clock();
+  const showResolved = options.showResolved ?? true;
+  const allowReactions = options.allowReactions ?? false;
+  const me = s.currentUser?.id ?? "";
+  const thread = (v) => {
+    const t = v.thread;
+    const badge = ANCHOR_BADGE[v.anchorState];
+    const replying = s.replyingTo === t.id;
+    return {
+      id: t.id,
+      active: v.active,
+      resolved: t.resolved === true,
+      hasAnchorBadge: badge !== null,
+      anchorLabel: badge?.label,
+      anchorTone: badge?.tone ?? "neutral",
+      anchorTitle: badge?.title,
+      age: formatAge(t.createdAt, now),
+      hasQuote: !!t.anchorLabel,
+      quote: t.anchorLabel,
+      orphaned: v.anchorState === "orphaned",
+      messages: v.messages.map((m) => ({ id: m.id, author: m.authorName ?? m.authorId, age: formatAge(m.createdAt, now), edited: !!m.editedAt, body: m.body })),
+      hasReactions: allowReactions && !!t.reactions?.length,
+      reactions: allowReactions ? (t.reactions ?? []).map((r) => ({ threadId: t.id, emoji: r.emoji, label: `${r.emoji} ${r.userIds.length}`, mine: r.userIds.includes(me), reactTo: !r.userIds.includes(me) })) : [],
+      replying,
+      replyDraft: replying ? s.replyDraft : "",
+      idle: !replying,
+      resolveLabel: t.resolved ? "Reopen" : "Resolve",
+      resolveTo: !t.resolved
+    };
+  };
+  const open = s.threads.filter((v) => !v.thread.resolved).map(thread);
+  const resolved = s.threads.filter((v) => v.thread.resolved).map(thread);
+  const o = s.totals.orphaned;
+  return {
+    show: s.filter.show ?? "open",
+    shows: [{ value: "open", label: "Open" }, { value: "resolved", label: "Resolved" }, { value: "all", label: "All" }],
+    sort: s.sort,
+    sorts: [{ value: "document", label: "Doc" }, { value: "newest", label: "New" }, { value: "oldest", label: "Old" }],
+    orphanedNotice: o > 0 ? `${o} comment${o === 1 ? "" : "s"} lost the content${o === 1 ? " it was" : " they were"} about.` : void 0,
+    orphanedHidden: o > 0 && s.filter.includeOrphaned === false,
+    filteredEmpty: s.threads.length === 0 && s.filteredEmpty,
+    filteredHint: `${s.totals.all} comment${s.totals.all === 1 ? "" : "s"} on this document.`,
+    empty: s.threads.length === 0 && !s.filteredEmpty,
+    emptyHint: options.emptyHint ?? "Select something and add a comment.",
+    listed: s.threads.length > 0,
+    open,
+    hasResolved: showResolved && resolved.length > 0,
+    resolvedTitle: `Resolved (${resolved.length})`,
+    resolved: showResolved ? resolved : [],
+    draft: s.draft,
+    placeholder: s.activeAnchor === null ? "Select something in the document to comment on it" : "Add a comment\u2026",
+    composerDisabled: s.activeAnchor === null,
+    commentDisabled: s.activeAnchor === null || s.draft.trim() === "",
+    countLabel: `${s.totals.open} open`,
+    staleLabel: s.totals.stale > 0 ? `${s.totals.stale} edited` : void 0
+  };
+}
+function applyCommentsUi(c, intent) {
+  switch (intent.kind) {
+    case "show":
+      c.setFilter({ show: intent.show });
+      break;
+    case "sort":
+      c.setSort(intent.sort);
+      break;
+    case "showOrphaned":
+      c.setFilter({ includeOrphaned: true });
+      break;
+    case "activate":
+      c.activate(intent.id);
+      break;
+    case "contextMenu":
+      c.requestContextMenu(intent.id, intent.x, intent.y);
+      break;
+    case "react":
+      c.react(intent.id, intent.emoji, intent.on);
+      break;
+    case "reply":
+      c.reply(intent.id);
+      break;
+    case "replyDraft":
+      c.setReplyDraft(intent.value);
+      break;
+    case "replyKey":
+      if (intent.key === "Enter" && !intent.shift) c.reply(intent.id);
+      else if (intent.key === "Escape") c.setReplyingTo(null);
+      break;
+    case "startReply":
+      c.setReplyingTo(intent.id);
+      break;
+    case "resolve":
+      c.resolve(intent.id, intent.resolved);
+      break;
+    case "remove":
+      c.remove(intent.id);
+      break;
+    case "draft":
+      c.setDraft(intent.value);
+      break;
+    case "draftKey":
+      if (intent.key === "Enter" && (intent.ctrl || intent.meta)) c.create();
+      break;
+    case "create":
+      c.create();
+      break;
   }
+}
+var commentsViewManifest = {
+  id: commentsManifest.id,
+  version: "1.0.0",
+  title: "Comments",
+  category: "edit",
+  layout: { slot: "side" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The CommentsViewModel the runtime derives from the controller on every draw." }],
+  outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, \u2026 } \u2014 applied by the runtime to the controller." }],
+  commands: []
 };
-function ThreadCard({
-  view,
-  controller,
-  allowReactions,
-  now
-}) {
-  const { thread, anchorState } = view;
-  const badge = ANCHOR_BADGE[anchorState];
-  const replying = controller.getState().replyingTo === thread.id;
-  const orphaned = anchorState === "orphaned";
-  return /* @__PURE__ */ jsx10(
-    "div",
+var EMPTY6 = { show: "open", shows: [], sort: "document", sorts: [], orphanedHidden: false, filteredEmpty: false, filteredHint: "", empty: true, emptyHint: "Select something and add a comment.", listed: false, open: [], hasResolved: false, resolvedTitle: "", resolved: [], draft: "", placeholder: "", composerDisabled: true, commentDisabled: true, countLabel: "0 open" };
+var BEHAVIOURS6 = {
+  "edit/commentsPanelView": (inputs) => inputs.view ?? EMPTY6
+};
+var COMMENTS_RUNTIME_UNITS = [];
+var text6 = (b) => ({ component: "text", props: { text: b } });
+var ui6 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var threadCard = (input) => ({
+  component: "chrome/ThreadCard",
+  each: { input, key: "id" },
+  props: { active: { item: "active" }, resolved: { item: "resolved" } },
+  on: { onContextMenuAt: ui6("contextMenu", { id: { item: "id" }, x: { arg: "", index: 0 }, y: { arg: "", index: 1 } }) },
+  children: [
+    {
+      component: "chrome/Stack",
+      props: { direction: { value: "row" }, gap: { value: 4 }, pad: { value: "none" } },
+      children: [
+        { component: "chrome/Badge", when: { item: "hasAnchorBadge" }, props: { tone: { item: "anchorTone" }, title: { item: "anchorTitle" } }, children: [text6({ item: "anchorLabel" })] },
+        { component: "chrome/Badge", when: { item: "resolved" }, children: [text6({ value: "resolved" })] },
+        { component: "chrome/Text", props: { role: { value: "caption" } }, children: [text6({ item: "age" })] }
+      ]
+    },
+    { component: "chrome/Quote", when: { item: "hasQuote" }, props: { orphaned: { item: "orphaned" } }, on: { onActivate: ui6("activate", { id: { item: "id" } }) }, children: [text6({ item: "quote" })] },
+    { component: "chrome/Message", each: { item: "messages", key: "id" }, props: { author: { item: "author" }, age: { item: "age" }, edited: { item: "edited" } }, children: [text6({ item: "body" })] },
     {
-      style: {
-        borderBottom: "1px solid var(--xeno-border-subtle)",
-        // Resolved dims. Orphaned does NOT — a comment whose content was deleted is the one most
-        // likely to matter, and dimming it would finish the job the deletion started.
-        opacity: thread.resolved ? 0.55 : 1,
-        background: view.active ? "var(--xeno-border-subtle)" : void 0
+      component: "chrome/Stack",
+      when: { item: "hasReactions" },
+      props: { direction: { value: "row" }, gap: { value: 4 }, pad: { value: "none" } },
+      children: [{ component: "chrome/TextButton", each: { item: "reactions", key: "emoji" }, on: { onClick: ui6("react", { id: { item: "threadId" }, emoji: { item: "emoji" }, on: { item: "reactTo" } }) }, children: [text6({ item: "label" })] }]
+    },
+    {
+      component: "chrome/Stack",
+      when: { item: "replying" },
+      props: { direction: { value: "row" }, gap: { value: 4 }, pad: { value: "none" } },
+      children: [
+        { component: "chrome/Input", props: { value: { item: "replyDraft" }, placeholder: { value: "Reply" }, autoFocus: { value: true }, label: { value: "Reply" } }, on: { onChange: ui6("replyDraft", { value: { arg: "" } }), onKeyDown: ui6("replyKey", { id: { item: "id" }, key: { arg: "key" }, shift: { arg: "shiftKey" } }) } },
+        { component: "chrome/TextButton", on: { onClick: ui6("reply", { id: { item: "id" } }) }, children: [text6({ value: "Send" })] }
+      ]
+    },
+    {
+      component: "chrome/Stack",
+      when: { item: "idle" },
+      props: { direction: { value: "row" }, gap: { value: 6 }, pad: { value: "none" } },
+      children: [
+        { component: "chrome/TextButton", on: { onClick: ui6("startReply", { id: { item: "id" } }) }, children: [text6({ value: "Reply" })] },
+        { component: "chrome/TextButton", on: { onClick: ui6("resolve", { id: { item: "id" }, resolved: { item: "resolveTo" } }) }, children: [text6({ item: "resolveLabel" })] },
+        { component: "chrome/TextButton", on: { onClick: ui6("remove", { id: { item: "id" } }) }, children: [text6({ value: "Delete" })] }
+      ]
+    }
+  ]
+});
+var COMMENTS_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: commentsViewManifest,
+  behaviour: "edit/commentsPanelView",
+  composition: {
+    component: "chrome/Column",
+    children: [
+      {
+        component: "chrome/Toolbar",
+        props: {
+          left: { node: { component: "chrome/SegmentedControl", props: { label: { value: "Show" }, options: { input: "view.shows" }, value: { input: "view.show" } }, on: { onChange: ui6("show", { show: { arg: "" } }) } } },
+          right: { node: { component: "chrome/ToolbarGroup", props: { end: { value: true } }, children: [{ component: "chrome/SegmentedControl", props: { label: { value: "Sort" }, options: { input: "view.sorts" }, value: { input: "view.sort" } }, on: { onChange: ui6("sort", { sort: { arg: "" } }) } }] } }
+        }
       },
-      onContextMenu: (event) => {
-        event.preventDefault();
-        controller.requestContextMenu(thread.id, event.clientX, event.clientY);
+      {
+        component: "chrome/Note",
+        when: { input: "view.orphanedNotice" },
+        children: [text6({ input: "view.orphanedNotice" }), { component: "chrome/TextButton", when: { input: "view.orphanedHidden" }, on: { onClick: ui6("showOrphaned") }, children: [text6({ value: "Show" })] }]
       },
-      children: /* @__PURE__ */ jsxs9("div", { style: { padding: "6px 8px", display: "flex", flexDirection: "column", gap: 4 }, children: [
-        /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-          badge ? /* @__PURE__ */ jsx10(Badge6, { tone: badge.tone, title: badge.title, children: badge.label }) : null,
-          thread.resolved ? /* @__PURE__ */ jsx10(Badge6, { children: "resolved" }) : null,
-          /* @__PURE__ */ jsx10("span", { style: { marginLeft: "auto", fontSize: 9, opacity: 0.4 }, children: formatAge(thread.createdAt, now) })
-        ] }),
-        thread.anchorLabel ? /* @__PURE__ */ jsx10(
-          "button",
-          {
-            type: "button",
-            onClick: () => controller.activate(thread.id),
-            style: {
-              textAlign: "left",
-              fontSize: 10,
-              opacity: orphaned ? 0.4 : 0.6,
-              borderLeft: "2px solid var(--xeno-control)",
-              paddingLeft: 6,
-              textDecoration: orphaned ? "line-through" : void 0,
-              background: "none",
-              border: "none",
-              borderLeftWidth: 2,
-              borderLeftStyle: "solid",
-              borderLeftColor: "var(--xeno-control)",
-              cursor: "pointer",
-              font: "inherit"
-            },
-            children: thread.anchorLabel
-          }
-        ) : null,
-        view.messages.map((message) => /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: 1 }, children: [
-          /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "baseline", gap: 4 }, children: [
-            /* @__PURE__ */ jsx10("span", { style: { fontSize: 10, fontWeight: 600 }, children: message.authorName ?? message.authorId }),
-            /* @__PURE__ */ jsx10("span", { style: { fontSize: 9, opacity: 0.35 }, children: formatAge(message.createdAt, now) }),
-            message.editedAt ? /* @__PURE__ */ jsx10("span", { style: { fontSize: 9, opacity: 0.3 }, children: "edited" }) : null
-          ] }),
-          /* @__PURE__ */ jsx10("p", { style: { fontSize: 11, opacity: 0.75, margin: 0, whiteSpace: "pre-wrap" }, children: message.body })
-        ] }, message.id)),
-        allowReactions && thread.reactions?.length ? /* @__PURE__ */ jsx10("div", { style: { display: "flex", gap: 4 }, children: thread.reactions.map((reaction) => /* @__PURE__ */ jsxs9(
-          TextButton4,
-          {
-            onClick: () => controller.react(
-              thread.id,
-              reaction.emoji,
-              !reaction.userIds.includes(controller.getState().currentUser?.id ?? "")
-            ),
-            children: [
-              reaction.emoji,
-              " ",
-              reaction.userIds.length
-            ]
-          },
-          reaction.emoji
-        )) }) : null,
-        replying ? /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 4 }, children: [
-          /* @__PURE__ */ jsx10(
-            "input",
-            {
-              value: controller.getState().replyDraft,
-              onChange: (event) => controller.setReplyDraft(event.target.value),
-              onKeyDown: (event) => {
-                if (event.key === "Enter" && !event.shiftKey) {
-                  event.preventDefault();
-                  controller.reply(thread.id);
-                } else if (event.key === "Escape") {
-                  controller.setReplyingTo(null);
-                }
-              },
-              placeholder: "Reply",
-              autoFocus: true,
-              style: {
-                flex: 1,
-                fontSize: 10,
-                background: "var(--xeno-canvas)",
-                border: "1px solid var(--xeno-border)",
-                borderRadius: 2,
-                padding: "2px 4px",
-                color: "inherit",
-                outline: "none"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx10(TextButton4, { onClick: () => controller.reply(thread.id), children: "Send" })
-        ] }) : /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 6 }, children: [
-          /* @__PURE__ */ jsx10(TextButton4, { onClick: () => controller.setReplyingTo(thread.id), children: "Reply" }),
-          /* @__PURE__ */ jsx10(TextButton4, { onClick: () => controller.resolve(thread.id, !thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
-          /* @__PURE__ */ jsx10(TextButton4, { onClick: () => controller.remove(thread.id), children: "Delete" })
-        ] })
-      ] })
-    }
-  );
-}
-function CommentsPanelView({
-  controller,
-  showResolved = true,
-  allowReactions = false,
-  emptyHint
-}) {
-  const state = useSyncExternalStore8(controller.subscribe, controller.getState, controller.getState);
-  const now = controller.clock();
-  const open = state.threads.filter((t) => !t.thread.resolved);
-  const resolved = state.threads.filter((t) => t.thread.resolved);
-  return /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
+      {
+        component: "chrome/ScrollArea",
+        children: [
+          { component: "chrome/EmptyState", when: { input: "view.filteredEmpty" }, props: { title: { value: "Nothing matches this filter" }, hint: { input: "view.filteredHint" } } },
+          { component: "chrome/EmptyState", when: { input: "view.empty" }, props: { title: { value: "No comments" }, hint: { input: "view.emptyHint" } } },
+          threadCard("view.open"),
+          { component: "chrome/Section", when: { input: "view.hasResolved" }, props: { title: { input: "view.resolvedTitle" }, flush: { value: true } }, children: [threadCard("view.resolved")] }
+        ]
+      },
+      {
+        component: "chrome/Stack",
+        props: { gap: { value: 2 }, pad: { value: "gutter" }, className: { value: "xeno-comments-composer" } },
+        children: [
+          { component: "chrome/TextArea", props: { value: { input: "view.draft" }, placeholder: { input: "view.placeholder" }, disabled: { input: "view.composerDisabled" }, rows: { value: 2 }, label: { value: "New comment" } }, on: { onChange: ui6("draft", { value: { arg: "" } }), onKeyDown: ui6("draftKey", { key: { arg: "key" }, ctrl: { arg: "ctrlKey" }, meta: { arg: "metaKey" } }) } },
+          { component: "chrome/Toolbar", props: { divided: { value: false }, right: { node: { component: "chrome/ToolbarGroup", props: { end: { value: true } }, children: [{ component: "chrome/TextButton", props: { strong: { value: true }, disabled: { input: "view.commentDisabled" } }, on: { onClick: ui6("create") }, children: [text6({ value: "Comment" })] }] } } } }
+        ]
+      },
+      { component: "chrome/StatusBar", props: { left: { input: "view.countLabel" }, right: { input: "view.staleLabel" } } }
+    ]
+  }
+};
+
+// src/edit/comments/react/CommentsPanelView.tsx
+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 ui8 = (intent) => applyCommentsUi(controller, intent);
+  const card = (t) => /* @__PURE__ */ jsxs9(ThreadCard, { active: t.active, resolved: t.resolved, onContextMenuAt: (x, y) => ui8({ 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(Text6, { role: "caption", children: t.age })
+    ] }),
+    t.hasQuote ? /* @__PURE__ */ jsx10(Quote, { orphaned: t.orphaned, onActivate: () => ui8({ 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(TextButton4, { onClick: () => ui8({ 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) => ui8({ kind: "replyDraft", value }), onKeyDown: (e) => ui8({ kind: "replyKey", id: t.id, key: e.key, shift: e.shiftKey }) }),
+      /* @__PURE__ */ jsx10(TextButton4, { onClick: () => ui8({ kind: "reply", id: t.id }), children: "Send" })
+    ] }) : null,
+    t.idle ? /* @__PURE__ */ jsxs9(Stack4, { direction: "row", gap: 6, pad: "none", children: [
+      /* @__PURE__ */ jsx10(TextButton4, { onClick: () => ui8({ kind: "startReply", id: t.id }), children: "Reply" }),
+      /* @__PURE__ */ jsx10(TextButton4, { onClick: () => ui8({ kind: "resolve", id: t.id, resolved: t.resolveTo }), children: t.resolveLabel }),
+      /* @__PURE__ */ jsx10(TextButton4, { onClick: () => ui8({ kind: "remove", id: t.id }), children: "Delete" })
+    ] }) : null
+  ] }, t.id);
+  return /* @__PURE__ */ jsxs9(Column6, { children: [
     /* @__PURE__ */ jsx10(
       Toolbar5,
       {
-        left: /* @__PURE__ */ jsx10(
-          SegmentedControl2,
-          {
-            label: "Show",
-            value: state.filter.show ?? "open",
-            onChange: (value) => controller.setFilter({ show: value }),
-            options: [
-              { label: "Open", value: "open" },
-              { label: "Resolved", value: "resolved" },
-              { label: "All", value: "all" }
-            ]
-          }
-        ),
-        right: /* @__PURE__ */ jsx10(ToolbarGroup3, { end: true, children: /* @__PURE__ */ jsx10(
-          SegmentedControl2,
-          {
-            label: "Sort",
-            value: state.sort,
-            onChange: (value) => controller.setSort(value),
-            options: [
-              { label: "Doc", value: "document" },
-              { label: "New", value: "newest" },
-              { label: "Old", value: "oldest" }
-            ]
-          }
-        ) })
+        left: /* @__PURE__ */ jsx10(SegmentedControl2, { label: "Show", options: view.shows, value: view.show, onChange: (show) => ui8({ kind: "show", show }) }),
+        right: /* @__PURE__ */ jsx10(ToolbarGroup3, { end: true, children: /* @__PURE__ */ jsx10(SegmentedControl2, { label: "Sort", options: view.sorts, value: view.sort, onChange: (sort) => ui8({ kind: "sort", sort }) }) })
       }
     ),
-    state.totals.orphaned > 0 ? /* @__PURE__ */ jsxs9("div", { style: { padding: "2px 8px", fontSize: 9, opacity: 0.6 }, children: [
-      state.totals.orphaned,
-      " comment",
-      state.totals.orphaned === 1 ? "" : "s",
-      " lost the content",
-      state.totals.orphaned === 1 ? " it was" : " they were",
-      " about.",
-      state.filter.includeOrphaned === false ? /* @__PURE__ */ jsx10(TextButton4, { onClick: () => controller.setFilter({ includeOrphaned: true }), children: "Show" }) : null
+    view.orphanedNotice ? /* @__PURE__ */ jsxs9(Note, { children: [
+      view.orphanedNotice,
+      view.orphanedHidden ? /* @__PURE__ */ jsx10(TextButton4, { onClick: () => ui8({ kind: "showOrphaned" }), children: "Show" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx10(ScrollArea5, { children: state.threads.length === 0 ? state.filteredEmpty ? (
-      // NOT "no comments". There are comments; this filter hides them, and telling a
-      // reviewer their feedback is gone is worse than telling them nothing.
-      /* @__PURE__ */ jsx10(
-        EmptyState6,
-        {
-          title: "Nothing matches this filter",
-          hint: `${state.totals.all} comment${state.totals.all === 1 ? "" : "s"} on this document.`
-        }
-      )
-    ) : /* @__PURE__ */ jsx10(
-      EmptyState6,
-      {
-        title: "No comments",
-        hint: emptyHint ?? "Select something and add a comment."
-      }
-    ) : /* @__PURE__ */ jsxs9(Fragment7, { children: [
-      open.map((view) => /* @__PURE__ */ jsx10(
-        ThreadCard,
-        {
-          view,
-          controller,
-          allowReactions,
-          now
-        },
-        view.thread.id
-      )),
-      showResolved && resolved.length > 0 ? /* @__PURE__ */ jsx10(Section4, { title: `Resolved (${resolved.length})`, flush: true, children: resolved.map((view) => /* @__PURE__ */ jsx10(
-        ThreadCard,
-        {
-          view,
-          controller,
-          allowReactions,
-          now
-        },
-        view.thread.id
-      )) }) : null
-    ] }) }),
-    /* @__PURE__ */ jsxs9("div", { style: { borderTop: "1px solid var(--xeno-border-subtle)", padding: 6 }, children: [
-      /* @__PURE__ */ jsx10(
-        "textarea",
-        {
-          value: state.draft,
-          onChange: (event) => controller.setDraft(event.target.value),
-          onKeyDown: (event) => {
-            if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
-              event.preventDefault();
-              controller.create();
-            }
-          },
-          placeholder: state.activeAnchor === null ? "Select something in the document to comment on it" : "Add a comment\u2026",
-          disabled: state.activeAnchor === null,
-          rows: 2,
-          style: {
-            width: "100%",
-            fontSize: 11,
-            background: "var(--xeno-canvas)",
-            border: "1px solid var(--xeno-border)",
-            borderRadius: 2,
-            padding: 4,
-            color: "inherit",
-            outline: "none",
-            resize: "none",
-            opacity: state.activeAnchor === null ? 0.5 : 1
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx10("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 2 }, children: /* @__PURE__ */ jsx10(
-        TextButton4,
-        {
-          strong: true,
-          disabled: state.activeAnchor === null || state.draft.trim() === "",
-          onClick: () => controller.create(),
-          children: "Comment"
-        }
-      ) })
+    /* @__PURE__ */ jsxs9(ScrollArea5, { children: [
+      view.filteredEmpty ? /* @__PURE__ */ jsx10(EmptyState6, { title: "Nothing matches this filter", hint: view.filteredHint }) : null,
+      view.empty ? /* @__PURE__ */ jsx10(EmptyState6, { title: "No comments", hint: view.emptyHint }) : null,
+      view.open.map(card),
+      view.hasResolved ? /* @__PURE__ */ jsx10(Section4, { title: view.resolvedTitle, flush: true, children: view.resolved.map(card) }) : null
     ] }),
-    /* @__PURE__ */ jsx10(
-      StatusBar6,
-      {
-        left: `${state.totals.open} open`,
-        right: state.totals.stale > 0 ? `${state.totals.stale} edited` : void 0
-      }
-    )
+    /* @__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) => ui8({ kind: "draft", value }), onKeyDown: (e) => ui8({ 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(TextButton4, { strong: true, disabled: view.commentDisabled, onClick: () => ui8({ kind: "create" }), children: "Comment" }) }) })
+    ] }),
+    /* @__PURE__ */ jsx10(StatusBar6, { left: view.countLabel, right: view.staleLabel })
   ] });
 }
 
@@ -11773,7 +11783,7 @@ 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 { Fragment as Fragment8, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+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 }) {
@@ -11996,7 +12006,7 @@ function NodeRect({ node, selected, zoom }) {
         children: node.title
       }
     ),
-    node.collapsed ? null : /* @__PURE__ */ jsxs10(Fragment8, { children: [
+    node.collapsed ? null : /* @__PURE__ */ jsxs10(Fragment7, { children: [
       node.inputs.map((port, i) => /* @__PURE__ */ jsx11(
         Port,
         {
@@ -12307,6 +12317,8 @@ var TreeController = class {
   mode;
   renaming = null;
   drag = null;
+  /** The scroller's measured viewport — the view state windows the rows from it (`tree/Scroller` reports it). */
+  viewport = { height: 0, scrollTop: 0 };
   /** Newest outstanding load request PER NODE. Anything else that arrives is stale. */
   outstanding = /* @__PURE__ */ new Map();
   /** Type-ahead buffer + the time it was last touched. */
@@ -12356,6 +12368,20 @@ var TreeController = class {
     this.rowCache = null;
     for (const listener of this.listeners) listener();
   }
+  /* ── Viewport ──────────────────────────────────────────────────────────── */
+  /** The scroller reports its viewport; the view state windows the rows from it. */
+  setViewport(height, scrollTop) {
+    if (this.viewport.height === height && this.viewport.scrollTop === scrollTop) return;
+    this.viewport = { height, scrollTop };
+    this.notify();
+  }
+  getViewport() {
+    return this.viewport;
+  }
+  /** The fixed row height the virtualizer and the drop resolver share. */
+  getRowHeight() {
+    return this.rowHeight;
+  }
   /* ── Rows ──────────────────────────────────────────────────────────────── */
   /** The visible rows, flattened through the shared engine. */
   rows() {
@@ -12729,12 +12755,12 @@ var TreeController = class {
     }
     if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
       const fresh = now - this.typeAhead.at > this.typeAheadMs;
-      const text6 = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
-      this.typeAhead = { text: text6, at: now };
+      const text8 = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
+      this.typeAhead = { text: text8, 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(text6)) {
+        if (candidate.node.label.toLowerCase().startsWith(text8)) {
           this.focusedId = candidate.id;
           this.select([candidate.id]);
           return true;
@@ -12760,9 +12786,9 @@ var TreeController = class {
     return true;
   }
   /** Update the rename draft. */
-  updateRenameDraft(text6) {
+  updateRenameDraft(text8) {
     if (!this.renaming) return;
-    this.renaming = { ...this.renaming, draft: text6 };
+    this.renaming = { ...this.renaming, draft: text8 };
     this.notify();
   }
   /**
@@ -13299,331 +13325,474 @@ var treeManifest = {
 };
 
 // src/edit/tree/react/TreePanelView.tsx
-import { useCallback as useCallback8, useEffect as useEffect8, useRef as useRef9, useState as useState2, useSyncExternalStore as useSyncExternalStore10 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect8, useRef as useRef9, useSyncExternalStore as useSyncExternalStore10 } from "react";
 import {
   Badge as Badge7,
+  Column as Column7,
   EmptyState as EmptyState8,
   ErrorState,
   IconButton as IconButton7,
+  Input as Input5,
   LoadingState,
   Row as Row4,
+  RowList as RowList4,
   ScrollArea as ScrollArea6,
   SearchField as SearchField5,
   StatusBar as StatusBar8,
+  Text as Text7,
+  TextButton as TextButton5,
   Toolbar as Toolbar7,
-  ToolbarGroup as ToolbarGroup5
+  ToolbarGroup as ToolbarGroup5,
+  VirtualWindow as VirtualWindow3
 } from "@xenosystem/components/chrome";
+
+// src/edit/tree/declaration.ts
 import { computeWindow as computeWindow3 } from "@xenosystem/tree-core";
-import { Fragment as Fragment9, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
-function TreePanelView({
-  controller,
-  rowHeight = 24,
-  indentPx = 14,
-  overscan = 6,
-  showSearch = true,
-  openOn = "double",
-  columns,
-  emptyHint
-}) {
-  const state = useSyncExternalStore10(controller.subscribe, controller.getState, controller.getState);
-  const scrollRef = useRef9(null);
-  const [viewport, setViewport] = useState2({ height: 0, scrollTop: 0 });
-  useEffect8(() => {
-    const element = scrollRef.current;
-    if (!element || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(() => {
-      setViewport((v) => ({ ...v, height: element.clientHeight }));
-    });
-    observer.observe(element);
-    setViewport((v) => ({ ...v, height: element.clientHeight }));
-    return () => observer.disconnect();
-  }, []);
-  const onScroll = useCallback8((event) => {
-    const el = event.currentTarget;
-    setViewport((v) => ({ ...v, scrollTop: el.scrollTop }));
-  }, []);
+var iconHalf = (icon) => icon.kind === "text" ? { iconName: null, iconText: icon.value } : { iconName: icon.name, iconText: null };
+function treeViewState(c, options = {}) {
+  const { overscan = 6, showSearch = true, columns, emptyHint } = options;
+  const state = c.getState();
   const source = state.source;
   const sourceState = source?.sourceState ?? "idle";
-  const body = (() => {
-    if (!source || sourceState === "idle") {
-      return /* @__PURE__ */ jsx12(EmptyState8, { title: "No source", hint: emptyHint ?? "Connect a source to browse it." });
+  const rowHeight = c.getRowHeight();
+  const viewport = c.getViewport();
+  const noSource = !source || sourceState === "idle";
+  const loading = !noSource && sourceState === "loading" && state.rows.length === 0;
+  const failed = !noSource && (sourceState === "error" || sourceState === "denied");
+  const denied = sourceState === "denied";
+  const bare = !noSource && !loading && !failed && state.rows.length === 0;
+  const noMatches = bare && state.filter !== "";
+  const emptyTree = bare && state.filter === "";
+  const listShown = !noSource && !loading && !failed && state.rows.length > 0;
+  const window_ = computeWindow3({
+    scrollTop: viewport.scrollTop,
+    viewportHeight: viewport.height || rowHeight * 24,
+    rowHeight,
+    rowCount: state.rows.length,
+    overscan
+  });
+  const drag = state.drag;
+  const renaming = state.renaming;
+  const rows = listShown ? state.rows.slice(window_.startIndex, window_.endIndex).map((row2) => {
+    const node = row2.node;
+    const drop = drag?.targetId === row2.id ? drag : null;
+    const error = node.error;
+    const chipLoading = row2.container && row2.childState === "loading";
+    const chipError = row2.container && !chipLoading && row2.childState === "error";
+    const chipLoadMore = row2.container && !chipLoading && !chipError && !!node.hasMore && row2.expanded;
+    const chipTruncated = row2.container && !chipLoading && !chipError && !chipLoadMore && node.truncatedAt !== void 0;
+    const chipEmpty = row2.container && !chipLoading && !chipError && !chipLoadMore && !chipTruncated && row2.expanded && isEmptyContainer(node);
+    return {
+      id: row2.id,
+      label: node.label,
+      depth: row2.depth,
+      level: row2.depth + 1,
+      height: rowHeight,
+      selected: state.selection.includes(row2.id),
+      disabled: node.caps?.select === false,
+      expanded: row2.container ? row2.expanded : void 0,
+      dropHint: drop?.position ?? null,
+      dropTitle: drop?.reason,
+      renaming: renaming?.id === row2.id,
+      draft: renaming?.id === row2.id ? renaming.draft : "",
+      ...iconHalf(node.icon ?? defaultIconFor(node.kind)),
+      chipLoading,
+      chipError,
+      // The host's own sentence — never a regex over a message to guess the cause.
+      chipErrorText: error?.code === "denied" ? "no access" : error?.code ?? "failed",
+      chipLoadMore,
+      chipTruncated,
+      chipTruncatedText: `first ${node.truncatedAt ?? 0}`,
+      chipEmpty,
+      columns: (columns ?? []).map((key) => ({ key, text: node.columns?.[key] ?? "" })),
+      glyphs: (node.glyphs ?? []).map((g) => ({ key: g.id, title: g.title, ...iconHalf(g.icon) })),
+      badges: (node.badges ?? []).map((b) => ({ key: b.id, tone: b.tone, text: b.text })),
+      actions: (node.actions ?? []).map((a) => ({ key: a.id, rowId: row2.id, actionId: a.id, label: a.label, disabled: !!a.disabled, ...iconHalf(a.icon) }))
+    };
+  }) : [];
+  const count = state.rows.length;
+  return {
+    searchShown: showSearch,
+    filter: state.filter,
+    noSource,
+    noSourceHint: emptyHint ?? "Connect a source to browse it.",
+    loading,
+    loadingLabel: source?.sourceMessage ?? "Loading\u2026",
+    failed,
+    failedTitle: denied ? "Access not granted" : "Could not read this source",
+    // The HOST's sentence, verbatim. The panel never composes error prose.
+    failedMessage: source?.sourceMessage,
+    retryLabel: denied ? "Grant access" : "Retry",
+    denied,
+    noMatches,
+    noMatchesHint: `Nothing matches \u201C${state.filter}\u201D.`,
+    emptyTree,
+    emptyHint: emptyHint ?? source?.sourceMessage ?? "This source has no items yet.",
+    listShown,
+    totalHeight: window_.totalHeight,
+    offsetTop: window_.offsetTop,
+    rows,
+    countLabel: `${count} item${count === 1 ? "" : "s"}`,
+    selectedLabel: state.selection.length > 0 ? `${state.selection.length} selected` : void 0
+  };
+}
+function applyTreeUi(c, intent, options = {}) {
+  switch (intent.kind) {
+    case "filter":
+      c.setFilter(intent.value);
+      break;
+    case "expandAll":
+      c.expandAll();
+      break;
+    case "collapseAll":
+      c.collapseAll();
+      break;
+    case "refresh":
+      c.refresh();
+      break;
+    case "retry": {
+      if (c.getState().source?.sourceState === "denied") c.requestConsent(void 0, "source denied");
+      else c.refresh();
+      break;
     }
-    if (sourceState === "loading" && state.rows.length === 0) {
-      return /* @__PURE__ */ jsx12(LoadingState, { label: source.sourceMessage ?? "Loading\u2026" });
+    case "toggleExpanded": {
+      const row2 = c.getState().rows.find((r) => r.id === intent.id);
+      if (row2) c.setExpanded(intent.id, !row2.expanded);
+      break;
     }
-    if (sourceState === "error" || sourceState === "denied") {
-      return /* @__PURE__ */ jsx12(
-        ErrorState,
-        {
-          title: sourceState === "denied" ? "Access not granted" : "Could not read this source",
-          message: source.sourceMessage,
-          onRetry: sourceState === "denied" ? () => controller.requestConsent(void 0, "source denied") : () => controller.refresh(),
-          retryLabel: sourceState === "denied" ? "Grant access" : "Retry"
-        }
-      );
+    case "click": {
+      c.select([intent.id], { toggle: !!intent.ctrlKey || !!intent.metaKey, range: !!intent.shiftKey });
+      if ((options.openOn ?? "double") === "single") c.open(intent.id, { alt: !!intent.altKey });
+      break;
     }
-    if (state.rows.length === 0) {
-      return state.filter ? /* @__PURE__ */ jsx12(EmptyState8, { title: "No matches", hint: `Nothing matches \u201C${state.filter}\u201D.` }) : /* @__PURE__ */ jsx12(
-        EmptyState8,
-        {
-          title: "Nothing here",
-          hint: emptyHint ?? source.sourceMessage ?? "This source has no items yet."
-        }
-      );
+    case "doubleClick":
+      if ((options.openOn ?? "double") === "double") c.open(intent.id);
+      break;
+    case "contextMenu": {
+      const state = c.getState();
+      c.requestContextMenu(state.selection.includes(intent.id) ? state.selection : [intent.id], intent.x, intent.y);
+      break;
     }
-    const window2 = computeWindow3({
-      scrollTop: viewport.scrollTop,
-      viewportHeight: viewport.height || rowHeight * 24,
-      rowHeight,
-      rowCount: state.rows.length,
-      overscan
-    });
-    const slice = state.rows.slice(window2.startIndex, window2.endIndex);
-    return /* @__PURE__ */ jsx12(ScrollArea6, { children: /* @__PURE__ */ jsx12(
-      "div",
+    case "loadMore":
+      c.loadMore(intent.id);
+      break;
+    case "action":
+      c.runAction(intent.id, intent.actionId);
+      break;
+    case "renameDraft":
+      c.updateRenameDraft(intent.value);
+      break;
+    case "renameKey": {
+      if (intent.key === "Enter") c.commitRename();
+      else if (intent.key === "Escape") c.cancelRename();
+      break;
+    }
+    case "commitRename":
+      c.commitRename();
+      break;
+  }
+}
+var treeViewManifest = {
+  id: treeManifest.id,
+  version: "1.0.0",
+  title: "Tree",
+  category: "edit",
+  layout: { slot: "side" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The TreeViewModel the runtime derives from the controller on every draw." }],
+  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 EMPTY7 = {
+  searchShown: true,
+  filter: "",
+  noSource: true,
+  noSourceHint: "Connect a source to browse it.",
+  loading: false,
+  loadingLabel: "Loading\u2026",
+  failed: false,
+  failedTitle: "",
+  retryLabel: "Retry",
+  denied: false,
+  noMatches: false,
+  noMatchesHint: "",
+  emptyTree: false,
+  emptyHint: "",
+  listShown: false,
+  totalHeight: 0,
+  offsetTop: 0,
+  rows: [],
+  countLabel: "0 items"
+};
+var BEHAVIOURS7 = {
+  "edit/treePanelView": (inputs) => inputs.view ?? EMPTY7
+};
+var text7 = (b) => ({ component: "text", props: { text: b } });
+var ui7 = (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: [text7({ item: "iconText" })] }
+  ]
+});
+var TREE_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: treeViewManifest,
+  behaviour: "edit/treePanelView",
+  composition: {
+    component: "chrome/Column",
+    children: [
       {
-        ref: scrollRef,
-        onScroll,
-        style: { height: "100%", overflow: "auto" },
-        role: "tree",
-        "aria-multiselectable": true,
-        tabIndex: 0,
-        onKeyDown: (e) => {
-          if (controller.handleKey({ key: e.key, shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey, altKey: e.altKey })) {
-            e.preventDefault();
+        component: "chrome/Toolbar",
+        props: {
+          left: { node: { component: "chrome/SearchField", when: { input: "view.searchShown" }, props: { value: { input: "view.filter" }, placeholder: { value: "Filter\u2026" } }, on: { onChange: ui7("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: ui7("expandAll") } },
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Collapse" } }, label: { value: "Collapse all" } }, on: { onClick: ui7("collapseAll") } },
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Refresh" } }, label: { value: "Refresh" } }, on: { onClick: ui7("refresh") } }
+              ]
+            }
           }
-        },
-        children: /* @__PURE__ */ jsx12("div", { style: { height: window2.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx12("div", { style: { transform: `translateY(${window2.offsetTop}px)` }, children: slice.map((row2) => /* @__PURE__ */ jsx12(
-          TreeRowView,
+        }
+      },
+      { 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: ui7("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" } } },
+      {
+        component: "tree/Scroller",
+        when: { input: "view.listShown" },
+        children: [
           {
-            row: row2,
-            controller,
-            state,
-            rowHeight,
-            indentPx,
-            openOn,
-            columns
-          },
-          row2.id
-        )) }) })
+            component: "chrome/RowList",
+            props: { role: { value: "tree" }, "aria-label": { value: "Tree" }, "aria-multiselectable": { value: true } },
+            children: [
+              {
+                component: "chrome/VirtualWindow",
+                props: { totalHeight: { input: "view.totalHeight" }, offsetTop: { input: "view.offsetTop" } },
+                children: [
+                  {
+                    component: "chrome/Row",
+                    each: { input: "view.rows", key: "id" },
+                    props: {
+                      "data-tree-row": { item: "id" },
+                      "aria-level": { item: "level" },
+                      height: { item: "height" },
+                      depth: { item: "depth" },
+                      selected: { item: "selected" },
+                      disabled: { item: "disabled" },
+                      expanded: { item: "expanded" },
+                      dropHint: { item: "dropHint" },
+                      title: { item: "dropTitle" },
+                      icon: { node: nodeIcon() },
+                      label: {
+                        node: {
+                          component: "fragment",
+                          children: [
+                            { component: "chrome/Input", when: { item: "renaming" }, props: { autoFocus: { value: true }, value: { item: "draft" }, label: { value: "Name" } }, on: { onChange: ui7("renameDraft", { value: { arg: "" } }), onBlur: ui7("commitRename"), onKeyDown: ui7("renameKey", { key: { arg: "key" } }) } },
+                            { component: "text", when: { not: { item: "renaming" } }, props: { text: { item: "label" } } }
+                          ]
+                        }
+                      },
+                      meta: {
+                        node: {
+                          component: "fragment",
+                          children: [
+                            { component: "chrome/Text", when: { item: "chipLoading" }, props: { role: { value: "caption" } }, children: [text7({ value: "loading\u2026" })] },
+                            { component: "chrome/Badge", when: { item: "chipError" }, props: { tone: { value: "error" } }, children: [text7({ item: "chipErrorText" })] },
+                            { component: "chrome/TextButton", when: { item: "chipLoadMore" }, children: [text7({ value: "load more\u2026" })], on: { onClick: ui7("loadMore", { id: { item: "id" } }) } },
+                            { component: "chrome/Badge", when: { item: "chipTruncated" }, props: { tone: { value: "warning" } }, children: [text7({ item: "chipTruncatedText" })] },
+                            { component: "chrome/Text", when: { item: "chipEmpty" }, props: { role: { value: "caption" } }, children: [text7({ value: "empty" })] }
+                          ]
+                        }
+                      },
+                      trailing: {
+                        node: {
+                          component: "fragment",
+                          children: [
+                            { component: "chrome/Text", each: { item: "columns", key: "key" }, props: { role: { value: "number" } }, children: [text7({ 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: [text7({ 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: ui7("action", { id: { item: "rowId" }, actionId: { item: "actionId" } }) } }
+                          ]
+                        }
+                      }
+                    },
+                    on: {
+                      onExpandedChange: ui7("toggleExpanded", { id: { item: "id" } }),
+                      onClick: ui7("click", { id: { item: "id" }, ctrlKey: { arg: "ctrlKey" }, metaKey: { arg: "metaKey" }, shiftKey: { arg: "shiftKey" }, altKey: { arg: "altKey" } }),
+                      onDoubleClick: ui7("doubleClick", { id: { item: "id" } }),
+                      onContextMenuAt: ui7("contextMenu", { id: { item: "id" }, x: { arg: "" }, y: { arg: "", index: 1 } })
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        component: "chrome/StatusBar",
+        props: {
+          left: { node: { component: "chrome/Text", props: { role: { value: "number" } }, children: [text7({ input: "view.countLabel" })] } },
+          right: { node: { component: "chrome/Text", when: { input: "view.selectedLabel" }, props: { role: { value: "meta" } }, children: [text7({ input: "view.selectedLabel" })] } }
+        }
       }
-    ) });
-  })();
-  return /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
+    ]
+  }
+};
+
+// src/edit/tree/react/TreePanelView.tsx
+import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var DRAG_THRESHOLD2 = 4;
+function TreePanelView({ controller, ...options }) {
+  useSyncExternalStore10(controller.subscribe, controller.getState, controller.getState);
+  const view = treeViewState(controller, options);
+  const ui8 = (intent) => applyTreeUi(controller, intent, options);
+  const icon = (name, textValue) => /* @__PURE__ */ jsxs11(Fragment8, { children: [
+    name ? /* @__PURE__ */ jsx12(TreeIcon, { name }) : null,
+    textValue ? /* @__PURE__ */ jsx12(Text7, { role: "caption", children: textValue }) : null
+  ] });
+  const row2 = (r) => /* @__PURE__ */ jsx12(
+    Row4,
+    {
+      "data-tree-row": r.id,
+      "aria-level": r.level,
+      height: r.height,
+      depth: r.depth,
+      selected: r.selected,
+      disabled: r.disabled,
+      expanded: r.expanded,
+      dropHint: r.dropHint,
+      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) => ui8({ kind: "renameDraft", value }), onBlur: () => ui8({ kind: "commitRename" }), onKeyDown: (e) => ui8({ kind: "renameKey", key: e.key }) }) : null,
+        !r.renaming ? r.label : null
+      ] }),
+      meta: /* @__PURE__ */ jsxs11(Fragment8, { children: [
+        r.chipLoading ? /* @__PURE__ */ jsx12(Text7, { role: "caption", children: "loading\u2026" }) : null,
+        r.chipError ? /* @__PURE__ */ jsx12(Badge7, { tone: "error", children: r.chipErrorText }) : null,
+        r.chipLoadMore ? /* @__PURE__ */ jsx12(TextButton5, { onClick: () => ui8({ 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(Text7, { role: "caption", children: "empty" }) : null
+      ] }),
+      trailing: /* @__PURE__ */ jsxs11(Fragment8, { children: [
+        r.columns.map((c) => /* @__PURE__ */ jsx12(Text7, { role: "number", children: c.text }, c.key)),
+        r.glyphs.map((g) => /* @__PURE__ */ jsx12(Text7, { 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: () => ui8({ kind: "action", id: a.rowId, actionId: a.actionId }) }, a.key))
+      ] }),
+      onExpandedChange: () => ui8({ kind: "toggleExpanded", id: r.id }),
+      onClick: (e) => ui8({ kind: "click", id: r.id, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey, altKey: e.altKey }),
+      onDoubleClick: () => ui8({ kind: "doubleClick", id: r.id }),
+      onContextMenuAt: (x, y) => ui8({ kind: "contextMenu", id: r.id, x, y })
+    },
+    r.id
+  );
+  return /* @__PURE__ */ jsxs11(Column7, { children: [
     /* @__PURE__ */ jsx12(
       Toolbar7,
       {
-        left: showSearch ? /* @__PURE__ */ jsx12(
-          SearchField5,
-          {
-            value: state.filter,
-            onChange: (term) => controller.setFilter(term),
-            placeholder: "Filter\u2026"
-          }
-        ) : void 0,
+        left: view.searchShown ? /* @__PURE__ */ jsx12(SearchField5, { value: view.filter, placeholder: "Filter\u2026", onChange: (value) => ui8({ kind: "filter", value }) }) : null,
         right: /* @__PURE__ */ jsxs11(ToolbarGroup5, { end: true, children: [
-          /* @__PURE__ */ jsx12(IconButton7, { icon: /* @__PURE__ */ jsx12(ExpandGlyph, {}), label: "Expand all", onClick: () => controller.expandAll() }),
-          /* @__PURE__ */ jsx12(
-            IconButton7,
-            {
-              icon: /* @__PURE__ */ jsx12(CollapseGlyph, {}),
-              label: "Collapse all",
-              onClick: () => controller.collapseAll()
-            }
-          ),
-          /* @__PURE__ */ jsx12(IconButton7, { icon: /* @__PURE__ */ jsx12(RefreshGlyph, {}), label: "Refresh", onClick: () => controller.refresh() })
+          /* @__PURE__ */ jsx12(IconButton7, { icon: /* @__PURE__ */ jsx12(ExpandGlyph, {}), label: "Expand all", onClick: () => ui8({ kind: "expandAll" }) }),
+          /* @__PURE__ */ jsx12(IconButton7, { icon: /* @__PURE__ */ jsx12(CollapseGlyph, {}), label: "Collapse all", onClick: () => ui8({ kind: "collapseAll" }) }),
+          /* @__PURE__ */ jsx12(IconButton7, { icon: /* @__PURE__ */ jsx12(RefreshGlyph, {}), label: "Refresh", onClick: () => ui8({ kind: "refresh" }) })
         ] })
       }
     ),
-    body,
-    /* @__PURE__ */ jsx12(
-      StatusBar8,
-      {
-        left: `${state.rows.length} item${state.rows.length === 1 ? "" : "s"}`,
-        right: state.selection.length > 0 ? `${state.selection.length} selected` : void 0
-      }
-    )
+    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: () => ui8({ 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(Text7, { role: "number", children: view.countLabel }), right: view.selectedLabel ? /* @__PURE__ */ jsx12(Text7, { role: "meta", children: view.selectedLabel }) : null })
   ] });
 }
-function TreeRowView({
-  row: row2,
-  controller,
-  state,
-  rowHeight,
-  indentPx,
-  openOn,
-  columns
-}) {
-  const node = row2.node;
-  const selected = state.selection.includes(row2.id);
-  const renaming = state.renaming?.id === row2.id ? state.renaming : null;
-  const drop = state.drag?.targetId === row2.id ? state.drag : null;
-  const twisty = row2.container ? /* @__PURE__ */ jsx12(
-    "span",
-    {
-      role: "button",
-      "aria-label": row2.expanded ? "Collapse" : "Expand",
-      onClick: (e) => {
-        e.stopPropagation();
-        controller.setExpanded(row2.id, !row2.expanded);
-      },
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: 12,
-        flex: "0 0 auto",
-        cursor: "pointer",
-        transform: row2.expanded ? "rotate(90deg)" : void 0,
-        transition: "transform 80ms ease",
-        opacity: 0.7
-      },
-      children: /* @__PURE__ */ jsx12(ChevronGlyph, { size: 9 })
-    }
-  ) : (
-    // A leaf still reserves the twisty column, so labels stay in ONE column across mixed rows.
-    /* @__PURE__ */ jsx12("span", { style: { width: 12, flex: "0 0 auto" } })
+function TreeScroller({ controller, children }) {
+  const scrollRef = useRef9(null);
+  const pressRef = useRef9(null);
+  useEffect8(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    controller.setViewport(el.clientHeight, el.scrollTop);
+    const RO = globalThis.ResizeObserver;
+    if (!RO) return;
+    const ro = new RO(() => controller.setViewport(el.clientHeight, el.scrollTop));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [controller]);
+  const onScroll = useCallback8((e) => controller.setViewport(e.currentTarget.clientHeight, e.currentTarget.scrollTop), [controller]);
+  const rowFromPoint = useCallback8((clientX, clientY) => {
+    const el = document.elementFromPoint(clientX, clientY);
+    const rowEl = el?.closest?.("[data-tree-row]");
+    const id = rowEl?.getAttribute("data-tree-row");
+    if (!rowEl || !id) return null;
+    return { id, offsetY: clientY - rowEl.getBoundingClientRect().top };
+  }, []);
+  const onPointerDown = useCallback8(
+    (e) => {
+      if (e.button !== 0) return;
+      const target = e.target;
+      if (target?.closest?.("button,input")) return;
+      const id = target?.closest?.("[data-tree-row]")?.getAttribute("data-tree-row");
+      if (!id) return;
+      const selection = controller.getState().selection;
+      pressRef.current = { ids: selection.includes(id) ? selection : [id], x: e.clientX, y: e.clientY, dragging: false };
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [controller]
   );
-  return /* @__PURE__ */ jsx12(
-    "div",
-    {
-      style: {
-        position: "relative",
-        // The drop indicator is drawn on the row, not inserted into the list: inserting a
-        // placeholder row would change the flatten mid-drag and move the target out from under
-        // the pointer.
-        boxShadow: drop?.position === "into" ? "inset 0 0 0 1px var(--xeno-active)" : drop?.position === "before" ? "inset 0 1px 0 0 var(--xeno-active)" : drop?.position === "after" ? "inset 0 -1px 0 0 var(--xeno-active)" : void 0
-      },
-      title: drop?.reason,
-      children: /* @__PURE__ */ jsx12(
-        Row4,
-        {
-          role: "treeitem",
-          "aria-expanded": row2.container ? row2.expanded : void 0,
-          "aria-level": row2.depth + 1,
-          selected,
-          disabled: node.caps?.select === false,
-          depth: 0,
-          style: { height: rowHeight, paddingLeft: 6 + row2.depth * indentPx },
-          onClick: (e) => {
-            controller.select([row2.id], {
-              toggle: e.ctrlKey || e.metaKey,
-              range: e.shiftKey
-            });
-            if (openOn === "single") controller.open(row2.id, { alt: e.altKey });
-          },
-          onDoubleClick: () => {
-            if (openOn === "double") controller.open(row2.id);
-          },
-          onContextMenu: (e) => {
-            e.preventDefault();
-            controller.requestContextMenu(selected ? state.selection : [row2.id], e.clientX, e.clientY);
-          },
-          onPointerDown: (e) => {
-            if (e.button !== 0) return;
-            controller.beginDrag(selected ? state.selection : [row2.id]);
-          },
-          onPointerMove: (e) => {
-            if (!state.drag) return;
-            const rect = e.currentTarget.getBoundingClientRect();
-            controller.dragOver(row2.id, e.clientY - rect.top);
-          },
-          onPointerUp: () => {
-            if (state.drag) controller.endDrag();
-          },
-          icon: /* @__PURE__ */ jsxs11(Fragment9, { children: [
-            twisty,
-            /* @__PURE__ */ jsx12(NodeIcon, { icon: node.icon ?? defaultIconFor(node.kind) })
-          ] }),
-          label: renaming ? /* @__PURE__ */ jsx12(
-            "input",
-            {
-              autoFocus: true,
-              value: renaming.draft,
-              onChange: (e) => controller.updateRenameDraft(e.target.value),
-              onBlur: () => controller.commitRename(),
-              onFocus: (e) => e.currentTarget.select(),
-              onClick: (e) => e.stopPropagation(),
-              onKeyDown: (e) => {
-                e.stopPropagation();
-                if (e.key === "Enter") controller.commitRename();
-                else if (e.key === "Escape") controller.cancelRename();
-              },
-              style: {
-                width: "100%",
-                border: "none",
-                outline: "none",
-                background: "var(--xeno-canvas)",
-                color: "inherit",
-                font: "inherit",
-                padding: 0
-              }
-            }
-          ) : node.label,
-          meta: /* @__PURE__ */ jsx12(ChildStateChip, { row: row2, controller }),
-          trailing: /* @__PURE__ */ jsxs11(Fragment9, { children: [
-            columns?.map((columnId) => /* @__PURE__ */ jsx12("span", { style: { opacity: 0.7, fontVariantNumeric: "tabular-nums" }, children: node.columns?.[columnId] ?? "" }, columnId)),
-            node.glyphs?.map((glyph) => /* @__PURE__ */ jsx12("span", { title: glyph.title, style: { display: "flex", opacity: 0.7 }, children: /* @__PURE__ */ jsx12(NodeIcon, { icon: glyph.icon }) }, glyph.id)),
-            node.badges?.map((badge) => (
-              // Opaque: the host formatted the text, the panel only places it.
-              /* @__PURE__ */ jsx12(Badge7, { tone: badge.tone, className: badge.title ? void 0 : void 0, children: badge.text }, badge.id)
-            )),
-            node.actions?.map((action) => /* @__PURE__ */ jsx12(
-              IconButton7,
-              {
-                size: "sm",
-                icon: /* @__PURE__ */ jsx12(NodeIcon, { icon: action.icon }),
-                label: action.label,
-                disabled: action.disabled,
-                onClick: () => controller.runAction(row2.id, action.id)
-              },
-              action.id
-            ))
-          ] })
-        }
-      )
-    }
+  const onPointerMove = useCallback8(
+    (e) => {
+      const press = pressRef.current;
+      if (!press) return;
+      if (!press.dragging) {
+        if (Math.abs(e.clientX - press.x) + Math.abs(e.clientY - press.y) < DRAG_THRESHOLD2) return;
+        press.dragging = true;
+        controller.beginDrag(press.ids);
+      }
+      const hit = rowFromPoint(e.clientX, e.clientY);
+      if (hit) controller.dragOver(hit.id, hit.offsetY);
+    },
+    [controller, rowFromPoint]
   );
-}
-function ChildStateChip({
-  row: row2,
-  controller
-}) {
-  if (!row2.container) return null;
-  if (row2.childState === "loading") {
-    return /* @__PURE__ */ jsx12("span", { style: { opacity: 0.5, fontSize: 9 }, children: "loading\u2026" });
-  }
-  if (row2.childState === "error") {
-    const error = row2.node.error;
-    return /* @__PURE__ */ jsx12(Badge7, { tone: "error", children: error?.code === "denied" ? "no access" : error?.code ?? "failed" });
-  }
-  if (row2.node.hasMore && row2.expanded) {
-    return /* @__PURE__ */ jsx12(
-      "span",
-      {
-        role: "button",
-        onClick: (e) => {
-          e.stopPropagation();
-          controller.loadMore(row2.id);
-        },
-        style: { cursor: "pointer", opacity: 0.7, fontSize: 9 },
-        children: "load more\u2026"
+  const onPointerUp = useCallback8(
+    (e) => {
+      const press = pressRef.current;
+      pressRef.current = null;
+      try {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      } catch {
       }
-    );
-  }
-  if (row2.node.truncatedAt !== void 0) {
-    return /* @__PURE__ */ jsx12(Badge7, { tone: "warning", children: `first ${row2.node.truncatedAt}` });
-  }
-  if (row2.expanded && isEmptyContainer(row2.node)) {
-    return /* @__PURE__ */ jsx12("span", { style: { opacity: 0.4, fontSize: 9 }, children: "empty" });
-  }
-  return null;
+      if (press?.dragging) controller.endDrag();
+    },
+    [controller]
+  );
+  const onKeyDown = useCallback8(
+    (e) => {
+      if (controller.getState().renaming) return;
+      if (controller.handleKey({ key: e.key, shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey, altKey: e.altKey })) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
+    [controller]
+  );
+  return /* @__PURE__ */ jsx12(ScrollArea6, { ref: scrollRef, onScroll, onKeyDown, onPointerDown, onPointerMove, onPointerUp, tabIndex: 0, children });
 }
-function NodeIcon({ icon }) {
-  if (icon.kind === "text") {
-    return /* @__PURE__ */ jsx12("span", { style: { fontSize: 11, lineHeight: 1, display: "flex", alignItems: "center" }, children: icon.value });
-  }
-  return /* @__PURE__ */ jsx12(TreeIcon, { name: icon.name });
+var TREE_RUNTIME_UNITS = ["tree/Scroller"];
+function treeRuntimeComponents(controller) {
+  return {
+    "tree/Scroller": ({ children }) => /* @__PURE__ */ jsx12(TreeScroller, { controller, children })
+  };
 }
 
 // src/edit/tree/panel.ts
@@ -13832,7 +14001,10 @@ export {
   COLOR_DECLARATION,
   COLOR_RUNTIME_UNITS,
   COLOR_SPACES,
+  BEHAVIOURS6 as COMMENTS_BEHAVIOURS,
+  COMMENTS_DECLARATION,
   COMMENTS_PANEL_ID,
+  COMMENTS_RUNTIME_UNITS,
   CURVE_PANEL_ID,
   ColorPanelController,
   ColorPanelView,
@@ -13881,11 +14053,15 @@ export {
   NODEGRAPH_PANEL_ID,
   NodeGraphPanelView,
   SPACE_LABEL,
+  BEHAVIOURS7 as TREE_BEHAVIOURS,
+  TREE_DECLARATION,
   TREE_PANEL_ID,
+  TREE_RUNTIME_UNITS,
   Thumbnail,
   TreeController,
   TreeIcon,
   TreePanelView,
+  TreeScroller,
   VIEWPORT_PANEL_ID,
   VIEWPORT_SLOTS,
   VIEW_STATE_OPS,
@@ -13899,12 +14075,14 @@ export {
   anchorStateOf,
   appliedCount,
   applyColorUi,
+  applyCommentsUi,
   applyFindUi,
   applyHistoryUi,
   applyInspectorUi,
   applyLayersUi,
   applyPrecision,
   applyTangentDrag,
+  applyTreeUi,
   ariaSliderProps,
   boxesIntersect,
   canConnect,
@@ -13922,6 +14100,8 @@ export {
   colorViewState,
   commentsManifest,
   commentsPanel,
+  commentsViewManifest,
+  commentsViewState,
   commitPolicyOf,
   componentsForSpace,
   computeSurfaceSize,
@@ -14064,6 +14244,9 @@ export {
   totalCount,
   treeManifest,
   treePanel,
+  treeRuntimeComponents,
+  treeViewManifest,
+  treeViewState,
   usesLogScale,
   valueExtent,
   valueToPosition,