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

package/dist/components/agent.js

@@ -1,4 +1,4 @@
-import { b as t, d as a, e as i, f as s, g, h as n, i as u, j as d, k as r } from "../chunks/agent-BF_R_HJk.js";
+import { b as t, d as a, e as i, f as s, g, h as n, i as u, j as d, k as r } from "../chunks/agent-XMhz_6OA.js";
 export {
   t as AuiAgentActivity,
   a as AuiAgentFeed,

package/dist/components/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,14 @@
+import { AgentElement, AttributeSchema } from '../../element/index.ts';
+export declare class AuiCheckboxGroup extends AgentElement {
+    #private;
+    static attributes: AttributeSchema;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    value: string;
+    label: string;
+    min: number;
+    max: number;
+    protected activate(): void;
+    protected dispose(): void;
+}

package/dist/components/checkbox-group/index.d.ts

@@ -0,0 +1 @@
+export { AuiCheckboxGroup } from './checkbox-group.ts';

package/dist/components/editor.js

@@ -1,4 +1,4 @@
-import { c as x, A as p, C as z } from "../chunks/agent-BF_R_HJk.js";
+import { c as x, A as p, C as z } from "../chunks/agent-XMhz_6OA.js";
 const b = x("aui-editor");
 class S extends p {
   static attributes = {

package/dist/components/form/form.d.ts

@@ -0,0 +1,12 @@
+import { AgentElement, AttributeSchema } from '../../element/index.ts';
+export declare class AuiForm extends AgentElement {
+    #private;
+    static attributes: AttributeSchema;
+    action: string;
+    method: string;
+    get noValidate(): boolean;
+    protected activate(): void;
+    protected dispose(): void;
+    /** Programmatic submit — runs validation then dispatches. */
+    submit(): void;
+}

package/dist/components/form/index.d.ts

@@ -0,0 +1 @@
+export { AuiForm } from './form.ts';

package/dist/components/graph.js

@@ -1,5 +1,5 @@
 import { AuiEditor as E, AuiEditorLayer as S } from "./editor.js";
-import { A as f } from "../chunks/agent-BF_R_HJk.js";
+import { A as f } from "../chunks/agent-XMhz_6OA.js";
 const w = "http://www.w3.org/2000/svg";
 class N extends E {
   static attributes = {

package/dist/components/index.d.ts

@@ -70,3 +70,5 @@ export { AuiCarousel } from './carousel/index.ts';
 export { AuiNotificationCenter } from './notification-center/index.ts';
 export type { Notification } from './notification-center/index.ts';
 export { AuiEmptyState } from './empty-state/index.ts';
+export { AuiCheckboxGroup } from './checkbox-group/index.ts';
+export { AuiForm } from './form/index.ts';

package/dist/components/noodles/noodle-controller.d.ts

@@ -18,7 +18,7 @@ export interface NoodleOptions {
     selector?: string;
     /** Allow interactive creation/deletion of connections (default: false) */
     editable?: boolean;
-    /** Noodle stroke color (default: 'var(--aui-accent-500)') */
+    /** Noodle stroke color (default: 'var(--aui-accent)') */
     color?: string;
     /** Noodle stroke width in px (default: 2) */
     strokeWidth?: number;

package/dist/components.js

@@ -1,13 +1,13 @@
-import { A as a } from "./chunks/agent-BF_R_HJk.js";
-import { a as p, b as m, d as g, e as c, f as C, g as T, h as S, i as b, j as x, k as I, R as P, r as k, s as R } from "./chunks/agent-BF_R_HJk.js";
-import { A as f, a as h, b as D, c as G, d as B, e as E, f as M, g as w, h as y, i as H, j as O, k as v, l as L, m as N, n as j, o as U, p as _, q, r as z, s as Y, t as J, u as K, v as Q, w as V, x as W, y as X, z as Z, B as $, C as aa, D as ia, E as sa, F as ea, G as Aa, H as ua, I as ta, J as oa, K as ra, L as na, M as da, N as la, O as pa, P as ma, Q as ga, R as ca, S as Ca, T as Ta, U as Sa, V as ba, W as xa, X as Ia, Y as Pa, Z as ka, _ as Ra, $ as Fa, a0 as fa, a1 as ha, a2 as Da, a3 as Ga, a4 as Ba, a5 as Ea, a6 as Ma, a7 as wa, a8 as ya, a9 as Ha, aa as Oa, ab as va, ac as La, ad as Na, ae as ja, af as Ua, ag as _a, ah as qa, ai as za, aj as Ya, ak as Ja, al as Ka, am as Qa, an as Va, ao as Wa, ap as Xa, aq as Za, ar as $a, as as ai } from "./chunks/meter-Dju8ik6C.js";
-import { g as si, a as ei, r as Ai } from "./chunks/registry-BNb5ABBs.js";
+import { A as a } from "./chunks/agent-XMhz_6OA.js";
+import { a as p, b as m, d as c, e as g, f as C, g as T, h as S, i as b, j as x, k as I, R as P, r as k, s as R } from "./chunks/agent-XMhz_6OA.js";
+import { A as h, a as G, b as f, c as D, d as B, e as E, f as M, g as w, h as y, i as H, j as O, k as v, l as L, m as N, n as j, o as U, p as _, q, r as z, s as Y, t as J, u as K, v as Q, w as V, x as W, y as X, z as Z, B as $, C as aa, D as ia, E as sa, F as ea, G as ua, H as Aa, I as ta, J as oa, K as ra, L as na, M as da, N as la, O as pa, P as ma, Q as ca, R as ga, S as Ca, T as Ta, U as Sa, V as ba, W as xa, X as Ia, Y as Pa, Z as ka, _ as Ra, $ as Fa, a0 as ha, a1 as Ga, a2 as fa, a3 as Da, a4 as Ba, a5 as Ea, a6 as Ma, a7 as wa, a8 as ya, a9 as Ha, aa as Oa, ab as va, ac as La, ad as Na, ae as ja, af as Ua, ag as _a, ah as qa, ai as za, aj as Ya, ak as Ja, al as Ka, am as Qa, an as Va, ao as Wa, ap as Xa, aq as Za, ar as $a, as as ai, at as ii, au as si } from "./chunks/form-oekEhwja.js";
+import { g as ui, a as Ai, r as ti } from "./chunks/registry-BNb5ABBs.js";
 class e extends a {
 }
-class A extends a {
-}
 class u extends a {
 }
+class A extends a {
+}
 class t extends a {
 }
 class o extends a {
@@ -18,20 +18,20 @@ class n extends a {
 }
 export {
   p as ACTION_REGISTRY,
-  f as AuiAccordion,
-  h as AuiAccordionItem,
+  h as AuiAccordion,
+  G as AuiAccordionItem,
   m as AuiAgentActivity,
-  g as AuiAgentFeed,
-  c as AuiAgentInput,
+  c as AuiAgentFeed,
+  g as AuiAgentInput,
   C as AuiAgentMessage,
   T as AuiAgentPanel,
   S as AuiAgentPrompt,
   b as AuiAgentSeeds,
   x as AuiAgentText,
   I as AuiAgentThread,
-  A as AuiAlert,
-  D as AuiAppShell,
-  G as AuiAvatarGroup,
+  u as AuiAlert,
+  f as AuiAppShell,
+  D as AuiAvatarGroup,
   B as AuiBreadcrumb,
   E as AuiBreadcrumbItem,
   M as AuiButton,
@@ -39,88 +39,90 @@ export {
   y as AuiCalendarRangePicker,
   H as AuiCarousel,
   O as AuiCheckbox,
-  v as AuiChip,
-  L as AuiCodeBlock,
-  N as AuiColorArea,
-  j as AuiColorField,
-  U as AuiColorPicker,
-  _ as AuiColorSlider,
-  q as AuiCommand,
-  z as AuiCommandEmpty,
-  Y as AuiCommandGroup,
-  J as AuiCommandInput,
-  K as AuiCommandItem,
-  Q as AuiCommandList,
-  V as AuiContainer,
-  W as AuiContextMenu,
-  X as AuiCopyButton,
-  Z as AuiDateField,
-  $ as AuiDialog,
-  aa as AuiDisclosure,
-  ia as AuiDisclosureGroup,
-  sa as AuiDrawer,
-  ea as AuiDropdownMenu,
+  v as AuiCheckboxGroup,
+  L as AuiChip,
+  N as AuiCodeBlock,
+  j as AuiColorArea,
+  U as AuiColorField,
+  _ as AuiColorPicker,
+  q as AuiColorSlider,
+  z as AuiCommand,
+  Y as AuiCommandEmpty,
+  J as AuiCommandGroup,
+  K as AuiCommandInput,
+  Q as AuiCommandItem,
+  V as AuiCommandList,
+  W as AuiContainer,
+  X as AuiContextMenu,
+  Z as AuiCopyButton,
+  $ as AuiDateField,
+  aa as AuiDialog,
+  ia as AuiDisclosure,
+  sa as AuiDisclosureGroup,
+  ea as AuiDrawer,
+  ua as AuiDropdownMenu,
   Aa as AuiEmptyState,
-  ua as AuiFeed,
-  ta as AuiFileUpload,
-  oa as AuiGripper,
-  ra as AuiHoverCard,
-  na as AuiIcon,
-  da as AuiImage,
-  la as AuiInput,
-  pa as AuiInputOtp,
-  u as AuiLink,
-  ma as AuiMeter,
+  ta as AuiFeed,
+  oa as AuiFileUpload,
+  ra as AuiForm,
+  na as AuiGripper,
+  da as AuiHoverCard,
+  la as AuiIcon,
+  pa as AuiImage,
+  ma as AuiInput,
+  ca as AuiInputOtp,
+  A as AuiLink,
+  ga as AuiMeter,
   o as AuiNavItem,
-  ga as AuiNotificationCenter,
-  ca as AuiOptgroup,
-  Ca as AuiOption,
-  Ta as AuiPage,
-  Sa as AuiPageContext,
-  ba as AuiPageMain,
-  xa as AuiPagination,
-  Ia as AuiPane,
-  Pa as AuiPanes,
-  ka as AuiProgress,
-  Ra as AuiProgressCircle,
-  Fa as AuiRadio,
+  Ca as AuiNotificationCenter,
+  Ta as AuiOptgroup,
+  Sa as AuiOption,
+  ba as AuiPage,
+  xa as AuiPageContext,
+  Ia as AuiPageMain,
+  Pa as AuiPagination,
+  ka as AuiPane,
+  Ra as AuiPanes,
+  Fa as AuiProgress,
+  ha as AuiProgressCircle,
+  Ga as AuiRadio,
   fa as AuiRadioGroup,
-  ha as AuiRange,
-  Da as AuiRoot,
-  Ga as AuiSegment,
-  Ba as AuiSegmentedControl,
-  Ea as AuiSelect,
-  Ma as AuiSidebar,
-  wa as AuiSidebarContent,
-  ya as AuiSidebarFooter,
-  Ha as AuiSidebarHeader,
+  Da as AuiRange,
+  Ba as AuiRoot,
+  Ea as AuiSegment,
+  Ma as AuiSegmentedControl,
+  wa as AuiSelect,
+  ya as AuiSidebar,
+  Ha as AuiSidebarContent,
+  Oa as AuiSidebarFooter,
+  va as AuiSidebarHeader,
   e as AuiSkeleton,
-  Oa as AuiSparkline,
+  La as AuiSparkline,
   t as AuiSpinner,
-  va as AuiStat,
+  Na as AuiStat,
   n as AuiStep,
   r as AuiStepper,
-  La as AuiSwitch,
-  Na as AuiTab,
-  ja as AuiTabPanel,
-  Ua as AuiTable,
-  _a as AuiTableBody,
-  qa as AuiTableCell,
-  za as AuiTableHead,
-  Ya as AuiTableHeader,
-  Ja as AuiTableRow,
-  Ka as AuiTabs,
-  Qa as AuiTagGroup,
-  Va as AuiTextarea,
-  Wa as AuiTimeField,
-  Xa as AuiToast,
-  Za as AuiTooltip,
-  $a as AuiTree,
-  ai as AuiTreeItem,
+  ja as AuiSwitch,
+  Ua as AuiTab,
+  _a as AuiTabPanel,
+  qa as AuiTable,
+  za as AuiTableBody,
+  Ya as AuiTableCell,
+  Ja as AuiTableHead,
+  Ka as AuiTableHeader,
+  Qa as AuiTableRow,
+  Va as AuiTabs,
+  Wa as AuiTagGroup,
+  Xa as AuiTextarea,
+  Za as AuiTimeField,
+  $a as AuiToast,
+  ai as AuiTooltip,
+  ii as AuiTree,
+  si as AuiTreeItem,
   P as ROLE_DEFAULTS,
-  si as getIcon,
-  ei as registerIcon,
-  Ai as registerIcons,
+  ui as getIcon,
+  Ai as registerIcon,
+  ti as registerIcons,
   k as renderMarkdown,
   R as sanitizeHtml
 };

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-chat.yaml

@@ -1,32 +1,42 @@
 name: agent-chat
 type: block
 summary: Full agent chat interface with message feed, composer, and suggestion chips.
-description: >
-  Complete chat composition showing a multi-turn conversation between
-  user and AI assistant. Uses aui-agent-panel as the outer shell to
-  coordinate header, feed, and input. Includes message feed with
-  auto-scroll, threaded messages with avatars, markdown rendering,
-  activity indicators, bordered prompt input with action toolbar,
-  and suggestion chips. Demonstrates all aui-agent-* components
-  working together as a cohesive chat experience.
-
-components: [aui-agent-panel, aui-header, aui-content, aui-footer, aui-stack, aui-heading, aui-text, aui-avatar, aui-badge, aui-button, aui-icon, aui-agent-feed, aui-agent-thread, aui-agent-message, aui-agent-text, aui-agent-activity, aui-agent-seeds, aui-agent-input, aui-agent-prompt]
+description: |
+  Complete chat composition showing a multi-turn conversation between user and AI assistant. Uses aui-agent-panel as the outer shell to coordinate header, feed, and input. Includes message feed with auto-scroll, threaded messages with avatars, markdown rendering, activity indicators, bordered prompt input with action toolbar, and suggestion chips. Demonstrates all aui-agent-* components working together as a cohesive chat experience.
+components:
+  - aui-agent-panel
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-badge
+  - aui-button
+  - aui-icon
+  - aui-agent-feed
+  - aui-agent-thread
+  - aui-agent-message
+  - aui-agent-text
+  - aui-agent-activity
+  - aui-agent-seeds
+  - aui-agent-input
+  - aui-agent-prompt
 kind: panel
-
 examples:
-  - html: |
+  - description: Full chat interface with multi-turn conversation, thinking indicator, and suggestion chips
+    html: |-
       <aui-agent-panel panel-title="Design Assistant" max-width="xl" style="height: 32rem;">
         <aui-header dividers>
-          <span slot="leading">
-            <aui-stack direction="row" gap="2" align-items="center">
-              <aui-avatar square>AI</aui-avatar>
-              <aui-stack gap="0">
-                <aui-heading size="sm">Design Assistant</aui-heading>
-                <aui-text muted size="xs">Claude 3.5 Sonnet</aui-text>
-              </aui-stack>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-avatar square>AI</aui-avatar>
+            <aui-stack gap="0" spacer>
+              <aui-heading size="sm">Design Assistant</aui-heading>
+              <aui-text muted size="xs">Claude Sonnet 4</aui-text>
             </aui-stack>
-          </span>
-          <aui-badge accent slot="trailing">Online</aui-badge>
+            <aui-badge accent>Online</aui-badge>
+          </aui-stack>
         </aui-header>
         <aui-agent-feed auto-scroll scrollable>
           <aui-agent-thread role="user" sender="You">
@@ -68,9 +78,8 @@ examples:
         </aui-agent-input>
         <aui-agent-seeds options='[{"value":"tokens","label":"Generate token file"},{"value":"themes","label":"Add dark theme"},{"value":"chart","label":"Chart palette"}]'></aui-agent-seeds>
       </aui-agent-panel>
-    description: Full chat interface with multi-turn conversation, thinking indicator, and suggestion chips.
-
-  - html: |
+  - description: Code review chat with structured markdown feedback
+    html: |-
       <aui-agent-panel panel-title="Code Review" max-width="xl" style="height: 28rem;">
         <aui-header dividers>
           <span slot="leading">
@@ -108,4 +117,3 @@ examples:
           </aui-agent-prompt>
         </aui-agent-input>
       </aui-agent-panel>
-    description: Code review chat with structured markdown feedback.

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>