@xenosystem/blocks 0.11.0 → 0.11.2

package/dist/edit/index.js

@@ -3356,6 +3356,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 +3395,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 +3478,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 +3525,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 +3543,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 +3564,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 +3576,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 +3584,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 +3627,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
     }
   );
 }
@@ -9790,14 +9666,14 @@ import { useSyncExternalStore as useSyncExternalStore7 } from "react";
 import {
   Badge as Badge2,
   EmptyState as EmptyState2,
-  IconButton,
+  IconButton as IconButton2,
   Row,
   RowList,
   ScrollArea,
   SearchField,
   Section,
   StatusBar as StatusBar3,
-  TextButton,
+  TextButton as TextButton2,
   Toolbar as Toolbar2,
   ToolbarGroup as ToolbarGroup2
 } from "@xenosystem/components/chrome";
@@ -9907,7 +9783,7 @@ function FindPanelView({
         ),
         right: /* @__PURE__ */ jsxs11(ToolbarGroup2, { end: true, children: [
           /* @__PURE__ */ jsx12(
-            IconButton,
+            IconButton2,
             {
               label: "Match case",
               active: state.options.caseSensitive,
@@ -9916,7 +9792,7 @@ function FindPanelView({
             }
           ),
           /* @__PURE__ */ jsx12(
-            IconButton,
+            IconButton2,
             {
               label: "Whole word",
               active: state.options.wholeWord,
@@ -9925,7 +9801,7 @@ function FindPanelView({
             }
           ),
           /* @__PURE__ */ jsx12(
-            IconButton,
+            IconButton2,
             {
               label: "Regular expression",
               active: state.options.regex,
@@ -9953,7 +9829,7 @@ function FindPanelView({
         ),
         right: /* @__PURE__ */ jsxs11(ToolbarGroup2, { end: true, children: [
           /* @__PURE__ */ jsx12(
-            IconButton,
+            IconButton2,
             {
               label: "Previous match",
               disabled: state.matches.length === 0,
@@ -9962,7 +9838,7 @@ function FindPanelView({
             }
           ),
           /* @__PURE__ */ jsx12(
-            IconButton,
+            IconButton2,
             {
               label: "Next match",
               disabled: state.matches.length === 0,
@@ -9970,7 +9846,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" })
         ] })
       }
     ),
@@ -9987,8 +9863,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,
             ")"
@@ -10667,9 +10543,9 @@ import {
   EmptyState as EmptyState3,
   ScrollArea as ScrollArea2,
   Section as Section2,
-  SegmentedControl,
+  SegmentedControl as SegmentedControl2,
   StatusBar as StatusBar4,
-  TextButton as TextButton2,
+  TextButton as TextButton3,
   Toolbar as Toolbar3,
   ToolbarGroup as ToolbarGroup3
 } from "@xenosystem/components/chrome";
@@ -10749,7 +10625,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 +10668,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 +10693,7 @@ function CommentsPanelView({
       Toolbar3,
       {
         left: /* @__PURE__ */ jsx13(
-          SegmentedControl,
+          SegmentedControl2,
           {
             label: "Show",
             value: state.filter.show ?? "open",
@@ -10830,7 +10706,7 @@ function CommentsPanelView({
           }
         ),
         right: /* @__PURE__ */ jsx13(ToolbarGroup3, { end: true, children: /* @__PURE__ */ jsx13(
-          SegmentedControl,
+          SegmentedControl2,
           {
             label: "Sort",
             value: state.sort,
@@ -10851,7 +10727,7 @@ 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 ? (
       // NOT "no comments". There are comments; this filter hides them, and telling a
@@ -10921,7 +10797,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() === "",
@@ -13635,7 +13511,7 @@ import {
   Badge as Badge4,
   EmptyState as EmptyState5,
   ErrorState,
-  IconButton as IconButton2,
+  IconButton as IconButton3,
   LoadingState,
   Row as Row2,
   ScrollArea as ScrollArea3,
@@ -13851,16 +13727,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(IconButton3, { icon: /* @__PURE__ */ jsx16(ExpandGlyph, {}), label: "Expand all", onClick: () => controller.expandAll() }),
           /* @__PURE__ */ jsx16(
-            IconButton2,
+            IconButton3,
             {
               icon: /* @__PURE__ */ jsx16(CollapseGlyph, {}),
               label: "Collapse all",
               onClick: () => controller.collapseAll()
             }
           ),
-          /* @__PURE__ */ jsx16(IconButton2, { icon: /* @__PURE__ */ jsx16(RefreshGlyph, {}), label: "Refresh", onClick: () => controller.refresh() })
+          /* @__PURE__ */ jsx16(IconButton3, { icon: /* @__PURE__ */ jsx16(RefreshGlyph, {}), label: "Refresh", onClick: () => controller.refresh() })
         ] })
       }
     ),
@@ -13998,7 +13874,7 @@ function TreeRowView({
               /* @__PURE__ */ jsx16(Badge4, { tone: badge.tone, className: badge.title ? void 0 : void 0, children: badge.text }, badge.id)
             )),
             node.actions?.map((action) => /* @__PURE__ */ jsx16(
-              IconButton2,
+              IconButton3,
               {
                 size: "sm",
                 icon: /* @__PURE__ */ jsx16(NodeIcon, { icon: action.icon }),

package/dist/time/index.js

@@ -780,6 +780,7 @@ function ticksPerStep(unit, timebase) {
 
 // src/time/transport/react/TransportPanelView.tsx
 import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
+import { Column, IconButton, NumberInput, Readout, Slider, Stack, TextButton } from "@xenosystem/components/chrome";
 
 // src/time/transport/react/icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -928,9 +929,8 @@ function TransportPanelView({ controller }) {
     [controller]
   );
   return /* @__PURE__ */ jsxs2(
-    "div",
+    Column,
     {
-      style: S.root,
       className: "xeno-transport-panel",
       onKeyDown,
       onKeyUp,
@@ -938,228 +938,66 @@ function TransportPanelView({ controller }) {
       role: "group",
       "aria-label": "Transport",
       children: [
-        /* @__PURE__ */ jsxs2("div", { style: S.row, children: [
-          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.goToStart(), title: "Go to start", "aria-label": "Go to start", children: /* @__PURE__ */ jsx2(StartIcon, {}) }),
-          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.step(-1), title: "Step back", "aria-label": "Step back", children: /* @__PURE__ */ jsx2(StepBackIcon, {}) }),
-          controller.showsControl("shuttle") && /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.shuttleStep(-1), title: "Shuttle reverse (J)", "aria-label": "Shuttle reverse", children: /* @__PURE__ */ jsx2(ShuttleLeftIcon, {}) }),
+        /* @__PURE__ */ jsxs2(Stack, { direction: "row", gap: 3, pad: "gutter", children: [
+          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StartIcon, {}), label: "Go to start", onClick: () => controller.goToStart() }),
+          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StepBackIcon, {}), label: "Step back", onClick: () => controller.step(-1) }),
+          controller.showsControl("shuttle") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(ShuttleLeftIcon, {}), label: "Shuttle reverse (J)", onClick: () => controller.shuttleStep(-1) }),
           /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              style: { ...S.iconBtn, ...S.primaryBtn },
-              onClick: () => controller.togglePlay(),
-              title: playing ? "Pause (Space)" : "Play (Space)",
-              "aria-label": playing ? "Pause" : "Play",
-              "aria-pressed": playing,
-              children: playing ? /* @__PURE__ */ jsx2(PauseIcon, {}) : /* @__PURE__ */ jsx2(PlayIcon, {})
-            }
-          ),
-          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.stop(), title: "Stop", "aria-label": "Stop", children: /* @__PURE__ */ jsx2(StopIcon, {}) }),
-          controller.showsControl("shuttle") && /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.shuttleStep(1), title: "Shuttle forward (L)", "aria-label": "Shuttle forward", children: /* @__PURE__ */ jsx2(ShuttleRightIcon, {}) }),
-          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.step(1), title: "Step forward", "aria-label": "Step forward", children: /* @__PURE__ */ jsx2(StepForwardIcon, {}) }),
-          /* @__PURE__ */ jsx2("button", { type: "button", style: S.iconBtn, onClick: () => controller.goToEnd(), title: "Go to end", "aria-label": "Go to end", children: /* @__PURE__ */ jsx2(EndIcon, {}) }),
-          controller.showsControl("record") && /* @__PURE__ */ jsx2(
-            "button",
+            IconButton,
             {
-              type: "button",
-              style: { ...S.iconBtn, color: state.recording ? "var(--xeno-danger)" : void 0, opacity: state.recording ? 1 : 0.7 },
-              onClick: () => controller.record(),
-              title: "Record",
-              "aria-label": "Record",
-              "aria-pressed": !!state.recording,
-              children: /* @__PURE__ */ jsx2(RecordIcon, {})
+              size: "sm",
+              variant: "primary",
+              icon: playing ? /* @__PURE__ */ jsx2(PauseIcon, {}) : /* @__PURE__ */ jsx2(PlayIcon, {}),
+              label: playing ? "Pause (Space)" : "Play (Space)",
+              active: playing,
+              onClick: () => controller.togglePlay()
             }
           ),
-          controller.showsControl("loop") && /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              style: { ...S.iconBtn, opacity: state.loopEnabled ? 1 : 0.4 },
-              onClick: () => controller.toggleLoop(),
-              title: "Loop",
-              "aria-label": "Loop",
-              "aria-pressed": !!state.loopEnabled,
-              children: /* @__PURE__ */ jsx2(LoopIcon, {})
-            }
-          ),
-          controller.showsControl("metronome") && /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              style: { ...S.iconBtn, opacity: state.metronome ? 1 : 0.4 },
-              onClick: () => controller.toggleMetronome(),
-              title: "Metronome",
-              "aria-label": "Metronome",
-              "aria-pressed": !!state.metronome,
-              children: /* @__PURE__ */ jsx2(MetronomeIcon, {})
-            }
-          ),
-          controller.showsControl("punch") && /* @__PURE__ */ jsx2("button", { type: "button", style: { ...S.chipBtn, opacity: state.punch ? 1 : 0.4 }, "aria-pressed": !!state.punch, title: "Punch", children: "PUNCH" }),
-          /* @__PURE__ */ jsxs2(
-            "button",
+          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StopIcon, {}), label: "Stop", onClick: () => controller.stop() }),
+          controller.showsControl("shuttle") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(ShuttleRightIcon, {}), label: "Shuttle forward (L)", onClick: () => controller.shuttleStep(1) }),
+          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(StepForwardIcon, {}), label: "Step forward", onClick: () => controller.step(1) }),
+          /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(EndIcon, {}), label: "Go to end", onClick: () => controller.goToEnd() }),
+          controller.showsControl("record") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", variant: "danger", icon: /* @__PURE__ */ jsx2(RecordIcon, {}), label: "Record", active: !!state.recording, onClick: () => controller.record() }),
+          controller.showsControl("loop") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(LoopIcon, {}), label: "Loop", active: !!state.loopEnabled, onClick: () => controller.toggleLoop() }),
+          controller.showsControl("metronome") && /* @__PURE__ */ jsx2(IconButton, { size: "sm", icon: /* @__PURE__ */ jsx2(MetronomeIcon, {}), label: "Metronome", active: !!state.metronome, onClick: () => controller.toggleMetronome() }),
+          controller.showsControl("punch") && /* @__PURE__ */ jsx2(TextButton, { strong: !!state.punch, children: "PUNCH" }),
+          /* @__PURE__ */ jsx2(
+            Readout,
             {
-              type: "button",
-              style: S.readout,
-              onClick: () => controller.cycleDisplay(),
+              value: controller.getReadout(),
+              unit: (0, format_exports.displayLabel)(controller.getDisplay()),
+              label: `Position ${controller.getReadout()}`,
               title: "Click to change time display",
-              "aria-label": `Position ${controller.getReadout()}`,
-              children: [
-                /* @__PURE__ */ jsx2("span", { style: S.readoutValue, children: controller.getReadout() }),
-                /* @__PURE__ */ jsx2("span", { style: S.readoutUnit, children: (0, format_exports.displayLabel)(controller.getDisplay()) })
-              ]
+              onClick: () => controller.cycleDisplay()
             }
           ),
