@xenosystem/blocks 0.11.4 → 0.11.6

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,7 +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 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";
+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";
@@ -4579,7 +4351,7 @@ function PendingGlyph({ size = 9 }) {
 }
 
 // src/edit/history/react/HistoryPanelView.tsx
-import { Fragment as Fragment3, 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]);
@@ -4628,29 +4400,29 @@ function HistoryPanelView({ controller }) {
     },
     [controller]
   );
-  return /* @__PURE__ */ jsxs7(Column2, { className: "xeno-history-panel", children: [
+  return /* @__PURE__ */ jsxs7(Column3, { className: "xeno-history-panel", children: [
     /* @__PURE__ */ jsx8(
-      Toolbar,
+      Toolbar2,
       {
-        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() })
+        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(Fragment3, { children: [
-          /* @__PURE__ */ jsxs7(Text3, { role: "number", children: [
+        right: /* @__PURE__ */ jsxs7(Fragment4, { children: [
+          /* @__PURE__ */ jsxs7(Text4, { 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
+          controller.isClearAllowed() ? /* @__PURE__ */ jsx8(IconButton4, { 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
+        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(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(
+    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,
         {
           row,
@@ -4660,17 +4432,17 @@ function HistoryPanelView({ controller }) {
         },
         row.entryId ?? "__original__"
       )) }) }),
-      rows.length === 0 ? /* @__PURE__ */ jsx8(EmptyState2, { title: "No history" }) : null
+      rows.length === 0 ? /* @__PURE__ */ jsx8(EmptyState3, { title: "No history" }) : null
     ] }),
     memory ? /* @__PURE__ */ jsx8(
-      StatusBar,
+      StatusBar2,
       {
-        left: /* @__PURE__ */ jsxs7(Text3, { role: "number", children: [
+        left: /* @__PURE__ */ jsxs7(Text4, { role: "number", children: [
           memory.usedMB.toFixed(1),
           " MB",
           memory.limitMB ? ` / ${memory.limitMB} MB` : ""
         ] }),
-        right: memory.onDiskCount !== void 0 ? /* @__PURE__ */ jsxs7(Text3, { role: "meta", children: [
+        right: memory.onDiskCount !== void 0 ? /* @__PURE__ */ jsxs7(Text4, { role: "meta", children: [
           memory.onDiskCount,
           " on disk"
         ] }) : null
@@ -4684,7 +4456,7 @@ function HistoryRowView({ row, controller, rowHeight, focused }) {
   const failed = entry?.status === "failed";
   const jumpable = controller.isJumpAllowed() && entry?.caps?.jumpable !== false;
   return /* @__PURE__ */ jsx8(
-    Row,
+    Row2,
     {
       height: rowHeight,
       selected: row.current,
@@ -4702,17 +4474,17 @@ function HistoryRowView({ row, controller, rowHeight, focused }) {
         controller.requestContextMenu(row.entryId, e.clientX, e.clientY);
       },
       title: row.label,
-      trailing: /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      trailing: /* @__PURE__ */ jsxs7(Fragment4, { 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: [
+        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
         ] }) : null,
-        controller.areTimestampsShown() && entry?.at !== void 0 ? /* @__PURE__ */ jsx8(Text3, { role: "meta", children: formatTime(entry.at) }) : null,
+        controller.areTimestampsShown() && entry?.at !== void 0 ? /* @__PURE__ */ jsx8(Text4, { role: "meta", children: formatTime(entry.at) }) : null,
         pending ? /* @__PURE__ */ jsx8(
-          IconButton3,
+          IconButton4,
           {
             size: "sm",
             icon: /* @__PURE__ */ jsx8(XIcon2, {}),
@@ -5814,7 +5586,29 @@ function drawAlphaStrip(ctx, w, h, hsv) {
 }
 
 // src/edit/color/react/ColorPanelView.tsx
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { CanvasSurface, ColorChip, Column as Column4, Field as Field2, IconButton as IconButton5, Input as Input3, NumberInput, Section as Section2, Select as Select3, Stack as Stack3, SwatchGrid, TextButton as TextButton2 } from "@xenosystem/components/chrome";
+
+// src/edit/color/react/icons.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var svg = { width: 11, height: 11, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true };
+function EyedropperIcon() {
+  return /* @__PURE__ */ jsxs8("svg", { ...svg, children: [
+    /* @__PURE__ */ jsx9("path", { d: "m2 22 1-1h3l9-9" }),
+    /* @__PURE__ */ jsx9("path", { d: "M3 21v-3l9-9" }),
+    /* @__PURE__ */ jsx9("path", { d: "m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z" })
+  ] });
+}
+function SwapIcon() {
+  return /* @__PURE__ */ jsxs8("svg", { ...svg, children: [
+    /* @__PURE__ */ jsx9("path", { d: "m16 3 4 4-4 4" }),
+    /* @__PURE__ */ jsx9("path", { d: "M20 7H4" }),
+    /* @__PURE__ */ jsx9("path", { d: "m8 21-4-4 4-4" }),
+    /* @__PURE__ */ jsx9("path", { d: "M4 17h16" })
+  ] });
+}
+
+// src/edit/color/react/ColorPanelView.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var SPACE_LABEL = {
   hex: "HEX",
   rgb: "RGB",
@@ -5904,193 +5698,96 @@ function ColorPanelView({ controller }) {
     }
   }, [controller]);
   const onHexInput = useCallback5(
-    (e) => {
-      controller.setFromColor(e.target.value, void 0, { commit: true });
+    (raw) => {
+      controller.setFromColor(raw, void 0, { commit: true });
     },
     [controller]
   );
   const onComponentInput = useCallback5(
-    (index, raw) => {
+    (index, n) => {
       const comps2 = [...value.components ?? [0, 0, 0]];
-      comps2[index] = Number(raw);
+      comps2[index] = n;
       controller.setFromComponents(space, comps2, { commit: true });
     },
     [controller, space, value.components]
   );
   const componentLabels = COMPONENT_LABELS[space];
   const comps = value.components ?? [];
-  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: { ...S2.chip, ...controller.getActiveChannel() === "fg" ? S2.chipActive : null, background: value.hex },
-          onClick: () => controller.setChannel("fg"),
-          title: "Foreground"
-        }
-      ),
-      /* @__PURE__ */ jsx9(
-        "button",
-        {
-          type: "button",
-          style: S2.swap,
-          onClick: () => controller.swapChannels(),
-          title: "Swap FG/BG (X)",
-          children: "\u21C4"
-        }
-      ),
-      /* @__PURE__ */ jsx9(
-        "button",
-        {
-          type: "button",
-          "aria-pressed": controller.getActiveChannel() === "bg",
-          style: { ...S2.chip, ...controller.getActiveChannel() === "bg" ? S2.chipActive : null },
-          onClick: () => controller.setChannel("bg"),
-          title: "Background"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs8("div", { style: S2.pickerRow, children: [
-      /* @__PURE__ */ jsx9(
-        "canvas",
+  const activeChannel = controller.getActiveChannel();
+  return /* @__PURE__ */ jsx10(Column4, { className: "xeno-color-panel", children: /* @__PURE__ */ jsxs9(Stack3, { gap: 8, children: [
+    controller.getChannelsMode() === "fg-bg" ? /* @__PURE__ */ jsxs9(Stack3, { direction: "row", pad: "none", children: [
+      /* @__PURE__ */ jsx10(ColorChip, { color: value.hex, label: "Foreground", pressed: activeChannel === "fg", onClick: () => controller.setChannel("fg") }),
+      /* @__PURE__ */ jsx10(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx10(SwapIcon, {}), label: "Swap FG/BG (X)", onClick: () => controller.swapChannels() }),
+      /* @__PURE__ */ jsx10(ColorChip, { color: null, label: "Background", pressed: activeChannel === "bg", onClick: () => controller.setChannel("bg") })
+    ] }) : null,
+    /* @__PURE__ */ jsxs9(Stack3, { direction: "row", pad: "none", children: [
+      /* @__PURE__ */ jsx10(
+        CanvasSurface,
         {
           ref: spectrumRef,
           width: 200,
           height: 140,
-          style: { ...S2.spectrum, ...bound ? S2.disabled : null },
+          grow: true,
+          cursor: "crosshair",
+          disabled: bound,
+          "aria-label": "Saturation and value",
           onPointerDown: (e) => onSpectrumPointer(e, true),
           onPointerMove: (e) => onSpectrumPointer(e, false),
           onPointerUp: endDrag
         }
       ),
-      /* @__PURE__ */ jsx9(
-        "canvas",
+      /* @__PURE__ */ jsx10(
+        CanvasSurface,
         {
           ref: hueRef,
           width: 14,
           height: 140,
-          style: { ...S2.strip, ...bound ? S2.disabled : null },
+          cursor: "ns-resize",
+          disabled: bound,
+          "aria-label": "Hue",
           onPointerDown: (e) => onHuePointer(e, true),
           onPointerMove: (e) => onHuePointer(e, false),
           onPointerUp: endDrag
         }
       ),
-      controller.isAlphaShown() && /* @__PURE__ */ jsx9(
-        "canvas",
+      controller.isAlphaShown() ? /* @__PURE__ */ jsx10(
+        CanvasSurface,
         {
           ref: alphaRef,
           width: 14,
           height: 140,
-          style: { ...S2.strip, ...bound ? S2.disabled : null },
+          cursor: "ns-resize",
+          disabled: bound,
+          "aria-label": "Alpha",
           onPointerDown: (e) => onAlphaPointer(e, true),
           onPointerMove: (e) => onAlphaPointer(e, false),
           onPointerUp: endDrag
         }
-      )
+      ) : null
     ] }),
-    /* @__PURE__ */ jsxs8("div", { style: S2.controls, children: [
-      /* @__PURE__ */ jsx9(
-        "select",
-        {
-          value: space,
-          onChange: (e) => controller.setSpace(e.target.value),
-          style: S2.select,
-          "aria-label": "Color model",
-          children: EDIT_SPACES.map((s) => /* @__PURE__ */ jsx9("option", { value: s, children: SPACE_LABEL[s] }, s))
-        }
-      ),
-      space === "hex" ? /* @__PURE__ */ jsx9(
-        "input",
-        {
-          type: "text",
-          value: value.hex,
-          onChange: onHexInput,
-          disabled: bound,
-          style: S2.hexInput,
-          "aria-label": "Hex",
-          spellCheck: false
-        }
-      ) : /* @__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",
-          {
-            type: "number",
-            value: roundForSpace(space, i, comps[i] ?? 0),
-            onChange: (e) => onComponentInput(i, e.target.value),
-            disabled: bound,
-            style: S2.numInput
-          }
-        )
-      ] }, label)) }),
-      controller.isAlphaShown() && /* @__PURE__ */ jsxs8("label", { style: S2.alphaField, children: [
-        /* @__PURE__ */ jsx9("span", { style: S2.componentLabel, children: "A" }),
-        /* @__PURE__ */ jsx9(
-          "input",
-          {
-            type: "number",
-            min: 0,
-            max: 100,
-            value: Math.round(value.alpha * 100),
-            onChange: (e) => controller.setAlpha(Number(e.target.value) / 100, { commit: true }),
-            disabled: bound,
-            style: S2.numInput
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx9("button", { type: "button", style: S2.iconBtn, title: "Pick from screen", onClick: () => controller.requestEyedropper(), children: "\u29BF" })
+    /* @__PURE__ */ jsxs9(Stack3, { direction: "row", pad: "none", gap: 4, children: [
+      /* @__PURE__ */ jsx10(Select3, { size: "sm", label: "Color model", value: space, options: EDIT_SPACES.map((sp) => ({ value: sp, label: SPACE_LABEL[sp] })), onChange: (v) => controller.setSpace(v) }),
+      space === "hex" ? /* @__PURE__ */ jsx10(Input3, { variant: "mono", label: "Hex", value: value.hex, onChange: onHexInput, disabled: bound }) : (componentLabels ?? []).map((label, i) => /* @__PURE__ */ jsx10(NumberInput, { caption: label, value: roundForSpace(space, i, comps[i] ?? 0), onChange: (n) => onComponentInput(i, n), disabled: bound }, label)),
+      controller.isAlphaShown() ? /* @__PURE__ */ jsx10(NumberInput, { caption: "A", label: "Alpha", min: 0, max: 100, value: Math.round(value.alpha * 100), onChange: (n) => controller.setAlpha(n / 100, { commit: true }), disabled: bound }) : null,
+      /* @__PURE__ */ jsx10(IconButton5, { size: "sm", icon: /* @__PURE__ */ jsx10(EyedropperIcon, {}), label: "Pick from screen", onClick: () => controller.requestEyedropper() })
     ] }),
-    controller.hasTokens() && /* @__PURE__ */ jsxs8("div", { style: S2.tokenRow, children: [
-      /* @__PURE__ */ jsx9("span", { style: S2.componentLabel, children: "Token" }),
-      /* @__PURE__ */ jsxs8(
-        "select",
+    controller.hasTokens() ? /* @__PURE__ */ jsx10(Field2, { label: "Token", htmlFor: "xeno-color-token", children: /* @__PURE__ */ jsxs9(Stack3, { direction: "row", pad: "none", gap: 4, children: [
+      /* @__PURE__ */ jsx10(
+        Select3,
         {
+          size: "sm",
+          label: "Bind token",
           value: controller.getBoundTokenId() ?? "",
-          onChange: (e) => e.target.value ? controller.bindToken(e.target.value) : controller.unbindToken(),
-          style: S2.select,
-          "aria-label": "Bind token",
-          children: [
-            /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014 raw \u2014" }),
-            controller.getTokens().map((t) => /* @__PURE__ */ jsx9("option", { value: t.id, children: t.name }, t.id))
-          ]
+          placeholder: "\u2014 raw \u2014",
+          options: controller.getTokens().map((t) => ({ value: t.id, label: t.name })),
+          onChange: (id) => id ? controller.bindToken(id) : controller.unbindToken()
         }
       ),
-      bound && /* @__PURE__ */ jsx9("button", { type: "button", style: S2.textBtn, onClick: () => controller.unbindToken(), children: "Unbind" })
-    ] }),
-    /* @__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: S2.swatchGrid, children: controller.getSwatches().map((hex) => /* @__PURE__ */ jsx9(
-      "button",
-      {
-        type: "button",
-        style: { ...S2.swatch, background: hex },
-        title: hex,
-        onClick: () => controller.selectColor(hex),
-        onContextMenu: (e) => {
-          e.preventDefault();
-          void controller.removeSwatch(hex);
-        }
-      },
-      hex
-    )) }),
-    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: { ...S2.swatch, background: hex },
-          title: hex,
-          onClick: () => controller.selectColor(hex)
-        },
-        `${hex}-${i}`
-      )) })
-    ] })
-  ] });
+      bound ? /* @__PURE__ */ jsx10(TextButton2, { onClick: () => controller.unbindToken(), children: "Unbind" }) : null
+    ] }) }) : null,
+    /* @__PURE__ */ jsx10(Section2, { title: "Swatches", flush: true, actions: /* @__PURE__ */ jsx10(TextButton2, { onClick: () => void controller.addSwatch(), children: "+ Save" }), children: /* @__PURE__ */ jsx10(SwatchGrid, { label: "Swatches", children: controller.getSwatches().map((hex) => /* @__PURE__ */ jsx10(ColorChip, { size: "grid", color: hex, label: hex, onClick: () => controller.selectColor(hex), onContextMenu: () => void controller.removeSwatch(hex) }, hex)) }) }),
+    controller.getRecent().length > 0 ? /* @__PURE__ */ jsx10(Section2, { title: "Recent", flush: true, children: /* @__PURE__ */ jsx10(SwatchGrid, { label: "Recent", children: controller.getRecent().map((hex, i) => /* @__PURE__ */ jsx10(ColorChip, { size: "grid", color: hex, label: hex, onClick: () => controller.selectColor(hex) }, `${hex}-${i}`)) }) }) : null
+  ] }) });
 }
 function clamp01(n) {
   return Math.max(0, Math.min(1, Number.isFinite(n) ? n : 0));
@@ -6099,32 +5796,6 @@ function roundForSpace(space, index, v) {
   if (space === "oklch") return Math.round(v * 10) / 10;
   return Math.round(v);
 }
-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 },
-  chipActive: { outline: "1px solid var(--xeno-text)" },
-  swap: { width: 18, height: 18, borderRadius: 2, border: "1px solid var(--xeno-control)", background: "transparent", color: "inherit", cursor: "pointer", fontSize: 11, lineHeight: "16px", padding: 0 },
-  pickerRow: { display: "flex", gap: 6 },
-  spectrum: { borderRadius: 2, cursor: "crosshair", flex: 1, touchAction: "none" },
-  strip: { borderRadius: 2, cursor: "ns-resize", touchAction: "none" },
-  disabled: { opacity: 0.4, cursor: "not-allowed" },
-  controls: { display: "flex", alignItems: "center", gap: 4, flexWrap: "wrap" },
-  select: { background: "var(--xeno-border-subtle)", color: "inherit", border: "1px solid var(--xeno-control)", borderRadius: 2, fontSize: 11, padding: "2px 4px" },
-  hexInput: { flex: 1, minWidth: 72, background: "var(--xeno-border-subtle)", color: "inherit", border: "1px solid var(--xeno-control)", borderRadius: 2, fontSize: 11, padding: "2px 4px", fontVariantNumeric: "tabular-nums" },
-  componentRow: { display: "flex", gap: 4, flex: 1 },
-  componentField: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1 },
-  componentLabel: { fontSize: 9, opacity: 0.6 },
-  sectionLabel: { fontSize: 9, opacity: 0.6, textTransform: "uppercase", letterSpacing: 0.4 },
-  numInput: { width: 40, background: "var(--xeno-border-subtle)", color: "inherit", border: "1px solid var(--xeno-control)", borderRadius: 2, fontSize: 11, padding: "2px 3px", textAlign: "center", fontVariantNumeric: "tabular-nums" },
-  alphaField: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1 },
-  iconBtn: { width: 22, height: 22, borderRadius: 2, border: "1px solid var(--xeno-control)", background: "var(--xeno-border-subtle)", color: "inherit", cursor: "pointer", fontSize: 12, padding: 0 },
-  tokenRow: { display: "flex", alignItems: "center", gap: 6 },
-  swatchHeader: { display: "flex", alignItems: "center", justifyContent: "space-between" },
-  textBtn: { background: "transparent", border: "none", color: "inherit", opacity: 0.7, cursor: "pointer", fontSize: 10, padding: 0 },
-  swatchGrid: { display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 3 },
-  swatch: { width: "100%", aspectRatio: "1 / 1", borderRadius: 2, border: "1px solid var(--xeno-control)", cursor: "pointer", padding: 0 }
-};
 
 // src/edit/color/panel.ts
 function createColorPanel(options = {}) {
@@ -7396,9 +7067,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 EmptyState3, StatusBar as StatusBar2, Toolbar as Toolbar2, 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 Fragment5, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs10 } 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);
@@ -7477,21 +7148,21 @@ function CurvePanelView({ controller, showPresets = true }) {
   const preview = state.preview;
   const selected = new Set(state.selection.keys.map(keyRefId));
   const channels = state.curves?.channels ?? [];
-  return /* @__PURE__ */ jsxs9("div", { style: SHELL, children: [
-    /* @__PURE__ */ jsx10(
-      Toolbar2,
+  return /* @__PURE__ */ jsxs10("div", { style: SHELL, children: [
+    /* @__PURE__ */ jsx11(
+      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: [
-          ["aligned", "broken", "flat"].map((mode) => /* @__PURE__ */ jsx10("button", { type: "button", style: button(), onClick: () => controller.setTangentMode(mode), children: mode }, mode)),
-          /* @__PURE__ */ jsx10("button", { type: "button", style: button(), onClick: () => controller.fitAll(), children: "Fit" })
+        left: /* @__PURE__ */ jsx11(ToolbarGroup, { children: ["linear", "bezier", "hold", "step"].map((mode) => /* @__PURE__ */ jsx11("button", { type: "button", style: button(), onClick: () => controller.setInterpolation(mode), children: mode }, mode)) }),
+        right: /* @__PURE__ */ jsxs10(ToolbarGroup, { end: true, children: [
+          ["aligned", "broken", "flat"].map((mode) => /* @__PURE__ */ jsx11("button", { type: "button", style: button(), onClick: () => controller.setTangentMode(mode), children: mode }, mode)),
+          /* @__PURE__ */ jsx11("button", { type: "button", style: button(), onClick: () => controller.fitAll(), children: "Fit" })
         ] })
       }
     ),
-    showPresets ? /* @__PURE__ */ jsx10(
-      Toolbar2,
+    showPresets ? /* @__PURE__ */ jsx11(
+      Toolbar3,
       {
-        left: /* @__PURE__ */ jsx10(ToolbarGroup, { children: EASING_PRESETS.slice(0, 6).map((preset) => /* @__PURE__ */ jsx10(
+        left: /* @__PURE__ */ jsx11(ToolbarGroup, { children: EASING_PRESETS.slice(0, 6).map((preset) => /* @__PURE__ */ jsx11(
           "button",
           {
             type: "button",
@@ -7504,7 +7175,7 @@ function CurvePanelView({ controller, showPresets = true }) {
         )) })
       }
     ) : null,
-    channels.length === 0 ? /* @__PURE__ */ jsx10(EmptyState3, { title: "No curves", hint: "Wire an animated property into this panel's input." }) : /* @__PURE__ */ jsx10(
+    channels.length === 0 ? /* @__PURE__ */ jsx11(EmptyState4, { title: "No curves", hint: "Wire an animated property into this panel's input." }) : /* @__PURE__ */ jsx11(
       "div",
       {
         ref: containerRef,
@@ -7518,7 +7189,7 @@ function CurvePanelView({ controller, showPresets = true }) {
         onPointerUp,
         onPointerCancel: onPointerUp,
         onKeyDown,
-        children: /* @__PURE__ */ jsxs9(
+        children: /* @__PURE__ */ jsxs10(
           "svg",
           {
             "data-canvas": "curve-plot",
@@ -7526,7 +7197,7 @@ function CurvePanelView({ controller, showPresets = true }) {
             height: "100%",
             style: { position: "absolute", inset: 0, display: "block" },
             children: [
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11(
                 "line",
                 {
                   x1: scale.gutterPx,
@@ -7536,7 +7207,7 @@ function CurvePanelView({ controller, showPresets = true }) {
                   stroke: "var(--xeno-control)"
                 }
               ),
-              scale.minValue < 0 && scale.maxValue > 0 ? /* @__PURE__ */ jsx10(
+              scale.minValue < 0 && scale.maxValue > 0 ? /* @__PURE__ */ jsx11(
                 "line",
                 {
                   x1: scale.gutterPx,
@@ -7551,7 +7222,7 @@ function CurvePanelView({ controller, showPresets = true }) {
                 const channel = channels.find((c) => c.id === series.channelId);
                 if (!channel || series.points.length === 0) return null;
                 const d = series.points.map((p, i) => `${i === 0 ? "M" : "L"}${scale.tickToX(p.tick).toFixed(2)},${scale.valueToY(p.value).toFixed(2)}`).join(" ");
-                return /* @__PURE__ */ jsx10(
+                return /* @__PURE__ */ jsx11(
                   "path",
                   {
                     d,
@@ -7571,9 +7242,9 @@ function CurvePanelView({ controller, showPresets = true }) {
                   const x = scale.tickToX(shown.tick);
                   const y = scale.valueToY(shown.value);
                   const isSelected = selected.has(id);
-                  return /* @__PURE__ */ jsxs9("g", { children: [
-                    isSelected ? /* @__PURE__ */ jsx10(Handles, { keyframe: key, x, y, scale }) : null,
-                    /* @__PURE__ */ jsx10(
+                  return /* @__PURE__ */ jsxs10("g", { children: [
+                    isSelected ? /* @__PURE__ */ jsx11(Handles, { keyframe: key, x, y, scale }) : null,
+                    /* @__PURE__ */ jsx11(
                       "rect",
                       {
                         x: x - 3,
@@ -7589,7 +7260,7 @@ function CurvePanelView({ controller, showPresets = true }) {
                   ] }, id);
                 })
               ),
-              preview?.marquee ? /* @__PURE__ */ jsx10(
+              preview?.marquee ? /* @__PURE__ */ jsx11(
                 "rect",
                 {
                   x: Math.min(scale.tickToX(preview.marquee.fromTick), scale.tickToX(preview.marquee.toTick)),
@@ -7602,7 +7273,7 @@ function CurvePanelView({ controller, showPresets = true }) {
                   stroke: "var(--xeno-active)"
                 }
               ) : null,
-              state.playheadTick !== null ? /* @__PURE__ */ jsx10(
+              state.playheadTick !== null ? /* @__PURE__ */ jsx11(
                 "line",
                 {
                   x1: scale.tickToX(state.playheadTick),
@@ -7617,11 +7288,11 @@ function CurvePanelView({ controller, showPresets = true }) {
         )
       }
     ),
-    /* @__PURE__ */ jsx10(
-      StatusBar2,
+    /* @__PURE__ */ jsx11(
+      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) : "" })
+        right: /* @__PURE__ */ jsx11("span", { className: "tabular-nums", children: state.playheadTick !== null ? formatTick(state.playheadTick, state.timebase) : "" })
       }
     )
   ] });
@@ -7633,14 +7304,14 @@ function Handles({
   scale
 }) {
   const sides = ["in", "out"];
-  return /* @__PURE__ */ jsx10(Fragment5, { children: sides.map((side) => {
+  return /* @__PURE__ */ jsx11(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);
     const hy = scale.valueToY(keyframe.value + tangent.y);
-    return /* @__PURE__ */ jsxs9("g", { children: [
-      /* @__PURE__ */ jsx10("line", { x1: x, y1: y, x2: hx, y2: hy, stroke: "var(--xeno-active)", strokeWidth: 1 }),
-      /* @__PURE__ */ jsx10("rect", { x: hx - 2, y: hy - 2, width: 4, height: 4, fill: "var(--xeno-text)" })
+    return /* @__PURE__ */ jsxs10("g", { children: [
+      /* @__PURE__ */ jsx11("line", { x1: x, y1: y, x2: hx, y2: hy, stroke: "var(--xeno-active)", strokeWidth: 1 }),
+      /* @__PURE__ */ jsx11("rect", { x: hx - 2, y: hy - 2, width: 4, height: 4, fill: "var(--xeno-text)" })
     ] }, side);
   }) });
 }
@@ -8273,8 +7944,8 @@ var viewportManifest = {
 
 // src/edit/viewport/react/ViewportPanelView.tsx
 import { useEffect as useEffect6, useRef as useRef7, useSyncExternalStore as useSyncExternalStore6 } from "react";
-import { Badge as Badge3, StatusBar as StatusBar3 } from "@xenosystem/components/chrome";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Badge as Badge4, StatusBar as StatusBar4 } from "@xenosystem/components/chrome";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var SLOT_STYLE = {
   "top-left": { top: 8, left: 8 },
   "top-center": { top: 8, left: "50%", transform: "translateX(-50%)" },
@@ -8302,7 +7973,7 @@ function ViewportPanelView({
     return controller.mount(canvas, container);
   }, [controller]);
   const hidden = new Set(state.hiddenSlots);
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: containerRef,
@@ -8341,7 +8012,7 @@ function ViewportPanelView({
         touchAction: "none"
       },
       children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "canvas",
           {
             ref: canvasRef,
@@ -8352,7 +8023,7 @@ function ViewportPanelView({
         VIEWPORT_SLOTS.map((slot) => {
           const content = overlays?.[slot];
           if (!content || hidden.has(slot)) return null;
-          return /* @__PURE__ */ jsx11(
+          return /* @__PURE__ */ jsx12(
             "div",
             {
               "data-viewport-slot": slot,
@@ -8370,7 +8041,7 @@ function ViewportPanelView({
             slot
           );
         }),
-        state.contextLost ? /* @__PURE__ */ jsx11(
+        state.contextLost ? /* @__PURE__ */ jsx12(
           "div",
           {
             style: {
@@ -8383,11 +8054,11 @@ function ViewportPanelView({
               fontSize: 11,
               zIndex: 20
             },
-            children: /* @__PURE__ */ jsx11(Badge3, { tone: "error", children: "graphics context lost \u2014 restoring" })
+            children: /* @__PURE__ */ jsx12(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(
-          StatusBar3,
+        showStats && state.stats ? /* @__PURE__ */ jsx12("div", { style: { position: "absolute", left: 0, right: 0, bottom: 0, zIndex: 10 }, children: /* @__PURE__ */ jsx12(
+          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
@@ -9040,48 +8711,48 @@ var findManifest = {
 // src/edit/find/react/FindPanelView.tsx
 import { useSyncExternalStore as useSyncExternalStore7 } from "react";
 import {
-  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 StatusBar4,
-  TextButton as TextButton2,
-  Toolbar as Toolbar3,
+  Badge as Badge5,
+  EmptyState as EmptyState5,
+  IconButton as IconButton6,
+  Row as Row3,
+  RowList as RowList3,
+  ScrollArea as ScrollArea4,
+  SearchField as SearchField4,
+  Section as Section3,
+  StatusBar as StatusBar5,
+  TextButton as TextButton3,
+  Toolbar as Toolbar4,
   ToolbarGroup as ToolbarGroup2
 } from "@xenosystem/components/chrome";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function CaseIcon() {
-  return /* @__PURE__ */ jsxs11("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx12("path", { d: "m3 15 4-8 4 8" }),
-    /* @__PURE__ */ jsx12("path", { d: "M4 13h6" }),
-    /* @__PURE__ */ jsx12("circle", { cx: "18", cy: "12", r: "3" }),
-    /* @__PURE__ */ jsx12("path", { d: "M21 9v6" })
+  return /* @__PURE__ */ jsxs12("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx13("path", { d: "m3 15 4-8 4 8" }),
+    /* @__PURE__ */ jsx13("path", { d: "M4 13h6" }),
+    /* @__PURE__ */ jsx13("circle", { cx: "18", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsx13("path", { d: "M21 9v6" })
   ] });
 }
 function WordIcon() {
-  return /* @__PURE__ */ jsxs11("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx12("path", { d: "M7 12h10" }),
-    /* @__PURE__ */ jsx12("path", { d: "M3 7v10" }),
-    /* @__PURE__ */ jsx12("path", { d: "M21 7v10" })
+  return /* @__PURE__ */ jsxs12("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx13("path", { d: "M7 12h10" }),
+    /* @__PURE__ */ jsx13("path", { d: "M3 7v10" }),
+    /* @__PURE__ */ jsx13("path", { d: "M21 7v10" })
   ] });
 }
 function RegexIcon() {
-  return /* @__PURE__ */ jsxs11("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-    /* @__PURE__ */ jsx12("path", { d: "M12 4v8" }),
-    /* @__PURE__ */ jsx12("path", { d: "m8.5 6 7 4" }),
-    /* @__PURE__ */ jsx12("path", { d: "m8.5 10 7-4" }),
-    /* @__PURE__ */ jsx12("path", { d: "M5 18h2" })
+  return /* @__PURE__ */ jsxs12("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx13("path", { d: "M12 4v8" }),
+    /* @__PURE__ */ jsx13("path", { d: "m8.5 6 7 4" }),
+    /* @__PURE__ */ jsx13("path", { d: "m8.5 10 7-4" }),
+    /* @__PURE__ */ jsx13("path", { d: "M5 18h2" })
   ] });
 }
 function UpIcon() {
-  return /* @__PURE__ */ jsx12("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx12("path", { d: "m18 15-6-6-6 6" }) });
+  return /* @__PURE__ */ jsx13("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx13("path", { d: "m18 15-6-6-6 6" }) });
 }
 function DownIcon() {
-  return /* @__PURE__ */ jsx12("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx12("path", { d: "m6 9 6 6 6-6" }) });
+  return /* @__PURE__ */ jsx13("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx13("path", { d: "m6 9 6 6 6-6" }) });
 }
 function StatusLine({
   status,
@@ -9092,14 +8763,14 @@ function StatusLine({
   hasText
 }) {
   if (status === "invalidPattern") {
-    return /* @__PURE__ */ jsx12(Badge4, { tone: "error", title: message ?? void 0, children: "invalid pattern" });
+    return /* @__PURE__ */ jsx13(Badge5, { tone: "error", title: message ?? void 0, children: "invalid pattern" });
   }
   if (status === "failed") {
-    return /* @__PURE__ */ jsx12(Badge4, { tone: "error", title: message ?? void 0, children: "search failed" });
+    return /* @__PURE__ */ jsx13(Badge5, { tone: "error", title: message ?? void 0, children: "search failed" });
   }
-  if (status === "searching") return /* @__PURE__ */ jsx12(Badge4, { children: "searching\u2026" });
+  if (status === "searching") return /* @__PURE__ */ jsx13(Badge5, { children: "searching\u2026" });
   if (!hasText || status === "idle") return null;
-  return /* @__PURE__ */ jsxs11("span", { style: { fontVariantNumeric: "tabular-nums", fontSize: 10, opacity: 0.55 }, children: [
+  return /* @__PURE__ */ jsxs12("span", { style: { fontVariantNumeric: "tabular-nums", fontSize: 10, opacity: 0.55 }, children: [
     displayIndex,
     "/",
     count,
@@ -9122,8 +8793,8 @@ function FindPanelView({
       controller.clear();
     }
   };
-  const renderMatch = (match, index) => /* @__PURE__ */ jsx12(
-    Row2,
+  const renderMatch = (match, index) => /* @__PURE__ */ jsx13(
+    Row3,
     {
       noIcon: true,
       selected: index === state.index,
@@ -9132,7 +8803,7 @@ function FindPanelView({
         event.preventDefault();
         controller.requestContextMenu?.(match.id, event.clientX, event.clientY);
       },
-      label: /* @__PURE__ */ jsx12("span", { children: highlightSegments(match.snippet ?? "", match.ranges).map((segment, i) => /* @__PURE__ */ jsx12(
+      label: /* @__PURE__ */ jsx13("span", { children: highlightSegments(match.snippet ?? "", match.ranges).map((segment, i) => /* @__PURE__ */ jsx13(
         "span",
         {
           style: segment.hit ? { background: "var(--xeno-control)", borderRadius: 2 } : void 0,
@@ -9145,54 +8816,54 @@ function FindPanelView({
     match.id
   );
   let flatIndex = -1;
-  return /* @__PURE__ */ jsxs11("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, onKeyDown, children: [
-    /* @__PURE__ */ jsx12(
-      Toolbar3,
+  return /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, onKeyDown, children: [
+    /* @__PURE__ */ jsx13(
+      Toolbar4,
       {
-        left: /* @__PURE__ */ jsx12(
-          SearchField3,
+        left: /* @__PURE__ */ jsx13(
+          SearchField4,
           {
             value: state.text,
             onChange: (value) => controller.setText(value),
             placeholder
           }
         ),
-        right: /* @__PURE__ */ jsxs11(ToolbarGroup2, { end: true, children: [
-          /* @__PURE__ */ jsx12(
-            IconButton4,
+        right: /* @__PURE__ */ jsxs12(ToolbarGroup2, { end: true, children: [
+          /* @__PURE__ */ jsx13(
+            IconButton6,
             {
               label: "Match case",
               active: state.options.caseSensitive,
               onClick: () => controller.setOptions({ caseSensitive: !state.options.caseSensitive }),
-              icon: /* @__PURE__ */ jsx12(CaseIcon, {})
+              icon: /* @__PURE__ */ jsx13(CaseIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx12(
-            IconButton4,
+          /* @__PURE__ */ jsx13(
+            IconButton6,
             {
               label: "Whole word",
               active: state.options.wholeWord,
               onClick: () => controller.setOptions({ wholeWord: !state.options.wholeWord }),
-              icon: /* @__PURE__ */ jsx12(WordIcon, {})
+              icon: /* @__PURE__ */ jsx13(WordIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx12(
-            IconButton4,
+          /* @__PURE__ */ jsx13(
+            IconButton6,
             {
               label: "Regular expression",
               active: state.options.regex,
               onClick: () => controller.setOptions({ regex: !state.options.regex }),
-              icon: /* @__PURE__ */ jsx12(RegexIcon, {})
+              icon: /* @__PURE__ */ jsx13(RegexIcon, {})
             }
           )
         ] })
       }
     ),
-    /* @__PURE__ */ jsx12(
-      Toolbar3,
+    /* @__PURE__ */ jsx13(
+      Toolbar4,
       {
         divided: false,
-        left: /* @__PURE__ */ jsx12(
+        left: /* @__PURE__ */ jsx13(
           StatusLine,
           {
             status: state.status,
@@ -9203,44 +8874,44 @@ function FindPanelView({
             hasText: state.text !== ""
           }
         ),
-        right: /* @__PURE__ */ jsxs11(ToolbarGroup2, { end: true, children: [
-          /* @__PURE__ */ jsx12(
-            IconButton4,
+        right: /* @__PURE__ */ jsxs12(ToolbarGroup2, { end: true, children: [
+          /* @__PURE__ */ jsx13(
+            IconButton6,
             {
               label: "Previous match",
               disabled: state.matches.length === 0,
               onClick: () => controller.previous(),
-              icon: /* @__PURE__ */ jsx12(UpIcon, {})
+              icon: /* @__PURE__ */ jsx13(UpIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx12(
-            IconButton4,
+          /* @__PURE__ */ jsx13(
+            IconButton6,
             {
               label: "Next match",
               disabled: state.matches.length === 0,
               onClick: () => controller.next(),
-              icon: /* @__PURE__ */ jsx12(DownIcon, {})
+              icon: /* @__PURE__ */ jsx13(DownIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx12(TextButton2, { onClick: () => controller.setReplaceVisible(!state.replaceVisible), children: state.replaceVisible ? "Hide replace" : "Replace" })
+          /* @__PURE__ */ jsx13(TextButton3, { onClick: () => controller.setReplaceVisible(!state.replaceVisible), children: state.replaceVisible ? "Hide replace" : "Replace" })
         ] })
       }
     ),
-    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(
-      Toolbar3,
+    state.message && state.status === "invalidPattern" ? /* @__PURE__ */ jsx13("div", { style: { padding: "2px 8px 4px", fontSize: 9, opacity: 0.6 }, children: state.message }) : null,
+    state.replaceVisible ? /* @__PURE__ */ jsx13(
+      Toolbar4,
       {
-        left: /* @__PURE__ */ jsx12(
-          SearchField3,
+        left: /* @__PURE__ */ jsx13(
+          SearchField4,
           {
             value: state.replaceText,
             onChange: (value) => controller.setReplaceText(value),
             placeholder: "Replace with"
           }
         ),
-        right: /* @__PURE__ */ jsxs11(ToolbarGroup2, { end: true, children: [
-          /* @__PURE__ */ jsx12(TextButton2, { disabled: !state.canReplace, onClick: () => controller.replaceCurrent(), children: "Replace" }),
-          /* @__PURE__ */ jsxs11(TextButton2, { disabled: !state.canReplace, onClick: () => controller.replaceAll(), children: [
+        right: /* @__PURE__ */ jsxs12(ToolbarGroup2, { end: true, children: [
+          /* @__PURE__ */ jsx13(TextButton3, { disabled: !state.canReplace, onClick: () => controller.replaceCurrent(), children: "Replace" }),
+          /* @__PURE__ */ jsxs12(TextButton3, { disabled: !state.canReplace, onClick: () => controller.replaceAll(), children: [
             "All (",
             state.matches.length,
             ")"
@@ -9248,24 +8919,24 @@ function FindPanelView({
         ] })
       }
     ) : null,
-    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,
+    showResults ? /* @__PURE__ */ jsx13(ScrollArea4, { children: state.status === "idle" ? /* @__PURE__ */ jsx13(EmptyState5, { title: "Find", hint: "Type to search. Enter goes to the next match." }) : state.status === "invalidPattern" ? /* @__PURE__ */ jsx13(
+      EmptyState5,
       {
         title: "Invalid pattern",
         hint: state.message ?? "The expression could not be read. Fix it to search."
       }
-    ) : 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,
+    ) : state.status === "failed" ? /* @__PURE__ */ jsx13(EmptyState5, { title: "Search failed", hint: state.message ?? "The host could not complete the search." }) : state.noResults ? /* @__PURE__ */ jsx13(EmptyState5, { title: "No matches", hint: `Nothing in scope matches \u201C${state.text}\u201D.` }) : state.groups.length === 1 && state.groups[0].id === "" ? /* @__PURE__ */ jsx13(RowList3, { children: state.matches.map((m) => renderMatch(m, ++flatIndex)) }) : state.groups.map((group) => /* @__PURE__ */ jsx13(
+      Section3,
       {
         title: group.label || "Results",
         flush: true,
-        badge: /* @__PURE__ */ jsx12(Badge4, { children: group.matches.length }),
-        children: /* @__PURE__ */ jsx12(RowList2, { children: group.matches.map((m) => renderMatch(m, ++flatIndex)) })
+        badge: /* @__PURE__ */ jsx13(Badge5, { children: group.matches.length }),
+        children: /* @__PURE__ */ jsx13(RowList3, { children: group.matches.map((m) => renderMatch(m, ++flatIndex)) })
       },
       group.id
     )) }) : null,
-    /* @__PURE__ */ jsx12(
-      StatusBar4,
+    /* @__PURE__ */ jsx13(
+      StatusBar5,
       {
         left: state.truncated ? `showing first ${state.matches.length}` : void 0,
         right: state.options.scope
@@ -9915,17 +9586,17 @@ var commentsManifest = {
 // src/edit/comments/react/CommentsPanelView.tsx
 import { useSyncExternalStore as useSyncExternalStore8 } from "react";
 import {
-  Badge as Badge5,
-  EmptyState as EmptyState5,
-  ScrollArea as ScrollArea4,
-  Section as Section3,
+  Badge as Badge6,
+  EmptyState as EmptyState6,
+  ScrollArea as ScrollArea5,
+  Section as Section4,
   SegmentedControl as SegmentedControl2,
-  StatusBar as StatusBar5,
-  TextButton as TextButton3,
-  Toolbar as Toolbar4,
+  StatusBar as StatusBar6,
+  TextButton as TextButton4,
+  Toolbar as Toolbar5,
   ToolbarGroup as ToolbarGroup3
 } from "@xenosystem/components/chrome";
-import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var ANCHOR_BADGE = {
   live: null,
   stale: {
@@ -9949,7 +9620,7 @@ function ThreadCard({
   const badge = ANCHOR_BADGE[anchorState];
   const replying = controller.getState().replyingTo === thread.id;
   const orphaned = anchorState === "orphaned";
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       style: {
@@ -9963,13 +9634,13 @@ function ThreadCard({
         event.preventDefault();
         controller.requestContextMenu(thread.id, event.clientX, event.clientY);
       },
-      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(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) })
+      children: /* @__PURE__ */ jsxs13("div", { style: { padding: "6px 8px", display: "flex", flexDirection: "column", gap: 4 }, children: [
+        /* @__PURE__ */ jsxs13("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+          badge ? /* @__PURE__ */ jsx14(Badge6, { tone: badge.tone, title: badge.title, children: badge.label }) : null,
+          thread.resolved ? /* @__PURE__ */ jsx14(Badge6, { children: "resolved" }) : null,
+          /* @__PURE__ */ jsx14("span", { style: { marginLeft: "auto", fontSize: 9, opacity: 0.4 }, children: formatAge(thread.createdAt, now) })
         ] }),
-        thread.anchorLabel ? /* @__PURE__ */ jsx13(
+        thread.anchorLabel ? /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
@@ -9992,16 +9663,16 @@ function ThreadCard({
             children: thread.anchorLabel
           }
         ) : null,
-        view.messages.map((message) => /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", gap: 1 }, children: [
-          /* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "baseline", gap: 4 }, children: [
-            /* @__PURE__ */ jsx13("span", { style: { fontSize: 10, fontWeight: 600 }, children: message.authorName ?? message.authorId }),
-            /* @__PURE__ */ jsx13("span", { style: { fontSize: 9, opacity: 0.35 }, children: formatAge(message.createdAt, now) }),
-            message.editedAt ? /* @__PURE__ */ jsx13("span", { style: { fontSize: 9, opacity: 0.3 }, children: "edited" }) : null
+        view.messages.map((message) => /* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+          /* @__PURE__ */ jsxs13("div", { style: { display: "flex", alignItems: "baseline", gap: 4 }, children: [
+            /* @__PURE__ */ jsx14("span", { style: { fontSize: 10, fontWeight: 600 }, children: message.authorName ?? message.authorId }),
+            /* @__PURE__ */ jsx14("span", { style: { fontSize: 9, opacity: 0.35 }, children: formatAge(message.createdAt, now) }),
+            message.editedAt ? /* @__PURE__ */ jsx14("span", { style: { fontSize: 9, opacity: 0.3 }, children: "edited" }) : null
           ] }),
-          /* @__PURE__ */ jsx13("p", { style: { fontSize: 11, opacity: 0.75, margin: 0, whiteSpace: "pre-wrap" }, children: message.body })
+          /* @__PURE__ */ jsx14("p", { style: { fontSize: 11, opacity: 0.75, margin: 0, whiteSpace: "pre-wrap" }, children: message.body })
         ] }, message.id)),
-        allowReactions && thread.reactions?.length ? /* @__PURE__ */ jsx13("div", { style: { display: "flex", gap: 4 }, children: thread.reactions.map((reaction) => /* @__PURE__ */ jsxs12(
-          TextButton3,
+        allowReactions && thread.reactions?.length ? /* @__PURE__ */ jsx14("div", { style: { display: "flex", gap: 4 }, children: thread.reactions.map((reaction) => /* @__PURE__ */ jsxs13(
+          TextButton4,
           {
             onClick: () => controller.react(
               thread.id,
@@ -10016,8 +9687,8 @@ function ThreadCard({
           },
           reaction.emoji
         )) }) : null,
-        replying ? /* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: 4 }, children: [
-          /* @__PURE__ */ jsx13(
+        replying ? /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: 4 }, children: [
+          /* @__PURE__ */ jsx14(
             "input",
             {
               value: controller.getState().replyDraft,
@@ -10044,11 +9715,11 @@ function ThreadCard({
               }
             }
           ),
-          /* @__PURE__ */ jsx13(TextButton3, { onClick: () => controller.reply(thread.id), children: "Send" })
-        ] }) : /* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: 6 }, children: [
-          /* @__PURE__ */ jsx13(TextButton3, { onClick: () => controller.setReplyingTo(thread.id), children: "Reply" }),
-          /* @__PURE__ */ jsx13(TextButton3, { onClick: () => controller.resolve(thread.id, !thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
-          /* @__PURE__ */ jsx13(TextButton3, { onClick: () => controller.remove(thread.id), children: "Delete" })
+          /* @__PURE__ */ jsx14(TextButton4, { onClick: () => controller.reply(thread.id), children: "Send" })
+        ] }) : /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: 6 }, children: [
+          /* @__PURE__ */ jsx14(TextButton4, { onClick: () => controller.setReplyingTo(thread.id), children: "Reply" }),
+          /* @__PURE__ */ jsx14(TextButton4, { onClick: () => controller.resolve(thread.id, !thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
+          /* @__PURE__ */ jsx14(TextButton4, { onClick: () => controller.remove(thread.id), children: "Delete" })
         ] })
       ] })
     }
@@ -10064,11 +9735,11 @@ function CommentsPanelView({
   const now = controller.clock();
   const open = state.threads.filter((t) => !t.thread.resolved);
   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(
-      Toolbar4,
+  return /* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
+    /* @__PURE__ */ jsx14(
+      Toolbar5,
       {
-        left: /* @__PURE__ */ jsx13(
+        left: /* @__PURE__ */ jsx14(
           SegmentedControl2,
           {
             label: "Show",
@@ -10081,7 +9752,7 @@ function CommentsPanelView({
             ]
           }
         ),
-        right: /* @__PURE__ */ jsx13(ToolbarGroup3, { end: true, children: /* @__PURE__ */ jsx13(
+        right: /* @__PURE__ */ jsx14(ToolbarGroup3, { end: true, children: /* @__PURE__ */ jsx14(
           SegmentedControl2,
           {
             label: "Sort",
@@ -10096,33 +9767,33 @@ function CommentsPanelView({
         ) })
       }
     ),
-    state.totals.orphaned > 0 ? /* @__PURE__ */ jsxs12("div", { style: { padding: "2px 8px", fontSize: 9, opacity: 0.6 }, children: [
+    state.totals.orphaned > 0 ? /* @__PURE__ */ jsxs13("div", { style: { padding: "2px 8px", fontSize: 9, opacity: 0.6 }, children: [
       state.totals.orphaned,
       " comment",
       state.totals.orphaned === 1 ? "" : "s",
       " lost the content",
       state.totals.orphaned === 1 ? " it was" : " they were",
       " about.",
-      state.filter.includeOrphaned === false ? /* @__PURE__ */ jsx13(TextButton3, { onClick: () => controller.setFilter({ includeOrphaned: true }), children: "Show" }) : null
+      state.filter.includeOrphaned === false ? /* @__PURE__ */ jsx14(TextButton4, { onClick: () => controller.setFilter({ includeOrphaned: true }), children: "Show" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx13(ScrollArea4, { children: state.threads.length === 0 ? state.filteredEmpty ? (
+    /* @__PURE__ */ jsx14(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(
-        EmptyState5,
+      /* @__PURE__ */ jsx14(
+        EmptyState6,
         {
           title: "Nothing matches this filter",
           hint: `${state.totals.all} comment${state.totals.all === 1 ? "" : "s"} on this document.`
         }
       )
-    ) : /* @__PURE__ */ jsx13(
-      EmptyState5,
+    ) : /* @__PURE__ */ jsx14(
+      EmptyState6,
       {
         title: "No comments",
         hint: emptyHint ?? "Select something and add a comment."
       }
-    ) : /* @__PURE__ */ jsxs12(Fragment6, { children: [
-      open.map((view) => /* @__PURE__ */ jsx13(
+    ) : /* @__PURE__ */ jsxs13(Fragment6, { children: [
+      open.map((view) => /* @__PURE__ */ jsx14(
         ThreadCard,
         {
           view,
@@ -10132,7 +9803,7 @@ function CommentsPanelView({
         },
         view.thread.id
       )),
-      showResolved && resolved.length > 0 ? /* @__PURE__ */ jsx13(Section3, { title: `Resolved (${resolved.length})`, flush: true, children: resolved.map((view) => /* @__PURE__ */ jsx13(
+      showResolved && resolved.length > 0 ? /* @__PURE__ */ jsx14(Section4, { title: `Resolved (${resolved.length})`, flush: true, children: resolved.map((view) => /* @__PURE__ */ jsx14(
         ThreadCard,
         {
           view,
@@ -10143,8 +9814,8 @@ function CommentsPanelView({
         view.thread.id
       )) }) : null
     ] }) }),
-    /* @__PURE__ */ jsxs12("div", { style: { borderTop: "1px solid var(--xeno-border-subtle)", padding: 6 }, children: [
-      /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsxs13("div", { style: { borderTop: "1px solid var(--xeno-border-subtle)", padding: 6 }, children: [
+      /* @__PURE__ */ jsx14(
         "textarea",
         {
           value: state.draft,
@@ -10172,8 +9843,8 @@ function CommentsPanelView({
           }
         }
       ),
-      /* @__PURE__ */ jsx13("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 2 }, children: /* @__PURE__ */ jsx13(
-        TextButton3,
+      /* @__PURE__ */ jsx14("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 2 }, children: /* @__PURE__ */ jsx14(
+        TextButton4,
         {
           strong: true,
           disabled: state.activeAnchor === null || state.draft.trim() === "",
@@ -10182,8 +9853,8 @@ function CommentsPanelView({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx13(
-      StatusBar5,
+    /* @__PURE__ */ jsx14(
+      StatusBar6,
       {
         left: `${state.totals.open} open`,
         right: state.totals.stale > 0 ? `${state.totals.stale} edited` : void 0
@@ -11355,8 +11026,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 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";
+import { EmptyState as EmptyState7, StatusBar as StatusBar7, Toolbar as Toolbar6, ToolbarGroup as ToolbarGroup4 } from "@xenosystem/components/chrome";
+import { Fragment as Fragment7, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var HEADER_H2 = 24;
 var PORT_ROW_H2 = 18;
 function NodeGraphPanelView({ controller }) {
@@ -11435,17 +11106,17 @@ function NodeGraphPanelView({ controller }) {
   const selectedNodes = new Set(state.selection.nodeIds);
   const selectedEdges = new Set(state.selection.edgeIds);
   const total = state.graph?.nodes.length ?? 0;
-  return /* @__PURE__ */ jsxs13("div", { style: SHELL2, children: [
-    /* @__PURE__ */ jsx14(
-      Toolbar5,
+  return /* @__PURE__ */ jsxs14("div", { style: SHELL2, children: [
+    /* @__PURE__ */ jsx15(
+      Toolbar6,
       {
-        right: /* @__PURE__ */ jsxs13(ToolbarGroup4, { end: true, children: [
-          /* @__PURE__ */ jsx14("button", { type: "button", style: button2(), onClick: () => controller.fit(false), children: "Fit" }),
-          /* @__PURE__ */ jsx14("button", { type: "button", style: button2(), onClick: () => controller.fit(true), children: "Fit selection" })
+        right: /* @__PURE__ */ jsxs14(ToolbarGroup4, { end: true, children: [
+          /* @__PURE__ */ jsx15("button", { type: "button", style: button2(), onClick: () => controller.fit(false), children: "Fit" }),
+          /* @__PURE__ */ jsx15("button", { type: "button", style: button2(), onClick: () => controller.fit(true), children: "Fit selection" })
         ] })
       }
     ),
-    total === 0 ? /* @__PURE__ */ jsx14(EmptyState6, { title: "Empty graph", hint: "Wire a host graph into this panel's input." }) : /* @__PURE__ */ jsxs13(
+    total === 0 ? /* @__PURE__ */ jsx15(EmptyState7, { title: "Empty graph", hint: "Wire a host graph into this panel's input." }) : /* @__PURE__ */ jsxs14(
       "div",
       {
         ref: containerRef,
@@ -11460,15 +11131,15 @@ function NodeGraphPanelView({ controller }) {
         onPointerCancel: onPointerUp,
         onKeyDown,
         children: [
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             "svg",
             {
               "data-canvas": "nodegraph-surface",
               width: "100%",
               height: "100%",
               style: { position: "absolute", inset: 0, display: "block" },
-              children: /* @__PURE__ */ jsxs13("g", { transform: `translate(${-scale.x * scale.zoom} ${-scale.y * scale.zoom}) scale(${scale.zoom})`, children: [
-                state.edges.map(({ edge, from, to }) => /* @__PURE__ */ jsx14(
+              children: /* @__PURE__ */ jsxs14("g", { transform: `translate(${-scale.x * scale.zoom} ${-scale.y * scale.zoom}) scale(${scale.zoom})`, children: [
+                state.edges.map(({ edge, from, to }) => /* @__PURE__ */ jsx15(
                   "path",
                   {
                     d: edgePath(from, to),
@@ -11479,8 +11150,8 @@ function NodeGraphPanelView({ controller }) {
                   },
                   edge.id
                 )),
-                preview?.connection ? /* @__PURE__ */ jsx14(PendingWire, { controller, preview, zoom: scale.zoom }) : null,
-                state.nodes.map((node) => /* @__PURE__ */ jsx14(
+                preview?.connection ? /* @__PURE__ */ jsx15(PendingWire, { controller, preview, zoom: scale.zoom }) : null,
+                state.nodes.map((node) => /* @__PURE__ */ jsx15(
                   NodeRect,
                   {
                     node,
@@ -11489,7 +11160,7 @@ function NodeGraphPanelView({ controller }) {
                   },
                   node.id
                 )),
-                preview?.marquee ? /* @__PURE__ */ jsx14(
+                preview?.marquee ? /* @__PURE__ */ jsx15(
                   "rect",
                   {
                     x: preview.marquee.x,
@@ -11504,15 +11175,15 @@ function NodeGraphPanelView({ controller }) {
               ] })
             }
           ),
-          preview?.connection && !preview.connection.verdict.ok && preview.connection.target ? /* @__PURE__ */ jsx14("div", { style: REASON, children: preview.connection.verdict.reason }) : null
+          preview?.connection && !preview.connection.verdict.ok && preview.connection.target ? /* @__PURE__ */ jsx15("div", { style: REASON, children: preview.connection.verdict.reason }) : null
         ]
       }
     ),
-    /* @__PURE__ */ jsx14(
-      StatusBar6,
+    /* @__PURE__ */ jsx15(
+      StatusBar7,
       {
         left: `${total} node${total === 1 ? "" : "s"}`,
-        right: /* @__PURE__ */ jsxs13("span", { className: "tabular-nums", children: [
+        right: /* @__PURE__ */ jsxs14("span", { className: "tabular-nums", children: [
           Math.round(scale.zoom * 100),
           "%"
         ] })
@@ -11530,7 +11201,7 @@ function PendingWire({
   const from = controller.portPosition(connection.source.nodeId, connection.source.portId);
   if (!from) return null;
   const ok = connection.verdict.ok;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "path",
     {
       d: edgePath(from, connection.to),
@@ -11543,8 +11214,8 @@ function PendingWire({
 }
 function NodeRect({ node, selected, zoom }) {
   const height = node.collapsed ? HEADER_H2 : node.height;
-  return /* @__PURE__ */ jsxs13("g", { opacity: node.disabled ? 0.45 : 1, children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs14("g", { opacity: node.disabled ? 0.45 : 1, children: [
+    /* @__PURE__ */ jsx15(
       "rect",
       {
         x: node.x,
@@ -11557,7 +11228,7 @@ function NodeRect({ node, selected, zoom }) {
         strokeWidth: (selected ? 1.5 : 1) / zoom
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       "rect",
       {
         x: node.x,
@@ -11568,7 +11239,7 @@ function NodeRect({ node, selected, zoom }) {
         fill: node.color ?? "var(--xeno-border)"
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       "text",
       {
         x: node.x + 8,
@@ -11579,8 +11250,8 @@ function NodeRect({ node, selected, zoom }) {
         children: node.title
       }
     ),
-    node.collapsed ? null : /* @__PURE__ */ jsxs13(Fragment7, { children: [
-      node.inputs.map((port, i) => /* @__PURE__ */ jsx14(
+    node.collapsed ? null : /* @__PURE__ */ jsxs14(Fragment7, { children: [
+      node.inputs.map((port, i) => /* @__PURE__ */ jsx15(
         Port,
         {
           x: node.x,
@@ -11591,7 +11262,7 @@ function NodeRect({ node, selected, zoom }) {
         },
         port.id
       )),
-      node.outputs.map((port, i) => /* @__PURE__ */ jsx14(
+      node.outputs.map((port, i) => /* @__PURE__ */ jsx15(
         Port,
         {
           x: node.x + node.width,
@@ -11612,8 +11283,8 @@ function Port({
   align,
   disabled
 }) {
-  return /* @__PURE__ */ jsxs13("g", { opacity: disabled ? 0.4 : 1, children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs14("g", { opacity: disabled ? 0.4 : 1, children: [
+    /* @__PURE__ */ jsx15(
       "rect",
       {
         x: x - 3,
@@ -11625,7 +11296,7 @@ function Port({
         strokeWidth: 0.5
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       "text",
       {
         x: align === "left" ? x + 8 : x - 8,
@@ -12884,24 +12555,24 @@ 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 Badge6,
-  EmptyState as EmptyState7,
+  Badge as Badge7,
+  EmptyState as EmptyState8,
   ErrorState,
-  IconButton as IconButton5,
+  IconButton as IconButton7,
   LoadingState,
-  Row as Row3,
-  ScrollArea as ScrollArea5,
-  SearchField as SearchField4,
-  StatusBar as StatusBar7,
-  Toolbar as Toolbar6,
+  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 Fragment8, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function Svg({ children, size = 11 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "svg",
     {
       width: size,
@@ -12918,84 +12589,84 @@ function Svg({ children, size = 11 }) {
   );
 }
 function ChevronGlyph() {
-  return /* @__PURE__ */ jsx15(Svg, { size: 9, children: /* @__PURE__ */ jsx15("path", { d: "m9 18 6-6-6-6" }) });
+  return /* @__PURE__ */ jsx16(Svg, { size: 9, children: /* @__PURE__ */ jsx16("path", { d: "m9 18 6-6-6-6" }) });
 }
 function ExpandGlyph() {
-  return /* @__PURE__ */ jsxs14(Svg, { children: [
-    /* @__PURE__ */ jsx15("path", { d: "M12 22v-6" }),
-    /* @__PURE__ */ jsx15("path", { d: "M12 8V2" }),
-    /* @__PURE__ */ jsx15("path", { d: "m9 5 3-3 3 3" }),
-    /* @__PURE__ */ jsx15("path", { d: "m9 19 3 3 3-3" }),
-    /* @__PURE__ */ jsx15("path", { d: "M4 12H2" }),
-    /* @__PURE__ */ jsx15("path", { d: "M10 12H8" }),
-    /* @__PURE__ */ jsx15("path", { d: "M16 12h-2" }),
-    /* @__PURE__ */ jsx15("path", { d: "M22 12h-2" })
+  return /* @__PURE__ */ jsxs15(Svg, { children: [
+    /* @__PURE__ */ jsx16("path", { d: "M12 22v-6" }),
+    /* @__PURE__ */ jsx16("path", { d: "M12 8V2" }),
+    /* @__PURE__ */ jsx16("path", { d: "m9 5 3-3 3 3" }),
+    /* @__PURE__ */ jsx16("path", { d: "m9 19 3 3 3-3" }),
+    /* @__PURE__ */ jsx16("path", { d: "M4 12H2" }),
+    /* @__PURE__ */ jsx16("path", { d: "M10 12H8" }),
+    /* @__PURE__ */ jsx16("path", { d: "M16 12h-2" }),
+    /* @__PURE__ */ jsx16("path", { d: "M22 12h-2" })
   ] });
 }
 function CollapseGlyph() {
-  return /* @__PURE__ */ jsxs14(Svg, { children: [
-    /* @__PURE__ */ jsx15("path", { d: "M12 22v-6" }),
-    /* @__PURE__ */ jsx15("path", { d: "M12 8V2" }),
-    /* @__PURE__ */ jsx15("path", { d: "m9 13 3 3 3-3" }),
-    /* @__PURE__ */ jsx15("path", { d: "m9 11 3-3 3 3" }),
-    /* @__PURE__ */ jsx15("path", { d: "M4 12H2" }),
-    /* @__PURE__ */ jsx15("path", { d: "M22 12h-2" })
+  return /* @__PURE__ */ jsxs15(Svg, { children: [
+    /* @__PURE__ */ jsx16("path", { d: "M12 22v-6" }),
+    /* @__PURE__ */ jsx16("path", { d: "M12 8V2" }),
+    /* @__PURE__ */ jsx16("path", { d: "m9 13 3 3 3-3" }),
+    /* @__PURE__ */ jsx16("path", { d: "m9 11 3-3 3 3" }),
+    /* @__PURE__ */ jsx16("path", { d: "M4 12H2" }),
+    /* @__PURE__ */ jsx16("path", { d: "M22 12h-2" })
   ] });
 }
 function RefreshGlyph() {
-  return /* @__PURE__ */ jsxs14(Svg, { children: [
-    /* @__PURE__ */ jsx15("path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-    /* @__PURE__ */ jsx15("path", { d: "M3 3v5h5" }),
-    /* @__PURE__ */ jsx15("path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" }),
-    /* @__PURE__ */ jsx15("path", { d: "M16 16h5v5" })
+  return /* @__PURE__ */ jsxs15(Svg, { children: [
+    /* @__PURE__ */ jsx16("path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ jsx16("path", { d: "M3 3v5h5" }),
+    /* @__PURE__ */ jsx16("path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" }),
+    /* @__PURE__ */ jsx16("path", { d: "M16 16h5v5" })
   ] });
 }
 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(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: /* @__PURE__ */ jsx16("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__ */ jsxs15(Fragment8, { children: [
+    /* @__PURE__ */ jsx16("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ jsx16("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
   ] }),
-  "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" })
+  "folder-tree": /* @__PURE__ */ jsxs15(Fragment8, { children: [
+    /* @__PURE__ */ jsx16("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__ */ jsx16("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__ */ jsx16("path", { d: "M3 5a2 2 0 0 0 2 2h3" }),
+    /* @__PURE__ */ jsx16("path", { d: "M3 3v13a2 2 0 0 0 2 2h3" })
   ] }),
-  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" })
+  box: /* @__PURE__ */ jsxs15(Fragment8, { children: [
+    /* @__PURE__ */ jsx16("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__ */ jsx16("path", { d: "m3.3 7 8.7 5 8.7-5" }),
+    /* @__PURE__ */ jsx16("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(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" })
+  component: /* @__PURE__ */ jsx16("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__ */ jsxs15(Fragment8, { children: [
+    /* @__PURE__ */ jsx16("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ jsx16("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+    /* @__PURE__ */ jsx16("path", { d: "M8 13h8M8 17h5" })
   ] }),
-  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" })
+  heading: /* @__PURE__ */ jsx16(Fragment8, { children: /* @__PURE__ */ jsx16("path", { d: "M6 4v16M18 4v16M6 12h12" }) }),
+  bot: /* @__PURE__ */ jsxs15(Fragment8, { children: [
+    /* @__PURE__ */ jsx16("rect", { x: "3", y: "8", width: "18", height: "12", rx: "2" }),
+    /* @__PURE__ */ jsx16("path", { d: "M12 4v4M8 14h.01M16 14h.01" })
   ] }),
-  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: /* @__PURE__ */ jsxs15(Fragment8, { children: [
+    /* @__PURE__ */ jsx16("path", { d: "M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.8 1.7" }),
+    /* @__PURE__ */ jsx16("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(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" }),
-    /* @__PURE__ */ jsx15("path", { d: "m2 2 20 20" })
+  "link-2-off": /* @__PURE__ */ jsxs15(Fragment8, { children: [
+    /* @__PURE__ */ jsx16("path", { d: "M9 17H7A5 5 0 0 1 7 7" }),
+    /* @__PURE__ */ jsx16("path", { d: "M15 7h2a5 5 0 0 1 4 8" }),
+    /* @__PURE__ */ jsx16("path", { d: "M8 12h4" }),
+    /* @__PURE__ */ jsx16("path", { d: "m2 2 20 20" })
   ] }),
-  "circle-dot": /* @__PURE__ */ jsx15("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1" })
+  "circle-dot": /* @__PURE__ */ jsx16("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1" })
 };
 function TreeIcon({ name, size = 11 }) {
-  return /* @__PURE__ */ jsx15(Svg, { size, children: PATHS[name] ?? PATHS["circle-dot"] });
+  return /* @__PURE__ */ jsx16(Svg, { size, children: PATHS[name] ?? PATHS["circle-dot"] });
 }
 
 // src/edit/tree/react/TreePanelView.tsx
-import { Fragment as Fragment9, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 function TreePanelView({
   controller,
   rowHeight = 24,
@@ -13027,13 +12698,13 @@ function TreePanelView({
   const sourceState = source?.sourceState ?? "idle";
   const body = (() => {
     if (!source || sourceState === "idle") {
-      return /* @__PURE__ */ jsx16(EmptyState7, { title: "No source", hint: emptyHint ?? "Connect a source to browse it." });
+      return /* @__PURE__ */ jsx17(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" });
+      return /* @__PURE__ */ jsx17(LoadingState, { label: source.sourceMessage ?? "Loading\u2026" });
     }
     if (sourceState === "error" || sourceState === "denied") {
-      return /* @__PURE__ */ jsx16(
+      return /* @__PURE__ */ jsx17(
         ErrorState,
         {
           title: sourceState === "denied" ? "Access not granted" : "Could not read this source",
@@ -13044,8 +12715,8 @@ function TreePanelView({
       );
     }
     if (state.rows.length === 0) {
-      return state.filter ? /* @__PURE__ */ jsx16(EmptyState7, { title: "No matches", hint: `Nothing matches \u201C${state.filter}\u201D.` }) : /* @__PURE__ */ jsx16(
-        EmptyState7,
+      return state.filter ? /* @__PURE__ */ jsx17(EmptyState8, { title: "No matches", hint: `Nothing matches \u201C${state.filter}\u201D.` }) : /* @__PURE__ */ jsx17(
+        EmptyState8,
         {
           title: "Nothing here",
           hint: emptyHint ?? source.sourceMessage ?? "This source has no items yet."
@@ -13060,7 +12731,7 @@ function TreePanelView({
       overscan
     });
     const slice = state.rows.slice(window2.startIndex, window2.endIndex);
-    return /* @__PURE__ */ jsx16(ScrollArea5, { children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(ScrollArea6, { children: /* @__PURE__ */ jsx17(
       "div",
       {
         ref: scrollRef,
@@ -13074,7 +12745,7 @@ function TreePanelView({
             e.preventDefault();
           }
         },
-        children: /* @__PURE__ */ jsx16("div", { style: { height: window2.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx16("div", { style: { transform: `translateY(${window2.offsetTop}px)` }, children: slice.map((row) => /* @__PURE__ */ jsx16(
+        children: /* @__PURE__ */ jsx17("div", { style: { height: window2.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx17("div", { style: { transform: `translateY(${window2.offsetTop}px)` }, children: slice.map((row) => /* @__PURE__ */ jsx17(
           TreeRowView,
           {
             row,
@@ -13090,35 +12761,35 @@ function TreePanelView({
       }
     ) });
   })();
-  return /* @__PURE__ */ jsxs15("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
-    /* @__PURE__ */ jsx16(
-      Toolbar6,
+  return /* @__PURE__ */ jsxs16("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
+    /* @__PURE__ */ jsx17(
+      Toolbar7,
       {
-        left: showSearch ? /* @__PURE__ */ jsx16(
-          SearchField4,
+        left: showSearch ? /* @__PURE__ */ jsx17(
+          SearchField5,
           {
             value: state.filter,
             onChange: (term) => controller.setFilter(term),
             placeholder: "Filter\u2026"
           }
         ) : void 0,
-        right: /* @__PURE__ */ jsxs15(ToolbarGroup5, { end: true, children: [
-          /* @__PURE__ */ jsx16(IconButton5, { icon: /* @__PURE__ */ jsx16(ExpandGlyph, {}), label: "Expand all", onClick: () => controller.expandAll() }),
-          /* @__PURE__ */ jsx16(
-            IconButton5,
+        right: /* @__PURE__ */ jsxs16(ToolbarGroup5, { end: true, children: [
+          /* @__PURE__ */ jsx17(IconButton7, { icon: /* @__PURE__ */ jsx17(ExpandGlyph, {}), label: "Expand all", onClick: () => controller.expandAll() }),
+          /* @__PURE__ */ jsx17(
+            IconButton7,
             {
-              icon: /* @__PURE__ */ jsx16(CollapseGlyph, {}),
+              icon: /* @__PURE__ */ jsx17(CollapseGlyph, {}),
               label: "Collapse all",
               onClick: () => controller.collapseAll()
             }
           ),
-          /* @__PURE__ */ jsx16(IconButton5, { icon: /* @__PURE__ */ jsx16(RefreshGlyph, {}), label: "Refresh", onClick: () => controller.refresh() })
+          /* @__PURE__ */ jsx17(IconButton7, { icon: /* @__PURE__ */ jsx17(RefreshGlyph, {}), label: "Refresh", onClick: () => controller.refresh() })
         ] })
       }
     ),
     body,
-    /* @__PURE__ */ jsx16(
-      StatusBar7,
+    /* @__PURE__ */ jsx17(
+      StatusBar8,
       {
         left: `${state.rows.length} item${state.rows.length === 1 ? "" : "s"}`,
         right: state.selection.length > 0 ? `${state.selection.length} selected` : void 0
@@ -13139,7 +12810,7 @@ function TreeRowView({
   const selected = state.selection.includes(row.id);
   const renaming = state.renaming?.id === row.id ? state.renaming : null;
   const drop = state.drag?.targetId === row.id ? state.drag : null;
-  const twisty = row.container ? /* @__PURE__ */ jsx16(
+  const twisty = row.container ? /* @__PURE__ */ jsx17(
     "span",
     {
       role: "button",
@@ -13159,13 +12830,13 @@ function TreeRowView({
         transition: "transform 80ms ease",
         opacity: 0.7
       },
-      children: /* @__PURE__ */ jsx16(ChevronGlyph, {})
+      children: /* @__PURE__ */ jsx17(ChevronGlyph, {})
     }
   ) : (
     // A leaf still reserves the twisty column, so labels stay in ONE column across mixed rows.
-    /* @__PURE__ */ jsx16("span", { style: { width: 12, flex: "0 0 auto" } })
+    /* @__PURE__ */ jsx17("span", { style: { width: 12, flex: "0 0 auto" } })
   );
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       style: {
@@ -13176,8 +12847,8 @@ function TreeRowView({
         boxShadow: drop?.position === "into" ? "inset 0 0 0 1px var(--xeno-active)" : drop?.position === "before" ? "inset 0 1px 0 0 var(--xeno-active)" : drop?.position === "after" ? "inset 0 -1px 0 0 var(--xeno-active)" : void 0
       },
       title: drop?.reason,
-      children: /* @__PURE__ */ jsx16(
-        Row3,
+      children: /* @__PURE__ */ jsx17(
+        Row4,
         {
           role: "treeitem",
           "aria-expanded": row.container ? row.expanded : void 0,
@@ -13212,11 +12883,11 @@ function TreeRowView({
           onPointerUp: () => {
             if (state.drag) controller.endDrag();
           },
-          icon: /* @__PURE__ */ jsxs15(Fragment9, { children: [
+          icon: /* @__PURE__ */ jsxs16(Fragment9, { children: [
             twisty,
-            /* @__PURE__ */ jsx16(NodeIcon, { icon: node.icon ?? defaultIconFor(node.kind) })
+            /* @__PURE__ */ jsx17(NodeIcon, { icon: node.icon ?? defaultIconFor(node.kind) })
           ] }),
-          label: renaming ? /* @__PURE__ */ jsx16(
+          label: renaming ? /* @__PURE__ */ jsx17(
             "input",
             {
               autoFocus: true,
@@ -13241,19 +12912,19 @@ function TreeRowView({
               }
             }
           ) : node.label,
-          meta: /* @__PURE__ */ jsx16(ChildStateChip, { row, controller }),
-          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)),
+          meta: /* @__PURE__ */ jsx17(ChildStateChip, { row, controller }),
+          trailing: /* @__PURE__ */ jsxs16(Fragment9, { children: [
+            columns?.map((columnId) => /* @__PURE__ */ jsx17("span", { style: { opacity: 0.7, fontVariantNumeric: "tabular-nums" }, children: node.columns?.[columnId] ?? "" }, columnId)),
+            node.glyphs?.map((glyph) => /* @__PURE__ */ jsx17("span", { title: glyph.title, style: { display: "flex", opacity: 0.7 }, children: /* @__PURE__ */ jsx17(NodeIcon, { icon: glyph.icon }) }, glyph.id)),
             node.badges?.map((badge) => (
               // Opaque: the host formatted the text, the panel only places it.
-              /* @__PURE__ */ jsx16(Badge6, { tone: badge.tone, className: badge.title ? void 0 : void 0, children: badge.text }, badge.id)
+              /* @__PURE__ */ jsx17(Badge7, { tone: badge.tone, className: badge.title ? void 0 : void 0, children: badge.text }, badge.id)
             )),
-            node.actions?.map((action) => /* @__PURE__ */ jsx16(
-              IconButton5,
+            node.actions?.map((action) => /* @__PURE__ */ jsx17(
+              IconButton7,
               {
                 size: "sm",
-                icon: /* @__PURE__ */ jsx16(NodeIcon, { icon: action.icon }),
+                icon: /* @__PURE__ */ jsx17(NodeIcon, { icon: action.icon }),
                 label: action.label,
                 disabled: action.disabled,
                 onClick: () => controller.runAction(row.id, action.id)
@@ -13272,14 +12943,14 @@ function ChildStateChip({
 }) {
   if (!row.container) return null;
   if (row.childState === "loading") {
-    return /* @__PURE__ */ jsx16("span", { style: { opacity: 0.5, fontSize: 9 }, children: "loading\u2026" });
+    return /* @__PURE__ */ jsx17("span", { style: { opacity: 0.5, fontSize: 9 }, children: "loading\u2026" });
   }
   if (row.childState === "error") {
     const error = row.node.error;
-    return /* @__PURE__ */ jsx16(Badge6, { tone: "error", children: error?.code === "denied" ? "no access" : error?.code ?? "failed" });
+    return /* @__PURE__ */ jsx17(Badge7, { tone: "error", children: error?.code === "denied" ? "no access" : error?.code ?? "failed" });
   }
   if (row.node.hasMore && row.expanded) {
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       "span",
       {
         role: "button",
@@ -13293,18 +12964,18 @@ function ChildStateChip({
     );
   }
   if (row.node.truncatedAt !== void 0) {
-    return /* @__PURE__ */ jsx16(Badge6, { tone: "warning", children: `first ${row.node.truncatedAt}` });
+    return /* @__PURE__ */ jsx17(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" });
+    return /* @__PURE__ */ jsx17("span", { style: { opacity: 0.4, fontSize: 9 }, children: "empty" });
   }
   return null;
 }
 function NodeIcon({ icon }) {
   if (icon.kind === "text") {
-    return /* @__PURE__ */ jsx16("span", { style: { fontSize: 11, lineHeight: 1, display: "flex", alignItems: "center" }, children: icon.value });
+    return /* @__PURE__ */ jsx17("span", { style: { fontSize: 11, lineHeight: 1, display: "flex", alignItems: "center" }, children: icon.value });
   }
-  return /* @__PURE__ */ jsx16(TreeIcon, { name: icon.name });
+  return /* @__PURE__ */ jsx17(TreeIcon, { name: icon.name });
 }
 
 // src/edit/tree/panel.ts