@xenosystem/blocks 0.13.6 → 0.13.8

package/dist/edit/index.js

@@ -2,6 +2,7 @@ import {
   DiamondIcon,
   EntryIcon,
   EyedropperIcon,
+  ICONS,
   KindGlyph,
   LinkIcon,
   LockStateIcon,
@@ -17,14 +18,14 @@ import {
   VisibilityIcon,
   XIcon,
   XIcon2
-} from "../chunk-UGA6G7IN.js";
+} from "../chunk-BNALWAAQ.js";
+import "../chunk-GTN5EDY3.js";
 import {
-  CaseGlyph,
   ChevronGlyph,
   CollapseGlyph,
   ExpandGlyph,
   RefreshGlyph
-} from "../chunk-YTSBYJVH.js";
+} from "../chunk-K7YLLV2W.js";
 import "../chunk-2KG3PWR4.js";
 
 // src/edit/layers/panel.ts
@@ -1490,9 +1491,9 @@ function LayersPanelView({ controller }) {
   const getSnapshot = useCallback(() => controller.getRevision(), [controller]);
   useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   const view = layersViewState(controller);
-  const ui5 = (intent) => applyLayersUi(controller, intent);
+  const ui6 = (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) => ui5({ 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) => ui6({ 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
@@ -1605,7 +1606,7 @@ function LayersThumbnail({ thumbnailKey, size, controller }) {
   return /* @__PURE__ */ jsx2(Thumbnail, { size, data: controller.getThumbnail(thumbnailKey) });
 }
 function LayerRow({ row: row2, thumbnailSize, controller }) {
-  const ui5 = (intent) => applyLayersUi(controller, intent);
+  const ui6 = (intent) => applyLayersUi(controller, intent);
   return /* @__PURE__ */ jsx2(
     Row,
     {
@@ -1620,11 +1621,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: () => ui5({ 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: () => ui5({ kind: "toggleProp", id: row2.id, prop: "locked" }) }) : null,
-        row2.showSolo ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "S", label: "Solo", on: row2.solo, onChange: () => ui5({ kind: "toggleProp", id: row2.id, prop: "solo" }) }) : null,
-        row2.showMute ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "M", label: "Mute", on: row2.muted, onChange: () => ui5({ kind: "toggleProp", id: row2.id, prop: "muted" }) }) : null,
-        row2.showArm ? /* @__PURE__ */ jsx2(ChipToggle, { glyph: "R", label: "Arm", on: row2.armed, onChange: () => ui5({ 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: () => 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.showColor ? /* @__PURE__ */ jsx2(ColorTag, { color: row2.colorLabel }) : null
       ] }),
       label: row2.renaming ? /* @__PURE__ */ jsx2(LayersRenameField, { id: row2.id, controller }) : row2.name,
@@ -1632,9 +1633,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: () => ui5({ kind: "toggleExpanded", id: row2.id }),
-      onDoubleClick: () => ui5({ kind: "beginRename", id: row2.id }),
-      onContextMenuAt: (x, y) => ui5({ kind: "contextMenu", id: row2.id, x, y })
+      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 })
     }
   );
 }
@@ -2026,8 +2027,8 @@ function constraintsOf(field) {
     scale: field.scale
   };
 }
-function parseNumeric(text5) {
-  const trimmed = String(text5).trim();
+function parseNumeric(text6) {
+  const trimmed = String(text6).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" };
@@ -2052,8 +2053,8 @@ function normalizeNumeric(value, c) {
 function formatNumeric(value, field) {
   if (!Number.isFinite(value)) return "";
   const precision = field.precision;
-  const text5 = typeof precision === "number" && Number.isFinite(precision) ? value.toFixed(Math.max(0, Math.floor(precision))) : String(value);
-  return field.unit ? `${text5}${field.unit}` : text5;
+  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;
 }
 function usesLogScale(c) {
   return c.scale === "log" && typeof c.min === "number" && typeof c.max === "number" && c.min > 0 && c.max > c.min;
@@ -2387,44 +2388,44 @@ var InspectorPanelController = class {
     if (!field || !isFieldEditable(field)) return;
     const mixed = isFieldMixed(field);
     const value = this.getFieldValue(fieldId);
-    const text5 = mixed ? "" : field.type === "number" && typeof value === "number" ? formatNumeric(value, field) : value === void 0 || value === null ? "" : String(value);
-    this.drafts.set(fieldId, { text: text5, original: value });
+    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 });
     this.focusedFieldId = fieldId;
     this.emitFieldFocus(fieldId);
     this.notify();
   }
   /** Update the draft text (typing). Emits nothing under the `blur` policy. */
-  setDraft(fieldId, text5) {
+  setDraft(fieldId, text6) {
     const draft = this.drafts.get(fieldId);
     if (!draft) {
-      this.drafts.set(fieldId, { text: text5, original: this.getFieldValue(fieldId) });
+      this.drafts.set(fieldId, { text: text6, original: this.getFieldValue(fieldId) });
     } else {
-      draft.text = text5;
+      draft.text = text6;
     }
     const field = this.getField(fieldId);
     if (field && commitPolicyOf(field) === "live") {
-      const parsed = this.parseDraft(fieldId, text5);
+      const parsed = this.parseDraft(fieldId, text6);
       if (parsed.ok) this.emitSet(fieldId, parsed.value);
     }
     this.notify();
   }
   /** Parse a draft string into a field-appropriate value. */
-  parseDraft(fieldId, text5) {
+  parseDraft(fieldId, text6) {
     const field = this.getField(fieldId);
     if (!field) return { ok: false };
     if (field.type === "number") {
-      const parsed = parseNumeric(text5);
+      const parsed = parseNumeric(text6);
       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(text5) };
+        return { ok: true, value: JSON.parse(text6) };
       } catch {
         return { ok: false };
       }
     }
-    return { ok: true, value: text5 };
+    return { ok: true, value: text6 };
   }
   /**
    * Commit the draft (Enter / blur). Invalid input reverts instead of committing garbage.
@@ -3350,7 +3351,7 @@ function NumberWidget({ field, controller, component }) {
     },
     [controller, editable, field.id, component]
   );
-  const text5 = component !== void 0 ? (() => {
+  const text6 = 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) : "";
@@ -3362,7 +3363,7 @@ function NumberWidget({ field, controller, component }) {
       Input2,
       {
         inputMode: "decimal",
-        value: text5,
+        value: text6,
         placeholder: mixed ? controller.getMixedPlaceholder() : field.placeholder,
         mixed,
         readOnly: !editable,
@@ -3516,7 +3517,7 @@ function ListWidget({ field, controller }) {
       editable ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
         /* @__PURE__ */ jsx3(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx3("span", { "aria-hidden": true, children: "\u2191" }), label: "Move up", disabled: i === 0, onClick: () => move(i, i - 1) }),
         /* @__PURE__ */ jsx3(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx3("span", { "aria-hidden": true, children: "\u2193" }), label: "Move down", disabled: i === items.length - 1, onClick: () => move(i, i + 1) }),
