@xenosystem/blocks 0.11.3 → 0.11.5

package/dist/edit/index.js

@@ -1201,6 +1201,7 @@ var LayersPanelController = class {
 
 // src/edit/layers/react/LayersPanelView.tsx
 import { useCallback, useEffect as useEffect2, useRef as useRef2, useState, useSyncExternalStore } from "react";
+import { Badge, ChipToggle, ColorTag, Column, EmptyState, IconButton, Input, RowList, Row, ScrollArea, SearchField, StatusBar, Text, Toolbar, VirtualWindow } from "@xenosystem/components/chrome";
 
 // src/edit/layers/react/icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -1215,9 +1216,6 @@ var base = (size) => ({
   strokeLinejoin: "round",
   "aria-hidden": true
 });
-function ChevronIcon({ size = 12, className }) {
-  return /* @__PURE__ */ jsx("svg", { ...base(size), className, children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
-}
 function EyeIcon({ size = 12, className }) {
   return /* @__PURE__ */ jsxs("svg", { ...base(size), className, children: [
     /* @__PURE__ */ jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" }),
@@ -1243,21 +1241,8 @@ function UnlockIcon({ size = 12, className }) {
     /* @__PURE__ */ jsx("path", { d: "M8 11V7a4 4 0 0 1 7.5-2" })
   ] });
 }
-function KindGlyph({ size = 8 }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": true,
-      style: {
-        width: size,
-        height: size,
-        borderRadius: 2,
-        border: "1px solid currentColor",
-        opacity: 0.5,
-        flex: "0 0 auto"
-      }
-    }
-  );
+function KindGlyph({ size = 10 }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }) });
 }
 
 // src/edit/layers/react/Thumbnail.tsx