-          /* @__PURE__ */ jsx2("span", { style: S.duration, children: controller.getDurationReadout() }),
-          controller.showsControl("bpm") && /* @__PURE__ */ jsxs2("label", { style: S.bpm, children: [
-            /* @__PURE__ */ jsx2("span", { style: S.bpmLabel, children: "BPM" }),
-            /* @__PURE__ */ jsx2(
-              "input",
-              {
-                type: "number",
-                value: state.bpm ?? 120,
-                onChange: (e) => controller.setTempo(Number(e.target.value)),
-                style: S.bpmInput,
-                "aria-label": "Tempo"
-              }
-            )
-          ] }),
-          controller.showsControl("inOut") && /* @__PURE__ */ jsxs2("span", { style: S.inOut, children: [
-            /* @__PURE__ */ jsx2("button", { type: "button", style: S.chipBtn, onClick: () => controller.setInPoint(), title: "Set in point", children: "IN" }),
-            /* @__PURE__ */ jsx2("button", { type: "button", style: S.chipBtn, onClick: () => controller.setOutPoint(), title: "Set out point", children: "OUT" })
+          /* @__PURE__ */ jsx2(Readout, { size: "sm", value: controller.getDurationReadout() }),
+          controller.showsControl("bpm") && /* @__PURE__ */ jsx2(NumberInput, { caption: "BPM", label: "Tempo", value: state.bpm ?? 120, onChange: (bpm) => controller.setTempo(bpm) }),
+          controller.showsControl("inOut") && /* @__PURE__ */ jsxs2(Stack, { direction: "row", gap: 2, pad: "none", children: [
+            /* @__PURE__ */ jsx2(TextButton, { onClick: () => controller.setInPoint(), children: "IN" }),
+            /* @__PURE__ */ jsx2(TextButton, { onClick: () => controller.setOutPoint(), children: "OUT" })
           ] })
         ] }),
