@agent-ui-kit/web-components 0.0.8 → 0.0.15

package/dist/docs/components/agent-input.yaml

@@ -0,0 +1,238 @@
+name: aui-agent-input
+tag: aui-agent-input
+type: component
+summary: Chat composer surface with textarea, toolbar, selectors, and keyboard shortcuts.
+description: |
+  Composer element for agent chat interfaces. Discovers child aui-textarea and submit aui-button[data-submit]. Supports Cmd/Ctrl+Enter to send, auto-clear after send, and busy state that disables submit but keeps textarea active. Typically nested inside aui-content within an aui-container. Composes aui-agent-prompt for the bordered textarea area, aui-select mode="bar" transparent toolbars for actions and model/assistant selectors, aui-wrap for suggestion chips, and aui-stack for vertical grouping.
+base: AgentElement
+attributes:
+  disabled:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Disables all interaction.
+  busy:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Disables submit but keeps textarea enabled.
+  no-enter-submit:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Disables Cmd/Ctrl+Enter key submission.
+  no-auto-clear:
+    syntax: boolean
+    type: boolean
+    default: false
+    description: Prevents clearing the textarea after send.
+  padding:
+    syntax: '"0" | "1" | "2" | "3" | "4" | "5" | "6"'
+    type: string
+    default: null
+    description: Inner padding scale token applied to the composer surface.
+  gap:
+    syntax: '"0" | "1" | "2" | "3" | "4" | "5" | "6"'
+    type: string
+    default: null
+    description: Vertical gap between composer children (prompt, chips, toolbars).
+  width:
+    syntax: string
+    type: string
+    default: null
+    description: Width constraint, e.g. "full".
+  max-width:
+    syntax: string
+    type: string
+    default: null
+    description: Maximum width constraint, e.g. "lg", "2xl".
+events:
+  aui:send:
+    description: |
+      Fired on submit with { value } detail. Cancelable.
+  aui:composer-focus:
+    description: Fired when the composer textarea gains focus.
+  aui:composer-blur:
+    description: Fired when the composer textarea loses focus.
+  aui:composer-submit-blocked:
+    description: Fired when submit is attempted while busy.
+composition:
+  parents:
+    - aui-content
+    - aui-footer
+    - aui-container
+    - div
+    - any
+  children:
+    - aui-agent-prompt
+    - aui-stack
+    - aui-select
+    - aui-wrap
+    - aui-inset
+    - aui-divider
+    - aui-textarea
+    - aui-button
+    - any
+tokens:
+  - name: --aui-agent-input-gap
+    default: calc(var(--aui-space) * 4)
+    description: Vertical gap between composer children (prompt, chips, toolbars).
+  - name: --aui-agent-input-padding
+    default: calc(var(--aui-space) * 4)
+    description: Padding around the composer surface.
+examples:
+  - description: Full advanced composer with header, model selectors, prompt, and suggestion chips
+    html: |-
+      <aui-container padding="0" max-width="2xl" width="full">
+        <aui-header dividers padding="4">
+          <span slot="leading"
+            ><aui-icon name="chat-dots" label="UX Research" hide-label></aui-icon
+          ></span>
+          <span slot="content"><aui-text>Content Title</aui-text></span>
+          <span slot="trailing">
+            <aui-button ghost label="More options" density="compact" hide-label
+              ><aui-icon name="dots-three"></aui-icon
+            ></aui-button>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-agent-input width="full" padding="4" gap="4">
+            <aui-inset
+              ><aui-text muted> Describe what you'd like to explore. </aui-text>
+            </aui-inset>
+            <aui-divider></aui-divider>
+            <aui-stack gap="2">
+              <aui-select mode="bar" transparent width="full" density="compact">
+                <aui-select placeholder="GPT-5.2" outline>
+                  <aui-optgroup label="Claude">
+                    <aui-option value="opus-4.6">Opus 4.6</aui-option>
+                    <aui-option value="sonnet-4.6">Sonnet 4.6</aui-option>
+                  </aui-optgroup>
+                  <aui-optgroup label="ChatGPT">
+                    <aui-option value="gpt-5.2">GPT-5.2</aui-option>
+                  </aui-optgroup>
+                </aui-select>
+                <aui-select placeholder="UX Design Assistant" outline>
+                  <aui-optgroup label="Research">
+                    <aui-option value="ux-design">UX Design Assistant</aui-option>
+                    <aui-option value="ux-research">UX Researcher</aui-option>
+                    <aui-option value="user-interview"
+                      >User Interview Analyst</aui-option
+                    >
+                  </aui-optgroup>
+                  <aui-optgroup label="Engineering">
+                    <aui-option value="code-review">Code Review</aui-option>
+                    <aui-option value="architect">System Architect</aui-option>
+                  </aui-optgroup>
+                </aui-select>
+                <span spacer></span>
+                <aui-button ghost label="Settings" hide-label
+                  ><aui-icon name="sliders"></aui-icon
+                ></aui-button>
+                <aui-button ghost label="History" hide-label
+                  ><aui-icon name="clock"></aui-icon
+                ></aui-button>
+              </aui-select>
+              <aui-agent-prompt>
+                <aui-textarea
+                  placeholder="Help me understand why users are dropping off during onboarding"
+                  rows="3"
+                ></aui-textarea>
+                <aui-button ghost label="Improve prompt" data-role="improve" hide-label
+                  ><aui-icon name="sparkle"></aui-icon
+                ></aui-button>
+                <aui-inset padding="2" density="compact">
+                  <aui-select mode="bar" transparent width="full">
+                    <aui-button ghost label="Add" hide-label
+                      ><aui-icon name="plus"></aui-icon
+                    ></aui-button>
+                    <aui-button ghost label="Search" hide-label
+                      ><aui-icon name="magnifying-glass"></aui-icon
+                    ></aui-button>
+                    <aui-button ghost label="Attach" hide-label
+                      ><aui-icon name="paperclip"></aui-icon
+                    ></aui-button>
+                    <aui-button ghost label="Experiment" hide-label
+                      ><aui-icon name="flask"></aui-icon
+                    ></aui-button>
+                    <span spacer></span>
+                    <aui-button ghost label="Record" hide-label
+                      ><aui-icon name="circle"></aui-icon
+                    ></aui-button>
+                    <aui-button ghost label="Voice" hide-label
+                      ><aui-icon name="microphone"></aui-icon
+                    ></aui-button>
+                    <aui-button round label="Send" data-submit disabled hide-label
+                      ><aui-icon name="arrow-up"></aui-icon
+                    ></aui-button>
+                  </aui-select>
+                </aui-inset>
+              </aui-agent-prompt>
+              <aui-wrap gap="2" density="compact">
+                <aui-button outline round
+                  ><aui-icon name="lightbulb" slot="leading"></aui-icon> Clarify user
+                  problem</aui-button
+                >
+                <aui-button outline round
+                  ><aui-icon name="crosshair" slot="leading"></aui-icon> Define user
+                  context</aui-button
+                >
+                <aui-button outline round
+                  ><aui-icon name="list-checks" slot="leading"></aui-icon> Select
+                  deliverable</aui-button
+                >
+                <aui-button outline round
+                  ><aui-icon name="pencil" slot="leading"></aui-icon> Refine
+                  requirements</aui-button
+                >
+              </aui-wrap>
+            </aui-stack>
+          </aui-agent-input>
+        </aui-content>
+      </aui-container>
+  - description: Simple composer with send button
+    html: |-
+      <aui-agent-input padding="4" gap="4" max-width="lg">
+        <aui-agent-prompt>
+          <aui-textarea placeholder="Send a message..." rows="3"></aui-textarea>
+          <aui-inset padding="2" density="compact">
+            <aui-select mode="bar" transparent width="full">
+              <aui-button ghost label="Attach"
+                ><aui-icon name="paperclip"></aui-icon
+              ></aui-button>
+              <span spacer></span>
+              <aui-button round label="Send" data-submit disabled hide-label
+                ><aui-icon name="arrow-up"></aui-icon
+              ></aui-button>
+            </aui-select>
+          </aui-inset>
+        </aui-agent-prompt>
+      </aui-agent-input>
+  - description: Busy state with model chooser and stop button
+    html: |-
+      <aui-agent-input busy padding="4" gap="4" max-width="lg">
+        <aui-agent-prompt>
+          <aui-textarea placeholder="Ask a follow-up..." rows="2"></aui-textarea>
+          <aui-inset padding="2" density="compact">
+            <aui-select mode="bar" transparent width="full">
+              <aui-button ghost popover-trigger="model-chooser">
+                <aui-icon name="robot" slot="leading"></aui-icon> Sonnet 4.6
+              </aui-button>
+              <span spacer></span>
+              <aui-button round label="Stop" data-submit disabled hide-label
+                ><aui-icon name="stop"></aui-icon
+              ></aui-button>
+            </aui-select>
+          </aui-inset>
+        </aui-agent-prompt>
+      </aui-agent-input>
+  - description: Single-line inline prompt with send button
+    html: |-
+      <aui-agent-input padding="4" max-width="lg">
+        <aui-agent-prompt inline>
+          <aui-textarea placeholder="Send a message..." rows="1"></aui-textarea>
+          <aui-button round label="Send" data-submit hide-label
+            ><aui-icon name="arrow-up"></aui-icon
+          ></aui-button>
+        </aui-agent-prompt>
+      </aui-agent-input>

