@xenosystem/blocks 0.13.16 → 0.13.17

package/dist/edit/index.js

@@ -1488,9 +1488,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 ui7 = (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) => ui7({ 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 +1603,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 ui7 = (intent) => applyLayersUi(controller, intent);
   return /* @__PURE__ */ jsx2(
     Row,
     {
@@ -1618,11 +1618,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: () => ui7({ 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: () => ui7({ kind: "toggleProp", id: row2.id, prop: "locked" }) }) : null,
+        row2.showSolo ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "S", label: "Solo", on: row2.solo, onChange: () => ui7({ kind: "toggleProp", id: row2.id, prop: "solo" }) }) : null,
+        row2.showMute ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "M", label: "Mute", on: row2.muted, onChange: () => ui7({ kind: "toggleProp", id: row2.id, prop: "muted" }) }) : null,
+        row2.showArm ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "R", label: "Arm", on: row2.armed, onChange: () => ui7({ 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 +1630,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: () => ui7({ kind: "toggleExpanded", id: row2.id }),
+      onDoubleClick: () => ui7({ kind: "beginRename", id: row2.id }),
+      onContextMenuAt: (x, y) => ui7({ kind: "contextMenu", id: row2.id, x, y })
     }
   );
 }
@@ -2024,8 +2024,8 @@ function constraintsOf(field) {
     scale: field.scale
   };
 }