@@ -1317,7 +1302,7 @@ function Thumbnail({ size, data }) {
 }
 
 // src/edit/layers/react/LayersPanelView.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var DRAG_THRESHOLD = 4;
 function LayersPanelView({ controller }) {
   const subscribe = useCallback((cb) => controller.subscribe(cb), [controller]);
@@ -1371,6 +1356,7 @@ function LayersPanelView({ controller }) {
   const onRowPointerDown = useCallback(
     (e, row) => {
       if (e.button !== 0) return;
+      if (e.target?.closest?.("button,input")) return;
       pressRef.current = { id: row.id, x: e.clientX, y: e.clientY, dragging: false };
       controller.selectNode(row.id, { ctrl: e.ctrlKey, meta: e.metaKey, shift: e.shiftKey });
       e.currentTarget.setPointerCapture(e.pointerId);
@@ -1419,61 +1405,41 @@ function LayersPanelView({ controller }) {
     },
     [controller, renamingId]
   );
-  return /* @__PURE__ */ jsxs2("div", { style: S.root, className: "xeno-layers-panel", children: [
-    controller.isSearchShown() && /* @__PURE__ */ jsx3("div", { style: S.header, children: /* @__PURE__ */ jsx3(
-      "input",
-      {
-        type: "search",
-        value: controller.getFilter(),
-        placeholder: "Search layers",
-        onChange: (e) => controller.setFilter(e.target.value),
-        style: S.search,
-        "aria-label": "Search layers",
-        spellCheck: false
-      }
-    ) }),
-    /* @__PURE__ */ jsxs2(
-      "div",
+  return /* @__PURE__ */ jsxs2(Column, { className: "xeno-layers-panel", children: [
+    controller.isSearchShown() ? /* @__PURE__ */ jsx3(Toolbar, { children: /* @__PURE__ */ jsx3(SearchField, { value: controller.getFilter(), onChange: (v) => controller.setFilter(v), placeholder: "Search layers", label: "Search layers" }) }) : null,
+    /* @__PURE__ */ jsxs2(ScrollArea, { ref: scrollRef, onScroll, onKeyDown, tabIndex: 0, children: [
+      /* @__PURE__ */ jsx3(RowList, { role: "tree", "aria-label": "Layers", children: /* @__PURE__ */ jsx3(VirtualWindow, { totalHeight: window_.totalHeight, offsetTop: window_.offsetTop, children: windowRows.map((row) => /* @__PURE__ */ jsx3(
+        LayerRow,
+        {
+          row,
+          controller,
+          columns,
+          rowHeight,
+          selected: controller.isSelected(row.id),
+          active: controller.getActiveId() === row.id,
+          renaming: renamingId === row.id,
+          renameDraft,
+          onRenameDraft: setRenameDraft,
+          dropHint: drag?.target && drag.target.targetId === row.id ? drag.target.position : null,
+          onPointerDown: onRowPointerDown,
+          onPointerMove: onRowPointerMove,
+          onPointerUp: onRowPointerUp
+        },
+        row.id
+      )) }) }),
+      rows.length === 0 ? /* @__PURE__ */ jsx3(EmptyState, { title: "No layers" }) : null
+    ] }),
+    /* @__PURE__ */ jsx3(
+      StatusBar,
       {
-        ref: scrollRef,
-        style: S.scroll,
-        onScroll,
-        onKeyDown,
-        tabIndex: 0,
-        role: "tree",
-        "aria-label": "Layers",
-        children: [
-          /* @__PURE__ */ jsx3("div", { style: { height: window_.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx3("div", { style: { transform: `translateY(${window_.offsetTop}px)` }, children: windowRows.map((row) => /* @__PURE__ */ jsx3(
-            LayerRow,
-            {
-              row,
-              controller,
-              columns,
-              rowHeight,
-              selected: controller.isSelected(row.id),
-              active: controller.getActiveId() === row.id,
-              renaming: renamingId === row.id,
-              renameDraft,
-              onRenameDraft: setRenameDraft,
-              dropHint: drag?.target && drag.target.targetId === row.id ? drag.target.position : null,
-              onPointerDown: onRowPointerDown,
-              onPointerMove: onRowPointerMove,
-              onPointerUp: onRowPointerUp
-            },
-            row.id
-          )) }) }),
-          rows.length === 0 && /* @__PURE__ */ jsx3("div", { style: S.empty, children: "No layers" })
-        ]
+        left: /* @__PURE__ */ jsxs2(Text, { role: "number", children: [
+          rows.length,
+          " ",
+          rows.length === 1 ? "layer" : "layers"
+        ] }),
+        right: controller.getOrderLabel() ? /* @__PURE__ */ jsx3(Text, { role: "meta", children: controller.getOrderLabel() }) : null
       }
-    ),
-    /* @__PURE__ */ jsxs2("div", { style: S.footer, children: [
-      /* @__PURE__ */ jsxs2("span", { children: [
-        rows.length,
-        " ",
-        rows.length === 1 ? "layer" : "layers"
-      ] }),
-      controller.getOrderLabel() && /* @__PURE__ */ jsx3("span", { style: S.dim, children: controller.getOrderLabel() })
-    ] })
+    )
   ] });
 }
 function LayerRow(props) {
@@ -1481,25 +1447,49 @@ function LayerRow(props) {
   const node = row.node;
   const container = isContainer(node);
   const thumb = controller.getThumbnail(node.thumbnailKey);
-  const rowStyle = {
-    ...S.row,
-    height: rowHeight,
-    paddingLeft: 4 + row.depth * 10,
-    background: selected ? "var(--xeno-border)" : "transparent",
-    opacity: row.matched ? 1 : 0.45,
-    boxShadow: active ? "inset 0 0 0 1px var(--xeno-control)" : void 0,
-    borderTop: dropHint === "before" ? "1px solid var(--xeno-muted)" : "1px solid transparent",
-    borderBottom: dropHint === "after" ? "1px solid var(--xeno-muted)" : "1px solid transparent",
-    outline: dropHint === "into" ? "1px solid var(--xeno-active)" : void 0
-  };
-  return /* @__PURE__ */ jsxs2(
-    "div",
+  return /* @__PURE__ */ jsx3(
+    Row,
     {
       "data-layer-row": row.id,
-      role: "treeitem",
-      "aria-selected": selected,
-      "aria-expanded": container ? row.expanded : void 0,
-      style: rowStyle,
+      height: rowHeight,
+      depth: row.depth,
+      selected,
+      active,
+      dimmed: !row.matched,
+      dropHint,
+      expanded: container ? row.expanded : void 0,
+      onExpandedChange: container ? () => controller.toggleExpanded(row.id) : void 0,
+      icon: columns.includes("thumbnail") && node.thumbnailKey ? /* @__PURE__ */ jsx3(Thumbnail, { size: controller.getThumbnailSize(), data: thumb }) : /* @__PURE__ */ jsx3(KindGlyph, {}),
+      leading: /* @__PURE__ */ jsxs2(Fragment, { children: [
+        columns.includes("visibility") && node.visible !== void 0 ? /* @__PURE__ */ jsx3(IconButton, { size: "sm", icon: node.visible ? /* @__PURE__ */ jsx3(EyeIcon, {}) : /* @__PURE__ */ jsx3(EyeOffIcon, {}), label: node.visible ? "Hide layer" : "Show layer", active: node.visible, onClick: () => controller.toggleProp("visible", row.id) }) : null,
+        columns.includes("lock") && node.locked !== void 0 ? /* @__PURE__ */ jsx3(IconButton, { size: "sm", icon: node.locked ? /* @__PURE__ */ jsx3(LockIcon, {}) : /* @__PURE__ */ jsx3(UnlockIcon, {}), label: node.locked ? "Unlock layer" : "Lock layer", active: node.locked, onClick: () => controller.toggleProp("locked", row.id) }) : null,
+        columns.includes("solo") && node.solo !== void 0 ? /* @__PURE__ */ jsx3(ChipToggle, { glyph: "S", label: "Solo", on: !!node.solo, onChange: () => controller.toggleProp("solo", row.id) }) : null,
+        columns.includes("mute") && node.muted !== void 0 ? /* @__PURE__ */ jsx3(ChipToggle, { glyph: "M", label: "Mute", on: !!node.muted, onChange: () => controller.toggleProp("muted", row.id) }) : null,
+        columns.includes("arm") && node.armed !== void 0 ? /* @__PURE__ */ jsx3(ChipToggle, { glyph: "R", label: "Arm", on: !!node.armed, onChange: () => controller.toggleProp("armed", row.id) }) : null,
+        columns.includes("colorLabel") && node.colorLabel !== void 0 ? /* @__PURE__ */ jsx3(ColorTag, { color: node.colorLabel }) : null
+      ] }),
+      label: renaming ? /* @__PURE__ */ jsx3(
+        Input,
+        {
+          autoFocus: true,
+          value: props.renameDraft,
+          onChange: (v) => props.onRenameDraft(v),
+          onBlur: () => controller.commitRename(props.renameDraft),
+          onKeyDown: (e) => {
+            e.stopPropagation();
+            if (e.key === "Enter") controller.commitRename(props.renameDraft);
+            if (e.key === "Escape") controller.cancelRename();
+          },
+          label: "Layer name"
+        }
+      ) : node.name,
+      trailing: /* @__PURE__ */ jsxs2(Fragment, { children: [
+        node.adornments?.map((a, i) => /* @__PURE__ */ jsx3(Badge, { size: "sm", title: a.tooltip, children: a.kind === "spinner" ? "\u2026" : a.label ?? "" }, a.id ?? `${a.kind}-${i}`)),
+        columns.includes("opacity") && node.opacity !== void 0 ? /* @__PURE__ */ jsxs2(Text, { role: "number", children: [
+          Math.round(node.opacity * 100),
+          "%"
+        ] }) : null
+      ] }),
       onPointerDown: (e) => props.onPointerDown(e, row),
       onPointerMove: props.onPointerMove,
       onPointerUp: props.onPointerUp,
@@ -1508,228 +1498,10 @@ function LayerRow(props) {
         e.preventDefault();
         controller.requestContextMenu(row.id, e.clientX, e.clientY);
       },
-      title: node.name,
-      children: [
-        /* @__PURE__ */ jsx3("span", { style: S.twistyCell, children: container && /* @__PURE__ */ jsx3(
-          "button",
-          {
-            type: "button",
-            style: {
-              ...S.iconBtn,
-              transform: row.expanded ? "rotate(90deg)" : "none"
-            },
-            onPointerDown: (e) => e.stopPropagation(),
-            onClick: (e) => {
-              e.stopPropagation();
-              controller.toggleExpanded(row.id);
-            },
-            "aria-label": row.expanded ? "Collapse" : "Expand",
-            children: /* @__PURE__ */ jsx3(ChevronIcon, {})
-          }
-        ) }),
-        columns.includes("visibility") && node.visible !== void 0 && /* @__PURE__ */ jsx3(
-          "button",
-          {
-            type: "button",
-            style: { ...S.iconBtn, opacity: node.visible ? 0.85 : 0.35 },
-            onPointerDown: (e) => e.stopPropagation(),
-            onClick: (e) => {
-              e.stopPropagation();
-              controller.toggleProp("visible", row.id);
-            },
-            "aria-label": node.visible ? "Hide layer" : "Show layer",
-            children: node.visible ? /* @__PURE__ */ jsx3(EyeIcon, {}) : /* @__PURE__ */ jsx3(EyeOffIcon, {})
-          }
-        ),
-        columns.includes("lock") && node.locked !== void 0 && /* @__PURE__ */ jsx3(
-          "button",
-          {
-            type: "button",
-            style: { ...S.iconBtn, opacity: node.locked ? 0.85 : 0.3 },
-            onPointerDown: (e) => e.stopPropagation(),
-            onClick: (e) => {
-              e.stopPropagation();
-              controller.toggleProp("locked", row.id);
-            },
-            "aria-label": node.locked ? "Unlock layer" : "Lock layer",
-            children: node.locked ? /* @__PURE__ */ jsx3(LockIcon, {}) : /* @__PURE__ */ jsx3(UnlockIcon, {})
-          }
-        ),
-        columns.includes("solo") && node.solo !== void 0 && /* @__PURE__ */ jsx3(ToggleChip, { label: "S", on: !!node.solo, onClick: () => controller.toggleProp("solo", row.id) }),
-        columns.includes("mute") && node.muted !== void 0 && /* @__PURE__ */ jsx3(ToggleChip, { label: "M", on: !!node.muted, onClick: () => controller.toggleProp("muted", row.id) }),
-        columns.includes("arm") && node.armed !== void 0 && /* @__PURE__ */ jsx3(ToggleChip, { label: "R", on: !!node.armed, onClick: () => controller.toggleProp("armed", row.id) }),
-        columns.includes("colorLabel") && node.colorLabel !== void 0 && /* @__PURE__ */ jsx3(
-          "span",
-          {
-            style: {
-              ...S.colorLabel,
-              background: node.colorLabel || "transparent",
-              border: node.colorLabel ? "none" : "1px solid var(--xeno-control)"
-            },
-            "aria-hidden": true
-          }
-        ),
-        columns.includes("thumbnail") && node.thumbnailKey && /* @__PURE__ */ jsx3(Thumbnail, { size: controller.getThumbnailSize(), data: thumb }),
-        !node.thumbnailKey && /* @__PURE__ */ jsx3(KindGlyph, {}),
-        renaming ? /* @__PURE__ */ jsx3(
-          "input",
-          {
-            autoFocus: true,
-            value: props.renameDraft,
-            onChange: (e) => props.onRenameDraft(e.target.value),
-            onPointerDown: (e) => e.stopPropagation(),
-            onBlur: () => controller.commitRename(props.renameDraft),
-            onKeyDown: (e) => {
-              e.stopPropagation();
-              if (e.key === "Enter") controller.commitRename(props.renameDraft);
-              if (e.key === "Escape") controller.cancelRename();
-            },
-            style: S.renameInput,
-            "aria-label": "Layer name"
-          }
-        ) : /* @__PURE__ */ jsx3("span", { style: S.name, children: node.name }),
-        node.adornments?.map((a, i) => /* @__PURE__ */ jsx3("span", { style: S.badge, title: a.tooltip, children: a.kind === "spinner" ? "\u2026" : a.label ?? "" }, a.id ?? `${a.kind}-${i}`)),
-        columns.includes("opacity") && node.opacity !== void 0 && /* @__PURE__ */ jsxs2("span", { style: S.opacity, children: [
-          Math.round(node.opacity * 100),
-          "%"
-        ] })
-      ]
-    }
-  );
-}
-function ToggleChip({
-  label,
-  on,
-  onClick
-}) {
-  return /* @__PURE__ */ jsx3(
-    "button",
-    {
-      type: "button",
-      style: { ...S.chip, opacity: on ? 1 : 0.35, background: on ? "var(--xeno-control)" : "transparent" },
-      onPointerDown: (e) => e.stopPropagation(),
-      onClick: (e) => {
-        e.stopPropagation();
-        onClick();
-      },
-      "aria-pressed": on,
-      "aria-label": label,
-      children: label
+      title: node.name
     }
   );
 }
-var S = {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    minHeight: 0,
-    fontSize: 11,
-    color: "var(--xeno-text)",
-    background: "var(--xeno-canvas)",
-    userSelect: "none"
-  },
-  header: {
-    display: "flex",
-    alignItems: "center",
-    padding: "4px 6px",
-    background: "var(--xeno-panel-header)",
-    flex: "0 0 auto"
-  },
-  search: {
-    width: "100%",
-    height: 20,
-    background: "var(--xeno-canvas)",
-    color: "inherit",
-    border: "1px solid var(--xeno-border)",
-    borderRadius: 2,
-    fontSize: 11,
-    padding: "0 6px",
-    outline: "none"
-  },
-  scroll: { flex: "1 1 auto", minHeight: 0, overflowY: "auto", overflowX: "hidden", outline: "none" },
-  row: {
-    display: "flex",
-    alignItems: "center",
-    gap: 4,
-    paddingRight: 6,
-    boxSizing: "border-box",
-    cursor: "default",
-    overflow: "hidden"
-  },
-  twistyCell: { width: 12, display: "flex", alignItems: "center", flex: "0 0 auto" },
-  iconBtn: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 14,
-    height: 14,
-    padding: 0,
-    border: "none",
-    borderRadius: 2,
-    background: "transparent",
-    color: "inherit",
-    cursor: "pointer",
-    flex: "0 0 auto"
-  },
-  chip: {
-    width: 14,
-    height: 14,
-    padding: 0,
-    border: "none",
-    borderRadius: 2,
-    color: "inherit",
-    fontSize: 9,
-    lineHeight: "14px",
-    cursor: "pointer",
-    flex: "0 0 auto"
-  },
-  colorLabel: { width: 4, height: 14, borderRadius: 2, flex: "0 0 auto" },
-  name: { flex: "1 1 auto", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 },
-  renameInput: {
-    flex: "1 1 auto",
-    minWidth: 0,
-    height: 16,
-    background: "var(--xeno-canvas)",
-    color: "inherit",
-    border: "1px solid var(--xeno-control)",
-    borderRadius: 2,
-    fontSize: 11,
-    padding: "0 4px",
-    outline: "none"
-  },
-  badge: {
-    fontSize: 9,
-    padding: "0 4px",
-    height: 14,
-    lineHeight: "14px",
-    borderRadius: 2,
-    background: "var(--xeno-border-subtle)",
-    color: "var(--xeno-muted)",
-    flex: "0 0 auto"
-  },
-  opacity: {
-    fontSize: 10,
-    color: "var(--xeno-muted)",
-    fontVariantNumeric: "tabular-nums",
-    flex: "0 0 auto",
-    minWidth: 30,
-    textAlign: "right"
-  },
-  empty: { padding: 12, fontSize: 10, opacity: 0.4, textTransform: "uppercase", letterSpacing: "0.08em" },
-  footer: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 8,
-    padding: "2px 6px",
-    fontSize: 9,
-    color: "var(--xeno-muted)",
-    background: "var(--xeno-panel-header)",
-    flex: "0 0 auto"
-  },
-  dim: { opacity: 0.7 }
-};
 
 // src/edit/layers/panel.ts
 function createLayersPanel(options = {}) {
@@ -3038,7 +2810,7 @@ var InspectorPanelController = class {
 
 // src/edit/inspector/react/InspectorPanelView.tsx
 import { useCallback as useCallback3, useSyncExternalStore as useSyncExternalStore2 } from "react";
-import { Badge, Column, EmptyState, Field, FieldGroup, IconButton as IconButton2, ScrollArea, SearchField, Section, Select as Select2, Stack as Stack2, Text as Text2 } from "@xenosystem/components/chrome";
+import { Badge as Badge2, Column as Column2, EmptyState as EmptyState2, Field, FieldGroup, IconButton as IconButton3, ScrollArea as ScrollArea2, SearchField as SearchField2, Section, Select as Select2, Stack as Stack2, Text as Text3 } from "@xenosystem/components/chrome";
 
 // src/edit/inspector/react/icons.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -3092,19 +2864,19 @@ function XIcon({ size = 10 }) {
 import { useCallback as useCallback2, useRef as useRef3 } from "react";
 import {
   AxisLabel,
-  IconButton,
-  Input,
+  IconButton as IconButton2,
+  Input as Input2,
   ProportionBar,
   SegmentedControl,
   Select,
   Stack,
   Swatch,
-  Text,
+  Text as Text2,
   TextArea,
   TextButton,
   Toggle
 } from "@xenosystem/components/chrome";
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function displayText(field, controller) {
   const draft = controller.getDraft(field.id);
   if (draft !== void 0) return draft;
@@ -3216,7 +2988,7 @@ function NumberWidget({ field, controller, component }) {
   return /* @__PURE__ */ jsxs4(Stack, { direction: "row", gap: 2, pad: "none", children: [
     component !== void 0 && field.components?.[component] ? /* @__PURE__ */ jsx5(AxisLabel, { scrubbable: editable, onPointerDown, onPointerMove, onPointerUp, children: field.components[component] }) : null,
     /* @__PURE__ */ jsx5(
-      Input,
+      Input2,
       {
         inputMode: "decimal",
         value: text,
@@ -3240,7 +3012,7 @@ function VectorWidget({ field, controller }) {
   const expanded = controller.isExpanded(field.id) || !controller.isUniformVector(field.id);
   const value = controller.getFieldValue(field.id);
   const count = Array.isArray(value) ? value.length : field.components?.length ?? 0;
-  const toggle = (label, title) => /* @__PURE__ */ jsx5(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: "\u22EF" }), label, onClick: () => controller.toggleExpanded(field.id) });
+  const toggle = (label, title) => /* @__PURE__ */ jsx5(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: "\u22EF" }), label, onClick: () => controller.toggleExpanded(field.id) });
   if (!expanded && field.expandable) {
     return /* @__PURE__ */ jsxs4(Stack, { direction: "row", gap: 3, pad: "none", children: [
       /* @__PURE__ */ jsx5(NumberWidget, { field, controller, component: 0 }),
@@ -3269,7 +3041,7 @@ function TextWidget({ field, controller }) {
     onKeyDown: handlers.onKeyDown
   };
   if (field.type === "textarea") return /* @__PURE__ */ jsx5(TextArea, { ...shared, rows: field.rows ?? 3 });
-  return /* @__PURE__ */ jsx5(Input, { ...shared });
+  return /* @__PURE__ */ jsx5(Input2, { ...shared });
 }
 function CodeWidget({ field, controller }) {
   const editable = isFieldEditable(field);
@@ -3369,11 +3141,11 @@ function ListWidget({ field, controller }) {
   };
   return /* @__PURE__ */ jsxs4(Stack, { gap: 2, pad: "none", children: [
     items.map((item, i) => /* @__PURE__ */ jsxs4(Stack, { direction: "row", gap: 2, pad: "none", children: [
-      /* @__PURE__ */ jsx5(Text, { role: "meta", children: typeof item === "string" ? item : JSON.stringify(item) }),
-      editable ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-        /* @__PURE__ */ jsx5(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: "\u2191" }), label: "Move up", disabled: i === 0, onClick: () => move(i, i - 1) }),
-        /* @__PURE__ */ jsx5(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: "\u2193" }), label: "Move down", disabled: i === items.length - 1, onClick: () => move(i, i + 1) }),
-        /* @__PURE__ */ jsx5(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx5(XIcon, {}), label: "Remove", onClick: () => write(items.filter((_, j) => j !== i)) })
+      /* @__PURE__ */ jsx5(Text2, { role: "meta", children: typeof item === "string" ? item : JSON.stringify(item) }),
+      editable ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        /* @__PURE__ */ jsx5(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: "\u2191" }), label: "Move up", disabled: i === 0, onClick: () => move(i, i - 1) }),
+        /* @__PURE__ */ jsx5(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: "\u2193" }), label: "Move down", disabled: i === items.length - 1, onClick: () => move(i, i + 1) }),
+        /* @__PURE__ */ jsx5(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx5(XIcon, {}), label: "Remove", onClick: () => write(items.filter((_, j) => j !== i)) })
       ] }) : null
     ] }, i)),
     editable ? /* @__PURE__ */ jsx5(TextButton, { onClick: () => write([...items, ""]), children: "+ Add" }) : null
