@xenosystem/components 0.9.3 → 0.10.0

package/dist/catalog.json

@@ -399,6 +399,12 @@
               "optional": true,
               "doc": "`sm` = 20px (inside rows), `md` = 24px (toolbars, default)."
             },
+            {
+              "name": "variant",
+              "type": "'default' | 'primary' | 'danger'",
+              "optional": true,
+              "doc": "`primary` — the one emphasised action in a strip (Play); `danger` — armed / destructive (Record)."
+            },
             {
               "name": "className",
               "type": "string",
@@ -727,6 +733,198 @@
             }
           ]
         },
+        {
+          "name": "Readout",
+          "file": "controls.tsx",
+          "doc": "A value with its unit — the transport's position, a timeline's duration, a calendar's week number.",
+          "props": "ReadoutProps",
+          "propList": [
+            {
+              "name": "value",
+              "type": "ReactNode",
+              "optional": false,
+              "doc": "The figure — a timecode, a count, a duration. Rendered in tabular numerals."
+            },
+            {
+              "name": "unit",
+              "type": "ReactNode",
+              "optional": true,
+              "doc": "The small unit or format label beside it (`TC`, `frames`, `bars`)."
+            },
+            {
+              "name": "size",
+              "type": "'sm' | 'md'",
+              "optional": true,
+              "doc": "`md` (default) for the primary readout; `sm` for a secondary one (a duration beside the position)."
+            },
+            {
+              "name": "label",
+              "type": "string",
+              "optional": true,
+              "doc": "Accessible name; the figure is read as text."
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            }
+          ]
+        },
+        {
+          "name": "NumberInput",
+          "file": "controls.tsx",
+          "doc": "A compact numeric field with an inline caption — BPM, fps, a count — committed on change.",
+          "props": "NumberInputProps",
+          "propList": [
+            {
+              "name": "value",
+              "type": "number",
+              "optional": false,
+              "doc": ""
+            },
+            {
+              "name": "onChange",
+              "type": "(value: number) => void",
+              "optional": false,
+              "doc": ""
+            },
+            {
+              "name": "caption",
+              "type": "ReactNode",
+              "optional": true,
+              "doc": "Inline label, before the box (`BPM`). Also the accessible name unless `label` is set."
+            },
+            {
+              "name": "label",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "min",
+              "type": "number",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "max",
+              "type": "number",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "step",
+              "type": "number",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            }
+          ]
+        },
+        {
+          "name": "Slider",
+          "file": "controls.tsx",
+          "doc": "A horizontal slider: track, fill and knob. The playhead scrubber; a zoom; a level.",
+          "props": "SliderProps",
+          "propList": [
+            {
+              "name": "progress",
+              "type": "number",
+              "optional": false,
+              "doc": "Position, 0–1."
+            },
+            {
+              "name": "label",
+              "type": "string",
+              "optional": false,
+              "doc": "Accessible name."
+            },
+            {
+              "name": "valueMin",
+              "type": "number",
+              "optional": true,
+              "doc": "The ARIA value triple — what a screen reader announces (ticks, seconds, percent)."
+            },
+            {
+              "name": "valueMax",
+              "type": "number",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "valueNow",
+              "type": "number",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "valueText",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "onPointerDown",
+              "type": "(e: PointerEvent<HTMLDivElement>) => void",
+              "optional": true,
+              "doc": "Pointer gestures on the track. The caller owns the maths (it knows the timebase); the unit owns the surface."
+            },
+            {
+              "name": "onPointerMove",
+              "type": "(e: PointerEvent<HTMLDivElement>) => void",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "onPointerUp",
+              "type": "(e: PointerEvent<HTMLDivElement>) => void",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "onPointerCancel",
+              "type": "(e: PointerEvent<HTMLDivElement>) => void",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "onKeyDown",
+              "type": "(e: KeyboardEvent<HTMLDivElement>) => void",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "trackRef",
+              "type": "Ref<HTMLDivElement>",
+              "optional": true,
+              "doc": "The track element, for a caller that measures it."
+            }
+          ]
+        },
         {
           "name": "PanelFrame",
           "file": "frame.tsx",

package/dist/chrome/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, HTMLAttributes, ReactElement } from 'react';
+import { ReactNode, HTMLAttributes, PointerEvent, KeyboardEvent, Ref, ReactElement } from 'react';
 
 /**
  * Frame + strip primitives: `PanelFrame`, `Toolbar`, `ToolbarGroup`, `Divider`, `ScrollArea`.
@@ -515,6 +515,8 @@ interface IconButtonProps {
     disabled?: boolean;
     /** `sm` = 20px (inside rows), `md` = 24px (toolbars, default). */
     size?: 'sm' | 'md';