-function parseNumeric(text6) {
-  const trimmed = String(text6).trim();
+function parseNumeric(text7) {
+  const trimmed = String(text7).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 +2050,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 text7 = typeof precision === "number" && Number.isFinite(precision) ? value.toFixed(Math.max(0, Math.floor(precision))) : String(value);
+  return field.unit ? `${text7}${field.unit}` : text7;
 }
 function usesLogScale(c) {
   return c.scale === "log" && typeof c.min === "number" && typeof c.max === "number" && c.min > 0 && c.max > c.min;
@@ -2385,44 +2385,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 text7 = mixed ? "" : field.type === "number" && typeof value === "number" ? formatNumeric(value, field) : value === void 0 || value === null ? "" : String(value);
+    this.drafts.set(fieldId, { text: text7, 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, text7) {
     const draft = this.drafts.get(fieldId);
     if (!draft) {
-      this.drafts.set(fieldId, { text: text6, original: this.getFieldValue(fieldId) });
+      this.drafts.set(fieldId, { text: text7, original: this.getFieldValue(fieldId) });
     } else {
-      draft.text = text6;
+      draft.text = text7;
     }
     const field = this.getField(fieldId);
     if (field && commitPolicyOf(field) === "live") {
-      const parsed = this.parseDraft(fieldId, text6);
+      const parsed = this.parseDraft(fieldId, text7);
       if (parsed.ok) this.emitSet(fieldId, parsed.value);
     }
     this.notify();
   }
   /** Parse a draft string into a field-appropriate value. */
-  parseDraft(fieldId, text6) {
+  parseDraft(fieldId, text7) {
     const field = this.getField(fieldId);
     if (!field) return { ok: false };
     if (field.type === "number") {
-      const parsed = parseNumeric(text6);
+      const parsed = parseNumeric(text7);
       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(text7) };
       } catch {
         return { ok: false };
       }
     }
-    return { ok: true, value: text6 };
+    return { ok: true, value: text7 };
   }
   /**
    * Commit the draft (Enter / blur). Invalid input reverts instead of committing garbage.
@@ -3348,7 +3348,7 @@ function NumberWidget({ field, controller, component }) {
     },
     [controller, editable, field.id, component]
   );
-  const text6 = component !== void 0 ? (() => {
+  const text7 = 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 +3360,7 @@ function NumberWidget({ field, controller, component }) {
       Input2,
       {
         inputMode: "decimal",
-        value: text6,
+        value: text7,
         placeholder: mixed ? controller.getMixedPlaceholder() : field.placeholder,
         mixed,
         readOnly: !editable,
@@ -3578,7 +3578,7 @@ function ActionGlyph({ glyph }) {
   return /* @__PURE__ */ jsx4("span", { "aria-hidden": true, children: glyph });
 }
 function SectionView({ section, controller }) {
-  const ui6 = (intent) => applyInspectorUi(controller, intent);
+  const ui7 = (intent) => applyInspectorUi(controller, intent);
   const hasActions = section.actions.length > 0 || section.hasAddMenu;
   return /* @__PURE__ */ jsxs3(
     Section,
@@ -3587,13 +3587,13 @@ function SectionView({ section, controller }) {
       flush: true,
       collapsible: section.collapsible,
       collapsed: section.collapsed,
-      onCollapsedChange: () => ui6({ kind: "toggleSectionCollapsed", sectionId: section.id }),
+      onCollapsedChange: () => ui7({ kind: "toggleSectionCollapsed", sectionId: section.id }),
       enabled: section.enabled,
-      onEnabledChange: () => ui6({ kind: "toggleSectionEnabled", sectionId: section.id }),
+      onEnabledChange: () => ui7({ 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: () => ui7({ 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) => ui7({ 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 +3603,7 @@ function SectionView({ section, controller }) {
   );
 }
 function FieldRow({ row: row2, controller }) {
-  const ui6 = (intent) => applyInspectorUi(controller, intent);
+  const ui7 = (intent) => applyInspectorUi(controller, intent);
   return /* @__PURE__ */ jsxs3(Fragment3, { children: [
     /* @__PURE__ */ jsxs3(
       Field,
@@ -3611,19 +3611,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: () => ui7({ kind: "focusField", fieldId: row2.id }),
+        onContextMenu: (x, y) => ui7({ 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: () => ui7({ 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: () => ui7({ 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: () => ui7({ 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: () => ui7({ 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) => ui7({ 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: () => ui7({ kind: "bindToken", fieldId: row2.id }) }) : null,
+          row2.showReset ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(ResetIcon, {}), label: "Reset to default", onClick: () => ui7({ kind: "resetField", fieldId: row2.id }) }) : null
         ] }),
         children: [
           row2.bound ? /* @__PURE__ */ jsx4(Badge2, { title: row2.tokenTitle, children: row2.tokenLabel }) : null,
@@ -4876,23 +4876,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 ui7 = (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: () => ui7({ kind: "undo" }) }),
+          /* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(RedoIcon, {}), label: "Redo", disabled: !view.canRedo, onClick: () => ui7({ 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: () => ui7({ 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) => ui7({ 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: () => ui7({ kind: "confirmClear" }), onCancel: () => ui7({ 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 +4951,7 @@ function HistoryCancelButton({ entryId, controller }) {
   );
 }
 function HistoryRowView({ row: row2, controller }) {
-  const ui6 = (intent) => applyHistoryUi(controller, intent);
+  const ui7 = (intent) => applyHistoryUi(controller, intent);
   return /* @__PURE__ */ jsx5(
     Row2,
     {
@@ -4974,9 +4974,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: () => ui7({ kind: "jump", entryId: row2.entryId }),
+      onMouseEnter: () => ui7({ kind: "hover", entryId: row2.entryId }),
+      onContextMenuAt: (x, y) => ui7({ kind: "contextMenu", entryId: row2.entryId, x, y })
     }
   );
 }
@@ -6262,27 +6262,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 ui7 = (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: () => ui7({ kind: "setChannel", channel: "fg" }) }),
+      /* @__PURE__ */ jsx6(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx6(SwapIcon, {}), label: "Swap FG/BG (X)", onClick: () => ui7({ kind: "swapChannels" }) }),
+      /* @__PURE__ */ jsx6(ColorChip, { color: null, label: "Background", pressed: view.bgActive, onClick: () => ui7({ 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) => ui7({ kind: "setSpace", space: v }) }),
+      view.isHex ? /* @__PURE__ */ jsx6(Input3, { variant: "mono", label: "Hex", value: view.hex, onChange: (v) => ui7({ kind: "setHex", value: v }), disabled: view.bound }) : null,
+      view.components.map((comp) => /* @__PURE__ */ jsx6(NumberInput, { caption: comp.label, value: comp.value, onChange: (n) => ui7({ 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) => ui7({ kind: "setAlpha", percent: n }), disabled: view.bound }) : null,
+      /* @__PURE__ */ jsx6(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx6(EyedropperIcon, {}), label: "Pick from screen", onClick: () => ui7({ 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) => ui7({ kind: "bindToken", tokenId: id }) }),
+      view.bound ? /* @__PURE__ */ jsx6(TextButton2, { onClick: () => ui7({ 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: () => ui7({ 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: () => ui7({ kind: "selectColor", hex: sw.hex }), onContextMenu: () => ui7({ 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: () => ui7({ kind: "selectColor", hex: r.hex }) }, r.key)) }) }) : null
   ] }) });
 }
 function ColorPicker({ controller }) {
@@ -8944,11 +8944,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(text7, immediate = false) {
+    if (text7 === this.text) return;
+    this.text = text7;
     this.index = -1;
-    if (text6 === "") {
+    if (text7 === "") {
       this.clearResults("idle");
       this.emitQuery(true);
       return;
@@ -8976,8 +8976,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(text7) {
+    this.replaceText = text7;
     this.notify();
   }
   /** Show or hide the replace row. */
@@ -9626,7 +9626,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 ui7 = (intent) => applyFindUi(controller, intent);
   const renderRow = (row2) => /* @__PURE__ */ jsx9(
     Row3,
     {
@@ -9634,8 +9634,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: () => ui7({ kind: "select", matchId: row2.id }),
+      onContextMenuAt: (x, y) => ui7({ kind: "contextMenu", matchId: row2.id, x, y })
     },
     row2.id
   );
@@ -9643,11 +9643,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) => ui7({ 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: () => ui7({ kind: "option", option: "caseSensitive" }) }),
+          /* @__PURE__ */ jsx9(IconButton6, { label: "Whole word", active: view.wholeWord, icon: /* @__PURE__ */ jsx9(WordIcon, { size: 12 }), onClick: () => ui7({ kind: "option", option: "wholeWord" }) }),
+          /* @__PURE__ */ jsx9(IconButton6, { label: "Regular expression", active: view.regex, icon: /* @__PURE__ */ jsx9(RegexIcon, { size: 12 }), onClick: () => ui7({ kind: "option", option: "regex" }) })
         ] })
       }
     ),
@@ -9662,9 +9662,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: () => ui7({ kind: "previous" }) }),
+          /* @__PURE__ */ jsx9(IconButton6, { label: "Next match", disabled: !view.hasMatches, icon: /* @__PURE__ */ jsx9(Chevron, { direction: "down", size: 12 }), onClick: () => ui7({ kind: "next" }) }),
+          /* @__PURE__ */ jsx9(TextButton3, { onClick: () => ui7({ kind: "toggleReplace" }), children: view.replaceLabel })
         ] })
       }
     ),
@@ -9672,10 +9672,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) => ui7({ 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: () => ui7({ kind: "replaceCurrent" }), children: "Replace" }),
+          /* @__PURE__ */ jsx9(TextButton3, { disabled: !view.canReplace, onClick: () => ui7({ kind: "replaceAll" }), children: view.allLabel })
         ] })
       }
     ) : null,
