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

package/dist/docs/blocks/agent-model-selector.yaml

@@ -0,0 +1,83 @@
+name: agent-model-selector
+type: block
+summary: Model selection panel with capability tags, context usage, and active state.
+description: |
+  A card-based model picker using aui-select mode="list" inside a container with max-width="sm". Header has title heading with spacer and ghost close button. Each option shows a colored dot badge with align-items="start" and margin-top: 0.375rem to vertically align with the first line of text, model name heading with optional "New" accent badge, muted xs description, and flex-wrapped capability tag badges. Inner stacks use min-width="0" attr for truncation. The selected option gets a checkmark. Footer shows context token usage label with spacer and mono counter.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-select
+  - aui-option
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-badge
+  - aui-button
+kind: card
+examples:
+  - description: Model selection panel with capability tags, context usage, and active state.
+    html: |-
+      <aui-container kind="card" bordered max-width="sm">
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-heading size="md" spacer>Select model</aui-heading>
+            <aui-button ghost hide-label label="Close" icon-leading="x" size="sm"></aui-button>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-select mode="list">
+            <aui-option value="opus" selected>
+              <aui-stack direction="row" gap="3" align-items="start" width="full">
+                <aui-badge accent dot style="margin-top: 0.375rem;"></aui-badge>
+                <aui-stack gap="1" spacer min-width="0">
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-heading size="sm">Claude Opus 4</aui-heading>
+                    <aui-badge accent>New</aui-badge>
+                  </aui-stack>
+                  <aui-text muted size="xs">Most capable model for complex reasoning and analysis.</aui-text>
+                  <aui-stack direction="row" gap="1" wrap>
+                    <aui-badge>200K context</aui-badge>
+                    <aui-badge>Vision</aui-badge>
+                    <aui-badge>Code</aui-badge>
+                  </aui-stack>
+                </aui-stack>
+              </aui-stack>
+            </aui-option>
+            <aui-option value="sonnet">
+              <aui-stack direction="row" gap="3" align-items="start" width="full">
+                <aui-badge success dot style="margin-top: 0.375rem;"></aui-badge>
+                <aui-stack gap="1" spacer min-width="0">
+                  <aui-heading size="sm">Claude Sonnet 4</aui-heading>
+                  <aui-text muted size="xs">Balanced performance and speed for everyday tasks.</aui-text>
+                  <aui-stack direction="row" gap="1" wrap>
+                    <aui-badge>200K context</aui-badge>
+                    <aui-badge>Vision</aui-badge>
+                    <aui-badge>Code</aui-badge>
+                  </aui-stack>
+                </aui-stack>
+              </aui-stack>
+            </aui-option>
+            <aui-option value="haiku">
+              <aui-stack direction="row" gap="3" align-items="start" width="full">
+                <aui-badge warning dot style="margin-top: 0.375rem;"></aui-badge>
+                <aui-stack gap="1" spacer min-width="0">
+                  <aui-heading size="sm">Claude Haiku 4</aui-heading>
+                  <aui-text muted size="xs">Fastest response times for simple tasks.</aui-text>
+                  <aui-stack direction="row" gap="1" wrap>
+                    <aui-badge>200K context</aui-badge>
+                    <aui-badge>Code</aui-badge>
+                  </aui-stack>
+                </aui-stack>
+              </aui-stack>
+            </aui-option>
+          </aui-select>
+        </aui-content>
+        <aui-footer>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-text size="xs" muted spacer>Context usage</aui-text>
+            <aui-text size="xs" muted font="mono">24K / 200K</aui-text>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>

package/dist/docs/blocks/agent-prompt-input.yaml