package/dist/docs/components/agent-message.yaml

@@ -2,85 +2,70 @@ name: aui-agent-message
 tag: aui-agent-message
 type: component
 summary: Individual chat message bubble with action toolbar.
-description: >
-  Accepts slotted content: aui-agent-text, aui-agent-activity,
-  aui-agent-seeds, or any custom content. Provides a configurable
-  action toolbar (copy, retry, edit, feedback) that appears on hover
-  via CSS anchor positioning as a popover below the bubble.
-
+description: |
+  Accepts slotted content: aui-agent-text, aui-agent-activity, aui-agent-seeds, or any custom content. Provides a configurable action toolbar (copy, retry, edit, feedback) that appears on hover via CSS anchor positioning as a popover below the bubble.
 base: AgentElement
-
 attributes:
   role:
     syntax: key-value
     type: string
     default: assistant
     description: Message role — user, assistant, or system.
-
   message-id:
     syntax: key-value
     type: string
     default: ""
     description: Unique message identifier.
-
   timestamp:
     syntax: key-value
     type: string
     default: ""
     description: Epoch milliseconds.
-
   status:
     syntax: key-value
     type: string
     default: sent
-    description: >
+    description: |
       Message status — sending, sent, error, streaming, or partial.
-
   actions:
     syntax: key-value
     type: string
     default: ""