@@ -10333,279 +10333,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 ui7 = (intent) => applyCommentsUi(controller, intent);
+  const card = (t) => /* @__PURE__ */ jsxs9(ThreadCard, { active: t.active, resolved: t.resolved, onContextMenuAt: (x, y) => ui7({ 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: () => ui7({ 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: () => ui7({ 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) => ui7({ kind: "replyDraft", value }), onKeyDown: (e) => ui7({ kind: "replyKey", id: t.id, key: e.key, shift: e.shiftKey }) }),
+      /* @__PURE__ */ jsx10(TextButton4, { onClick: () => ui7({ kind: "reply", id: t.id }), children: "Send" })
+    ] }) : null,
+    t.idle ? /* @__PURE__ */ jsxs9(Stack4, { direction: "row", gap: 6, pad: "none", children: [
+      /* @__PURE__ */ jsx10(TextButton4, { onClick: () => ui7({ kind: "startReply", id: t.id }), children: "Reply" }),
+      /* @__PURE__ */ jsx10(TextButton4, { onClick: () => ui7({ kind: "resolve", id: t.id, resolved: t.resolveTo }), children: t.resolveLabel }),
+      /* @__PURE__ */ jsx10(TextButton4, { onClick: () => ui7({ 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) => ui7({ kind: "show", show }) }),
+        right: /* @__PURE__ */ jsx10(ToolbarGroup3, { end: true, children: /* @__PURE__ */ jsx10(SegmentedControl2, { label: "Sort", options: view.sorts, value: view.sort, onChange: (sort) => ui7({ 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: () => ui7({ 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) => ui7({ kind: "draft", value }), onKeyDown: (e) => ui7({ 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: () => ui7({ kind: "create" }), children: "Comment" }) }) })
+    ] }),
+    /* @__PURE__ */ jsx10(StatusBar6, { left: view.countLabel, right: view.staleLabel })
   ] });
 }
 
@@ -11773,7 +11784,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 +12007,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,
         {
@@ -12729,12 +12740,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 text7 = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
+      this.typeAhead = { text: text7, 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(text7)) {
           this.focusedId = candidate.id;
           this.select([candidate.id]);
           return true;
@@ -12760,9 +12771,9 @@ var TreeController = class {
     return true;
   }
   /** Update the rename draft. */
-  updateRenameDraft(text6) {
+  updateRenameDraft(text7) {
     if (!this.renaming) return;
-    this.renaming = { ...this.renaming, draft: text6 };
+    this.renaming = { ...this.renaming, draft: text7 };
     this.notify();
   }
   /**
@@ -13314,7 +13325,7 @@ import {
   ToolbarGroup as ToolbarGroup5
 } from "@xenosystem/components/chrome";
 import { computeWindow as computeWindow3 } from "@xenosystem/tree-core";
-import { Fragment as Fragment9, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function TreePanelView({
   controller,
   rowHeight = 24,
@@ -13531,7 +13542,7 @@ function TreeRowView({
           onPointerUp: () => {
             if (state.drag) controller.endDrag();
           },
-          icon: /* @__PURE__ */ jsxs11(Fragment9, { children: [
+          icon: /* @__PURE__ */ jsxs11(Fragment8, { children: [
             twisty,
             /* @__PURE__ */ jsx12(NodeIcon, { icon: node.icon ?? defaultIconFor(node.kind) })
           ] }),
@@ -13561,7 +13572,7 @@ function TreeRowView({
             }
           ) : node.label,
           meta: /* @__PURE__ */ jsx12(ChildStateChip, { row: row2, controller }),
-          trailing: /* @__PURE__ */ jsxs11(Fragment9, { children: [
+          trailing: /* @__PURE__ */ jsxs11(Fragment8, { 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) => (
@@ -13832,7 +13843,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,
@@ -13899,6 +13913,7 @@ export {
   anchorStateOf,
   appliedCount,
   applyColorUi,
+  applyCommentsUi,
   applyFindUi,
   applyHistoryUi,
   applyInspectorUi,
@@ -13922,6 +13937,8 @@ export {
   colorViewState,
   commentsManifest,
   commentsPanel,
+  commentsViewManifest,
+  commentsViewState,
   commitPolicyOf,
   componentsForSpace,
   computeSurfaceSize,