@@ -0,0 +1,49 @@
+name: agent-prompt-input
+type: block
+summary: Chat composer with file attachment chips, expandable textarea, and toolbar with send button.
+description: |
+  A chat input widget for agent conversations. Top section shows removable file attachment aui-chip elements (icon + filename, removable) in a flex-wrap row. Middle section has an expandable aui-textarea with width="full" and placeholder hint. Bottom toolbar has ghost icon-only buttons (attach, search, model) on the left, spacer, and a primary accent send button on the right. All wrapped in a bordered widget container with max-width="lg" and aui-inset padding.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-textarea
+  - aui-chip
+  - aui-icon
+  - aui-text
+  - aui-button
+kind: widget
+examples:
+  - description: Chat composer with file attachment chips, expandable textarea, and toolbar with send button.
+    html: |-
+      <aui-container kind="widget" bordered max-width="lg">
+        <aui-inset>
+          <aui-stack>
+
+            <!-- Attached files -->
+            <aui-stack direction="row" gap="2" wrap>
+              <aui-chip removable>
+                <aui-icon name="file-text" size="xs"></aui-icon>
+                config.json
+              </aui-chip>
+              <aui-chip removable>
+                <aui-icon name="image" size="xs"></aui-icon>
+                screenshot.png
+              </aui-chip>
+            </aui-stack>
+
+            <!-- Textarea -->
+            <aui-textarea placeholder="Ask anything… Use / for commands" width="full" style="min-height: 3.5rem;"></aui-textarea>
+
+            <!-- Toolbar -->
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-button ghost hide-label label="Attach file" icon-leading="paperclip"></aui-button>
+              <aui-button ghost hide-label label="Search" icon-leading="magnifying-glass"></aui-button>
+              <aui-button ghost hide-label label="Model" icon-leading="robot"></aui-button>
+              <aui-text spacer></aui-text>
+              <aui-button primary accent hide-label label="Send" icon-leading="arrow-up"></aui-button>
+            </aui-stack>
+
+          </aui-stack>
+        </aui-inset>
+      </aui-container>

package/dist/docs/blocks/agent-streaming-message.yaml

@@ -0,0 +1,46 @@
+name: agent-streaming-message
+type: block
+summary: Agent streaming response with identity row, prose + code block mid-stream, and stop button.
+description: |
+  A chat message being actively generated. Identity row has an accent solid avatar, assistant name heading with spacer, "Generating" accent badge, elapsed time in mono font, and a ghost hide-label stop button (icon-leading="stop") — all in the same header row. Content interleaves prose text with a mid-stream aui-code-block (with language attribute). No separate stop button below; it lives in the identity row.
+components:
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+  - aui-button
+  - aui-code-block
+kind: widget
+examples:
+  - description: Agent streaming response with identity row, prose + code block mid-stream, and stop button.
+    html: |-
+      <aui-stack>
+
+        <!-- Identity row -->
+        <aui-stack direction="row" gap="3" align-items="center">
+          <aui-avatar size="sm" accent solid><aui-icon name="sparkle"></aui-icon></aui-avatar>
+          <aui-heading size="sm" spacer>Assistant</aui-heading>
+          <aui-badge accent>Generating</aui-badge>
+          <aui-text size="xs" muted font="mono">8s</aui-text>
+          <aui-button ghost hide-label label="Stop generating" icon-leading="stop" size="sm"></aui-button>
+        </aui-stack>
+
+        <!-- Streaming content -->
+        <aui-stack>
+          <aui-text size="sm">The recommended approach for <strong>token pipeline optimization</strong> involves three stages. First, we normalize all source tokens into a canonical format…</aui-text>
+
+          <!-- Code block mid-stream -->
+          <aui-code-block language="typescript">export function normalizeTokens(raw: RawTokens): Token[] {
+        return Object.entries(raw).map(([key, def]) => ({
+          name: key,
+          value: resolveAlias(def.$value, raw),
+          type: def.$type ?? inferType(def.$value),
+        }))
+      }</aui-code-block>
+
+          <aui-text size="sm">Next, the transform stage applies platform-specific conversions. Each platform registers its own…</aui-text>
+        </aui-stack>
+
+      </aui-stack>

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

