@xenosystem/blocks 0.11.3 → 0.11.4

package/dist/edit/index.d.ts

@@ -1948,9 +1948,10 @@ declare function resolveIconName(kind: string | undefined, hostMap?: Record<stri
  * `useSyncExternalStore` and forwards interactions. No projection logic, no intent construction and
  * no virtualization math live here.
  *
- * Layout per DESIGN_SYSTEM: dense 22px rows, monochrome, inline lucide-geometry icons at
- * strokeWidth 1.5, rectangles with small corner radius, compact header/footer, no shadows.
- * Future entries (after the cursor) are dimmed and struck through — Photoshop's affordance.
+ * Rendered over the chrome family: a `Toolbar` of undo/redo/search/count/clear, an `InlineConfirm`
+ * for clearing, a `ScrollArea` the virtualizer measures, a `VirtualWindow` of `Row`s (the current
+ * row `selected`, the keyboard row `focused`, future entries `struck` — Photoshop's affordance),
+ * and a `StatusBar` for memory. The window math and the keyboard model stay in the controller.
  *
  * @module
  */

package/dist/edit/index.js

@@ -4483,6 +4483,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 Badge2, Column as Column2, EmptyState as EmptyState2, IconButton as IconButton3, InlineConfirm, RowList, Row, ScrollArea as ScrollArea2, SearchField as SearchField2, StatusBar, Text as Text3, Toolbar, VirtualWindow } from "@xenosystem/components/chrome";
 
 // src/edit/history/react/icons.tsx
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -4578,7 +4579,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 Fragment3, 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 +4628,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(Column2, { className: "xeno-history-panel", children: [
+    /* @__PURE__ */ jsx8(
+      Toolbar,
+      {
+        left: /* @__PURE__ */ jsxs7(Fragment3, { children: [
+          /* @__PURE__ */ jsx8(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx8(UndoIcon, {}), label: "Undo", disabled: !controller.canUndo(), onClick: () => controller.undo() }),
+          /* @__PURE__ */ jsx8(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx8(RedoIcon, {}), label: "Redo", disabled: !controller.canRedo(), onClick: () => controller.redo() })
+        ] }),
+        right: /* @__PURE__ */ jsxs7(Fragment3, { children: [
+          /* @__PURE__ */ jsxs7(Text3, { role: "number", children: [
+            controller.getAppliedCount(),
+            " / ",
+            controller.getTotalCount()
+          ] }),
+          controller.isClearAllowed() ? /* @__PURE__ */ jsx8(IconButton3, { size: "sm", icon: /* @__PURE__ */ jsx8(TrashIcon, {}), label: "Clear history", onClick: () => controller.requestClear() }) : null
+        ] }),
+        children: controller.isSearchShown() ? /* @__PURE__ */ jsx8(SearchField2, { 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(Text3, { role: "caption", children: "Earlier history discarded (limit reached)" }) : null,
+    /* @__PURE__ */ jsxs7(ScrollArea2, { ref: scrollRef, onScroll, onKeyDown, onMouseLeave: () => controller.setHovered(null), tabIndex: 0, children: [
+      /* @__PURE__ */ jsx8(RowList, { role: "listbox", "aria-label": "History", children: /* @__PURE__ */ jsx8(VirtualWindow, { 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(EmptyState2, { title: "No history" }) : null
     ] }),
-    controller.isPruned() && /* @__PURE__ */ jsx8("div", { style: S2.prunedNote, children: "Earlier history discarded (limit reached)" }),
-    /* @__PURE__ */ jsxs7(
-      "div",
+    memory ? /* @__PURE__ */ jsx8(
+      StatusBar,
       {
-        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(Text3, { role: "number", children: [
+          memory.usedMB.toFixed(1),
+          " MB",
+          memory.limitMB ? ` / ${memory.limitMB} MB` : ""
+        ] }),
+        right: memory.onDiskCount !== void 0 ? /* @__PURE__ */ jsxs7(Text3, { 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 +4683,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",
+  return /* @__PURE__ */ jsx8(
+    Row,
     {
-      style,
-      role: "option",
-      "aria-selected": row.current,
+      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(Fragment3, { children: [
+        pending ? /* @__PURE__ */ jsx8(PendingGlyph, {}) : null,
+        failed ? /* @__PURE__ */ jsx8(Badge2, { size: "sm", tone: "error", children: "failed" }) : null,
+        controller.isSourceShown() && entry?.source && entry.source !== "user" ? /* @__PURE__ */ jsx8(Badge2, { size: "sm", title: `Source: ${entry.source}`, children: entry.source === "agent" ? "AI" : "S" }) : null,
+        entry?.coalesced && entry.coalesced > 1 ? /* @__PURE__ */ jsxs7(Badge2, { 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(Text3, { role: "meta", children: formatTime(entry.at) }) : null,
+        pending ? /* @__PURE__ */ jsx8(
+          IconButton3,
           {
-            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 +4732,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 +5814,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 Fragment4, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var SPACE_LABEL = {
   hex: "HEX",
   rgb: "RGB",
@@ -6115,14 +5919,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: S2.root, className: "xeno-color-panel", children: [
+    controller.getChannelsMode() === "fg-bg" && /* @__PURE__ */ jsxs8("div", { style: S2.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: { ...S2.chip, ...controller.getActiveChannel() === "fg" ? S2.chipActive : null, background: value.hex },
           onClick: () => controller.setChannel("fg"),
           title: "Foreground"
         }
@@ -6131,7 +5935,7 @@ function ColorPanelView({ controller }) {
         "button",
         {
           type: "button",
-          style: S3.swap,
+          style: S2.swap,
           onClick: () => controller.swapChannels(),
           title: "Swap FG/BG (X)",
           children: "\u21C4"
@@ -6142,20 +5946,20 @@ function ColorPanelView({ controller }) {
         {
           type: "button",
           "aria-pressed": controller.getActiveChannel() === "bg",
-          style: { ...S3.chip, ...controller.getActiveChannel() === "bg" ? S3.chipActive : null },
+          style: { ...S2.chip, ...controller.getActiveChannel() === "bg" ? S2.chipActive : null },
           onClick: () => controller.setChannel("bg"),
           title: "Background"
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs8("div", { style: S3.pickerRow, children: [
+    /* @__PURE__ */ jsxs8("div", { style: S2.pickerRow, children: [
       /* @__PURE__ */ jsx9(
         "canvas",
         {
           ref: spectrumRef,
           width: 200,
           height: 140,
-          style: { ...S3.spectrum, ...bound ? S3.disabled : null },
+          style: { ...S2.spectrum, ...bound ? S2.disabled : null },
           onPointerDown: (e) => onSpectrumPointer(e, true),
           onPointerMove: (e) => onSpectrumPointer(e, false),
           onPointerUp: endDrag
@@ -6167,7 +5971,7 @@ function ColorPanelView({ controller }) {
           ref: hueRef,
           width: 14,
           height: 140,
-          style: { ...S3.strip, ...bound ? S3.disabled : null },
+          style: { ...S2.strip, ...bound ? S2.disabled : null },
           onPointerDown: (e) => onHuePointer(e, true),
           onPointerMove: (e) => onHuePointer(e, false),
           onPointerUp: endDrag
@@ -6179,20 +5983,20 @@ function ColorPanelView({ controller }) {
           ref: alphaRef,
           width: 14,
           height: 140,
-          style: { ...S3.strip, ...bound ? S3.disabled : null },
+          style: { ...S2.strip, ...bound ? S2.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: S2.controls, children: [
       /* @__PURE__ */ jsx9(
         "select",
         {
           value: space,
           onChange: (e) => controller.setSpace(e.target.value),
-          style: S3.select,
+          style: S2.select,
           "aria-label": "Color model",
           children: EDIT_SPACES.map((s) => /* @__PURE__ */ jsx9("option", { value: s, children: SPACE_LABEL[s] }, s))
         }
@@ -6204,12 +6008,12 @@ function ColorPanelView({ controller }) {
           value: value.hex,
           onChange: onHexInput,
           disabled: bound,
-          style: S3.hexInput,
+          style: S2.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: S2.componentRow, children: (componentLabels ?? []).map((label, i) => /* @__PURE__ */ jsxs8("label", { style: S2.componentField, children: [
+        /* @__PURE__ */ jsx9("span", { style: S2.componentLabel, children: label }),
         /* @__PURE__ */ jsx9(
           "input",
           {
@@ -6217,12 +6021,12 @@ function ColorPanelView({ controller }) {
             value: roundForSpace(space, i, comps[i] ?? 0),
             onChange: (e) => onComponentInput(i, e.target.value),
             disabled: bound,
-            style: S3.numInput
+            style: S2.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: S2.alphaField, children: [
+        /* @__PURE__ */ jsx9("span", { style: S2.componentLabel, children: "A" }),
         /* @__PURE__ */ jsx9(
           "input",
           {
@@ -6232,20 +6036,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: S2.numInput
           }
         )
       ] }),
-      /* @__PURE__ */ jsx9("button", { type: "button", style: S3.iconBtn, title: "Pick from screen", onClick: () => controller.requestEyedropper(), children: "\u29BF" })
+      /* @__PURE__ */ jsx9("button", { type: "button", style: S2.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: S2.tokenRow, children: [
+      /* @__PURE__ */ jsx9("span", { style: S2.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: S2.select,
           "aria-label": "Bind token",
           children: [
             /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014 raw \u2014" }),
@@ -6253,17 +6057,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: S2.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: S2.swatchHeader, children: [
+      /* @__PURE__ */ jsx9("span", { style: S2.sectionLabel, children: "Swatches" }),
+      /* @__PURE__ */ jsx9("button", { type: "button", style: S2.textBtn, onClick: () => void controller.addSwatch(), children: "+ Save" })
     ] }),
-    /* @__PURE__ */ jsx9("div", { style: S3.swatchGrid, children: controller.getSwatches().map((hex) => /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx9("div", { style: S2.swatchGrid, children: controller.getSwatches().map((hex) => /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
-        style: { ...S3.swatch, background: hex },
+        style: { ...S2.swatch, background: hex },
         title: hex,
         onClick: () => controller.selectColor(hex),
         onContextMenu: (e) => {
@@ -6273,13 +6077,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(Fragment4, { children: [
+      /* @__PURE__ */ jsx9("div", { style: S2.sectionLabel, children: "Recent" }),
+      /* @__PURE__ */ jsx9("div", { style: S2.swatchGrid, children: controller.getRecent().map((hex, i) => /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
-          style: { ...S3.swatch, background: hex },
+          style: { ...S2.swatch, background: hex },
           title: hex,
           onClick: () => controller.selectColor(hex)
         },
@@ -6295,7 +6099,7 @@ function roundForSpace(space, index, v) {
   if (space === "oklch") return Math.round(v * 10) / 10;
   return Math.round(v);
 }
-var S3 = {
+var S2 = {
   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 +7396,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 EmptyState3, StatusBar as StatusBar2, Toolbar as Toolbar2, 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 Fragment5, 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 +7479,7 @@ function CurvePanelView({ controller, showPresets = true }) {
   const channels = state.curves?.channels ?? [];
   return /* @__PURE__ */ jsxs9("div", { style: SHELL, children: [
     /* @__PURE__ */ jsx10(
-      Toolbar,
+      Toolbar2,
       {
         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 +7489,7 @@ function CurvePanelView({ controller, showPresets = true }) {
       }
     ),
     showPresets ? /* @__PURE__ */ jsx10(
-      Toolbar,
+      Toolbar2,
       {
         left: /* @__PURE__ */ jsx10(ToolbarGroup, { children: EASING_PRESETS.slice(0, 6).map((preset) => /* @__PURE__ */ jsx10(
           "button",
@@ -7700,7 +7504,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(EmptyState3, { title: "No curves", hint: "Wire an animated property into this panel's input." }) : /* @__PURE__ */ jsx10(
       "div",
       {
         ref: containerRef,
@@ -7814,7 +7618,7 @@ function CurvePanelView({ controller, showPresets = true }) {
       }
     ),
     /* @__PURE__ */ jsx10(
-      StatusBar,
+      StatusBar2,
       {
         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 +7633,7 @@ function Handles({
   scale
 }) {
   const sides = ["in", "out"];
-  return /* @__PURE__ */ jsx10(Fragment4, { children: sides.map((side) => {
+  return /* @__PURE__ */ jsx10(Fragment5, { 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 +8273,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 Badge3, StatusBar as StatusBar3 } 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 +8383,11 @@ function ViewportPanelView({
               fontSize: 11,
               zIndex: 20
             },
-            children: /* @__PURE__ */ jsx11(Badge2, { tone: "error", children: "graphics context lost \u2014 restoring" })
+            children: /* @__PURE__ */ jsx11(Badge3, { 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,
+          StatusBar3,
           {
             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 +9040,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 Badge4,
+  EmptyState as EmptyState4,
+  IconButton as IconButton4,
+  Row as Row2,
+  RowList as RowList2,
+  ScrollArea as ScrollArea3,
+  SearchField as SearchField3,
   Section as Section2,
-  StatusBar as StatusBar3,
+  StatusBar as StatusBar4,
   TextButton as TextButton2,
-  Toolbar as Toolbar2,
+  Toolbar as Toolbar3,
   ToolbarGroup as ToolbarGroup2
 } from "@xenosystem/components/chrome";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -9288,12 +9092,12 @@ function StatusLine({
   hasText
 }) {
   if (status === "invalidPattern") {
-    return /* @__PURE__ */ jsx12(Badge3, { tone: "error", title: message ?? void 0, children: "invalid pattern" });
+    return /* @__PURE__ */ jsx12(Badge4, { 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(Badge4, { 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(Badge4, { 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 +9123,7 @@ function FindPanelView({
     }
   };
   const renderMatch = (match, index) => /* @__PURE__ */ jsx12(
-    Row,
+    Row2,
     {
       noIcon: true,
       selected: index === state.index,
@@ -9343,10 +9147,10 @@ function FindPanelView({
   let flatIndex = -1;
   return /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, onKeyDown, children: [
     /* @__PURE__ */ jsx12(
-      Toolbar2,
+      Toolbar3,
       {
         left: /* @__PURE__ */ jsx12(
-          SearchField2,
+          SearchField3,
           {
             value: state.text,
             onChange: (value) => controller.setText(value),
@@ -9355,7 +9159,7 @@ function FindPanelView({
         ),
         right: /* @__PURE__ */ jsxs11(ToolbarGroup2, { end: true, children: [
           /* @__PURE__ */ jsx12(
-            IconButton3,
+            IconButton4,
             {
               label: "Match case",
               active: state.options.caseSensitive,
@@ -9364,7 +9168,7 @@ function FindPanelView({
             }
           ),
           /* @__PURE__ */ jsx12(
-            IconButton3,
+            IconButton4,
             {
               label: "Whole word",
               active: state.options.wholeWord,
@@ -9373,7 +9177,7 @@ function FindPanelView({
             }
           ),
           /* @__PURE__ */ jsx12(
-            IconButton3,
+            IconButton4,
             {
               label: "Regular expression",
               active: state.options.regex,
@@ -9385,7 +9189,7 @@ function FindPanelView({
       }
     ),
     /* @__PURE__ */ jsx12(
-      Toolbar2,
+      Toolbar3,
       {
         divided: false,
         left: /* @__PURE__ */ jsx12(
@@ -9401,7 +9205,7 @@ function FindPanelView({
         ),
         right: /* @__PURE__ */ jsxs11(ToolbarGroup2, { end: true, children: [
           /* @__PURE__ */ jsx12(
-            IconButton3,
+            IconButton4,
             {
               label: "Previous match",
               disabled: state.matches.length === 0,
@@ -9410,7 +9214,7 @@ function FindPanelView({
             }
           ),
           /* @__PURE__ */ jsx12(
-            IconButton3,
+            IconButton4,
             {
               label: "Next match",
               disabled: state.matches.length === 0,
@@ -9424,10 +9228,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,
+      Toolbar3,
       {
         left: /* @__PURE__ */ jsx12(
-          SearchField2,
+          SearchField3,
           {
             value: state.replaceText,
             onChange: (value) => controller.setReplaceText(value),
@@ -9444,24 +9248,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(ScrollArea3, { children: state.status === "idle" ? /* @__PURE__ */ jsx12(EmptyState4, { title: "Find", hint: "Type to search. Enter goes to the next match." }) : state.status === "invalidPattern" ? /* @__PURE__ */ jsx12(
+      EmptyState4,
       {
         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(EmptyState4, { title: "Search failed", hint: state.message ?? "The host could not complete the search." }) : state.noResults ? /* @__PURE__ */ jsx12(EmptyState4, { title: "No matches", hint: `Nothing in scope matches \u201C${state.text}\u201D.` }) : state.groups.length === 1 && state.groups[0].id === "" ? /* @__PURE__ */ jsx12(RowList2, { 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(Badge4, { children: group.matches.length }),
+        children: /* @__PURE__ */ jsx12(RowList2, { children: group.matches.map((m) => renderMatch(m, ++flatIndex)) })
       },
       group.id
     )) }) : null,
     /* @__PURE__ */ jsx12(
-      StatusBar3,
+      StatusBar4,
       {
         left: state.truncated ? `showing first ${state.matches.length}` : void 0,
         right: state.options.scope
@@ -10111,17 +9915,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 Badge5,
+  EmptyState as EmptyState5,
+  ScrollArea as ScrollArea4,
   Section as Section3,
   SegmentedControl as SegmentedControl2,
-  StatusBar as StatusBar4,
+  StatusBar as StatusBar5,
   TextButton as TextButton3,
-  Toolbar as Toolbar3,
+  Toolbar as Toolbar4,
   ToolbarGroup as ToolbarGroup3
 } from "@xenosystem/components/chrome";
-import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var ANCHOR_BADGE = {
   live: null,
   stale: {
@@ -10161,8 +9965,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(Badge5, { tone: badge.tone, title: badge.title, children: badge.label }) : null,
+          thread.resolved ? /* @__PURE__ */ jsx13(Badge5, { 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 +10066,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,
+      Toolbar4,
       {
         left: /* @__PURE__ */ jsx13(
           SegmentedControl2,
@@ -10301,23 +10105,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(ScrollArea4, { 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,
+        EmptyState5,
         {
           title: "Nothing matches this filter",
           hint: `${state.totals.all} comment${state.totals.all === 1 ? "" : "s"} on this document.`
         }
       )
     ) : /* @__PURE__ */ jsx13(
-      EmptyState4,
+      EmptyState5,
       {
         title: "No comments",
         hint: emptyHint ?? "Select something and add a comment."
       }
-    ) : /* @__PURE__ */ jsxs12(Fragment5, { children: [
+    ) : /* @__PURE__ */ jsxs12(Fragment6, { children: [
       open.map((view) => /* @__PURE__ */ jsx13(
         ThreadCard,
         {
@@ -10379,7 +10183,7 @@ function CommentsPanelView({
       ) })
     ] }),
     /* @__PURE__ */ jsx13(
-      StatusBar4,
+      StatusBar5,
       {
         left: `${state.totals.open} open`,
         right: state.totals.stale > 0 ? `${state.totals.stale} edited` : void 0
@@ -11551,8 +11355,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 EmptyState6, StatusBar as StatusBar6, Toolbar as Toolbar5, ToolbarGroup as ToolbarGroup4 } from "@xenosystem/components/chrome";
+import { Fragment as Fragment7, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var HEADER_H2 = 24;
 var PORT_ROW_H2 = 18;
 function NodeGraphPanelView({ controller }) {
@@ -11633,7 +11437,7 @@ function NodeGraphPanelView({ controller }) {
   const total = state.graph?.nodes.length ?? 0;
   return /* @__PURE__ */ jsxs13("div", { style: SHELL2, children: [
     /* @__PURE__ */ jsx14(
-      Toolbar4,
+      Toolbar5,
       {
         right: /* @__PURE__ */ jsxs13(ToolbarGroup4, { end: true, children: [
           /* @__PURE__ */ jsx14("button", { type: "button", style: button2(), onClick: () => controller.fit(false), children: "Fit" }),
@@ -11641,7 +11445,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(EmptyState6, { title: "Empty graph", hint: "Wire a host graph into this panel's input." }) : /* @__PURE__ */ jsxs13(
       "div",
       {
         ref: containerRef,
@@ -11705,7 +11509,7 @@ function NodeGraphPanelView({ controller }) {
       }
     ),
     /* @__PURE__ */ jsx14(
-      StatusBar5,
+      StatusBar6,
       {
         left: `${total} node${total === 1 ? "" : "s"}`,
         right: /* @__PURE__ */ jsxs13("span", { className: "tabular-nums", children: [
@@ -11775,7 +11579,7 @@ function NodeRect({ node, selected, zoom }) {
         children: node.title
       }
     ),
-    node.collapsed ? null : /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    node.collapsed ? null : /* @__PURE__ */ jsxs13(Fragment7, { children: [
       node.inputs.map((port, i) => /* @__PURE__ */ jsx14(
         Port,
         {
@@ -13080,22 +12884,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 Badge6,
+  EmptyState as EmptyState7,
   ErrorState,
-  IconButton as IconButton4,
+  IconButton as IconButton5,
   LoadingState,
-  Row as Row2,
-  ScrollArea as ScrollArea4,
-  SearchField as SearchField3,
-  StatusBar as StatusBar6,
-  Toolbar as Toolbar5,
+  Row as Row3,
+  ScrollArea as ScrollArea5,
+  SearchField as SearchField4,
+  StatusBar as StatusBar7,
+  Toolbar as Toolbar6,
   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 Fragment8, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function Svg({ children, size = 11 }) {
   return /* @__PURE__ */ jsx15(
     "svg",
@@ -13148,37 +12952,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(Fragment8, { 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(Fragment8, { 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(Fragment8, { 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(Fragment8, { 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(Fragment8, { children: /* @__PURE__ */ jsx15("path", { d: "M6 4v16M18 4v16M6 12h12" }) }),
+  bot: /* @__PURE__ */ jsxs14(Fragment8, { 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(Fragment8, { 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(Fragment8, { 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 +12995,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 Fragment9, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function TreePanelView({
   controller,
   rowHeight = 24,
@@ -13223,7 +13027,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(EmptyState7, { 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 +13044,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(EmptyState7, { title: "No matches", hint: `Nothing matches \u201C${state.filter}\u201D.` }) : /* @__PURE__ */ jsx16(
+        EmptyState7,
         {
           title: "Nothing here",
           hint: emptyHint ?? source.sourceMessage ?? "This source has no items yet."
@@ -13256,7 +13060,7 @@ function TreePanelView({
       overscan
     });
     const slice = state.rows.slice(window2.startIndex, window2.endIndex);
-    return /* @__PURE__ */ jsx16(ScrollArea4, { children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx16(ScrollArea5, { children: /* @__PURE__ */ jsx16(
       "div",
       {
         ref: scrollRef,
@@ -13288,10 +13092,10 @@ function TreePanelView({
   })();
   return /* @__PURE__ */ jsxs15("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
     /* @__PURE__ */ jsx16(
-      Toolbar5,
+      Toolbar6,
       {
         left: showSearch ? /* @__PURE__ */ jsx16(
-          SearchField3,
+          SearchField4,
           {
             value: state.filter,
             onChange: (term) => controller.setFilter(term),
@@ -13299,22 +13103,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(IconButton5, { icon: /* @__PURE__ */ jsx16(ExpandGlyph, {}), label: "Expand all", onClick: () => controller.expandAll() }),
           /* @__PURE__ */ jsx16(
-            IconButton4,
+            IconButton5,
             {
               icon: /* @__PURE__ */ jsx16(CollapseGlyph, {}),
               label: "Collapse all",
               onClick: () => controller.collapseAll()
             }
           ),
-          /* @__PURE__ */ jsx16(IconButton4, { icon: /* @__PURE__ */ jsx16(RefreshGlyph, {}), label: "Refresh", onClick: () => controller.refresh() })
+          /* @__PURE__ */ jsx16(IconButton5, { icon: /* @__PURE__ */ jsx16(RefreshGlyph, {}), label: "Refresh", onClick: () => controller.refresh() })
         ] })
       }
     ),
     body,
     /* @__PURE__ */ jsx16(
-      StatusBar6,
+      StatusBar7,
       {
         left: `${state.rows.length} item${state.rows.length === 1 ? "" : "s"}`,
         right: state.selection.length > 0 ? `${state.selection.length} selected` : void 0
@@ -13373,7 +13177,7 @@ function TreeRowView({
       },
       title: drop?.reason,
       children: /* @__PURE__ */ jsx16(
-        Row2,
+        Row3,
         {
           role: "treeitem",
           "aria-expanded": row.container ? row.expanded : void 0,
@@ -13408,7 +13212,7 @@ function TreeRowView({
           onPointerUp: () => {
             if (state.drag) controller.endDrag();
           },
-          icon: /* @__PURE__ */ jsxs15(Fragment8, { children: [
+          icon: /* @__PURE__ */ jsxs15(Fragment9, { children: [
             twisty,
             /* @__PURE__ */ jsx16(NodeIcon, { icon: node.icon ?? defaultIconFor(node.kind) })
           ] }),
@@ -13438,15 +13242,15 @@ function TreeRowView({
             }
           ) : node.label,
           meta: /* @__PURE__ */ jsx16(ChildStateChip, { row, controller }),
-          trailing: /* @__PURE__ */ jsxs15(Fragment8, { children: [
+          trailing: /* @__PURE__ */ jsxs15(Fragment9, { 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(Badge6, { tone: badge.tone, className: badge.title ? void 0 : void 0, children: badge.text }, badge.id)
             )),
             node.actions?.map((action) => /* @__PURE__ */ jsx16(
-              IconButton4,
+              IconButton5,
               {
                 size: "sm",
                 icon: /* @__PURE__ */ jsx16(NodeIcon, { icon: action.icon }),
@@ -13472,7 +13276,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(Badge6, { tone: "error", children: error?.code === "denied" ? "no access" : error?.code ?? "failed" });
   }
   if (row.node.hasMore && row.expanded) {
     return /* @__PURE__ */ jsx16(
@@ -13489,7 +13293,7 @@ function ChildStateChip({
     );
   }
   if (row.node.truncatedAt !== void 0) {
-    return /* @__PURE__ */ jsx16(Badge5, { tone: "warning", children: `first ${row.node.truncatedAt}` });
+    return /* @__PURE__ */ jsx16(Badge6, { 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" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/blocks",
-  "version": "0.11.3",
+  "version": "0.11.4",
   "description": "XENO Blocks — rung 3 of the front ladder: components composed into a contract-bearing unit (manifest: ports, intents, commands, agent surface), rendered by @xenosystem/workbench. ONE package, one subpath per family (/auth, /edit, /data, /time, /ops, /trust, /agent), one named export per block — XENO PACKAGE NAMING - STANDARD.md.",
   "license": "UNLICENSED",
   "type": "module",
@@ -60,7 +60,7 @@
   "peerDependencies": {
     "@duckdb/duckdb-wasm": ">=1.28.0",
     "@xenosystem/block-sdk": "^0.3.0",
-    "@xenosystem/components": ">=0.12.0 <1",
+    "@xenosystem/components": ">=0.13.1 <1",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements-react": ">=0.0.1",
     "@xenosystem/time-core": "^0.1.0",
@@ -76,7 +76,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@xenosystem/block-sdk": "^0.3.1",
-    "@xenosystem/components": "^0.12.0",
+    "@xenosystem/components": "^0.13.1",
     "@xenosystem/data-core": "^0.1.0",
     "@xenosystem/elements-react": "0.0.1",
     "@xenosystem/time-core": "^0.1.0",