@agent-ui-kit/web-components 0.0.16 → 0.0.17

package/dist/api.tokens.json

@@ -1,7 +1,7 @@
 {
   "package": "@agent-ui-kit/web-components",
-  "version": "0.0.16",
-  "generated": "2026-03-22T04:11:44.191Z",
+  "version": "0.0.17",
+  "generated": "2026-03-22T05:03:36.053Z",
   "description": "Design tokens: sizing, typography, spacing, radius, shadow, animation.",
   "scales": {
     "size": [

package/dist/api.tokens.yaml

@@ -1,6 +1,6 @@
 package: "@agent-ui-kit/web-components"
-version: 0.0.16
-generated: 2026-03-22T04:11:44.191Z
+version: 0.0.17
+generated: 2026-03-22T05:03:36.053Z
 description: "Design tokens: sizing, typography, spacing, radius, shadow, animation."
 scales:
   size:

package/dist/docs/blocks/action-toolbar.yaml

@@ -0,0 +1,73 @@
+name: action-toolbar
+type: block
+summary: Three toolbar variants — editor formatting, table actions, and bulk selection.
+description: |
+  Three toolbar contexts in a vertical stack. The editor toolbar uses aui-button-group to cluster ghost icon-only buttons by function (formatting, alignment, insert), separated by vertical dividers. The table toolbar has a scrim Filters button, spacer, ghost icon actions, divider, and a primary Add row button. The bulk selection toolbar uses an accent container with a selection count heading, spacer, scrim action buttons, divider, and a danger ghost delete button. All use widget kind with bordered containers.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-button
+  - aui-button-group
+  - aui-divider
+kind: widget
+examples:
+  - description: Three toolbar variants — editor formatting, table actions, and bulk selection.
+    html: |-
+      <aui-stack gap="4">
+
+        <!-- Editor toolbar -->
+        <aui-container kind="widget" bordered>
+          <aui-inset>
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-button-group>
+                <aui-button ghost hide-label label="Bold" icon-leading="file-text" size="sm"></aui-button>
+                <aui-button ghost hide-label label="Italic" icon-leading="pencil" size="sm"></aui-button>
+                <aui-button ghost hide-label label="Underline" icon-leading="minus" size="sm"></aui-button>
+              </aui-button-group>
+              <aui-divider orientation="vertical" style="height: 1.25rem;"></aui-divider>
+              <aui-button-group>
+                <aui-button ghost hide-label label="Align left" icon-leading="list-checks" size="sm"></aui-button>
+                <aui-button ghost hide-label label="Align center" icon-leading="list-checks" size="sm"></aui-button>
+              </aui-button-group>
+              <aui-divider orientation="vertical" style="height: 1.25rem;"></aui-divider>
+              <aui-button-group>
+                <aui-button ghost hide-label label="Link" icon-leading="paperclip" size="sm"></aui-button>
+                <aui-button ghost hide-label label="Code" icon-leading="file-text" size="sm"></aui-button>
+              </aui-button-group>
+            </aui-stack>
+          </aui-inset>
+        </aui-container>
+
+        <!-- Table toolbar -->
+        <aui-container kind="widget" bordered>
+          <aui-inset>
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-button scrim size="sm" icon-leading="sliders">Filters</aui-button>
+              <aui-text size="xs" muted spacer></aui-text>
+              <aui-button ghost hide-label label="Search" icon-leading="magnifying-glass" size="sm"></aui-button>
+              <aui-button ghost hide-label label="Sort" icon-leading="arrow-up" size="sm"></aui-button>
+              <aui-divider orientation="vertical" style="height: 1.25rem;"></aui-divider>
+              <aui-button primary accent size="sm" icon-leading="plus">Add row</aui-button>
+            </aui-stack>
+          </aui-inset>
+        </aui-container>
+
+        <!-- Bulk selection toolbar -->
+        <aui-container kind="widget" bordered accent>
+          <aui-inset>
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-heading size="sm">5 selected</aui-heading>
+              <aui-text size="xs" muted spacer></aui-text>
+              <aui-button scrim size="sm" icon-leading="pencil">Edit</aui-button>
+              <aui-button scrim size="sm" icon-leading="copy">Duplicate</aui-button>
+              <aui-button scrim size="sm" icon-leading="star">Move</aui-button>
+              <aui-divider orientation="vertical" style="height: 1.25rem;"></aui-divider>
+              <aui-button ghost danger hide-label label="Delete" icon-leading="trash" size="sm"></aui-button>
+            </aui-stack>
+          </aui-inset>
+        </aui-container>
+
+      </aui-stack>

package/dist/docs/blocks/agent-artifact-card.yaml

@@ -0,0 +1,67 @@
+name: agent-artifact-card
+type: block
+summary: Code and document artifact cards with preview fade, file metadata, and copy action.
+description: |
+  Artifact cards showing agent-generated code or documents. Each card has a top aui-code preview area with a CSS gradient mask fading to transparent, and a bottom info row with a type-colored avatar icon, file name (truncated with ellipsis), size metadata, and an aui-copy-button. Uses the interactive attribute on the container for hover affordance. Code previews use aui-code with custom max-height and mask-image for the fade effect.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-copy-button
+  - aui-code
+kind: widget
+examples:
+  - description: Code and document artifact cards with preview fade, file metadata, and copy action.
+    html: |-
+      <aui-stack>
+
+        <!-- Code artifact -->
+        <aui-container kind="widget" bordered interactive>
+          <aui-code style="max-height: 8rem; mask-image: linear-gradient(to bottom, black 60%, transparent);">import { signal, computed, effect } from './reactivity'
+
+      export function createStore(initial) {
+        const state = signal(initial)
+        const derived = computed(() => transform(state.value))
+
+        effect(() => console.log('State changed:', state.value))
+
+        return { state, derived }
+      }</aui-code>
+          <aui-inset>
+            <aui-stack direction="row" gap="3" align-items="center">
+              <aui-avatar size="xs" accent solid><aui-icon name="file-text" size="xs"></aui-icon></aui-avatar>
+              <aui-stack gap="1" spacer min-width="0">
+                <aui-heading density="compact" truncate>reactivity-store.ts</aui-heading>
+                <aui-text muted size="xs">TypeScript · 847 bytes</aui-text>
+              </aui-stack>
+              <aui-copy-button></aui-copy-button>
+            </aui-stack>
+          </aui-inset>
+        </aui-container>
+
+        <!-- Document artifact -->
+        <aui-container kind="widget" bordered interactive>
+          <aui-code style="max-height: 8rem; mask-image: linear-gradient(to bottom, black 60%, transparent);"># Migration Guide v3.0
+
+      ## Breaking Changes
+
+      1. The `createApp()` function now requires a config object
+      2. Router middleware signature changed to async
+      3. State management uses signals instead of observables</aui-code>
+          <aui-inset>
+            <aui-stack direction="row" gap="3" align-items="center">
+              <aui-avatar size="xs" success solid><aui-icon name="file-text" size="xs"></aui-icon></aui-avatar>
+              <aui-stack gap="1" spacer min-width="0">
+                <aui-heading density="compact" truncate>migration-guide.md</aui-heading>
+                <aui-text muted size="xs">Markdown · 2.1 KB</aui-text>
+              </aui-stack>
+              <aui-copy-button></aui-copy-button>
+            </aui-stack>
+          </aui-inset>
+        </aui-container>
+
+      </aui-stack>

package/dist/docs/blocks/agent-chat-response.yaml

@@ -0,0 +1,65 @@
+name: agent-chat-response
+type: block
+summary: Agent chat message with identity row, prose + code content, citations, and action toolbar.
+description: |
+  A chat response block showing an agent message. Identity row has an accent solid avatar with sparkle icon, assistant name heading with spacer, and a sources badge. Response body is a vertical stack of prose text with inline mono code using aui-text font="mono" inline, and an aui-code block for larger snippets. Below the body, citation chips in a wrapping row using aui-chip size="sm" (not badges). Action toolbar has aui-copy-button and ghost icon-only buttons (regenerate, thumbs up/down) separated by a vertical divider.
+components:
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+  - aui-chip
+  - aui-button
+  - aui-copy-button
+  - aui-code
+  - aui-divider
+kind: widget
+examples:
+  - description: Agent chat message with identity row, prose + code content, citations, and action toolbar.
+    html: |-
+      <aui-stack>
+
+        <!-- Identity row -->
+        <aui-stack direction="row" gap="3" align-items="center">
+          <aui-avatar density="compact" accent solid><aui-icon name="sparkle"></aui-icon></aui-avatar>
+          <aui-heading density="compact" spacer>Assistant</aui-heading>
+          <aui-badge accent>Searched 3 sources</aui-badge>
+        </aui-stack>
+
+        <!-- Response body -->
+        <aui-stack>
+          <aui-text density="compact">The <strong>design token pipeline</strong> is a build-time process that transforms raw token definitions into platform-specific outputs. Here's how it works:</aui-text>
+
+          <aui-text density="compact">First, tokens are defined in a canonical JSON format. Each token has a <aui-text font="mono" density="compact" inline>$value</aui-text> and optional <aui-text font="mono" density="compact" inline>$type</aui-text> field following the W3C Design Tokens specification.</aui-text>
+
+          <aui-code>{
+        "color": {
+          "primary": {
+            "$value": "#0066FF",
+            "$type": "color"
+          }
+        }
+      }</aui-code>
+
+          <aui-text density="compact">The transform pipeline then applies platform-specific conversions — CSS custom properties for web, Swift constants for iOS, and XML resources for Android.</aui-text>
+        </aui-stack>
+
+        <!-- Citations -->
+        <aui-stack direction="row" gap="2" wrap>
+          <aui-chip size="sm">W3C Design Tokens Spec</aui-chip>
+          <aui-chip size="sm">Style Dictionary Docs</aui-chip>
+          <aui-chip size="sm">Token Pipeline Guide</aui-chip>
+        </aui-stack>
+
+        <!-- Action toolbar -->
+        <aui-stack direction="row" gap="2" align-items="center">
+          <aui-copy-button density="compact"></aui-copy-button>
+          <aui-button ghost hide-label label="Regenerate" icon-leading="arrow-clockwise" density="compact"></aui-button>
+          <aui-divider orientation="vertical" style="height: 1rem;"></aui-divider>
+          <aui-button ghost hide-label label="Good response" icon-leading="thumbs-up" density="compact"></aui-button>
+          <aui-button ghost hide-label label="Bad response" icon-leading="thumbs-down" density="compact"></aui-button>
+        </aui-stack>
+
+      </aui-stack>

package/dist/docs/blocks/agent-code-result.yaml

@@ -0,0 +1,41 @@
+name: agent-code-result
+type: block
+summary: Code execution result with source, output status badge, and stdout display.
+description: |
+  A code execution card showing source and output. Header has a solid-bg file-text icon avatar, mono filename heading with spacer, and aui-copy-button. Source aui-code block shows the executed code. A second compact header below shows a success badge, muted stdout label with spacer, and mono execution time. A second aui-code block shows the stdout result. Both code blocks drop radius inside the container automatically. Container uses max-width="lg".
+components:
+  - aui-container
+  - aui-header
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+  - aui-copy-button
+  - aui-code
+kind: widget
+examples:
+  - description: Code execution result with source, output status badge, and stdout display.
+    html: |-
+      <aui-container kind="widget" bordered max-width="lg">
+        <aui-code-block filename="main.py" copyable>import pandas as pd
+
+      df = pd.read_csv("data/sales.csv")
+      monthly = df.groupby("month")["revenue"].sum()
+      print(monthly.to_string())</aui-code-block>
+
+        <!-- Output section -->
+        <aui-header density="compact">
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-badge success>Success</aui-badge>
+            <aui-text size="xs" muted spacer>stdout</aui-text>
+            <aui-text size="xs" muted font="mono">0.42s</aui-text>
+          </aui-stack>
+        </aui-header>
+        <aui-code>January     12450.00
+      February    15230.00
+      March       18920.00
+      April       14100.00
+      May         21340.00</aui-code>
+      </aui-container>

package/dist/docs/blocks/agent-context-panel.yaml

@@ -0,0 +1,96 @@
+name: agent-context-panel
+type: block
+summary: Sidebar context panel with file/link items, token usage bar, and add action.
+description: |
+  A sidebar-style panel for managing AI context. Header has title heading, muted xs text count (e.g. "4 items" — plain text, not a badge), spacer, and ghost close button in a vertically centered row stack. Content is split into Files and Links sections using aui-heading group labels. Each context item has a type-colored solid avatar, truncated file/link name (using truncate attr on heading, min-width="0" on stack), metadata, and a ghost remove button. File and link lists use gap="4" between items. Links show URL in mono font with truncate. Footer shows token usage label with spacer and mono counter, a progress bar, and a scrim add button.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-button
+  - aui-progress
+  - aui-divider
+kind: card
+examples:
+  - description: Sidebar context panel with file/link items, token usage bar, and add action.
+    html: |-
+      <aui-container kind="card" bordered max-width="sm" style="min-height: 24rem;">
+        <aui-header>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-heading size="md">Context</aui-heading>
+            <aui-text muted size="xs">4 items</aui-text>
+            <aui-text spacer></aui-text>
+            <aui-button ghost hide-label label="Close" icon-leading="x"></aui-button>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+
+              <aui-stack gap="4">
+                <aui-heading group>Files</aui-heading>
+                <aui-stack gap="4">
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-avatar size="xs" accent solid><aui-icon name="file-text" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="0" spacer min-width="0">
+                      <aui-heading size="sm" truncate>tokens.config.json</aui-heading>
+                      <aui-text muted size="xs">2.1 KB · Added 2m ago</aui-text>
+                    </aui-stack>
+                    <aui-button ghost hide-label label="Remove" icon-leading="x" size="sm"></aui-button>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-avatar size="xs" success solid><aui-icon name="file-text" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="0" spacer min-width="0">
+                      <aui-heading size="sm" truncate>README.md</aui-heading>
+                      <aui-text muted size="xs">4.8 KB · Added 5m ago</aui-text>
+                    </aui-stack>
+                    <aui-button ghost hide-label label="Remove" icon-leading="x" size="sm"></aui-button>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-avatar size="xs" warning solid><aui-icon name="image" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="0" spacer min-width="0">
+                      <aui-heading size="sm" truncate>architecture-diagram.png</aui-heading>
+                      <aui-text muted size="xs">128 KB · Added 12m ago</aui-text>
+                    </aui-stack>
+                    <aui-button ghost hide-label label="Remove" icon-leading="x" size="sm"></aui-button>
+                  </aui-stack>
+                </aui-stack>
+              </aui-stack>
+
+              <aui-divider></aui-divider>
+
+              <aui-stack gap="4">
+                <aui-heading group>Links</aui-heading>
+                <aui-stack gap="4">
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-avatar size="xs" info solid><aui-icon name="globe-simple" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="0" spacer min-width="0">
+                      <aui-heading size="sm" truncate>Style Dictionary Docs</aui-heading>
+                      <aui-text muted size="xs" font="mono" truncate>styledictionary.dev/guides</aui-text>
+                    </aui-stack>
+                    <aui-button ghost hide-label label="Remove" icon-leading="x" size="sm"></aui-button>
+                  </aui-stack>
+                </aui-stack>
+              </aui-stack>
+
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <aui-stack gap="2">
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-text size="xs" muted spacer>Token usage</aui-text>
+              <aui-text size="xs" muted>12.4K / 128K</aui-text>
+            </aui-stack>
+            <aui-progress value="10"></aui-progress>
+            <aui-button scrim width="full" icon-leading="plus" size="sm">Add file or URL</aui-button>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>

package/dist/docs/blocks/agent-feedback-controls.yaml

@@ -0,0 +1,101 @@
+name: agent-feedback-controls
+type: block
+summary: Feedback toolbar with like/dislike, copy, retry, share, and version navigation.
+description: |
+  Three variants of a chat message action toolbar. Default shows thumbs up/down in aui-button-group inline, divider, copy/retry in aui-button-group inline, spacer, share + aui-dropdown-menu (More) in aui-button-group inline. Liked state has the thumbs-up colored with success intent. Multi-version adds prev/next navigation in aui-button-group inline with a mono counter before the feedback buttons. Copy action uses aui-copy-button; all other actions use ghost icon-only buttons with vertical dividers between groups. All button-groups use the inline attribute for tight spacing.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-text
+  - aui-button
+  - aui-copy-button
+  - aui-button-group
+  - aui-dropdown-menu
+  - aui-option
+  - aui-divider
+kind: widget
+examples:
+  - description: Feedback toolbar with like/dislike, copy, retry, share, and version navigation.
+    html: |-
+      <aui-stack>
+
+        <!-- Default state -->
+        <aui-container kind="widget" bordered>
+          <aui-inset>
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-button-group inline>
+                <aui-button ghost hide-label label="Good response" icon-leading="thumbs-up" density="compact"></aui-button>
+                <aui-button ghost hide-label label="Bad response" icon-leading="thumbs-down" density="compact"></aui-button>
+              </aui-button-group>
+              <aui-divider orientation="vertical" style="height: 1.25rem;"></aui-divider>
+              <aui-button-group inline>
+                <aui-copy-button density="compact"></aui-copy-button>
+                <aui-button ghost hide-label label="Retry" icon-leading="arrow-clockwise" density="compact"></aui-button>
+              </aui-button-group>
+              <aui-text spacer></aui-text>
+              <aui-button-group inline>
+                <aui-button ghost hide-label label="Share" icon-leading="arrow-up" density="compact"></aui-button>
+                <aui-dropdown-menu label="More" ghost hide-label density="compact">
+                  <aui-option value="view-source">View source</aui-option>
+                  <aui-option value="report">Report issue</aui-option>
+                </aui-dropdown-menu>
+              </aui-button-group>
+            </aui-stack>
+          </aui-inset>
+        </aui-container>
+
+        <!-- Liked state -->
+        <aui-container kind="widget" bordered>
+          <aui-inset>
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-button-group inline>
+                <aui-button ghost hide-label label="Good response" icon-leading="thumbs-up" density="compact" success style="color: var(--aui-solid);"></aui-button>
+                <aui-button ghost hide-label label="Bad response" icon-leading="thumbs-down" density="compact"></aui-button>
+              </aui-button-group>
+              <aui-divider orientation="vertical" style="height: 1.25rem;"></aui-divider>
+              <aui-button-group inline>
+                <aui-copy-button density="compact"></aui-copy-button>
+                <aui-button ghost hide-label label="Retry" icon-leading="arrow-clockwise" density="compact"></aui-button>
+              </aui-button-group>
+              <aui-text spacer></aui-text>
+              <aui-button-group inline>
+                <aui-button ghost hide-label label="Share" icon-leading="arrow-up" density="compact"></aui-button>
+                <aui-dropdown-menu label="More" ghost hide-label density="compact">
+                  <aui-option value="view-source">View source</aui-option>
+                  <aui-option value="report">Report issue</aui-option>
+                </aui-dropdown-menu>
+              </aui-button-group>
+            </aui-stack>
+          </aui-inset>
+        </aui-container>
+
+        <!-- Multi-version navigation -->
+        <aui-container kind="widget" bordered>
+          <aui-inset>
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-button-group inline>
+                <aui-button ghost hide-label label="Previous" icon-leading="caret-left" density="compact"></aui-button>
+                <aui-text size="xs" muted font="mono">2 / 3</aui-text>
+                <aui-button ghost hide-label label="Next" icon-leading="caret-right" density="compact"></aui-button>
+              </aui-button-group>
+              <aui-divider orientation="vertical" style="height: 1.25rem;"></aui-divider>
+              <aui-button-group inline>
+                <aui-button ghost hide-label label="Good response" icon-leading="thumbs-up" density="compact"></aui-button>
+                <aui-button ghost hide-label label="Bad response" icon-leading="thumbs-down" density="compact"></aui-button>
+              </aui-button-group>
+              <aui-divider orientation="vertical" style="height: 1.25rem;"></aui-divider>
+              <aui-button-group inline>
+                <aui-copy-button density="compact"></aui-copy-button>
+                <aui-button ghost hide-label label="Retry" icon-leading="arrow-clockwise" density="compact"></aui-button>
+              </aui-button-group>
+              <aui-text spacer></aui-text>
+              <aui-dropdown-menu label="More" ghost hide-label density="compact">
+                <aui-option value="view-source">View source</aui-option>
+                <aui-option value="report">Report issue</aui-option>
+              </aui-dropdown-menu>
+            </aui-stack>
+          </aui-inset>
+        </aui-container>
+
+      </aui-stack>

package/dist/docs/blocks/agent-follow-up-chips.yaml

@@ -0,0 +1,37 @@
+name: agent-follow-up-chips
+type: block
+summary: Follow-up question suggestions and action chips with group label and divider.
+description: |
+  A suggestion area below an agent response. Top section has an aui-heading group label ("Continue exploring") and wrapping outline buttons with lightbulb icons for follow-up questions. A divider separates questions from action chips (copy, save, share) using scrim buttons. Both sections use flex-wrap for responsive layout.
+components:
+  - aui-stack
+  - aui-heading
+  - aui-button
+  - aui-button-group
+  - aui-divider
+kind: widget
+examples:
+  - description: Follow-up question suggestions and action chips with group label and divider.
+    html: |-
+      <aui-stack>
+
+        <!-- Question suggestions -->
+        <aui-stack gap="2">
+          <aui-heading group>Continue exploring</aui-heading>
+          <aui-stack direction="row" gap="2" wrap>
+            <aui-button outline size="sm" icon-leading="lightbulb">How does the token pipeline handle theme variants?</aui-button>
+            <aui-button outline size="sm" icon-leading="lightbulb">What are the performance implications of this approach?</aui-button>
+            <aui-button outline size="sm" icon-leading="lightbulb">Can you show me a test example for the store?</aui-button>
+          </aui-stack>
+        </aui-stack>
+
+        <aui-divider></aui-divider>
+
+        <!-- Action chips -->
+        <aui-button-group>
+          <aui-button scrim size="sm" icon-leading="copy">Copy response</aui-button>
+          <aui-button scrim size="sm" icon-leading="star">Save to notes</aui-button>
+          <aui-button scrim size="sm" icon-leading="arrow-up">Share</aui-button>
+        </aui-button-group>
+
+      </aui-stack>