@@ -3381,7 +3153,7 @@ function ListWidget({ field, controller }) {
 }
 function InfoWidget({ field, controller }) {
   const value = controller.getFieldValue(field.id);
-  return /* @__PURE__ */ jsx5(Text, { role: "meta", children: value === void 0 || value === null ? "\u2014" : String(value) });
+  return /* @__PURE__ */ jsx5(Text2, { role: "meta", children: value === void 0 || value === null ? "\u2014" : String(value) });
 }
 function JsonWidget({ field, controller }) {
   const editable = isFieldEditable(field);
@@ -3403,7 +3175,7 @@ function JsonWidget({ field, controller }) {
 }
 
 // src/edit/inspector/react/InspectorPanelView.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function InspectorPanelView({ controller }) {
   const subscribe = useCallback3((cb) => controller.subscribe(cb), [controller]);
   const getSnapshot = useCallback3(() => controller.getRevision(), [controller]);
@@ -3421,15 +3193,15 @@ function InspectorPanelView({ controller }) {
   );
   const multi = targets.length > 1;
   const blocked = multi && !controller.canEditTargets();
-  return /* @__PURE__ */ jsxs5(Column, { className: "xeno-inspector-panel", children: [
+  return /* @__PURE__ */ jsxs5(Column2, { className: "xeno-inspector-panel", children: [
     controller.isSearchShown() ? /* @__PURE__ */ jsxs5(Stack2, { direction: "row", gap: 6, children: [
-      /* @__PURE__ */ jsx6(SearchField, { value: controller.getFilter(), onChange: (v) => controller.setFilter(v), placeholder: "Search properties", label: "Search properties" }),
-      targets.length > 0 ? /* @__PURE__ */ jsx6(Badge, { children: multi ? `${targets.length} selected` : targets[0]?.label ?? targets[0]?.id }) : null
+      /* @__PURE__ */ jsx6(SearchField2, { value: controller.getFilter(), onChange: (v) => controller.setFilter(v), placeholder: "Search properties", label: "Search properties" }),
+      targets.length > 0 ? /* @__PURE__ */ jsx6(Badge2, { children: multi ? `${targets.length} selected` : targets[0]?.label ?? targets[0]?.id }) : null
     ] }) : null,
-    multi ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text2, { role: "caption", children: blocked ? `${targets.length} selected \u2014 multi-editing is disabled` : `${targets.length} selected \xB7 shared values shown` }) }) : null,
-    /* @__PURE__ */ jsx6(ScrollArea, { children: /* @__PURE__ */ jsxs5("div", { onKeyDown, tabIndex: 0, role: "group", "aria-label": "Properties", className: "xeno-inspector-properties", children: [
+    multi ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text3, { role: "caption", children: blocked ? `${targets.length} selected \u2014 multi-editing is disabled` : `${targets.length} selected \xB7 shared values shown` }) }) : null,
+    /* @__PURE__ */ jsx6(ScrollArea2, { children: /* @__PURE__ */ jsxs5("div", { onKeyDown, tabIndex: 0, role: "group", "aria-label": "Properties", className: "xeno-inspector-properties", children: [
       sections.map((projected) => /* @__PURE__ */ jsx6(SectionView, { projected, controller }, projected.section.id)),
-      sections.length === 0 ? /* @__PURE__ */ jsx6(EmptyState, { title: targets.length === 0 ? "Nothing selected" : "No properties" }) : null
+      sections.length === 0 ? /* @__PURE__ */ jsx6(EmptyState2, { title: targets.length === 0 ? "Nothing selected" : "No properties" }) : null
     ] }) })
   ] });
 }
@@ -3445,13 +3217,13 @@ function SectionView({ projected, controller }) {
       onCollapsedChange: () => controller.toggleSectionCollapsed(section.id),
       enabled: section.enabled?.value,
       onEnabledChange: section.enabled ? () => controller.toggleSectionEnabled(section.id) : void 0,
-      badge: section.badge ? /* @__PURE__ */ jsx6(Badge, { children: section.badge }) : null,
-      actions: /* @__PURE__ */ jsxs5(Fragment2, { children: [
-        section.actions?.map((action) => /* @__PURE__ */ jsx6(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx6("span", { "aria-hidden": true, children: action.label.slice(0, 1) }), label: action.label, disabled: action.disabled, onClick: () => controller.runAction(section.id, action.id) }, action.id)),
+      badge: section.badge ? /* @__PURE__ */ jsx6(Badge2, { children: section.badge }) : null,
+      actions: /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        section.actions?.map((action) => /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6("span", { "aria-hidden": true, children: action.label.slice(0, 1) }), label: action.label, disabled: action.disabled, onClick: () => controller.runAction(section.id, action.id) }, action.id)),
         section.addMenu && section.addMenu.length > 0 ? /* @__PURE__ */ jsx6(AddMenu, { section, controller }) : null
       ] }),
       children: [
-        empty && section.emptyHint ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text2, { role: "caption", children: section.emptyHint }) }) : null,
+        empty && section.emptyHint ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text3, { role: "caption", children: section.emptyHint }) }) : null,
         /* @__PURE__ */ jsx6(FieldGroup, { labelWidth: controller.getLabelWidth(), children: fields.map((field) => /* @__PURE__ */ jsx6(FieldRow, { field, controller }, field.id)) })
       ]
     }
@@ -3469,7 +3241,7 @@ function FieldRow({ field, controller }) {
   const easingOptions = anim?.easingOptions ?? [];
   const easing = anim?.easing ?? "";
   const easingAll = easingOptions.some((o) => o.value === easing) ? easingOptions : [{ value: easing, label: easing || "\u2014" }, ...easingOptions];
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
     /* @__PURE__ */ jsx6(
       Field,
       {
@@ -3478,24 +3250,24 @@ function FieldRow({ field, controller }) {
         focused,
         onLabelClick: () => controller.focusField(field.id),
         onContextMenu: (x, y) => controller.requestContextMenu(field.id, x, y),
-        leading: showKeyframes ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-          /* @__PURE__ */ jsx6(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx6(StopwatchIcon, {}), label: "Toggle animation", active: anim.animated, onClick: () => controller.keyframe(field.id, "toggleAnim") }),
-          anim.animated ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-            /* @__PURE__ */ jsx6(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx6(PrevIcon, {}), label: "Previous keyframe", disabled: anim.canPrev === false, onClick: () => controller.keyframe(field.id, "prev") }),
-            /* @__PURE__ */ jsx6(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx6(DiamondIcon, { filled: !!anim.onKeyframe }), label: anim.onKeyframe ? "Remove keyframe" : "Add keyframe", onClick: () => controller.keyframe(field.id, anim.onKeyframe ? "remove" : "add") }),
-            /* @__PURE__ */ jsx6(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx6(NextIcon, {}), label: "Next keyframe", disabled: anim.canNext === false, onClick: () => controller.keyframe(field.id, "next") })
+        leading: showKeyframes ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+          /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(StopwatchIcon, {}), label: "Toggle animation", active: anim.animated, onClick: () => controller.keyframe(field.id, "toggleAnim") }),
+          anim.animated ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+            /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(PrevIcon, {}), label: "Previous keyframe", disabled: anim.canPrev === false, onClick: () => controller.keyframe(field.id, "prev") }),
+            /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(DiamondIcon, { filled: !!anim.onKeyframe }), label: anim.onKeyframe ? "Remove keyframe" : "Add keyframe", onClick: () => controller.keyframe(field.id, anim.onKeyframe ? "remove" : "add") }),
+            /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(NextIcon, {}), label: "Next keyframe", disabled: anim.canNext === false, onClick: () => controller.keyframe(field.id, "next") })
           ] }) : null
         ] }) : null,
-        trailing: /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        trailing: /* @__PURE__ */ jsxs5(Fragment3, { children: [
           showKeyframes && anim.animated && anim.onKeyframe ? /* @__PURE__ */ jsx6(Select2, { size: "sm", options: easingAll, value: easing, label: "Easing", onChange: (v) => controller.keyframe(field.id, "setEasing", v) }) : null,
-          showKeyframes ? /* @__PURE__ */ jsx6(Badge, { size: "sm", children: controller.keyframeChip(field.id) }) : null,
-          controller.areTokensShown() && field.token?.bindable !== false ? /* @__PURE__ */ jsx6(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx6(LinkIcon, {}), label: bound ? "Unbind token" : "Bind token", active: bound, onClick: () => controller.bindToken(field.id, bound ? null : controller.getTokens()[0]?.id ?? null) }) : null,
-          field.defaultValue !== void 0 && isFieldEditable(field) ? /* @__PURE__ */ jsx6(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx6(ResetIcon, {}), label: "Reset to default", onClick: () => controller.resetField(field.id) }) : null
+          showKeyframes ? /* @__PURE__ */ jsx6(Badge2, { size: "sm", children: controller.keyframeChip(field.id) }) : null,
+          controller.areTokensShown() && field.token?.bindable !== false ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(LinkIcon, {}), label: bound ? "Unbind token" : "Bind token", active: bound, onClick: () => controller.bindToken(field.id, bound ? null : controller.getTokens()[0]?.id ?? null) }) : null,
+          field.defaultValue !== void 0 && isFieldEditable(field) ? /* @__PURE__ */ jsx6(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx6(ResetIcon, {}), label: "Reset to default", onClick: () => controller.resetField(field.id) }) : null
         ] }),
-        children: bound ? /* @__PURE__ */ jsx6(Badge, { title: `Bound to ${field.token?.tokenName ?? field.token?.tokenId}`, children: field.token?.tokenName ?? field.token?.tokenId }) : /* @__PURE__ */ jsx6(FieldWidget, { field, controller })
+        children: bound ? /* @__PURE__ */ jsx6(Badge2, { title: `Bound to ${field.token?.tokenName ?? field.token?.tokenId}`, children: field.token?.tokenName ?? field.token?.tokenId }) : /* @__PURE__ */ jsx6(FieldWidget, { field, controller })
       }
     ),