-        controller.showsControl("scrubber") && /* @__PURE__ */ jsxs2(
-          "div",
+        controller.showsControl("scrubber") && /* @__PURE__ */ jsx2(
+          Slider,
           {
-            ref: scrubRef,
-            style: S.scrubTrack,
+            trackRef: scrubRef,
+            progress: controller.getProgress(),
+            label: "Playhead",
+            valueMin: 0,
+            valueMax: controller.getDuration(),
+            valueNow: controller.getCurrentTick(),
+            valueText: controller.getReadout(),
             onPointerDown: onScrubDown,
             onPointerMove: onScrubMove,
             onPointerUp: onScrubUp,
-            onPointerCancel: () => controller.cancelScrub(),
-            role: "slider",
-            "aria-label": "Playhead",
-            "aria-valuemin": 0,
-            "aria-valuemax": controller.getDuration(),
-            "aria-valuenow": controller.getCurrentTick(),
-            "aria-valuetext": controller.getReadout(),
-            tabIndex: 0,
-            children: [
-              /* @__PURE__ */ jsx2("span", { style: { ...S.scrubFill, width: `${controller.getProgress() * 100}%` } }),
-              /* @__PURE__ */ jsx2("span", { style: { ...S.scrubKnob, left: `${controller.getProgress() * 100}%` } })
-            ]
+            onPointerCancel: () => controller.cancelScrub()
           }
         )
       ]
     }
   );
 }
