@xenosystem/components 0.9.0 → 0.9.2

package/dist/catalog.json

@@ -665,10 +665,72 @@
             }
           ]
         },
+        {
+          "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",
-          "doc": "The canonical standalone panel frame — header bar + content well, separated by the panel gap.\r\n\n@example\r\n```tsx\r\n<PanelFrame title=\"Layers\" actions={<IconButton icon={<PlusIcon />} label=\"Add layer\" />}>\r\n  <RowList>…</RowList>\r\n</PanelFrame>\r\n```",
+          "doc": "The canonical standalone panel frame — header bar + content well, separated by the panel gap.\n\n@example\n```tsx\n<PanelFrame title=\"Layers\" actions={<IconButton icon={<PlusIcon />} label=\"Add layer\" />}>\n  <RowList>…</RowList>\n</PanelFrame>\n```",
           "props": "PanelFrameProps",
           "propList": [
             {
@@ -712,7 +774,7 @@
         {
           "name": "Toolbar",
           "file": "frame.tsx",
-          "doc": "A dense horizontal control strip. Height matches the panel header so a toolbar stacked under a\r\nframe header reads as one continuous chrome band.\r\n\n@example\r\n```tsx\r\n<Toolbar left={<SearchField value={q} onChange={setQ} />} right={<IconButton … />} />\r\n```",
+          "doc": "A dense horizontal control strip. Height matches the panel header so a toolbar stacked under a\nframe header reads as one continuous chrome band.\n\n@example\n```tsx\n<Toolbar left={<SearchField value={q} onChange={setQ} />} right={<IconButton … />} />\n```",
           "props": "ToolbarProps",
           "propList": [
             {
@@ -796,7 +858,7 @@
         {
           "name": "ScrollArea",
           "file": "frame.tsx",
-          "doc": "A flex-filling scroll container with the canonical thin rectangular thumb and an unbroken\r\nheight chain (`flex: 1 1 0; min-height: 0`) — the shape DESIGN_SYSTEM §3.1 requires so panels\r\nnever reach for `max-height: calc(100vh - N)`.",
+          "doc": "A flex-filling scroll container with the canonical thin rectangular thumb and an unbroken\nheight chain (`flex: 1 1 0; min-height: 0`) — the shape DESIGN_SYSTEM §3.1 requires so panels\nnever reach for `max-height: calc(100vh - N)`.",
           "props": "ScrollAreaProps",
           "propList": [
             {
@@ -813,10 +875,30 @@
             }
           ]
         },
+        {
+          "name": "Column",
+          "file": "frame.tsx",
+          "doc": "The panel's vertical stack — a toolbar, a flexing body, a status bar — filling the panel with an\nunbroken height chain (`height: 100%; min-height: 0`). Every block wrote `<div style={{ display:\n'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>` by hand; as a unit it is the root\na declaration can name.",
+          "props": "ColumnProps",
+          "propList": [
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "optional": true,
+              "doc": ""
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "optional": true,
+              "doc": ""
+            }
+          ]
+        },
         {
           "name": "Badge",
           "file": "indicators.tsx",
-          "doc": "A small rectangular chip. Never interactive — `DESIGN_SYSTEM.md` §7: \"If a badge needs to be\nclickable, it's a ghost button, not a badge.\"",
+          "doc": "A small rectangular chip. Never interactive — `DESIGN_SYSTEM.md` §7: \"If a badge needs to be\r\nclickable, it's a ghost button, not a badge.\"",
           "props": "BadgeProps",
           "propList": [
             {
@@ -880,7 +962,7 @@
         {
           "name": "StatusBadge",
           "file": "indicators.tsx",
-          "doc": "Dot + label. Color is never the sole indicator (`DESIGN_SYSTEM.md` §11) — the word carries the\nstate and the dot reinforces it.",
+          "doc": "Dot + label. Color is never the sole indicator (`DESIGN_SYSTEM.md` §11) — the word carries the\r\nstate and the dot reinforces it.",
           "props": "StatusBadgeProps",
           "propList": [
             {
@@ -932,7 +1014,7 @@
         {
           "name": "StatTile",
           "file": "indicators.tsx",
-          "doc": "Label + big value tile — the KPI unit of the future `metrics` panel.\n\n@example\n```tsx\n<StatTile label=\"p95 frame\" value=\"14.2 ms\" sub=\"last 60 s\" />\n```",
+          "doc": "Label + big value tile — the KPI unit of the future `metrics` panel.\r\n\n@example\r\n```tsx\r\n<StatTile label=\"p95 frame\" value=\"14.2 ms\" sub=\"last 60 s\" />\r\n```",
           "props": "StatTileProps",
           "propList": [
             {
@@ -976,7 +1058,7 @@
         {
           "name": "ProportionBar",
           "file": "indicators.tsx",
-          "doc": "A horizontal stacked bar — the monochromatic replacement for a pie/donut chart.\n\nSlices are separated by white ALPHA, not hue: `DESIGN_SYSTEM.md` §13 forbids chromatic color\noutside status contexts, and a categorical palette is exactly that. When no `opacity` is supplied\nthe bar ramps evenly from bright to dim across the slices.",
+          "doc": "A horizontal stacked bar — the monochromatic replacement for a pie/donut chart.\r\n\nSlices are separated by white ALPHA, not hue: `DESIGN_SYSTEM.md` §13 forbids chromatic color\r\noutside status contexts, and a categorical palette is exactly that. When no `opacity` is supplied\r\nthe bar ramps evenly from bright to dim across the slices.",
           "props": "ProportionBarProps",
           "propList": [
             {
@@ -1002,7 +1084,7 @@
         {
           "name": "StatusBar",
           "file": "indicators.tsx",
-          "doc": "The panel footer strip. Census: layers and history already ship a byte-identical one\n(`2px 6px`, 9px, muted, header surface, space-between) — this is that, once.",
+          "doc": "The panel footer strip. Census: layers and history already ship a byte-identical one\r\n(`2px 6px`, 9px, muted, header surface, space-between) — this is that, once.",
           "props": "StatusBarProps",
           "propList": [
             {
@@ -1034,7 +1116,7 @@
         {
           "name": "Sparkline",
           "file": "indicators.tsx",
-          "doc": "A monochrome trend line.\n\nLifted from `xeno-post`'s `ui/kit.tsx`, which is the only sparkline implementation in the\necosystem. It lives here rather than in a panel because three consumers want it — `metrics` (which\nshipped a local copy first), `chart`, and the future `runs` panel — and three copies of a mark is\nhow a design system stops being one.\n\nDistinct from {@link ProportionBar}: a line is a different MARK, not a variant. The two are not\ninterchangeable and neither is a special case of the other.\n\nDegenerate inputs render an empty well rather than throwing: a series of one point has no slope,\nand a flat series has no range to normalize against (it draws a centred straight line).",
+          "doc": "A monochrome trend line.\r\n\nLifted from `xeno-post`'s `ui/kit.tsx`, which is the only sparkline implementation in the\r\necosystem. It lives here rather than in a panel because three consumers want it — `metrics` (which\r\nshipped a local copy first), `chart`, and the future `runs` panel — and three copies of a mark is\r\nhow a design system stops being one.\r\n\nDistinct from {@link ProportionBar}: a line is a different MARK, not a variant. The two are not\r\ninterchangeable and neither is a special case of the other.\r\n\nDegenerate inputs render an empty well rather than throwing: a series of one point has no slope,\r\nand a flat series has no range to normalize against (it draws a centred straight line).",
           "props": "SparklineProps",
           "propList": [
             {

package/dist/chrome/index.d.ts

@@ -93,6 +93,18 @@ interface ScrollAreaProps {
  * never reach for `max-height: calc(100vh - N)`.
  */
 declare function ScrollArea({ children, className }: ScrollAreaProps): ReactNode;
+/** Props for {@link Column}. */
+interface ColumnProps {
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * The panel's vertical stack — a toolbar, a flexing body, a status bar — filling the panel with an
+ * unbroken height chain (`height: 100%; min-height: 0`). Every block wrote `<div style={{ display:
+ * 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>` by hand; as a unit it is the root
+ * a declaration can name.
+ */
+declare function Column({ children, className }: ColumnProps): ReactNode;
 
 /**
  * `Section` — the collapsible titled group.
@@ -652,6 +664,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 +1169,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;
@@ -1143,6 +1182,7 @@ declare const COMPONENTS: {
     readonly 'chrome/ToolbarGroup': typeof ToolbarGroup;
     readonly 'chrome/Divider': typeof Divider;
     readonly 'chrome/ScrollArea': typeof ScrollArea;
+    readonly 'chrome/Column': typeof Column;
     readonly 'chrome/Badge': typeof Badge;
     readonly 'chrome/StatusDot': typeof StatusDot;
     readonly 'chrome/StatusBadge': typeof StatusBadge;
@@ -1178,4 +1218,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, 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 };

package/dist/chrome/index.js

@@ -25,6 +25,7 @@ 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";
@@ -52,6 +53,7 @@ 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 CLS_COLUMN = "xc-column";
 var PANEL_TONES = Object.freeze([
   "neutral",
   "info",
@@ -653,6 +655,42 @@ div.xc-section-trigger {
 .xc-search-input::placeholder {
   color: ${DIM};
 }
+
+/* \u2500\u2500 Column \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-column {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+/* \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;
@@ -1121,6 +1159,10 @@ function ScrollArea({ children, className }) {
   usePanelPrimitives();
   return /* @__PURE__ */ jsx("div", { className: cx(CLS_SCROLL, className), children });
 }
+function Column({ children, className }) {
+  usePanelPrimitives();
+  return /* @__PURE__ */ jsx("div", { className: cx(CLS_COLUMN, className), children });
+}
 
 // src/chrome/section.tsx
 import { useState as useState3 } from "react";
@@ -1392,6 +1434,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";
@@ -1714,6 +1792,7 @@ var COMPONENTS = {
   "chrome/IconButton": IconButton,
   "chrome/TextButton": TextButton,
   "chrome/SearchField": SearchField,
+  "chrome/Composer": Composer,
   "chrome/SegmentedControl": SegmentedControl,
   "chrome/Toggle": Toggle,
   "chrome/FieldGroup": FieldGroup,
@@ -1726,6 +1805,7 @@ var COMPONENTS = {
   "chrome/ToolbarGroup": ToolbarGroup,
   "chrome/Divider": Divider,
   "chrome/ScrollArea": ScrollArea,
+  "chrome/Column": Column,
   "chrome/Badge": Badge,
   "chrome/StatusDot": StatusDot,
   "chrome/StatusBadge": StatusBadge,
@@ -1761,6 +1841,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" }));
@@ -1788,6 +1871,11 @@ function gallery() {
     /* @__PURE__ */ jsx7(Divider, { vertical: true }),
     /* @__PURE__ */ jsx7("span", { children: "b" })
   ] }));
+  door("Column", "default", () => /* @__PURE__ */ jsxs7(Column, { children: [
+    /* @__PURE__ */ jsx7(Toolbar, { left: /* @__PURE__ */ jsx7(TextButton, { onClick: noop, children: "Action" }) }),
+    /* @__PURE__ */ jsx7(ScrollArea, { children: /* @__PURE__ */ jsx7("p", { style: { margin: 8 }, children: "body" }) }),
+    /* @__PURE__ */ jsx7(StatusBar, { left: "status" })
+  ] }));
   door("ScrollArea", "default", () => /* @__PURE__ */ jsx7(ScrollArea, { children: Array.from({ length: 30 }, (_, i) => /* @__PURE__ */ jsxs7("p", { style: { margin: 4 }, children: [
     "line ",
     i + 1
@@ -1878,6 +1966,8 @@ export {
   COMPONENTS,
   ChevronGlyph,
   ClearGlyph,
+  Column,
+  Composer,
   Divider,
   EmptyState,
   ErrorState,
@@ -1911,6 +2001,7 @@ export {
   Toolbar,
   ToolbarGroup,
   badgeClass,
+  composerWantsSubmit,
   cx,
   dotClass,
   ensurePanelPrimitivesInjected,

package/package.json

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