banhaten 0.4.0 → 0.5.0

package/docs/design-system/components/accordion.md

@@ -1,55 +1,55 @@
-# Accordion
-
-Accordion is the disclosure primitive for grouped details, settings, FAQs, and compact content sections. It is backed by Radix Accordion and supports single or multiple expansion, size variants, visual treatments, animation, and RTL-safe copy.
-
-## API
-
-```tsx
-<Accordion type="single" collapsible>
-  <AccordionItem value="billing">
-    <AccordionTrigger>Billing</AccordionTrigger>
-    <AccordionContent>Invoice and payment details.</AccordionContent>
-  </AccordionItem>
-</Accordion>
-```
-
-| Prop | Values | Default |
-| --- | --- | --- |
-| `variant` | `default`, `bordered`, `cards`, `soft` | `default` |
-| `size` | `sm`, `default`, `lg` | `default` |
-| `type` | Radix `single`, `multiple` | required |
-| `collapsible` | `boolean` | Radix default |
-
-## Token Contract
-
-Accordion uses Banhaten spacing, border, radius, content, interactive, typography, and animation tokens. Avoid raw colors or pixel values in local variants.
-
-## RTL
-
-Accordion inherits direction from its parent. Triggers and content use logical spacing and `text-start`; text labels use `dir="auto"` where the component renders string copy.
-
-## Accessibility
-
-Radix provides button semantics, `aria-expanded`, roving state, and keyboard behavior. Keep trigger content concise and do not put nested interactive controls inside `AccordionTrigger`.
-
-## Install
-
-```bash
-npx banhaten add accordion
-```
-
-## Examples
-
-Primary registry example: `examples/accordion-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs accordion` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `textAlignment`: Uses text-start and dir="auto" so Arabic and English copy align and punctuate naturally.
-- `spacing`: Uses gap and logical inherited direction rather than physical left/right spacing.
-
+# Accordion
+
+Accordion is the disclosure primitive for grouped details, settings, FAQs, and compact content sections. It is backed by Radix Accordion and supports single or multiple expansion, size variants, visual treatments, animation, and RTL-safe copy.
+
+## API
+
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="billing">
+    <AccordionTrigger>Billing</AccordionTrigger>
+    <AccordionContent>Invoice and payment details.</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `variant` | `default`, `bordered`, `cards`, `soft` | `default` |
+| `size` | `sm`, `default`, `lg` | `default` |
+| `type` | Radix `single`, `multiple` | required |
+| `collapsible` | `boolean` | Radix default |
+
+## Token Contract
+
+Accordion uses Banhaten spacing, border, radius, content, interactive, typography, and animation tokens. Avoid raw colors or pixel values in local variants.
+
+## RTL
+
+Accordion inherits direction from its parent. Triggers and content use logical spacing and `text-start`; text labels use `dir="auto"` where the component renders string copy.
+
+## Accessibility
+
+Radix provides button semantics, `aria-expanded`, roving state, and keyboard behavior. Keep trigger content concise and do not put nested interactive controls inside `AccordionTrigger`.
+
+## Install
+
+```bash
+npx banhaten add accordion
+```
+
+## Examples
+
+Primary registry example: `examples/accordion-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs accordion` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `textAlignment`: Uses text-start and dir="auto" so Arabic and English copy align and punctuate naturally.
+- `spacing`: Uses gap and logical inherited direction rather than physical left/right spacing.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -62,6 +62,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` |
 | `registryDependencies` | None |
 | `sizes` | `sm`, `default`, `lg` |
-| `tokens` | `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-duration-accordion`, `--bh-duration-default`, `--bh-easing-out`, `--bh-opacity-50`, `--bh-radius-md-6`, `--bh-radius-xs-2`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-line-height`, `--bh-text-body-sm-medium-font-size`, `--bh-text-body-sm-medium-font-weight`, `--bh-text-body-sm-medium-letter-spacing`, `--bh-text-body-sm-medium-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--bh-text-body-xs-medium-font-size`, `--bh-text-body-xs-medium-line-height`, `--bh-text-body-xs-regular-font-size`, `--bh-text-body-xs-regular-line-height`, `--shadow-accordion-item`, `--shadow-button-focus` |
+| `tokens` | `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-duration-accordion`, `--bh-duration-default`, `--bh-easing-out`, `--bh-opacity-50`, `--bh-radius-md-6`, `--bh-radius-xs-2`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-line-height`, `--bh-text-body-sm-medium-font-size`, `--bh-text-body-sm-medium-font-weight`, `--bh-text-body-sm-medium-letter-spacing`, `--bh-text-body-sm-medium-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--bh-text-body-xs-medium-font-size`, `--bh-text-body-xs-medium-line-height`, `--bh-text-body-xs-regular-font-size`, `--bh-text-body-xs-regular-line-height`, `--elevation-accordion-item`, `--elevation-button-focus` |
 | `variants` | `default`, `bordered`, `cards`, `soft` |
 <!-- registry-contract:end -->

package/docs/design-system/components/activity-feed.md

@@ -1,96 +1,96 @@
-# Activity Feed
-
-`ActivityFeed` renders a vertical timeline of activity items with avatars, status dots, captions or slot content, timestamps, and action buttons.
-
-Figma reference: `Design system 3.0 Copy / ActivityFeed`, component set node `587:19445`.
-
-## Variants
-
-The Figma component defines these top-level variants:
-
-| Direction | Node |
-| --- | --- |
-| LTR | `587:19381` |
-| RTL | `587:19711` |
-
-`ActivityFeedItem` also supports `caption` and `slot` item types through the `type` prop.
-
-## API
-
-```tsx
-<ActivityFeed
-  dir="ltr"
-  items={[
-    {
-      label: "Label",
-      supportText: "Support Text",
-      link: "#Link",
-      caption: "Caption text",
-      timestamp: "Mar 15. 2050",
-      type: "caption",
-    },
-  ]}
-/>
-```
-
-| Prop | Values | Default |
-| --- | --- | --- |
-| `dir` | `ltr`, `rtl` | `ltr` |
-| `items` | `ActivityFeedItemProps[]` | ten caption items |
-| `avatarSrc` | `string` | local Figma avatar asset |
-| `type` | `caption`, `slot` | `caption` |
-| `hasStatus` | `boolean` | `true` |
-| `hasActionButtons` | `boolean` | `true` |
-| `hasTwoActionButtons` | `boolean` | `true` |
-| `showLine` | `boolean` | `true` |
-| `showPaddingBottom` | `boolean` | `true` |
-
-## Token Contract
-
-The component consumes Banhaten semantic tokens and component aliases. Do not hard-code Figma fallback literals in component source; promote any Figma value into its owned `tokens/source/` fragment as a `--bh-*` token or alias first.
-
-- Backgrounds: `--bh-bg-raised`, `--bh-bg-success-default`
-- Borders: `--bh-border-default`, `--bh-border-subtle`
-- Content: `--bh-content-default`, `--bh-content-link`, `--bh-content-on-brand`, `--bh-content-subtle`
-- Interactive: `--bh-interactive-brand-default`, `--bh-interactive-secondary-default`
-- Shape: `--bh-radius-full`, `--bh-radius-sm-4`, `--bh-control-default`
-- Space: `--bh-space-xxs-2`, `--bh-space-xs-4`, `--bh-space-md-8`, `--bh-space-lg-10`, `--bh-space-xl-12`
-
-## Pixel Rules
-
-- Feed width is `600px`.
-- Items use a `12px` gap between the indicator rail and content.
-- Avatar is `32px` square with a full radius and subtle border.
-- The status dot renders in a `16px` box with a `6px` success fill.
-- Body text is Inter `15px / 24px`; timestamps are `14px / 20px`.
-- Captions use `12px` padding, subtle border, white raised fill, and `4px` radius.
-- Slot content is `76px` high with purple dashed border and subtle purple fill.
-- Actions use `8px` top padding, `8px` button gap, and `36px` tall buttons.
-- The repeated-item default uses a `22px` decorative bottom spacer so ten items fit the `2000px` Figma feed frame.
-- RTL mirrors the avatar rail to the right and right-aligns text content.
-
-## Accessibility
-
-- The feed uses a labelled `section`; provide `ariaLabel` when the surrounding context is not explicit.
-- Status dots and connector lines are decorative. Use item copy or parent-level announcements for meaningful state.
-- Action buttons are real `button` or `a` elements and support `ariaLabel`, `disabled`, `href`, and `onClick`.
-
-## Install
-
-```bash
-npx banhaten add activity-feed
-```
-
-## Examples
-
-Primary registry example: `examples/expanded/activity-feed-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs activity-feed` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-This component has no special RTL contract beyond inherited document direction and logical spacing.
-
+# Activity Feed
+
+`ActivityFeed` renders a vertical timeline of activity items with avatars, status dots, captions or slot content, timestamps, and action buttons.
+
+Figma reference: `Design system 3.0 Copy / ActivityFeed`, component set node `587:19445`.
+
+## Variants
+
+The Figma component defines these top-level variants:
+
+| Direction | Node |
+| --- | --- |
+| LTR | `587:19381` |
+| RTL | `587:19711` |
+
+`ActivityFeedItem` also supports `caption` and `slot` item types through the `type` prop.
+
+## API
+
+```tsx
+<ActivityFeed
+  dir="ltr"
+  items={[
+    {
+      label: "Label",
+      supportText: "Support Text",
+      link: "#Link",
+      caption: "Caption text",
+      timestamp: "Mar 15. 2050",
+      type: "caption",
+    },
+  ]}
+/>
+```
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `dir` | `ltr`, `rtl` | `ltr` |
+| `items` | `ActivityFeedItemProps[]` | ten caption items |
+| `avatarSrc` | `string` | local Figma avatar asset |
+| `type` | `caption`, `slot` | `caption` |
+| `hasStatus` | `boolean` | `true` |
+| `hasActionButtons` | `boolean` | `true` |
+| `hasTwoActionButtons` | `boolean` | `true` |
+| `showLine` | `boolean` | `true` |
+| `showPaddingBottom` | `boolean` | `true` |
+
+## Token Contract
+
+The component consumes Banhaten semantic tokens and component aliases. Do not hard-code Figma fallback literals in component source; promote any Figma value into its owned `tokens/source/` fragment as a `--bh-*` token or alias first.
+
+- Backgrounds: `--bh-bg-raised`, `--bh-bg-success-default`
+- Borders: `--bh-border-default`, `--bh-border-subtle`
+- Content: `--bh-content-default`, `--bh-content-link`, `--bh-content-on-brand`, `--bh-content-subtle`
+- Interactive: `--bh-interactive-brand-default`, `--bh-interactive-secondary-default`
+- Shape: `--bh-radius-full`, `--bh-radius-sm-4`, `--bh-control-default`
+- Space: `--bh-space-xxs-2`, `--bh-space-xs-4`, `--bh-space-md-8`, `--bh-space-lg-10`, `--bh-space-xl-12`
+
+## Pixel Rules
+
+- Feed width is `600px`.
+- Items use a `12px` gap between the indicator rail and content.
+- Avatar is `32px` square with a full radius and subtle border.
+- The status dot renders in a `16px` box with a `6px` success fill.
+- Body text is Inter `15px / 24px`; timestamps are `14px / 20px`.
+- Captions use `12px` padding, subtle border, white raised fill, and `4px` radius.
+- Slot content is `76px` high with purple dashed border and subtle purple fill.
+- Actions use `8px` top padding, `8px` button gap, and `36px` tall buttons.
+- The repeated-item default uses a `22px` decorative bottom spacer so ten items fit the `2000px` Figma feed frame.
+- RTL mirrors the avatar rail to the right and right-aligns text content.
+
+## Accessibility
+
+- The feed uses a labelled `section`; provide `ariaLabel` when the surrounding context is not explicit.
+- Status dots and connector lines are decorative. Use item copy or parent-level announcements for meaningful state.
+- Action buttons are real `button` or `a` elements and support `ariaLabel`, `disabled`, `href`, and `onClick`.
+
+## Install
+
+```bash
+npx banhaten add activity-feed
+```
+
+## Examples
+
+Primary registry example: `examples/expanded/activity-feed-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs activity-feed` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+This component has no special RTL contract beyond inherited document direction and logical spacing.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -103,6 +103,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `ActivityFeed`, `ActivityFeedItem` |
 | `registryDependencies` | `button` |
 | `states` | `default`, `with-status`, `with-link`, `with-actions` |
-| `tokens` | `--bh-activity-feed-compact-width`, `--bh-bg-accent-purple-subtle`, `--bh-bg-raised`, `--bh-bg-success-default`, `--bh-border-accent-purple-strong`, `--bh-border-default`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-link`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-control-default`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-font-weight-regular`, `--bh-font-weight-semibold`, `--bh-interactive-brand-default`, `--bh-interactive-secondary-default`, `--bh-radius-full`, `--bh-radius-sm-4`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-6xl-32`, `--bh-space-8xl-48`, `--bh-space-9xl-64`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-base-letter-spacing`, `--bh-text-body-md-font-size`, `--bh-text-body-md-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-line-height`, `--bh-text-body-xs-regular-font-size`, `--shadow-button-raised`, `--shadow-component-default` |
+| `tokens` | `--bh-activity-feed-compact-width`, `--bh-bg-accent-purple-subtle`, `--bh-bg-raised`, `--bh-bg-success-default`, `--bh-border-accent-purple-strong`, `--bh-border-default`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-link`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-control-default`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-font-weight-regular`, `--bh-font-weight-semibold`, `--bh-interactive-brand-default`, `--bh-interactive-secondary-default`, `--bh-radius-full`, `--bh-radius-sm-4`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-6xl-32`, `--bh-space-8xl-48`, `--bh-space-9xl-64`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-base-letter-spacing`, `--bh-text-body-md-font-size`, `--bh-text-body-md-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-line-height`, `--bh-text-body-xs-regular-font-size`, `--elevation-button-raised`, `--elevation-component-default` |
 | `variants` | `caption`, `slot` |
 <!-- registry-contract:end -->

package/docs/design-system/components/activity-heatmap.md

@@ -1,59 +1,59 @@
-# Activity Heatmap
-
-`ActivityHeatmap` visualizes activity as seven-day week columns with five intensity levels. It is domain-neutral: contribution totals, period controls, headings, and product-specific copy belong to the surrounding composition.
-
-## API
-
-```tsx
-import {
-  ActivityHeatmap,
-  type ActivityHeatmapItem,
-} from "@/components/ui/expanded/ActivityHeatmap"
-
-const items: ActivityHeatmapItem[] = activity.map((level, index) => ({
-  id: String(index),
-  label: `Day ${index + 1}, activity level ${level} of 4`,
-  level,
-}))
-
-<ActivityHeatmap
-  ariaLabel="Weekly activity over the last 39 weeks"
-  items={items}
-/>
-```
-
-Items are supplied in column-major order: the first seven values make the first week, the next seven make the second week, and so on. `level` accepts `0`, `1`, `2`, `3`, or `4`.
-
-## Token Contract
-
-The component introduces no new design tokens and contains no raw visual values. Its complete visual contract is composed from existing Banhaten tokens:
-
-- Cell size: `--bh-space-3xl-16`
-- Gap: `--bh-space-xs-4`
-- Radius: `--bh-radius-sm-4`
-- Empty level: `--bh-bg-neutral-medium`
-- Activity levels: `--bh-bg-accent-purple-subtle`, `--bh-bg-accent-purple-soft`, `--bh-bg-accent-purple-default`, `--bh-content-accent-purple-strong`
-
-## RTL Rules
-
-Set `dir="rtl"` or inherit an RTL direction boundary to place the first supplied week at the logical start edge. Item order is never mutated in JavaScript.
-
-## Accessibility
-
-The heatmap exposes one image-style accessible summary through `ariaLabel`, avoiding hundreds of repetitive focus stops. Give each item a concise `label` to provide a native pointer tooltip. If users must inspect or act on individual days, pair the heatmap with an accessible table or list rather than turning every cell into a button.
-
-## Install
-
-```bash
-npx banhaten add activity-heatmap
-```
-
-## Examples
-
-Primary registry example: `examples/expanded/activity-heatmap-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs activity-heatmap` to inspect source files, installation, and examples.
-
+# Activity Heatmap
+
+`ActivityHeatmap` visualizes activity as seven-day week columns with five intensity levels. It is domain-neutral: contribution totals, period controls, headings, and product-specific copy belong to the surrounding composition.
+
+## API
+
+```tsx
+import {
+  ActivityHeatmap,
+  type ActivityHeatmapItem,
+} from "@/components/ui/expanded/ActivityHeatmap"
+
+const items: ActivityHeatmapItem[] = activity.map((level, index) => ({
+  id: String(index),
+  label: `Day ${index + 1}, activity level ${level} of 4`,
+  level,
+}))
+
+<ActivityHeatmap
+  ariaLabel="Weekly activity over the last 39 weeks"
+  items={items}
+/>
+```
+
+Items are supplied in column-major order: the first seven values make the first week, the next seven make the second week, and so on. `level` accepts `0`, `1`, `2`, `3`, or `4`.
+
+## Token Contract
+
+The component introduces no new design tokens and contains no raw visual values. Its complete visual contract is composed from existing Banhaten tokens:
+
+- Cell size: `--bh-space-3xl-16`
+- Gap: `--bh-space-xs-4`
+- Radius: `--bh-radius-sm-4`
+- Empty level: `--bh-bg-neutral-medium`
+- Activity levels: `--bh-bg-accent-purple-subtle`, `--bh-bg-accent-purple-soft`, `--bh-bg-accent-purple-default`, `--bh-content-accent-purple-strong`
+
+## RTL Rules
+
+Set `dir="rtl"` or inherit an RTL direction boundary to place the first supplied week at the logical start edge. Item order is never mutated in JavaScript.
+
+## Accessibility
+
+The heatmap exposes one image-style accessible summary through `ariaLabel`, avoiding hundreds of repetitive focus stops. Give each item a concise `label` to provide a native pointer tooltip. If users must inspect or act on individual days, pair the heatmap with an accessible table or list rather than turning every cell into a button.
+
+## Install
+
+```bash
+npx banhaten add activity-heatmap
+```
+
+## Examples
+
+Primary registry example: `examples/expanded/activity-heatmap-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs activity-heatmap` to inspect source files, installation, and examples.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -69,5 +69,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `props.dir` | `ltr \| rtl; default "inherited"; Places the first activity column at the logical start edge.` |
 | `props.items` | `readonly ActivityHeatmapItem[]; default "[]"; Column-major cells grouped into seven-day weeks, each with a level from zero through four.` |
 | `states` | `level-0`, `level-1`, `level-2`, `level-3`, `level-4` |
-| `tokens` | `--bh-bg-accent-purple-default`, `--bh-bg-accent-purple-soft`, `--bh-bg-accent-purple-subtle`, `--bh-bg-neutral-medium`, `--bh-content-accent-purple-strong`, `--bh-content-default`, `--bh-font-family`, `--bh-radius-sm-4`, `--bh-space-3xl-16`, `--bh-space-xs-4`, `--shadow-component-focus-ring` |
+| `tokens` | `--bh-bg-accent-purple-default`, `--bh-bg-accent-purple-soft`, `--bh-bg-accent-purple-subtle`, `--bh-bg-neutral-medium`, `--bh-content-accent-purple-strong`, `--bh-content-default`, `--bh-font-family`, `--bh-radius-sm-4`, `--bh-space-3xl-16`, `--bh-space-xs-4`, `--elevation-component-focus-ring` |
 <!-- registry-contract:end -->

package/docs/design-system/components/agent-input.md

@@ -0,0 +1,85 @@
+# Agent Input
+
+`AgentInput` is the prompt composer for agent conversations. One frame holds an auto-growing editor, skill and attachment chips, an add menu for photos, files, skills, and models, a slash-command skill palette, an optional Enhance Prompt action with a sweeping accent ring, and the send button.
+
+It composes Button, Menu, Tag, Spinner, and Shimmer Text rather than restyling them, so density, focus, and RTL behavior match the rest of the system.
+
+## API
+
+```tsx
+import { AgentInput } from "@/components/ui/agent-input"
+
+<AgentInput
+  models={models}
+  onEnhance={enhancePrompt}
+  onSend={({ text, attachments, skills, model }) =>
+    submit({ files: attachments.map((attachment) => attachment.file), model, skills, text })
+  }
+  skills={skills}
+/>
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` / `defaultValue` / `onValueChange` | `string` | `""` | Prompt text. |
+| `onSend` | `(payload: AgentInputPayload) => void` | – | Receives `text`, `attachments`, selected `skills`, and the `model`. Enter sends; Shift+Enter inserts a line break; an Enter that confirms an IME composition never sends. |
+| `onEnhance` | `(prompt, signal) => Promise<string>` | – | Enables Enhance Prompt. Resolve with the rewritten prompt; if it rejects, the original prompt returns. The signal aborts when the field unmounts, and a late result is ignored. |
+| `models` | `readonly AgentInputModel[]` | `[]` | Selectable models with `name`, optional `description`, `meta`, and `icon`. |
+| `model` / `defaultModel` / `onModelChange` | `string` | first model | Selected model id. |
+| `skills` | `readonly AgentInputSkill[]` | `[]` | Skills available from the add menu and by typing `/`. |
+| `selectedSkills` / `defaultSelectedSkills` / `onSelectedSkillsChange` | `readonly string[]` | `[]` | Selected skill ids, shown as chips. |
+| `attachments` / `onAttachmentsChange` | `readonly AgentInputAttachment[]` | internal | Attachment chips `{ id, kind, name, file? }`; omit to let the field own picked files. A picked file's kind follows its MIME type; the picker it came from decides only for files without one. |
+| `disabled` | `boolean` | `false` | Disables editing and actions. |
+| `labels` | `Partial<AgentInputLabels>` | English | Placeholder, menu, action, and remove copy. |
+
+Keyboard: `/` opens the skill palette, arrow keys move, Enter or Tab inserts, Escape closes.
+
+Files picked through the add menu keep their `File` on `attachment.file`, so you can upload them as soon as they arrive in `onAttachmentsChange` or when `onSend` fires. Attachments you pass in yourself, such as ones restored from a saved draft, can leave `file` out.
+
+## Install
+
+```bash
+npx banhaten add agent-input
+```
+
+## Examples
+
+Primary registry example: `examples/agent-input-demo.tsx`.
+
+## Token Contract
+
+The frame uses `--bh-bg-raised`, `--bh-radius-2xl-12`, and `--elevation-02`. The editor uses the `body-sm-regular` scale, `--bh-content-muted` placeholders, and caps at `--bh-agent-input-field-max-height`. The palette reuses Menu tokens (`--bh-menu-bg`, `--bh-menu-radius`, `--bh-menu-item-radius`, `--bh-menu-item-hover-bg`, `--elevation-menu`) at `--bh-agent-input-palette-width`. The enhancing ring is `--bh-agent-input-ring-width` wide and cycles the blue, purple, fuchsia, and aqua accent content tokens on `--bh-agent-input-ring-duration`. Chips, the enhance pill, and the palette move on the shared `--bh-duration-*` and `--bh-easing-emphasized` foundation tokens, and removed chips and the pill unmount when their exit animation ends.
+
+Covered source files: `components/agent-input.tsx`, the internal `components/agent-input-parts.tsx` and `components/agent-input-state.ts`, `components/agent-input.css`, and the `button`, `menu`, `shimmer-text`, `spinner`, and `tag` registry dependencies.
+
+## RTL Rules
+
+- The editor, chips, palette, and action row inherit direction and use logical spacing.
+- The add menu and slash palette open toward the logical start; Menu resolves keyboard direction through its own boundary.
+
+## Accessibility
+
+The editor is a native textarea labelled by the placeholder. Typing / opens a listbox of skills that the field drives through `aria-activedescendant`, `aria-controls`, `aria-autocomplete`, and `aria-haspopup`; arrow keys move the active option with wrapping and Enter or Tab inserts it. The palette shares its keyboard model with Autocomplete through the `use-listbox-navigation` hook. Chips expose remove buttons named after their item, the add menu is a Radix menu with roving focus, and a status region that stays mounted announces the `enhancing` label when a request starts. Animations collapse to instant changes under `prefers-reduced-motion`.
+
+<!-- registry-contract:start -->
+## Registry Contract
+
+This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
+`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
+
+| Field | Values |
+| --- | --- |
+| `supportedExports` | `components/agent-input.tsx: AgentInput` |
+| `parts` | `AgentInput` |
+| `registryDependencies` | `button`, `menu`, `shimmer-text`, `spinner`, `tag` |
+| `props.value` | `string; default null; Controlled prompt text; use defaultValue for uncontrolled usage.` |
+| `props.onSend` | `(payload: AgentInputPayload) => void; default null; Receives text, attachments, skills, and the selected model; picked attachments carry their File for upload.` |
+| `props.onEnhance` | `(prompt: string, signal: AbortSignal) => Promise<string>; default null; Enables the Enhance Prompt action; resolves to the rewritten prompt.` |
+| `props.models` | `readonly AgentInputModel[]; default "[]"; Selectable models with name, description, meta, and icon.` |
+| `props.skills` | `readonly AgentInputSkill[]; default "[]"; Skills available from the add menu and the slash palette.` |
+| `props.attachments` | `readonly AgentInputAttachment[]; default null; Controlled attachment chips; omit to let the field own picked files.` |
+| `props.onAttachmentsChange` | `(attachments: AgentInputAttachment[]) => void; default null; Called when chips are added or removed; picked files arrive with their File, so uploads can start right away.` |
+| `props.labels` | `Partial<AgentInputLabels>; default "English"; Localized placeholder, menu, action, and remove copy.` |
+| `states` | `idle`, `enhancing`, `enhanced` |
+| `tokens` | `--bh-agent-input-field-max-height`, `--bh-agent-input-palette-width`, `--bh-agent-input-ring-duration`, `--bh-agent-input-ring-width`, `--bh-bg-raised`, `--bh-button-xs-height`, `--bh-content-accent-aqua-default`, `--bh-content-accent-blue-default`, `--bh-content-accent-fuchsia-default`, `--bh-content-accent-purple-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-duration-default`, `--bh-duration-moderate`, `--bh-easing-emphasized`, `--bh-font-family`, `--bh-menu-bg`, `--bh-menu-item-hover-bg`, `--bh-menu-item-radius`, `--bh-menu-radius`, `--bh-opacity-0`, `--bh-opacity-100`, `--bh-radius-2xl-12`, `--bh-space-2xl-14`, `--bh-space-6xl-32`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-font-weight`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--bh-text-body-xs-regular-font-size`, `--bh-text-body-xs-regular-font-weight`, `--bh-text-body-xs-regular-letter-spacing`, `--bh-text-body-xs-regular-line-height`, `--bh-z-popover`, `--elevation-02`, `--elevation-menu` |
+<!-- registry-contract:end -->