@xenosystem/blocks 0.11.1 → 0.11.3

package/dist/edit/index.js

@@ -3038,270 +3038,7 @@ var InspectorPanelController = class {
 
 // src/edit/inspector/react/InspectorPanelView.tsx
 import { useCallback as useCallback3, useSyncExternalStore as useSyncExternalStore2 } from "react";
-
-// src/edit/inspector/react/styles.ts
-var S2 = {
-  // ── Shell ──────────────────────────────────────────────────────────────────
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    minHeight: 0,
-    fontSize: 11,
-    color: "var(--xeno-text)",
-    background: "var(--xeno-canvas)"
-  },
-  header: {
-    display: "flex",
-    alignItems: "center",
-    gap: 6,
-    padding: "4px 6px",
-    background: "var(--xeno-panel-header)",
-    flex: "0 0 auto"
-  },
-  search: {
-    flex: "1 1 auto",
-    minWidth: 0,
-    height: 18,
-    background: "var(--xeno-canvas)",
-    color: "inherit",
-    border: "1px solid var(--xeno-border)",
-    borderRadius: 2,
-    fontSize: 11,
-    padding: "0 6px",
-    outline: "none"
-  },
-  targetChip: {
-    fontSize: 9,
-    color: "var(--xeno-muted)",
-    whiteSpace: "nowrap",
-    flex: "0 0 auto"
-  },
-  banner: {
-    padding: "3px 6px",
-    fontSize: 9,
-    color: "var(--xeno-muted)",
-    background: "var(--xeno-border-subtle)",
-    flex: "0 0 auto"
-  },
-  scroll: { flex: "1 1 auto", minHeight: 0, overflowY: "auto", overflowX: "hidden", outline: "none" },
-  empty: { padding: 12, fontSize: 10, opacity: 0.4, textTransform: "uppercase", letterSpacing: "0.08em" },
-  // ── Section ────────────────────────────────────────────────────────────────
-  sectionHeader: {
-    display: "flex",
-    alignItems: "center",
-    gap: 4,
-    height: 20,
-    padding: "0 6px",
-    background: "var(--xeno-border-subtle)",
-    cursor: "default",
-    userSelect: "none"
-  },
-  sectionTitle: {
-    fontSize: 9,
-    fontWeight: 600,
-    letterSpacing: "0.06em",
-    textTransform: "uppercase",
-    color: "var(--xeno-muted)",
-    flex: "1 1 auto",
-    minWidth: 0,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  },
-  sectionBadge: {
-    fontSize: 8,
-    padding: "0 3px",
-    height: 12,
-    lineHeight: "12px",
-    borderRadius: 2,
-    background: "var(--xeno-border)",
-    color: "var(--xeno-muted)",
-    flex: "0 0 auto"
-  },
-  sectionBody: { padding: "3px 0" },
-  sectionBodyOff: { opacity: 0.4, pointerEvents: "none" },
-  emptyHint: { padding: "4px 8px", fontSize: 10, color: "var(--xeno-muted)" },
-  // ── Field row ──────────────────────────────────────────────────────────────
-  fieldRow: {
-    display: "flex",
-    alignItems: "center",
-    gap: 4,
-    minHeight: 20,
-    padding: "1px 6px",
-    boxSizing: "border-box"
-  },
-  fieldRowFocused: { background: "var(--xeno-border-subtle)" },
-  fieldLabel: {
-    fontSize: 10,
-    color: "var(--xeno-muted)",
-    flex: "0 0 auto",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  },
-  fieldControl: { flex: "1 1 auto", minWidth: 0, display: "flex", alignItems: "center", gap: 3 },
-  description: { fontSize: 9, color: "var(--xeno-muted)", opacity: 0.8, padding: "0 6px 3px" },
-  // ── Inputs ─────────────────────────────────────────────────────────────────
-  input: {
-    width: "100%",
-    minWidth: 0,
-    height: 18,
-    background: "var(--xeno-canvas)",
-    color: "inherit",
-    border: "1px solid var(--xeno-border)",
-    borderRadius: 2,
-    fontSize: 11,
-    padding: "0 4px",
-    outline: "none",
-    fontVariantNumeric: "tabular-nums",
-    boxSizing: "border-box"
-  },
-  mixedInput: { fontStyle: "italic", color: "var(--xeno-muted)" },
-  readOnlyInput: { background: "transparent", border: "1px solid transparent", cursor: "default" },
-  textarea: { height: "auto", minHeight: 34, padding: "3px 4px", resize: "vertical", lineHeight: 1.4 },
-  mono: { fontFamily: "var(--xeno-font-mono)", fontSize: 10 },
-  numberCell: { display: "flex", alignItems: "center", gap: 2, flex: "1 1 0", minWidth: 0, position: "relative" },
-  axisLabel: {
-    fontSize: 9,
-    color: "var(--xeno-muted)",
-    width: 9,
-    textAlign: "center",
-    flex: "0 0 auto",
-    userSelect: "none"
-  },
-  sliderTrack: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    bottom: 0,
-    height: 1,
-    background: "var(--xeno-border)",
-    pointerEvents: "none"
-  },
-  sliderFill: { display: "block", height: "100%", background: "var(--xeno-active)" },
-  vectorRow: { display: "flex", alignItems: "center", gap: 3, flex: "1 1 auto", minWidth: 0 },
-  // ── Toggle (rectangle track + square knob) ─────────────────────────────────
-  toggleTrack: {
-    width: 22,
-    height: 12,
-    borderRadius: 2,
-    border: "none",
-    padding: 1,
-    cursor: "pointer",
-    flex: "0 0 auto",
-    display: "flex",
-    alignItems: "center"
-  },
-  toggleKnob: {
-    width: 10,
-    height: 10,
-    background: "var(--xeno-text)",
-    display: "block",
-    transition: "transform 80ms ease, border-radius 80ms ease"
-  },
-  // ── Segmented ──────────────────────────────────────────────────────────────
-  segmented: { display: "flex", gap: 1, flex: "1 1 auto", minWidth: 0 },
-  segment: {
-    flex: "1 1 0",
-    minWidth: 0,
-    height: 18,
-    background: "var(--xeno-border-subtle)",
-    color: "inherit",
-    border: "none",
-    borderRadius: 2,
-    fontSize: 10,
-    cursor: "pointer",
-    padding: "0 4px",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  },
-  segmentActive: { background: "var(--xeno-control)" },
-  // ── Color ──────────────────────────────────────────────────────────────────
-  colorCell: {
-    display: "flex",
-    alignItems: "center",
-    gap: 4,
-    flex: "1 1 auto",
-    minWidth: 0,
-    height: 18,
-    background: "var(--xeno-canvas)",
-    border: "1px solid var(--xeno-border)",
-    borderRadius: 2,
-    padding: "0 4px",
-    color: "inherit",
-    cursor: "pointer"
-  },
-  swatch: { width: 10, height: 10, borderRadius: 2, flex: "0 0 auto" },
-  colorText: { fontSize: 10, fontVariantNumeric: "tabular-nums", overflow: "hidden", textOverflow: "ellipsis" },
-  // ── List ───────────────────────────────────────────────────────────────────
-  list: { display: "flex", flexDirection: "column", gap: 2, flex: "1 1 auto", minWidth: 0 },
-  listRow: { display: "flex", alignItems: "center", gap: 2 },
-  listLabel: { flex: "1 1 auto", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: 10 },
-  infoValue: { fontSize: 10, color: "var(--xeno-text)", overflow: "hidden", textOverflow: "ellipsis" },
-  // ── Chrome ─────────────────────────────────────────────────────────────────
-  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"
-  },
-  miniBtn: {
-    width: 14,
-    height: 14,
-    padding: 0,
-    border: "none",
-    borderRadius: 2,
-    background: "var(--xeno-border-subtle)",
-    color: "inherit",
-    cursor: "pointer",
-    fontSize: 9,
-    flex: "0 0 auto"
-  },
-  textBtn: {
-    background: "transparent",
-    border: "none",
-    color: "var(--xeno-muted)",
-    cursor: "pointer",
-    fontSize: 10,
-    padding: 0,
-    textAlign: "left"
-  },
-  chip: {
-    fontSize: 8,
-    padding: "0 3px",
-    height: 12,
-    lineHeight: "12px",
-    borderRadius: 2,
-    background: "var(--xeno-border-subtle)",
-    color: "var(--xeno-muted)",
-    flex: "0 0 auto"
-  },
-  tokenChip: {
-    fontSize: 9,
-    padding: "0 4px",
-    height: 16,
-    lineHeight: "16px",
-    borderRadius: 2,
-    background: "var(--xeno-border)",
-    color: "inherit",
-    flex: "1 1 auto",
-    minWidth: 0,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  },
-  keyframeRow: { display: "flex", alignItems: "center", gap: 1, flex: "0 0 auto" }
-};
+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";
 
 // src/edit/inspector/react/icons.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -3316,9 +3053,6 @@ var base2 = (size) => ({
   strokeLinejoin: "round",
   "aria-hidden": true
 });
