@xenosystem/components 0.9.3 → 0.10.1

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,210 @@
             }
           ]
         },
+        {
+          "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": "onClick",
+              "type": "() => void",
+              "optional": true,
+              "doc": "Clickable readouts cycle their display (timecode → frames → seconds); the unit becomes a button."
+            },
+            {
+              "name": "title",
+              "type": "string",
+              "optional": true,
+              "doc": "Native tooltip for a clickable readout (\"Click to change time display\")."
+            },
+            {
+              "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,63 @@ 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;
+    /** Clickable readouts cycle their display (timecode → frames → seconds); the unit becomes a button. */
+    onClick?: () => void;
+    /** Native tooltip for a clickable readout ("Click to change time display"). */
+    title?: 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, onClick, title, 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 +1258,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 +1311,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,127 @@ 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--button {
+  appearance: none;
+  padding: 0 4px;
+  border: 1px solid transparent;
+  border-radius: ${PANEL_METRICS.radius}px;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+}
+.xc-readout--button:hover {
+  border-color: ${BORDER};
+}
+.xc-readout--button:focus-visible {
+  outline: 1px solid ${PANEL_COLORS.focus};
+  outline-offset: -1px;
+}
+.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;
@@ -1216,7 +1340,7 @@ import { useState as useState3 } from "react";
 
 // src/chrome/controls.tsx
 import { useId } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function SearchGlyph() {
   return /* @__PURE__ */ jsxs2(
     "svg",
@@ -1281,6 +1405,7 @@ function IconButton({
   active,
   disabled,
   size = "md",
+  variant = "default",
   className
 }) {
   usePanelPrimitives();
@@ -1293,7 +1418,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 +1642,68 @@ function Composer({
     }
   );
 }
+function Readout({ value, unit, size = "md", label, onClick, title, className }) {
+  usePanelPrimitives();
+  const body = /* @__PURE__ */ jsxs2(Fragment, { 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
+  ] });
+  if (onClick) {
+    return /* @__PURE__ */ jsx2("button", { type: "button", className: cx(CLS_READOUT, `${CLS_READOUT}--${size}`, `${CLS_READOUT}--button`, className), onClick, title, "aria-label": label, children: body });
+  }
+  return /* @__PURE__ */ jsx2("span", { className: cx(CLS_READOUT, `${CLS_READOUT}--${size}`, className), "aria-label": label, role: label ? "status" : void 0, children: body });
+}
+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";
@@ -1596,7 +1783,7 @@ function Section({
 
 // src/chrome/rows.tsx
 import { createContext, useContext } from "react";
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var RowListContext = createContext(null);
 function RowList({
   children,
@@ -1662,7 +1849,7 @@ function Row({
       ...rest,
       children: [
         noIcon ? null : /* @__PURE__ */ jsx4("span", { className: CLS_ROW_ICON, children: icon }),
-        children ?? /* @__PURE__ */ jsxs4(Fragment, { children: [
+        children ?? /* @__PURE__ */ jsxs4(Fragment2, { children: [
           /* @__PURE__ */ jsx4("span", { className: CLS_ROW_LABEL, children: label }),
           meta != null ? /* @__PURE__ */ jsx4("span", { className: CLS_ROW_META, children: meta }) : null
         ] }),
@@ -1706,7 +1893,7 @@ function ErrorState({
 }
 
 // src/chrome/indicators.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function Badge({
   children,
   tone = "neutral",
@@ -1772,7 +1959,7 @@ function ProportionBar({ segments, label, className }) {
 }
 function StatusBar({ left, right, children, className }) {
   usePanelPrimitives();
-  return /* @__PURE__ */ jsx6("div", { className: cx(CLS_STATUSBAR, className), children: children ?? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+  return /* @__PURE__ */ jsx6("div", { className: cx(CLS_STATUSBAR, className), children: children ?? /* @__PURE__ */ jsxs6(Fragment3, { children: [
     /* @__PURE__ */ jsx6("span", { children: left }),
     /* @__PURE__ */ jsx6("span", { children: right })
   ] }) });
@@ -1840,6 +2027,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 +2076,16 @@ 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", "clickable", () => /* @__PURE__ */ jsx7(Readout, { value: "00:01:23:12", unit: "TC", label: "Position 00:01:23:12", onClick: noop, title: "Click to change time display" }));
+  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 +2240,7 @@ export {
   IconButton,
   IconFrame,
   LoadingState,
+  NumberInput,
   PANEL_COLORS,
   PANEL_DISABLED_OPACITY,
   PANEL_METRICS,
@@ -2048,6 +2249,7 @@ export {
   PANEL_TONES,
   PanelFrame,
   ProportionBar,
+  Readout,
   Row,
   RowList,
   ScrollArea,
@@ -2055,6 +2257,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.1",
   "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",