@xenosystem/components 0.10.2 → 0.11.1

package/dist/catalog.json

@@ -937,6 +937,256 @@
             }
           ]
         },
+        {
+          "name": "Input",
+          "file": "controls.tsx",
+          "doc": "A single-line text field — the inspector's cell, a name, a path. Mixed and read-only are treatments, not colours.",
+          "props": "InputProps",
+          "propList": [
+            {
+              "name": "value",
+              "type": "string",
+              "optional": false,
+              "doc": ""
+            },
+            {
+              "name": "onChange",
+              "type": "(value: string) => void",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "mixed",
+              "type": "boolean",
+              "optional": true,
+              "doc": "The value differs across a multi-selection: the field shows the host's mixed placeholder in the\nquiet italic form, and clears on the first keystroke. A read of `value` is empty then."
+            },
+            {
+              "name": "readOnly",
+              "type": "boolean",
+              "optional": true,
+              "doc": "Read-only renders without a well — a value shown, not a field offered."
+            },
+            {
+              "name": "variant",
+              "type": "'text' | 'mono'",
+              "optional": true,
+              "doc": "`mono` for code-like values (an id, a path)."
+            },
+            {
+              "name": "label",
+              "type": "string",
+              "optional": true,
+              "doc": "Accessible name."
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            }
+          ]
+        },
+        {
+          "name": "TextArea",
+          "file": "controls.tsx",
+          "doc": "A multi-line field for prose or code. The composer is a different unit: it has a submit convention; this has none.",
+          "props": "TextAreaProps",
+          "propList": [
+            {
+              "name": "value",
+              "type": "string",
+              "optional": false,
+              "doc": ""
+            },
+            {
+              "name": "onChange",
+              "type": "(value: string) => void",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "mixed",
+              "type": "boolean",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "readOnly",
+              "type": "boolean",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "variant",
+              "type": "'text' | 'mono'",
+              "optional": true,
+              "doc": "`mono` for code — deliberately a plain textarea, never an embedded editor."
+            },
+            {
+              "name": "label",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            }
+          ]
+        },
+        {
+          "name": "Select",
+          "file": "controls.tsx",
+          "doc": "A closed choice. ⚠️ The popup is the browser's — Chrome paints it white and no CSS reaches it, the\nhazard every dark XENO surface has met; the trigger is ours. A page-content listbox (the\nextension's `xeno-select.js`) is the next form of this unit, with the same props.",
+          "props": "SelectProps",
+          "propList": [
+            {
+              "name": "options",
+              "type": "ReadonlyArray<SelectOption<T>>",
+              "optional": false,
+              "doc": ""
+            },
+            {
+              "name": "value",
+              "type": "T | ''",
+              "optional": false,
+              "doc": ""
+            },
+            {
+              "name": "onChange",
+              "type": "(value: T) => void",
+              "optional": false,
+              "doc": ""
+            },
+            {
+              "name": "mixed",
+              "type": "boolean",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "label",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            }
+          ]
+        },
+        {
+          "name": "Swatch",
+          "file": "controls.tsx",
+          "doc": "A colour chip with its value beside it. Empty and mixed draw an outlined, transparent chip.",
+          "props": "SwatchProps",
+          "propList": [
+            {
+              "name": "color",
+              "type": "string",
+              "optional": true,
+              "doc": "A CSS colour, or absent for \"none\". The unit never parses it."
+            },
+            {
+              "name": "text",
+              "type": "ReactNode",
+              "optional": true,
+              "doc": "The text beside the chip — the hex, a token name; the host's mixed placeholder when `mixed`."
+            },
+            {
+              "name": "mixed",
+              "type": "boolean",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "onClick",
+              "type": "() => void",
+              "optional": true,
+              "doc": "Clicking opens the host's colour editor — the swatch never edits in place."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "label",
+              "type": "string",
+              "optional": false,
+              "doc": "Accessible name, e.g. `Fill: white`."
+            },
+            {
+              "name": "title",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            }
+          ]
+        },
+        {
+          "name": "AxisLabel",
+          "file": "controls.tsx",
+          "doc": "The one-letter axis tag before a numeric cell — and the scrub handle when the caller wires one.",
+          "props": "AxisLabelProps",
+          "propList": [
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "optional": false,
+              "doc": "`X`, `Y`, `W`, `H`, `R`…"
+            },
+            {
+              "name": "scrubbable",
+              "type": "boolean",
+              "optional": true,
+              "doc": "Draggable labels scrub the value beside them (Blender / Figma); the gesture maths is the caller's."
+            },
+            {
+              "name": "onPointerDown",
+              "type": "(e: PointerEvent<HTMLSpanElement>) => void",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "onPointerMove",
+              "type": "(e: PointerEvent<HTMLSpanElement>) => void",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "onPointerUp",
+              "type": "(e: PointerEvent<HTMLSpanElement>) => void",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            }
+          ]
+        },
         {
           "name": "PanelFrame",
           "file": "frame.tsx",

package/dist/chrome/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, HTMLAttributes, PointerEvent, KeyboardEvent, Ref, ReactElement } from 'react';
+import { ReactNode, HTMLAttributes, PointerEvent, KeyboardEvent, Ref, InputHTMLAttributes, TextareaHTMLAttributes, ReactElement } from 'react';
 
 /**
  * Frame + strip primitives: `PanelFrame`, `Toolbar`, `ToolbarGroup`, `Divider`, `ScrollArea`.
@@ -778,6 +778,90 @@ interface SliderProps {
 }
 /** 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;
+/** Props for {@link Input}. Everything an inspector cell needs and nothing an inspector owns (gestures stay in the block). */
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'size'> {
+    value: string;
+    onChange?: (value: string) => void;
+    /**
+     * The value differs across a multi-selection: the field shows the host's mixed placeholder in the
+     * quiet italic form, and clears on the first keystroke. A read of `value` is empty then.
+     */
+    mixed?: boolean;
+    /** Read-only renders without a well — a value shown, not a field offered. */
+    readOnly?: boolean;
+    /** `mono` for code-like values (an id, a path). */
+    variant?: 'text' | 'mono';
+    /** Accessible name. */
+    label?: string;
+    className?: string;
+}
+/** A single-line text field — the inspector's cell, a name, a path. Mixed and read-only are treatments, not colours. */
+declare function Input({ value, onChange, mixed, readOnly, variant, label, className, disabled, ...rest }: InputProps): ReactNode;
+/** Props for {@link TextArea}. */
+interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange'> {
+    value: string;
+    onChange?: (value: string) => void;
+    mixed?: boolean;
+    readOnly?: boolean;
+    /** `mono` for code — deliberately a plain textarea, never an embedded editor. */
+    variant?: 'text' | 'mono';
+    label?: string;
+    className?: string;
+}
+/** A multi-line field for prose or code. The composer is a different unit: it has a submit convention; this has none. */
+declare function TextArea({ value, onChange, mixed, readOnly, variant, label, className, ...rest }: TextAreaProps): ReactNode;
+/** One option of a {@link Select}. */
+interface SelectOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    disabled?: boolean;
+}
+/** Props for {@link Select}. */
+interface SelectProps<T extends string> {
+    options: ReadonlyArray<SelectOption<T>>;
+    value: T | '';
+    onChange: (value: T) => void;
+    mixed?: boolean;
+    disabled?: boolean;
+    label?: string;
+    className?: string;
+}
+/**
+ * A closed choice. ⚠️ The popup is the browser's — Chrome paints it white and no CSS reaches it, the
+ * hazard every dark XENO surface has met; the trigger is ours. A page-content listbox (the
+ * extension's `xeno-select.js`) is the next form of this unit, with the same props.
+ */
+declare function Select<T extends string>({ options, value, onChange, mixed, disabled, label, className }: SelectProps<T>): ReactNode;
+/** Props for {@link Swatch}. */
+interface SwatchProps {
+    /** A CSS colour, or absent for "none". The unit never parses it. */
+    color?: string;
+    /** The text beside the chip — the hex, a token name; the host's mixed placeholder when `mixed`. */
+    text?: ReactNode;
+    mixed?: boolean;
+    /** Clicking opens the host's colour editor — the swatch never edits in place. */
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Accessible name, e.g. `Fill: white`. */
+    label: string;
+    title?: string;
+    className?: string;
+}
+/** A colour chip with its value beside it. Empty and mixed draw an outlined, transparent chip. */
+declare function Swatch({ color, text, mixed, onClick, disabled, label, title, className }: SwatchProps): ReactNode;
+/** Props for {@link AxisLabel}. */
+interface AxisLabelProps {
+    /** `X`, `Y`, `W`, `H`, `R`… */
+    children: ReactNode;
+    /** Draggable labels scrub the value beside them (Blender / Figma); the gesture maths is the caller's. */
+    scrubbable?: boolean;
+    onPointerDown?: (e: PointerEvent<HTMLSpanElement>) => void;
+    onPointerMove?: (e: PointerEvent<HTMLSpanElement>) => void;
+    onPointerUp?: (e: PointerEvent<HTMLSpanElement>) => void;
+    className?: string;
+}
+/** The one-letter axis tag before a numeric cell — and the scrub handle when the caller wires one. */
+declare function AxisLabel({ children, scrubbable, onPointerDown, onPointerMove, onPointerUp, className }: AxisLabelProps): ReactNode;
 
 /**
  * The three terminal states: `EmptyState`, `LoadingState`, `ErrorState`.
@@ -1261,6 +1345,11 @@ declare const COMPONENTS: {
     readonly 'chrome/Readout': typeof Readout;
     readonly 'chrome/NumberInput': typeof NumberInput;
     readonly 'chrome/Slider': typeof Slider;
+    readonly 'chrome/Input': typeof Input;
+    readonly 'chrome/TextArea': typeof TextArea;
+    readonly 'chrome/Select': typeof Select;
+    readonly 'chrome/Swatch': typeof Swatch;
+    readonly 'chrome/AxisLabel': typeof AxisLabel;
     readonly 'chrome/SegmentedControl': typeof SegmentedControl;
     readonly 'chrome/Toggle': typeof Toggle;
     readonly 'chrome/FieldGroup': typeof FieldGroup;
@@ -1311,4 +1400,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, 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 };
+export { AxisLabel, type AxisLabelProps, 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, Input, type InputProps, 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, Select, type SelectOption, type SelectProps, Slider, type SliderProps, Sparkline, type SparklineProps, Stack, type StackProps, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, StatusBar, type StatusBarProps, StatusDot, type StatusDotProps, Swatch, type SwatchProps, Text, TextArea, type TextAreaProps, 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

@@ -59,6 +59,9 @@ var CLS_TEXT = "xc-text";
 var CLS_READOUT = "xc-readout";
 var CLS_NUMBER = "xc-number";
 var CLS_SLIDER = "xc-slider";
+var CLS_INPUT = "xc-input";
+var CLS_SWATCH = "xc-swatch";
+var CLS_AXIS = "xc-axis";
 var PANEL_TONES = Object.freeze([
   "neutral",
   "info",
@@ -679,6 +682,10 @@ div.xc-section-trigger {
 .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; }
+/* inside a row, a field shares the line instead of claiming it \u2014 the inspector's X / Y cells */
+.xc-stack--row > .xc-input,
+.xc-stack--row > .xc-number,
+.xc-stack--row > .xc-swatch { flex: 1 1 0; width: auto; min-width: 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 {
@@ -826,6 +833,118 @@ div.xc-section-trigger {
 }
 
 
+/* \u2500\u2500 Input / TextArea / Select \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-input {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  height: ${PANEL_METRICS.controlHeightSm}px;
+  box-sizing: border-box;
+  padding: 0 4px;
+  border: 1px solid ${BORDER};
+  border-radius: ${PANEL_METRICS.radius}px;
+  background: ${PANEL_COLORS.well};
+  color: ${FG};
+  font: inherit;
+  font-size: ${PANEL_METRICS.fontBody}px;
+  outline: none;
+}
+.xc-input::placeholder {
+  color: ${DIM};
+}
+.xc-input:focus-visible {
+  border-color: ${PANEL_COLORS.ring};
+}
+.xc-input:disabled {
+  opacity: ${PANEL_DISABLED_OPACITY};
+  cursor: not-allowed;
+}
+/* a value that differs across the selection: the quiet italic form, never a colour of its own */
+.xc-input--mixed,
+.xc-input--mixed::placeholder {
+  font-style: italic;
+  color: ${MUTED};
+}
+/* shown, not offered */
+.xc-input--readonly {
+  background: transparent;
+  border-color: transparent;
+  cursor: default;
+}
+.xc-input--mono {
+  font-family: var(--xeno-font-mono);
+  font-size: ${PANEL_METRICS.fontMeta}px;
+}
+.xc-input--area {
+  height: auto;
+  min-height: 34px;
+  padding: 3px 4px;
+  resize: vertical;
+  line-height: 1.4;
+}
+.xc-input--select {
+  appearance: none;
+  padding-right: 14px;
+  cursor: pointer;
+}
+
+/* \u2500\u2500 Swatch \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-swatch {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  height: ${PANEL_METRICS.controlHeightSm}px;
+  padding: 0 4px;
+  border: 1px solid transparent;
+  border-radius: ${PANEL_METRICS.radius}px;
+  background: transparent;
+  color: ${FG};
+  font: inherit;
+  cursor: pointer;
+}
+.xc-swatch:hover {
+  border-color: ${BORDER};
+}
+.xc-swatch:focus-visible {
+  outline: 1px solid ${PANEL_COLORS.focus};
+  outline-offset: -1px;
+}
+.xc-swatch:disabled {
+  opacity: ${PANEL_DISABLED_OPACITY};
+  cursor: default;
+}
+.xc-swatch-chip {
+  width: 10px;
+  height: 10px;
+  flex: 0 0 auto;
+  border-radius: ${PANEL_METRICS.radius}px;
+  border: 1px solid ${BORDER};
+}
+.xc-swatch-chip--empty {
+  background: transparent;
+}
+.xc-swatch-text {
+  font-size: ${PANEL_METRICS.fontMeta}px;
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* \u2500\u2500 AxisLabel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-axis {
+  flex: 0 0 auto;
+  width: 9px;
+  text-align: center;
+  font-size: ${PANEL_METRICS.fontMeta - 1}px;
+  color: ${MUTED};
+  user-select: none;
+}
+.xc-axis--scrub {
+  cursor: ew-resize;
+}
+
 /* \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;
@@ -1704,6 +1823,77 @@ function Slider({ progress, label, valueMin = 0, valueMax = 1, valueNow, valueTe
     }
   );
 }
+function Input({ value, onChange, mixed, readOnly, variant = "text", label, className, disabled, ...rest }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx2(
+    "input",
+    {
+      type: "text",
+      ...rest,
+      className: cx(CLS_INPUT, mixed && `${CLS_INPUT}--mixed`, readOnly && `${CLS_INPUT}--readonly`, variant === "mono" && `${CLS_INPUT}--mono`, className),
+      value,
+      readOnly,
+      disabled,
+      "aria-label": label ?? rest["aria-label"],
+      spellCheck: rest.spellCheck ?? false,
+      onChange: (e) => onChange?.(e.target.value)
+    }
+  );
+}
+function TextArea({ value, onChange, mixed, readOnly, variant = "text", label, className, ...rest }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx2(
+    "textarea",
+    {
+      ...rest,
+      className: cx(CLS_INPUT, `${CLS_INPUT}--area`, mixed && `${CLS_INPUT}--mixed`, readOnly && `${CLS_INPUT}--readonly`, variant === "mono" && `${CLS_INPUT}--mono`, className),
+      value,
+      readOnly,
+      "aria-label": label ?? rest["aria-label"],
+      spellCheck: rest.spellCheck ?? variant !== "mono",
+      onChange: (e) => onChange?.(e.target.value)
+    }
+  );
+}
+function Select({ options, value, onChange, mixed, disabled, label, className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsxs2(
+    "select",
+    {
+      className: cx(CLS_INPUT, `${CLS_INPUT}--select`, mixed && `${CLS_INPUT}--mixed`, className),
+      value,
+      disabled,
+      "aria-label": label,
+      onChange: (e) => onChange(e.target.value),
+      children: [
+        mixed || value === "" ? /* @__PURE__ */ jsx2("option", { value: "", children: mixed ? "\u2014" : "" }) : null,
+        options.map((o) => /* @__PURE__ */ jsx2("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+      ]
+    }
+  );
+}
+function Swatch({ color, text, mixed, onClick, disabled, label, title, className }) {
+  usePanelPrimitives();
+  const empty = mixed || !color;
+  return /* @__PURE__ */ jsxs2("button", { type: "button", className: cx(CLS_SWATCH, className), onClick, disabled, title, "aria-label": label, children: [
+    /* @__PURE__ */ jsx2("span", { className: cx(`${CLS_SWATCH}-chip`, empty && `${CLS_SWATCH}-chip--empty`), style: empty ? void 0 : { background: color } }),
+    /* @__PURE__ */ jsx2("span", { className: cx(`${CLS_SWATCH}-text`, mixed && `${CLS_INPUT}--mixed`), children: text ?? (color || "\u2014") })
+  ] });
+}
+function AxisLabel({ children, scrubbable, onPointerDown, onPointerMove, onPointerUp, className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      className: cx(CLS_AXIS, scrubbable && `${CLS_AXIS}--scrub`, className),
+      "aria-hidden": true,
+      onPointerDown: scrubbable ? onPointerDown : void 0,
+      onPointerMove: scrubbable ? onPointerMove : void 0,
+      onPointerUp: scrubbable ? onPointerUp : void 0,
+      children
+    }
+  );
+}
 
 // src/chrome/section.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -2030,6 +2220,11 @@ var COMPONENTS = {
   "chrome/Readout": Readout,
   "chrome/NumberInput": NumberInput,
   "chrome/Slider": Slider,