-    description: >
-      Comma-separated action list, or "none" to suppress.
-      Defaults per role — assistant: copy,retry,feedback-up,feedback-down;
-      user: edit,retry.
-
+    description: |
+      Comma-separated action list, or "none" to suppress. Defaults per role — assistant: copy,retry,feedback-up,feedback-down; user: edit,retry.
   actions-style:
     syntax: key-value
     type: string
     default: icon
     description: Action button style — icon, label, or icon-label.
-
   actions-position:
     syntax: key-value
     type: string
     default: below
     description: Toolbar placement — below (popover) or inside (inline).
-
 a11y:
   role: article
-
 events:
   aui:message-action:
-    description: >
-      Fired when an action button is clicked.
-      detail contains action and messageId.
-
+    description: |
+      Fired when an action button is clicked. detail contains action and messageId.
   aui:continue-request:
-    description: >
-      Fired when continue is requested for a partial message.
-      detail contains messageId.
-
+    description: |
+      Fired when continue is requested for a partial message. detail contains messageId.
 composition:
-  parents: [aui-agent-thread]
-  children: [aui-agent-text, aui-agent-activity, aui-agent-seeds, any]
-
+  parents:
+    - aui-agent-thread
+  children:
+    - aui-agent-text
+    - aui-agent-activity
+    - aui-agent-seeds
+    - any
 tokens:
   - name: --aui-agent-message-border-radius
     default: var(--aui-agent-bubble-radius, var(--aui-radius))
     description: Border radius for message bubbles.
   - name: --aui-agent-message-border-radius-tight