+    /** `primary` — the one emphasised action in a strip (Play); `danger` — armed / destructive (Record). */
+    variant?: 'default' | 'primary' | 'danger';
     /** Extra classes. */
     className?: string;
 }
@@ -526,7 +528,7 @@ interface IconButtonProps {
  * <IconButton icon={<TrashGlyph />} label="Delete layer" onClick={remove} disabled={!selection} />
  * ```
  */
-declare function IconButton({ icon, label, onClick, active, disabled, size, className, }: IconButtonProps): ReactNode;
+declare function IconButton({ icon, label, onClick, active, disabled, size, variant, className, }: IconButtonProps): ReactNode;
 /** Props for {@link TextButton}. */
 interface TextButtonProps {
     /** Label. Census copy patterns: `+ Add`, `Clear`, `Cancel`, `Unbind`. */
@@ -719,6 +721,59 @@ interface ComposerProps {
 /** The submit convention, as a pure decision so it is testable and shared: Enter sends, Shift+Enter breaks. */
 declare function composerWantsSubmit(key: string, shiftKey: boolean, submitOnEnter?: boolean): boolean;
 declare function Composer({ value, onChange, onSubmit, placeholder, label, submitOnEnter, disabled, autoFocus, className, }: ComposerProps): ReactNode;
+/** Props for {@link Readout}. */
+interface ReadoutProps {
+    /** The figure — a timecode, a count, a duration. Rendered in tabular numerals. */
+    value: ReactNode;
+    /** The small unit or format label beside it (`TC`, `frames`, `bars`). */
+    unit?: ReactNode;
+    /** `md` (default) for the primary readout; `sm` for a secondary one (a duration beside the position). */
+    size?: 'sm' | 'md';
+    /** Accessible name; the figure is read as text. */
+    label?: string;
+    className?: string;
+}
+/** A value with its unit — the transport's position, a timeline's duration, a calendar's week number. */
+declare function Readout({ value, unit, size, label, className }: ReadoutProps): ReactNode;
+/** Props for {@link NumberInput}. */
+interface NumberInputProps {
+    value: number;
+    onChange: (value: number) => void;
+    /** Inline label, before the box (`BPM`). Also the accessible name unless `label` is set. */
+    caption?: ReactNode;
+    label?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    className?: string;
+}
+/** A compact numeric field with an inline caption — BPM, fps, a count — committed on change. */
+declare function NumberInput({ value, onChange, caption, label, min, max, step, disabled, className }: NumberInputProps): ReactNode;
+/** Props for {@link Slider}. */
+interface SliderProps {
+    /** Position, 0–1. */
+    progress: number;
+    /** Accessible name. */
+    label: string;
+    /** The ARIA value triple — what a screen reader announces (ticks, seconds, percent). */
+    valueMin?: number;
+    valueMax?: number;
+    valueNow?: number;
+    valueText?: string;
+    /** Pointer gestures on the track. The caller owns the maths (it knows the timebase); the unit owns the surface. */
+    onPointerDown?: (e: PointerEvent<HTMLDivElement>) => void;
+    onPointerMove?: (e: PointerEvent<HTMLDivElement>) => void;
+    onPointerUp?: (e: PointerEvent<HTMLDivElement>) => void;
+    onPointerCancel?: (e: PointerEvent<HTMLDivElement>) => void;
+    onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;
+    disabled?: boolean;
+    className?: string;
+    /** The track element, for a caller that measures it. */
+    trackRef?: Ref<HTMLDivElement>;
+}
+/** A horizontal slider: track, fill and knob. The playhead scrubber; a zoom; a level. */
+declare function Slider({ progress, label, valueMin, valueMax, valueNow, valueText, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onKeyDown, disabled, className, trackRef }: SliderProps): ReactNode;
 
 /**
  * The three terminal states: `EmptyState`, `LoadingState`, `ErrorState`.
@@ -1199,6 +1254,9 @@ declare const COMPONENTS: {
     readonly 'chrome/TextButton': typeof TextButton;
     readonly 'chrome/SearchField': typeof SearchField;
     readonly 'chrome/Composer': typeof Composer;
+    readonly 'chrome/Readout': typeof Readout;
+    readonly 'chrome/NumberInput': typeof NumberInput;
+    readonly 'chrome/Slider': typeof Slider;
     readonly 'chrome/SegmentedControl': typeof SegmentedControl;
     readonly 'chrome/Toggle': typeof Toggle;
     readonly 'chrome/FieldGroup': typeof FieldGroup;
@@ -1249,4 +1307,4 @@ interface GalleryEntry {
 /** The entries, one per unit × state. Adding a unit to {@link COMPONENTS} without an entry here fails the family's test. */
 declare function gallery(): GalleryEntry[];
 
-export { Badge, type BadgeProps, CLS_BADGE, CLS_BAR, CLS_BAR_SEGMENT, CLS_DIVIDER, CLS_DOT, CLS_EMPTY, CLS_ERROR, CLS_FIELD, CLS_FIELD_CONTROL, CLS_FIELD_GROUP, CLS_FIELD_HINT, CLS_FIELD_LABEL, CLS_ICON_BUTTON, CLS_ICON_FRAME, CLS_LOADING, CLS_PANEL, CLS_PANEL_CONTENT, CLS_PANEL_CONTENT_NO_HEADER, CLS_PANEL_HEADER, CLS_PANEL_TITLE, CLS_ROW, CLS_ROWLIST, CLS_ROW_ICON, CLS_ROW_LABEL, CLS_ROW_META, CLS_ROW_TRAILING, CLS_SCROLL, CLS_SEARCH, CLS_SEARCH_INPUT, CLS_SECTION, CLS_SECTION_ACTIONS, CLS_SECTION_BODY, CLS_SECTION_CHEVRON, CLS_SECTION_HEADER, CLS_SECTION_TITLE, CLS_SECTION_TRIGGER, CLS_SEGMENT, CLS_SEGMENTED, CLS_STAT, CLS_STATE, CLS_STATE_HINT, CLS_STATE_ICON, CLS_STATE_PROGRESS, CLS_STATE_TITLE, CLS_STATUSBAR, CLS_STAT_LABEL, CLS_STAT_SUB, CLS_STAT_VALUE, CLS_TEXT_BUTTON, CLS_TOGGLE, CLS_TOGGLE_KNOB, CLS_TOOLBAR, CLS_TOOLBAR_GROUP, COMPONENTS, ChevronGlyph, ClearGlyph, Column, type ColumnProps, Composer, type ComposerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, FieldGroup, type FieldGroupProps, type FieldProps, type GalleryEntry, IconButton, type IconButtonProps, IconFrame, type IconFrameProps, LoadingState, type LoadingStateProps, PANEL_COLORS, PANEL_DISABLED_OPACITY, PANEL_METRICS, PANEL_PRIMITIVES_CSS, PANEL_PRIMITIVES_STYLE_ID, PANEL_TONES, type PanelColors, PanelFrame, type PanelFrameProps, type PanelMetrics, type PanelTone, type PrimitivesInjectTarget, ProportionBar, type ProportionBarProps, type ProportionSegment, Row, RowList, type RowListProps, type RowProps, type RowState, ScrollArea, type ScrollAreaProps, SearchField, type SearchFieldProps, SearchGlyph, Section, type SectionProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Sparkline, type SparklineProps, Stack, type StackProps, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, StatusBar, type StatusBarProps, StatusDot, type StatusDotProps, Text, TextButton, type TextButtonProps, type TextProps, Toggle, type ToggleProps, Toolbar, ToolbarGroup, type ToolbarGroupProps, type ToolbarProps, badgeClass, composerWantsSubmit, cx, dotClass, ensurePanelPrimitivesInjected, gallery, iconButtonClass, nextSegmentValue, rowClass, sectionClass, usePanelPrimitives };
+export { Badge, type BadgeProps, CLS_BADGE, CLS_BAR, CLS_BAR_SEGMENT, CLS_DIVIDER, CLS_DOT, CLS_EMPTY, CLS_ERROR, CLS_FIELD, CLS_FIELD_CONTROL, CLS_FIELD_GROUP, CLS_FIELD_HINT, CLS_FIELD_LABEL, CLS_ICON_BUTTON, CLS_ICON_FRAME, CLS_LOADING, CLS_PANEL, CLS_PANEL_CONTENT, CLS_PANEL_CONTENT_NO_HEADER, CLS_PANEL_HEADER, CLS_PANEL_TITLE, CLS_ROW, CLS_ROWLIST, CLS_ROW_ICON, CLS_ROW_LABEL, CLS_ROW_META, CLS_ROW_TRAILING, CLS_SCROLL, CLS_SEARCH, CLS_SEARCH_INPUT, CLS_SECTION, CLS_SECTION_ACTIONS, CLS_SECTION_BODY, CLS_SECTION_CHEVRON, CLS_SECTION_HEADER, CLS_SECTION_TITLE, CLS_SECTION_TRIGGER, CLS_SEGMENT, CLS_SEGMENTED, CLS_STAT, CLS_STATE, CLS_STATE_HINT, CLS_STATE_ICON, CLS_STATE_PROGRESS, CLS_STATE_TITLE, CLS_STATUSBAR, CLS_STAT_LABEL, CLS_STAT_SUB, CLS_STAT_VALUE, CLS_TEXT_BUTTON, CLS_TOGGLE, CLS_TOGGLE_KNOB, CLS_TOOLBAR, CLS_TOOLBAR_GROUP, COMPONENTS, ChevronGlyph, ClearGlyph, Column, type ColumnProps, Composer, type ComposerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, FieldGroup, type FieldGroupProps, type FieldProps, type GalleryEntry, IconButton, type IconButtonProps, IconFrame, type IconFrameProps, LoadingState, type LoadingStateProps, NumberInput, type NumberInputProps, PANEL_COLORS, PANEL_DISABLED_OPACITY, PANEL_METRICS, PANEL_PRIMITIVES_CSS, PANEL_PRIMITIVES_STYLE_ID, PANEL_TONES, type PanelColors, PanelFrame, type PanelFrameProps, type PanelMetrics, type PanelTone, type PrimitivesInjectTarget, ProportionBar, type ProportionBarProps, type ProportionSegment, Readout, type ReadoutProps, Row, RowList, type RowListProps, type RowProps, type RowState, ScrollArea, type ScrollAreaProps, SearchField, type SearchFieldProps, SearchGlyph, Section, type SectionProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Slider, type SliderProps, Sparkline, type SparklineProps, Stack, type StackProps, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, StatusBar, type StatusBarProps, StatusDot, type StatusDotProps, Text, TextButton, type TextButtonProps, type TextProps, Toggle, type ToggleProps, Toolbar, ToolbarGroup, type ToolbarGroupProps, type ToolbarProps, badgeClass, composerWantsSubmit, cx, dotClass, ensurePanelPrimitivesInjected, gallery, iconButtonClass, nextSegmentValue, rowClass, sectionClass, usePanelPrimitives };

package/dist/chrome/index.js

@@ -56,6 +56,9 @@ var CLS_SCROLL = "xc-scroll";
 var CLS_COLUMN = "xc-column";
 var CLS_STACK = "xc-stack";
 var CLS_TEXT = "xc-text";
+var CLS_READOUT = "xc-readout";
+var CLS_NUMBER = "xc-number";
+var CLS_SLIDER = "xc-slider";
 var PANEL_TONES = Object.freeze([
   "neutral",
   "info",
@@ -702,6 +705,111 @@ div.xc-section-trigger {
   font-variant-numeric: tabular-nums;
 }
 
+/* \u2500\u2500 IconButton variants \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.xc-iconbtn--primary {
+  background: ${PANEL_COLORS.well};
+  width: ${PANEL_METRICS.iconButton + 6}px;
+}
+.xc-iconbtn--danger {
+  color: var(--xeno-danger, ${PANEL_COLORS.error});
+}
+.xc-iconbtn--danger.xc-iconbtn--active {
+  background: color-mix(in srgb, var(--xeno-danger, ${PANEL_COLORS.error}) 18%, transparent);
+}
+
+/* \u2500\u2500 Readout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.xc-readout {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  min-width: 0;
+  color: ${FG};
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+.xc-readout--md .xc-readout-value { font-size: ${PANEL_METRICS.fontBody + 1}px; }
+.xc-readout--sm .xc-readout-value { font-size: ${PANEL_METRICS.fontMeta}px; color: ${MUTED}; }
+.xc-readout-unit {
+  font-size: ${PANEL_METRICS.fontMeta - 2}px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: ${MUTED};
+}
+
+/* \u2500\u2500 NumberInput \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.xc-number {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  flex: 0 0 auto;
+}
+.xc-number-caption {
+  font-size: ${PANEL_METRICS.fontMeta - 2}px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: ${MUTED};
+}
+.xc-number-input {
+  width: 44px;
+  height: ${PANEL_METRICS.controlHeightSm}px;
+  padding: 0 4px;
+  box-sizing: border-box;
+  border: 1px solid ${BORDER};
+  border-radius: ${PANEL_METRICS.radius}px;
+  background: ${PANEL_COLORS.well};
+  color: ${FG};
+  font: inherit;
+  font-size: ${PANEL_METRICS.fontMeta}px;
+  font-variant-numeric: tabular-nums;
+  outline: none;
+}
+.xc-number-input:focus-visible {
+  border-color: ${PANEL_COLORS.ring};
+}
+.xc-number--disabled {
+  opacity: ${PANEL_DISABLED_OPACITY};
+}
+
+/* \u2500\u2500 Slider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.xc-slider {
+  position: relative;
+  height: 10px;
+  box-sizing: border-box;
+  border-radius: ${PANEL_METRICS.radius}px;
+  background: ${PANEL_COLORS.well};
+  cursor: pointer;
+  outline: none;
+  touch-action: none;
+}
+.xc-slider:focus-visible {
+  box-shadow: inset 0 0 0 1px ${PANEL_COLORS.focus};
+}
+.xc-slider-fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: ${PANEL_METRICS.radius}px;
+  background: ${PANEL_COLORS.rowSelected};
+  pointer-events: none;
+}
+.xc-slider-knob {
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  width: 4px;
+  margin-left: -2px;
+  border-radius: 1px;
+  background: ${FG};
+  pointer-events: none;
+}
+.xc-slider--disabled {
+  opacity: ${PANEL_DISABLED_OPACITY};
+  cursor: default;
+}
+
+
 /* \u2500\u2500 Composer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 .xc-composer {
   display: block;
@@ -1281,6 +1389,7 @@ function IconButton({
   active,
   disabled,
   size = "md",
+  variant = "default",
   className
 }) {
   usePanelPrimitives();
@@ -1293,7 +1402,7 @@ function IconButton({
       "aria-pressed": active,
       disabled,
       onClick,
-      className: iconButtonClass({ active, disabled }, cx(`${"xc-iconbtn"}--${size}`, className)),
+      className: iconButtonClass({ active, disabled }, cx(`${"xc-iconbtn"}--${size}`, variant !== "default" && `xc-iconbtn--${variant}`, className)),
       children: icon
     }
   );
@@ -1517,6 +1626,64 @@ function Composer({
     }
   );
 }
+function Readout({ value, unit, size = "md", label, className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsxs2("span", { className: cx(CLS_READOUT, `${CLS_READOUT}--${size}`, className), "aria-label": label, role: label ? "status" : void 0, children: [
+    /* @__PURE__ */ jsx2("span", { className: `${CLS_READOUT}-value`, children: value }),
+    unit !== void 0 && unit !== null ? /* @__PURE__ */ jsx2("span", { className: `${CLS_READOUT}-unit`, children: unit }) : null
+  ] });
+}
+function NumberInput({ value, onChange, caption, label, min, max, step, disabled, className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsxs2("label", { className: cx(CLS_NUMBER, disabled && `${CLS_NUMBER}--disabled`, className), children: [
+    caption !== void 0 ? /* @__PURE__ */ jsx2("span", { className: `${CLS_NUMBER}-caption`, children: caption }) : null,
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "number",
+        className: `${CLS_NUMBER}-input`,
+        value,
+        min,
+        max,
+        step,
+        disabled,
+        "aria-label": label ?? (typeof caption === "string" ? caption : void 0),
+        onChange: (e) => {
+          const n = Number(e.target.value);
+          if (Number.isFinite(n)) onChange(n);
+        }
+      }
+    )
+  ] });
+}
+function Slider({ progress, label, valueMin = 0, valueMax = 1, valueNow, valueText, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onKeyDown, disabled, className, trackRef }) {
+  usePanelPrimitives();
+  const pct = `${Math.max(0, Math.min(1, progress)) * 100}%`;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: trackRef,
+      className: cx(CLS_SLIDER, disabled && `${CLS_SLIDER}--disabled`, className),
+      role: "slider",
+      "aria-label": label,
+      "aria-valuemin": valueMin,
+      "aria-valuemax": valueMax,
+      "aria-valuenow": valueNow ?? progress,
+      "aria-valuetext": valueText,
+      "aria-disabled": disabled || void 0,
+      tabIndex: disabled ? -1 : 0,
+      onPointerDown: disabled ? void 0 : onPointerDown,
+      onPointerMove: disabled ? void 0 : onPointerMove,
+      onPointerUp: disabled ? void 0 : onPointerUp,
+      onPointerCancel: disabled ? void 0 : onPointerCancel,
+      onKeyDown: disabled ? void 0 : onKeyDown,
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: `${CLS_SLIDER}-fill`, style: { width: pct } }),
+        /* @__PURE__ */ jsx2("span", { className: `${CLS_SLIDER}-knob`, style: { left: pct } })
+      ]
+    }
+  );
+}
 
 // src/chrome/section.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -1840,6 +2007,9 @@ var COMPONENTS = {
   "chrome/TextButton": TextButton,
   "chrome/SearchField": SearchField,
   "chrome/Composer": Composer,
+  "chrome/Readout": Readout,
+  "chrome/NumberInput": NumberInput,
+  "chrome/Slider": Slider,
   "chrome/SegmentedControl": SegmentedControl,
   "chrome/Toggle": Toggle,
   "chrome/FieldGroup": FieldGroup,
@@ -1886,6 +2056,15 @@ function gallery() {
   };
   form("IconButton", "default", () => /* @__PURE__ */ jsx7(IconButton, { icon: /* @__PURE__ */ jsx7(SearchGlyph, {}), label: "Search", onClick: noop }));
   form("IconButton", "active", () => /* @__PURE__ */ jsx7(IconButton, { icon: /* @__PURE__ */ jsx7(SearchGlyph, {}), label: "Search", onClick: noop, active: true }));
+  form("IconButton", "primary", () => /* @__PURE__ */ jsx7(IconButton, { icon: /* @__PURE__ */ jsx7(ChevronGlyph, {}), label: "Play", onClick: noop, variant: "primary" }));
+  form("IconButton", "danger-armed", () => /* @__PURE__ */ jsx7(IconButton, { icon: /* @__PURE__ */ jsx7(ClearGlyph, {}), label: "Record", onClick: noop, variant: "danger", active: true }));
+  form("Readout", "timecode", () => /* @__PURE__ */ jsx7(Readout, { value: "00:01:23:12", unit: "TC", label: "Position" }));
+  form("Readout", "secondary", () => /* @__PURE__ */ jsx7(Readout, { value: "00:04:00:00", size: "sm" }));
+  form("NumberInput", "default", () => /* @__PURE__ */ jsx7(NumberInput, { value: 120, onChange: noop, caption: "BPM", min: 20, max: 300 }));
+  form("NumberInput", "disabled", () => /* @__PURE__ */ jsx7(NumberInput, { value: 24, onChange: noop, caption: "FPS", disabled: true }));
+  form("Slider", "quarter", () => /* @__PURE__ */ jsx7(Slider, { progress: 0.25, label: "Playhead", valueMax: 100, valueNow: 25, valueText: "25%" }));
+  form("Slider", "end", () => /* @__PURE__ */ jsx7(Slider, { progress: 1, label: "Playhead" }));
+  form("Slider", "disabled", () => /* @__PURE__ */ jsx7(Slider, { progress: 0.5, label: "Playhead", disabled: true }));
   form("TextButton", "default", () => /* @__PURE__ */ jsx7(TextButton, { onClick: noop, children: "Clear all" }));
   form("TextButton", "disabled", () => /* @__PURE__ */ jsx7(TextButton, { onClick: noop, disabled: true, children: "Clear all" }));
   form("SearchField", "empty", () => /* @__PURE__ */ jsx7(SearchField, { value: "", onChange: noop, placeholder: "Filter rows\u2026", label: "Filter" }));
@@ -2040,6 +2219,7 @@ export {
   IconButton,
   IconFrame,
   LoadingState,
+  NumberInput,
   PANEL_COLORS,
   PANEL_DISABLED_OPACITY,
   PANEL_METRICS,
@@ -2048,6 +2228,7 @@ export {
   PANEL_TONES,
   PanelFrame,
   ProportionBar,
+  Readout,
   Row,
   RowList,
   ScrollArea,
@@ -2055,6 +2236,7 @@ export {
   SearchGlyph,
   Section,
   SegmentedControl,
+  Slider,
   Sparkline,
   Stack,
   StatTile,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/components",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "description": "XENO Components \u2014 rung 2 of the front ladder: molecules composed from @xenosystem/elements, with no host contract. Families as subpaths: /auth, /navigation, /feedback, /data.",
   "license": "UNLICENSED",
   "type": "module",