+  "chrome/Input": Input,
+  "chrome/TextArea": TextArea,
+  "chrome/Select": Select,
+  "chrome/Swatch": Swatch,
+  "chrome/AxisLabel": AxisLabel,
   "chrome/SegmentedControl": SegmentedControl,
   "chrome/Toggle": Toggle,
   "chrome/FieldGroup": FieldGroup,
@@ -2086,6 +2281,21 @@ function gallery() {
   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("Input", "value", () => /* @__PURE__ */ jsx7(Input, { value: "Hero image", onChange: noop, label: "Name" }));
+  form("Input", "mixed", () => /* @__PURE__ */ jsx7(Input, { value: "", mixed: true, placeholder: "Mixed", onChange: noop, label: "Name" }));
+  form("Input", "readonly", () => /* @__PURE__ */ jsx7(Input, { value: "node_7f3a", readOnly: true, variant: "mono", label: "Id" }));
+  form("TextArea", "code", () => /* @__PURE__ */ jsx7(TextArea, { value: '{\n  "kind": "frame"\n}', onChange: noop, variant: "mono", label: "Props" }));
+  form("Select", "default", () => /* @__PURE__ */ jsx7(Select, { options: [{ value: "fill", label: "Fill" }, { value: "fit", label: "Fit" }, { value: "crop", label: "Crop" }], value: "fit", onChange: noop, label: "Scale mode" }));
+  form("Select", "mixed", () => /* @__PURE__ */ jsx7(Select, { options: [{ value: "fill", label: "Fill" }, { value: "fit", label: "Fit" }], value: "", mixed: true, onChange: noop, label: "Scale mode" }));
+  form("Swatch", "color", () => /* @__PURE__ */ jsx7(Swatch, { color: "steelblue", text: "steelblue", label: "Fill: steelblue", onClick: noop, title: "Edit in the Color panel" }));
+  form("Swatch", "none", () => /* @__PURE__ */ jsx7(Swatch, { label: "Fill: none", onClick: noop }));
+  form("Swatch", "mixed", () => /* @__PURE__ */ jsx7(Swatch, { mixed: true, text: "Mixed", label: "Fill: mixed", onClick: noop }));
+  form("AxisLabel", "row", () => /* @__PURE__ */ jsxs7(Stack, { direction: "row", gap: 2, pad: "none", children: [
+    /* @__PURE__ */ jsx7(AxisLabel, { scrubbable: true, children: "X" }),
+    /* @__PURE__ */ jsx7(Input, { value: "120", onChange: noop, label: "X" }),
+    /* @__PURE__ */ jsx7(AxisLabel, { scrubbable: true, children: "Y" }),
+    /* @__PURE__ */ jsx7(Input, { value: "48", onChange: noop, label: "Y" })
+  ] }));
   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" }));
@@ -2173,6 +2383,7 @@ function gallery() {
   return out;
 }
 export {
+  AxisLabel,
   Badge,
   CLS_BADGE,
   CLS_BAR,
@@ -2239,6 +2450,7 @@ export {
   FieldGroup,
   IconButton,
   IconFrame,
+  Input,
   LoadingState,
   NumberInput,
   PANEL_COLORS,
@@ -2257,6 +2469,7 @@ export {
   SearchGlyph,
   Section,
   SegmentedControl,
+  Select,
   Slider,
   Sparkline,
   Stack,
@@ -2264,7 +2477,9 @@ export {
   StatusBadge,
   StatusBar,
   StatusDot,
+  Swatch,
   Text,
+  TextArea,
   TextButton,
   Toggle,
   Toolbar,

package/package.json

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