@xenosystem/components 0.8.1 → 0.9.1

package/dist/catalog.json

@@ -360,7 +360,7 @@
         {
           "name": "IconButton",
           "file": "controls.tsx",
-          "doc": "A square icon-only button — the toolbar/row workhorse.\r\n\n@example\r\n```tsx\r\n<IconButton icon={<TrashGlyph />} label=\"Delete layer\" onClick={remove} disabled={!selection} />\r\n```",
+          "doc": "A square icon-only button — the toolbar/row workhorse.\n\n@example\n```tsx\n<IconButton icon={<TrashGlyph />} label=\"Delete layer\" onClick={remove} disabled={!selection} />\n```",
           "props": "IconButtonProps",
           "propList": [
             {
@@ -410,7 +410,7 @@
         {
           "name": "TextButton",
           "file": "controls.tsx",
-          "doc": "A borderless text action — the inline `+ Add` / `Clear` / `Unbind` affordance. Muted by default so\r\nit reads as secondary; `strong` promotes it. Never a filled button: `DESIGN_SYSTEM.md` §7 allows\r\nexactly one primary action on screen and a panel is rarely the place for it.",
+          "doc": "A borderless text action — the inline `+ Add` / `Clear` / `Unbind` affordance. Muted by default so\nit reads as secondary; `strong` promotes it. Never a filled button: `DESIGN_SYSTEM.md` §7 allows\nexactly one primary action on screen and a panel is rarely the place for it.",
           "props": "TextButtonProps",
           "propList": [
             {
@@ -448,7 +448,7 @@
         {
           "name": "SearchField",
           "file": "controls.tsx",
-          "doc": "The canonical filter input: recessed well, leading glyph, Escape-to-clear, and a clear button\r\nthat only appears when there is something to clear.\r\n\n@example\r\n```tsx\r\n<SearchField value={query} onChange={setQuery} placeholder=\"Filter layers…\" />\r\n```",
+          "doc": "The canonical filter input: recessed well, leading glyph, Escape-to-clear, and a clear button\nthat only appears when there is something to clear.\n\n@example\n```tsx\n<SearchField value={query} onChange={setQuery} placeholder=\"Filter layers…\" />\n```",
           "props": "SearchFieldProps",
           "propList": [
             {
@@ -554,7 +554,7 @@
         {
           "name": "Toggle",
           "file": "controls.tsx",
-          "doc": "The signature XENO toggle: a rectangular track with a SQUARE knob whose corner radius softens\r\nwhen it moves to the ON position (DESIGN_SYSTEM §3 \"The Toggle Switch\"). Never a pill.",
+          "doc": "The signature XENO toggle: a rectangular track with a SQUARE knob whose corner radius softens\nwhen it moves to the ON position (DESIGN_SYSTEM §3 \"The Toggle Switch\"). Never a pill.",
           "props": "ToggleProps",
           "propList": [
             {
@@ -598,7 +598,7 @@
         {
           "name": "FieldGroup",
           "file": "controls.tsx",
-          "doc": "A label-column layout: every {@link Field} inside shares ONE label width, so labels start at the\r\nsame x and controls end at the same x — the column alignment DESIGN_SYSTEM §5 requires and the\r\nthing hand-rolled property grids always get wrong.\r\n\n@example\r\n```tsx\r\n<FieldGroup labelWidth={64}>\r\n  <Field label=\"Opacity\"><Slider … /></Field>\r\n  <Field label=\"Blend\"><Select … /></Field>\r\n</FieldGroup>\r\n```",
+          "doc": "A label-column layout: every {@link Field} inside shares ONE label width, so labels start at the\nsame x and controls end at the same x — the column alignment DESIGN_SYSTEM §5 requires and the\nthing hand-rolled property grids always get wrong.\n\n@example\n```tsx\n<FieldGroup labelWidth={64}>\n  <Field label=\"Opacity\"><Slider … /></Field>\n  <Field label=\"Blend\"><Select … /></Field>\n</FieldGroup>\n```",
           "props": "FieldGroupProps",
           "propList": [
             {
@@ -665,6 +665,68 @@
             }
           ]
         },
+        {
+          "name": "Composer",
+          "file": "controls.tsx",
+          "doc": "",
+          "props": "ComposerProps",
+          "propList": [
+            {
+              "name": "value",
+              "type": "string",
+              "optional": false,
+              "doc": "Controlled draft."
+            },
+            {
+              "name": "onChange",
+              "type": "(value: string) => void",
+              "optional": false,
+              "doc": "Every keystroke."
+            },
+            {
+              "name": "onSubmit",
+              "type": "() => void",
+              "optional": true,
+              "doc": "Enter (or Shift+Enter when `submitOnEnter` is false) — the caller decides what \"submit\" means."
+            },
+            {
+              "name": "placeholder",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "label",
+              "type": "string",
+              "optional": true,
+              "doc": "Accessible name; defaults to the placeholder."
+            },
+            {
+              "name": "submitOnEnter",
+              "type": "boolean",
+              "optional": true,
+              "doc": "Enter submits and Shift+Enter breaks the line (the chat convention). `false` swaps them."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "autoFocus",
+              "type": "boolean",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            }
+          ]
+        },
         {
           "name": "PanelFrame",
           "file": "frame.tsx",

package/dist/chrome/index.d.ts

@@ -182,7 +182,7 @@ declare function Section({ title, children, badge, actions, collapsible, collaps
  *    (Section, RowList/Row, Toolbar, StatTile, ProportionBar, EmptyState, LoadingState, ErrorState,
  *    StatusBadge, IconFrame …), re-cut for dense in-panel density rather than dashboard-page density.
  *
- * Modifiers use BEM's double dash (`xeno-row--selected`), matching workflow's existing
+ * Modifiers use BEM's double dash (`xc-row--selected`), matching workflow's existing
  * `xeno-panel-content--no-header`.
  *
  * @module
@@ -198,101 +198,101 @@ declare const CLS_PANEL_CONTENT = "xeno-panel-content";
 /** Applied to the content well when the frame renders no header. */
 declare const CLS_PANEL_CONTENT_NO_HEADER = "xeno-panel-content--no-header";
 /** Horizontal control strip (`left` / `right` clusters). */
-declare const CLS_TOOLBAR = "xeno-toolbar";
+declare const CLS_TOOLBAR = "xc-toolbar";
 /** A cluster of controls inside a toolbar. */
-declare const CLS_TOOLBAR_GROUP = "xeno-toolbar-group";
+declare const CLS_TOOLBAR_GROUP = "xc-toolbar-group";
 /** Footer strip: counts on the left, state on the right. */
-declare const CLS_STATUSBAR = "xeno-statusbar";
+declare const CLS_STATUSBAR = "xc-statusbar";
 /** 1px hairline; `--vertical` for an inline separator inside a toolbar. */
-declare const CLS_DIVIDER = "xeno-divider";
+declare const CLS_DIVIDER = "xc-divider";
 /** Collapsible titled group. */
-declare const CLS_SECTION = "xeno-section";
+declare const CLS_SECTION = "xc-section";
 /** The section's header row. */
-declare const CLS_SECTION_HEADER = "xeno-section-header";
+declare const CLS_SECTION_HEADER = "xc-section-header";
 /** The `<button>` inside the header that toggles collapse (siblings stay outside it — see `Section`). */
-declare const CLS_SECTION_TRIGGER = "xeno-section-trigger";
+declare const CLS_SECTION_TRIGGER = "xc-section-trigger";
 /** Disclosure chevron wrapper (rotates via the `--collapsed` modifier). */
-declare const CLS_SECTION_CHEVRON = "xeno-section-chevron";
+declare const CLS_SECTION_CHEVRON = "xc-section-chevron";
 /** Uppercase section label. */
-declare const CLS_SECTION_TITLE = "xeno-section-title";
+declare const CLS_SECTION_TITLE = "xc-section-title";
 /** Trailing cluster in the section header (badge + actions + toggle). */
-declare const CLS_SECTION_ACTIONS = "xeno-section-actions";
+declare const CLS_SECTION_ACTIONS = "xc-section-actions";
 /** The section's body. */
-declare const CLS_SECTION_BODY = "xeno-section-body";
+declare const CLS_SECTION_BODY = "xc-section-body";
 /** Hairline-divided vertical list container. */
-declare const CLS_ROWLIST = "xeno-rowlist";
+declare const CLS_ROWLIST = "xc-rowlist";
 /** A single dense row. */
-declare const CLS_ROW = "xeno-row";
+declare const CLS_ROW = "xc-row";
 /** Fixed-width leading icon slot (keeps labels in one column — DESIGN_SYSTEM §5). */
-declare const CLS_ROW_ICON = "xeno-row-icon";
+declare const CLS_ROW_ICON = "xc-row-icon";
 /** The row's flexible label column. */
-declare const CLS_ROW_LABEL = "xeno-row-label";
+declare const CLS_ROW_LABEL = "xc-row-label";
 /** Secondary text after the label. */
-declare const CLS_ROW_META = "xeno-row-meta";
+declare const CLS_ROW_META = "xc-row-meta";
 /** Right-aligned trailing slot. */
-declare const CLS_ROW_TRAILING = "xeno-row-trailing";
+declare const CLS_ROW_TRAILING = "xc-row-trailing";
 /** Square icon-only button. */
-declare const CLS_ICON_BUTTON = "xeno-iconbtn";
+declare const CLS_ICON_BUTTON = "xc-iconbtn";
 /** Borderless inline text action (`+ Add`, `Clear`, `Unbind`). */
-declare const CLS_TEXT_BUTTON = "xeno-textbtn";
+declare const CLS_TEXT_BUTTON = "xc-textbtn";
 /** Search / filter input wrapper. */
-declare const CLS_SEARCH = "xeno-search";
+declare const CLS_SEARCH = "xc-search";
 /** The `<input>` inside a search field. */
-declare const CLS_SEARCH_INPUT = "xeno-search-input";
+declare const CLS_SEARCH_INPUT = "xc-search-input";
 /** Segmented (radio-group) control. */
-declare const CLS_SEGMENTED = "xeno-segmented";
+declare const CLS_SEGMENTED = "xc-segmented";
 /** One segment button. */
-declare const CLS_SEGMENT = "xeno-segment";
+declare const CLS_SEGMENT = "xc-segment";
 /** The signature XENO toggle (rectangular track, square knob). */
-declare const CLS_TOGGLE = "xeno-toggle";
+declare const CLS_TOGGLE = "xc-toggle";
 /** The toggle's knob. */
-declare const CLS_TOGGLE_KNOB = "xeno-toggle-knob";
+declare const CLS_TOGGLE_KNOB = "xc-toggle-knob";
 /** Label-column field group (all labels share one width). */
-declare const CLS_FIELD_GROUP = "xeno-fieldgroup";
+declare const CLS_FIELD_GROUP = "xc-fieldgroup";
 /** One label + control row. */
-declare const CLS_FIELD = "xeno-field";
+declare const CLS_FIELD = "xc-field";
 /** The field's label cell. */
-declare const CLS_FIELD_LABEL = "xeno-field-label";
+declare const CLS_FIELD_LABEL = "xc-field-label";
 /** The field's control cell. */
-declare const CLS_FIELD_CONTROL = "xeno-field-control";
+declare const CLS_FIELD_CONTROL = "xc-field-control";
 /** Muted hint under a field. */
-declare const CLS_FIELD_HINT = "xeno-field-hint";
+declare const CLS_FIELD_HINT = "xc-field-hint";
 /** Centered zero-content state. */
-declare const CLS_EMPTY = "xeno-empty";
+declare const CLS_EMPTY = "xc-empty";
 /** Centered busy state. */
-declare const CLS_LOADING = "xeno-loading";
+declare const CLS_LOADING = "xc-loading";
 /** Centered failure state. */
-declare const CLS_ERROR = "xeno-error";
+declare const CLS_ERROR = "xc-error";
 /** Shared container for the three states above. */
-declare const CLS_STATE = "xeno-state";
+declare const CLS_STATE = "xc-state";
 /** The state's icon chip. */
-declare const CLS_STATE_ICON = "xeno-state-icon";
+declare const CLS_STATE_ICON = "xc-state-icon";
 /** The state's headline. */
-declare const CLS_STATE_TITLE = "xeno-state-title";
+declare const CLS_STATE_TITLE = "xc-state-title";
 /** The state's supporting line — the ACTIONABLE hint. */
-declare const CLS_STATE_HINT = "xeno-state-hint";
+declare const CLS_STATE_HINT = "xc-state-hint";
 /** Indeterminate progress bar used by the loading state (no spinner — no circles). */
-declare const CLS_STATE_PROGRESS = "xeno-state-progress";
+declare const CLS_STATE_PROGRESS = "xc-state-progress";
 /** Small rectangular status/metadata chip. */
-declare const CLS_BADGE = "xeno-badge";
+declare const CLS_BADGE = "xc-badge";
 /** 2px-radius square status dot (never a circle). */
-declare const CLS_DOT = "xeno-dot";
+declare const CLS_DOT = "xc-dot";
 /** Flat outlined icon container. */
-declare const CLS_ICON_FRAME = "xeno-iconframe";
+declare const CLS_ICON_FRAME = "xc-iconframe";
 /** Label + big value tile. */
-declare const CLS_STAT = "xeno-stat";
+declare const CLS_STAT = "xc-stat";
 /** The stat's uppercase label row. */
-declare const CLS_STAT_LABEL = "xeno-stat-label";
+declare const CLS_STAT_LABEL = "xc-stat-label";
 /** The stat's value. */
-declare const CLS_STAT_VALUE = "xeno-stat-value";
+declare const CLS_STAT_VALUE = "xc-stat-value";
 /** The stat's sub-line. */
-declare const CLS_STAT_SUB = "xeno-stat-sub";
+declare const CLS_STAT_SUB = "xc-stat-sub";
 /** Horizontal stacked proportion bar (replaces a pie/donut — no circles). */
-declare const CLS_BAR = "xeno-bar";
+declare const CLS_BAR = "xc-bar";
 /** One segment of a proportion bar. */
-declare const CLS_BAR_SEGMENT = "xeno-bar-segment";
+declare const CLS_BAR_SEGMENT = "xc-bar-segment";
 /** Scroll container with the canonical thin rectangular thumb. */
-declare const CLS_SCROLL = "xeno-scroll";
+declare const CLS_SCROLL = "xc-scroll";
 /**
  * Semantic tone for badges, dots and states. `neutral` is the default and the only tone that is
  * purely monochromatic; the other four are the ONLY places DESIGN_SYSTEM permits chromatic color
@@ -652,6 +652,32 @@ interface FieldProps {
 }
 /** One label + control row inside a {@link FieldGroup}. */
 declare function Field({ label, children, hint, htmlFor, stacked, className, }: FieldProps): ReactNode;
+/** Props for {@link Composer}. */
+interface ComposerProps {
+    /** Controlled draft. */
+    value: string;
+    /** Every keystroke. */
+    onChange: (value: string) => void;
+    /** Enter (or Shift+Enter when `submitOnEnter` is false) — the caller decides what "submit" means. */
+    onSubmit?: () => void;
+    placeholder?: string;
+    /** Accessible name; defaults to the placeholder. */
+    label?: string;
+    /** Enter submits and Shift+Enter breaks the line (the chat convention). `false` swaps them. */
+    submitOnEnter?: boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    className?: string;
+}
+/**
+ * The message box a person types a turn into — the agent panel's composer, a comment box. One unit so
+ * the submit convention is decided ONCE (Enter sends, Shift+Enter breaks) and every block agrees.
+ * Extracted 2026-09-18 from the agent block's raw `<textarea>` — the one part of that view that was
+ * not a chrome unit, which is what stood between it and being a declaration (xeno-apps SPEC §8d).
+ */
+/** 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;
 
 /**
  * The three terminal states: `EmptyState`, `LoadingState`, `ErrorState`.
@@ -1131,6 +1157,7 @@ declare const COMPONENTS: {
     readonly 'chrome/IconButton': typeof IconButton;
     readonly 'chrome/TextButton': typeof TextButton;
     readonly 'chrome/SearchField': typeof SearchField;
+    readonly 'chrome/Composer': typeof Composer;
     readonly 'chrome/SegmentedControl': typeof SegmentedControl;
     readonly 'chrome/Toggle': typeof Toggle;
     readonly 'chrome/FieldGroup': typeof FieldGroup;
@@ -1178,4 +1205,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, 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, 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, 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 };

package/dist/chrome/index.js

@@ -4,54 +4,55 @@ var CLS_PANEL_HEADER = "xeno-panel-header";
 var CLS_PANEL_TITLE = "xeno-panel-title";
 var CLS_PANEL_CONTENT = "xeno-panel-content";
 var CLS_PANEL_CONTENT_NO_HEADER = "xeno-panel-content--no-header";
-var CLS_TOOLBAR = "xeno-toolbar";
-var CLS_TOOLBAR_GROUP = "xeno-toolbar-group";
-var CLS_STATUSBAR = "xeno-statusbar";
-var CLS_DIVIDER = "xeno-divider";
-var CLS_SECTION = "xeno-section";
-var CLS_SECTION_HEADER = "xeno-section-header";
-var CLS_SECTION_TRIGGER = "xeno-section-trigger";
-var CLS_SECTION_CHEVRON = "xeno-section-chevron";
-var CLS_SECTION_TITLE = "xeno-section-title";
-var CLS_SECTION_ACTIONS = "xeno-section-actions";
-var CLS_SECTION_BODY = "xeno-section-body";
-var CLS_ROWLIST = "xeno-rowlist";
-var CLS_ROW = "xeno-row";
-var CLS_ROW_ICON = "xeno-row-icon";
-var CLS_ROW_LABEL = "xeno-row-label";
-var CLS_ROW_META = "xeno-row-meta";
-var CLS_ROW_TRAILING = "xeno-row-trailing";
-var CLS_ICON_BUTTON = "xeno-iconbtn";
-var CLS_TEXT_BUTTON = "xeno-textbtn";
-var CLS_SEARCH = "xeno-search";
-var CLS_SEARCH_INPUT = "xeno-search-input";
-var CLS_SEGMENTED = "xeno-segmented";
-var CLS_SEGMENT = "xeno-segment";
-var CLS_TOGGLE = "xeno-toggle";
-var CLS_TOGGLE_KNOB = "xeno-toggle-knob";
-var CLS_FIELD_GROUP = "xeno-fieldgroup";
-var CLS_FIELD = "xeno-field";
-var CLS_FIELD_LABEL = "xeno-field-label";
-var CLS_FIELD_CONTROL = "xeno-field-control";
-var CLS_FIELD_HINT = "xeno-field-hint";
-var CLS_EMPTY = "xeno-empty";
-var CLS_LOADING = "xeno-loading";
-var CLS_ERROR = "xeno-error";
-var CLS_STATE = "xeno-state";
-var CLS_STATE_ICON = "xeno-state-icon";
-var CLS_STATE_TITLE = "xeno-state-title";
-var CLS_STATE_HINT = "xeno-state-hint";
-var CLS_STATE_PROGRESS = "xeno-state-progress";
-var CLS_BADGE = "xeno-badge";
-var CLS_DOT = "xeno-dot";
-var CLS_ICON_FRAME = "xeno-iconframe";
-var CLS_STAT = "xeno-stat";
-var CLS_STAT_LABEL = "xeno-stat-label";
-var CLS_STAT_VALUE = "xeno-stat-value";
-var CLS_STAT_SUB = "xeno-stat-sub";
-var CLS_BAR = "xeno-bar";
-var CLS_BAR_SEGMENT = "xeno-bar-segment";
-var CLS_SCROLL = "xeno-scroll";
+var CLS_TOOLBAR = "xc-toolbar";
+var CLS_TOOLBAR_GROUP = "xc-toolbar-group";
+var CLS_STATUSBAR = "xc-statusbar";
+var CLS_DIVIDER = "xc-divider";
+var CLS_SECTION = "xc-section";
+var CLS_SECTION_HEADER = "xc-section-header";
+var CLS_SECTION_TRIGGER = "xc-section-trigger";
+var CLS_SECTION_CHEVRON = "xc-section-chevron";
+var CLS_SECTION_TITLE = "xc-section-title";
+var CLS_SECTION_ACTIONS = "xc-section-actions";
+var CLS_SECTION_BODY = "xc-section-body";
+var CLS_ROWLIST = "xc-rowlist";
+var CLS_ROW = "xc-row";
+var CLS_ROW_ICON = "xc-row-icon";
+var CLS_ROW_LABEL = "xc-row-label";
+var CLS_ROW_META = "xc-row-meta";
+var CLS_ROW_TRAILING = "xc-row-trailing";
+var CLS_ICON_BUTTON = "xc-iconbtn";
+var CLS_TEXT_BUTTON = "xc-textbtn";
+var CLS_SEARCH = "xc-search";
+var CLS_SEARCH_INPUT = "xc-search-input";
+var CLS_COMPOSER = "xc-composer";
+var CLS_SEGMENTED = "xc-segmented";
+var CLS_SEGMENT = "xc-segment";
+var CLS_TOGGLE = "xc-toggle";
+var CLS_TOGGLE_KNOB = "xc-toggle-knob";
+var CLS_FIELD_GROUP = "xc-fieldgroup";
+var CLS_FIELD = "xc-field";
+var CLS_FIELD_LABEL = "xc-field-label";
+var CLS_FIELD_CONTROL = "xc-field-control";
+var CLS_FIELD_HINT = "xc-field-hint";
+var CLS_EMPTY = "xc-empty";
+var CLS_LOADING = "xc-loading";
+var CLS_ERROR = "xc-error";
+var CLS_STATE = "xc-state";
+var CLS_STATE_ICON = "xc-state-icon";
+var CLS_STATE_TITLE = "xc-state-title";
+var CLS_STATE_HINT = "xc-state-hint";
+var CLS_STATE_PROGRESS = "xc-state-progress";
+var CLS_BADGE = "xc-badge";
+var CLS_DOT = "xc-dot";
+var CLS_ICON_FRAME = "xc-iconframe";
+var CLS_STAT = "xc-stat";
+var CLS_STAT_LABEL = "xc-stat-label";
+var CLS_STAT_VALUE = "xc-stat-value";
+var CLS_STAT_SUB = "xc-stat-sub";
+var CLS_BAR = "xc-bar";
+var CLS_BAR_SEGMENT = "xc-bar-segment";
+var CLS_SCROLL = "xc-scroll";
 var PANEL_TONES = Object.freeze([
   "neutral",
   "info",
@@ -284,7 +285,7 @@ var PANEL_PRIMITIVES_CSS = `
 
 /* \u2500\u2500\u2500 2. Strips: toolbar, status bar, divider, scroll \u2500\u2500\u2500 */
 
-.xeno-toolbar {
+.xc-toolbar {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.gutter}px;
@@ -298,21 +299,21 @@ var PANEL_PRIMITIVES_CSS = `
   font-size: ${PANEL_METRICS.fontBody}px;
   user-select: none;
 }
-.xeno-toolbar--flush {
+.xc-toolbar--flush {
   border-bottom: none;
 }
-.xeno-toolbar-group {
+.xc-toolbar-group {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
   min-width: 0;
 }
-.xeno-toolbar-group--end {
+.xc-toolbar-group--end {
   margin-left: auto;
   flex: 0 0 auto;
 }
 
-.xeno-statusbar {
+.xc-statusbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -326,39 +327,39 @@ var PANEL_PRIMITIVES_CSS = `
   user-select: none;
 }
 
-.xeno-divider {
+.xc-divider {
   flex: 0 0 auto;
   background: ${BORDER};
   height: 1px;
   width: 100%;
 }
-.xeno-divider--vertical {
+.xc-divider--vertical {
   width: 1px;
   height: 12px;
   align-self: center;
 }
 
-.xeno-scroll {
+.xc-scroll {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
   outline: none;
 }
-.xeno-scroll::-webkit-scrollbar {
+.xc-scroll::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
-.xeno-scroll::-webkit-scrollbar-track {
+.xc-scroll::-webkit-scrollbar-track {
   background: transparent;
 }
-.xeno-scroll::-webkit-scrollbar-thumb {
+.xc-scroll::-webkit-scrollbar-thumb {
   background: #3a3a3d;
   border: 3px solid transparent;
   background-clip: padding-box;
   border-radius: ${PANEL_METRICS.radius}px;
 }
-.xeno-scroll::-webkit-scrollbar-thumb:hover {
+.xc-scroll::-webkit-scrollbar-thumb:hover {
   background: #555555;
   border: 3px solid transparent;
   background-clip: padding-box;
@@ -366,13 +367,13 @@ var PANEL_PRIMITIVES_CSS = `
 
 /* \u2500\u2500\u2500 3. Section \u2500\u2500\u2500 */
 
-.xeno-section {
+.xc-section {
   display: flex;
   flex-direction: column;
   flex: 0 0 auto;
   min-width: 0;
 }
-.xeno-section-header {
+.xc-section-header {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
@@ -382,7 +383,7 @@ var PANEL_PRIMITIVES_CSS = `
   background: ${PANEL_COLORS.wash};
   user-select: none;
 }
-.xeno-section-trigger {
+.xc-section-trigger {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
@@ -398,10 +399,10 @@ var PANEL_PRIMITIVES_CSS = `
   cursor: pointer;
 }
 /* A non-collapsible header renders a <div> with this class, not a disabled button. */
-div.xeno-section-trigger {
+div.xc-section-trigger {
   cursor: default;
 }
-.xeno-section-chevron {
+.xc-section-chevron {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -412,10 +413,10 @@ div.xeno-section-trigger {
   transform: rotate(90deg);
   transition: transform 80ms ease;
 }
-.xeno-section--collapsed .xeno-section-chevron {
+.xc-section--collapsed .xc-section-chevron {
   transform: rotate(0deg);
 }
-.xeno-section-title {
+.xc-section-title {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
@@ -427,39 +428,39 @@ div.xeno-section-trigger {
   text-transform: uppercase;
   color: ${MUTED};
 }
-.xeno-section-actions {
+.xc-section-actions {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
   flex: 0 0 auto;
 }
-.xeno-section-body {
+.xc-section-body {
   padding: 3px 0;
   min-width: 0;
 }
-.xeno-section-body--off {
+.xc-section-body--off {
   opacity: ${PANEL_DISABLED_OPACITY};
   pointer-events: none;
 }
-.xeno-section-body--flush {
+.xc-section-body--flush {
   padding: 0;
 }
-.xeno-section--collapsed .xeno-section-body {
+.xc-section--collapsed .xc-section-body {
   display: none;
 }
 
 /* \u2500\u2500\u2500 4. Rows \u2500\u2500\u2500 */
 
-.xeno-rowlist {
+.xc-rowlist {
   display: flex;
   flex-direction: column;
   min-width: 0;
 }
-.xeno-rowlist--divided .xeno-row {
+.xc-rowlist--divided .xc-row {
   border-bottom: 1px solid ${BORDER};
 }
 
-.xeno-row {
+.xc-row {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
@@ -475,33 +476,33 @@ div.xeno-section-trigger {
   user-select: none;
   transition: background-color 80ms ease;
 }
-.xeno-row--interactive {
+.xc-row--interactive {
   cursor: pointer;
 }
-.xeno-row--interactive:hover {
+.xc-row--interactive:hover {
   background: ${PANEL_COLORS.rowHover};
 }
-.xeno-row--selected {
+.xc-row--selected {
   background: ${PANEL_COLORS.rowSelected};
 }
-.xeno-row--selected:hover {
+.xc-row--selected:hover {
   background: ${PANEL_COLORS.rowSelected};
 }
-.xeno-row--active {
+.xc-row--active {
   box-shadow: inset 0 0 0 1px ${PANEL_COLORS.ring};
 }
-.xeno-row--disabled {
+.xc-row--disabled {
   opacity: ${PANEL_DISABLED_OPACITY};
   cursor: not-allowed;
 }
-.xeno-row--disabled:hover {
+.xc-row--disabled:hover {
   background: transparent;
 }
-.xeno-row:focus-visible {
+.xc-row:focus-visible {
   outline: 1px solid ${PANEL_COLORS.focus};
   outline-offset: -1px;
 }
-.xeno-row-icon {
+.xc-row-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -510,20 +511,20 @@ div.xeno-section-trigger {
   flex: 0 0 auto;
   opacity: 0.8;
 }
-.xeno-row-label {
+.xc-row-label {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.xeno-row-meta {
+.xc-row-meta {
   flex: 0 0 auto;
   font-size: ${PANEL_METRICS.fontLabel}px;
   color: ${MUTED};
   font-variant-numeric: tabular-nums;
 }
-.xeno-row-trailing {
+.xc-row-trailing {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
@@ -533,7 +534,7 @@ div.xeno-section-trigger {
 
 /* \u2500\u2500\u2500 5. Controls \u2500\u2500\u2500 */
 
-.xeno-iconbtn {
+.xc-iconbtn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -547,41 +548,41 @@ div.xeno-section-trigger {
   opacity: 0.8;
   transition: background-color 80ms ease, opacity 80ms ease;
 }
-.xeno-iconbtn--sm {
+.xc-iconbtn--sm {
   width: ${PANEL_METRICS.iconButtonSm}px;
   height: ${PANEL_METRICS.iconButtonSm}px;
 }
-.xeno-iconbtn--md {
+.xc-iconbtn--md {
   width: ${PANEL_METRICS.iconButton}px;
   height: ${PANEL_METRICS.iconButton}px;
 }
-.xeno-iconbtn--sm svg {
+.xc-iconbtn--sm svg {
   width: ${PANEL_METRICS.iconGlyphSm}px;
   height: ${PANEL_METRICS.iconGlyphSm}px;
 }
-.xeno-iconbtn--md svg {
+.xc-iconbtn--md svg {
   width: ${PANEL_METRICS.iconGlyph}px;
   height: ${PANEL_METRICS.iconGlyph}px;
 }
-.xeno-iconbtn:hover {
+.xc-iconbtn:hover {
   background: ${PANEL_COLORS.soft};
   opacity: 1;
 }
-.xeno-iconbtn--active {
+.xc-iconbtn--active {
   background: ${PANEL_COLORS.rowSelected};
   opacity: 1;
 }
-.xeno-iconbtn:focus-visible {
+.xc-iconbtn:focus-visible {
   outline: 1px solid ${PANEL_COLORS.focus};
   outline-offset: 1px;
 }
-.xeno-iconbtn[disabled] {
+.xc-iconbtn[disabled] {
   opacity: ${PANEL_DISABLED_OPACITY};
   cursor: not-allowed;
   background: transparent;
 }
 
-.xeno-textbtn {
+.xc-textbtn {
   flex: 0 0 auto;
   padding: 0;
   border: none;
@@ -593,23 +594,23 @@ div.xeno-section-trigger {
   cursor: pointer;
   transition: color 80ms ease;
 }
-.xeno-textbtn:hover {
+.xc-textbtn:hover {
   color: ${FG};
 }
-.xeno-textbtn--strong {
+.xc-textbtn--strong {
   color: ${FG};
 }
-.xeno-textbtn:focus-visible {
+.xc-textbtn:focus-visible {
   outline: 1px solid ${PANEL_COLORS.focus};
   outline-offset: 1px;
 }
-.xeno-textbtn[disabled] {
+.xc-textbtn[disabled] {
   opacity: ${PANEL_DISABLED_OPACITY};
   cursor: not-allowed;
   color: ${MUTED};
 }
 
-.xeno-search {
+.xc-search {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
@@ -624,20 +625,20 @@ div.xeno-section-trigger {
   color: ${FG};
   transition: border-color 80ms ease;
 }
-.xeno-search:focus-within {
+.xc-search:focus-within {
   border-color: ${PANEL_COLORS.ring};
 }
-.xeno-search--disabled {
+.xc-search--disabled {
   opacity: ${PANEL_DISABLED_OPACITY};
 }
-.xeno-search-glyph {
+.xc-search-glyph {
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
   color: ${MUTED};
 }
-.xeno-search-input {
+.xc-search-input {
   flex: 1 1 auto;
   min-width: 0;
   height: 100%;
@@ -650,10 +651,38 @@ div.xeno-section-trigger {
   outline: none;
   cursor: text;
 }
-.xeno-search-input::placeholder {
+.xc-search-input::placeholder {
   color: ${DIM};
 }
-.xeno-search-clear {
+
+/* \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;
+  width: 100%;
+  min-height: 64px;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  resize: vertical;
+  border: none;
+  border-top: 1px solid ${BORDER};
+  background: transparent;
+  color: ${FG};
+  font: inherit;
+  font-size: ${PANEL_METRICS.fontBody}px;
+  line-height: 1.45;
+  outline: none;
+}
+.xc-composer::placeholder {
+  color: ${DIM};
+}
+.xc-composer:focus-visible {
+  box-shadow: inset 0 0 0 1px ${PANEL_COLORS.focus};
+}
+.xc-composer:disabled {
+  opacity: ${PANEL_DISABLED_OPACITY};
+  cursor: not-allowed;
+}
+.xc-search-clear {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -667,12 +696,12 @@ div.xeno-section-trigger {
   color: ${MUTED};
   cursor: pointer;
 }
-.xeno-search-clear:hover {
+.xc-search-clear:hover {
   color: ${FG};
   background: ${PANEL_COLORS.soft};
 }
 
-.xeno-segmented {
+.xc-segmented {
   display: inline-flex;
   align-items: stretch;
   flex: 0 0 auto;
@@ -682,20 +711,20 @@ div.xeno-section-trigger {
   border-radius: ${PANEL_METRICS.radius}px;
   box-sizing: border-box;
 }
-.xeno-segmented--sm {
+.xc-segmented--sm {
   height: ${PANEL_METRICS.iconButtonSm + 2}px;
 }
-.xeno-segmented--md {
+.xc-segmented--md {
   height: ${CTRL_H};
 }
-.xeno-segmented--stretch {
+.xc-segmented--stretch {
   display: flex;
   width: 100%;
 }
-.xeno-segmented--stretch .xeno-segment {
+.xc-segmented--stretch .xc-segment {
   flex: 1 1 0;
 }
-.xeno-segment {
+.xc-segment {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -712,23 +741,23 @@ div.xeno-section-trigger {
   transition: background-color 80ms ease, color 80ms ease;
   white-space: nowrap;
 }
-.xeno-segment:hover {
+.xc-segment:hover {
   color: ${FG};
 }
-.xeno-segment--checked {
+.xc-segment--checked {
   background: ${PANEL_COLORS.rowSelected};
   color: ${FG};
 }
-.xeno-segment:focus-visible {
+.xc-segment:focus-visible {
   outline: 1px solid ${PANEL_COLORS.focus};
   outline-offset: -1px;
 }
-.xeno-segment[disabled] {
+.xc-segment[disabled] {
   opacity: ${PANEL_DISABLED_OPACITY};
   cursor: not-allowed;
 }
 
-.xeno-toggle {
+.xc-toggle {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -740,18 +769,18 @@ div.xeno-section-trigger {
   cursor: pointer;
   transition: background-color 80ms ease;
 }
-.xeno-toggle--sm {
+.xc-toggle--sm {
   width: 16px;
   height: 10px;
 }
-.xeno-toggle--md {
+.xc-toggle--md {
   width: 22px;
   height: 12px;
 }
-.xeno-toggle--on {
+.xc-toggle--on {
   background: rgba(255, 255, 255, 0.25);
 }
-.xeno-toggle-knob {
+.xc-toggle-knob {
   position: absolute;
   top: 2px;
   left: 2px;
@@ -759,45 +788,45 @@ div.xeno-section-trigger {
   border-radius: 1px;
   transition: transform 80ms ease, border-radius 80ms ease, background-color 80ms ease;
 }
-.xeno-toggle--sm .xeno-toggle-knob {
+.xc-toggle--sm .xc-toggle-knob {
   width: 6px;
   height: 6px;
 }
-.xeno-toggle--md .xeno-toggle-knob {
+.xc-toggle--md .xc-toggle-knob {
   width: 8px;
   height: 8px;
 }
-.xeno-toggle--on .xeno-toggle-knob {
+.xc-toggle--on .xc-toggle-knob {
   background: ${FG};
   border-radius: ${PANEL_METRICS.radius}px;
 }
-.xeno-toggle--sm.xeno-toggle--on .xeno-toggle-knob {
+.xc-toggle--sm.xc-toggle--on .xc-toggle-knob {
   transform: translateX(6px);
 }
-.xeno-toggle--md.xeno-toggle--on .xeno-toggle-knob {
+.xc-toggle--md.xc-toggle--on .xc-toggle-knob {
   transform: translateX(10px);
 }
-.xeno-toggle:focus-visible {
+.xc-toggle:focus-visible {
   outline: 1px solid ${PANEL_COLORS.focus};
   outline-offset: 1px;
 }
 /* Both layers, per DESIGN_SYSTEM \xA73.1 "Cursors \u2014 two layers, both required": the modifier class
    for callers that style a wrapper, and the attribute selector for the real disabled control. */
-.xeno-toggle--disabled,
-.xeno-toggle[disabled] {
+.xc-toggle--disabled,
+.xc-toggle[disabled] {
   opacity: ${PANEL_DISABLED_OPACITY};
   cursor: not-allowed;
 }
 
 /* \u2500\u2500\u2500 6. Fields \u2500\u2500\u2500 */
 
-.xeno-fieldgroup {
+.xc-fieldgroup {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
 }
-.xeno-field {
+.xc-field {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
@@ -807,7 +836,7 @@ div.xeno-section-trigger {
   box-sizing: border-box;
   min-width: 0;
 }
-.xeno-field-label {
+.xc-field-label {
   flex: 0 0 auto;
   width: ${LABEL_W};
   overflow: hidden;
@@ -818,7 +847,7 @@ div.xeno-section-trigger {
   user-select: none;
   cursor: default;
 }
-.xeno-field-control {
+.xc-field-control {
   display: flex;
   align-items: center;
   gap: ${PANEL_METRICS.rowGap}px;
@@ -826,29 +855,29 @@ div.xeno-section-trigger {
   min-width: 0;
   justify-content: flex-end;
 }
-.xeno-field-hint {
+.xc-field-hint {
   flex: 1 1 100%;
   padding-left: ${LABEL_W};
   font-size: ${PANEL_METRICS.fontLabel}px;
   color: ${DIM};
 }
-.xeno-field--stacked {
+.xc-field--stacked {
   flex-direction: column;
   align-items: stretch;
 }
-.xeno-field--stacked .xeno-field-label {
+.xc-field--stacked .xc-field-label {
   width: auto;
 }
-.xeno-field--stacked .xeno-field-control {
+.xc-field--stacked .xc-field-control {
   justify-content: flex-start;
 }
-.xeno-field--stacked .xeno-field-hint {
+.xc-field--stacked .xc-field-hint {
   padding-left: 0;
 }
 
 /* \u2500\u2500\u2500 7. States \u2500\u2500\u2500 */
 
-.xeno-state {
+.xc-state {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -858,7 +887,7 @@ div.xeno-section-trigger {
   text-align: center;
   min-width: 0;
 }
-.xeno-state-icon {
+.xc-state-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -868,28 +897,28 @@ div.xeno-section-trigger {
   border-radius: ${PANEL_METRICS.radius}px;
   color: ${MUTED};
 }
-.xeno-empty,
-.xeno-loading {
+.xc-empty,
+.xc-loading {
   user-select: none;
 }
-.xeno-state-title {
+.xc-state-title {
   font-size: ${PANEL_METRICS.fontMeta}px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   opacity: 0.4;
   color: ${FG};
 }
-.xeno-state-hint {
+.xc-state-hint {
   max-width: 28ch;
   font-size: ${PANEL_METRICS.fontMeta}px;
   line-height: 1.45;
   color: ${MUTED};
 }
-.xeno-error .xeno-state-title {
+.xc-error .xc-state-title {
   opacity: 1;
   color: ${PANEL_COLORS.errorText};
 }
-.xeno-state-progress {
+.xc-state-progress {
   position: relative;
   width: 64px;
   height: 2px;
@@ -897,7 +926,7 @@ div.xeno-section-trigger {
   background: ${PANEL_COLORS.soft};
   overflow: hidden;
 }
-.xeno-state-progress::after {
+.xc-state-progress::after {
   content: '';
   position: absolute;
   top: 0;
@@ -921,7 +950,7 @@ div.xeno-section-trigger {
 
 /* \u2500\u2500\u2500 8. Indicators \u2500\u2500\u2500 */
 
-.xeno-badge {
+.xc-badge {
   display: inline-flex;
   align-items: center;
   gap: 3px;
@@ -937,18 +966,18 @@ div.xeno-section-trigger {
   white-space: nowrap;
   user-select: none;
 }
-.xeno-badge--md {
+.xc-badge--md {
   height: ${PANEL_METRICS.badgeHeightMd}px;
   line-height: ${PANEL_METRICS.badgeHeightMd}px;
   padding: 0 5px;
   font-size: ${PANEL_METRICS.fontMeta}px;
 }
-.xeno-badge--info { color: ${PANEL_COLORS.infoText}; }
-.xeno-badge--success { color: ${PANEL_COLORS.successText}; }
-.xeno-badge--warning { color: ${PANEL_COLORS.warningText}; }
-.xeno-badge--error { color: ${PANEL_COLORS.errorText}; }
+.xc-badge--info { color: ${PANEL_COLORS.infoText}; }
+.xc-badge--success { color: ${PANEL_COLORS.successText}; }
+.xc-badge--warning { color: ${PANEL_COLORS.warningText}; }
+.xc-badge--error { color: ${PANEL_COLORS.errorText}; }
 
-.xeno-dot {
+.xc-dot {
   display: inline-block;
   flex: 0 0 auto;
   width: ${PANEL_METRICS.dotSize}px;
@@ -956,12 +985,12 @@ div.xeno-section-trigger {
   border-radius: 1px;
   background: ${MUTED};
 }
-.xeno-dot--info { background: ${PANEL_COLORS.infoText}; }
-.xeno-dot--success { background: ${PANEL_COLORS.successText}; }
-.xeno-dot--warning { background: ${PANEL_COLORS.warningText}; }
-.xeno-dot--error { background: ${PANEL_COLORS.error}; }
+.xc-dot--info { background: ${PANEL_COLORS.infoText}; }
+.xc-dot--success { background: ${PANEL_COLORS.successText}; }
+.xc-dot--warning { background: ${PANEL_COLORS.warningText}; }
+.xc-dot--error { background: ${PANEL_COLORS.error}; }
 
-.xeno-iconframe {
+.xc-iconframe {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -974,7 +1003,7 @@ div.xeno-section-trigger {
 
 /* \u2500\u2500\u2500 9. Data tiles \u2500\u2500\u2500 */
 
-.xeno-stat {
+.xc-stat {
   display: flex;
   flex-direction: column;
   gap: 3px;
@@ -984,7 +1013,7 @@ div.xeno-section-trigger {
   border-radius: ${PANEL_METRICS.radius}px;
   background: rgba(0, 0, 0, 0.2);
 }
-.xeno-stat-label {
+.xc-stat-label {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -994,7 +1023,7 @@ div.xeno-section-trigger {
   letter-spacing: 0.06em;
   color: ${MUTED};
 }
-.xeno-stat-value {
+.xc-stat-value {
   font-size: 16px;
   font-weight: 600;
   line-height: 1.1;
@@ -1004,13 +1033,13 @@ div.xeno-section-trigger {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.xeno-stat-sub {
+.xc-stat-sub {
   font-size: ${PANEL_METRICS.fontLabel}px;
   color: ${DIM};
   font-variant-numeric: tabular-nums;
 }
 
-.xeno-bar {
+.xc-bar {
   display: flex;
   width: 100%;
   height: 6px;
@@ -1018,7 +1047,7 @@ div.xeno-section-trigger {
   background: rgba(255, 255, 255, 0.04);
   overflow: hidden;
 }
-.xeno-bar-segment {
+.xc-bar-segment {
   height: 100%;
   min-width: 0;
 }
@@ -1026,16 +1055,16 @@ div.xeno-section-trigger {
 /* \u2500\u2500\u2500 10. Reduced motion (DESIGN_SYSTEM \xA711) \u2500\u2500\u2500 */
 
 @media (prefers-reduced-motion: reduce) {
-  .xeno-row,
-  .xeno-iconbtn,
-  .xeno-segment,
-  .xeno-toggle,
-  .xeno-toggle-knob,
-  .xeno-search,
-  .xeno-section-chevron {
+  .xc-row,
+  .xc-iconbtn,
+  .xc-segment,
+  .xc-toggle,
+  .xc-toggle-knob,
+  .xc-search,
+  .xc-section-chevron {
     transition: none;
   }
-  .xeno-state-progress::after,
+  .xc-state-progress::after,
   .xeno-spin {
     animation: none;
   }
@@ -1204,7 +1233,7 @@ function IconButton({
       "aria-pressed": active,
       disabled,
       onClick,
-      className: iconButtonClass({ active, disabled }, cx(`${"xeno-iconbtn"}--${size}`, className)),
+      className: iconButtonClass({ active, disabled }, cx(`${"xc-iconbtn"}--${size}`, className)),
       children: icon
     }
   );
@@ -1392,6 +1421,42 @@ function Field({
     hint != null ? /* @__PURE__ */ jsx2("div", { className: CLS_FIELD_HINT, id: hintId, children: hint }) : null
   ] });
 }
+function composerWantsSubmit(key, shiftKey, submitOnEnter = true) {
+  if (key !== "Enter") return false;
+  return submitOnEnter ? !shiftKey : shiftKey;
+}
+function Composer({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Type a message\u2026",
+  label,
+  submitOnEnter = true,
+  disabled,
+  autoFocus,
+  className
+}) {
+  usePanelPrimitives();
+  const handleKeyDown = (e) => {
+    if (!onSubmit || !composerWantsSubmit(e.key, e.shiftKey, submitOnEnter)) return;
+    e.preventDefault();
+    onSubmit();
+  };
+  return /* @__PURE__ */ jsx2(
+    "textarea",
+    {
+      className: cx(CLS_COMPOSER, className),
+      value,
+      placeholder,
+      "aria-label": label ?? placeholder,
+      disabled,
+      autoFocus,
+      spellCheck: true,
+      onChange: (e) => onChange(e.target.value),
+      onKeyDown: handleKeyDown
+    }
+  );
+}
 
 // src/chrome/section.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -1590,7 +1655,7 @@ function Badge({
   className
 }) {
   usePanelPrimitives();
-  return /* @__PURE__ */ jsx6("span", { title, className: badgeClass(tone, cx(size === "md" && "xeno-badge--md", className)), children });
+  return /* @__PURE__ */ jsx6("span", { title, className: badgeClass(tone, cx(size === "md" && "xc-badge--md", className)), children });
 }
 function StatusDot({ tone = "neutral", label, className }) {
   usePanelPrimitives();
@@ -1714,6 +1779,7 @@ var COMPONENTS = {
   "chrome/IconButton": IconButton,
   "chrome/TextButton": TextButton,
   "chrome/SearchField": SearchField,
+  "chrome/Composer": Composer,
   "chrome/SegmentedControl": SegmentedControl,
   "chrome/Toggle": Toggle,
   "chrome/FieldGroup": FieldGroup,
@@ -1761,6 +1827,9 @@ function gallery() {
   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" }));
   form("SearchField", "filled", () => /* @__PURE__ */ jsx7(SearchField, { value: "render", onChange: noop, placeholder: "Filter rows\u2026", label: "Filter" }));
+  form("Composer", "empty", () => /* @__PURE__ */ jsx7(Composer, { value: "", onChange: noop, onSubmit: noop, placeholder: "Ask the agent\u2026" }));
+  form("Composer", "draft", () => /* @__PURE__ */ jsx7(Composer, { value: "Summarise the last run and list the failing steps.", onChange: noop, onSubmit: noop }));
+  form("Composer", "disabled", () => /* @__PURE__ */ jsx7(Composer, { value: "", onChange: noop, placeholder: "Not connected", disabled: true }));
   form("SegmentedControl", "first", () => /* @__PURE__ */ jsx7(SegmentedControl, { options: SEGMENTS, value: "all", onChange: noop, label: "Level" }));
   form("SegmentedControl", "last", () => /* @__PURE__ */ jsx7(SegmentedControl, { options: SEGMENTS, value: "warnings", onChange: noop, label: "Level" }));
   form("Toggle", "off", () => /* @__PURE__ */ jsx7(Toggle, { checked: false, onChange: noop, label: "Follow output" }));
@@ -1878,6 +1947,7 @@ export {
   COMPONENTS,
   ChevronGlyph,
   ClearGlyph,
+  Composer,
   Divider,
   EmptyState,
   ErrorState,
@@ -1911,6 +1981,7 @@ export {
   Toolbar,
   ToolbarGroup,
   badgeClass,
+  composerWantsSubmit,
   cx,
   dotClass,
   ensurePanelPrimitivesInjected,

package/package.json

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