-        /* @__PURE__ */ jsx3(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx3(XIcon, {}), label: "Remove", onClick: () => write(items.filter((_, j) => j !== i)) })
+        /* @__PURE__ */ jsx3(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx3(XIcon2, {}), label: "Remove", onClick: () => write(items.filter((_, j) => j !== i)) })
       ] }) : null
     ] }, i)),
     editable ? /* @__PURE__ */ jsx3(TextButton, { onClick: () => write([...items, ""]), children: "+ Add" }) : null
@@ -3580,7 +3581,7 @@ function ActionGlyph({ glyph }) {
   return /* @__PURE__ */ jsx4("span", { "aria-hidden": true, children: glyph });
 }
 function SectionView({ section, controller }) {
-  const ui5 = (intent) => applyInspectorUi(controller, intent);
+  const ui6 = (intent) => applyInspectorUi(controller, intent);
   const hasActions = section.actions.length > 0 || section.hasAddMenu;
   return /* @__PURE__ */ jsxs3(
     Section,
@@ -3589,13 +3590,13 @@ function SectionView({ section, controller }) {
       flush: true,
       collapsible: section.collapsible,
       collapsed: section.collapsed,
-      onCollapsedChange: () => ui5({ kind: "toggleSectionCollapsed", sectionId: section.id }),
+      onCollapsedChange: () => ui6({ kind: "toggleSectionCollapsed", sectionId: section.id }),
       enabled: section.enabled,
-      onEnabledChange: () => ui5({ kind: "toggleSectionEnabled", sectionId: section.id }),
+      onEnabledChange: () => ui6({ 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: () => ui5({ 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) => ui5({ 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: () => 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
       ] }) : null,
       children: [
         section.showEmptyHint ? /* @__PURE__ */ jsx4(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx4(Text3, { role: "caption", children: section.emptyHint }) }) : null,
@@ -3605,7 +3606,7 @@ function SectionView({ section, controller }) {
   );
 }
 function FieldRow({ row: row2, controller }) {
-  const ui5 = (intent) => applyInspectorUi(controller, intent);
+  const ui6 = (intent) => applyInspectorUi(controller, intent);
   return /* @__PURE__ */ jsxs3(Fragment3, { children: [
     /* @__PURE__ */ jsxs3(
       Field,
@@ -3613,19 +3614,19 @@ function FieldRow({ row: row2, controller }) {
         label: row2.label,
         title: row2.title,
         focused: row2.focused,
-        onLabelClick: () => ui5({ kind: "focusField", fieldId: row2.id }),
-        onContextMenu: (x, y) => ui5({ kind: "contextMenu", fieldId: row2.id, x, y }),
+        onLabelClick: () => ui6({ kind: "focusField", fieldId: row2.id }),
+        onContextMenu: (x, y) => ui6({ 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: () => ui5({ 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: () => ui5({ 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: () => ui5({ 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: () => ui5({ kind: "keyframe", fieldId: row2.id, op: "next" }) }) : null
+          /* @__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
         ] }) : null,
         trailing: /* @__PURE__ */ jsxs3(Fragment3, { children: [
-          row2.showEasing ? /* @__PURE__ */ jsx4(Select2, { size: "sm", options: row2.easingOptions, value: row2.easing, label: "Easing", onChange: (v) => ui5({ 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) => ui6({ 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: () => ui5({ kind: "bindToken", fieldId: row2.id }) }) : null,
-          row2.showReset ? /* @__PURE__ */ jsx4(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx4(ResetIcon, {}), label: "Reset to default", onClick: () => ui5({ kind: "resetField", fieldId: row2.id }) }) : 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
         ] }),
         children: [
           row2.bound ? /* @__PURE__ */ jsx4(Badge2, { title: row2.tokenTitle, children: row2.tokenLabel }) : null,
@@ -4878,23 +4879,23 @@ function HistoryPanelView({ controller }) {
   const getSnapshot = useCallback4(() => controller.getRevision(), [controller]);
   useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
   const view = historyViewState(controller);
-  const ui5 = (intent) => applyHistoryUi(controller, intent);
+  const ui6 = (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: () => ui5({ kind: "undo" }) }),
-          /* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(RedoIcon, {}), label: "Redo", disabled: !view.canRedo, onClick: () => ui5({ kind: "redo" }) })
+          /* @__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" }) })
         ] }),
         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: () => ui5({ kind: "requestClear" }) }) : null
+          view.clearAllowed ? /* @__PURE__ */ jsx5(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx5(TrashIcon, {}), label: "Clear history", onClick: () => ui6({ kind: "requestClear" }) }) : null
         ] }),
-        children: view.searchShown ? /* @__PURE__ */ jsx5(SearchField3, { value: view.filter, onChange: (v) => ui5({ kind: "filter", value: v }), placeholder: "Search history", label: "Search history" }) : null
+        children: view.searchShown ? /* @__PURE__ */ jsx5(SearchField3, { value: view.filter, onChange: (v) => ui6({ 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: () => ui5({ kind: "confirmClear" }), onCancel: () => ui5({ kind: "cancelClear" }) }) : 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.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)) }) }),
@@ -4942,7 +4943,7 @@ function HistoryCancelButton({ entryId, controller }) {
     IconButton4,
     {
       size: "sm",
-      icon: /* @__PURE__ */ jsx5(XIcon2, {}),
+      icon: /* @__PURE__ */ jsx5(XIcon, {}),
       label: "Cancel operation",
       pointerOnly: true,
       onClick: (e) => {
@@ -4953,7 +4954,7 @@ function HistoryCancelButton({ entryId, controller }) {
   );
 }
 function HistoryRowView({ row: row2, controller }) {
-  const ui5 = (intent) => applyHistoryUi(controller, intent);
+  const ui6 = (intent) => applyHistoryUi(controller, intent);
   return /* @__PURE__ */ jsx5(
     Row2,
     {
@@ -4976,9 +4977,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: () => ui5({ kind: "jump", entryId: row2.entryId }),
-      onMouseEnter: () => ui5({ kind: "hover", entryId: row2.entryId }),
-      onContextMenuAt: (x, y) => ui5({ kind: "contextMenu", entryId: row2.entryId, x, y })
+      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 })
     }
   );
 }
@@ -6264,27 +6265,27 @@ function ColorPanelView({ controller }) {
   const getSnapshot = useCallback5(() => controller.getRevision(), [controller]);
   useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
   const view = colorViewState(controller);
-  const ui5 = (intent) => applyColorUi(controller, intent);
+  const ui6 = (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: () => ui5({ kind: "setChannel", channel: "fg" }) }),
-      /* @__PURE__ */ jsx6(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx6(SwapIcon, {}), label: "Swap FG/BG (X)", onClick: () => ui5({ kind: "swapChannels" }) }),
-      /* @__PURE__ */ jsx6(ColorChip, { color: null, label: "Background", pressed: view.bgActive, onClick: () => ui5({ kind: "setChannel", channel: "bg" }) })
+      /* @__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" }) })
     ] }) : 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) => ui5({ kind: "setSpace", space: v }) }),
-      view.isHex ? /* @__PURE__ */ jsx6(Input3, { variant: "mono", label: "Hex", value: view.hex, onChange: (v) => ui5({ kind: "setHex", value: v }), disabled: view.bound }) : null,
-      view.components.map((comp) => /* @__PURE__ */ jsx6(NumberInput, { caption: comp.label, value: comp.value, onChange: (n) => ui5({ 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) => ui5({ kind: "setAlpha", percent: n }), disabled: view.bound }) : null,
-      /* @__PURE__ */ jsx6(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx6(EyedropperIcon, {}), label: "Pick from screen", onClick: () => ui5({ kind: "eyedropper" }) })
+      /* @__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" }) })
     ] }),
     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) => ui5({ kind: "bindToken", tokenId: id }) }),
-      view.bound ? /* @__PURE__ */ jsx6(TextButton2, { onClick: () => ui5({ 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) => ui6({ kind: "bindToken", tokenId: id }) }),
+      view.bound ? /* @__PURE__ */ jsx6(TextButton2, { onClick: () => ui6({ kind: "unbindToken" }), children: "Unbind" }) : null
     ] }) }) : null,
-    /* @__PURE__ */ jsx6(Section2, { title: "Swatches", flush: true, actions: /* @__PURE__ */ jsx6(TextButton2, { onClick: () => ui5({ 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: () => ui5({ kind: "selectColor", hex: sw.hex }), onContextMenu: () => ui5({ 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: () => ui5({ kind: "selectColor", hex: r.hex }) }, r.key)) }) }) : 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
   ] }) });
 }
 function ColorPicker({ controller }) {
@@ -8946,11 +8947,11 @@ var FindController = class {
    * @param text - The new query text.
    * @param immediate - Skip the debounce (a paste, or pressing Enter).
    */
-  setText(text5, immediate = false) {
-    if (text5 === this.text) return;
-    this.text = text5;
+  setText(text6, immediate = false) {
+    if (text6 === this.text) return;
+    this.text = text6;
     this.index = -1;
-    if (text5 === "") {
+    if (text6 === "") {
       this.clearResults("idle");
       this.emitQuery(true);
       return;
@@ -8978,8 +8979,8 @@ var FindController = class {
     this.notify();
   }
   /** The replacement text. Never emitted on its own — a replacement is not a search. */
-  setReplaceText(text5) {
-    this.replaceText = text5;
+  setReplaceText(text6) {
+    this.replaceText = text6;
     this.notify();
   }
   /** Show or hide the replace row. */
@@ -9344,7 +9345,9 @@ var findManifest = {
 import { useSyncExternalStore as useSyncExternalStore7 } from "react";
 import {
   Badge as Badge5,
+  Column as Column5,
   EmptyState as EmptyState5,
+  Highlight,
   IconButton as IconButton6,
   Row as Row3,
   RowList as RowList3,
@@ -9352,64 +9355,260 @@ import {
   SearchField as SearchField4,
   Section as Section3,
   StatusBar as StatusBar5,
+  Text as Text5,
   TextButton as TextButton3,
   Toolbar as Toolbar4,
   ToolbarGroup as ToolbarGroup2
 } from "@xenosystem/components/chrome";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-function CaseIcon() {
-  return /* @__PURE__ */ jsx9(CaseGlyph, { size: 12 });
-}
-function WordIcon() {
-  return /* @__PURE__ */ jsxs8("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx9("path", { d: "M7 12h10" }),
-    /* @__PURE__ */ jsx9("path", { d: "M3 7v10" }),
-    /* @__PURE__ */ jsx9("path", { d: "M21 7v10" })
-  ] });
-}
-function RegexIcon() {
-  return /* @__PURE__ */ jsxs8("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx9("path", { d: "M12 4v8" }),
-    /* @__PURE__ */ jsx9("path", { d: "m8.5 6 7 4" }),
-    /* @__PURE__ */ jsx9("path", { d: "m8.5 10 7-4" }),
-    /* @__PURE__ */ jsx9("path", { d: "M5 18h2" })
-  ] });
-}
-function UpIcon() {
-  return /* @__PURE__ */ jsx9("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx9("path", { d: "m18 15-6-6-6 6" }) });
-}
-function DownIcon() {
-  return /* @__PURE__ */ jsx9("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx9("path", { d: "m6 9 6 6 6-6" }) });
+
+// src/edit/find/declaration.ts
+function findViewState(c, options = {}) {
+  const s = c.getState();
+  const hasText = s.text !== "";
+  const statusKind = s.status === "invalidPattern" ? "invalid" : s.status === "failed" ? "failed" : s.status === "searching" ? "searching" : !hasText || s.status === "idle" ? "none" : "count";
+  let flat = -1;
+  const row2 = (m) => {
+    flat += 1;
+    return { id: m.id, index: flat, current: flat === s.index, segments: highlightSegments(m.snippet ?? "", m.ranges), location: m.locationLabel };
+  };
+  const isFlat = s.groups.length === 1 && s.groups[0].id === "";
+  const rows = isFlat ? s.matches.map(row2) : [];
+  const groups = isFlat ? [] : s.groups.map((g) => ({ id: g.id, label: g.label || "Results", count: g.matches.length, rows: g.matches.map(row2) }));
+  const showResults = options.showResults ?? true;
+  return {
+    text: s.text,
+    hasText,
+    placeholder: options.placeholder ?? "Find",
+    caseSensitive: s.options.caseSensitive,
+    wholeWord: s.options.wholeWord,
+    regex: s.options.regex,
+    status: s.status,
+    message: s.message,
+    statusKind,
+    searchingBadge: statusKind === "searching",
+    countShown: statusKind === "count",
+    counter: `${s.displayIndex}/${s.count}${s.truncated ? "+" : ""}`,
+    hasMatches: s.matches.length > 0,
+    replaceVisible: s.replaceVisible,
+    replaceText: s.replaceText,
+    canReplace: s.canReplace,
+    allLabel: `All (${s.matches.length})`,
+    replaceLabel: s.replaceVisible ? "Hide replace" : "Replace",
+    showResults,
+    idle: s.status === "idle",
+    invalid: s.status === "invalidPattern",
+    failed: s.status === "failed",
+    noResults: s.noResults,
+    noResultsHint: `Nothing in scope matches \u201C${s.text}\u201D.`,
+    invalidHint: s.message ?? "The expression could not be read. Fix it to search.",
+    failedHint: s.message ?? "The host could not complete the search.",
+    flat: showResults && !s.noResults && s.status !== "idle" && s.status !== "invalidPattern" && s.status !== "failed" && isFlat,
+    grouped: showResults && !s.noResults && s.status !== "idle" && s.status !== "invalidPattern" && s.status !== "failed" && !isFlat,
+    rows,
+    groups,
+    truncatedLabel: s.truncated ? `showing first ${s.matches.length}` : void 0,
+    scope: s.options.scope
+  };
 }
-function StatusLine({
-  status,
-  message,
-  count,
-  displayIndex,
-  truncated,
-  hasText
-}) {
-  if (status === "invalidPattern") {
-    return /* @__PURE__ */ jsx9(Badge5, { tone: "error", title: message ?? void 0, children: "invalid pattern" });
-  }
-  if (status === "failed") {
-    return /* @__PURE__ */ jsx9(Badge5, { tone: "error", title: message ?? void 0, children: "search failed" });
-  }
-  if (status === "searching") return /* @__PURE__ */ jsx9(Badge5, { children: "searching\u2026" });
-  if (!hasText || status === "idle") return null;
-  return /* @__PURE__ */ jsxs8("span", { style: { fontVariantNumeric: "tabular-nums", fontSize: 10, opacity: 0.55 }, children: [
-    displayIndex,
-    "/",
-    count,
-    truncated ? "+" : ""
-  ] });
+function applyFindUi(c, intent) {
+  switch (intent.kind) {
+    case "text":
+      c.setText(intent.value);
+      break;
+    case "option":
+      c.setOptions({ [intent.option]: !c.getState().options[intent.option] });
+      break;
+    case "previous":
+      c.previous();
+      break;
+    case "next":
+      c.next();
+      break;
+    case "toggleReplace":
+      c.setReplaceVisible(!c.getState().replaceVisible);
+      break;
+    case "replaceText":
+      c.setReplaceText(intent.value);
+      break;
+    case "replaceCurrent":
+      c.replaceCurrent();
+      break;
+    case "replaceAll":
+      c.replaceAll();
+      break;
+    case "select":
+      c.select(intent.matchId);
+      break;
+    case "contextMenu":
+      c.requestContextMenu(intent.matchId, intent.x, intent.y);
+      break;
+  }
 }
-function FindPanelView({
-  controller,
-  showResults = true,
-  placeholder = "Find"
-}) {
-  const state = useSyncExternalStore7(controller.subscribe, controller.getState, controller.getState);
+var findViewManifest = {
+  id: findManifest.id,
+  version: "1.0.0",
+  title: "Find",
+  category: "edit",
+  layout: { slot: "side" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The FindViewModel the runtime derives from the controller on every draw." }],
+  outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, value?, option?, matchId?, x?, y? } \u2014 applied by the runtime to the controller." }],
+  commands: []
+};
+var EMPTY5 = {
+  text: "",
+  hasText: false,
+  placeholder: "Find",
+  caseSensitive: false,
+  wholeWord: false,
+  regex: false,
+  status: "idle",
+  message: null,
+  statusKind: "none",
+  searchingBadge: false,
+  countShown: false,
+  counter: "0/0",
+  hasMatches: false,
+  replaceVisible: false,
+  replaceText: "",
+  canReplace: false,
+  allLabel: "All (0)",
+  replaceLabel: "Replace",
+  showResults: true,
+  idle: true,
+  invalid: false,
+  failed: false,
+  noResults: false,
+  noResultsHint: "",
+  invalidHint: "",
+  failedHint: "",
+  flat: false,
+  grouped: false,
+  rows: [],
+  groups: []
+};
+var BEHAVIOURS5 = {
+  "edit/findPanelView": (inputs) => inputs.view ?? EMPTY5
+};
+var FIND_RUNTIME_UNITS = ["find/Keys"];
+var text5 = (b) => ({ component: "text", props: { text: b } });
+var ui5 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var option = (option2, icon, label) => ({
+  component: "chrome/IconButton",
+  props: { label: { value: label }, active: { input: `view.${option2}` }, icon: { node: { component: icon, props: { size: { value: 12 } } } } },
+  on: { onClick: ui5("option", { option: { value: option2 } }) }
+});
+var resultRow = {
+  component: "chrome/Row",
+  each: { item: "rows", key: "id" },
+  props: { noIcon: { value: true }, selected: { item: "current" }, meta: { item: "location" }, label: { node: { component: "chrome/Highlight", props: { segments: { item: "segments" } } } } },
+  on: {
+    onClick: ui5("select", { matchId: { item: "id" } }),
+    onContextMenuAt: ui5("contextMenu", { matchId: { item: "id" }, x: { arg: "", index: 0 }, y: { arg: "", index: 1 } })
+  }
+};
+var flatRow = { ...resultRow, each: { input: "view.rows", key: "id" } };
+var emptyState = (when, title, hint) => ({ component: "chrome/EmptyState", when: { input: when }, props: { title: { value: title }, hint } });
+var FIND_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: findViewManifest,
+  behaviour: "edit/findPanelView",
+  composition: {
+    component: "find/Keys",
+    children: [
+      {
+        component: "chrome/Toolbar",
+        props: {
+          left: { node: { component: "chrome/SearchField", props: { value: { input: "view.text" }, placeholder: { input: "view.placeholder" } }, on: { onChange: ui5("text", { value: { arg: "" } }) } } },
+          right: {
+            node: {
+              component: "chrome/ToolbarGroup",
+              props: { end: { value: true } },
+              children: [option("caseSensitive", "icons/Case", "Match case"), option("wholeWord", "icons/WholeWord", "Whole word"), option("regex", "icons/Regex", "Regular expression")]
+            }
+          }
+        }
+      },
+      {
+        component: "chrome/Toolbar",
+        props: {
+          divided: { value: false },
+          left: {
+            node: {
+              component: "fragment",
+              children: [
+                { component: "chrome/Badge", when: { input: "view.invalid" }, props: { tone: { value: "error" }, title: { input: "view.message" } }, children: [text5({ value: "invalid pattern" })] },
+                { component: "chrome/Badge", when: { input: "view.failed" }, props: { tone: { value: "error" }, title: { input: "view.message" } }, children: [text5({ value: "search failed" })] },
+                { component: "chrome/Badge", when: { input: "view.searchingBadge" }, children: [text5({ value: "searching\u2026" })] },
+                { component: "chrome/Text", when: { input: "view.countShown" }, props: { role: { value: "number" } }, children: [text5({ input: "view.counter" })] }
+              ]
+            }
+          },
+          right: {
+            node: {
+              component: "chrome/ToolbarGroup",
+              props: { end: { value: true } },
+              children: [
+                { component: "chrome/IconButton", props: { label: { value: "Previous match" }, disabled: { not: { input: "view.hasMatches" } }, icon: { node: { component: "icons/Chevron", props: { direction: { value: "up" }, size: { value: 12 } } } } }, on: { onClick: ui5("previous") } },
+                { component: "chrome/IconButton", props: { label: { value: "Next match" }, disabled: { not: { input: "view.hasMatches" } }, icon: { node: { component: "icons/Chevron", props: { direction: { value: "down" }, size: { value: 12 } } } } }, on: { onClick: ui5("next") } },
+                { component: "chrome/TextButton", on: { onClick: ui5("toggleReplace") }, children: [text5({ input: "view.replaceLabel" })] }
+              ]
+            }
+          }
+        }
+      },
+      { component: "chrome/Text", when: { input: "view.invalid" }, props: { role: { value: "caption" }, className: { value: "xeno-find-message" } }, children: [text5({ input: "view.message" })] },
+      {
+        component: "chrome/Toolbar",
+        when: { input: "view.replaceVisible" },
+        props: {
+          left: { node: { component: "chrome/SearchField", props: { value: { input: "view.replaceText" }, placeholder: { value: "Replace with" } }, on: { onChange: ui5("replaceText", { value: { arg: "" } }) } } },
+          right: {
+            node: {
+              component: "chrome/ToolbarGroup",
+              props: { end: { value: true } },
+              children: [
+                { component: "chrome/TextButton", props: { disabled: { not: { input: "view.canReplace" } } }, on: { onClick: ui5("replaceCurrent") }, children: [text5({ value: "Replace" })] },
+                { component: "chrome/TextButton", props: { disabled: { not: { input: "view.canReplace" } } }, on: { onClick: ui5("replaceAll") }, children: [text5({ input: "view.allLabel" })] }
+              ]
+            }
+          }
+        }
+      },
+      {
+        component: "chrome/ScrollArea",
+        when: { input: "view.showResults" },
+        children: [
+          emptyState("view.idle", "Find", { value: "Type to search. Enter goes to the next match." }),
+          emptyState("view.invalid", "Invalid pattern", { input: "view.invalidHint" }),
+          emptyState("view.failed", "Search failed", { input: "view.failedHint" }),
+          emptyState("view.noResults", "No matches", { input: "view.noResultsHint" }),
+          { component: "chrome/RowList", when: { input: "view.flat" }, children: [flatRow] },
+          {
+            component: "fragment",
+            when: { input: "view.grouped" },
+            children: [
+              {
+                component: "chrome/Section",
+                each: { input: "view.groups", key: "id" },
+                props: { title: { item: "label" }, flush: { value: true }, badge: { node: { component: "chrome/Badge", children: [text5({ item: "count" })] } } },
+                children: [{ component: "chrome/RowList", children: [resultRow] }]
+              }
+            ]
+          }
+        ]
+      },
+      { component: "chrome/StatusBar", props: { left: { input: "view.truncatedLabel" }, right: { input: "view.scope" } } }
+    ]
+  }
+};
+
+// src/edit/find/react/FindPanelView.tsx
+import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var CaseIcon = ICONS["icons/Case"];
+var WordIcon = ICONS["icons/WholeWord"];
+var RegexIcon = ICONS["icons/Regex"];
+var Chevron = ICONS["icons/Chevron"];
+function FindKeys({ controller, children }) {
   const onKeyDown = (event) => {
     if (event.key === "Enter") {
       event.preventDefault();
@@ -9420,69 +9619,38 @@ function FindPanelView({
       controller.clear();
     }
   };
-  const renderMatch = (match, index) => /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx9(Column5, { onKeyDown, children });
+}
+function findRuntimeComponents(controller) {
+  return {
+    "find/Keys": ({ children }) => /* @__PURE__ */ jsx9(FindKeys, { controller, children })
+  };
+}
+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 renderRow = (row2) => /* @__PURE__ */ jsx9(
     Row3,
     {
       noIcon: true,
-      selected: index === state.index,
-      onClick: () => controller.select(match.id),
-      onContextMenu: (event) => {
-        event.preventDefault();
-        controller.requestContextMenu?.(match.id, event.clientX, event.clientY);
-      },
-      label: /* @__PURE__ */ jsx9("span", { children: highlightSegments(match.snippet ?? "", match.ranges).map((segment, i) => /* @__PURE__ */ jsx9(
-        "span",
-        {
-          style: segment.hit ? { background: "var(--xeno-control)", borderRadius: 2 } : void 0,
-          children: segment.text
-        },
-        i
-      )) }),
-      meta: match.locationLabel
+      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 })
     },
-    match.id
+    row2.id
   );
-  let flatIndex = -1;
-  return /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, onKeyDown, children: [
+  return /* @__PURE__ */ jsxs8(FindKeys, { controller, children: [
     /* @__PURE__ */ jsx9(
       Toolbar4,
       {
-        left: /* @__PURE__ */ jsx9(
-          SearchField4,
-          {
-            value: state.text,
-            onChange: (value) => controller.setText(value),
-            placeholder
-          }
-        ),
+        left: /* @__PURE__ */ jsx9(SearchField4, { value: view.text, placeholder: view.placeholder, onChange: (value) => ui6({ kind: "text", value }) }),
         right: /* @__PURE__ */ jsxs8(ToolbarGroup2, { end: true, children: [
-          /* @__PURE__ */ jsx9(
-            IconButton6,
-            {
-              label: "Match case",
-              active: state.options.caseSensitive,
-              onClick: () => controller.setOptions({ caseSensitive: !state.options.caseSensitive }),
-              icon: /* @__PURE__ */ jsx9(CaseIcon, {})
-            }
-          ),
-          /* @__PURE__ */ jsx9(
-            IconButton6,
-            {
-              label: "Whole word",
-              active: state.options.wholeWord,
-              onClick: () => controller.setOptions({ wholeWord: !state.options.wholeWord }),
-              icon: /* @__PURE__ */ jsx9(WordIcon, {})
-            }
-          ),
-          /* @__PURE__ */ jsx9(
-            IconButton6,
-            {
-              label: "Regular expression",
-              active: state.options.regex,
-              onClick: () => controller.setOptions({ regex: !state.options.regex }),
-              icon: /* @__PURE__ */ jsx9(RegexIcon, {})
-            }
-          )
+          /* @__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" }) })
         ] })
       }
     ),
@@ -9490,85 +9658,39 @@ function FindPanelView({
       Toolbar4,
       {
         divided: false,
-        left: /* @__PURE__ */ jsx9(
-          StatusLine,
-          {
-            status: state.status,
-            message: state.message,
-            count: state.count,
-            displayIndex: state.displayIndex,
-            truncated: state.truncated,
-            hasText: state.text !== ""
-          }
-        ),
+        left: /* @__PURE__ */ jsxs8(Fragment6, { children: [
+          view.invalid ? /* @__PURE__ */ jsx9(Badge5, { tone: "error", title: view.message ?? void 0, children: "invalid pattern" }) : null,
+          view.failed ? /* @__PURE__ */ jsx9(Badge5, { tone: "error", title: view.message ?? void 0, children: "search failed" }) : null,
+          view.searchingBadge ? /* @__PURE__ */ jsx9(Badge5, { children: "searching\u2026" }) : null,
+          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: state.matches.length === 0,
-              onClick: () => controller.previous(),
-              icon: /* @__PURE__ */ jsx9(UpIcon, {})
-            }
-          ),
-          /* @__PURE__ */ jsx9(
-            IconButton6,
-            {
-              label: "Next match",
-              disabled: state.matches.length === 0,
-              onClick: () => controller.next(),
-              icon: /* @__PURE__ */ jsx9(DownIcon, {})
-            }
-          ),
-          /* @__PURE__ */ jsx9(TextButton3, { onClick: () => controller.setReplaceVisible(!state.replaceVisible), children: state.replaceVisible ? "Hide replace" : "Replace" })
+          /* @__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 })
         ] })
       }
     ),
-    state.message && state.status === "invalidPattern" ? /* @__PURE__ */ jsx9("div", { style: { padding: "2px 8px 4px", fontSize: 9, opacity: 0.6 }, children: state.message }) : null,
-    state.replaceVisible ? /* @__PURE__ */ jsx9(
+    view.invalid ? /* @__PURE__ */ jsx9(Text5, { role: "caption", className: "xeno-find-message", children: view.message }) : null,
+    view.replaceVisible ? /* @__PURE__ */ jsx9(
       Toolbar4,
       {
-        left: /* @__PURE__ */ jsx9(
-          SearchField4,
-          {
-            value: state.replaceText,
-            onChange: (value) => controller.setReplaceText(value),
-            placeholder: "Replace with"
-          }
-        ),
+        left: /* @__PURE__ */ jsx9(SearchField4, { value: view.replaceText, placeholder: "Replace with", onChange: (value) => ui6({ kind: "replaceText", value }) }),
         right: /* @__PURE__ */ jsxs8(ToolbarGroup2, { end: true, children: [
-          /* @__PURE__ */ jsx9(TextButton3, { disabled: !state.canReplace, onClick: () => controller.replaceCurrent(), children: "Replace" }),
-          /* @__PURE__ */ jsxs8(TextButton3, { disabled: !state.canReplace, onClick: () => controller.replaceAll(), children: [
-            "All (",
-            state.matches.length,
-            ")"
-          ] })
+          /* @__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 })
         ] })
       }
     ) : null,
-    showResults ? /* @__PURE__ */ jsx9(ScrollArea4, { children: state.status === "idle" ? /* @__PURE__ */ jsx9(EmptyState5, { title: "Find", hint: "Type to search. Enter goes to the next match." }) : state.status === "invalidPattern" ? /* @__PURE__ */ jsx9(
-      EmptyState5,
-      {
-        title: "Invalid pattern",
-        hint: state.message ?? "The expression could not be read. Fix it to search."
-      }
-    ) : state.status === "failed" ? /* @__PURE__ */ jsx9(EmptyState5, { title: "Search failed", hint: state.message ?? "The host could not complete the search." }) : state.noResults ? /* @__PURE__ */ jsx9(EmptyState5, { title: "No matches", hint: `Nothing in scope matches \u201C${state.text}\u201D.` }) : state.groups.length === 1 && state.groups[0].id === "" ? /* @__PURE__ */ jsx9(RowList3, { children: state.matches.map((m) => renderMatch(m, ++flatIndex)) }) : state.groups.map((group) => /* @__PURE__ */ jsx9(
-      Section3,
-      {
-        title: group.label || "Results",
-        flush: true,
-        badge: /* @__PURE__ */ jsx9(Badge5, { children: group.matches.length }),
-        children: /* @__PURE__ */ jsx9(RowList3, { children: group.matches.map((m) => renderMatch(m, ++flatIndex)) })
-      },
-      group.id
-    )) }) : null,
-    /* @__PURE__ */ jsx9(
-      StatusBar5,
-      {
-        left: state.truncated ? `showing first ${state.matches.length}` : void 0,
-        right: state.options.scope
-      }
-    )
+    view.showResults ? /* @__PURE__ */ jsxs8(ScrollArea4, { children: [
+      view.idle ? /* @__PURE__ */ jsx9(EmptyState5, { title: "Find", hint: "Type to search. Enter goes to the next match." }) : null,
+      view.invalid ? /* @__PURE__ */ jsx9(EmptyState5, { title: "Invalid pattern", hint: view.invalidHint }) : null,
+      view.failed ? /* @__PURE__ */ jsx9(EmptyState5, { title: "Search failed", hint: view.failedHint }) : null,
+      view.noResults ? /* @__PURE__ */ jsx9(EmptyState5, { title: "No matches", hint: view.noResultsHint }) : null,
+      view.flat ? /* @__PURE__ */ jsx9(RowList3, { children: view.rows.map(renderRow) }) : null,
+      view.grouped ? view.groups.map((group) => /* @__PURE__ */ jsx9(Section3, { title: group.label, flush: true, badge: /* @__PURE__ */ jsx9(Badge5, { children: group.count }), children: /* @__PURE__ */ jsx9(RowList3, { children: group.rows.map(renderRow) }) }, group.id)) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx9(StatusBar5, { left: view.truncatedLabel, right: view.scope })
   ] });
 }
 
@@ -10223,7 +10345,7 @@ import {
   Toolbar as Toolbar5,
   ToolbarGroup as ToolbarGroup3
 } from "@xenosystem/components/chrome";
-import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var ANCHOR_BADGE = {
   live: null,
   stale: {
@@ -10419,7 +10541,7 @@ function CommentsPanelView({
         title: "No comments",
         hint: emptyHint ?? "Select something and add a comment."
       }
-    ) : /* @__PURE__ */ jsxs9(Fragment6, { children: [
+    ) : /* @__PURE__ */ jsxs9(Fragment7, { children: [
       open.map((view) => /* @__PURE__ */ jsx10(
         ThreadCard,
         {
@@ -11654,7 +11776,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 Fragment7, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var HEADER_H2 = 24;
 var PORT_ROW_H2 = 18;
 function NodeGraphPanelView({ controller }) {
@@ -11877,7 +11999,7 @@ function NodeRect({ node, selected, zoom }) {
         children: node.title
       }
     ),
-    node.collapsed ? null : /* @__PURE__ */ jsxs10(Fragment7, { children: [
+    node.collapsed ? null : /* @__PURE__ */ jsxs10(Fragment8, { children: [
       node.inputs.map((port, i) => /* @__PURE__ */ jsx11(
         Port,
         {
@@ -12610,12 +12732,12 @@ var TreeController = class {
     }
     if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
       const fresh = now - this.typeAhead.at > this.typeAheadMs;
-      const text5 = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
-      this.typeAhead = { text: text5, at: now };
+      const text6 = (fresh ? "" : this.typeAhead.text) + event.key.toLowerCase();
+      this.typeAhead = { text: text6, 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(text5)) {
+        if (candidate.node.label.toLowerCase().startsWith(text6)) {
           this.focusedId = candidate.id;
           this.select([candidate.id]);
           return true;
@@ -12641,9 +12763,9 @@ var TreeController = class {
     return true;
   }
   /** Update the rename draft. */
-  updateRenameDraft(text5) {
+  updateRenameDraft(text6) {
     if (!this.renaming) return;
-    this.renaming = { ...this.renaming, draft: text5 };
+    this.renaming = { ...this.renaming, draft: text6 };
     this.notify();
   }
   /**
@@ -13195,7 +13317,7 @@ import {
   ToolbarGroup as ToolbarGroup5
 } from "@xenosystem/components/chrome";
 import { computeWindow as computeWindow3 } from "@xenosystem/tree-core";
-import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function TreePanelView({
   controller,
   rowHeight = 24,
@@ -13412,7 +13534,7 @@ function TreeRowView({
           onPointerUp: () => {
             if (state.drag) controller.endDrag();
           },
-          icon: /* @__PURE__ */ jsxs11(Fragment8, { children: [
+          icon: /* @__PURE__ */ jsxs11(Fragment9, { children: [
             twisty,
             /* @__PURE__ */ jsx12(NodeIcon, { icon: node.icon ?? defaultIconFor(node.kind) })
           ] }),
@@ -13442,7 +13564,7 @@ function TreeRowView({
             }
           ) : node.label,
           meta: /* @__PURE__ */ jsx12(ChildStateChip, { row: row2, controller }),
-          trailing: /* @__PURE__ */ jsxs11(Fragment8, { children: [
+          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) => (
@@ -13732,8 +13854,12 @@ export {
   EMPTY_SCHEMA,
   EMPTY_TREE,
   EMPTY_TREE_SOURCE,
+  BEHAVIOURS5 as FIND_BEHAVIOURS,
+  FIND_DECLARATION,
   FIND_PANEL_ID,
+  FIND_RUNTIME_UNITS,
   FindController,
+  FindKeys,
   FindPanelView,
   GENERIC_ICON,
   GraphController,
@@ -13776,6 +13902,7 @@ export {
   anchorStateOf,
   appliedCount,
   applyColorUi,
+  applyFindUi,
   applyHistoryUi,
   applyInspectorUi,
   applyLayersUi,
@@ -13833,7 +13960,10 @@ export {
   findManifest,
   findPanel,
   findPort,
+  findRuntimeComponents,
   findSectionOf,
+  findViewManifest,
+  findViewState,
   fitToBounds,
   fitValueRange,
   flattenVisible,