@xenosystem/components 0.9.2 → 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",
@@ -895,6 +1093,70 @@
             }
           ]
         },
+        {
+          "name": "Stack",
+          "file": "frame.tsx",
+          "doc": "A padded, gapped group of children — the `<div style={{ padding: 8, display: 'flex', gap }}>` that\nappeared in nine places in one block. As a unit its spacing is the family's, and a declaration can\nname it.",
+          "props": "StackProps",
+          "propList": [
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "direction",
+              "type": "'column' | 'row'",
+              "optional": true,
+              "doc": "`column` (default) or `row`."
+            },
+            {
+              "name": "gap",
+              "type": "number",
+              "optional": true,
+              "doc": "Gap between children, in px. Default 2 (column) / 6 (row)."
+            },
+            {
+              "name": "pad",
+              "type": "'none' | 'gutter' | 'inset'",
+              "optional": true,
+              "doc": "Inner padding: `none`, `gutter` (default, the panel gutter), or `inset` (gutter sides, none above)."
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            }
+          ]
+        },
+        {
+          "name": "Text",
+          "file": "frame.tsx",
+          "doc": "",
+          "props": "TextProps",
+          "propList": [
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "role",
+              "type": "'title' | 'body' | 'meta' | 'caption' | 'number'",
+              "optional": true,
+              "doc": "`title` — a heading line; `body` (default); `meta` — a secondary line (email under a name);\n`caption` — a standing note (the smallest reading size); `number` — tabular figures for amounts.\nThe quiet roles use the muted-text tone: reading text is never dimmed with opacity (3:1 or worse)."
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            }
+          ]
+        },
         {
           "name": "Badge",
           "file": "indicators.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`.
@@ -105,6 +105,35 @@ interface ColumnProps {
  * a declaration can name.
  */
 declare function Column({ children, className }: ColumnProps): ReactNode;
+/** Props for {@link Stack}. */
+interface StackProps {
+    children?: ReactNode;
+    /** `column` (default) or `row`. */
+    direction?: 'column' | 'row';
+    /** Gap between children, in px. Default 2 (column) / 6 (row). */
+    gap?: number;
+    /** Inner padding: `none`, `gutter` (default, the panel gutter), or `inset` (gutter sides, none above). */
+    pad?: 'none' | 'gutter' | 'inset';
+    className?: string;
+}
+/**
+ * A padded, gapped group of children — the `<div style={{ padding: 8, display: 'flex', gap }}>` that
+ * appeared in nine places in one block. As a unit its spacing is the family's, and a declaration can
+ * name it.
+ */
+declare function Stack({ children, direction, gap, pad, className }: StackProps): ReactNode;
+/** Props for {@link Text}. */
+interface TextProps {
+    children?: ReactNode;
+    /**
+     * `title` — a heading line; `body` (default); `meta` — a secondary line (email under a name);
+     * `caption` — a standing note (the smallest reading size); `number` — tabular figures for amounts.
+     * The quiet roles use the muted-text tone: reading text is never dimmed with opacity (3:1 or worse).
+     */
+    role?: 'title' | 'body' | 'meta' | 'caption' | 'number';
+    className?: string;
+}
+declare function Text({ children, role, className }: TextProps): ReactNode;
 
 /**
  * `Section` — the collapsible titled group.
@@ -486,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;
 }
@@ -497,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`. */
@@ -690,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`.
@@ -1170,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;
@@ -1183,6 +1270,8 @@ declare const COMPONENTS: {
     readonly 'chrome/Divider': typeof Divider;
     readonly 'chrome/ScrollArea': typeof ScrollArea;
     readonly 'chrome/Column': typeof Column;
+    readonly 'chrome/Stack': typeof Stack;
+    readonly 'chrome/Text': typeof Text;
     readonly 'chrome/Badge': typeof Badge;
     readonly 'chrome/StatusDot': typeof StatusDot;
     readonly 'chrome/StatusBadge': typeof StatusBadge;
@@ -1218,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, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, StatusBar, type StatusBarProps, StatusDot, type StatusDotProps, TextButton, type TextButtonProps, 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

@@ -54,6 +54,11 @@ var CLS_BAR = "xc-bar";
 var CLS_BAR_SEGMENT = "xc-bar-segment";
 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",
@@ -664,6 +669,147 @@ div.xc-section-trigger {
   min-height: 0;
 }
 
+/* \u2500\u2500 Stack \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-stack {
+  display: flex;
+  min-width: 0;
+}
+.xc-stack--column { flex-direction: column; }
+.xc-stack--row { flex-direction: row; align-items: center; flex-wrap: wrap; }
+.xc-stack--pad-gutter { padding: ${PANEL_METRICS.gutter}px; }
+.xc-stack--pad-inset { padding: 0 ${PANEL_METRICS.gutter}px ${PANEL_METRICS.gutter}px; }
+.xc-stack--pad-none { padding: 0; }
+
+/* \u2500\u2500 Text \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-text {
+  display: block;
+  min-width: 0;
+  color: ${FG};
+  font-size: ${PANEL_METRICS.fontBody}px;
+  line-height: 1.4;
+}
+.xc-text--title {
+  font-size: ${PANEL_METRICS.fontBody}px;
+  font-weight: 600;
+}
+.xc-text--meta {
+  font-size: ${PANEL_METRICS.fontMeta}px;
+  color: ${MUTED};
+}
+.xc-text--caption {
+  font-size: ${PANEL_METRICS.fontMeta}px;
+  color: ${MUTED};
+}
+.xc-text--number {
+  font-size: ${PANEL_METRICS.fontMeta}px;
+  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;
@@ -1163,6 +1309,15 @@ function Column({ children, className }) {
   usePanelPrimitives();
   return /* @__PURE__ */ jsx("div", { className: cx(CLS_COLUMN, className), children });
 }
+function Stack({ children, direction = "column", gap, pad = "gutter", className }) {
+  usePanelPrimitives();
+  const g = gap ?? (direction === "row" ? 6 : 2);
+  return /* @__PURE__ */ jsx("div", { className: cx(CLS_STACK, `${CLS_STACK}--${direction}`, `${CLS_STACK}--pad-${pad}`, className), style: { gap: g }, children });
+}
+function Text({ children, role = "body", className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx("span", { className: cx(CLS_TEXT, `${CLS_TEXT}--${role}`, className), children });
+}
 
 // src/chrome/section.tsx
 import { useState as useState3 } from "react";
@@ -1234,6 +1389,7 @@ function IconButton({
   active,
   disabled,
   size = "md",
+  variant = "default",
   className
 }) {
   usePanelPrimitives();
@@ -1246,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
     }
   );
@@ -1470,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";
@@ -1793,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,
@@ -1806,6 +2023,8 @@ var COMPONENTS = {
   "chrome/Divider": Divider,
   "chrome/ScrollArea": ScrollArea,
   "chrome/Column": Column,
+  "chrome/Stack": Stack,
+  "chrome/Text": Text,
   "chrome/Badge": Badge,
   "chrome/StatusDot": StatusDot,
   "chrome/StatusBadge": StatusBadge,
@@ -1837,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" }));
@@ -1876,6 +2104,21 @@ function gallery() {
     /* @__PURE__ */ jsx7(ScrollArea, { children: /* @__PURE__ */ jsx7("p", { style: { margin: 8 }, children: "body" }) }),
     /* @__PURE__ */ jsx7(StatusBar, { left: "status" })
   ] }));
+  form("Stack", "column", () => /* @__PURE__ */ jsxs7(Stack, { children: [
+    /* @__PURE__ */ jsx7(Text, { role: "title", children: "Emilian" }),
+    /* @__PURE__ */ jsx7(Text, { role: "meta", children: "emilian@bnkrsys.com" })
+  ] }));
+  form("Stack", "row", () => /* @__PURE__ */ jsxs7(Stack, { direction: "row", pad: "inset", children: [
+    /* @__PURE__ */ jsx7(Badge, { children: "Pro" }),
+    /* @__PURE__ */ jsx7(Badge, { tone: "success", children: "active" })
+  ] }));
+  form("Text", "roles", () => /* @__PURE__ */ jsxs7(Stack, { children: [
+    /* @__PURE__ */ jsx7(Text, { role: "title", children: "Title line" }),
+    /* @__PURE__ */ jsx7(Text, { children: "Body line" }),
+    /* @__PURE__ */ jsx7(Text, { role: "meta", children: "Meta line" }),
+    /* @__PURE__ */ jsx7(Text, { role: "caption", children: "A standing caption." }),
+    /* @__PURE__ */ jsx7(Text, { role: "number", children: "1,204.00" })
+  ] }));
   door("ScrollArea", "default", () => /* @__PURE__ */ jsx7(ScrollArea, { children: Array.from({ length: 30 }, (_, i) => /* @__PURE__ */ jsxs7("p", { style: { margin: 4 }, children: [
     "line ",
     i + 1
@@ -1976,6 +2219,7 @@ export {
   IconButton,
   IconFrame,
   LoadingState,
+  NumberInput,
   PANEL_COLORS,
   PANEL_DISABLED_OPACITY,
   PANEL_METRICS,
@@ -1984,6 +2228,7 @@ export {
   PANEL_TONES,
   PanelFrame,
   ProportionBar,
+  Readout,
   Row,
   RowList,
   ScrollArea,
@@ -1991,11 +2236,14 @@ export {
   SearchGlyph,
   Section,
   SegmentedControl,
+  Slider,
   Sparkline,
+  Stack,
   StatTile,
   StatusBadge,
   StatusBar,
   StatusDot,
+  Text,
   TextButton,
   Toggle,
   Toolbar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenosystem/components",
-  "version": "0.9.2",
+  "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",