-    default: "calc(var(--aui-space) * 2)"
+    default: calc(var(--aui-space) * 2)
     description: Tighter radius for grouped bubble corners near the avatar.
   - name: --aui-agent-message-background
     default: var(--aui-agent-bubble-assistant, transparent)
@@ -122,10 +107,10 @@ tokens:
     default: var(--aui-ink-muted)
     description: Text color of action buttons.
   - name: --aui-agent-message-action-padding
-    default: "calc(var(--aui-space) * 0.5) calc(var(--aui-space) * 1)"
+    default: calc(var(--aui-space) * 0.5) calc(var(--aui-space) * 1)
     description: Padding of individual action buttons.
   - name: --aui-agent-message-action-gap
-    default: "calc(var(--aui-space) * 0.5)"
+    default: calc(var(--aui-space) * 0.5)
     description: Gap between icon and label within an action button.
   - name: --aui-agent-message-action-background-hover
     default: var(--aui-fill-hover, var(--aui-action-hover))
@@ -134,7 +119,7 @@ tokens:
     default: var(--aui-ink)
     description: Text color of action buttons on hover.
   - name: --aui-agent-message-popover-padding
-    default: "calc(var(--aui-space) * 0.5)"
+    default: calc(var(--aui-space) * 0.5)
     description: Padding inside the popover actions toolbar.
   - name: --aui-agent-message-popover-background
     default: var(--aui-modal, var(--aui-doc))
@@ -146,11 +131,11 @@ tokens:
     default: var(--aui-radius)
     description: Border radius of the popover actions toolbar.
   - name: --aui-agent-message-popover-shadow
-    default: "var(--aui-shadow-lg, 0 4px 16px oklch(0% 0 0 / 0.12))"
+    default: var(--aui-shadow-lg, 0 4px 16px oklch(0% 0 0 / 0.12))
     description: Box shadow of the popover actions toolbar.
-
 examples:
-  - html: |
+  - description: Assistant message with default actions (copy, retry, feedback). Hover reveals the action toolbar below
+    html: |-
       <aui-agent-message role="assistant" status="sent" message-id="msg-001">
         <aui-agent-text>Based on your project structure, I recommend using a **monorepo** with the following layout:
 
@@ -160,15 +145,13 @@ examples:
 
       This keeps dependencies clean and enables independent versioning for each package.</aui-agent-text>
       </aui-agent-message>
-    description: Assistant message with default actions (copy, retry, feedback). Hover reveals the action toolbar below.
-
-  - html: |
+  - description: User message with edit and retry actions
+    html: |-
       <aui-agent-message role="user" message-id="msg-002">
         <aui-agent-text format="plain">How do I set up path aliases in TypeScript so imports like @/components work across all packages?</aui-agent-text>
       </aui-agent-message>
-    description: User message with edit and retry actions.
-
-  - html: |
+  - description: Streaming message — content is still arriving. Actions are suppressed during streaming
+    html: |-
       <aui-agent-message role="assistant" status="streaming" message-id="msg-003" actions="none">
         <aui-agent-text>You'll need to configure `paths` in your root `tsconfig.json` and then extend it in each package. Here's the base config:
 
@@ -185,10 +168,8 @@ examples:
 
       Each package tsconfig extends this and...</aui-agent-text>
       </aui-agent-message>
-    description: Streaming message — content is still arriving. Actions are suppressed during streaming.
-
-  - html: |
+  - description: Error message — status="error" applies error styling and surfaces a retry action
+    html: |-
       <aui-agent-message role="assistant" status="error" message-id="msg-004">
         <aui-agent-text format="plain">Something went wrong while generating the response. Please try again.</aui-agent-text>
       </aui-agent-message>
-    description: Error message — status="error" applies error styling and surfaces a retry action.

package/dist/docs/components/agent-panel.yaml

@@ -2,44 +2,43 @@ name: aui-agent-panel
 tag: aui-agent-panel
 type: component
 summary: Top-level chat shell that composes header, feed, and input.