-var S = {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    gap: 3,
-    padding: "4px 6px",
-    fontSize: 11,
-    color: "var(--xeno-text)",
-    background: "var(--xeno-canvas)",
-    userSelect: "none",
-    outline: "none"
-  },
-  row: { display: "flex", alignItems: "center", gap: 3, flexWrap: "wrap" },
-  iconBtn: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 20,
-    height: 18,
-    padding: 0,
-    border: "none",
-    borderRadius: 2,
-    background: "var(--xeno-border-subtle)",
-    color: "inherit",
-    cursor: "pointer",
-    flex: "0 0 auto"
-  },
-  primaryBtn: { background: "var(--xeno-control)", width: 26 },
-  chipBtn: {
-    height: 18,
-    padding: "0 5px",
-    border: "none",
-    borderRadius: 2,
-    background: "var(--xeno-border-subtle)",
-    color: "inherit",
-    cursor: "pointer",
-    fontSize: 9,
-    letterSpacing: "0.05em",
-    flex: "0 0 auto"
-  },
-  readout: {
-    display: "flex",
-    alignItems: "baseline",
-    gap: 4,
-    height: 18,
-    padding: "0 6px",
-    marginLeft: 4,
-    border: "1px solid var(--xeno-border)",
-    borderRadius: 2,
-    background: "var(--xeno-canvas)",
-    color: "inherit",
-    cursor: "pointer",
-    flex: "0 0 auto"
-  },
-  readoutValue: { fontVariantNumeric: "tabular-nums", fontSize: 12, letterSpacing: "0.02em" },
-  readoutUnit: { fontSize: 8, color: "var(--xeno-muted)", letterSpacing: "0.06em" },
-  duration: {
-    fontVariantNumeric: "tabular-nums",
-    fontSize: 10,
-    color: "var(--xeno-muted)",
-    flex: "0 0 auto"
-  },
-  bpm: { display: "flex", alignItems: "center", gap: 3, flex: "0 0 auto" },
-  bpmLabel: { fontSize: 8, color: "var(--xeno-muted)", letterSpacing: "0.06em" },
-  bpmInput: {
-    width: 42,
-    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"
-  },
-  inOut: { display: "flex", gap: 2, flex: "0 0 auto" },
-  scrubTrack: {
-    position: "relative",
-    height: 8,
-    borderRadius: 2,
-    background: "var(--xeno-border-subtle)",
-    cursor: "pointer",
-    touchAction: "none",
-    outline: "none"
-  },
-  scrubFill: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    bottom: 0,
-    background: "var(--xeno-control)",
-    borderRadius: 2,
-    pointerEvents: "none"
-  },
-  scrubKnob: {
-    position: "absolute",
-    top: -1,
-    width: 3,
-    height: 10,
-    marginLeft: -1,
-    background: "var(--xeno-text)",
-    borderRadius: 1,
-    pointerEvents: "none"
-  }
-};
 
 // src/time/transport/panel.ts
 function createTransportPanel(options = {}) {
@@ -4177,13 +4015,13 @@ import {
   Badge,
   EmptyState as EmptyState2,
   ErrorState,
-  IconButton,
+  IconButton as IconButton2,
   Row,
   RowList,
   ScrollArea,
   SegmentedControl,
   StatusBar as StatusBar2,
-  TextButton,
+  TextButton as TextButton2,
   Toolbar as Toolbar2,
   ToolbarGroup as ToolbarGroup2
 } from "@xenosystem/components/chrome";
@@ -4222,7 +4060,7 @@ function CalendarPanelView({
     {
       left: /* @__PURE__ */ jsxs4(Fragment, { children: [
         /* @__PURE__ */ jsx5(
-          IconButton,
+          IconButton2,
           {
             icon: /* @__PURE__ */ jsx5(ChevronGlyph, { direction: "left" }),
             label: "Previous",
@@ -4230,14 +4068,14 @@ function CalendarPanelView({
           }
         ),
         /* @__PURE__ */ jsx5(
-          IconButton,
+          IconButton2,
           {
             icon: /* @__PURE__ */ jsx5(ChevronGlyph, { direction: "right" }),
             label: "Next",
             onClick: () => controller.navigate(1)
           }
         ),
-        /* @__PURE__ */ jsx5(TextButton, { onClick: () => controller.goToToday(), children: "Today" }),
+        /* @__PURE__ */ jsx5(TextButton2, { onClick: () => controller.goToToday(), children: "Today" }),
         /* @__PURE__ */ jsx5("span", { style: { fontSize: 11, opacity: 0.8 }, children: controller.anchorKey().slice(0, 7) })
       ] }),
       right: /* @__PURE__ */ jsxs4(ToolbarGroup2, { end: true, children: [

package/package.json

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