-function ChevronIcon2({ size = 11 }) {
-  return /* @__PURE__ */ jsx4("svg", { ...base2(size), children: /* @__PURE__ */ jsx4("path", { d: "m9 18 6-6-6-6" }) });
-}
 function StopwatchIcon({ size = 11 }) {
   return /* @__PURE__ */ jsxs3("svg", { ...base2(size), children: [
     /* @__PURE__ */ jsx4("path", { d: "M10 2h4" }),
@@ -3356,6 +3090,20 @@ function XIcon({ size = 10 }) {
 
 // src/edit/inspector/react/widgets.tsx
 import { useCallback as useCallback2, useRef as useRef3 } from "react";
+import {
+  AxisLabel,
+  IconButton,
+  Input,
+  ProportionBar,
+  SegmentedControl,
+  Select,
+  Stack,
+  Swatch,
+  Text,
+  TextArea,
+  TextButton,
+  Toggle
+} from "@xenosystem/components/chrome";
 import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function displayText(field, controller) {
   const draft = controller.getDraft(field.id);
@@ -3381,10 +3129,7 @@ function useEditingHandlers(field, controller) {
     },
     [controller, field.id]
   );
-  const onChange = useCallback2(
-    (e) => controller.setDraft(field.id, e.target.value),
-    [controller, field.id]
-  );
+  const onChange = useCallback2((value) => controller.setDraft(field.id, value), [controller, field.id]);
   const onBlur = useCallback2(() => controller.commitDraft(field.id), [controller, field.id]);
   const onKeyDown = useCallback2(
     (e) => {
@@ -3467,76 +3212,44 @@ function NumberWidget({ field, controller, component }) {
     const v = Array.isArray(raw) ? raw[component] : void 0;
     return typeof v === "number" ? formatNumeric(v, field) : "";
   })() : displayText(field, controller);
-  return /* @__PURE__ */ jsxs4("span", { style: S2.numberCell, children: [
-    component !== void 0 && field.components?.[component] && /* @__PURE__ */ jsx5(
-      "span",
-      {
-        style: { ...S2.axisLabel, cursor: editable ? "ew-resize" : "default" },
-        onPointerDown,
-        onPointerMove,
-        onPointerUp,
-        children: field.components[component]
-      }
-    ),
+  const position = numericValue === null ? null : valueToPosition(numericValue, field);
+  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",
+      Input,
       {
-        type: "text",
         inputMode: "decimal",
         value: text,
         placeholder: mixed ? controller.getMixedPlaceholder() : field.placeholder,
+        mixed,
         readOnly: !editable,
         disabled: field.disabled,
+        label: field.components?.[component ?? -1] ? `${field.label} ${field.components[component]}` : field.label,
         onFocus: handlers.onFocus,
         onChange: handlers.onChange,
         onBlur: handlers.onBlur,
         onKeyDown: handlers.onKeyDown,
         onWheel,
-        spellCheck: false,
-        style: {
-          ...S2.input,
-          ...mixed ? S2.mixedInput : null,
-          ...editable ? null : S2.readOnlyInput
-        },
         ...ariaSliderProps(field, numericValue)
       }
     ),
-    controller.getNumericMode() === "slider" && numericValue !== null && /* @__PURE__ */ jsx5("span", { style: S2.sliderTrack, "aria-hidden": true, children: /* @__PURE__ */ jsx5("span", { style: { ...S2.sliderFill, width: `${valueToPosition(numericValue, field).toFixed(4) === "NaN" ? 0 : valueToPosition(numericValue, field) * 100}%` } }) })
+    controller.getNumericMode() === "slider" && position !== null && Number.isFinite(position) ? /* @__PURE__ */ jsx5(ProportionBar, { segments: [{ value: position, opacity: 0.9 }, { value: 1 - position, opacity: 0.08 }] }) : null
   ] });
 }
 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) });
   if (!expanded && field.expandable) {
-    return /* @__PURE__ */ jsxs4("span", { style: S2.vectorRow, children: [
+    return /* @__PURE__ */ jsxs4(Stack, { direction: "row", gap: 3, pad: "none", children: [
       /* @__PURE__ */ jsx5(NumberWidget, { field, controller, component: 0 }),
-      /* @__PURE__ */ jsx5(
-        "button",
-        {
-          type: "button",
-          style: S2.miniBtn,
-          onClick: () => controller.toggleExpanded(field.id),
-          title: "Edit each axis separately",
-          "aria-label": "Expand",
-          children: "\u22EF"
-        }
-      )
+      toggle("Expand", "Edit each axis separately")
     ] });
   }
-  return /* @__PURE__ */ jsxs4("span", { style: S2.vectorRow, children: [
+  return /* @__PURE__ */ jsxs4(Stack, { direction: "row", gap: 3, pad: "none", children: [
     Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx5(NumberWidget, { field, controller, component: i }, i)),
-    field.expandable && controller.isUniformVector(field.id) && /* @__PURE__ */ jsx5(
-      "button",
-      {
-        type: "button",
-        style: S2.miniBtn,
-        onClick: () => controller.toggleExpanded(field.id),
-        title: "Link axes",
-        "aria-label": "Collapse",
-        children: "\u22EF"
-      }
-    )
+    field.expandable && controller.isUniformVector(field.id) ? toggle("Collapse", "Link axes") : null
   ] });
 }
 function TextWidget({ field, controller }) {
@@ -3546,26 +3259,17 @@ function TextWidget({ field, controller }) {
   const shared = {
     value: displayText(field, controller),
     placeholder: mixed ? controller.getMixedPlaceholder() : field.placeholder,
+    mixed,
     readOnly: !editable,
     disabled: field.disabled,
+    label: field.label,
     onFocus: handlers.onFocus,
     onChange: handlers.onChange,
     onBlur: handlers.onBlur,
-    onKeyDown: handlers.onKeyDown,
-    spellCheck: false,
-    "aria-label": field.label
+    onKeyDown: handlers.onKeyDown
   };
-  if (field.type === "textarea") {
-    return /* @__PURE__ */ jsx5(
-      "textarea",
-      {
-        ...shared,
-        rows: field.rows ?? 3,
-        style: { ...S2.input, ...S2.textarea, ...mixed ? S2.mixedInput : null }
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx5("input", { type: "text", ...shared, style: { ...S2.input, ...mixed ? S2.mixedInput : null } });
+  if (field.type === "textarea") return /* @__PURE__ */ jsx5(TextArea, { ...shared, rows: field.rows ?? 3 });
+  return /* @__PURE__ */ jsx5(Input, { ...shared });
 }
 function CodeWidget({ field, controller }) {
   const editable = isFieldEditable(field);
@@ -3573,15 +3277,17 @@ function CodeWidget({ field, controller }) {
   const handlers = useEditingHandlers(field, controller);
   const expression = field.type === "expression";
   return /* @__PURE__ */ jsx5(
-    "textarea",
+    TextArea,
     {
+      variant: "mono",
       value: displayText(field, controller),
       placeholder: mixed ? controller.getMixedPlaceholder() : field.placeholder ?? (expression ? "= expression" : ""),
+      mixed,
       readOnly: !editable,
       disabled: field.disabled,
       rows: field.rows ?? (expression ? 2 : 5),
-      spellCheck: false,
-      "aria-label": field.label,
+      wrap: expression ? "off" : void 0,
+      label: field.label,
       onFocus: handlers.onFocus,
       onChange: handlers.onChange,
       onBlur: handlers.onBlur,
@@ -3592,21 +3298,10 @@ function CodeWidget({ field, controller }) {
           const { selectionStart: start, selectionEnd: end, value } = el;
           el.value = `${value.slice(0, start)}  ${value.slice(end)}`;
           el.selectionStart = el.selectionEnd = start + 2;
-          handlers.onChange?.({ currentTarget: el, target: el });
+          handlers.onChange(el.value);
           return;
         }
-        handlers.onKeyDown?.(event);
-      },
-      style: {
-        ...S2.input,
-        ...S2.textarea,
-        fontFamily: "var(--xeno-font-mono)",
-        fontSize: 11,
-        lineHeight: "16px",
-        // An expression is a formula, not prose: never wrap it, so the structure stays readable.
-        whiteSpace: expression ? "pre" : "pre-wrap",
-        overflowX: expression ? "auto" : "hidden",
-        ...mixed ? S2.mixedInput : null
+        handlers.onKeyDown(event);
       }
     }
   );
@@ -3615,29 +3310,7 @@ function BooleanWidget({ field, controller }) {
   const editable = isFieldEditable(field);
   const mixed = isFieldMixed(field);
   const on = controller.getFieldValue(field.id) === true;
-  return /* @__PURE__ */ jsx5(
-    "button",
-    {
-      type: "button",
-      role: "switch",
-      "aria-checked": mixed ? "mixed" : on,
-      "aria-label": field.label,
-      disabled: !editable,
-      onClick: () => controller.setValue(field.id, !on),
-      style: { ...S2.toggleTrack, background: on ? "var(--xeno-active)" : "var(--xeno-border)" },
-      children: /* @__PURE__ */ jsx5(
-        "span",
-        {
-          style: {
-            ...S2.toggleKnob,
-            transform: on ? "translateX(10px)" : "translateX(0)",
-            borderRadius: on ? 3 : 1,
-            opacity: mixed ? 0.4 : 1
-          }
-        }
-      )
-    }
-  );
+  return /* @__PURE__ */ jsx5(Toggle, { size: "sm", checked: on, mixed, label: field.label, disabled: !editable, onChange: (next) => controller.setValue(field.id, next) });
 }
 function SelectWidget({ field, controller }) {
   const editable = isFieldEditable(field);
@@ -3645,70 +3318,41 @@ function SelectWidget({ field, controller }) {
   const current = controller.getFieldValue(field.id);
   const options = field.options ?? [];
   const value = mixed ? "" : String(current ?? "");
-  const hasCurrent = mixed || options.some((o) => o.value === value);
-  return /* @__PURE__ */ jsxs4(
-    "select",
-    {
-      value,
-      disabled: !editable,
-      "aria-label": field.label,
-      onChange: (e) => controller.setValue(field.id, e.target.value),
-      style: { ...S2.input, ...mixed ? S2.mixedInput : null },
-      children: [
-        mixed && /* @__PURE__ */ jsx5("option", { value: "", children: controller.getMixedPlaceholder() }),
-        !hasCurrent && /* @__PURE__ */ jsx5("option", { value, children: value || "\u2014" }),
-        options.map((o) => /* @__PURE__ */ jsx5("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))
-      ]
-    }
-  );
+  const hasCurrent = mixed || value === "" || options.some((o) => o.value === value);
+  const all = hasCurrent ? options : [{ value, label: value }, ...options];
+  return /* @__PURE__ */ jsx5(Select, { options: all, value, mixed, disabled: !editable, label: field.label, onChange: (next) => controller.setValue(field.id, next) });
 }
 function SegmentedWidget({ field, controller }) {
   const editable = isFieldEditable(field);
   const current = String(controller.getFieldValue(field.id) ?? "");
-  return /* @__PURE__ */ jsx5("span", { style: S2.segmented, role: "radiogroup", "aria-label": field.label, children: (field.options ?? []).map((o) => {
-    const active = o.value === current;
-    return /* @__PURE__ */ jsx5(
-      "button",
-      {
-        type: "button",
-        role: "radio",
-        "aria-checked": active,
-        disabled: !editable || o.disabled,
-        onClick: () => controller.setValue(field.id, o.value),
-        style: { ...S2.segment, ...active ? S2.segmentActive : null },
-        children: o.label
-      },
-      o.value
-    );
-  }) });
+  return /* @__PURE__ */ jsx5(
+    SegmentedControl,
+    {
+      size: "sm",
+      stretch: true,
+      options: field.options ?? [],
+      value: current,
+      disabled: !editable,
+      label: field.label,
+      onChange: (next) => controller.setValue(field.id, next)
+    }
+  );
 }
 function ColorWidget({ field, controller }) {
   const mixed = isFieldMixed(field);
   const raw = controller.getFieldValue(field.id);
   const hex = typeof raw === "string" ? raw : typeof raw?.hex === "string" ? raw.hex : "";
   const editable = isFieldEditable(field);
-  return /* @__PURE__ */ jsxs4(
-    "button",
+  return /* @__PURE__ */ jsx5(
+    Swatch,
     {
-      type: "button",
-      style: S2.colorCell,
+      color: hex || void 0,
+      text: mixed ? controller.getMixedPlaceholder() : hex || "\u2014",
+      mixed,
       disabled: !editable,
       onClick: () => controller.requestColorEditor(field.id),
       title: "Edit in the Color panel",
-      "aria-label": `${field.label}: ${mixed ? "mixed" : hex || "none"}`,
-      children: [
-        /* @__PURE__ */ jsx5(
-          "span",
-          {
-            style: {
-              ...S2.swatch,
-              background: mixed || !hex ? "transparent" : hex,
-              border: mixed || !hex ? "1px solid var(--xeno-control)" : "1px solid var(--xeno-control)"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx5("span", { style: { ...S2.colorText, ...mixed ? S2.mixedInput : null }, children: mixed ? controller.getMixedPlaceholder() : hex || "\u2014" })
-      ]
+      label: `${field.label}: ${mixed ? "mixed" : hex || "none"}`
     }
   );
 }
@@ -3717,77 +3361,43 @@ function ListWidget({ field, controller }) {
   const raw = controller.getFieldValue(field.id);
   const items = Array.isArray(raw) ? raw : [];
   const write = (next) => void controller.setValue(field.id, next);
-  return /* @__PURE__ */ jsxs4("span", { style: S2.list, children: [
-    items.map((item, i) => /* @__PURE__ */ jsxs4("span", { style: S2.listRow, children: [
-      /* @__PURE__ */ jsx5("span", { style: S2.listLabel, children: typeof item === "string" ? item : JSON.stringify(item) }),
-      editable && /* @__PURE__ */ jsxs4(Fragment, { children: [
-        /* @__PURE__ */ jsx5(
-          "button",
-          {
-            type: "button",
-            style: S2.miniBtn,
-            disabled: i === 0,
-            onClick: () => {
-              const next = [...items];
-              const [moved] = next.splice(i, 1);
-              next.splice(i - 1, 0, moved);
-              write(next);
-            },
-            "aria-label": "Move up",
-            children: "\u2191"
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          "button",
-          {
-            type: "button",
-            style: S2.miniBtn,
-            disabled: i === items.length - 1,
-            onClick: () => {
-              const next = [...items];
-              const [moved] = next.splice(i, 1);
-              next.splice(i + 1, 0, moved);
-              write(next);
-            },
-            "aria-label": "Move down",
-            children: "\u2193"
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          "button",
-          {
-            type: "button",
-            style: S2.miniBtn,
-            onClick: () => write(items.filter((_, j) => j !== i)),
-            "aria-label": "Remove",
-            children: /* @__PURE__ */ jsx5(XIcon, {})
-          }
-        )
-      ] })
+  const move = (i, to) => {
+    const next = [...items];
+    const [moved] = next.splice(i, 1);
+    next.splice(to, 0, moved);
+    write(next);
+  };
+  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)) })
+      ] }) : null
     ] }, i)),
-    editable && /* @__PURE__ */ jsx5("button", { type: "button", style: S2.textBtn, onClick: () => write([...items, ""]), children: "+ Add" })
+    editable ? /* @__PURE__ */ jsx5(TextButton, { onClick: () => write([...items, ""]), children: "+ Add" }) : null
   ] });
 }
 function InfoWidget({ field, controller }) {
   const value = controller.getFieldValue(field.id);
-  return /* @__PURE__ */ jsx5("span", { style: S2.infoValue, children: value === void 0 || value === null ? "\u2014" : String(value) });
+  return /* @__PURE__ */ jsx5(Text, { role: "meta", children: value === void 0 || value === null ? "\u2014" : String(value) });
 }
 function JsonWidget({ field, controller }) {
   const editable = isFieldEditable(field);
   const handlers = useEditingHandlers(field, controller);
   return /* @__PURE__ */ jsx5(
-    "textarea",
+    TextArea,
     {
+      variant: "mono",
       value: displayText(field, controller),
       readOnly: !editable,
       rows: field.rows ?? 2,
+      label: field.label,
       onFocus: handlers.onFocus,
       onChange: handlers.onChange,
       onBlur: handlers.onBlur,
-      onKeyDown: handlers.onKeyDown,
-      spellCheck: false,
-      "aria-label": field.label,
-      style: { ...S2.input, ...S2.textarea, ...S2.mono }
+      onKeyDown: handlers.onKeyDown
     }
   );
 }
@@ -3811,243 +3421,81 @@ function InspectorPanelView({ controller }) {
   );
   const multi = targets.length > 1;
   const blocked = multi && !controller.canEditTargets();
-  return /* @__PURE__ */ jsxs5("div", { style: S2.root, className: "xeno-inspector-panel", children: [
-    controller.isSearchShown() && /* @__PURE__ */ jsxs5("div", { style: S2.header, children: [
-      /* @__PURE__ */ jsx6(
-        "input",
-        {
-          type: "search",
-          value: controller.getFilter(),
-          placeholder: "Search properties",
-          onChange: (e) => controller.setFilter(e.target.value),
-          style: S2.search,
-          "aria-label": "Search properties",
-          spellCheck: false
-        }
-      ),
-      targets.length > 0 && /* @__PURE__ */ jsx6("span", { style: S2.targetChip, children: multi ? `${targets.length} selected` : targets[0]?.label ?? targets[0]?.id })
-    ] }),
-    multi && /* @__PURE__ */ jsx6("div", { style: S2.banner, children: blocked ? `${targets.length} selected \u2014 multi-editing is disabled` : `${targets.length} selected \xB7 shared values shown` }),
-    /* @__PURE__ */ jsxs5("div", { style: S2.scroll, onKeyDown, tabIndex: 0, role: "group", "aria-label": "Properties", children: [
+  return /* @__PURE__ */ jsxs5(Column, { 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
+    ] }) : 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: [
       sections.map((projected) => /* @__PURE__ */ jsx6(SectionView, { projected, controller }, projected.section.id)),
-      sections.length === 0 && /* @__PURE__ */ jsx6("div", { style: S2.empty, children: targets.length === 0 ? "Nothing selected" : "No properties" })
-    ] })
+      sections.length === 0 ? /* @__PURE__ */ jsx6(EmptyState, { title: targets.length === 0 ? "Nothing selected" : "No properties" }) : null
+    ] }) })
   ] });
 }
-function SectionView({
-  projected,
-  controller
-}) {
-  const { section, fields, collapsed, disabledByToggle, empty } = projected;
-  return /* @__PURE__ */ jsxs5("div", { children: [
-    /* @__PURE__ */ jsxs5("div", { style: S2.sectionHeader, children: [
-      section.collapsible && /* @__PURE__ */ jsx6(
-        "button",
-        {
-          type: "button",
-          style: { ...S2.iconBtn, transform: collapsed ? "none" : "rotate(90deg)" },
-          onClick: () => controller.toggleSectionCollapsed(section.id),
-          "aria-label": collapsed ? "Expand section" : "Collapse section",
-          "aria-expanded": !collapsed,
-          children: /* @__PURE__ */ jsx6(ChevronIcon2, {})
-        }
-      ),
-      section.enabled && /* @__PURE__ */ jsx6(
-        "button",
-        {
-          type: "button",
-          role: "switch",
-          "aria-checked": section.enabled.value,
-          "aria-label": `${section.title} enabled`,
-          onClick: () => controller.toggleSectionEnabled(section.id),
-          style: {
-            ...S2.toggleTrack,
-            width: 16,
-            height: 10,
-            background: section.enabled.value ? "var(--xeno-active)" : "var(--xeno-border)"
-          },
-          children: /* @__PURE__ */ jsx6(
-            "span",
-            {
-              style: {
-                ...S2.toggleKnob,
-                width: 8,
-                height: 8,
-                transform: section.enabled.value ? "translateX(6px)" : "translateX(0)"
-              }
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx6("span", { style: S2.sectionTitle, children: section.title }),
-      section.badge && /* @__PURE__ */ jsx6("span", { style: S2.sectionBadge, children: section.badge }),
-      section.actions?.map((action) => /* @__PURE__ */ jsx6(
-        "button",
-        {
-          type: "button",
-          style: S2.miniBtn,
-          disabled: action.disabled,
-          onClick: () => controller.runAction(section.id, action.id),
-          title: action.label,
-          "aria-label": action.label,
-          children: action.label.slice(0, 1)
-        },
-        action.id
-      )),
-      section.addMenu && section.addMenu.length > 0 && /* @__PURE__ */ jsx6(AddMenu, { section, controller })
-    ] }),
-    !collapsed && /* @__PURE__ */ jsxs5("div", { style: { ...S2.sectionBody, ...disabledByToggle ? S2.sectionBodyOff : null }, children: [
-      empty && section.emptyHint && /* @__PURE__ */ jsx6("div", { style: S2.emptyHint, children: section.emptyHint }),
-      fields.map((field) => /* @__PURE__ */ jsx6(FieldRow, { field, controller }, field.id))
-    ] })
-  ] });
-}
-function AddMenu({
-  section,
-  controller
-}) {
+function SectionView({ projected, controller }) {
+  const { section, fields, collapsed, empty } = projected;
   return /* @__PURE__ */ jsxs5(
-    "select",
+    Section,
     {
-      value: "",
-      onChange: (e) => {
-        if (e.target.value) controller.addItem(section.id, e.target.value);
-      },
-      style: { ...S2.miniBtn, width: "auto" },
-      "aria-label": `Add to ${section.title}`,
-      title: "Add",
+      title: section.title,
+      flush: true,
+      collapsible: section.collapsible,
+      collapsed,
+      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)),
+        section.addMenu && section.addMenu.length > 0 ? /* @__PURE__ */ jsx6(AddMenu, { section, controller }) : null
+      ] }),
       children: [
-        /* @__PURE__ */ jsx6("option", { value: "", children: "\uFF0B" }),
-        Object.entries(
-          (section.addMenu ?? []).reduce((groups, item) => {
-            const key = item.group ?? "";
-            (groups[key] ??= []).push(item);
-            return groups;
-          }, {})
-        ).map(
-          ([group, items]) => group ? /* @__PURE__ */ jsx6("optgroup", { label: group, children: (items ?? []).map((i) => /* @__PURE__ */ jsx6("option", { value: i.id, disabled: i.disabled, children: i.label }, i.id)) }, group) : (items ?? []).map((i) => /* @__PURE__ */ jsx6("option", { value: i.id, disabled: i.disabled, children: i.label }, i.id))
-        )
+        empty && section.emptyHint ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text2, { role: "caption", children: section.emptyHint }) }) : null,
+        /* @__PURE__ */ jsx6(FieldGroup, { labelWidth: controller.getLabelWidth(), children: fields.map((field) => /* @__PURE__ */ jsx6(FieldRow, { field, controller }, field.id)) })
       ]
     }
   );
 }
-function FieldRow({
-  field,
-  controller
-}) {
+function AddMenu({ section, controller }) {
+  const options = (section.addMenu ?? []).map((i) => ({ value: i.id, label: i.label, disabled: i.disabled, group: i.group }));
+  return /* @__PURE__ */ jsx6(Select2, { size: "sm", placeholder: "\uFF0B", options, value: "", label: `Add to ${section.title}`, onChange: (id) => controller.addItem(section.id, id) });
+}
+function FieldRow({ field, controller }) {
   const focused = controller.getFocused() === field.id;
   const bound = !!field.token?.tokenId;
   const anim = field.anim;
   const showKeyframes = controller.areKeyframesShown() && !!anim;
+  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: [
-    /* @__PURE__ */ jsxs5(
-      "div",
+    /* @__PURE__ */ jsx6(
+      Field,
       {
-        style: { ...S2.fieldRow, ...focused ? S2.fieldRowFocused : null },
-        onContextMenu: (e) => {
-          e.preventDefault();
-          controller.requestContextMenu(field.id, e.clientX, e.clientY);
-        },
-        children: [
-          showKeyframes && /* @__PURE__ */ jsxs5("span", { style: S2.keyframeRow, children: [
-            /* @__PURE__ */ jsx6(
-              "button",
-              {
-                type: "button",
-                style: { ...S2.iconBtn, opacity: anim.animated ? 0.9 : 0.35 },
-                onClick: () => controller.keyframe(field.id, "toggleAnim"),
-                title: anim.animated ? "Disable animation" : "Animate this property",
-                "aria-label": "Toggle animation",
-                "aria-pressed": anim.animated,
-                children: /* @__PURE__ */ jsx6(StopwatchIcon, {})
-              }
-            ),
-            anim.animated && /* @__PURE__ */ jsxs5(Fragment2, { children: [
-              /* @__PURE__ */ jsx6(
-                "button",
-                {
-                  type: "button",
-                  style: { ...S2.iconBtn, width: 11, opacity: anim.canPrev === false ? 0.3 : 0.8 },
-                  disabled: anim.canPrev === false,
-                  onClick: () => controller.keyframe(field.id, "prev"),
-                  "aria-label": "Previous keyframe",
-                  children: /* @__PURE__ */ jsx6(PrevIcon, {})
-                }
-              ),
-              /* @__PURE__ */ jsx6(
-                "button",
-                {
-                  type: "button",
-                  style: S2.iconBtn,
-                  onClick: () => controller.keyframe(field.id, anim.onKeyframe ? "remove" : "add"),
-                  title: anim.onKeyframe ? "Remove keyframe" : "Add keyframe",
-                  "aria-label": anim.onKeyframe ? "Remove keyframe" : "Add keyframe",
-                  children: /* @__PURE__ */ jsx6(DiamondIcon, { filled: !!anim.onKeyframe })
-                }
-              ),
-              /* @__PURE__ */ jsx6(
-                "button",
-                {
-                  type: "button",
-                  style: { ...S2.iconBtn, width: 11, opacity: anim.canNext === false ? 0.3 : 0.8 },
-                  disabled: anim.canNext === false,
-                  onClick: () => controller.keyframe(field.id, "next"),
-                  "aria-label": "Next keyframe",
-                  children: /* @__PURE__ */ jsx6(NextIcon, {})
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx6(
-            "span",
-            {
-              style: { ...S2.fieldLabel, width: controller.getLabelWidth() },
-              onClick: () => controller.focusField(field.id),
-              title: field.description ?? field.label,
-              children: field.label
-            }
-          ),
-          /* @__PURE__ */ jsx6("span", { style: S2.fieldControl, children: bound ? /* @__PURE__ */ jsx6("span", { style: S2.tokenChip, title: `Bound to ${field.token?.tokenName ?? field.token?.tokenId}`, children: field.token?.tokenName ?? field.token?.tokenId }) : /* @__PURE__ */ jsx6(FieldWidget, { field, controller }) }),
-          showKeyframes && anim.animated && anim.onKeyframe && /* @__PURE__ */ jsxs5(
-            "select",
-            {
-              value: anim.easing ?? "",
-              onChange: (e) => controller.keyframe(field.id, "setEasing", e.target.value),
-              style: { ...S2.miniBtn, width: "auto" },
-              "aria-label": "Easing",
-              children: [
-                !anim.easingOptions?.some((o) => o.value === (anim.easing ?? "")) && /* @__PURE__ */ jsx6("option", { value: anim.easing ?? "", children: anim.easing || "\u2014" }),
-                (anim.easingOptions ?? []).map((o) => /* @__PURE__ */ jsx6("option", { value: o.value, children: o.label }, o.value))
-              ]
-            }
-          ),
-          showKeyframes && /* @__PURE__ */ jsx6("span", { style: S2.chip, children: controller.keyframeChip(field.id) }),
-          controller.areTokensShown() && field.token?.bindable !== false && /* @__PURE__ */ jsx6(
-            "button",
-            {
-              type: "button",
-              style: { ...S2.iconBtn, opacity: bound ? 0.9 : 0.4 },
-              onClick: () => controller.bindToken(field.id, bound ? null : controller.getTokens()[0]?.id ?? null),
-              title: bound ? "Unbind token" : "Bind a design token",
-              "aria-label": bound ? "Unbind token" : "Bind token",
-              children: /* @__PURE__ */ jsx6(LinkIcon, {})
-            }
-          ),
-          field.defaultValue !== void 0 && isFieldEditable(field) && /* @__PURE__ */ jsx6(
-            "button",
-            {
-              type: "button",
-              style: { ...S2.iconBtn, opacity: 0.35 },
-              onClick: () => controller.resetField(field.id),
-              title: "Reset to default",
-              "aria-label": "Reset to default",
-              children: /* @__PURE__ */ jsx6(ResetIcon, {})
-            }
-          )
-        ]
+        label: field.label,
+        title: field.description ?? field.label,
+        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") })
+          ] }) : null
+        ] }) : null,
+        trailing: /* @__PURE__ */ jsxs5(Fragment2, { 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
+        ] }),
+        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 })
       }
     ),
-    field.description && field.type === "info" && /* @__PURE__ */ jsx6("div", { style: S2.description, children: field.description })
+    field.description && field.type === "info" ? /* @__PURE__ */ jsx6(Stack2, { pad: "inset", children: /* @__PURE__ */ jsx6(Text2, { role: "caption", children: field.description }) }) : null
   ] });
 }
 function FieldWidget({
@@ -5179,13 +4627,13 @@ function HistoryPanelView({ controller }) {
     },
     [controller]
   );
-  return /* @__PURE__ */ jsxs7("div", { style: S3.root, className: "xeno-history-panel", children: [
-    /* @__PURE__ */ jsxs7("div", { style: S3.header, children: [
+  return /* @__PURE__ */ jsxs7("div", { style: S2.root, className: "xeno-history-panel", children: [
+    /* @__PURE__ */ jsxs7("div", { style: S2.header, children: [
       /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
-          style: { ...S3.iconBtn, opacity: controller.canUndo() ? 0.8 : 0.25 },
+          style: { ...S2.iconBtn, opacity: controller.canUndo() ? 0.8 : 0.25 },
           disabled: !controller.canUndo(),
           onClick: () => controller.undo(),
           title: "Undo",
@@ -5197,7 +4645,7 @@ function HistoryPanelView({ controller }) {
         "button",
         {
           type: "button",
-          style: { ...S3.iconBtn, opacity: controller.canRedo() ? 0.8 : 0.25 },
+          style: { ...S2.iconBtn, opacity: controller.canRedo() ? 0.8 : 0.25 },
           disabled: !controller.canRedo(),
           onClick: () => controller.redo(),
           title: "Redo",
@@ -5212,12 +4660,12 @@ function HistoryPanelView({ controller }) {
           value: controller.getFilter(),
           placeholder: "Search history",
           onChange: (e) => controller.setFilter(e.target.value),
-          style: S3.search,
+          style: S2.search,
           "aria-label": "Search history",
           spellCheck: false
         }
       ),
-      /* @__PURE__ */ jsxs7("span", { style: S3.counter, children: [
+      /* @__PURE__ */ jsxs7("span", { style: S2.counter, children: [
         controller.getAppliedCount(),
         " / ",
         controller.getTotalCount()
@@ -5226,7 +4674,7 @@ function HistoryPanelView({ controller }) {
         "button",
         {
           type: "button",
-          style: S3.iconBtn,
+          style: S2.iconBtn,
           onClick: () => controller.requestClear(),
           title: "Clear history",
           "aria-label": "Clear history",
@@ -5234,19 +4682,19 @@ function HistoryPanelView({ controller }) {
         }
       )
     ] }),
-    controller.isConfirmingClear() && /* @__PURE__ */ jsxs7("div", { style: S3.confirmBar, role: "alertdialog", "aria-label": "Confirm clear history", children: [
+    controller.isConfirmingClear() && /* @__PURE__ */ jsxs7("div", { style: S2.confirmBar, role: "alertdialog", "aria-label": "Confirm clear history", children: [
       /* @__PURE__ */ jsx8("span", { children: "Clear all history?" }),
-      /* @__PURE__ */ jsxs7("span", { style: S3.confirmActions, children: [
-        /* @__PURE__ */ jsx8("button", { type: "button", style: S3.textBtn, onClick: () => controller.confirmClearNow(), children: "Clear" }),
-        /* @__PURE__ */ jsx8("button", { type: "button", style: S3.textBtnDim, onClick: () => controller.cancelClear(), children: "Cancel" })
+      /* @__PURE__ */ jsxs7("span", { style: S2.confirmActions, children: [
+        /* @__PURE__ */ jsx8("button", { type: "button", style: S2.textBtn, onClick: () => controller.confirmClearNow(), children: "Clear" }),
+        /* @__PURE__ */ jsx8("button", { type: "button", style: S2.textBtnDim, onClick: () => controller.cancelClear(), children: "Cancel" })
       ] })
     ] }),
-    controller.isPruned() && /* @__PURE__ */ jsx8("div", { style: S3.prunedNote, children: "Earlier history discarded (limit reached)" }),
+    controller.isPruned() && /* @__PURE__ */ jsx8("div", { style: S2.prunedNote, children: "Earlier history discarded (limit reached)" }),
     /* @__PURE__ */ jsxs7(
       "div",
       {
         ref: scrollRef,
-        style: S3.scroll,
+        style: S2.scroll,
         onScroll,
         onKeyDown,
         onMouseLeave: () => controller.setHovered(null),
@@ -5264,17 +4712,17 @@ function HistoryPanelView({ controller }) {
             },
             row.entryId ?? "__original__"
           )) }) }),
-          rows.length === 0 && /* @__PURE__ */ jsx8("div", { style: S3.empty, children: "No history" })
+          rows.length === 0 && /* @__PURE__ */ jsx8("div", { style: S2.empty, children: "No history" })
         ]
       }
     ),
-    memory && /* @__PURE__ */ jsxs7("div", { style: S3.footer, children: [
+    memory && /* @__PURE__ */ jsxs7("div", { style: S2.footer, children: [
       /* @__PURE__ */ jsxs7("span", { children: [
         memory.usedMB.toFixed(1),
         " MB",
         memory.limitMB ? ` / ${memory.limitMB} MB` : ""
       ] }),
-      memory.onDiskCount !== void 0 && /* @__PURE__ */ jsxs7("span", { style: S3.dim, children: [
+      memory.onDiskCount !== void 0 && /* @__PURE__ */ jsxs7("span", { style: S2.dim, children: [
         memory.onDiskCount,
         " on disk"
       ] })
@@ -5287,7 +4735,7 @@ function HistoryRowView({ row, controller, rowHeight, focused }) {
   const failed = entry?.status === "failed";
   const jumpable = controller.isJumpAllowed() && entry?.caps?.jumpable !== false;
   const style = {
-    ...S3.row,
+    ...S2.row,
     height: rowHeight,
     background: row.current ? "var(--xeno-border)" : "transparent",
     // FUTURE rows (after the cursor) are dimmed + struck through — the redoable region.
@@ -5311,22 +4759,22 @@ function HistoryRowView({ row, controller, rowHeight, focused }) {
       },
       title: row.label,
       children: [
-        controller.areIconsShown() && /* @__PURE__ */ jsx8("span", { style: S3.iconCell, children: /* @__PURE__ */ jsx8(EntryIcon, { name: row.kind === "original" ? "original" : controller.getIconName(entry?.kind) }) }),
-        /* @__PURE__ */ jsx8("span", { style: S3.ordinal, children: row.kind === "entry" ? row.ordinal : "" }),
-        /* @__PURE__ */ jsx8("span", { style: S3.label, children: row.label }),
+        controller.areIconsShown() && /* @__PURE__ */ jsx8("span", { style: S2.iconCell, children: /* @__PURE__ */ jsx8(EntryIcon, { name: row.kind === "original" ? "original" : controller.getIconName(entry?.kind) }) }),
+        /* @__PURE__ */ jsx8("span", { style: S2.ordinal, children: row.kind === "entry" ? row.ordinal : "" }),
+        /* @__PURE__ */ jsx8("span", { style: S2.label, children: row.label }),
         pending && /* @__PURE__ */ jsx8(PendingGlyph, {}),
-        failed && /* @__PURE__ */ jsx8("span", { style: S3.failed, children: "failed" }),
-        controller.isSourceShown() && entry?.source && entry.source !== "user" && /* @__PURE__ */ jsx8("span", { style: S3.badge, title: `Source: ${entry.source}`, children: entry.source === "agent" ? "AI" : "S" }),
-        entry?.coalesced && entry.coalesced > 1 && /* @__PURE__ */ jsxs7("span", { style: S3.badge, title: `${entry.coalesced} actions coalesced`, children: [
+        failed && /* @__PURE__ */ jsx8("span", { style: S2.failed, children: "failed" }),
+        controller.isSourceShown() && entry?.source && entry.source !== "user" && /* @__PURE__ */ jsx8("span", { style: S2.badge, title: `Source: ${entry.source}`, children: entry.source === "agent" ? "AI" : "S" }),
+        entry?.coalesced && entry.coalesced > 1 && /* @__PURE__ */ jsxs7("span", { style: S2.badge, title: `${entry.coalesced} actions coalesced`, children: [
           "\xD7",
           entry.coalesced
         ] }),
-        controller.areTimestampsShown() && entry?.at !== void 0 && /* @__PURE__ */ jsx8("span", { style: S3.time, children: formatTime(entry.at) }),
+        controller.areTimestampsShown() && entry?.at !== void 0 && /* @__PURE__ */ jsx8("span", { style: S2.time, children: formatTime(entry.at) }),
         pending && /* @__PURE__ */ jsx8(
           "button",
           {
             type: "button",
-            style: S3.iconBtn,
+            style: S2.iconBtn,
             onClick: (e) => {
               e.stopPropagation();
               controller.cancelPending(entry?.id);
@@ -5345,7 +4793,7 @@ function formatTime(at) {
   if (Number.isNaN(date.getTime())) return typeof at === "string" ? at : "";
   return date.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
 }
-var S3 = {
+var S2 = {
   root: {
     display: "flex",
     flexDirection: "column",
@@ -6667,14 +6115,14 @@ function ColorPanelView({ controller }) {
   );
   const componentLabels = COMPONENT_LABELS[space];
   const comps = value.components ?? [];
-  return /* @__PURE__ */ jsxs8("div", { style: S4.root, className: "xeno-color-panel", children: [
-    controller.getChannelsMode() === "fg-bg" && /* @__PURE__ */ jsxs8("div", { style: S4.channels, children: [
+  return /* @__PURE__ */ jsxs8("div", { style: S3.root, className: "xeno-color-panel", children: [
+    controller.getChannelsMode() === "fg-bg" && /* @__PURE__ */ jsxs8("div", { style: S3.channels, children: [
       /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
           "aria-pressed": controller.getActiveChannel() === "fg",
-          style: { ...S4.chip, ...controller.getActiveChannel() === "fg" ? S4.chipActive : null, background: value.hex },
+          style: { ...S3.chip, ...controller.getActiveChannel() === "fg" ? S3.chipActive : null, background: value.hex },
           onClick: () => controller.setChannel("fg"),
           title: "Foreground"
         }
@@ -6683,7 +6131,7 @@ function ColorPanelView({ controller }) {
         "button",
         {
           type: "button",
-          style: S4.swap,
+          style: S3.swap,
           onClick: () => controller.swapChannels(),
           title: "Swap FG/BG (X)",
           children: "\u21C4"
@@ -6694,20 +6142,20 @@ function ColorPanelView({ controller }) {
         {
           type: "button",
           "aria-pressed": controller.getActiveChannel() === "bg",
-          style: { ...S4.chip, ...controller.getActiveChannel() === "bg" ? S4.chipActive : null },
+          style: { ...S3.chip, ...controller.getActiveChannel() === "bg" ? S3.chipActive : null },
           onClick: () => controller.setChannel("bg"),
           title: "Background"
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs8("div", { style: S4.pickerRow, children: [
+    /* @__PURE__ */ jsxs8("div", { style: S3.pickerRow, children: [
       /* @__PURE__ */ jsx9(
         "canvas",
         {
           ref: spectrumRef,
           width: 200,
           height: 140,
-          style: { ...S4.spectrum, ...bound ? S4.disabled : null },
+          style: { ...S3.spectrum, ...bound ? S3.disabled : null },
           onPointerDown: (e) => onSpectrumPointer(e, true),
           onPointerMove: (e) => onSpectrumPointer(e, false),
           onPointerUp: endDrag
@@ -6719,7 +6167,7 @@ function ColorPanelView({ controller }) {
           ref: hueRef,
           width: 14,
           height: 140,
-          style: { ...S4.strip, ...bound ? S4.disabled : null },
+          style: { ...S3.strip, ...bound ? S3.disabled : null },
           onPointerDown: (e) => onHuePointer(e, true),
           onPointerMove: (e) => onHuePointer(e, false),
           onPointerUp: endDrag
@@ -6731,20 +6179,20 @@ function ColorPanelView({ controller }) {
           ref: alphaRef,
           width: 14,
           height: 140,
-          style: { ...S4.strip, ...bound ? S4.disabled : null },
+          style: { ...S3.strip, ...bound ? S3.disabled : null },
           onPointerDown: (e) => onAlphaPointer(e, true),
           onPointerMove: (e) => onAlphaPointer(e, false),
           onPointerUp: endDrag
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs8("div", { style: S4.controls, children: [
+    /* @__PURE__ */ jsxs8("div", { style: S3.controls, children: [
       /* @__PURE__ */ jsx9(
         "select",
         {
           value: space,
           onChange: (e) => controller.setSpace(e.target.value),
-          style: S4.select,
+          style: S3.select,
           "aria-label": "Color model",
           children: EDIT_SPACES.map((s) => /* @__PURE__ */ jsx9("option", { value: s, children: SPACE_LABEL[s] }, s))
         }
@@ -6756,12 +6204,12 @@ function ColorPanelView({ controller }) {
           value: value.hex,
           onChange: onHexInput,
           disabled: bound,
-          style: S4.hexInput,
+          style: S3.hexInput,
           "aria-label": "Hex",
           spellCheck: false
         }
-      ) : /* @__PURE__ */ jsx9("div", { style: S4.componentRow, children: (componentLabels ?? []).map((label, i) => /* @__PURE__ */ jsxs8("label", { style: S4.componentField, children: [
-        /* @__PURE__ */ jsx9("span", { style: S4.componentLabel, children: label }),
+      ) : /* @__PURE__ */ jsx9("div", { style: S3.componentRow, children: (componentLabels ?? []).map((label, i) => /* @__PURE__ */ jsxs8("label", { style: S3.componentField, children: [
+        /* @__PURE__ */ jsx9("span", { style: S3.componentLabel, children: label }),
         /* @__PURE__ */ jsx9(
           "input",
           {
@@ -6769,12 +6217,12 @@ function ColorPanelView({ controller }) {
             value: roundForSpace(space, i, comps[i] ?? 0),
             onChange: (e) => onComponentInput(i, e.target.value),
             disabled: bound,
-            style: S4.numInput
+            style: S3.numInput
           }
         )
       ] }, label)) }),
-      controller.isAlphaShown() && /* @__PURE__ */ jsxs8("label", { style: S4.alphaField, children: [
-        /* @__PURE__ */ jsx9("span", { style: S4.componentLabel, children: "A" }),
+      controller.isAlphaShown() && /* @__PURE__ */ jsxs8("label", { style: S3.alphaField, children: [
+        /* @__PURE__ */ jsx9("span", { style: S3.componentLabel, children: "A" }),
         /* @__PURE__ */ jsx9(
           "input",
           {
@@ -6784,20 +6232,20 @@ function ColorPanelView({ controller }) {
             value: Math.round(value.alpha * 100),
             onChange: (e) => controller.setAlpha(Number(e.target.value) / 100, { commit: true }),
             disabled: bound,
-            style: S4.numInput
+            style: S3.numInput
           }
         )
       ] }),
-      /* @__PURE__ */ jsx9("button", { type: "button", style: S4.iconBtn, title: "Pick from screen", onClick: () => controller.requestEyedropper(), children: "\u29BF" })
+      /* @__PURE__ */ jsx9("button", { type: "button", style: S3.iconBtn, title: "Pick from screen", onClick: () => controller.requestEyedropper(), children: "\u29BF" })
     ] }),
-    controller.hasTokens() && /* @__PURE__ */ jsxs8("div", { style: S4.tokenRow, children: [
-      /* @__PURE__ */ jsx9("span", { style: S4.componentLabel, children: "Token" }),
+    controller.hasTokens() && /* @__PURE__ */ jsxs8("div", { style: S3.tokenRow, children: [
+      /* @__PURE__ */ jsx9("span", { style: S3.componentLabel, children: "Token" }),
       /* @__PURE__ */ jsxs8(
         "select",
         {
           value: controller.getBoundTokenId() ?? "",
           onChange: (e) => e.target.value ? controller.bindToken(e.target.value) : controller.unbindToken(),
-          style: S4.select,
+          style: S3.select,
           "aria-label": "Bind token",
           children: [
             /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014 raw \u2014" }),
@@ -6805,17 +6253,17 @@ function ColorPanelView({ controller }) {
           ]
         }
       ),
-      bound && /* @__PURE__ */ jsx9("button", { type: "button", style: S4.textBtn, onClick: () => controller.unbindToken(), children: "Unbind" })
+      bound && /* @__PURE__ */ jsx9("button", { type: "button", style: S3.textBtn, onClick: () => controller.unbindToken(), children: "Unbind" })
     ] }),
-    /* @__PURE__ */ jsxs8("div", { style: S4.swatchHeader, children: [
-      /* @__PURE__ */ jsx9("span", { style: S4.sectionLabel, children: "Swatches" }),
-      /* @__PURE__ */ jsx9("button", { type: "button", style: S4.textBtn, onClick: () => void controller.addSwatch(), children: "+ Save" })
+    /* @__PURE__ */ jsxs8("div", { style: S3.swatchHeader, children: [
+      /* @__PURE__ */ jsx9("span", { style: S3.sectionLabel, children: "Swatches" }),
+      /* @__PURE__ */ jsx9("button", { type: "button", style: S3.textBtn, onClick: () => void controller.addSwatch(), children: "+ Save" })
     ] }),
-    /* @__PURE__ */ jsx9("div", { style: S4.swatchGrid, children: controller.getSwatches().map((hex) => /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx9("div", { style: S3.swatchGrid, children: controller.getSwatches().map((hex) => /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
-        style: { ...S4.swatch, background: hex },
+        style: { ...S3.swatch, background: hex },
         title: hex,
         onClick: () => controller.selectColor(hex),
         onContextMenu: (e) => {
@@ -6826,12 +6274,12 @@ function ColorPanelView({ controller }) {
       hex
     )) }),
     controller.getRecent().length > 0 && /* @__PURE__ */ jsxs8(Fragment3, { children: [
-      /* @__PURE__ */ jsx9("div", { style: S4.sectionLabel, children: "Recent" }),
-      /* @__PURE__ */ jsx9("div", { style: S4.swatchGrid, children: controller.getRecent().map((hex, i) => /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx9("div", { style: S3.sectionLabel, children: "Recent" }),
+      /* @__PURE__ */ jsx9("div", { style: S3.swatchGrid, children: controller.getRecent().map((hex, i) => /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
-          style: { ...S4.swatch, background: hex },
+          style: { ...S3.swatch, background: hex },
           title: hex,
           onClick: () => controller.selectColor(hex)
         },
@@ -6847,7 +6295,7 @@ function roundForSpace(space, index, v) {
   if (space === "oklch") return Math.round(v * 10) / 10;
   return Math.round(v);
 }
-var S4 = {
+var S3 = {
   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 },
@@ -8144,7 +7592,7 @@ 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, StatusBar, Toolbar, ToolbarGroup } from "@xenosystem/components/chrome";
+import { EmptyState as EmptyState2, StatusBar, Toolbar, ToolbarGroup } from "@xenosystem/components/chrome";
 import { formatTick } from "@xenosystem/time-core";
 import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var DASHES = ["none", "4 2", "1 2", "6 2 1 2"];
@@ -8252,7 +7700,7 @@ function CurvePanelView({ controller, showPresets = true }) {
         )) })
       }
     ) : null,
-    channels.length === 0 ? /* @__PURE__ */ jsx10(EmptyState, { title: "No curves", hint: "Wire an animated property into this panel's input." }) : /* @__PURE__ */ jsx10(
+    channels.length === 0 ? /* @__PURE__ */ jsx10(EmptyState2, { title: "No curves", hint: "Wire an animated property into this panel's input." }) : /* @__PURE__ */ jsx10(
       "div",
       {
         ref: containerRef,
@@ -9021,7 +8469,7 @@ var viewportManifest = {
 
 // src/edit/viewport/react/ViewportPanelView.tsx
 import { useEffect as useEffect6, useRef as useRef7, useSyncExternalStore as useSyncExternalStore6 } from "react";
-import { Badge, StatusBar as StatusBar2 } from "@xenosystem/components/chrome";
+import { Badge as Badge2, StatusBar as StatusBar2 } from "@xenosystem/components/chrome";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var SLOT_STYLE = {
   "top-left": { top: 8, left: 8 },
@@ -9131,7 +8579,7 @@ function ViewportPanelView({
               fontSize: 11,
               zIndex: 20
             },
-            children: /* @__PURE__ */ jsx11(Badge, { tone: "error", children: "graphics context lost \u2014 restoring" })
+            children: /* @__PURE__ */ jsx11(Badge2, { 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(
@@ -9788,16 +9236,16 @@ var findManifest = {
 // src/edit/find/react/FindPanelView.tsx
 import { useSyncExternalStore as useSyncExternalStore7 } from "react";
 import {
-  Badge as Badge2,
-  EmptyState as EmptyState2,
-  IconButton,
+  Badge as Badge3,
+  EmptyState as EmptyState3,
+  IconButton as IconButton3,
   Row,
   RowList,
-  ScrollArea,
-  SearchField,
-  Section,
+  ScrollArea as ScrollArea2,
+  SearchField as SearchField2,
+  Section as Section2,
   StatusBar as StatusBar3,
-  TextButton,
+  TextButton as TextButton2,
   Toolbar as Toolbar2,
   ToolbarGroup as ToolbarGroup2
 } from "@xenosystem/components/chrome";
@@ -9840,12 +9288,12 @@ function StatusLine({
   hasText
 }) {
   if (status === "invalidPattern") {
-    return /* @__PURE__ */ jsx12(Badge2, { tone: "error", title: message ?? void 0, children: "invalid pattern" });
+    return /* @__PURE__ */ jsx12(Badge3, { tone: "error", title: message ?? void 0, children: "invalid pattern" });
   }
   if (status === "failed") {
-    return /* @__PURE__ */ jsx12(Badge2, { tone: "error", title: message ?? void 0, children: "search failed" });
+    return /* @__PURE__ */ jsx12(Badge3, { tone: "error", title: message ?? void 0, children: "search failed" });
   }
-  if (status === "searching") return /* @__PURE__ */ jsx12(Badge2, { children: "searching\u2026" });
+  if (status === "searching") return /* @__PURE__ */ jsx12(Badge3, { children: "searching\u2026" });
   if (!hasText || status === "idle") return null;
   return /* @__PURE__ */ jsxs11("span", { style: { fontVariantNumeric: "tabular-nums", fontSize: 10, opacity: 0.55 }, children: [
     displayIndex,
@@ -9898,7 +9346,7 @@ function FindPanelView({
       Toolbar2,
       {
         left: /* @__PURE__ */ jsx12(
-          SearchField,
+          SearchField2,
           {
             value: state.text,
             onChange: (value) => controller.setText(value),
@@ -9907,7 +9355,7 @@ function FindPanelView({
         ),
         right: /* @__PURE__ */ jsxs11(ToolbarGroup2, { end: true, children: [
           /* @__PURE__ */ jsx12(
-            IconButton,
+            IconButton3,
             {
               label: "Match case",
               active: state.options.caseSensitive,
@@ -9916,7 +9364,7 @@ function FindPanelView({
             }
           ),
           /* @__PURE__ */ jsx12(
-            IconButton,
+            IconButton3,
             {
               label: "Whole word",
               active: state.options.wholeWord,
@@ -9925,7 +9373,7 @@ function FindPanelView({
             }
           ),
           /* @__PURE__ */ jsx12(
-            IconButton,
+            IconButton3,
             {
               label: "Regular expression",
               active: state.options.regex,
@@ -9953,7 +9401,7 @@ function FindPanelView({
         ),
         right: /* @__PURE__ */ jsxs11(ToolbarGroup2, { end: true, children: [
           /* @__PURE__ */ jsx12(
-            IconButton,
+            IconButton3,
             {
               label: "Previous match",
               disabled: state.matches.length === 0,
@@ -9962,7 +9410,7 @@ function FindPanelView({
             }
           ),
           /* @__PURE__ */ jsx12(
-            IconButton,
+            IconButton3,
             {
               label: "Next match",
               disabled: state.matches.length === 0,
@@ -9970,7 +9418,7 @@ function FindPanelView({
               icon: /* @__PURE__ */ jsx12(DownIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx12(TextButton, { onClick: () => controller.setReplaceVisible(!state.replaceVisible), children: state.replaceVisible ? "Hide replace" : "Replace" })
+          /* @__PURE__ */ jsx12(TextButton2, { onClick: () => controller.setReplaceVisible(!state.replaceVisible), children: state.replaceVisible ? "Hide replace" : "Replace" })
         ] })
       }
     ),
@@ -9979,7 +9427,7 @@ function FindPanelView({
       Toolbar2,
       {
         left: /* @__PURE__ */ jsx12(
-          SearchField,
+          SearchField2,
           {
             value: state.replaceText,
             onChange: (value) => controller.setReplaceText(value),
@@ -9987,8 +9435,8 @@ function FindPanelView({
           }
         ),
         right: /* @__PURE__ */ jsxs11(ToolbarGroup2, { end: true, children: [
-          /* @__PURE__ */ jsx12(TextButton, { disabled: !state.canReplace, onClick: () => controller.replaceCurrent(), children: "Replace" }),
-          /* @__PURE__ */ jsxs11(TextButton, { disabled: !state.canReplace, onClick: () => controller.replaceAll(), children: [
+          /* @__PURE__ */ jsx12(TextButton2, { disabled: !state.canReplace, onClick: () => controller.replaceCurrent(), children: "Replace" }),
+          /* @__PURE__ */ jsxs11(TextButton2, { disabled: !state.canReplace, onClick: () => controller.replaceAll(), children: [
             "All (",
             state.matches.length,
             ")"
@@ -9996,18 +9444,18 @@ function FindPanelView({
         ] })
       }
     ) : null,
-    showResults ? /* @__PURE__ */ jsx12(ScrollArea, { children: state.status === "idle" ? /* @__PURE__ */ jsx12(EmptyState2, { title: "Find", hint: "Type to search. Enter goes to the next match." }) : state.status === "invalidPattern" ? /* @__PURE__ */ jsx12(
-      EmptyState2,
+    showResults ? /* @__PURE__ */ jsx12(ScrollArea2, { children: state.status === "idle" ? /* @__PURE__ */ jsx12(EmptyState3, { title: "Find", hint: "Type to search. Enter goes to the next match." }) : state.status === "invalidPattern" ? /* @__PURE__ */ jsx12(
+      EmptyState3,
       {
         title: "Invalid pattern",
         hint: state.message ?? "The expression could not be read. Fix it to search."
       }
-    ) : state.status === "failed" ? /* @__PURE__ */ jsx12(EmptyState2, { title: "Search failed", hint: state.message ?? "The host could not complete the search." }) : state.noResults ? /* @__PURE__ */ jsx12(EmptyState2, { title: "No matches", hint: `Nothing in scope matches \u201C${state.text}\u201D.` }) : state.groups.length === 1 && state.groups[0].id === "" ? /* @__PURE__ */ jsx12(RowList, { children: state.matches.map((m) => renderMatch(m, ++flatIndex)) }) : state.groups.map((group) => /* @__PURE__ */ jsx12(
-      Section,
+    ) : state.status === "failed" ? /* @__PURE__ */ jsx12(EmptyState3, { title: "Search failed", hint: state.message ?? "The host could not complete the search." }) : state.noResults ? /* @__PURE__ */ jsx12(EmptyState3, { title: "No matches", hint: `Nothing in scope matches \u201C${state.text}\u201D.` }) : state.groups.length === 1 && state.groups[0].id === "" ? /* @__PURE__ */ jsx12(RowList, { children: state.matches.map((m) => renderMatch(m, ++flatIndex)) }) : state.groups.map((group) => /* @__PURE__ */ jsx12(
+      Section2,
       {
         title: group.label || "Results",
         flush: true,
-        badge: /* @__PURE__ */ jsx12(Badge2, { children: group.matches.length }),
+        badge: /* @__PURE__ */ jsx12(Badge3, { children: group.matches.length }),
         children: /* @__PURE__ */ jsx12(RowList, { children: group.matches.map((m) => renderMatch(m, ++flatIndex)) })
       },
       group.id
@@ -10663,13 +10111,13 @@ var commentsManifest = {
 // src/edit/comments/react/CommentsPanelView.tsx
 import { useSyncExternalStore as useSyncExternalStore8 } from "react";
 import {
-  Badge as Badge3,
-  EmptyState as EmptyState3,
-  ScrollArea as ScrollArea2,
-  Section as Section2,
-  SegmentedControl,
+  Badge as Badge4,
+  EmptyState as EmptyState4,
+  ScrollArea as ScrollArea3,
+  Section as Section3,
+  SegmentedControl as SegmentedControl2,
   StatusBar as StatusBar4,
-  TextButton as TextButton2,
+  TextButton as TextButton3,
   Toolbar as Toolbar3,
   ToolbarGroup as ToolbarGroup3
 } from "@xenosystem/components/chrome";
@@ -10713,8 +10161,8 @@ function ThreadCard({
       },
       children: /* @__PURE__ */ jsxs12("div", { style: { padding: "6px 8px", display: "flex", flexDirection: "column", gap: 4 }, children: [
         /* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-          badge ? /* @__PURE__ */ jsx13(Badge3, { tone: badge.tone, title: badge.title, children: badge.label }) : null,
-          thread.resolved ? /* @__PURE__ */ jsx13(Badge3, { children: "resolved" }) : null,
+          badge ? /* @__PURE__ */ jsx13(Badge4, { tone: badge.tone, title: badge.title, children: badge.label }) : null,
+          thread.resolved ? /* @__PURE__ */ jsx13(Badge4, { children: "resolved" }) : null,
           /* @__PURE__ */ jsx13("span", { style: { marginLeft: "auto", fontSize: 9, opacity: 0.4 }, children: formatAge(thread.createdAt, now) })
         ] }),
         thread.anchorLabel ? /* @__PURE__ */ jsx13(
@@ -10749,7 +10197,7 @@ function ThreadCard({
           /* @__PURE__ */ jsx13("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(
-          TextButton2,
+          TextButton3,
           {
             onClick: () => controller.react(
               thread.id,
@@ -10792,11 +10240,11 @@ function ThreadCard({
               }
             }
           ),
-          /* @__PURE__ */ jsx13(TextButton2, { onClick: () => controller.reply(thread.id), children: "Send" })
+          /* @__PURE__ */ jsx13(TextButton3, { onClick: () => controller.reply(thread.id), children: "Send" })
         ] }) : /* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: 6 }, children: [
-          /* @__PURE__ */ jsx13(TextButton2, { onClick: () => controller.setReplyingTo(thread.id), children: "Reply" }),
-          /* @__PURE__ */ jsx13(TextButton2, { onClick: () => controller.resolve(thread.id, !thread.resolved), children: thread.resolved ? "Reopen" : "Resolve" }),
-          /* @__PURE__ */ jsx13(TextButton2, { onClick: () => controller.remove(thread.id), children: "Delete" })
+          /* @__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" })
         ] })
       ] })
     }
@@ -10817,7 +10265,7 @@ function CommentsPanelView({
       Toolbar3,
       {
         left: /* @__PURE__ */ jsx13(
-          SegmentedControl,
+          SegmentedControl2,
           {
             label: "Show",
             value: state.filter.show ?? "open",
@@ -10830,7 +10278,7 @@ function CommentsPanelView({
           }
         ),
         right: /* @__PURE__ */ jsx13(ToolbarGroup3, { end: true, children: /* @__PURE__ */ jsx13(
-          SegmentedControl,
+          SegmentedControl2,
           {
             label: "Sort",
             value: state.sort,
@@ -10851,20 +10299,20 @@ function CommentsPanelView({
       " lost the content",
       state.totals.orphaned === 1 ? " it was" : " they were",
       " about.",
-      state.filter.includeOrphaned === false ? /* @__PURE__ */ jsx13(TextButton2, { onClick: () => controller.setFilter({ includeOrphaned: true }), children: "Show" }) : null
+      state.filter.includeOrphaned === false ? /* @__PURE__ */ jsx13(TextButton3, { onClick: () => controller.setFilter({ includeOrphaned: true }), children: "Show" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx13(ScrollArea2, { children: state.threads.length === 0 ? state.filteredEmpty ? (
+    /* @__PURE__ */ jsx13(ScrollArea3, { 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(
-        EmptyState3,
+        EmptyState4,
         {
           title: "Nothing matches this filter",
           hint: `${state.totals.all} comment${state.totals.all === 1 ? "" : "s"} on this document.`
         }
       )
     ) : /* @__PURE__ */ jsx13(
-      EmptyState3,
+      EmptyState4,
       {
         title: "No comments",
         hint: emptyHint ?? "Select something and add a comment."
@@ -10880,7 +10328,7 @@ function CommentsPanelView({
         },
         view.thread.id
       )),
-      showResolved && resolved.length > 0 ? /* @__PURE__ */ jsx13(Section2, { title: `Resolved (${resolved.length})`, flush: true, children: resolved.map((view) => /* @__PURE__ */ jsx13(
+      showResolved && resolved.length > 0 ? /* @__PURE__ */ jsx13(Section3, { title: `Resolved (${resolved.length})`, flush: true, children: resolved.map((view) => /* @__PURE__ */ jsx13(
         ThreadCard,
         {
           view,
@@ -10921,7 +10369,7 @@ function CommentsPanelView({
         }
       ),
       /* @__PURE__ */ jsx13("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 2 }, children: /* @__PURE__ */ jsx13(
-        TextButton2,
+        TextButton3,
         {
           strong: true,
           disabled: state.activeAnchor === null || state.draft.trim() === "",
@@ -12103,7 +11551,7 @@ var nodegraphManifest = {
 
 // src/edit/nodegraph/react/NodeGraphPanelView.tsx
 import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef8, useSyncExternalStore as useSyncExternalStore9 } from "react";
-import { EmptyState as EmptyState4, StatusBar as StatusBar5, Toolbar as Toolbar4, ToolbarGroup as ToolbarGroup4 } from "@xenosystem/components/chrome";
+import { EmptyState as EmptyState5, StatusBar as StatusBar5, Toolbar as Toolbar4, ToolbarGroup as ToolbarGroup4 } from "@xenosystem/components/chrome";
 import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var HEADER_H2 = 24;
 var PORT_ROW_H2 = 18;
@@ -12193,7 +11641,7 @@ function NodeGraphPanelView({ controller }) {
         ] })
       }
     ),
-    total === 0 ? /* @__PURE__ */ jsx14(EmptyState4, { title: "Empty graph", hint: "Wire a host graph into this panel's input." }) : /* @__PURE__ */ jsxs13(
+    total === 0 ? /* @__PURE__ */ jsx14(EmptyState5, { title: "Empty graph", hint: "Wire a host graph into this panel's input." }) : /* @__PURE__ */ jsxs13(
       "div",
       {
         ref: containerRef,
@@ -13632,14 +13080,14 @@ 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 Badge4,
-  EmptyState as EmptyState5,
+  Badge as Badge5,
+  EmptyState as EmptyState6,
   ErrorState,
-  IconButton as IconButton2,
+  IconButton as IconButton4,
   LoadingState,
   Row as Row2,
-  ScrollArea as ScrollArea3,
-  SearchField as SearchField2,
+  ScrollArea as ScrollArea4,
+  SearchField as SearchField3,
   StatusBar as StatusBar6,
   Toolbar as Toolbar5,
   ToolbarGroup as ToolbarGroup5
@@ -13775,7 +13223,7 @@ function TreePanelView({
   const sourceState = source?.sourceState ?? "idle";
   const body = (() => {
     if (!source || sourceState === "idle") {
-      return /* @__PURE__ */ jsx16(EmptyState5, { title: "No source", hint: emptyHint ?? "Connect a source to browse it." });
+      return /* @__PURE__ */ jsx16(EmptyState6, { 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" });
@@ -13792,8 +13240,8 @@ function TreePanelView({
       );
     }
     if (state.rows.length === 0) {
-      return state.filter ? /* @__PURE__ */ jsx16(EmptyState5, { title: "No matches", hint: `Nothing matches \u201C${state.filter}\u201D.` }) : /* @__PURE__ */ jsx16(
-        EmptyState5,
+      return state.filter ? /* @__PURE__ */ jsx16(EmptyState6, { title: "No matches", hint: `Nothing matches \u201C${state.filter}\u201D.` }) : /* @__PURE__ */ jsx16(
+        EmptyState6,
         {
           title: "Nothing here",
           hint: emptyHint ?? source.sourceMessage ?? "This source has no items yet."
@@ -13808,7 +13256,7 @@ function TreePanelView({
       overscan
     });
     const slice = state.rows.slice(window2.startIndex, window2.endIndex);
-    return /* @__PURE__ */ jsx16(ScrollArea3, { children: /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx16(ScrollArea4, { children: /* @__PURE__ */ jsx16(
       "div",
       {
         ref: scrollRef,
@@ -13843,7 +13291,7 @@ function TreePanelView({
       Toolbar5,
       {
         left: showSearch ? /* @__PURE__ */ jsx16(
-          SearchField2,
+          SearchField3,
           {
             value: state.filter,
             onChange: (term) => controller.setFilter(term),
@@ -13851,16 +13299,16 @@ function TreePanelView({
           }
         ) : void 0,
         right: /* @__PURE__ */ jsxs15(ToolbarGroup5, { end: true, children: [
-          /* @__PURE__ */ jsx16(IconButton2, { icon: /* @__PURE__ */ jsx16(ExpandGlyph, {}), label: "Expand all", onClick: () => controller.expandAll() }),
+          /* @__PURE__ */ jsx16(IconButton4, { icon: /* @__PURE__ */ jsx16(ExpandGlyph, {}), label: "Expand all", onClick: () => controller.expandAll() }),
           /* @__PURE__ */ jsx16(
-            IconButton2,
+            IconButton4,
             {
               icon: /* @__PURE__ */ jsx16(CollapseGlyph, {}),
               label: "Collapse all",
               onClick: () => controller.collapseAll()
             }
           ),
-          /* @__PURE__ */ jsx16(IconButton2, { icon: /* @__PURE__ */ jsx16(RefreshGlyph, {}), label: "Refresh", onClick: () => controller.refresh() })
+          /* @__PURE__ */ jsx16(IconButton4, { icon: /* @__PURE__ */ jsx16(RefreshGlyph, {}), label: "Refresh", onClick: () => controller.refresh() })
         ] })
       }
     ),
@@ -13995,10 +13443,10 @@ function TreeRowView({
             node.glyphs?.map((glyph) => /* @__PURE__ */ jsx16("span", { title: glyph.title, style: { display: "flex", opacity: 0.7 }, children: /* @__PURE__ */ jsx16(NodeIcon, { icon: glyph.icon }) }, glyph.id)),
             node.badges?.map((badge) => (
               // Opaque: the host formatted the text, the panel only places it.
-              /* @__PURE__ */ jsx16(Badge4, { tone: badge.tone, className: badge.title ? void 0 : void 0, children: badge.text }, badge.id)
+              /* @__PURE__ */ jsx16(Badge5, { tone: badge.tone, className: badge.title ? void 0 : void 0, children: badge.text }, badge.id)
             )),
             node.actions?.map((action) => /* @__PURE__ */ jsx16(
-              IconButton2,
+              IconButton4,
               {
                 size: "sm",
                 icon: /* @__PURE__ */ jsx16(NodeIcon, { icon: action.icon }),
@@ -14024,7 +13472,7 @@ function ChildStateChip({
   }
   if (row.childState === "error") {
     const error = row.node.error;
-    return /* @__PURE__ */ jsx16(Badge4, { tone: "error", children: error?.code === "denied" ? "no access" : error?.code ?? "failed" });
+    return /* @__PURE__ */ jsx16(Badge5, { tone: "error", children: error?.code === "denied" ? "no access" : error?.code ?? "failed" });
   }
   if (row.node.hasMore && row.expanded) {
     return /* @__PURE__ */ jsx16(
@@ -14041,7 +13489,7 @@ function ChildStateChip({
     );
   }
   if (row.node.truncatedAt !== void 0) {
-    return /* @__PURE__ */ jsx16(Badge4, { tone: "warning", children: `first ${row.node.truncatedAt}` });
+    return /* @__PURE__ */ jsx16(Badge5, { 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" });