@xenosystem/components 0.9.0 → 0.9.1

package/dist/catalog.json

@@ -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",
@@ -816,7 +878,7 @@
         {
           "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 +942,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 +994,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 +1038,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 +1064,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 +1096,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

@@ -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

@@ -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";
@@ -653,6 +654,34 @@ div.xc-section-trigger {
 .xc-search-input::placeholder {
   color: ${DIM};
 }
+
+/* \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;
@@ -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";
@@ -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.9.0",
+  "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",