-    field.description && field.type === "info" ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text2, { role: "caption", children: field.description }) }) : null
+    field.description && field.type === "info" ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text3, { role: "caption", children: field.description }) }) : null
   ] });
 }
 function FieldWidget({
@@ -4483,6 +4255,7 @@ var HistoryPanelController = class {
 
 // src/edit/history/react/HistoryPanelView.tsx
 import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef4, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { Badge as Badge3, Column as Column3, EmptyState as EmptyState3, IconButton as IconButton4, InlineConfirm, RowList as RowList2, Row as Row2, ScrollArea as ScrollArea3, SearchField as SearchField3, StatusBar as StatusBar2, Text as Text4, Toolbar as Toolbar2, VirtualWindow as VirtualWindow2 } from "@xenosystem/components/chrome";
 
 // src/edit/history/react/icons.tsx
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -4578,7 +4351,7 @@ function PendingGlyph({ size = 9 }) {
 }
 
 // src/edit/history/react/HistoryPanelView.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function HistoryPanelView({ controller }) {
   const subscribe = useCallback4((cb) => controller.subscribe(cb), [controller]);
   const getSnapshot = useCallback4(() => controller.getRevision(), [controller]);
@@ -4627,106 +4400,54 @@ function HistoryPanelView({ controller }) {
     },
     [controller]
   );
-  return /* @__PURE__ */ jsxs7("div", { style: S2.root, className: "xeno-history-panel", children: [
-    /* @__PURE__ */ jsxs7("div", { style: S2.header, children: [
-      /* @__PURE__ */ jsx8(
-        "button",
-        {
-          type: "button",
-          style: { ...S2.iconBtn, opacity: controller.canUndo() ? 0.8 : 0.25 },
-          disabled: !controller.canUndo(),
-          onClick: () => controller.undo(),
-          title: "Undo",
-          "aria-label": "Undo",
-          children: /* @__PURE__ */ jsx8(UndoIcon, {})
-        }
-      ),
-      /* @__PURE__ */ jsx8(
-        "button",
-        {
-          type: "button",
-          style: { ...S2.iconBtn, opacity: controller.canRedo() ? 0.8 : 0.25 },
-          disabled: !controller.canRedo(),
-          onClick: () => controller.redo(),
-          title: "Redo",
-          "aria-label": "Redo",
-          children: /* @__PURE__ */ jsx8(RedoIcon, {})
-        }
-      ),
-      controller.isSearchShown() && /* @__PURE__ */ jsx8(
-        "input",
-        {
-          type: "search",
-          value: controller.getFilter(),
-          placeholder: "Search history",
-          onChange: (e) => controller.setFilter(e.target.value),
-          style: S2.search,
-          "aria-label": "Search history",
-          spellCheck: false
-        }
-      ),
-      /* @__PURE__ */ jsxs7("span", { style: S2.counter, children: [
-        controller.getAppliedCount(),
-        " / ",
-        controller.getTotalCount()
-      ] }),
-      controller.isClearAllowed() && /* @__PURE__ */ jsx8(
-        "button",
+  return /* @__PURE__ */ jsxs7(Column3, { className: "xeno-history-panel", children: [
+    /* @__PURE__ */ jsx8(
+      Toolbar2,
+      {
+        left: /* @__PURE__ */ jsxs7(Fragment4, { children: [
+          /* @__PURE__ */ jsx8(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx8(UndoIcon, {}), label: "Undo", disabled: !controller.canUndo(), onClick: () => controller.undo() }),
+          /* @__PURE__ */ jsx8(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx8(RedoIcon, {}), label: "Redo", disabled: !controller.canRedo(), onClick: () => controller.redo() })
+        ] }),
+        right: /* @__PURE__ */ jsxs7(Fragment4, { children: [
+          /* @__PURE__ */ jsxs7(Text4, { role: "number", children: [
+            controller.getAppliedCount(),
+            " / ",
+            controller.getTotalCount()
+          ] }),
+          controller.isClearAllowed() ? /* @__PURE__ */ jsx8(IconButton4, { size: "sm", icon: /* @__PURE__ */ jsx8(TrashIcon, {}), label: "Clear history", onClick: () => controller.requestClear() }) : null
+        ] }),
+        children: controller.isSearchShown() ? /* @__PURE__ */ jsx8(SearchField3, { value: controller.getFilter(), onChange: (v) => controller.setFilter(v), placeholder: "Search history", label: "Search history" }) : null
+      }
+    ),
+    controller.isConfirmingClear() ? /* @__PURE__ */ jsx8(InlineConfirm, { message: "Clear all history?", label: "Confirm clear history", confirmLabel: "Clear", onConfirm: () => controller.confirmClearNow(), onCancel: () => controller.cancelClear() }) : null,
+    controller.isPruned() ? /* @__PURE__ */ jsx8(Text4, { role: "caption", children: "Earlier history discarded (limit reached)" }) : null,
+    /* @__PURE__ */ jsxs7(ScrollArea3, { ref: scrollRef, onScroll, onKeyDown, onMouseLeave: () => controller.setHovered(null), tabIndex: 0, children: [
+      /* @__PURE__ */ jsx8(RowList2, { role: "listbox", "aria-label": "History", children: /* @__PURE__ */ jsx8(VirtualWindow2, { totalHeight: window_.totalHeight, offsetTop: window_.offsetTop, children: windowRows.map((row) => /* @__PURE__ */ jsx8(
+        HistoryRowView,
         {
-          type: "button",
-          style: S2.iconBtn,
-          onClick: () => controller.requestClear(),
-          title: "Clear history",
-          "aria-label": "Clear history",
-          children: /* @__PURE__ */ jsx8(TrashIcon, {})
-        }
-      )
-    ] }),
-    controller.isConfirmingClear() && /* @__PURE__ */ jsxs7("div", { style: S2.confirmBar, role: "alertdialog", "aria-label": "Confirm clear history", children: [
-      /* @__PURE__ */ jsx8("span", { children: "Clear all history?" }),
-      /* @__PURE__ */ jsxs7("span", { style: S2.confirmActions, children: [
-        /* @__PURE__ */ jsx8("button", { type: "button", style: S2.textBtn, onClick: () => controller.confirmClearNow(), children: "Clear" }),
-        /* @__PURE__ */ jsx8("button", { type: "button", style: S2.textBtnDim, onClick: () => controller.cancelClear(), children: "Cancel" })
-      ] })
+          row,
+          controller,
+          rowHeight,
+          focused: controller.getFocused() === row.entryId
+        },
+        row.entryId ?? "__original__"
+      )) }) }),
+      rows.length === 0 ? /* @__PURE__ */ jsx8(EmptyState3, { title: "No history" }) : null
     ] }),
-    controller.isPruned() && /* @__PURE__ */ jsx8("div", { style: S2.prunedNote, children: "Earlier history discarded (limit reached)" }),
-    /* @__PURE__ */ jsxs7(
-      "div",
+    memory ? /* @__PURE__ */ jsx8(
+      StatusBar2,
       {
-        ref: scrollRef,
-        style: S2.scroll,
-        onScroll,
-        onKeyDown,
-        onMouseLeave: () => controller.setHovered(null),
-        tabIndex: 0,
-        role: "listbox",
-        "aria-label": "History",
-        children: [
-          /* @__PURE__ */ jsx8("div", { style: { height: window_.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx8("div", { style: { transform: `translateY(${window_.offsetTop}px)` }, children: windowRows.map((row) => /* @__PURE__ */ jsx8(
-            HistoryRowView,
-            {
-              row,
-              controller,
-              rowHeight,
-              focused: controller.getFocused() === row.entryId
-            },
-            row.entryId ?? "__original__"
-          )) }) }),
-          rows.length === 0 && /* @__PURE__ */ jsx8("div", { style: S2.empty, children: "No history" })
-        ]
+        left: /* @__PURE__ */ jsxs7(Text4, { role: "number", children: [
+          memory.usedMB.toFixed(1),
+          " MB",
+          memory.limitMB ? ` / ${memory.limitMB} MB` : ""
+        ] }),
+        right: memory.onDiskCount !== void 0 ? /* @__PURE__ */ jsxs7(Text4, { role: "meta", children: [
+          memory.onDiskCount,
+          " on disk"
+        ] }) : null
       }
-    ),
-    memory && /* @__PURE__ */ jsxs7("div", { style: S2.footer, children: [
-      /* @__PURE__ */ jsxs7("span", { children: [
-        memory.usedMB.toFixed(1),
-        " MB",
-        memory.limitMB ? ` / ${memory.limitMB} MB` : ""
-      ] }),
-      memory.onDiskCount !== void 0 && /* @__PURE__ */ jsxs7("span", { style: S2.dim, children: [
-        memory.onDiskCount,
-        " on disk"
-      ] })
-    ] })
+    ) : null
   ] });
 }
 function HistoryRowView({ row, controller, rowHeight, focused }) {
@@ -4734,57 +4455,47 @@ function HistoryRowView({ row, controller, rowHeight, focused }) {
   const pending = entry?.status === "pending";
   const failed = entry?.status === "failed";
   const jumpable = controller.isJumpAllowed() && entry?.caps?.jumpable !== false;
-  const style = {
-    ...S2.row,
-    height: rowHeight,
-    background: row.current ? "var(--xeno-border)" : "transparent",
-    // FUTURE rows (after the cursor) are dimmed + struck through — the redoable region.
-    opacity: row.future ? 0.4 : 1,
-    textDecoration: row.future ? "line-through" : "none",
-    boxShadow: focused ? "inset 0 0 0 1px var(--xeno-control)" : void 0,
-    cursor: jumpable ? "pointer" : "default"
-  };
-  return /* @__PURE__ */ jsxs7(
-    "div",
-    {
-      style,
-      role: "option",
-      "aria-selected": row.current,
+  return /* @__PURE__ */ jsx8(
+    Row2,
+    {
+      height: rowHeight,
+      selected: row.current,
+      focused,
+      struck: row.future,
+      noIcon: !controller.areIconsShown(),
+      icon: /* @__PURE__ */ jsx8(EntryIcon, { name: row.kind === "original" ? "original" : controller.getIconName(entry?.kind) }),
+      label: row.label,
+      meta: row.kind === "entry" ? row.ordinal : void 0,
       "data-history-row": row.entryId ?? "__original__",
-      onClick: () => controller.jumpTo(row.entryId),
+      onClick: jumpable ? () => controller.jumpTo(row.entryId) : void 0,
       onMouseEnter: () => controller.setHovered(row.entryId),
       onContextMenu: (e) => {
         e.preventDefault();
         controller.requestContextMenu(row.entryId, e.clientX, e.clientY);
       },
       title: row.label,
-      children: [
-        controller.areIconsShown() && /* @__PURE__ */ jsx8("span", { style: S2.iconCell, children: /* @__PURE__ */ jsx8(EntryIcon, { name: row.kind === "original" ? "original" : controller.getIconName(entry?.kind) }) }),
-        /* @__PURE__ */ jsx8("span", { style: S2.ordinal, children: row.kind === "entry" ? row.ordinal : "" }),
-        /* @__PURE__ */ jsx8("span", { style: S2.label, children: row.label }),
-        pending && /* @__PURE__ */ jsx8(PendingGlyph, {}),
-        failed && /* @__PURE__ */ jsx8("span", { style: S2.failed, children: "failed" }),
-        controller.isSourceShown() && entry?.source && entry.source !== "user" && /* @__PURE__ */ jsx8("span", { style: S2.badge, title: `Source: ${entry.source}`, children: entry.source === "agent" ? "AI" : "S" }),
-        entry?.coalesced && entry.coalesced > 1 && /* @__PURE__ */ jsxs7("span", { style: S2.badge, title: `${entry.coalesced} actions coalesced`, children: [
+      trailing: /* @__PURE__ */ jsxs7(Fragment4, { children: [
+        pending ? /* @__PURE__ */ jsx8(PendingGlyph, {}) : null,
+        failed ? /* @__PURE__ */ jsx8(Badge3, { size: "sm", tone: "error", children: "failed" }) : null,
+        controller.isSourceShown() && entry?.source && entry.source !== "user" ? /* @__PURE__ */ jsx8(Badge3, { size: "sm", title: `Source: ${entry.source}`, children: entry.source === "agent" ? "AI" : "S" }) : null,
+        entry?.coalesced && entry.coalesced > 1 ? /* @__PURE__ */ jsxs7(Badge3, { size: "sm", title: `${entry.coalesced} actions coalesced`, children: [
           "\xD7",
           entry.coalesced
-        ] }),
-        controller.areTimestampsShown() && entry?.at !== void 0 && /* @__PURE__ */ jsx8("span", { style: S2.time, children: formatTime(entry.at) }),
-        pending && /* @__PURE__ */ jsx8(
-          "button",
+        ] }) : null,
+        controller.areTimestampsShown() && entry?.at !== void 0 ? /* @__PURE__ */ jsx8(Text4, { role: "meta", children: formatTime(entry.at) }) : null,
+        pending ? /* @__PURE__ */ jsx8(
+          IconButton4,
           {
-            type: "button",
-            style: S2.iconBtn,
+            size: "sm",
+            icon: /* @__PURE__ */ jsx8(XIcon2, {}),
+            label: "Cancel operation",
             onClick: (e) => {
               e.stopPropagation();
               controller.cancelPending(entry?.id);
-            },
-            title: "Cancel operation",
-            "aria-label": "Cancel operation",
-            children: /* @__PURE__ */ jsx8(XIcon2, {})
+            }
           }
-        )
-      ]
+        ) : null
+      ] })
     }
   );
 }
@@ -4793,141 +4504,6 @@ function formatTime(at) {
   if (Number.isNaN(date.getTime())) return typeof at === "string" ? at : "";
   return date.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
 }
-var S2 = {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    minHeight: 0,
-    fontSize: 11,
-    color: "var(--xeno-text)",
-    background: "var(--xeno-canvas)",
-    userSelect: "none"
-  },
-  header: {
-    display: "flex",
-    alignItems: "center",
-    gap: 4,
-    padding: "4px 6px",
-    background: "var(--xeno-panel-header)",
-    flex: "0 0 auto"
-  },
-  search: {
-    flex: "1 1 auto",
-    minWidth: 0,
-    height: 18,
-    background: "var(--xeno-canvas)",
-    color: "inherit",
-    border: "1px solid var(--xeno-border)",
-    borderRadius: 2,
-    fontSize: 11,
-    padding: "0 6px",
-    outline: "none"
-  },
-  counter: {
-    fontSize: 9,
-    color: "var(--xeno-muted)",
-    fontVariantNumeric: "tabular-nums",
-    flex: "0 0 auto"
-  },
-  iconBtn: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 16,
-    height: 16,
-    padding: 0,
-    border: "none",
-    borderRadius: 2,
-    background: "transparent",
-    color: "inherit",
-    cursor: "pointer",
-    flex: "0 0 auto"
-  },
-  confirmBar: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 8,
-    padding: "3px 6px",
-    fontSize: 10,
-    background: "var(--xeno-border-subtle)",
-    flex: "0 0 auto"
-  },
-  confirmActions: { display: "flex", gap: 8 },
-  textBtn: {
-    background: "transparent",
-    border: "none",
-    color: "inherit",
-    cursor: "pointer",
-    fontSize: 10,
-    padding: 0
-  },
-  textBtnDim: {
-    background: "transparent",
-    border: "none",
-    color: "var(--xeno-muted)",
-    cursor: "pointer",
-    fontSize: 10,
-    padding: 0
-  },
-  prunedNote: {
-    padding: "2px 6px",
-    fontSize: 9,
-    color: "var(--xeno-muted)",
-    flex: "0 0 auto"
-  },
-  scroll: { flex: "1 1 auto", minHeight: 0, overflowY: "auto", overflowX: "hidden", outline: "none" },
-  row: {
-    display: "flex",
-    alignItems: "center",
-    gap: 5,
-    padding: "0 6px",
-    boxSizing: "border-box",
-    overflow: "hidden"
-  },
-  iconCell: { display: "flex", alignItems: "center", width: 11, flex: "0 0 auto", opacity: 0.75 },
-  ordinal: {
-    fontSize: 9,
-    color: "var(--xeno-muted)",
-    fontVariantNumeric: "tabular-nums",
-    minWidth: 14,
-    textAlign: "right",
-    flex: "0 0 auto"
-  },
-  label: { flex: "1 1 auto", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 },
-  badge: {
-    fontSize: 8,
-    padding: "0 3px",
-    height: 12,
-    lineHeight: "12px",
-    borderRadius: 2,
-    background: "var(--xeno-border)",
-    color: "var(--xeno-muted)",
-    flex: "0 0 auto"
-  },
-  failed: { fontSize: 9, color: "var(--xeno-danger)", flex: "0 0 auto" },
-  time: {
-    fontSize: 9,
-    color: "var(--xeno-muted)",
-    fontVariantNumeric: "tabular-nums",
-    flex: "0 0 auto"
-  },
-  empty: { padding: 12, fontSize: 10, opacity: 0.4, textTransform: "uppercase", letterSpacing: "0.08em" },
-  footer: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 8,
-    padding: "2px 6px",
-    fontSize: 9,
-    color: "var(--xeno-muted)",
-    background: "var(--xeno-panel-header)",
-    flex: "0 0 auto",
-    fontVariantNumeric: "tabular-nums"
-  },
-  dim: { opacity: 0.7 }
-};
 
 // src/edit/history/panel.ts
 function createHistoryPanel(options = {}) {
@@ -6010,7 +5586,7 @@ function drawAlphaStrip(ctx, w, h, hsv) {
 }
 
 // src/edit/color/react/ColorPanelView.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var SPACE_LABEL = {
   hex: "HEX",
   rgb: "RGB",
@@ -6115,14 +5691,14 @@ function ColorPanelView({ controller }) {
   );
   const componentLabels = COMPONENT_LABELS[space];
   const comps = value.components ?? [];
-  return /* @__PURE__ */ jsxs8("div", { style: S3.root, className: "xeno-color-panel", children: [
-    controller.getChannelsMode() === "fg-bg" && /* @__PURE__ */ jsxs8("div", { style: S3.channels, children: [
+  return /* @__PURE__ */ jsxs8("div", { style: S.root, className: "xeno-color-panel", children: [
+    controller.getChannelsMode() === "fg-bg" && /* @__PURE__ */ jsxs8("div", { style: S.channels, children: [
       /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
           "aria-pressed": controller.getActiveChannel() === "fg",
-          style: { ...S3.chip, ...controller.getActiveChannel() === "fg" ? S3.chipActive : null, background: value.hex },
+          style: { ...S.chip, ...controller.getActiveChannel() === "fg" ? S.chipActive : null, background: value.hex },
           onClick: () => controller.setChannel("fg"),
           title: "Foreground"
         }
@@ -6131,7 +5707,7 @@ function ColorPanelView({ controller }) {
         "button",
         {
           type: "button",
-          style: S3.swap,
+          style: S.swap,
           onClick: () => controller.swapChannels(),
           title: "Swap FG/BG (X)",
           children: "\u21C4"
@@ -6142,20 +5718,20 @@ function ColorPanelView({ controller }) {
         {
           type: "button",
           "aria-pressed": controller.getActiveChannel() === "bg",
-          style: { ...S3.chip, ...controller.getActiveChannel() === "bg" ? S3.chipActive : null },
+          style: { ...S.chip, ...controller.getActiveChannel() === "bg" ? S.chipActive : null },
           onClick: () => controller.setChannel("bg"),
           title: "Background"
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs8("div", { style: S3.pickerRow, children: [
+    /* @__PURE__ */ jsxs8("div", { style: S.pickerRow, children: [
       /* @__PURE__ */ jsx9(
         "canvas",
         {
           ref: spectrumRef,
           width: 200,
           height: 140,
-          style: { ...S3.spectrum, ...bound ? S3.disabled : null },
+          style: { ...S.spectrum, ...bound ? S.disabled : null },
           onPointerDown: (e) => onSpectrumPointer(e, true),
           onPointerMove: (e) => onSpectrumPointer(e, false),
           onPointerUp: endDrag
@@ -6167,7 +5743,7 @@ function ColorPanelView({ controller }) {
           ref: hueRef,
           width: 14,
           height: 140,
-          style: { ...S3.strip, ...bound ? S3.disabled : null },
+          style: { ...S.strip, ...bound ? S.disabled : null },
           onPointerDown: (e) => onHuePointer(e, true),
           onPointerMove: (e) => onHuePointer(e, false),
           onPointerUp: endDrag
@@ -6179,20 +5755,20 @@ function ColorPanelView({ controller }) {
           ref: alphaRef,
           width: 14,
           height: 140,
-          style: { ...S3.strip, ...bound ? S3.disabled : null },
+          style: { ...S.strip, ...bound ? S.disabled : null },
           onPointerDown: (e) => onAlphaPointer(e, true),
           onPointerMove: (e) => onAlphaPointer(e, false),
           onPointerUp: endDrag
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs8("div", { style: S3.controls, children: [
+    /* @__PURE__ */ jsxs8("div", { style: S.controls, children: [
       /* @__PURE__ */ jsx9(
         "select",
         {
           value: space,
           onChange: (e) => controller.setSpace(e.target.value),
-          style: S3.select,
+          style: S.select,
           "aria-label": "Color model",
           children: EDIT_SPACES.map((s) => /* @__PURE__ */ jsx9("option", { value: s, children: SPACE_LABEL[s] }, s))
         }
@@ -6204,12 +5780,12 @@ function ColorPanelView({ controller }) {
           value: value.hex,
           onChange: onHexInput,
           disabled: bound,
-          style: S3.hexInput,
+          style: S.hexInput,
           "aria-label": "Hex",
           spellCheck: false
         }
-      ) : /* @__PURE__ */ jsx9("div", { style: S3.componentRow, children: (componentLabels ?? []).map((label, i) => /* @__PURE__ */ jsxs8("label", { style: S3.componentField, children: [
-        /* @__PURE__ */ jsx9("span", { style: S3.componentLabel, children: label }),
+      ) : /* @__PURE__ */ jsx9("div", { style: S.componentRow, children: (componentLabels ?? []).map((label, i) => /* @__PURE__ */ jsxs8("label", { style: S.componentField, children: [
+        /* @__PURE__ */ jsx9("span", { style: S.componentLabel, children: label }),
         /* @__PURE__ */ jsx9(
           "input",
           {
@@ -6217,12 +5793,12 @@ function ColorPanelView({ controller }) {
             value: roundForSpace(space, i, comps[i] ?? 0),
             onChange: (e) => onComponentInput(i, e.target.value),
             disabled: bound,
-            style: S3.numInput
+            style: S.numInput
           }
         )
       ] }, label)) }),
-      controller.isAlphaShown() && /* @__PURE__ */ jsxs8("label", { style: S3.alphaField, children: [
-        /* @__PURE__ */ jsx9("span", { style: S3.componentLabel, children: "A" }),
+      controller.isAlphaShown() && /* @__PURE__ */ jsxs8("label", { style: S.alphaField, children: [
+        /* @__PURE__ */ jsx9("span", { style: S.componentLabel, children: "A" }),
         /* @__PURE__ */ jsx9(
           "input",
           {
@@ -6232,20 +5808,20 @@ function ColorPanelView({ controller }) {
             value: Math.round(value.alpha * 100),
             onChange: (e) => controller.setAlpha(Number(e.target.value) / 100, { commit: true }),
             disabled: bound,
-            style: S3.numInput
+            style: S.numInput
           }
         )
       ] }),
-      /* @__PURE__ */ jsx9("button", { type: "button", style: S3.iconBtn, title: "Pick from screen", onClick: () => controller.requestEyedropper(), children: "\u29BF" })
+      /* @__PURE__ */ jsx9("button", { type: "button", style: S.iconBtn, title: "Pick from screen", onClick: () => controller.requestEyedropper(), children: "\u29BF" })
     ] }),
-    controller.hasTokens() && /* @__PURE__ */ jsxs8("div", { style: S3.tokenRow, children: [
-      /* @__PURE__ */ jsx9("span", { style: S3.componentLabel, children: "Token" }),
+    controller.hasTokens() && /* @__PURE__ */ jsxs8("div", { style: S.tokenRow, children: [
+      /* @__PURE__ */ jsx9("span", { style: S.componentLabel, children: "Token" }),
       /* @__PURE__ */ jsxs8(
         "select",
         {
           value: controller.getBoundTokenId() ?? "",
           onChange: (e) => e.target.value ? controller.bindToken(e.target.value) : controller.unbindToken(),
-          style: S3.select,
+          style: S.select,
           "aria-label": "Bind token",
           children: [
             /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014 raw \u2014" }),
@@ -6253,17 +5829,17 @@ function ColorPanelView({ controller }) {
           ]
         }
       ),
-      bound && /* @__PURE__ */ jsx9("button", { type: "button", style: S3.textBtn, onClick: () => controller.unbindToken(), children: "Unbind" })
+      bound && /* @__PURE__ */ jsx9("button", { type: "button", style: S.textBtn, onClick: () => controller.unbindToken(), children: "Unbind" })
     ] }),
-    /* @__PURE__ */ jsxs8("div", { style: S3.swatchHeader, children: [
-      /* @__PURE__ */ jsx9("span", { style: S3.sectionLabel, children: "Swatches" }),
-      /* @__PURE__ */ jsx9("button", { type: "button", style: S3.textBtn, onClick: () => void controller.addSwatch(), children: "+ Save" })
+    /* @__PURE__ */ jsxs8("div", { style: S.swatchHeader, children: [
+      /* @__PURE__ */ jsx9("span", { style: S.sectionLabel, children: "Swatches" }),
+      /* @__PURE__ */ jsx9("button", { type: "button", style: S.textBtn, onClick: () => void controller.addSwatch(), children: "+ Save" })
     ] }),
-    /* @__PURE__ */ jsx9("div", { style: S3.swatchGrid, children: controller.getSwatches().map((hex) => /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx9("div", { style: S.swatchGrid, children: controller.getSwatches().map((hex) => /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
-        style: { ...S3.swatch, background: hex },
+        style: { ...S.swatch, background: hex },
         title: hex,
         onClick: () => controller.selectColor(hex),
         onContextMenu: (e) => {
@@ -6273,13 +5849,13 @@ function ColorPanelView({ controller }) {
       },
       hex
     )) }),
-    controller.getRecent().length > 0 && /* @__PURE__ */ jsxs8(Fragment3, { children: [
-      /* @__PURE__ */ jsx9("div", { style: S3.sectionLabel, children: "Recent" }),
-      /* @__PURE__ */ jsx9("div", { style: S3.swatchGrid, children: controller.getRecent().map((hex, i) => /* @__PURE__ */ jsx9(
+    controller.getRecent().length > 0 && /* @__PURE__ */ jsxs8(Fragment5, { children: [
+      /* @__PURE__ */ jsx9("div", { style: S.sectionLabel, children: "Recent" }),
+      /* @__PURE__ */ jsx9("div", { style: S.swatchGrid, children: controller.getRecent().map((hex, i) => /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
-          style: { ...S3.swatch, background: hex },
+          style: { ...S.swatch, background: hex },
           title: hex,
           onClick: () => controller.selectColor(hex)
         },
@@ -6295,7 +5871,7 @@ function roundForSpace(space, index, v) {
   if (space === "oklch") return Math.round(v * 10) / 10;
   return Math.round(v);
 }
-var S3 = {
+var S = {
   root: { display: "flex", flexDirection: "column", gap: 8, padding: 8, fontSize: 11, color: "var(--xeno-text)", background: "var(--xeno-canvas)", minWidth: 232, userSelect: "none" },
   channels: { display: "flex", alignItems: "center", gap: 6 },
   chip: { width: 28, height: 20, borderRadius: 2, border: "1px solid var(--xeno-control)", background: "var(--xeno-canvas)", cursor: "pointer", padding: 0 },
@@ -7592,9 +7168,9 @@ var curveManifest = {
 
 // src/edit/curve/react/CurvePanelView.tsx
 import { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef6, useSyncExternalStore as useSyncExternalStore5 } from "react";
-import { EmptyState as EmptyState2, StatusBar, Toolbar, ToolbarGroup } from "@xenosystem/components/chrome";
+import { EmptyState as EmptyState4, StatusBar as StatusBar3, Toolbar as Toolbar3, ToolbarGroup } from "@xenosystem/components/chrome";
 import { formatTick } from "@xenosystem/time-core";
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var DASHES = ["none", "4 2", "1 2", "6 2 1 2"];
 function CurvePanelView({ controller, showPresets = true }) {
   const state = useSyncExternalStore5(controller.subscribe, controller.getState, controller.getState);
@@ -7675,7 +7251,7 @@ function CurvePanelView({ controller, showPresets = true }) {
   const channels = state.curves?.channels ?? [];
   return /* @__PURE__ */ jsxs9("div", { style: SHELL, children: [
     /* @__PURE__ */ jsx10(
-      Toolbar,
+      Toolbar3,
       {
         left: /* @__PURE__ */ jsx10(ToolbarGroup, { children: ["linear", "bezier", "hold", "step"].map((mode) => /* @__PURE__ */ jsx10("button", { type: "button", style: button(), onClick: () => controller.setInterpolation(mode), children: mode }, mode)) }),
         right: /* @__PURE__ */ jsxs9(ToolbarGroup, { end: true, children: [
@@ -7685,7 +7261,7 @@ function CurvePanelView({ controller, showPresets = true }) {
       }
     ),
     showPresets ? /* @__PURE__ */ jsx10(
-      Toolbar,
+      Toolbar3,
       {
         left: /* @__PURE__ */ jsx10(ToolbarGroup, { children: EASING_PRESETS.slice(0, 6).map((preset) => /* @__PURE__ */ jsx10(
           "button",
@@ -7700,7 +7276,7 @@ function CurvePanelView({ controller, showPresets = true }) {
         )) })
       }
     ) : null,
-    channels.length === 0 ? /* @__PURE__ */ jsx10(EmptyState2, { title: "No curves", hint: "Wire an animated property into this panel's input." }) : /* @__PURE__ */ jsx10(
+    channels.length === 0 ? /* @__PURE__ */ jsx10(EmptyState4, { title: "No curves", hint: "Wire an animated property into this panel's input." }) : /* @__PURE__ */ jsx10(
       "div",
       {
         ref: containerRef,
@@ -7814,7 +7390,7 @@ function CurvePanelView({ controller, showPresets = true }) {
       }
     ),
     /* @__PURE__ */ jsx10(
-      StatusBar,
+      StatusBar3,
       {
         left: `${channels.length} channel${channels.length === 1 ? "" : "s"}`,
         right: /* @__PURE__ */ jsx10("span", { className: "tabular-nums", children: state.playheadTick !== null ? formatTick(state.playheadTick, state.timebase) : "" })
@@ -7829,7 +7405,7 @@ function Handles({
   scale
 }) {
   const sides = ["in", "out"];
-  return /* @__PURE__ */ jsx10(Fragment4, { children: sides.map((side) => {
+  return /* @__PURE__ */ jsx10(Fragment6, { children: sides.map((side) => {
     const tangent = side === "in" ? keyframe.tangentIn : keyframe.tangentOut;
     if (!tangent) return null;
     const hx = scale.tickToX(keyframe.tick + tangent.x);
@@ -8469,7 +8045,7 @@ var viewportManifest = {
 
 // src/edit/viewport/react/ViewportPanelView.tsx
 import { useEffect as useEffect6, useRef as useRef7, useSyncExternalStore as useSyncExternalStore6 } from "react";
-import { Badge as Badge2, StatusBar as StatusBar2 } from "@xenosystem/components/chrome";
+import { Badge as Badge4, StatusBar as StatusBar4 } from "@xenosystem/components/chrome";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var SLOT_STYLE = {
   "top-left": { top: 8, left: 8 },
@@ -8579,11 +8155,11 @@ function ViewportPanelView({
               fontSize: 11,
               zIndex: 20
             },
-            children: /* @__PURE__ */ jsx11(Badge2, { tone: "error", children: "graphics context lost \u2014 restoring" })
+            children: /* @__PURE__ */ jsx11(Badge4, { tone: "error", children: "graphics context lost \u2014 restoring" })
           }
         ) : null,
         showStats && state.stats ? /* @__PURE__ */ jsx11("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0, zIndex: 10 }, children: /* @__PURE__ */ jsx11(
-          StatusBar2,
+          StatusBar4,
           {
             left: state.stats.fps !== void 0 ? `${Math.round(state.stats.fps)} fps` : void 0,
             right: state.surface ? `${state.surface.cssWidth}\xD7${state.surface.cssHeight} @${state.surface.dpr}\xD7` : void 0
@@ -9236,17 +8812,17 @@ var findManifest = {
 // src/edit/find/react/FindPanelView.tsx
 import { useSyncExternalStore as useSyncExternalStore7 } from "react";
 import {
-  Badge as Badge3,
-  EmptyState as EmptyState3,
-  IconButton as IconButton3,
-  Row,
-  RowList,
-  ScrollArea as ScrollArea2,
-  SearchField as SearchField2,
+  Badge as Badge5,
+  EmptyState as EmptyState5,
+  IconButton as IconButton5,
+  Row as Row3,
+  RowList as RowList3,
+  ScrollArea as ScrollArea4,
+  SearchField as SearchField4,
   Section as Section2,
-  StatusBar as StatusBar3,
+  StatusBar as StatusBar5,
   TextButton as TextButton2,
-  Toolbar as Toolbar2,
+  Toolbar as Toolbar4,
   ToolbarGroup as ToolbarGroup2
 } from "@xenosystem/components/chrome";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -9288,12 +8864,12 @@ function StatusLine({
   hasText
 }) {
   if (status === "invalidPattern") {
-    return /* @__PURE__ */ jsx12(Badge3, { tone: "error", title: message ?? void 0, children: "invalid pattern" });
+    return /* @__PURE__ */ jsx12(Badge5, { tone: "error", title: message ?? void 0, children: "invalid pattern" });
   }
   if (status === "failed") {
-    return /* @__PURE__ */ jsx12(Badge3, { tone: "error", title: message ?? void 0, children: "search failed" });
+    return /* @__PURE__ */ jsx12(Badge5, { tone: "error", title: message ?? void 0, children: "search failed" });
   }
-  if (status === "searching") return /* @__PURE__ */ jsx12(Badge3, { children: "searching\u2026" });
+  if (status === "searching") return /* @__PURE__ */ jsx12(Badge5, { children: "searching\u2026" });
   if (!hasText || status === "idle") return null;
   return /* @__PURE__ */ jsxs11("span", { style: { fontVariantNumeric: "tabular-nums", fontSize: 10, opacity: 0.55 }, children: [
     displayIndex,
@@ -9319,7 +8895,7 @@ function FindPanelView({
     }
   };
   const renderMatch = (match, index) => /* @__PURE__ */ jsx12(
-    Row,
+    Row3,
     {
       noIcon: true,
       selected: index === state.index,
@@ -9343,10 +8919,10 @@ function FindPanelView({
   let flatIndex = -1;
   return /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, onKeyDown, children: [
     /* @__PURE__ */ jsx12(
-      Toolbar2,
+      Toolbar4,
       {
         left: /* @__PURE__ */ jsx12(
-          SearchField2,
+          SearchField4,
           {
             value: state.text,
             onChange: (value) => controller.setText(value),
@@ -9355,7 +8931,7 @@ function FindPanelView({
         ),
         right: /* @__PURE__ */ jsxs11(ToolbarGroup2, { end: true, children: [
           /* @__PURE__ */ jsx12(
-            IconButton3,
+            IconButton5,
             {
               label: "Match case",
               active: state.options.caseSensitive,
@@ -9364,7 +8940,7 @@ function FindPanelView({
             }
           ),
           /* @__PURE__ */ jsx12(
-            IconButton3,
+            IconButton5,
             {
               label: "Whole word",
               active: state.options.wholeWord,
@@ -9373,7 +8949,7 @@ function FindPanelView({
             }
           ),
           /* @__PURE__ */ jsx12(
-            IconButton3,
+            IconButton5,
             {
               label: "Regular expression",
               active: state.options.regex,
@@ -9385,7 +8961,7 @@ function FindPanelView({
       }
     ),
     /* @__PURE__ */ jsx12(
-      Toolbar2,
+      Toolbar4,
       {
         divided: false,
         left: /* @__PURE__ */ jsx12(
@@ -9401,7 +8977,7 @@ function FindPanelView({
         ),
         right: /* @__PURE__ */ jsxs11(ToolbarGroup2, { end: true, children: [
           /* @__PURE__ */ jsx12(
-            IconButton3,
+            IconButton5,
             {
               label: "Previous match",
               disabled: state.matches.length === 0,
@@ -9410,7 +8986,7 @@ function FindPanelView({
             }
           ),
           /* @__PURE__ */ jsx12(
-            IconButton3,
+            IconButton5,
             {
               label: "Next match",
               disabled: state.matches.length === 0,
@@ -9424,10 +9000,10 @@ function FindPanelView({
     ),
     state.message && state.status === "invalidPattern" ? /* @__PURE__ */ jsx12("div", { style: { padding: "2px 8px 4px", fontSize: 9, opacity: 0.6 }, children: state.message }) : null,
     state.replaceVisible ? /* @__PURE__ */ jsx12(
-      Toolbar2,
+      Toolbar4,
       {
         left: /* @__PURE__ */ jsx12(
-          SearchField2,
+          SearchField4,
           {
             value: state.replaceText,
             onChange: (value) => controller.setReplaceText(value),
@@ -9444,24 +9020,24 @@ function FindPanelView({
         ] })
       }
     ) : null,
-    showResults ? /* @__PURE__ */ jsx12(ScrollArea2, { children: state.status === "idle" ? /* @__PURE__ */ jsx12(EmptyState3, { title: "Find", hint: "Type to search. Enter goes to the next match." }) : state.status === "invalidPattern" ? /* @__PURE__ */ jsx12(
-      EmptyState3,
+    showResults ? /* @__PURE__ */ jsx12(ScrollArea4, { children: state.status === "idle" ? /* @__PURE__ */ jsx12(EmptyState5, { title: "Find", hint: "Type to search. Enter goes to the next match." }) : state.status === "invalidPattern" ? /* @__PURE__ */ jsx12(
+      EmptyState5,
       {
         title: "Invalid pattern",
         hint: state.message ?? "The expression could not be read. Fix it to search."
       }
-    ) : state.status === "failed" ? /* @__PURE__ */ jsx12(EmptyState3, { title: "Search failed", hint: state.message ?? "The host could not complete the search." }) : state.noResults ? /* @__PURE__ */ jsx12(EmptyState3, { title: "No matches", hint: `Nothing in scope matches \u201C${state.text}\u201D.` }) : state.groups.length === 1 && state.groups[0].id === "" ? /* @__PURE__ */ jsx12(RowList, { children: state.matches.map((m) => renderMatch(m, ++flatIndex)) }) : state.groups.map((group) => /* @__PURE__ */ jsx12(
+    ) : state.status === "failed" ? /* @__PURE__ */ jsx12(EmptyState5, { title: "Search failed", hint: state.message ?? "The host could not complete the search." }) : state.noResults ? /* @__PURE__ */ jsx12(EmptyState5, { title: "No matches", hint: `Nothing in scope matches \u201C${state.text}\u201D.` }) : state.groups.length === 1 && state.groups[0].id === "" ? /* @__PURE__ */ jsx12(RowList3, { children: state.matches.map((m) => renderMatch(m, ++flatIndex)) }) : state.groups.map((group) => /* @__PURE__ */ jsx12(
       Section2,
       {
         title: group.label || "Results",
         flush: true,
-        badge: /* @__PURE__ */ jsx12(Badge3, { children: group.matches.length }),
-        children: /* @__PURE__ */ jsx12(RowList, { children: group.matches.map((m) => renderMatch(m, ++flatIndex)) })
+        badge: /* @__PURE__ */ jsx12(Badge5, { children: group.matches.length }),
+        children: /* @__PURE__ */ jsx12(RowList3, { children: group.matches.map((m) => renderMatch(m, ++flatIndex)) })
       },
       group.id
     )) }) : null,
     /* @__PURE__ */ jsx12(
-      StatusBar3,
+      StatusBar5,
       {
         left: state.truncated ? `showing first ${state.matches.length}` : void 0,
         right: state.options.scope
@@ -10111,17 +9687,17 @@ var commentsManifest = {
 // src/edit/comments/react/CommentsPanelView.tsx
 import { useSyncExternalStore as useSyncExternalStore8 } from "react";
 import {
-  Badge as Badge4,
-  EmptyState as EmptyState4,
-  ScrollArea as ScrollArea3,
+  Badge as Badge6,
+  EmptyState as EmptyState6,
+  ScrollArea as ScrollArea5,
   Section as Section3,
   SegmentedControl as SegmentedControl2,
-  StatusBar as StatusBar4,
+  StatusBar as StatusBar6,
   TextButton as TextButton3,
-  Toolbar as Toolbar3,
+  Toolbar as Toolbar5,
   ToolbarGroup as ToolbarGroup3
 } from "@xenosystem/components/chrome";
-import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var ANCHOR_BADGE = {
   live: null,
   stale: {
@@ -10161,8 +9737,8 @@ function ThreadCard({
       },
       children: /* @__PURE__ */ jsxs12("div", { style: { padding: "6px 8px", display: "flex", flexDirection: "column", gap: 4 }, children: [
         /* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-          badge ? /* @__PURE__ */ jsx13(Badge4, { tone: badge.tone, title: badge.title, children: badge.label }) : null,
-          thread.resolved ? /* @__PURE__ */ jsx13(Badge4, { children: "resolved" }) : null,
+          badge ? /* @__PURE__ */ jsx13(Badge6, { tone: badge.tone, title: badge.title, children: badge.label }) : null,
+          thread.resolved ? /* @__PURE__ */ jsx13(Badge6, { children: "resolved" }) : null,
           /* @__PURE__ */ jsx13("span", { style: { marginLeft: "auto", fontSize: 9, opacity: 0.4 }, children: formatAge(thread.createdAt, now) })
         ] }),
         thread.anchorLabel ? /* @__PURE__ */ jsx13(
@@ -10262,7 +9838,7 @@ function CommentsPanelView({
   const resolved = state.threads.filter((t) => t.thread.resolved);
   return /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
     /* @__PURE__ */ jsx13(
-      Toolbar3,
+      Toolbar5,
       {
         left: /* @__PURE__ */ jsx13(
           SegmentedControl2,
@@ -10301,23 +9877,23 @@ function CommentsPanelView({
       " about.",
       state.filter.includeOrphaned === false ? /* @__PURE__ */ jsx13(TextButton3, { onClick: () => controller.setFilter({ includeOrphaned: true }), children: "Show" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx13(ScrollArea3, { children: state.threads.length === 0 ? state.filteredEmpty ? (
+    /* @__PURE__ */ jsx13(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__ */ jsx13(
-        EmptyState4,
+        EmptyState6,
         {
           title: "Nothing matches this filter",
           hint: `${state.totals.all} comment${state.totals.all === 1 ? "" : "s"} on this document.`
         }
       )
     ) : /* @__PURE__ */ jsx13(
-      EmptyState4,
+      EmptyState6,
       {
         title: "No comments",
         hint: emptyHint ?? "Select something and add a comment."
       }
-    ) : /* @__PURE__ */ jsxs12(Fragment5, { children: [
+    ) : /* @__PURE__ */ jsxs12(Fragment7, { children: [
       open.map((view) => /* @__PURE__ */ jsx13(
         ThreadCard,
         {
@@ -10379,7 +9955,7 @@ function CommentsPanelView({
       ) })
     ] }),
     /* @__PURE__ */ jsx13(
-      StatusBar4,
+      StatusBar6,
       {
         left: `${state.totals.open} open`,
         right: state.totals.stale > 0 ? `${state.totals.stale} edited` : void 0
@@ -11551,8 +11127,8 @@ 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 EmptyState5, StatusBar as StatusBar5, Toolbar as Toolbar4, ToolbarGroup as ToolbarGroup4 } from "@xenosystem/components/chrome";
-import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { EmptyState as EmptyState7, StatusBar as StatusBar7, Toolbar as Toolbar6, ToolbarGroup as ToolbarGroup4 } from "@xenosystem/components/chrome";
+import { Fragment as Fragment8, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var HEADER_H2 = 24;
 var PORT_ROW_H2 = 18;
 function NodeGraphPanelView({ controller }) {
@@ -11633,7 +11209,7 @@ function NodeGraphPanelView({ controller }) {
   const total = state.graph?.nodes.length ?? 0;
   return /* @__PURE__ */ jsxs13("div", { style: SHELL2, children: [
     /* @__PURE__ */ jsx14(
-      Toolbar4,
+      Toolbar6,
       {
         right: /* @__PURE__ */ jsxs13(ToolbarGroup4, { end: true, children: [
           /* @__PURE__ */ jsx14("button", { type: "button", style: button2(), onClick: () => controller.fit(false), children: "Fit" }),
@@ -11641,7 +11217,7 @@ function NodeGraphPanelView({ controller }) {
         ] })
       }
     ),
-    total === 0 ? /* @__PURE__ */ jsx14(EmptyState5, { title: "Empty graph", hint: "Wire a host graph into this panel's input." }) : /* @__PURE__ */ jsxs13(
+    total === 0 ? /* @__PURE__ */ jsx14(EmptyState7, { title: "Empty graph", hint: "Wire a host graph into this panel's input." }) : /* @__PURE__ */ jsxs13(
       "div",
       {
         ref: containerRef,
@@ -11705,7 +11281,7 @@ function NodeGraphPanelView({ controller }) {
       }
     ),
     /* @__PURE__ */ jsx14(
-      StatusBar5,
+      StatusBar7,
       {
         left: `${total} node${total === 1 ? "" : "s"}`,
         right: /* @__PURE__ */ jsxs13("span", { className: "tabular-nums", children: [
@@ -11775,7 +11351,7 @@ function NodeRect({ node, selected, zoom }) {
         children: node.title
       }
     ),
-    node.collapsed ? null : /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    node.collapsed ? null : /* @__PURE__ */ jsxs13(Fragment8, { children: [
       node.inputs.map((port, i) => /* @__PURE__ */ jsx14(
         Port,
         {
@@ -13080,22 +12656,22 @@ var treeManifest = {
 // src/edit/tree/react/TreePanelView.tsx
 import { useCallback as useCallback8, useEffect as useEffect8, useRef as useRef9, useState as useState2, useSyncExternalStore as useSyncExternalStore10 } from "react";
 import {
-  Badge as Badge5,
-  EmptyState as EmptyState6,
+  Badge as Badge7,
+  EmptyState as EmptyState8,
   ErrorState,
-  IconButton as IconButton4,
+  IconButton as IconButton6,
   LoadingState,
-  Row as Row2,
-  ScrollArea as ScrollArea4,
-  SearchField as SearchField3,
-  StatusBar as StatusBar6,
-  Toolbar as Toolbar5,
+  Row as Row4,
+  ScrollArea as ScrollArea6,
+  SearchField as SearchField5,
+  StatusBar as StatusBar8,
+  Toolbar as Toolbar7,
   ToolbarGroup as ToolbarGroup5
 } from "@xenosystem/components/chrome";
 import { computeWindow as computeWindow3 } from "@xenosystem/tree-core";
 
 // src/edit/tree/react/icons.tsx
-import { Fragment as Fragment7, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function Svg({ children, size = 11 }) {
   return /* @__PURE__ */ jsx15(
     "svg",
@@ -13148,37 +12724,37 @@ function RefreshGlyph() {
 }
 var PATHS = {
   folder: /* @__PURE__ */ jsx15("path", { d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }),
-  file: /* @__PURE__ */ jsxs14(Fragment7, { children: [
+  file: /* @__PURE__ */ jsxs14(Fragment9, { children: [
     /* @__PURE__ */ jsx15("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
     /* @__PURE__ */ jsx15("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
   ] }),
-  "folder-tree": /* @__PURE__ */ jsxs14(Fragment7, { children: [
+  "folder-tree": /* @__PURE__ */ jsxs14(Fragment9, { children: [
     /* @__PURE__ */ jsx15("path", { d: "M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z" }),
     /* @__PURE__ */ jsx15("path", { d: "M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2a1 1 0 0 0-.8-.4h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z" }),
     /* @__PURE__ */ jsx15("path", { d: "M3 5a2 2 0 0 0 2 2h3" }),
     /* @__PURE__ */ jsx15("path", { d: "M3 3v13a2 2 0 0 0 2 2h3" })
   ] }),
-  box: /* @__PURE__ */ jsxs14(Fragment7, { children: [
+  box: /* @__PURE__ */ jsxs14(Fragment9, { children: [
     /* @__PURE__ */ jsx15("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }),
     /* @__PURE__ */ jsx15("path", { d: "m3.3 7 8.7 5 8.7-5" }),
     /* @__PURE__ */ jsx15("path", { d: "M12 22V12" })
   ] }),
   component: /* @__PURE__ */ jsx15("path", { d: "m12 2 4 4-4 4-4-4Zm0 12 4 4-4 4-4-4ZM2 12l4-4 4 4-4 4Zm12 0 4-4 4 4-4 4Z" }),
-  "file-text": /* @__PURE__ */ jsxs14(Fragment7, { children: [
+  "file-text": /* @__PURE__ */ jsxs14(Fragment9, { children: [
     /* @__PURE__ */ jsx15("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
     /* @__PURE__ */ jsx15("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
     /* @__PURE__ */ jsx15("path", { d: "M8 13h8M8 17h5" })
   ] }),
-  heading: /* @__PURE__ */ jsx15(Fragment7, { children: /* @__PURE__ */ jsx15("path", { d: "M6 4v16M18 4v16M6 12h12" }) }),
-  bot: /* @__PURE__ */ jsxs14(Fragment7, { children: [
+  heading: /* @__PURE__ */ jsx15(Fragment9, { children: /* @__PURE__ */ jsx15("path", { d: "M6 4v16M18 4v16M6 12h12" }) }),
+  bot: /* @__PURE__ */ jsxs14(Fragment9, { children: [
     /* @__PURE__ */ jsx15("rect", { x: "3", y: "8", width: "18", height: "12", rx: "2" }),
     /* @__PURE__ */ jsx15("path", { d: "M12 4v4M8 14h.01M16 14h.01" })
   ] }),
-  link: /* @__PURE__ */ jsxs14(Fragment7, { children: [
+  link: /* @__PURE__ */ jsxs14(Fragment9, { children: [
     /* @__PURE__ */ jsx15("path", { d: "M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.8 1.7" }),
     /* @__PURE__ */ jsx15("path", { d: "M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.8-1.7" })
   ] }),
-  "link-2-off": /* @__PURE__ */ jsxs14(Fragment7, { children: [
+  "link-2-off": /* @__PURE__ */ jsxs14(Fragment9, { children: [
     /* @__PURE__ */ jsx15("path", { d: "M9 17H7A5 5 0 0 1 7 7" }),
     /* @__PURE__ */ jsx15("path", { d: "M15 7h2a5 5 0 0 1 4 8" }),
     /* @__PURE__ */ jsx15("path", { d: "M8 12h4" }),
@@ -13191,7 +12767,7 @@ function TreeIcon({ name, size = 11 }) {
 }
 
 // src/edit/tree/react/TreePanelView.tsx
-import { Fragment as Fragment8, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function TreePanelView({
   controller,
   rowHeight = 24,
@@ -13223,7 +12799,7 @@ function TreePanelView({
   const sourceState = source?.sourceState ?? "idle";
   const body = (() => {
     if (!source || sourceState === "idle") {
-      return /* @__PURE__ */ jsx16(EmptyState6, { title: "No source", hint: emptyHint ?? "Connect a source to browse it." });
+      return /* @__PURE__ */ jsx16(EmptyState8, { title: "No source", hint: emptyHint ?? "Connect a source to browse it." });
     }
     if (sourceState === "loading" && state.rows.length === 0) {
       return /* @__PURE__ */ jsx16(LoadingState, { label: source.sourceMessage ?? "Loading\u2026" });
@@ -13240,8 +12816,8 @@ function TreePanelView({
       );
     }
     if (state.rows.length === 0) {
-      return state.filter ? /* @__PURE__ */ jsx16(EmptyState6, { title: "No matches", hint: `Nothing matches \u201C${state.filter}\u201D.` }) : /* @__PURE__ */ jsx16(
-        EmptyState6,
+      return state.filter ? /* @__PURE__ */ jsx16(EmptyState8, { title: "No matches", hint: `Nothing matches \u201C${state.filter}\u201D.` }) : /* @__PURE__ */ jsx16(
+        EmptyState8,
         {
           title: "Nothing here",
           hint: emptyHint ?? source.sourceMessage ?? "This source has no items yet."
@@ -13256,7 +12832,7 @@ function TreePanelView({
       overscan
     });
     const slice = state.rows.slice(window2.startIndex, window2.endIndex);
-    return /* @__PURE__ */ jsx16(ScrollArea4, { children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx16(ScrollArea6, { children: /* @__PURE__ */ jsx16(
       "div",
       {
         ref: scrollRef,
@@ -13288,10 +12864,10 @@ function TreePanelView({
   })();
   return /* @__PURE__ */ jsxs15("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
     /* @__PURE__ */ jsx16(
-      Toolbar5,
+      Toolbar7,
       {
         left: showSearch ? /* @__PURE__ */ jsx16(
-          SearchField3,
+          SearchField5,
           {
             value: state.filter,
             onChange: (term) => controller.setFilter(term),
@@ -13299,22 +12875,22 @@ function TreePanelView({
           }
         ) : void 0,
         right: /* @__PURE__ */ jsxs15(ToolbarGroup5, { end: true, children: [
-          /* @__PURE__ */ jsx16(IconButton4, { icon: /* @__PURE__ */ jsx16(ExpandGlyph, {}), label: "Expand all", onClick: () => controller.expandAll() }),
+          /* @__PURE__ */ jsx16(IconButton6, { icon: /* @__PURE__ */ jsx16(ExpandGlyph, {}), label: "Expand all", onClick: () => controller.expandAll() }),
           /* @__PURE__ */ jsx16(
-            IconButton4,
+            IconButton6,
             {
               icon: /* @__PURE__ */ jsx16(CollapseGlyph, {}),
               label: "Collapse all",
               onClick: () => controller.collapseAll()
             }
           ),
-          /* @__PURE__ */ jsx16(IconButton4, { icon: /* @__PURE__ */ jsx16(RefreshGlyph, {}), label: "Refresh", onClick: () => controller.refresh() })
+          /* @__PURE__ */ jsx16(IconButton6, { icon: /* @__PURE__ */ jsx16(RefreshGlyph, {}), label: "Refresh", onClick: () => controller.refresh() })
         ] })
       }
     ),
     body,
     /* @__PURE__ */ jsx16(
-      StatusBar6,
+      StatusBar8,
       {
         left: `${state.rows.length} item${state.rows.length === 1 ? "" : "s"}`,
         right: state.selection.length > 0 ? `${state.selection.length} selected` : void 0
@@ -13373,7 +12949,7 @@ function TreeRowView({
       },
       title: drop?.reason,
       children: /* @__PURE__ */ jsx16(
-        Row2,
+        Row4,
         {
           role: "treeitem",
           "aria-expanded": row.container ? row.expanded : void 0,
@@ -13408,7 +12984,7 @@ function TreeRowView({
           onPointerUp: () => {
             if (state.drag) controller.endDrag();
           },
-          icon: /* @__PURE__ */ jsxs15(Fragment8, { children: [
+          icon: /* @__PURE__ */ jsxs15(Fragment10, { children: [
             twisty,
             /* @__PURE__ */ jsx16(NodeIcon, { icon: node.icon ?? defaultIconFor(node.kind) })
           ] }),
@@ -13438,15 +13014,15 @@ function TreeRowView({
             }
           ) : node.label,
           meta: /* @__PURE__ */ jsx16(ChildStateChip, { row, controller }),
-          trailing: /* @__PURE__ */ jsxs15(Fragment8, { children: [
+          trailing: /* @__PURE__ */ jsxs15(Fragment10, { children: [
             columns?.map((columnId) => /* @__PURE__ */ jsx16("span", { style: { opacity: 0.7, fontVariantNumeric: "tabular-nums" }, children: node.columns?.[columnId] ?? "" }, columnId)),
             node.glyphs?.map((glyph) => /* @__PURE__ */ jsx16("span", { title: glyph.title, style: { display: "flex", opacity: 0.7 }, children: /* @__PURE__ */ jsx16(NodeIcon, { icon: glyph.icon }) }, glyph.id)),
             node.badges?.map((badge) => (
               // Opaque: the host formatted the text, the panel only places it.
-              /* @__PURE__ */ jsx16(Badge5, { tone: badge.tone, className: badge.title ? void 0 : void 0, children: badge.text }, badge.id)
+              /* @__PURE__ */ jsx16(Badge7, { tone: badge.tone, className: badge.title ? void 0 : void 0, children: badge.text }, badge.id)
             )),
             node.actions?.map((action) => /* @__PURE__ */ jsx16(
-              IconButton4,
+              IconButton6,
               {
                 size: "sm",
                 icon: /* @__PURE__ */ jsx16(NodeIcon, { icon: action.icon }),
@@ -13472,7 +13048,7 @@ function ChildStateChip({
   }
   if (row.childState === "error") {
     const error = row.node.error;
-    return /* @__PURE__ */ jsx16(Badge5, { tone: "error", children: error?.code === "denied" ? "no access" : error?.code ?? "failed" });
+    return /* @__PURE__ */ jsx16(Badge7, { tone: "error", children: error?.code === "denied" ? "no access" : error?.code ?? "failed" });
   }
   if (row.node.hasMore && row.expanded) {
     return /* @__PURE__ */ jsx16(
@@ -13489,7 +13065,7 @@ function ChildStateChip({
     );
   }
   if (row.node.truncatedAt !== void 0) {
-    return /* @__PURE__ */ jsx16(Badge5, { tone: "warning", children: `first ${row.node.truncatedAt}` });
+    return /* @__PURE__ */ jsx16(Badge7, { tone: "warning", children: `first ${row.node.truncatedAt}` });
   }
   if (row.expanded && isEmptyContainer(row.node)) {
     return /* @__PURE__ */ jsx16("span", { style: { opacity: 0.4, fontSize: 9 }, children: "empty" });