-description: >
-  Layout coordinator for agent chat interfaces. Discovers child
-  aui-agent-feed and aui-agent-input elements and provides focus
-  delegation via focusComposer(). Sets role="region" with an
-  aria-label derived from the panel-title attribute. Does not stamp
-  DOM — just discovers and coordinates existing children.
-
+description: |
+  Layout coordinator for agent chat interfaces. Discovers child aui-agent-feed and aui-agent-input elements and provides focus delegation via focusComposer(). Sets role="region" with an aria-label derived from the panel-title attribute. Does not stamp DOM — just discovers and coordinates existing children.
 base: AgentElement
-
 attributes:
   panel-title:
     syntax: string
     type: string
-    default: ''
+    default: ""
     description: Title for the panel, used as aria-label for the region.
-
   auto-focus:
     syntax: string
     type: string
     default: ready
-    description: >
-      When to auto-focus the composer. 'ready' focuses on activate,
-      'open-request' defers until an external signal, 'never' skips.
-
+    description: |
+      When to auto-focus the composer. 'ready' focuses on activate, 'open-request' defers until an external signal, 'never' skips.
 a11y:
   role: region
   aria-label: Derived from panel-title attribute
-
 methods:
   focusComposer:
     description: Delegates focus to the child aui-agent-input composer.
-
 composition:
-  parents: [aui-content, aui-pane, aui-dialog, aui-drawer, div, any]
-  children: [aui-header, aui-agent-feed, aui-agent-input, aui-footer]
-
+  parents:
+    - aui-content
+    - aui-pane
+    - aui-dialog
+    - aui-drawer
+    - div
+    - any
+  children:
+    - aui-header
+    - aui-agent-feed
+    - aui-agent-input
+    - aui-footer
 examples:
-  - html: |
+  - description: Full chat panel with header, message feed, and composer input
+    html: |-
       <aui-agent-panel panel-title="Design Assistant" max-width="xl" style="height: 32rem;">
         <aui-header dividers>
           <aui-stack direction="row" gap="2" align-items="center">
@@ -70,9 +69,8 @@ examples:
           </aui-agent-prompt>
         </aui-agent-input>
       </aui-agent-panel>
-    description: Full chat panel with header, message feed, and composer input.
-
-  - html: |
+  - description: Minimal chat panel with just feed and input, no header
+    html: |-
       <aui-agent-panel panel-title="Quick Chat" max-width="xl" style="height: 24rem;">
         <aui-agent-feed auto-scroll scrollable>
           <aui-agent-thread role="assistant" sender="Claude">
@@ -88,4 +86,3 @@ examples:
           </aui-agent-prompt>
         </aui-agent-input>
       </aui-agent-panel>
-    description: Minimal chat panel with just feed and input, no header.

package/dist/docs/components/agent-prompt.yaml

@@ -2,15 +2,9 @@ name: aui-agent-prompt
 tag: aui-agent-prompt
 type: component
 summary: Bordered prompt container for the chat composer textarea.
-description: >
-  Visual wrapper around the textarea inside aui-agent-input.
-  Provides bordered styling with focus ring when the inner
-  aui-textarea gains focus. Contains aui-textarea, optional
-  inline action buttons (ghost + hide-label), and a bottom
-  toolbar via aui-inset > aui-select mode="bar" transparent.
-
+description: |
+  Visual wrapper around the textarea inside aui-agent-input. Provides bordered styling with focus ring when the inner aui-textarea gains focus. Contains aui-textarea, optional inline action buttons (ghost + hide-label), and a bottom toolbar via aui-inset > aui-select mode="bar" transparent.
 base: AgentElement
-
 attributes:
   disabled:
     syntax: boolean
@@ -21,15 +15,17 @@ attributes:
     syntax: boolean
     type: boolean
     default: false
-    description: >
-      Single-line mode. Switches to row layout with textarea and send
-      button side-by-side. Textarea gets compact block padding and the
-      trailing button sits inline. Toolbar border is suppressed.
-
+    description: |
+      Single-line mode. Switches to row layout with textarea and send button side-by-side. Textarea gets compact block padding and the trailing button sits inline. Toolbar border is suppressed.
 composition:
-  parents: [aui-agent-input, aui-stack]
-  children: [aui-textarea, aui-button, aui-inset, any]
-
+  parents:
+    - aui-agent-input
+    - aui-stack
+  children:
+    - aui-textarea
+    - aui-button
+    - aui-inset
+    - any
 tokens:
   - name: --aui-agent-prompt-background
     default: var(--aui-control)