@@ -0,0 +1,68 @@
+name: agent-suggestion-card
+type: block
+summary: Agent code suggestion with diff preview, impact tags, and accept/edit/dismiss actions.
+description: |
+  A suggestion card from an AI agent proposing a code refactor. Header has a lightbulb avatar, suggestion title, rationale text, and a confidence badge. Content shows an explanation with inline mono code references, a bordered widget with a diff-style aui-code preview (showing removed/added lines), and impact tags. Footer has three equal buttons (Dismiss ghost, Edit scrim, Accept primary accent) using grow="1" basis="0".
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+  - aui-button
+  - aui-button-group
+  - aui-code
+kind: card
+examples:
+  - description: Agent code suggestion with diff preview, impact tags, and accept/edit/dismiss actions.
+    html: |-
+      <aui-container kind="card" bordered max-width="lg">
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-avatar size="sm" accent solid><aui-icon name="lightbulb"></aui-icon></aui-avatar>
+            <aui-stack gap="1" spacer min-width="0">
+              <aui-heading size="md">Extract shared validation logic</aui-heading>
+              <aui-text muted size="xs">Reduces duplication across 3 form handlers</aui-text>
+            </aui-stack>
+            <aui-stack direction="row" gap="1">
+              <aui-badge success>High</aui-badge>
+            </aui-stack>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack>
+              <aui-text muted size="sm">The validation logic in <aui-text font="mono" size="sm" inline>handleSubmit</aui-text>, <aui-text font="mono" size="sm" inline>handleUpdate</aui-text>, and <aui-text font="mono" size="sm" inline>handleCreate</aui-text> can be unified into a single <aui-text font="mono" size="sm" inline>validateFields()</aui-text> function.</aui-text>
+
+              <!-- Diff preview -->
+              <aui-code-block filename="src/handlers/validation.ts">- function handleSubmit(data) {
+      -   if (!data.email) throw new Error('Email required')
+      -   if (!data.name) throw new Error('Name required')
+      + function validateFields(data, required) {
+      +   for (const field of required) {
+      +     if (!data[field]) throw new Error(\`\${field} required\`)
+      +   }
+        }</aui-code-block>
+
+              <!-- Impact tags -->
+              <aui-stack direction="row" gap="2">
+                <aui-badge>3 files affected</aui-badge>
+                <aui-badge success>−24 lines</aui-badge>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <aui-button-group>
+            <aui-button scrim grow="1" basis="0">Dismiss</aui-button>
+            <aui-button scrim grow="1" basis="0">Edit</aui-button>
+            <aui-button primary accent grow="1" basis="0">Accept</aui-button>
+          </aui-button-group>
+        </aui-footer>
+      </aui-container>

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

@@ -0,0 +1,112 @@
+name: agent-task-card
+type: block
+summary: Multi-step agent task card with timeline, log output, approval gate, and cancel action.
+description: |
+  A compound task execution card showing an agent running through a multi-step pipeline. Header uses aui-heading group for the uppercase "Agent Task" category label, with the task title as aui-heading size="lg" below, and a running status badge in the trailing slot. The content area uses aui-stepper with aui-step children for a vertical timeline of steps, each with a state-driven indicator avatar using solid attribute and shrink="0" (done=success with check, running=accent with aui-spinner, gate=warning with warning icon, pending=--aui-neutral-highest with --aui-ink-muted circle icon). Step titles use aui-heading size="sm". The running step includes an aui-code block for log output with spacer and min-width="0" on its stack. The gate step wraps its approval prompt and grow="1" action buttons in a bordered widget container. The footer uses a direction="row" stack with spacer for left-right alignment of elapsed time and a scrim danger cancel button. Connector lines between steps are handled by the aui-stepper/aui-step elements.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stepper
+  - aui-step
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-spinner
+  - aui-badge
+  - aui-button
+  - aui-button-group
+  - aui-code
+kind: card
+examples:
+  - description: Multi-step agent task card with timeline, log output, approval gate, and cancel action.
+    html: |-
+      <aui-container kind="card" bordered max-width="lg">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading group>Agent Task</aui-heading>
+              <aui-heading size="lg">Deploy token pipeline to staging</aui-heading>
+            </aui-stack>
+          </span>
+          <span slot="trailing">
+            <aui-badge accent>Running</aui-badge>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stepper>
+
+              <!-- Step 1: Done -->
+              <aui-step state="done">
+                <aui-avatar size="xs" success shrink="0" solid><aui-icon name="check" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1">
+                  <aui-heading size="sm">Pull latest from main</aui-heading>
+                  <aui-text muted size="xs">Completed in 4s</aui-text>
+                </aui-stack>
+              </aui-step>
+
+              <!-- Step 2: Done -->
+              <aui-step state="done">
+                <aui-avatar size="xs" success shrink="0" solid><aui-icon name="check" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1">
+                  <aui-heading size="sm">Run test suite</aui-heading>
+                  <aui-text muted size="xs">142 tests passed · 0 failed · 12s</aui-text>
+                </aui-stack>
+              </aui-step>
+
+              <!-- Step 3: Running -->
+              <aui-step state="running">
+                <aui-avatar size="xs" accent shrink="0" solid><aui-spinner size="xs"></aui-spinner></aui-avatar>
+                <aui-stack gap="2" spacer min-width="0">
+                  <aui-stack gap="1">
+                    <aui-heading size="sm">Build Docker image</aui-heading>
+                    <aui-text muted size="xs">Building layers…</aui-text>
+                  </aui-stack>
+      <aui-code>Step 1/5 : FROM node:20-alpine
+      Step 2/5 : COPY package*.json ./
+      Step 3/5 : RUN npm ci --production</aui-code>
+                </aui-stack>
+              </aui-step>
+
+              <!-- Step 4: Gate -->
+              <aui-step>
+                <aui-avatar size="xs" warning shrink="0" solid><aui-icon name="warning" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="3" spacer min-width="0">
+                  <aui-heading size="sm">Approval required</aui-heading>
+                  <aui-container kind="widget" bordered>
+                    <aui-inset>
+                      <aui-stack gap="3">
+                        <aui-text size="sm">Deploy build <strong>#847</strong> to staging environment?</aui-text>
+                        <aui-button-group>
+                          <aui-button primary accent grow="1" basis="0">Approve</aui-button>
+                          <aui-button scrim grow="1" basis="0">Skip</aui-button>
+                        </aui-button-group>
+                      </aui-stack>
+                    </aui-inset>
+                  </aui-container>
+                </aui-stack>
+              </aui-step>
+
+              <!-- Step 5: Pending -->
+              <aui-step>
+                <aui-avatar size="xs" shrink="0" style="background: var(--aui-neutral-highest); color: var(--aui-ink-muted);"><aui-icon name="circle" size="xs" muted></aui-icon></aui-avatar>
+                <aui-stack gap="1">
+                  <aui-text size="sm" muted>Health check</aui-text>
+                </aui-stack>
+              </aui-step>
+
+            </aui-stepper>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-text muted size="xs" spacer>Elapsed: 0:42</aui-text>
+            <aui-button scrim danger>Cancel Task</aui-button>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>

package/dist/docs/blocks/agent-thinking-state.yaml

@@ -0,0 +1,56 @@
+name: agent-thinking-state
+type: block
+summary: Agent thinking indicator with reasoning chain, tool call badges, and streaming preview.
+description: |
+  An agent thinking state showing an identity row (accent avatar with sparkle icon, "Thinking..." heading, elapsed time in mono font), a collapsible reasoning section using aui-disclosure (initially open) with thought steps using status dots (success for done, accent for active), inline monospace tool call badges, and a streaming text preview below. Thought steps use the dot variant of aui-badge for compact status indication.
+components:
+  - aui-disclosure
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+kind: widget
+examples:
+  - description: Agent thinking indicator with reasoning chain, tool call badges, and streaming preview.
+    html: |-
+      <aui-stack>
+
+        <!-- Identity row -->
+        <aui-stack direction="row" gap="3" align-items="center">
+          <aui-avatar size="sm" accent solid><aui-icon name="sparkle"></aui-icon></aui-avatar>
+          <aui-heading size="sm" spacer>Thinking…</aui-heading>
+          <aui-text size="xs" muted font="mono">12s</aui-text>
+        </aui-stack>
+
+        <!-- Reasoning card (collapsible) -->
+        <aui-disclosure summary="Reasoning" open>
+          <aui-stack>
+            <aui-stack direction="row" gap="2" align-items="start">
+              <aui-badge success dot style="margin-top: 0.375rem;"></aui-badge>
+              <aui-text size="sm">Analyzing the component architecture and identifying entry points</aui-text>
+            </aui-stack>
+            <aui-stack direction="row" gap="2" align-items="start">
+              <aui-badge success dot style="margin-top: 0.375rem;"></aui-badge>
+              <aui-text size="sm">Searching for related patterns using <aui-badge accent font="mono">web_search</aui-badge></aui-text>
+            </aui-stack>
+            <aui-stack direction="row" gap="2" align-items="start">
+              <aui-badge success dot style="margin-top: 0.375rem;"></aui-badge>
+              <aui-text size="sm">Reading configuration files via <aui-badge success font="mono">read_file</aui-badge></aui-text>
+            </aui-stack>
+            <aui-stack direction="row" gap="2" align-items="start">
+              <aui-badge success dot style="margin-top: 0.375rem;"></aui-badge>
+              <aui-text size="sm">Cross-referencing token definitions with component usage</aui-text>
+            </aui-stack>
+            <aui-stack direction="row" gap="2" align-items="start">
+              <aui-badge accent dot style="margin-top: 0.375rem;"></aui-badge>
+              <aui-text size="sm">Formulating implementation plan based on constraints…</aui-text>
+            </aui-stack>
+          </aui-stack>
+        </aui-disclosure>
+
+        <!-- Streaming preview -->
+        <aui-text muted size="sm">Based on the analysis, the recommended approach is to refactor the token pipeline using a three-stage transform…</aui-text>
+
+      </aui-stack>

package/dist/docs/blocks/agent-tool-use-card.yaml

@@ -0,0 +1,142 @@
+name: agent-tool-use-card
+type: block
+summary: Collapsible tool invocation cards showing parameters, results, and error states.
+description: |
+  A vertical stack of tool use cards representing agent function calls. Each card has a compact header with a status avatar (success=check, running=aui-spinner, error=x) using solid backgrounds, an aui-heading size="sm" font="mono" for the tool name, colored category badge, and elapsed time. Expanded cards wrap aui-disclosure sections in an aui-disclosure-group for coordinated open/close. Disclosures are initially open and collapsible, replacing static section headings. Parameters use aui-text font="mono" with inline info-colored key names. Results vary by tool type: search results as aui-heading size="sm" title with url/snippet stacks, code output in aui-code blocks, or error messages in an aui-alert danger. Running cards show header only (collapsed). Showcases four states: success+search, running, success+code, and error.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-disclosure
+  - aui-disclosure-group
+  - aui-stack
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-spinner
+  - aui-badge
+  - aui-heading
+  - aui-code
+  - aui-alert
+kind: widget
+examples:
+  - description: Collapsible tool invocation cards showing parameters, results, and error states.
+    html: |-
+      <aui-stack gap="4">
+
+        <!-- Tool call: Success, expanded, search results -->
+        <aui-container kind="widget" bordered>
+          <aui-header density="compact">
+            <span slot="leading">
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-avatar size="xs" success solid><aui-icon name="check" size="xs"></aui-icon></aui-avatar>
+                <aui-heading size="sm" font="mono">web_search</aui-heading>
+                <aui-badge accent>Search</aui-badge>
+              </aui-stack>
+            </span>
+            <span slot="trailing">
+              <aui-text size="xs" muted>1.2s</aui-text>
+            </span>
+          </aui-header>
+          <aui-content>
+            <aui-inset>
+              <aui-disclosure-group>
+                <aui-disclosure summary="Parameters" open>
+                  <aui-text size="sm" font="mono"><aui-text info font="mono" size="sm" inline>query</aui-text>: "design token pipeline best practices"</aui-text>
+                </aui-disclosure>
+                <aui-disclosure summary="Results" open>
+                  <aui-stack>
+                    <aui-stack gap="1">
+                      <aui-heading size="sm">Design Tokens: A Complete Guide</aui-heading>
+                      <aui-text size="xs" muted style="font-family: var(--aui-font-mono);">https://tokens.guide/pipeline</aui-text>
+                      <aui-text size="xs" muted>Learn how to build scalable design token pipelines that sync across platforms…</aui-text>
+                    </aui-stack>
+                    <aui-stack gap="1">
+                      <aui-heading size="sm">Token Automation with Style Dictionary</aui-heading>
+                      <aui-text size="xs" muted style="font-family: var(--aui-font-mono);">https://styledictionary.dev/guides</aui-text>
+                      <aui-text size="xs" muted>Automate your design-to-code pipeline using Style Dictionary transforms…</aui-text>
+                    </aui-stack>
+                  </aui-stack>
+                </aui-disclosure>
+              </aui-disclosure-group>
+            </aui-inset>
+          </aui-content>
+        </aui-container>
+
+        <!-- Tool call: Running, collapsed -->
+        <aui-container kind="widget" bordered>
+          <aui-header density="compact">
+            <span slot="leading">
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-avatar size="xs" accent solid><aui-spinner size="xs"></aui-spinner></aui-avatar>
+                <aui-heading size="sm" font="mono">execute_code</aui-heading>
+                <aui-badge warning>Code</aui-badge>
+              </aui-stack>
+            </span>
+            <span slot="trailing">
+              <aui-text size="xs" muted>3.8s</aui-text>
+            </span>
+          </aui-header>
+        </aui-container>
+
+        <!-- Tool call: Success, expanded, code output -->
+        <aui-container kind="widget" bordered>
+          <aui-header density="compact">
+            <span slot="leading">
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-avatar size="xs" success solid><aui-icon name="check" size="xs"></aui-icon></aui-avatar>
+                <aui-heading size="sm" font="mono">read_file</aui-heading>
+                <aui-badge success>File</aui-badge>
+              </aui-stack>
+            </span>
+            <span slot="trailing">
+              <aui-text size="xs" muted>0.4s</aui-text>
+            </span>
+          </aui-header>
+          <aui-content>
+            <aui-inset>
+              <aui-disclosure-group>
+                <aui-disclosure summary="Parameters" open>
+                  <aui-text size="sm" font="mono"><aui-text info font="mono" size="sm" inline>path</aui-text>: "src/tokens/config.json"</aui-text>
+                </aui-disclosure>
+                <aui-disclosure summary="Output" open>
+      <aui-code>{
+        "source": ["src/tokens/**/*.json"],
+        "platforms": {
+          "css": {
+            "transformGroup": "css",
+            "buildPath": "dist/css/"
+          }
+        }
+      }</aui-code>
+                </aui-disclosure>
+              </aui-disclosure-group>
+            </aui-inset>
+          </aui-content>
+        </aui-container>
+
+        <!-- Tool call: Error -->
+        <aui-container kind="widget" bordered>
+          <aui-header density="compact">
+            <span slot="leading">
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-avatar size="xs" danger solid><aui-icon name="x" size="xs"></aui-icon></aui-avatar>
+                <aui-heading size="sm" font="mono">execute_code</aui-heading>
+                <aui-badge warning>Code</aui-badge>
+              </aui-stack>
+            </span>
+            <span slot="trailing">
+              <aui-text size="xs" muted>0.8s</aui-text>
+            </span>
+          </aui-header>
+          <aui-content>
+            <aui-inset>
+              <aui-alert danger icon="warning">
+                <aui-text size="sm" font="mono">TypeError: Cannot read properties of undefined (reading 'map')</aui-text>
+              </aui-alert>
+            </aui-inset>
+          </aui-content>
+        </aui-container>
+
+      </aui-stack>

package/dist/docs/blocks/auth-card.yaml

@@ -0,0 +1,74 @@
+name: auth-card
+type: block
+summary: Login card with social buttons, email/password fields, remember checkbox, and footer link.
+description: |
+  A centered authentication card. Header has a title and subtitle centered. Social login buttons use scrim variant with icon-leading and equal sizing via grow="1" basis="0". An "or continue with email" divider separates social from form fields. Email and password fields use aui-field + aui-input in a gap="3" stack. A remember-me checkbox and forgot password link row sits above the full-width primary accent sign-in button. Footer has a secondary create-account link.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-field
+  - aui-input
+  - aui-checkbox
+  - aui-button
+  - aui-button-group
+  - aui-divider
+  - aui-footer
+kind: panel
+examples:
+  - description: Login card with social buttons, email/password fields, remember checkbox, and footer link.
+    html: |-
+      <aui-container kind="panel" bordered max-width="sm">
+        <aui-inset>
+          <aui-stack gap="4">
+
+            <!-- Header -->
+            <aui-stack gap="1" align-items="center" text="center">
+              <aui-heading size="xl">Welcome back</aui-heading>
+              <aui-text muted size="sm">Sign in to your account to continue.</aui-text>
+            </aui-stack>
+
+            <!-- Social buttons -->
+            <aui-button-group>
+              <aui-button scrim grow="1" basis="0" icon-leading="globe-simple">Google</aui-button>
+              <aui-button scrim grow="1" basis="0" icon-leading="globe-simple">GitHub</aui-button>
+            </aui-button-group>
+
+            <!-- Divider -->
+            <aui-stack direction="row" gap="3" align-items="center">
+              <aui-divider spacer></aui-divider>
+              <aui-text muted size="xs">or continue with email</aui-text>
+              <aui-divider spacer></aui-divider>
+            </aui-stack>
+
+            <!-- Form fields -->
+            <aui-stack gap="3">
+              <aui-field label="Email" width="full">
+                <aui-input type="email" placeholder="you@company.com" width="full"></aui-input>
+              </aui-field>
+              <aui-field label="Password" width="full">
+                <aui-input type="password" placeholder="••••••••" width="full"></aui-input>
+              </aui-field>
+            </aui-stack>
+
+            <!-- Remember + forgot -->
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-checkbox label="Remember me"></aui-checkbox>
+              <aui-text size="xs" spacer></aui-text>
+              <aui-text size="xs"><a href="#">Forgot password?</a></aui-text>
+            </aui-stack>
+
+            <!-- Submit -->
+            <aui-button primary accent width="full">Sign in</aui-button>
+
+          </aui-stack>
+        </aui-inset>
+
+        <aui-footer>
+          <aui-stack align-items="center">
+            <aui-text muted size="sm">Don't have an account? <a href="#">Create one</a></aui-text>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>

package/dist/docs/blocks/chart-grouped.yaml

@@ -29,7 +29,7 @@ examples:
           <aui-inset>
             <aui-stack gap="1">
               <!-- Bars: paired groups as direct children of align-items="end" row -->
-              <aui-stack direction="row" gap="3" align-items="end" spacer style="height: 10rem;">
+              <aui-stack direction="row" gap="3" align-items="end" style="height: 10rem;">
                 <!-- Chrome: Desktop 55%, Mobile 40% -->
                 <aui-stack direction="row" gap="1" align-items="end" spacer style="height: 100%;">
                   <div style="flex: 1; height: 55%; background: var(--aui-chart-2); border-radius: var(--aui-radius);"></div>