@@ -47,19 +43,19 @@ tokens:
     default: var(--aui-focus)
     description: Focus ring color when textarea is focused.
   - name: --aui-agent-prompt-surface-padding-block
-    default: "calc(var(--aui-space) * 2)"
+    default: calc(var(--aui-space) * 2)
     description: Block padding of the textarea surface.
   - name: --aui-agent-prompt-surface-padding-inline
-    default: "calc(var(--aui-space) * 3)"
+    default: calc(var(--aui-space) * 3)
     description: Inline padding of the textarea surface.
   - name: --aui-agent-prompt-toolbar-border
     default: var(--aui-border-muted)
     description: Border color of the bottom toolbar separator.
   - name: --aui-agent-prompt-toolbar-gap
-    default: "calc(var(--aui-space) * 2)"
+    default: calc(var(--aui-space) * 2)
     description: Gap between items in the toolbar.
   - name: --aui-agent-prompt-toolbar-padding
-    default: "calc(var(--aui-space) * 2)"
+    default: calc(var(--aui-space) * 2)
     description: Padding of the toolbar area.
   - name: --aui-agent-prompt-ghost-background-hover
     default: var(--aui-fill-hover)
@@ -71,55 +67,41 @@ tokens:
     default: var(--aui-fill-hover)
     description: Hover background in outline variant.
   - name: --aui-agent-prompt-inline-surface-padding-block
-    default: "calc(var(--aui-space) * 1.5)"
+    default: calc(var(--aui-space) * 1.5)
     description: Block padding of the textarea in inline mode.
   - name: --aui-agent-prompt-inline-submit-margin
-    default: "calc(var(--aui-space) * 1.5)"
+    default: calc(var(--aui-space) * 1.5)
     description: Inline-end margin for the submit button in inline mode.
-
 examples:
-  - html: |
+  - description: Basic bordered prompt with textarea — focus ring activates when textarea is focused
+    html: |-
       <aui-agent-prompt>
         <aui-textarea placeholder="Describe what you need help with..."></aui-textarea>
       </aui-agent-prompt>
-    description: Basic bordered prompt with textarea — focus ring activates when textarea is focused.
-
-  - html: |
+  - description: Prompt with an inline action icon (sparkle) positioned beside the textarea for triggering AI features
+    html: |-
       <aui-agent-prompt>
         <aui-textarea placeholder="Ask anything..."></aui-textarea>
         <div data-role="leading">
-          <aui-button ghost size="sm">
+          <aui-button ghost>
             <aui-icon name="sparkles"></aui-icon>
           </aui-button>
         </div>
       </aui-agent-prompt>
-    description: Prompt with an inline action icon (sparkle) positioned beside the textarea for triggering AI features.
-
-  - html: |
+  - description: Prompt with action toolbar below textarea — attach files, upload images, voice input, and send
+    html: |-
       <aui-agent-prompt>
         <aui-textarea placeholder="What would you like to build today?"></aui-textarea>
         <div data-role="actions">
-          <aui-button ghost size="sm">
+          <aui-button ghost>
             <aui-icon name="paperclip"></aui-icon>
           </aui-button>
-          <aui-button ghost size="sm">
+          <aui-button ghost>
             <aui-icon name="image"></aui-icon>
           </aui-button>
-          <aui-button ghost size="sm">
+          <aui-button ghost>
             <aui-icon name="microphone"></aui-icon>
           </aui-button>
           <aui-button primary data-submit>Send</aui-button>
         </div>
       </aui-agent-prompt>
-    description: >
-      Prompt with action toolbar below textarea — attach files, upload images,
-      voice input, and send.
-
-  - html: |
-      <aui-agent-prompt inline>
-        <aui-textarea placeholder="Quick message..."></aui-textarea>
-        <aui-button round label="Send" data-submit hide-label><aui-icon name="arrow-up"></aui-icon></aui-button>
-      </aui-agent-prompt>
-    description: >
-      Inline single-line prompt with textarea and send button side-by-side.
-      Row layout with compact padding, no toolbar border.