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

package/dist/api.components.json

@@ -1,7 +1,7 @@
 {
   "package": "@agent-ui-kit/web-components",
-  "version": "0.0.16",
-  "generated": "2026-03-22T04:11:44.159Z",
+  "version": "0.0.17",
+  "generated": "2026-03-22T05:03:36.020Z",
   "description": "Complete web component library for agent-powered interfaces. Framework-agnostic, light DOM, CSS-first.",
   "css": "https://unpkg.com/@agent-ui-kit/web-components/dist/agent-ui.css",
   "register": "https://unpkg.com/@agent-ui-kit/web-components/dist/register.js",
@@ -366,7 +366,7 @@
       "examples": [
         {
           "description": "Chat conversation with a user question and an assistant response containing a code block",
-          "html": "<aui-agent-feed auto-scroll scrollable style=\"height: 24rem;\">\n  <aui-agent-thread role=\"user\" sender=\"You\">\n    <aui-agent-message role=\"user\">\n      <aui-agent-text format=\"plain\">Can you help me write a Python script that reads a CSV file and groups rows by the \"department\" column?</aui-agent-text>\n    </aui-agent-message>\n  </aui-agent-thread>\n  <aui-agent-thread role=\"assistant\" sender=\"Claude\">\n    <aui-avatar>C</aui-avatar>\n    <aui-agent-message role=\"assistant\">\n      <aui-agent-text>Sure! Here's a script using `pandas` to group CSV rows by department:\n\n```python\nimport pandas as pd\n\ndf = pd.read_csv(\"data.csv\")\ngrouped = df.groupby(\"department\")\n\nfor name, group in grouped:\n    print(f\"\\n--- {name} ---\")\n    print(group.to_string(index=False))\n```\n\nThis reads `data.csv`, groups by the **department** column, and prints each group. Want me to add export to separate files?</aui-agent-text>\n    </aui-agent-message>\n  </aui-agent-thread>\n</aui-agent-feed>"
+          "html": "<aui-agent-feed auto-scroll scrollable style=\"height: 24rem;\">\n  <aui-agent-thread role=\"user\" sender=\"You\">\n    <aui-agent-message role=\"user\">\n      <aui-agent-text format=\"plain\">Can you help me write a Python script that reads a CSV file and groups rows by the \"department\" column?</aui-agent-text>\n    </aui-agent-message>\n  </aui-agent-thread>\n  <aui-agent-thread role=\"assistant\" sender=\"Claude\">\n    <aui-avatar>C</aui-avatar>\n    <aui-agent-message role=\"assistant\">\n      <aui-agent-text><template>Sure! Here's a script using `pandas` to group CSV rows by department:\n\n```python\nimport pandas as pd\n\ndf = pd.read_csv(\"data.csv\")\ngrouped = df.groupby(\"department\")\n\nfor name, group in grouped:\n    print(f\"\\n--- {name} ---\")\n    print(group.to_string(index=False))\n```\n\nThis reads `data.csv`, groups by the **department** column, and prints each group. Want me to add export to separate files?</template></aui-agent-text>\n    </aui-agent-message>\n  </aui-agent-thread>\n</aui-agent-feed>"
         },
         {
           "description": "Feed with an active thinking indicator — the assistant is processing the user's question",
@@ -2013,7 +2013,7 @@
             "xl",
             "fill"
           ],
-          "description": "Controls dimensions, typography, icon size, and spacing simultaneously. Swaps 7 tokens at once. The special \"fill\" value stretches the button to 100% width and height of its parent cell with no minimum constraints.\n"
+          "description": "Controls dimensions, typography, icon size, and spacing simultaneously. Swaps 7 tokens at once. The special \"fill\" value stretches the button to 100% width and height of its parent cell with no minimum constraints. Combine with hide-label and icon-size to create game board cells (e.g. aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"X\" icon-leading=\"x\").\n"
         },
         "radius": {
           "syntax": "boolean",
@@ -2157,7 +2157,7 @@
       "modifiers": {
         "hide-label": {
           "syntax": "boolean",
-          "description": "Hides the label text and collapses the button to icon-only. Square button sized to --aui-size with width/height = var(--aui-size) and padding: 0. Use with a slotted icon, icon-leading, or the icon attribute. Auto-detected when no label attribute and no child text nodes are present.\n"
+          "description": "Hides the label text and collapses the button to icon-only. Square button sized to --aui-size with width/height = var(--aui-size) and padding: 0. Use with a slotted icon, icon-leading, or the icon attribute. Auto-detected when no label attribute and no child text nodes are present. When combined with size=\"fill\", the button stretches to fill its grid cell while hiding the label — used for game board cells (tic-tac-toe, battleship, connect-four) where the button fills a square grid cell and shows only an icon or nothing.\n"
         },
         "icon-size": {
           "syntax": "key-value",
@@ -2416,7 +2416,8 @@
         "Navigation links styled as buttons (href mode).",
         "Form submit/reset triggers.",
         "Buttons with text adornments (e.g. \"AI\" badge via text-leading).",
-        "Resize-responsive buttons that collapse adornments as space shrinks."
+        "Resize-responsive buttons that collapse adornments as space shrinks.",
+        "Game board cells using size=\"fill\" + hide-label inside aui-grid square (tic-tac-toe, battleship, connect-four)."
       ],
       "examples": [
         {
@@ -16401,6 +16402,53 @@
     }
   ],
   "blocks": [
+    {
+      "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.\n",
+      "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\">\n\n  <!-- Editor toolbar -->\n  <aui-container kind=\"widget\" bordered>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-button-group>\n          <aui-button ghost hide-label label=\"Bold\" icon-leading=\"file-text\" size=\"sm\"></aui-button>\n          <aui-button ghost hide-label label=\"Italic\" icon-leading=\"pencil\" size=\"sm\"></aui-button>\n          <aui-button ghost hide-label label=\"Underline\" icon-leading=\"minus\" size=\"sm\"></aui-button>\n        </aui-button-group>\n        <aui-divider orientation=\"vertical\" style=\"height: 1.25rem;\"></aui-divider>\n        <aui-button-group>\n          <aui-button ghost hide-label label=\"Align left\" icon-leading=\"list-checks\" size=\"sm\"></aui-button>\n          <aui-button ghost hide-label label=\"Align center\" icon-leading=\"list-checks\" size=\"sm\"></aui-button>\n        </aui-button-group>\n        <aui-divider orientation=\"vertical\" style=\"height: 1.25rem;\"></aui-divider>\n        <aui-button-group>\n          <aui-button ghost hide-label label=\"Link\" icon-leading=\"paperclip\" size=\"sm\"></aui-button>\n          <aui-button ghost hide-label label=\"Code\" icon-leading=\"file-text\" size=\"sm\"></aui-button>\n        </aui-button-group>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n\n  <!-- Table toolbar -->\n  <aui-container kind=\"widget\" bordered>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-button scrim size=\"sm\" icon-leading=\"sliders\">Filters</aui-button>\n        <aui-text size=\"xs\" muted spacer></aui-text>\n        <aui-button ghost hide-label label=\"Search\" icon-leading=\"magnifying-glass\" size=\"sm\"></aui-button>\n        <aui-button ghost hide-label label=\"Sort\" icon-leading=\"arrow-up\" size=\"sm\"></aui-button>\n        <aui-divider orientation=\"vertical\" style=\"height: 1.25rem;\"></aui-divider>\n        <aui-button primary accent size=\"sm\" icon-leading=\"plus\">Add row</aui-button>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n\n  <!-- Bulk selection toolbar -->\n  <aui-container kind=\"widget\" bordered accent>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-heading size=\"sm\">5 selected</aui-heading>\n        <aui-text size=\"xs\" muted spacer></aui-text>\n        <aui-button scrim size=\"sm\" icon-leading=\"pencil\">Edit</aui-button>\n        <aui-button scrim size=\"sm\" icon-leading=\"copy\">Duplicate</aui-button>\n        <aui-button scrim size=\"sm\" icon-leading=\"star\">Move</aui-button>\n        <aui-divider orientation=\"vertical\" style=\"height: 1.25rem;\"></aui-divider>\n        <aui-button ghost danger hide-label label=\"Delete\" icon-leading=\"trash\" size=\"sm\"></aui-button>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n\n</aui-stack>"
+        }
+      ]
+    },
+    {
+      "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.\n",
+      "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>\n\n  <!-- Code artifact -->\n  <aui-container kind=\"widget\" bordered interactive>\n    <aui-code style=\"max-height: 8rem; mask-image: linear-gradient(to bottom, black 60%, transparent);\">import { signal, computed, effect } from './reactivity'\n\nexport function createStore(initial) {\n  const state = signal(initial)\n  const derived = computed(() => transform(state.value))\n\n  effect(() => console.log('State changed:', state.value))\n\n  return { state, derived }\n}</aui-code>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n        <aui-avatar size=\"xs\" accent solid><aui-icon name=\"file-text\" size=\"xs\"></aui-icon></aui-avatar>\n        <aui-stack gap=\"1\" spacer min-width=\"0\">\n          <aui-heading density=\"compact\" truncate>reactivity-store.ts</aui-heading>\n          <aui-text muted size=\"xs\">TypeScript · 847 bytes</aui-text>\n        </aui-stack>\n        <aui-copy-button></aui-copy-button>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n\n  <!-- Document artifact -->\n  <aui-container kind=\"widget\" bordered interactive>\n    <aui-code style=\"max-height: 8rem; mask-image: linear-gradient(to bottom, black 60%, transparent);\"># Migration Guide v3.0\n\n## Breaking Changes\n\n1. The `createApp()` function now requires a config object\n2. Router middleware signature changed to async\n3. State management uses signals instead of observables</aui-code>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n        <aui-avatar size=\"xs\" success solid><aui-icon name=\"file-text\" size=\"xs\"></aui-icon></aui-avatar>\n        <aui-stack gap=\"1\" spacer min-width=\"0\">\n          <aui-heading density=\"compact\" truncate>migration-guide.md</aui-heading>\n          <aui-text muted size=\"xs\">Markdown · 2.1 KB</aui-text>\n        </aui-stack>\n        <aui-copy-button></aui-copy-button>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n\n</aui-stack>"
+        }
+      ]
+    },
     {
       "name": "agent-chat",
       "type": "block",
@@ -16440,195 +16488,206 @@
       ]
     },
     {
-      "name": "announcement-card",
+      "name": "agent-chat-response",
       "type": "block",
-      "summary": "Announcement card with image area, description, and contextual footer actions.",
-      "description": "A card featuring a tall image or illustration area at top, followed by a title, description, and footer with a primary action and a contextual badge or label. Use for product announcements, deprecation notices, or feature highlights.\n",
+      "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.\n",
       "components": [
-        "aui-container",
-        "aui-content",
-        "aui-footer",
-        "aui-inset",
         "aui-stack",
         "aui-heading",
         "aui-text",
+        "aui-avatar",
+        "aui-icon",
         "aui-badge",
-        "aui-button"
+        "aui-chip",
+        "aui-button",
+        "aui-copy-button",
+        "aui-code",
+        "aui-divider"
       ],
-      "kind": "card",
+      "kind": "widget",
       "examples": [
         {
-          "description": "Announcement card with image area, description, and contextual footer actions.",
-          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\" style=\"overflow: hidden;\">\n  <div style=\"height: 12rem; background: linear-gradient(135deg, var(--aui-control) 0%, var(--aui-panel) 100%);\"></div>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-badge warning>Warning</aui-badge>\n        <aui-heading size=\"lg\">Observability Plus is replacing Monitoring</aui-heading>\n        <aui-text muted size=\"sm\">Switch to the improved way to explore your data with natural language. Monitoring will no longer be available on the Pro plan in November, 2025</aui-text>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\"><aui-button primary>Create Query</aui-button></span>\n  </aui-footer>\n</aui-container>"
+          "description": "Agent chat message with identity row, prose + code content, citations, and action toolbar.",
+          "html": "<aui-stack>\n\n  <!-- Identity row -->\n  <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n    <aui-avatar density=\"compact\" accent solid><aui-icon name=\"sparkle\"></aui-icon></aui-avatar>\n    <aui-heading density=\"compact\" spacer>Assistant</aui-heading>\n    <aui-badge accent>Searched 3 sources</aui-badge>\n  </aui-stack>\n\n  <!-- Response body -->\n  <aui-stack>\n    <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>\n\n    <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>\n\n    <aui-code>{\n  \"color\": {\n    \"primary\": {\n      \"$value\": \"#0066FF\",\n      \"$type\": \"color\"\n    }\n  }\n}</aui-code>\n\n    <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>\n  </aui-stack>\n\n  <!-- Citations -->\n  <aui-stack direction=\"row\" gap=\"2\" wrap>\n    <aui-chip size=\"sm\">W3C Design Tokens Spec</aui-chip>\n    <aui-chip size=\"sm\">Style Dictionary Docs</aui-chip>\n    <aui-chip size=\"sm\">Token Pipeline Guide</aui-chip>\n  </aui-stack>\n\n  <!-- Action toolbar -->\n  <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n    <aui-copy-button density=\"compact\"></aui-copy-button>\n    <aui-button ghost hide-label label=\"Regenerate\" icon-leading=\"arrow-clockwise\" density=\"compact\"></aui-button>\n    <aui-divider orientation=\"vertical\" style=\"height: 1rem;\"></aui-divider>\n    <aui-button ghost hide-label label=\"Good response\" icon-leading=\"thumbs-up\" density=\"compact\"></aui-button>\n    <aui-button ghost hide-label label=\"Bad response\" icon-leading=\"thumbs-down\" density=\"compact\"></aui-button>\n  </aui-stack>\n\n</aui-stack>"
         }
       ]
     },
     {
-      "name": "bpm-process",
+      "name": "agent-code-result",
       "type": "block",
-      "summary": "Cross-Functional BPM — 16 nodes, 20 connections.",
-      "description": "Visual graph block rendered from the Cross-Functional BPM dataset using aui-graph components with port-selector noodle connections.\n",
+      "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\".\n",
       "components": [
         "aui-container",
+        "aui-header",
+        "aui-stack",
+        "aui-heading",
         "aui-text",
-        "aui-graph-ui",
-        "aui-graph-layer",
-        "aui-graph-node",
-        "aui-graph-noodle",
-        "aui-graph-port"
+        "aui-avatar",
+        "aui-icon",
+        "aui-badge",
+        "aui-copy-button",
+        "aui-code"
       ],
+      "kind": "widget",
       "examples": [
         {
-          "description": "Cross-Functional BPM — 16 nodes, 20 connections.",
-          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 45.375rem; min-width: 91.875rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- Customer Request → Self-Service Portal -->\n    <aui-graph-noodle from=\"bp-request:right\" to=\"bp-portal:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Customer Request → Lead Qualification -->\n    <aui-graph-noodle from=\"bp-request:bottom\" to=\"bp-qualify:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Self-Service Portal → Lead Qualification -->\n    <aui-graph-noodle from=\"bp-portal:bottom\" to=\"bp-qualify:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Lead Qualification → Quote Generation -->\n    <aui-graph-noodle from=\"bp-qualify:right\" to=\"bp-quote:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Quote Generation → Legal Review -->\n    <aui-graph-noodle from=\"bp-quote:bottom\" to=\"bp-review:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Quote Generation → Credit Assessment -->\n    <aui-graph-noodle from=\"bp-quote:bottom\" to=\"bp-credit:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Quote Generation → Contract Negotiation -->\n    <aui-graph-noodle from=\"bp-quote:right\" to=\"bp-negotiate:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Legal Review → Compliance Check -->\n    <aui-graph-noodle from=\"bp-review:right\" to=\"bp-compliance:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Compliance Check → Digital Signature -->\n    <aui-graph-noodle from=\"bp-compliance:right\" to=\"bp-sign:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Contract Negotiation → Digital Signature -->\n    <aui-graph-noodle from=\"bp-negotiate:bottom\" to=\"bp-sign:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Credit Assessment → Invoice Generation -->\n    <aui-graph-noodle from=\"bp-credit:right\" to=\"bp-invoice:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Invoice Generation → Payment Processing -->\n    <aui-graph-noodle from=\"bp-invoice:right\" to=\"bp-payment:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Invoice Generation → Service Provisioning -->\n    <aui-graph-noodle from=\"bp-invoice:bottom\" to=\"bp-provision:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Digital Signature → Onboarding Workflow -->\n    <aui-graph-noodle from=\"bp-sign:right\" to=\"bp-onboard:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Payment Processing → Account Activation -->\n    <aui-graph-noodle from=\"bp-payment:bottom\" to=\"bp-activate:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Service Provisioning → Account Activation -->\n    <aui-graph-noodle from=\"bp-provision:right\" to=\"bp-activate:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Account Activation → Onboarding Workflow -->\n    <aui-graph-noodle from=\"bp-activate:top\" to=\"bp-onboard:bottom\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Onboarding Workflow → Customer Feedback -->\n    <aui-graph-noodle from=\"bp-onboard:top\" to=\"bp-feedback:right\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Account Activation → Escalation Manager -->\n    <aui-graph-noodle from=\"bp-activate:right\" to=\"bp-escalation:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Escalation Manager → Contract Negotiation -->\n    <aui-graph-noodle from=\"bp-escalation:top\" to=\"bp-negotiate:bottom\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- Customer Request -->\n    <aui-graph-node x=\"24\" y=\"46\" node-id=\"bp-request\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Customer Request</aui-text>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Self-Service Portal -->\n    <aui-graph-node x=\"260\" y=\"46\" node-id=\"bp-portal\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Self-Service Portal</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Customer Feedback -->\n    <aui-graph-node x=\"980\" y=\"46\" node-id=\"bp-feedback\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Customer Feedback</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Lead Qualification -->\n    <aui-graph-node x=\"260\" y=\"166\" node-id=\"bp-qualify\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Lead Qualification</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Quote Generation -->\n    <aui-graph-node x=\"500\" y=\"166\" node-id=\"bp-quote\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Quote Generation</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Contract Negotiation -->\n    <aui-graph-node x=\"740\" y=\"166\" node-id=\"bp-negotiate\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Contract Negotiation</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Legal Review -->\n    <aui-graph-node x=\"500\" y=\"286\" node-id=\"bp-review\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Legal Review</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Compliance Check -->\n    <aui-graph-node x=\"740\" y=\"286\" node-id=\"bp-compliance\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Compliance Check</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Digital Signature -->\n    <aui-graph-node x=\"980\" y=\"286\" node-id=\"bp-sign\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Digital Signature</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Credit Assessment -->\n    <aui-graph-node x=\"500\" y=\"406\" node-id=\"bp-credit\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Credit Assessment</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Invoice Generation -->\n    <aui-graph-node x=\"740\" y=\"406\" node-id=\"bp-invoice\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Invoice Generation</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Payment Processing -->\n    <aui-graph-node x=\"980\" y=\"406\" node-id=\"bp-payment\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Payment Processing</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Service Provisioning -->\n    <aui-graph-node x=\"740\" y=\"526\" node-id=\"bp-provision\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Service Provisioning</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Account Activation -->\n    <aui-graph-node x=\"980\" y=\"526\" node-id=\"bp-activate\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Account Activation</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Onboarding Workflow -->\n    <aui-graph-node x=\"1220\" y=\"286\" node-id=\"bp-onboard\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Onboarding Workflow</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Escalation Manager -->\n    <aui-graph-node x=\"1220\" y=\"526\" node-id=\"bp-escalation\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Escalation Manager</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n  </aui-graph-layer>\n</aui-graph-ui>"
+          "description": "Code execution result with source, output status badge, and stdout display.",
+          "html": "<aui-container kind=\"widget\" bordered max-width=\"lg\">\n  <aui-code-block filename=\"main.py\" copyable>import pandas as pd\n\ndf = pd.read_csv(\"data/sales.csv\")\nmonthly = df.groupby(\"month\")[\"revenue\"].sum()\nprint(monthly.to_string())</aui-code-block>\n\n  <!-- Output section -->\n  <aui-header density=\"compact\">\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-badge success>Success</aui-badge>\n      <aui-text size=\"xs\" muted spacer>stdout</aui-text>\n      <aui-text size=\"xs\" muted font=\"mono\">0.42s</aui-text>\n    </aui-stack>\n  </aui-header>\n  <aui-code>January     12450.00\nFebruary    15230.00\nMarch       18920.00\nApril       14100.00\nMay         21340.00</aui-code>\n</aui-container>"
         }
       ]
     },
     {
-      "name": "chart-activity",
+      "name": "agent-context-panel",
       "type": "block",
-      "summary": "Weekly activity chart with labeled columns and rounded bars.",
-      "description": "A card showing a 7-day activity grid. Each column has a day label and a tall container with a rounded bar showing the day's activity level. The bar height is proportional to the value. Use for fitness summaries, commit frequency, or daily usage patterns.\n",
+      "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.\n",
       "components": [
         "aui-container",
         "aui-header",
         "aui-content",
+        "aui-footer",
         "aui-inset",
         "aui-stack",
         "aui-heading",
-        "aui-text"
+        "aui-text",
+        "aui-avatar",
+        "aui-icon",
+        "aui-button",
+        "aui-progress",
+        "aui-divider"
       ],
       "kind": "card",
       "examples": [
         {
-          "description": "Weekly activity chart with labeled columns and rounded bars.",
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Weekly Fitness Summary</aui-heading>\n        <aui-text muted size=\"sm\">Calories and workout load by day</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"2\">\n        <aui-stack gap=\"1\" align-items=\"center\" spacer>\n          <aui-text muted size=\"xs\">M</aui-text>\n          <div style=\"width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;\">\n            <div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 78%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </div>\n        </aui-stack>\n        <aui-stack gap=\"1\" align-items=\"center\" spacer>\n          <aui-text muted size=\"xs\">T</aui-text>\n          <div style=\"width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;\">\n            <div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 35%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </div>\n        </aui-stack>\n        <aui-stack gap=\"1\" align-items=\"center\" spacer>\n          <aui-text muted size=\"xs\">W</aui-text>\n          <div style=\"width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;\">\n            <div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 65%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </div>\n        </aui-stack>\n        <aui-stack gap=\"1\" align-items=\"center\" spacer>\n          <aui-text muted size=\"xs\">T</aui-text>\n          <div style=\"width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;\">\n            <div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </div>\n        </aui-stack>\n        <aui-stack gap=\"1\" align-items=\"center\" spacer>\n          <aui-text muted size=\"xs\">F</aui-text>\n          <div style=\"width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;\">\n            <div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 90%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </div>\n        </aui-stack>\n        <aui-stack gap=\"1\" align-items=\"center\" spacer>\n          <aui-text muted size=\"xs\">S</aui-text>\n          <div style=\"width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;\">\n            <div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 25%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </div>\n        </aui-stack>\n        <aui-stack gap=\"1\" align-items=\"center\" spacer>\n          <aui-text muted size=\"xs\">S</aui-text>\n          <div style=\"width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;\">\n            <div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 45%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </div>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
+          "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;\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-heading size=\"md\">Context</aui-heading>\n      <aui-text muted size=\"xs\">4 items</aui-text>\n      <aui-text spacer></aui-text>\n      <aui-button ghost hide-label label=\"Close\" icon-leading=\"x\"></aui-button>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n\n        <aui-stack gap=\"4\">\n          <aui-heading group>Files</aui-heading>\n          <aui-stack gap=\"4\">\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-avatar size=\"xs\" accent solid><aui-icon name=\"file-text\" size=\"xs\"></aui-icon></aui-avatar>\n              <aui-stack gap=\"0\" spacer min-width=\"0\">\n                <aui-heading size=\"sm\" truncate>tokens.config.json</aui-heading>\n                <aui-text muted size=\"xs\">2.1 KB · Added 2m ago</aui-text>\n              </aui-stack>\n              <aui-button ghost hide-label label=\"Remove\" icon-leading=\"x\" size=\"sm\"></aui-button>\n            </aui-stack>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-avatar size=\"xs\" success solid><aui-icon name=\"file-text\" size=\"xs\"></aui-icon></aui-avatar>\n              <aui-stack gap=\"0\" spacer min-width=\"0\">\n                <aui-heading size=\"sm\" truncate>README.md</aui-heading>\n                <aui-text muted size=\"xs\">4.8 KB · Added 5m ago</aui-text>\n              </aui-stack>\n              <aui-button ghost hide-label label=\"Remove\" icon-leading=\"x\" size=\"sm\"></aui-button>\n            </aui-stack>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-avatar size=\"xs\" warning solid><aui-icon name=\"image\" size=\"xs\"></aui-icon></aui-avatar>\n              <aui-stack gap=\"0\" spacer min-width=\"0\">\n                <aui-heading size=\"sm\" truncate>architecture-diagram.png</aui-heading>\n                <aui-text muted size=\"xs\">128 KB · Added 12m ago</aui-text>\n              </aui-stack>\n              <aui-button ghost hide-label label=\"Remove\" icon-leading=\"x\" size=\"sm\"></aui-button>\n            </aui-stack>\n          </aui-stack>\n        </aui-stack>\n\n        <aui-divider></aui-divider>\n\n        <aui-stack gap=\"4\">\n          <aui-heading group>Links</aui-heading>\n          <aui-stack gap=\"4\">\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-avatar size=\"xs\" info solid><aui-icon name=\"globe-simple\" size=\"xs\"></aui-icon></aui-avatar>\n              <aui-stack gap=\"0\" spacer min-width=\"0\">\n                <aui-heading size=\"sm\" truncate>Style Dictionary Docs</aui-heading>\n                <aui-text muted size=\"xs\" font=\"mono\" truncate>styledictionary.dev/guides</aui-text>\n              </aui-stack>\n              <aui-button ghost hide-label label=\"Remove\" icon-leading=\"x\" size=\"sm\"></aui-button>\n            </aui-stack>\n          </aui-stack>\n        </aui-stack>\n\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-stack gap=\"2\">\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-text size=\"xs\" muted spacer>Token usage</aui-text>\n        <aui-text size=\"xs\" muted>12.4K / 128K</aui-text>\n      </aui-stack>\n      <aui-progress value=\"10\"></aui-progress>\n      <aui-button scrim width=\"full\" icon-leading=\"plus\" size=\"sm\">Add file or URL</aui-button>\n    </aui-stack>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
     {
-      "name": "chart-card",
+      "name": "agent-feedback-controls",
       "type": "block",
-      "summary": "Simple vertical bar chart card with month labels.",
-      "description": "A card showing a 6-month bar chart built with CSS. Header has the chart title and date range, content shows proportional bars with month labels, footer shows a trend summary. The simplest chart pattern — one data series, one color, clear labels.\n",
+      "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.\n",
       "components": [
         "aui-container",
-        "aui-header",
-        "aui-content",
-        "aui-footer",
         "aui-inset",
         "aui-stack",
-        "aui-heading",
-        "aui-text"
+        "aui-text",
+        "aui-button",
+        "aui-copy-button",
+        "aui-button-group",
+        "aui-dropdown-menu",
+        "aui-option",
+        "aui-divider"
       ],
-      "kind": "card",
+      "kind": "widget",
       "examples": [
         {
-          "description": "Simple vertical bar chart card with month labels.",
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Visitors</aui-heading>\n        <aui-text muted size=\"sm\">January – June 2026</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"1\">\n        <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" style=\"height: 10rem;\">\n          <div style=\"flex: 1; height: 45%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 72%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 58%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 30%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 85%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 65%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"1\">\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Jan</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Feb</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Mar</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Apr</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">May</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Jun</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"md\">Trending up by 5.2% this month</aui-heading>\n        <aui-text muted size=\"sm\">Showing total visitors for the last 6 months</aui-text>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>"
+          "description": "Feedback toolbar with like/dislike, copy, retry, share, and version navigation.",
+          "html": "<aui-stack>\n\n  <!-- Default state -->\n  <aui-container kind=\"widget\" bordered>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-button-group inline>\n          <aui-button ghost hide-label label=\"Good response\" icon-leading=\"thumbs-up\" density=\"compact\"></aui-button>\n          <aui-button ghost hide-label label=\"Bad response\" icon-leading=\"thumbs-down\" density=\"compact\"></aui-button>\n        </aui-button-group>\n        <aui-divider orientation=\"vertical\" style=\"height: 1.25rem;\"></aui-divider>\n        <aui-button-group inline>\n          <aui-copy-button density=\"compact\"></aui-copy-button>\n          <aui-button ghost hide-label label=\"Retry\" icon-leading=\"arrow-clockwise\" density=\"compact\"></aui-button>\n        </aui-button-group>\n        <aui-text spacer></aui-text>\n        <aui-button-group inline>\n          <aui-button ghost hide-label label=\"Share\" icon-leading=\"arrow-up\" density=\"compact\"></aui-button>\n          <aui-dropdown-menu label=\"More\" ghost hide-label density=\"compact\">\n            <aui-option value=\"view-source\">View source</aui-option>\n            <aui-option value=\"report\">Report issue</aui-option>\n          </aui-dropdown-menu>\n        </aui-button-group>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n\n  <!-- Liked state -->\n  <aui-container kind=\"widget\" bordered>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-button-group inline>\n          <aui-button ghost hide-label label=\"Good response\" icon-leading=\"thumbs-up\" density=\"compact\" success style=\"color: var(--aui-solid);\"></aui-button>\n          <aui-button ghost hide-label label=\"Bad response\" icon-leading=\"thumbs-down\" density=\"compact\"></aui-button>\n        </aui-button-group>\n        <aui-divider orientation=\"vertical\" style=\"height: 1.25rem;\"></aui-divider>\n        <aui-button-group inline>\n          <aui-copy-button density=\"compact\"></aui-copy-button>\n          <aui-button ghost hide-label label=\"Retry\" icon-leading=\"arrow-clockwise\" density=\"compact\"></aui-button>\n        </aui-button-group>\n        <aui-text spacer></aui-text>\n        <aui-button-group inline>\n          <aui-button ghost hide-label label=\"Share\" icon-leading=\"arrow-up\" density=\"compact\"></aui-button>\n          <aui-dropdown-menu label=\"More\" ghost hide-label density=\"compact\">\n            <aui-option value=\"view-source\">View source</aui-option>\n            <aui-option value=\"report\">Report issue</aui-option>\n          </aui-dropdown-menu>\n        </aui-button-group>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n\n  <!-- Multi-version navigation -->\n  <aui-container kind=\"widget\" bordered>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-button-group inline>\n          <aui-button ghost hide-label label=\"Previous\" icon-leading=\"caret-left\" density=\"compact\"></aui-button>\n          <aui-text size=\"xs\" muted font=\"mono\">2 / 3</aui-text>\n          <aui-button ghost hide-label label=\"Next\" icon-leading=\"caret-right\" density=\"compact\"></aui-button>\n        </aui-button-group>\n        <aui-divider orientation=\"vertical\" style=\"height: 1.25rem;\"></aui-divider>\n        <aui-button-group inline>\n          <aui-button ghost hide-label label=\"Good response\" icon-leading=\"thumbs-up\" density=\"compact\"></aui-button>\n          <aui-button ghost hide-label label=\"Bad response\" icon-leading=\"thumbs-down\" density=\"compact\"></aui-button>\n        </aui-button-group>\n        <aui-divider orientation=\"vertical\" style=\"height: 1.25rem;\"></aui-divider>\n        <aui-button-group inline>\n          <aui-copy-button density=\"compact\"></aui-copy-button>\n          <aui-button ghost hide-label label=\"Retry\" icon-leading=\"arrow-clockwise\" density=\"compact\"></aui-button>\n        </aui-button-group>\n        <aui-text spacer></aui-text>\n        <aui-dropdown-menu label=\"More\" ghost hide-label density=\"compact\">\n          <aui-option value=\"view-source\">View source</aui-option>\n          <aui-option value=\"report\">Report issue</aui-option>\n        </aui-dropdown-menu>\n      </aui-stack>\n    </aui-inset>\n  </aui-container>\n\n</aui-stack>"
         }
       ]
     },
     {
-      "name": "chart-donut",
+      "name": "agent-follow-up-chips",
       "type": "block",
-      "summary": "Donut chart card with center stat, legend, and selected segment footer.",
-      "description": "A card showing a CSS-drawn donut/ring chart with a center value, a legend row below the chart, and a footer showing the selected segment's value. Use for distribution data like browser share, traffic sources, or category breakdowns.\n",
+      "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.\n",
       "components": [
-        "aui-container",
-        "aui-header",
-        "aui-content",
-        "aui-footer",
-        "aui-inset",
         "aui-stack",
         "aui-heading",
-        "aui-text",
-        "aui-badge"
+        "aui-button",
+        "aui-button-group",
+        "aui-divider"
       ],
-      "kind": "card",
+      "kind": "widget",
       "examples": [
         {
-          "description": "Donut chart card with center stat, legend, and selected segment footer.",
-          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Browser Share</aui-heading>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-badge>Firefox</aui-badge>\n          <aui-text muted size=\"sm\">January – June 2026</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack align-items=\"center\">\n        <!-- Donut chart via SVG -->\n        <div style=\"position: relative; width: 9rem; height: 9rem;\">\n          <svg viewBox=\"0 0 100 100\" style=\"width: 100%; height: 100%; transform: rotate(-90deg);\">\n            <!--\n              C = 2π × 38 ≈ 238.76   Gap = 2 units per segment\n              Seg1 (60%): arc = 143.26, draw = 141.26, offset = 0\n              Seg2 (20%): arc =  47.75, draw =  45.75, offset = -143.26\n              Seg3 (20%): arc =  47.75, draw =  45.75, offset = -191.01\n            -->\n            <circle cx=\"50\" cy=\"50\" r=\"38\" fill=\"none\" style=\"stroke: var(--aui-chart-1);\" stroke-width=\"12\" stroke-dasharray=\"141.26 238.76\" stroke-dashoffset=\"0\"       stroke-linecap=\"butt\"/>\n            <circle cx=\"50\" cy=\"50\" r=\"38\" fill=\"none\" style=\"stroke: var(--aui-chart-2);\" stroke-width=\"12\" stroke-dasharray=\"45.75 238.76\"  stroke-dashoffset=\"-143.26\" stroke-linecap=\"butt\"/>\n            <circle cx=\"50\" cy=\"50\" r=\"38\" fill=\"none\" style=\"stroke: var(--aui-chart-3);\" stroke-width=\"12\" stroke-dasharray=\"45.75 238.76\"  stroke-dashoffset=\"-191.01\" stroke-linecap=\"butt\"/>\n          </svg>\n          <div style=\"position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;\">\n            <aui-heading size=\"xl\">1,125</aui-heading>\n            <aui-text muted size=\"xs\">Visitors</aui-text>\n          </div>\n        </div>\n        <!-- Legend -->\n        <aui-wrap gap=\"3\" style=\"justify-content: center;\">\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n            <div shrink=\"0\" style=\"width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-1);\"></div>\n            <aui-text muted size=\"xs\">Chrome</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n            <div shrink=\"0\" style=\"width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-2);\"></div>\n            <aui-text muted size=\"xs\">Safari</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n            <div shrink=\"0\" style=\"width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-3);\"></div>\n            <aui-text muted size=\"xs\">Firefox</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n            <div shrink=\"0\" style=\"width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-4);\"></div>\n            <aui-text muted size=\"xs\">Edge</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n            <div shrink=\"0\" style=\"width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-5);\"></div>\n            <aui-text muted size=\"xs\">Other</aui-text>\n          </aui-stack>\n        </aui-wrap>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\">\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" width=\"full\">\n        <aui-heading size=\"md\" spacer>Firefox</aui-heading>\n        <aui-text muted size=\"sm\">26%</aui-text>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>"
+          "description": "Follow-up question suggestions and action chips with group label and divider.",
+          "html": "<aui-stack>\n\n  <!-- Question suggestions -->\n  <aui-stack gap=\"2\">\n    <aui-heading group>Continue exploring</aui-heading>\n    <aui-stack direction=\"row\" gap=\"2\" wrap>\n      <aui-button outline size=\"sm\" icon-leading=\"lightbulb\">How does the token pipeline handle theme variants?</aui-button>\n      <aui-button outline size=\"sm\" icon-leading=\"lightbulb\">What are the performance implications of this approach?</aui-button>\n      <aui-button outline size=\"sm\" icon-leading=\"lightbulb\">Can you show me a test example for the store?</aui-button>\n    </aui-stack>\n  </aui-stack>\n\n  <aui-divider></aui-divider>\n\n  <!-- Action chips -->\n  <aui-button-group>\n    <aui-button scrim size=\"sm\" icon-leading=\"copy\">Copy response</aui-button>\n    <aui-button scrim size=\"sm\" icon-leading=\"star\">Save to notes</aui-button>\n    <aui-button scrim size=\"sm\" icon-leading=\"arrow-up\">Share</aui-button>\n  </aui-button-group>\n\n</aui-stack>"
         }
       ]
     },
     {
-      "name": "chart-grouped",
+      "name": "agent-model-selector",
       "type": "block",
-      "summary": "Grouped vertical bar chart comparing two data series.",
-      "description": "A card showing paired vertical bars per category for comparing two metrics side by side (e.g. Desktop vs Mobile). Labels are in a separate row below so bar height percentages resolve correctly against the constrained bar area.\n",
+      "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.\n",
       "components": [
         "aui-container",
         "aui-header",
         "aui-content",
         "aui-footer",
-        "aui-inset",
+        "aui-select",
+        "aui-option",
         "aui-stack",
         "aui-heading",
-        "aui-text"
+        "aui-text",
+        "aui-badge",
+        "aui-button"
       ],
       "kind": "card",
       "examples": [
         {
-          "description": "Grouped vertical bar chart comparing two data series.",
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Visitors by Device</aui-heading>\n        <aui-text muted size=\"sm\">January – June 2026</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"1\">\n        <!-- Bars: paired groups as direct children of align-items=\"end\" row -->\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"end\" spacer style=\"height: 10rem;\">\n          <!-- Chrome: Desktop 55%, Mobile 40% -->\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 100%;\">\n            <div style=\"flex: 1; height: 55%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n            <div style=\"flex: 1; height: 40%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </aui-stack>\n          <!-- Safari: Desktop 45%, Mobile 50% -->\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 100%;\">\n            <div style=\"flex: 1; height: 45%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n            <div style=\"flex: 1; height: 50%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </aui-stack>\n          <!-- Firefox: Desktop 70%, Mobile 90% -->\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 100%;\">\n            <div style=\"flex: 1; height: 70%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n            <div style=\"flex: 1; height: 90%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </aui-stack>\n          <!-- Edge: Desktop 35%, Mobile 30% -->\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 100%;\">\n            <div style=\"flex: 1; height: 35%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n            <div style=\"flex: 1; height: 30%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </aui-stack>\n          <!-- Other: Desktop 25%, Mobile 20% -->\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 100%;\">\n            <div style=\"flex: 1; height: 25%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n            <div style=\"flex: 1; height: 20%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </aui-stack>\n        </aui-stack>\n        <!-- Category labels row -->\n        <aui-stack direction=\"row\" gap=\"3\">\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Chrome</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Safari</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Firefox</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Edge</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Other</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"md\">Mobile overtook Desktop in March</aui-heading>\n        <aui-text muted size=\"sm\">Showing Desktop (light) and Mobile (dark) visitors</aui-text>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>"
+          "description": "Model selection panel with capability tags, context usage, and active state.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-heading size=\"md\" spacer>Select model</aui-heading>\n      <aui-button ghost hide-label label=\"Close\" icon-leading=\"x\" size=\"sm\"></aui-button>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-select mode=\"list\">\n      <aui-option value=\"opus\" selected>\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"start\" width=\"full\">\n          <aui-badge accent dot style=\"margin-top: 0.375rem;\"></aui-badge>\n          <aui-stack gap=\"1\" spacer min-width=\"0\">\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-heading size=\"sm\">Claude Opus 4</aui-heading>\n              <aui-badge accent>New</aui-badge>\n            </aui-stack>\n            <aui-text muted size=\"xs\">Most capable model for complex reasoning and analysis.</aui-text>\n            <aui-stack direction=\"row\" gap=\"1\" wrap>\n              <aui-badge>200K context</aui-badge>\n              <aui-badge>Vision</aui-badge>\n              <aui-badge>Code</aui-badge>\n            </aui-stack>\n          </aui-stack>\n        </aui-stack>\n      </aui-option>\n      <aui-option value=\"sonnet\">\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"start\" width=\"full\">\n          <aui-badge success dot style=\"margin-top: 0.375rem;\"></aui-badge>\n          <aui-stack gap=\"1\" spacer min-width=\"0\">\n            <aui-heading size=\"sm\">Claude Sonnet 4</aui-heading>\n            <aui-text muted size=\"xs\">Balanced performance and speed for everyday tasks.</aui-text>\n            <aui-stack direction=\"row\" gap=\"1\" wrap>\n              <aui-badge>200K context</aui-badge>\n              <aui-badge>Vision</aui-badge>\n              <aui-badge>Code</aui-badge>\n            </aui-stack>\n          </aui-stack>\n        </aui-stack>\n      </aui-option>\n      <aui-option value=\"haiku\">\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"start\" width=\"full\">\n          <aui-badge warning dot style=\"margin-top: 0.375rem;\"></aui-badge>\n          <aui-stack gap=\"1\" spacer min-width=\"0\">\n            <aui-heading size=\"sm\">Claude Haiku 4</aui-heading>\n            <aui-text muted size=\"xs\">Fastest response times for simple tasks.</aui-text>\n            <aui-stack direction=\"row\" gap=\"1\" wrap>\n              <aui-badge>200K context</aui-badge>\n              <aui-badge>Code</aui-badge>\n            </aui-stack>\n          </aui-stack>\n        </aui-stack>\n      </aui-option>\n    </aui-select>\n  </aui-content>\n  <aui-footer>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-text size=\"xs\" muted spacer>Context usage</aui-text>\n      <aui-text size=\"xs\" muted font=\"mono\">24K / 200K</aui-text>\n    </aui-stack>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
     {
-      "name": "chart-horizontal",
+      "name": "agent-prompt-input",
       "type": "block",
-      "summary": "Horizontal bar chart with category labels.",
-      "description": "A card showing horizontal bars for comparing categories. Each row has a fixed-width right-aligned label and a proportional bar sized via max-width percentage. Useful for browser share, feature usage, or any ranked categorical data.\n",
+      "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.\n",
       "components": [
         "aui-container",
-        "aui-header",
-        "aui-content",
-        "aui-footer",
         "aui-inset",
         "aui-stack",
-        "aui-heading",
-        "aui-text"
+        "aui-textarea",
+        "aui-chip",
+        "aui-icon",
+        "aui-text",
+        "aui-button"
       ],
-      "kind": "card",
+      "kind": "widget",
       "examples": [
         {
-          "description": "Horizontal bar chart with category labels.",
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Browser Share</aui-heading>\n        <aui-text muted size=\"sm\">January – June 2026</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"3\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-text size=\"sm\" text=\"right\" style=\"width: 4rem;\">Chrome</aui-text>\n          <div style=\"width: 85%; height: 1.25rem; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-text size=\"sm\" text=\"right\" style=\"width: 4rem;\">Safari</aui-text>\n          <div style=\"width: 65%; height: 1.25rem; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-text size=\"sm\" text=\"right\" style=\"width: 4rem;\">Firefox</aui-text>\n          <div style=\"width: 55%; height: 1.25rem; background: var(--aui-chart-3); border-radius: var(--aui-radius);\"></div>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-text size=\"sm\" text=\"right\" style=\"width: 4rem;\">Edge</aui-text>\n          <div style=\"width: 45%; height: 1.25rem; background: var(--aui-chart-4); border-radius: var(--aui-radius);\"></div>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-text size=\"sm\" text=\"right\" style=\"width: 4rem;\">Other</aui-text>\n          <div style=\"width: 25%; height: 1.25rem; background: var(--aui-chart-5); border-radius: var(--aui-radius);\"></div>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"md\">Chrome leads at 42%</aui-heading>\n        <aui-text muted size=\"sm\">Showing browser usage for the last 6 months</aui-text>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>"
+          "description": "Chat composer with file attachment chips, expandable textarea, and toolbar with send button.",
+          "html": "<aui-container kind=\"widget\" bordered max-width=\"lg\">\n  <aui-inset>\n    <aui-stack>\n\n      <!-- Attached files -->\n      <aui-stack direction=\"row\" gap=\"2\" wrap>\n        <aui-chip removable>\n          <aui-icon name=\"file-text\" size=\"xs\"></aui-icon>\n          config.json\n        </aui-chip>\n        <aui-chip removable>\n          <aui-icon name=\"image\" size=\"xs\"></aui-icon>\n          screenshot.png\n        </aui-chip>\n      </aui-stack>\n\n      <!-- Textarea -->\n      <aui-textarea placeholder=\"Ask anything… Use / for commands\" width=\"full\" style=\"min-height: 3.5rem;\"></aui-textarea>\n\n      <!-- Toolbar -->\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-button ghost hide-label label=\"Attach file\" icon-leading=\"paperclip\"></aui-button>\n        <aui-button ghost hide-label label=\"Search\" icon-leading=\"magnifying-glass\"></aui-button>\n        <aui-button ghost hide-label label=\"Model\" icon-leading=\"robot\"></aui-button>\n        <aui-text spacer></aui-text>\n        <aui-button primary accent hide-label label=\"Send\" icon-leading=\"arrow-up\"></aui-button>\n      </aui-stack>\n\n    </aui-stack>\n  </aui-inset>\n</aui-container>"
         }
       ]
     },
     {
-      "name": "chart-interactive",
+      "name": "agent-streaming-message",
       "type": "block",
-      "summary": "Wide chart card with stat summaries and dense bar visualization.",
-      "description": "A dashboard hero chart card. Header shows the title on the left with aui-stat summaries (Desktop, Mobile) trailing on the right. Content is a dense 12-bar visualization. Footer shows the date range. Designed for full-width dashboard positions.\n",
+      "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.\n",
       "components": [
-        "aui-container",
-        "aui-header",
-        "aui-content",
-        "aui-footer",
-        "aui-inset",
         "aui-stack",
         "aui-heading",
         "aui-text",
-        "aui-stat",
-        "aui-bar"
+        "aui-avatar",
+        "aui-icon",
+        "aui-badge",
+        "aui-button",
+        "aui-code-block"
       ],
-      "kind": "card",
+      "kind": "widget",
       "examples": [
         {
-          "description": "Wide chart card with stat summaries and dense bar visualization.",
-          "html": "<aui-container kind=\"card\" bordered>\n  <aui-header>\n    <aui-stack direction=\"row\" align-items=\"center\">\n      <aui-stack gap=\"1\" spacer>\n        <aui-heading size=\"lg\">Total Visitors</aui-heading>\n        <aui-text muted size=\"sm\">Last 3 months</aui-text>\n      </aui-stack>\n      <aui-stack direction=\"row\">\n        <aui-stat label=\"Desktop\" value=\"24,828\"></aui-stat>\n        <aui-stat label=\"Mobile\" value=\"25,010\"></aui-stat>\n      </aui-stack>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 10rem;\" data-chart-bars>\n        <aui-bar label=\"Apr 1 · 3,120\" style=\"height: 35%;\"></aui-bar>\n        <aui-bar label=\"Apr 8 · 4,890\" style=\"height: 55%;\"></aui-bar>\n        <aui-bar label=\"Apr 15 · 3,740\" style=\"height: 42%;\"></aui-bar>\n        <aui-bar label=\"Apr 22 · 6,050\" style=\"height: 68%;\"></aui-bar>\n        <aui-bar label=\"Apr 29 · 4,010\" style=\"height: 45%;\"></aui-bar>\n        <aui-bar label=\"May 6 · 6,940\" style=\"height: 78%;\"></aui-bar>\n        <aui-bar label=\"May 13 · 4,630\" style=\"height: 52%;\"></aui-bar>\n        <aui-bar label=\"May 20 · 5,340\" style=\"height: 60%;\"></aui-bar>\n        <aui-bar label=\"May 27 · 8,010\" style=\"height: 90%;\" highlighted></aui-bar>\n        <aui-bar label=\"Jun 3 · 6,410\" style=\"height: 72%;\"></aui-bar>\n        <aui-bar label=\"Jun 10 · 4,270\" style=\"height: 48%;\"></aui-bar>\n        <aui-bar label=\"Jun 17 · 3,380\" style=\"height: 38%;\" highlighted></aui-bar>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"content\"><aui-text muted size=\"sm\">April 1 – June 29, 2026</aui-text></span>\n  </aui-footer>\n</aui-container>"
+          "description": "Agent streaming response with identity row, prose + code block mid-stream, and stop button.",
+          "html": "<aui-stack>\n\n  <!-- Identity row -->\n  <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n    <aui-avatar size=\"sm\" accent solid><aui-icon name=\"sparkle\"></aui-icon></aui-avatar>\n    <aui-heading size=\"sm\" spacer>Assistant</aui-heading>\n    <aui-badge accent>Generating</aui-badge>\n    <aui-text size=\"xs\" muted font=\"mono\">8s</aui-text>\n    <aui-button ghost hide-label label=\"Stop generating\" icon-leading=\"stop\" size=\"sm\"></aui-button>\n  </aui-stack>\n\n  <!-- Streaming content -->\n  <aui-stack>\n    <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>\n\n    <!-- Code block mid-stream -->\n    <aui-code-block language=\"typescript\">export function normalizeTokens(raw: RawTokens): Token[] {\n  return Object.entries(raw).map(([key, def]) => ({\n    name: key,\n    value: resolveAlias(def.$value, raw),\n    type: def.$type ?? inferType(def.$value),\n  }))\n}</aui-code-block>\n\n    <aui-text size=\"sm\">Next, the transform stage applies platform-specific conversions. Each platform registers its own…</aui-text>\n  </aui-stack>\n\n</aui-stack>"
         }
       ]
     },
     {
-      "name": "chart-labeled",
+      "name": "agent-suggestion-card",
       "type": "block",
-      "summary": "Vertical bar chart with value labels above each bar.",
-      "description": "A card showing vertical bars with exact values displayed above and month labels below. Labels and bars are in separate rows so percentage heights resolve correctly. Alternating opacity adds visual rhythm. Useful when exact numbers matter as much as the trend.\n",
+      "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\".\n",
       "components": [
         "aui-container",
         "aui-header",
@@ -16637,137 +16696,590 @@
         "aui-inset",
         "aui-stack",
         "aui-heading",
-        "aui-text"
+        "aui-text",
+        "aui-avatar",
+        "aui-icon",
+        "aui-badge",
+        "aui-button",
+        "aui-button-group",
+        "aui-code"
       ],
       "kind": "card",
       "examples": [
         {
-          "description": "Vertical bar chart with value labels above each bar.",
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Monthly Visitors</aui-heading>\n        <aui-text muted size=\"sm\">January – June 2026</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"1\">\n        <!-- Value labels row -->\n        <aui-stack direction=\"row\" gap=\"2\">\n          <aui-text muted size=\"xs\" spacer text=\"center\">186</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">305</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">237</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">73</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">209</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">214</aui-text>\n        </aui-stack>\n        <!-- Bars: direct children of align-items=\"end\" row so height % resolves against 8rem -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"end\" spacer style=\"height: 10rem;\">\n          <div style=\"flex: 1; height: 45%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 75%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 58%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 18%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 51%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 52%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n        </aui-stack>\n        <!-- Month labels row -->\n        <aui-stack direction=\"row\" gap=\"2\">\n          <aui-text muted size=\"xs\" spacer text=\"center\">Jan</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">Feb</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">Mar</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">Apr</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">May</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">Jun</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"md\">February peaked at 305 visitors</aui-heading>\n        <aui-text muted size=\"sm\">Showing total visitors for the last 6 months</aui-text>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>"
+          "description": "Agent code suggestion with diff preview, impact tags, and accept/edit/dismiss actions.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"lg\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-avatar size=\"sm\" accent solid><aui-icon name=\"lightbulb\"></aui-icon></aui-avatar>\n      <aui-stack gap=\"1\" spacer min-width=\"0\">\n        <aui-heading size=\"md\">Extract shared validation logic</aui-heading>\n        <aui-text muted size=\"xs\">Reduces duplication across 3 form handlers</aui-text>\n      </aui-stack>\n      <aui-stack direction=\"row\" gap=\"1\">\n        <aui-badge success>High</aui-badge>\n      </aui-stack>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack>\n        <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>\n\n        <!-- Diff preview -->\n        <aui-code-block filename=\"src/handlers/validation.ts\">- function handleSubmit(data) {\n-   if (!data.email) throw new Error('Email required')\n-   if (!data.name) throw new Error('Name required')\n+ function validateFields(data, required) {\n+   for (const field of required) {\n+     if (!data[field]) throw new Error(\\`\\${field} required\\`)\n+   }\n  }</aui-code-block>\n\n        <!-- Impact tags -->\n        <aui-stack direction=\"row\" gap=\"2\">\n          <aui-badge>3 files affected</aui-badge>\n          <aui-badge success>−24 lines</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button-group>\n      <aui-button scrim grow=\"1\" basis=\"0\">Dismiss</aui-button>\n      <aui-button scrim grow=\"1\" basis=\"0\">Edit</aui-button>\n      <aui-button primary accent grow=\"1\" basis=\"0\">Accept</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
     {
-      "name": "checkout-form",
+      "name": "agent-task-card",
       "type": "block",
-      "summary": "Payment form with card details and billing address.",
-      "description": "A structured checkout form for collecting payment information. Includes card name, number, CVV, and expiry fields in a grid layout. The billing address section uses aui-fieldset legend=\"Billing Address\" (borderless) with a \"Same as shipping\" checkbox, optional comments. Footer uses aui-button-group for submit/cancel actions.\n",
+      "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.\n",
       "components": [
         "aui-container",
         "aui-header",
         "aui-content",
         "aui-footer",
         "aui-inset",
+        "aui-stepper",
+        "aui-step",
         "aui-stack",
         "aui-heading",
         "aui-text",
-        "aui-field",
-        "aui-fieldset",
-        "aui-input",
-        "aui-textarea",
-        "aui-checkbox",
+        "aui-avatar",
+        "aui-icon",
+        "aui-spinner",
+        "aui-badge",
         "aui-button",
         "aui-button-group",
-        "aui-divider"
+        "aui-code"
       ],
       "kind": "card",
       "examples": [
         {
-          "description": "Payment form with card details and billing address.",
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Payment Method</aui-heading>\n        <aui-text muted size=\"sm\">All transactions are secure and encrypted</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack>\n        <aui-field label=\"Name on Card\" width=\"full\">\n          <aui-input width=\"full\" placeholder=\"John Doe\"></aui-input>\n        </aui-field>\n        <aui-stack direction=\"row\" gap=\"3\">\n          <aui-field label=\"Card Number\" width=\"full\" grow=\"3\" basis=\"0\">\n            <aui-input width=\"full\" placeholder=\"1234 5678 9012 3456\"></aui-input>\n          </aui-field>\n          <aui-field label=\"CVV\" grow=\"1\" basis=\"0\">\n            <aui-input width=\"full\" placeholder=\"123\"></aui-input>\n          </aui-field>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-fieldset legend=\"Billing Address\" borderless>\n          <aui-text muted size=\"sm\">The address associated with your payment method</aui-text>\n          <aui-checkbox>Same as shipping address</aui-checkbox>\n          <aui-field label=\"Comments\" width=\"full\">\n            <aui-textarea width=\"full\" placeholder=\"Add any additional comments\"></aui-textarea>\n          </aui-field>\n        </aui-fieldset>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button-group>\n      <aui-button primary grow=\"1\" basis=\"0\">Submit Payment</aui-button>\n      <aui-button scrim grow=\"1\" basis=\"0\">Cancel</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>"
+          "description": "Multi-step agent task card with timeline, log output, approval gate, and cancel action.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"lg\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading group>Agent Task</aui-heading>\n        <aui-heading size=\"lg\">Deploy token pipeline to staging</aui-heading>\n      </aui-stack>\n    </span>\n    <span slot=\"trailing\">\n      <aui-badge accent>Running</aui-badge>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stepper>\n\n        <!-- Step 1: Done -->\n        <aui-step state=\"done\">\n          <aui-avatar size=\"xs\" success shrink=\"0\" solid><aui-icon name=\"check\" size=\"xs\"></aui-icon></aui-avatar>\n          <aui-stack gap=\"1\">\n            <aui-heading size=\"sm\">Pull latest from main</aui-heading>\n            <aui-text muted size=\"xs\">Completed in 4s</aui-text>\n          </aui-stack>\n        </aui-step>\n\n        <!-- Step 2: Done -->\n        <aui-step state=\"done\">\n          <aui-avatar size=\"xs\" success shrink=\"0\" solid><aui-icon name=\"check\" size=\"xs\"></aui-icon></aui-avatar>\n          <aui-stack gap=\"1\">\n            <aui-heading size=\"sm\">Run test suite</aui-heading>\n            <aui-text muted size=\"xs\">142 tests passed · 0 failed · 12s</aui-text>\n          </aui-stack>\n        </aui-step>\n\n        <!-- Step 3: Running -->\n        <aui-step state=\"running\">\n          <aui-avatar size=\"xs\" accent shrink=\"0\" solid><aui-spinner size=\"xs\"></aui-spinner></aui-avatar>\n          <aui-stack gap=\"2\" spacer min-width=\"0\">\n            <aui-stack gap=\"1\">\n              <aui-heading size=\"sm\">Build Docker image</aui-heading>\n              <aui-text muted size=\"xs\">Building layers…</aui-text>\n            </aui-stack>\n<aui-code>Step 1/5 : FROM node:20-alpine\nStep 2/5 : COPY package*.json ./\nStep 3/5 : RUN npm ci --production</aui-code>\n          </aui-stack>\n        </aui-step>\n\n        <!-- Step 4: Gate -->\n        <aui-step>\n          <aui-avatar size=\"xs\" warning shrink=\"0\" solid><aui-icon name=\"warning\" size=\"xs\"></aui-icon></aui-avatar>\n          <aui-stack gap=\"3\" spacer min-width=\"0\">\n            <aui-heading size=\"sm\">Approval required</aui-heading>\n            <aui-container kind=\"widget\" bordered>\n              <aui-inset>\n                <aui-stack gap=\"3\">\n                  <aui-text size=\"sm\">Deploy build <strong>#847</strong> to staging environment?</aui-text>\n                  <aui-button-group>\n                    <aui-button primary accent grow=\"1\" basis=\"0\">Approve</aui-button>\n                    <aui-button scrim grow=\"1\" basis=\"0\">Skip</aui-button>\n                  </aui-button-group>\n                </aui-stack>\n              </aui-inset>\n            </aui-container>\n          </aui-stack>\n        </aui-step>\n\n        <!-- Step 5: Pending -->\n        <aui-step>\n          <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>\n          <aui-stack gap=\"1\">\n            <aui-text size=\"sm\" muted>Health check</aui-text>\n          </aui-stack>\n        </aui-step>\n\n      </aui-stepper>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-text muted size=\"xs\" spacer>Elapsed: 0:42</aui-text>\n      <aui-button scrim danger>Cancel Task</aui-button>\n    </aui-stack>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
     {
-      "name": "clinical-trial",
+      "name": "agent-thinking-state",
       "type": "block",
-      "summary": "Clinical Trial Pipeline — 13 nodes, 17 connections.",
-      "description": "Visual graph block rendered from the Clinical Trial Pipeline dataset using aui-graph components with port-selector noodle connections.\n",
+      "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.\n",
       "components": [
-        "aui-container",
+        "aui-disclosure",
+        "aui-stack",
+        "aui-heading",
         "aui-text",
-        "aui-graph-ui",
-        "aui-graph-layer",
-        "aui-graph-node",
-        "aui-graph-noodle",
-        "aui-graph-port"
+        "aui-avatar",
+        "aui-icon",
+        "aui-badge"
       ],
+      "kind": "widget",
       "examples": [
         {
-          "description": "Clinical Trial Pipeline — 13 nodes, 17 connections.",
-          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 32.875rem; min-width: 79.625rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- Protocol → Cohort Screening -->\n    <aui-graph-noodle from=\"ct-protocol:right\" to=\"ct-cohort:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Protocol → Randomization Engine -->\n    <aui-graph-noodle from=\"ct-protocol:right\" to=\"ct-randomize:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Cohort Screening → Randomization Engine -->\n    <aui-graph-noodle from=\"ct-cohort:right\" to=\"ct-randomize:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Randomization Engine → Control Arm -->\n    <aui-graph-noodle from=\"ct-randomize:right\" to=\"ct-control:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Randomization Engine → Treatment Arm A -->\n    <aui-graph-noodle from=\"ct-randomize:right\" to=\"ct-treat-a:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Randomization Engine → Treatment Arm B -->\n    <aui-graph-noodle from=\"ct-randomize:right\" to=\"ct-treat-b:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Control Arm → Primary Endpoint -->\n    <aui-graph-noodle from=\"ct-control:right\" to=\"ct-primary:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Treatment Arm A → Primary Endpoint -->\n    <aui-graph-noodle from=\"ct-treat-a:right\" to=\"ct-primary:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Treatment Arm A → Adverse Event Monitor -->\n    <aui-graph-noodle from=\"ct-treat-a:right\" to=\"ct-adverse:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Treatment Arm B → Adverse Event Monitor -->\n    <aui-graph-noodle from=\"ct-treat-b:right\" to=\"ct-adverse:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Treatment Arm B → Secondary Endpoint -->\n    <aui-graph-noodle from=\"ct-treat-b:right\" to=\"ct-secondary:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Primary Endpoint → Interim Analysis -->\n    <aui-graph-noodle from=\"ct-primary:right\" to=\"ct-interim:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Secondary Endpoint → Interim Analysis -->\n    <aui-graph-noodle from=\"ct-secondary:right\" to=\"ct-interim:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Adverse Event Monitor → DSMB Review -->\n    <aui-graph-noodle from=\"ct-adverse:right\" to=\"ct-dsmb:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Interim Analysis → DSMB Review -->\n    <aui-graph-noodle from=\"ct-interim:right\" to=\"ct-dsmb:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- DSMB Review → Regulatory Filing -->\n    <aui-graph-noodle from=\"ct-dsmb:right\" to=\"ct-regulatory:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Regulatory Filing → Publication -->\n    <aui-graph-noodle from=\"ct-regulatory:right\" to=\"ct-publication:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- Protocol -->\n    <aui-graph-node x=\"24\" y=\"186\" node-id=\"ct-protocol\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Protocol</aui-text>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Cohort Screening -->\n    <aui-graph-node x=\"224\" y=\"116\" node-id=\"ct-cohort\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Cohort Screening</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Randomization Engine -->\n    <aui-graph-node x=\"224\" y=\"256\" node-id=\"ct-randomize\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Randomization Engine</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Control Arm -->\n    <aui-graph-node x=\"424\" y=\"46\" node-id=\"ct-control\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Control Arm</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Treatment Arm A -->\n    <aui-graph-node x=\"424\" y=\"186\" node-id=\"ct-treat-a\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Treatment Arm A</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Treatment Arm B -->\n    <aui-graph-node x=\"424\" y=\"326\" node-id=\"ct-treat-b\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Treatment Arm B</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Adverse Event Monitor -->\n    <aui-graph-node x=\"624\" y=\"46\" node-id=\"ct-adverse\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Adverse Event Monitor</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Primary Endpoint -->\n    <aui-graph-node x=\"624\" y=\"186\" node-id=\"ct-primary\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Primary Endpoint</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Secondary Endpoint -->\n    <aui-graph-node x=\"624\" y=\"326\" node-id=\"ct-secondary\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Secondary Endpoint</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Interim Analysis -->\n    <aui-graph-node x=\"824\" y=\"116\" node-id=\"ct-interim\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Interim Analysis</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- DSMB Review -->\n    <aui-graph-node x=\"824\" y=\"256\" node-id=\"ct-dsmb\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">DSMB Review</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Regulatory Filing -->\n    <aui-graph-node x=\"1024\" y=\"116\" node-id=\"ct-regulatory\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Regulatory Filing</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Publication -->\n    <aui-graph-node x=\"1024\" y=\"256\" node-id=\"ct-publication\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Publication</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n  </aui-graph-layer>\n</aui-graph-ui>"
+          "description": "Agent thinking indicator with reasoning chain, tool call badges, and streaming preview.",
+          "html": "<aui-stack>\n\n  <!-- Identity row -->\n  <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n    <aui-avatar size=\"sm\" accent solid><aui-icon name=\"sparkle\"></aui-icon></aui-avatar>\n    <aui-heading size=\"sm\" spacer>Thinking…</aui-heading>\n    <aui-text size=\"xs\" muted font=\"mono\">12s</aui-text>\n  </aui-stack>\n\n  <!-- Reasoning card (collapsible) -->\n  <aui-disclosure summary=\"Reasoning\" open>\n    <aui-stack>\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"start\">\n        <aui-badge success dot style=\"margin-top: 0.375rem;\"></aui-badge>\n        <aui-text size=\"sm\">Analyzing the component architecture and identifying entry points</aui-text>\n      </aui-stack>\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"start\">\n        <aui-badge success dot style=\"margin-top: 0.375rem;\"></aui-badge>\n        <aui-text size=\"sm\">Searching for related patterns using <aui-badge accent font=\"mono\">web_search</aui-badge></aui-text>\n      </aui-stack>\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"start\">\n        <aui-badge success dot style=\"margin-top: 0.375rem;\"></aui-badge>\n        <aui-text size=\"sm\">Reading configuration files via <aui-badge success font=\"mono\">read_file</aui-badge></aui-text>\n      </aui-stack>\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"start\">\n        <aui-badge success dot style=\"margin-top: 0.375rem;\"></aui-badge>\n        <aui-text size=\"sm\">Cross-referencing token definitions with component usage</aui-text>\n      </aui-stack>\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"start\">\n        <aui-badge accent dot style=\"margin-top: 0.375rem;\"></aui-badge>\n        <aui-text size=\"sm\">Formulating implementation plan based on constraints…</aui-text>\n      </aui-stack>\n    </aui-stack>\n  </aui-disclosure>\n\n  <!-- Streaming preview -->\n  <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>\n\n</aui-stack>"
         }
       ]
     },
     {
-      "name": "contributors",
+      "name": "agent-tool-use-card",
       "type": "block",
-      "summary": "Contributors card showing overlapping avatar group with count and overflow link.",
-      "description": "A card displaying project contributors as an overlapping avatar group with a count badge and automatic +N overflow counter. Footer shows total contributor count as a text link. Use for open source projects, team pages, or community sections.\n",
+      "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.\n",
       "components": [
         "aui-container",
         "aui-header",
         "aui-content",
-        "aui-footer",
         "aui-inset",
+        "aui-disclosure",
+        "aui-disclosure-group",
         "aui-stack",
-        "aui-heading",
         "aui-text",
         "aui-avatar",
-        "aui-avatar-group",
-        "aui-badge"
+        "aui-icon",
+        "aui-spinner",
+        "aui-badge",
+        "aui-heading",
+        "aui-code",
+        "aui-alert"
       ],
-      "kind": "card",
+      "kind": "widget",
       "examples": [
         {
-          "description": "Contributors card showing overlapping avatar group with count and overflow link.",
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-heading size=\"lg\">Contributors</aui-heading>\n        <aui-badge>312</aui-badge>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-avatar-group max=\"8\">\n        <aui-avatar>AJ</aui-avatar>\n        <aui-avatar>BK</aui-avatar>\n        <aui-avatar>CL</aui-avatar>\n        <aui-avatar>DM</aui-avatar>\n        <aui-avatar>EP</aui-avatar>\n        <aui-avatar>FW</aui-avatar>\n        <aui-avatar>GR</aui-avatar>\n        <aui-avatar>HN</aui-avatar>\n        <aui-avatar>IQ</aui-avatar>\n        <aui-avatar>JT</aui-avatar>\n        <aui-avatar>KS</aui-avatar>\n        <aui-avatar>LV</aui-avatar>\n        <aui-avatar>MX</aui-avatar>\n        <aui-avatar>NY</aui-avatar>\n        <aui-avatar>OZ</aui-avatar>\n        <aui-avatar>PA</aui-avatar>\n      </aui-avatar-group>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\"><aui-text muted size=\"sm\"><a href=\"#\">+ 810 contributors</a></aui-text></span>\n  </aui-footer>\n</aui-container>"
+          "description": "Collapsible tool invocation cards showing parameters, results, and error states.",
+          "html": "<aui-stack gap=\"4\">\n\n  <!-- Tool call: Success, expanded, search results -->\n  <aui-container kind=\"widget\" bordered>\n    <aui-header density=\"compact\">\n      <span slot=\"leading\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar size=\"xs\" success solid><aui-icon name=\"check\" size=\"xs\"></aui-icon></aui-avatar>\n          <aui-heading size=\"sm\" font=\"mono\">web_search</aui-heading>\n          <aui-badge accent>Search</aui-badge>\n        </aui-stack>\n      </span>\n      <span slot=\"trailing\">\n        <aui-text size=\"xs\" muted>1.2s</aui-text>\n      </span>\n    </aui-header>\n    <aui-content>\n      <aui-inset>\n        <aui-disclosure-group>\n          <aui-disclosure summary=\"Parameters\" open>\n            <aui-text size=\"sm\" font=\"mono\"><aui-text info font=\"mono\" size=\"sm\" inline>query</aui-text>: \"design token pipeline best practices\"</aui-text>\n          </aui-disclosure>\n          <aui-disclosure summary=\"Results\" open>\n            <aui-stack>\n              <aui-stack gap=\"1\">\n                <aui-heading size=\"sm\">Design Tokens: A Complete Guide</aui-heading>\n                <aui-text size=\"xs\" muted style=\"font-family: var(--aui-font-mono);\">https://tokens.guide/pipeline</aui-text>\n                <aui-text size=\"xs\" muted>Learn how to build scalable design token pipelines that sync across platforms…</aui-text>\n              </aui-stack>\n              <aui-stack gap=\"1\">\n                <aui-heading size=\"sm\">Token Automation with Style Dictionary</aui-heading>\n                <aui-text size=\"xs\" muted style=\"font-family: var(--aui-font-mono);\">https://styledictionary.dev/guides</aui-text>\n                <aui-text size=\"xs\" muted>Automate your design-to-code pipeline using Style Dictionary transforms…</aui-text>\n              </aui-stack>\n            </aui-stack>\n          </aui-disclosure>\n        </aui-disclosure-group>\n      </aui-inset>\n    </aui-content>\n  </aui-container>\n\n  <!-- Tool call: Running, collapsed -->\n  <aui-container kind=\"widget\" bordered>\n    <aui-header density=\"compact\">\n      <span slot=\"leading\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar size=\"xs\" accent solid><aui-spinner size=\"xs\"></aui-spinner></aui-avatar>\n          <aui-heading size=\"sm\" font=\"mono\">execute_code</aui-heading>\n          <aui-badge warning>Code</aui-badge>\n        </aui-stack>\n      </span>\n      <span slot=\"trailing\">\n        <aui-text size=\"xs\" muted>3.8s</aui-text>\n      </span>\n    </aui-header>\n  </aui-container>\n\n  <!-- Tool call: Success, expanded, code output -->\n  <aui-container kind=\"widget\" bordered>\n    <aui-header density=\"compact\">\n      <span slot=\"leading\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar size=\"xs\" success solid><aui-icon name=\"check\" size=\"xs\"></aui-icon></aui-avatar>\n          <aui-heading size=\"sm\" font=\"mono\">read_file</aui-heading>\n          <aui-badge success>File</aui-badge>\n        </aui-stack>\n      </span>\n      <span slot=\"trailing\">\n        <aui-text size=\"xs\" muted>0.4s</aui-text>\n      </span>\n    </aui-header>\n    <aui-content>\n      <aui-inset>\n        <aui-disclosure-group>\n          <aui-disclosure summary=\"Parameters\" open>\n            <aui-text size=\"sm\" font=\"mono\"><aui-text info font=\"mono\" size=\"sm\" inline>path</aui-text>: \"src/tokens/config.json\"</aui-text>\n          </aui-disclosure>\n          <aui-disclosure summary=\"Output\" open>\n<aui-code>{\n  \"source\": [\"src/tokens/**/*.json\"],\n  \"platforms\": {\n    \"css\": {\n      \"transformGroup\": \"css\",\n      \"buildPath\": \"dist/css/\"\n    }\n  }\n}</aui-code>\n          </aui-disclosure>\n        </aui-disclosure-group>\n      </aui-inset>\n    </aui-content>\n  </aui-container>\n\n  <!-- Tool call: Error -->\n  <aui-container kind=\"widget\" bordered>\n    <aui-header density=\"compact\">\n      <span slot=\"leading\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar size=\"xs\" danger solid><aui-icon name=\"x\" size=\"xs\"></aui-icon></aui-avatar>\n          <aui-heading size=\"sm\" font=\"mono\">execute_code</aui-heading>\n          <aui-badge warning>Code</aui-badge>\n        </aui-stack>\n      </span>\n      <span slot=\"trailing\">\n        <aui-text size=\"xs\" muted>0.8s</aui-text>\n      </span>\n    </aui-header>\n    <aui-content>\n      <aui-inset>\n        <aui-alert danger icon=\"warning\">\n          <aui-text size=\"sm\" font=\"mono\">TypeError: Cannot read properties of undefined (reading 'map')</aui-text>\n        </aui-alert>\n      </aui-inset>\n    </aui-content>\n  </aui-container>\n\n</aui-stack>"
         }
       ]
     },
     {
-      "name": "cyber-threat",
+      "name": "announcement-card",
       "type": "block",
-      "summary": "Cyber Threat Intelligence — 12 nodes, 14 connections.",
-      "description": "Visual graph block rendered from the Cyber Threat Intelligence dataset using aui-graph components with port-selector noodle connections.\n",
+      "summary": "Announcement card with image area, description, and contextual footer actions.",
+      "description": "A card featuring a tall image or illustration area at top, followed by a title, description, and footer with a primary action and a contextual badge or label. Use for product announcements, deprecation notices, or feature highlights.\n",
       "components": [
         "aui-container",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
         "aui-text",
-        "aui-graph-ui",
-        "aui-graph-layer",
-        "aui-graph-node",
-        "aui-graph-noodle",
-        "aui-graph-port"
+        "aui-badge",
+        "aui-button"
       ],
+      "kind": "card",
       "examples": [
         {
-          "description": "Cyber Threat Intelligence — 12 nodes, 14 connections.",
-          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 32.875rem; min-width: 84.625rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- Network Sensor → SIEM Aggregator -->\n    <aui-graph-noodle from=\"cy-sensor:right\" to=\"cy-siem:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Endpoint Agent → SIEM Aggregator -->\n    <aui-graph-noodle from=\"cy-endpoint:right\" to=\"cy-siem:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Threat Intel Feed → SIEM Aggregator -->\n    <aui-graph-noodle from=\"cy-intel:right\" to=\"cy-siem:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- SIEM Aggregator → Threat Classifier -->\n    <aui-graph-noodle from=\"cy-siem:right\" to=\"cy-classify:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- SIEM Aggregator → IOC Enrichment -->\n    <aui-graph-noodle from=\"cy-siem:right\" to=\"cy-ioc:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Threat Classifier → Triage Engine -->\n    <aui-graph-noodle from=\"cy-classify:right\" to=\"cy-triage:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- IOC Enrichment → Triage Engine -->\n    <aui-graph-noodle from=\"cy-ioc:right\" to=\"cy-triage:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Triage Engine → Incident Response -->\n    <aui-graph-noodle from=\"cy-triage:right\" to=\"cy-incident:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Triage Engine → Containment Action -->\n    <aui-graph-noodle from=\"cy-triage:right\" to=\"cy-contain:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Incident Response → Forensic Analysis -->\n    <aui-graph-noodle from=\"cy-incident:right\" to=\"cy-forensic:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Incident Response → Recovery -->\n    <aui-graph-noodle from=\"cy-incident:right\" to=\"cy-recovery:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Containment Action → Recovery -->\n    <aui-graph-noodle from=\"cy-contain:right\" to=\"cy-recovery:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Forensic Analysis → Post-Mortem -->\n    <aui-graph-noodle from=\"cy-forensic:left\" to=\"cy-postmortem:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Recovery → Post-Mortem -->\n    <aui-graph-noodle from=\"cy-recovery:left\" to=\"cy-postmortem:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- Network Sensor -->\n    <aui-graph-node x=\"24\" y=\"46\" node-id=\"cy-sensor\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Network Sensor</aui-text>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Endpoint Agent -->\n    <aui-graph-node x=\"24\" y=\"186\" node-id=\"cy-endpoint\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Endpoint Agent</aui-text>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Threat Intel Feed -->\n    <aui-graph-node x=\"24\" y=\"326\" node-id=\"cy-intel\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Threat Intel Feed</aui-text>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- SIEM Aggregator -->\n    <aui-graph-node x=\"240\" y=\"186\" node-id=\"cy-siem\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">SIEM Aggregator</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Threat Classifier -->\n    <aui-graph-node x=\"456\" y=\"116\" node-id=\"cy-classify\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Threat Classifier</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- IOC Enrichment -->\n    <aui-graph-node x=\"456\" y=\"256\" node-id=\"cy-ioc\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">IOC Enrichment</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Triage Engine -->\n    <aui-graph-node x=\"672\" y=\"186\" node-id=\"cy-triage\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Triage Engine</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Incident Response -->\n    <aui-graph-node x=\"888\" y=\"116\" node-id=\"cy-incident\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Incident Response</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Containment Action -->\n    <aui-graph-node x=\"888\" y=\"256\" node-id=\"cy-contain\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Containment Action</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Forensic Analysis -->\n    <aui-graph-node x=\"1104\" y=\"46\" node-id=\"cy-forensic\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Forensic Analysis</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Recovery -->\n    <aui-graph-node x=\"1104\" y=\"186\" node-id=\"cy-recovery\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Recovery</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Post-Mortem -->\n    <aui-graph-node x=\"1104\" y=\"326\" node-id=\"cy-postmortem\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Post-Mortem</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n  </aui-graph-layer>\n</aui-graph-ui>"
+          "description": "Announcement card with image area, description, and contextual footer actions.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\" style=\"overflow: hidden;\">\n  <div style=\"height: 12rem; background: linear-gradient(135deg, var(--aui-control) 0%, var(--aui-panel) 100%);\"></div>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-badge warning>Warning</aui-badge>\n        <aui-heading size=\"lg\">Observability Plus is replacing Monitoring</aui-heading>\n        <aui-text muted size=\"sm\">Switch to the improved way to explore your data with natural language. Monitoring will no longer be available on the Pro plan in November, 2025</aui-text>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\"><aui-button primary>Create Query</aui-button></span>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
     {
-      "name": "dashboard-layout",
+      "name": "auth-card",
       "type": "block",
-      "summary": "Application shell with sidebar, page header, and content grid.",
-      "description": "A production-ready app shell combining a compact sidebar with a main content area. The sidebar uses card kind with elevation for visual separation, aui-nav-item elements with an active state, and a user footer. The main area has a welcoming page header and a responsive grid of aui-stat widgets. This is a starting composition — the content area would hold tables, charts, or lists in a real app.\n",
+      "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.\n",
       "components": [
         "aui-container",
-        "aui-header",
-        "aui-content",
-        "aui-footer",
         "aui-inset",
         "aui-stack",
-        "aui-wrap",
         "aui-heading",
         "aui-text",
-        "aui-stat",
-        "aui-icon",
-        "aui-avatar",
+        "aui-field",
+        "aui-input",
+        "aui-checkbox",
+        "aui-button",
+        "aui-button-group",
         "aui-divider",
-        "aui-nav-item"
+        "aui-footer"
       ],
-      "kind": "card",
+      "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\">\n  <aui-inset>\n    <aui-stack gap=\"4\">\n\n      <!-- Header -->\n      <aui-stack gap=\"1\" align-items=\"center\" text=\"center\">\n        <aui-heading size=\"xl\">Welcome back</aui-heading>\n        <aui-text muted size=\"sm\">Sign in to your account to continue.</aui-text>\n      </aui-stack>\n\n      <!-- Social buttons -->\n      <aui-button-group>\n        <aui-button scrim grow=\"1\" basis=\"0\" icon-leading=\"globe-simple\">Google</aui-button>\n        <aui-button scrim grow=\"1\" basis=\"0\" icon-leading=\"globe-simple\">GitHub</aui-button>\n      </aui-button-group>\n\n      <!-- Divider -->\n      <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n        <aui-divider spacer></aui-divider>\n        <aui-text muted size=\"xs\">or continue with email</aui-text>\n        <aui-divider spacer></aui-divider>\n      </aui-stack>\n\n      <!-- Form fields -->\n      <aui-stack gap=\"3\">\n        <aui-field label=\"Email\" width=\"full\">\n          <aui-input type=\"email\" placeholder=\"you@company.com\" width=\"full\"></aui-input>\n        </aui-field>\n        <aui-field label=\"Password\" width=\"full\">\n          <aui-input type=\"password\" placeholder=\"••••••••\" width=\"full\"></aui-input>\n        </aui-field>\n      </aui-stack>\n\n      <!-- Remember + forgot -->\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-checkbox label=\"Remember me\"></aui-checkbox>\n        <aui-text size=\"xs\" spacer></aui-text>\n        <aui-text size=\"xs\"><a href=\"#\">Forgot password?</a></aui-text>\n      </aui-stack>\n\n      <!-- Submit -->\n      <aui-button primary accent width=\"full\">Sign in</aui-button>\n\n    </aui-stack>\n  </aui-inset>\n\n  <aui-footer>\n    <aui-stack align-items=\"center\">\n      <aui-text muted size=\"sm\">Don't have an account? <a href=\"#\">Create one</a></aui-text>\n    </aui-stack>\n  </aui-footer>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "bpm-process",
+      "type": "block",
+      "summary": "Cross-Functional BPM — 16 nodes, 20 connections.",
+      "description": "Visual graph block rendered from the Cross-Functional BPM dataset using aui-graph components with port-selector noodle connections.\n",
+      "components": [
+        "aui-container",
+        "aui-text",
+        "aui-graph-ui",
+        "aui-graph-layer",
+        "aui-graph-node",
+        "aui-graph-noodle",
+        "aui-graph-port"
+      ],
+      "examples": [
+        {
+          "description": "Cross-Functional BPM — 16 nodes, 20 connections.",
+          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 45.375rem; min-width: 91.875rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- Customer Request → Self-Service Portal -->\n    <aui-graph-noodle from=\"bp-request:right\" to=\"bp-portal:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Customer Request → Lead Qualification -->\n    <aui-graph-noodle from=\"bp-request:bottom\" to=\"bp-qualify:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Self-Service Portal → Lead Qualification -->\n    <aui-graph-noodle from=\"bp-portal:bottom\" to=\"bp-qualify:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Lead Qualification → Quote Generation -->\n    <aui-graph-noodle from=\"bp-qualify:right\" to=\"bp-quote:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Quote Generation → Legal Review -->\n    <aui-graph-noodle from=\"bp-quote:bottom\" to=\"bp-review:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Quote Generation → Credit Assessment -->\n    <aui-graph-noodle from=\"bp-quote:bottom\" to=\"bp-credit:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Quote Generation → Contract Negotiation -->\n    <aui-graph-noodle from=\"bp-quote:right\" to=\"bp-negotiate:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Legal Review → Compliance Check -->\n    <aui-graph-noodle from=\"bp-review:right\" to=\"bp-compliance:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Compliance Check → Digital Signature -->\n    <aui-graph-noodle from=\"bp-compliance:right\" to=\"bp-sign:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Contract Negotiation → Digital Signature -->\n    <aui-graph-noodle from=\"bp-negotiate:bottom\" to=\"bp-sign:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Credit Assessment → Invoice Generation -->\n    <aui-graph-noodle from=\"bp-credit:right\" to=\"bp-invoice:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Invoice Generation → Payment Processing -->\n    <aui-graph-noodle from=\"bp-invoice:right\" to=\"bp-payment:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Invoice Generation → Service Provisioning -->\n    <aui-graph-noodle from=\"bp-invoice:bottom\" to=\"bp-provision:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Digital Signature → Onboarding Workflow -->\n    <aui-graph-noodle from=\"bp-sign:right\" to=\"bp-onboard:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Payment Processing → Account Activation -->\n    <aui-graph-noodle from=\"bp-payment:bottom\" to=\"bp-activate:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Service Provisioning → Account Activation -->\n    <aui-graph-noodle from=\"bp-provision:right\" to=\"bp-activate:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Account Activation → Onboarding Workflow -->\n    <aui-graph-noodle from=\"bp-activate:top\" to=\"bp-onboard:bottom\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Onboarding Workflow → Customer Feedback -->\n    <aui-graph-noodle from=\"bp-onboard:top\" to=\"bp-feedback:right\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Account Activation → Escalation Manager -->\n    <aui-graph-noodle from=\"bp-activate:right\" to=\"bp-escalation:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Escalation Manager → Contract Negotiation -->\n    <aui-graph-noodle from=\"bp-escalation:top\" to=\"bp-negotiate:bottom\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- Customer Request -->\n    <aui-graph-node x=\"24\" y=\"46\" node-id=\"bp-request\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Customer Request</aui-text>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Self-Service Portal -->\n    <aui-graph-node x=\"260\" y=\"46\" node-id=\"bp-portal\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Self-Service Portal</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Customer Feedback -->\n    <aui-graph-node x=\"980\" y=\"46\" node-id=\"bp-feedback\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Customer Feedback</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Lead Qualification -->\n    <aui-graph-node x=\"260\" y=\"166\" node-id=\"bp-qualify\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Lead Qualification</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Quote Generation -->\n    <aui-graph-node x=\"500\" y=\"166\" node-id=\"bp-quote\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Quote Generation</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Contract Negotiation -->\n    <aui-graph-node x=\"740\" y=\"166\" node-id=\"bp-negotiate\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Contract Negotiation</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Legal Review -->\n    <aui-graph-node x=\"500\" y=\"286\" node-id=\"bp-review\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Legal Review</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Compliance Check -->\n    <aui-graph-node x=\"740\" y=\"286\" node-id=\"bp-compliance\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Compliance Check</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Digital Signature -->\n    <aui-graph-node x=\"980\" y=\"286\" node-id=\"bp-sign\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Digital Signature</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Credit Assessment -->\n    <aui-graph-node x=\"500\" y=\"406\" node-id=\"bp-credit\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Credit Assessment</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Invoice Generation -->\n    <aui-graph-node x=\"740\" y=\"406\" node-id=\"bp-invoice\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Invoice Generation</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Payment Processing -->\n    <aui-graph-node x=\"980\" y=\"406\" node-id=\"bp-payment\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Payment Processing</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Service Provisioning -->\n    <aui-graph-node x=\"740\" y=\"526\" node-id=\"bp-provision\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Service Provisioning</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Account Activation -->\n    <aui-graph-node x=\"980\" y=\"526\" node-id=\"bp-activate\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Account Activation</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Onboarding Workflow -->\n    <aui-graph-node x=\"1220\" y=\"286\" node-id=\"bp-onboard\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Onboarding Workflow</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Escalation Manager -->\n    <aui-graph-node x=\"1220\" y=\"526\" node-id=\"bp-escalation\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Escalation Manager</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n  </aui-graph-layer>\n</aui-graph-ui>"
+        }
+      ]
+    },
+    {
+      "name": "chart-activity",
+      "type": "block",
+      "summary": "Weekly activity chart with labeled columns and rounded bars.",
+      "description": "A card showing a 7-day activity grid. Each column has a day label and a tall container with a rounded bar showing the day's activity level. The bar height is proportional to the value. Use for fitness summaries, commit frequency, or daily usage patterns.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Weekly activity chart with labeled columns and rounded bars.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Weekly Fitness Summary</aui-heading>\n        <aui-text muted size=\"sm\">Calories and workout load by day</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"2\">\n        <aui-stack gap=\"1\" align-items=\"center\" spacer>\n          <aui-text muted size=\"xs\">M</aui-text>\n          <div style=\"width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;\">\n            <div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 78%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </div>\n        </aui-stack>\n        <aui-stack gap=\"1\" align-items=\"center\" spacer>\n          <aui-text muted size=\"xs\">T</aui-text>\n          <div style=\"width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;\">\n            <div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 35%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </div>\n        </aui-stack>\n        <aui-stack gap=\"1\" align-items=\"center\" spacer>\n          <aui-text muted size=\"xs\">W</aui-text>\n          <div style=\"width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;\">\n            <div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 65%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </div>\n        </aui-stack>\n        <aui-stack gap=\"1\" align-items=\"center\" spacer>\n          <aui-text muted size=\"xs\">T</aui-text>\n          <div style=\"width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;\">\n            <div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </div>\n        </aui-stack>\n        <aui-stack gap=\"1\" align-items=\"center\" spacer>\n          <aui-text muted size=\"xs\">F</aui-text>\n          <div style=\"width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;\">\n            <div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 90%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </div>\n        </aui-stack>\n        <aui-stack gap=\"1\" align-items=\"center\" spacer>\n          <aui-text muted size=\"xs\">S</aui-text>\n          <div style=\"width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;\">\n            <div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 25%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </div>\n        </aui-stack>\n        <aui-stack gap=\"1\" align-items=\"center\" spacer>\n          <aui-text muted size=\"xs\">S</aui-text>\n          <div style=\"width: 100%; height: 8rem; background: var(--aui-control); border-radius: var(--aui-radius); position: relative; overflow: hidden;\">\n            <div style=\"position: absolute; bottom: 0; left: 0; right: 0; height: 45%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </div>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "chart-card",
+      "type": "block",
+      "summary": "Simple vertical bar chart card with month labels.",
+      "description": "A card showing a 6-month bar chart built with CSS. Header has the chart title and date range, content shows proportional bars with month labels, footer shows a trend summary. The simplest chart pattern — one data series, one color, clear labels.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Simple vertical bar chart card with month labels.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Visitors</aui-heading>\n        <aui-text muted size=\"sm\">January – June 2026</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"1\">\n        <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" style=\"height: 10rem;\">\n          <div style=\"flex: 1; height: 45%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 72%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 58%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 30%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 85%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 65%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"1\">\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Jan</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Feb</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Mar</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Apr</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">May</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Jun</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"md\">Trending up by 5.2% this month</aui-heading>\n        <aui-text muted size=\"sm\">Showing total visitors for the last 6 months</aui-text>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "chart-donut",
+      "type": "block",
+      "summary": "Donut chart card with center stat, legend, and selected segment footer.",
+      "description": "A card showing a CSS-drawn donut/ring chart with a center value, a legend row below the chart, and a footer showing the selected segment's value. Use for distribution data like browser share, traffic sources, or category breakdowns.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-badge"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Donut chart card with center stat, legend, and selected segment footer.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Browser Share</aui-heading>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-badge>Firefox</aui-badge>\n          <aui-text muted size=\"sm\">January – June 2026</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack align-items=\"center\">\n        <!-- Donut chart via SVG -->\n        <div style=\"position: relative; width: 9rem; height: 9rem;\">\n          <svg viewBox=\"0 0 100 100\" style=\"width: 100%; height: 100%; transform: rotate(-90deg);\">\n            <!--\n              C = 2π × 38 ≈ 238.76   Gap = 2 units per segment\n              Seg1 (60%): arc = 143.26, draw = 141.26, offset = 0\n              Seg2 (20%): arc =  47.75, draw =  45.75, offset = -143.26\n              Seg3 (20%): arc =  47.75, draw =  45.75, offset = -191.01\n            -->\n            <circle cx=\"50\" cy=\"50\" r=\"38\" fill=\"none\" style=\"stroke: var(--aui-chart-1);\" stroke-width=\"12\" stroke-dasharray=\"141.26 238.76\" stroke-dashoffset=\"0\"       stroke-linecap=\"butt\"/>\n            <circle cx=\"50\" cy=\"50\" r=\"38\" fill=\"none\" style=\"stroke: var(--aui-chart-2);\" stroke-width=\"12\" stroke-dasharray=\"45.75 238.76\"  stroke-dashoffset=\"-143.26\" stroke-linecap=\"butt\"/>\n            <circle cx=\"50\" cy=\"50\" r=\"38\" fill=\"none\" style=\"stroke: var(--aui-chart-3);\" stroke-width=\"12\" stroke-dasharray=\"45.75 238.76\"  stroke-dashoffset=\"-191.01\" stroke-linecap=\"butt\"/>\n          </svg>\n          <div style=\"position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;\">\n            <aui-heading size=\"xl\">1,125</aui-heading>\n            <aui-text muted size=\"xs\">Visitors</aui-text>\n          </div>\n        </div>\n        <!-- Legend -->\n        <aui-wrap gap=\"3\" style=\"justify-content: center;\">\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n            <div shrink=\"0\" style=\"width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-1);\"></div>\n            <aui-text muted size=\"xs\">Chrome</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n            <div shrink=\"0\" style=\"width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-2);\"></div>\n            <aui-text muted size=\"xs\">Safari</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n            <div shrink=\"0\" style=\"width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-3);\"></div>\n            <aui-text muted size=\"xs\">Firefox</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n            <div shrink=\"0\" style=\"width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-4);\"></div>\n            <aui-text muted size=\"xs\">Edge</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n            <div shrink=\"0\" style=\"width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-5);\"></div>\n            <aui-text muted size=\"xs\">Other</aui-text>\n          </aui-stack>\n        </aui-wrap>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\">\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" width=\"full\">\n        <aui-heading size=\"md\" spacer>Firefox</aui-heading>\n        <aui-text muted size=\"sm\">26%</aui-text>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "chart-grouped",
+      "type": "block",
+      "summary": "Grouped vertical bar chart comparing two data series.",
+      "description": "A card showing paired vertical bars per category for comparing two metrics side by side (e.g. Desktop vs Mobile). Labels are in a separate row below so bar height percentages resolve correctly against the constrained bar area.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Grouped vertical bar chart comparing two data series.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Visitors by Device</aui-heading>\n        <aui-text muted size=\"sm\">January – June 2026</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"1\">\n        <!-- Bars: paired groups as direct children of align-items=\"end\" row -->\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"end\" style=\"height: 10rem;\">\n          <!-- Chrome: Desktop 55%, Mobile 40% -->\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 100%;\">\n            <div style=\"flex: 1; height: 55%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n            <div style=\"flex: 1; height: 40%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </aui-stack>\n          <!-- Safari: Desktop 45%, Mobile 50% -->\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 100%;\">\n            <div style=\"flex: 1; height: 45%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n            <div style=\"flex: 1; height: 50%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </aui-stack>\n          <!-- Firefox: Desktop 70%, Mobile 90% -->\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 100%;\">\n            <div style=\"flex: 1; height: 70%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n            <div style=\"flex: 1; height: 90%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </aui-stack>\n          <!-- Edge: Desktop 35%, Mobile 30% -->\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 100%;\">\n            <div style=\"flex: 1; height: 35%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n            <div style=\"flex: 1; height: 30%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </aui-stack>\n          <!-- Other: Desktop 25%, Mobile 20% -->\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 100%;\">\n            <div style=\"flex: 1; height: 25%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n            <div style=\"flex: 1; height: 20%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </aui-stack>\n        </aui-stack>\n        <!-- Category labels row -->\n        <aui-stack direction=\"row\" gap=\"3\">\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Chrome</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Safari</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Firefox</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Edge</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Other</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"md\">Mobile overtook Desktop in March</aui-heading>\n        <aui-text muted size=\"sm\">Showing Desktop (light) and Mobile (dark) visitors</aui-text>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "chart-horizontal",
+      "type": "block",
+      "summary": "Horizontal bar chart with category labels.",
+      "description": "A card showing horizontal bars for comparing categories. Each row has a fixed-width right-aligned label and a proportional bar sized via max-width percentage. Useful for browser share, feature usage, or any ranked categorical data.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Horizontal bar chart with category labels.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Browser Share</aui-heading>\n        <aui-text muted size=\"sm\">January – June 2026</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"3\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-text size=\"sm\" text=\"right\" style=\"width: 4rem;\">Chrome</aui-text>\n          <div style=\"width: 85%; height: 1.25rem; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-text size=\"sm\" text=\"right\" style=\"width: 4rem;\">Safari</aui-text>\n          <div style=\"width: 65%; height: 1.25rem; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-text size=\"sm\" text=\"right\" style=\"width: 4rem;\">Firefox</aui-text>\n          <div style=\"width: 55%; height: 1.25rem; background: var(--aui-chart-3); border-radius: var(--aui-radius);\"></div>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-text size=\"sm\" text=\"right\" style=\"width: 4rem;\">Edge</aui-text>\n          <div style=\"width: 45%; height: 1.25rem; background: var(--aui-chart-4); border-radius: var(--aui-radius);\"></div>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-text size=\"sm\" text=\"right\" style=\"width: 4rem;\">Other</aui-text>\n          <div style=\"width: 25%; height: 1.25rem; background: var(--aui-chart-5); border-radius: var(--aui-radius);\"></div>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"md\">Chrome leads at 42%</aui-heading>\n        <aui-text muted size=\"sm\">Showing browser usage for the last 6 months</aui-text>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "chart-interactive",
+      "type": "block",
+      "summary": "Wide chart card with stat summaries and dense bar visualization.",
+      "description": "A dashboard hero chart card. Header shows the title on the left with aui-stat summaries (Desktop, Mobile) trailing on the right. Content is a dense 12-bar visualization. Footer shows the date range. Designed for full-width dashboard positions.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-stat",
+        "aui-bar"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Wide chart card with stat summaries and dense bar visualization.",
+          "html": "<aui-container kind=\"card\" bordered>\n  <aui-header>\n    <aui-stack direction=\"row\" align-items=\"center\">\n      <aui-stack gap=\"1\" spacer>\n        <aui-heading size=\"lg\">Total Visitors</aui-heading>\n        <aui-text muted size=\"sm\">Last 3 months</aui-text>\n      </aui-stack>\n      <aui-stack direction=\"row\">\n        <aui-stat label=\"Desktop\" value=\"24,828\"></aui-stat>\n        <aui-stat label=\"Mobile\" value=\"25,010\"></aui-stat>\n      </aui-stack>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" style=\"height: 10rem;\" data-chart-bars>\n        <aui-bar label=\"Apr 1 · 3,120\" style=\"height: 35%;\"></aui-bar>\n        <aui-bar label=\"Apr 8 · 4,890\" style=\"height: 55%;\"></aui-bar>\n        <aui-bar label=\"Apr 15 · 3,740\" style=\"height: 42%;\"></aui-bar>\n        <aui-bar label=\"Apr 22 · 6,050\" style=\"height: 68%;\"></aui-bar>\n        <aui-bar label=\"Apr 29 · 4,010\" style=\"height: 45%;\"></aui-bar>\n        <aui-bar label=\"May 6 · 6,940\" style=\"height: 78%;\"></aui-bar>\n        <aui-bar label=\"May 13 · 4,630\" style=\"height: 52%;\"></aui-bar>\n        <aui-bar label=\"May 20 · 5,340\" style=\"height: 60%;\"></aui-bar>\n        <aui-bar label=\"May 27 · 8,010\" style=\"height: 90%;\" highlighted></aui-bar>\n        <aui-bar label=\"Jun 3 · 6,410\" style=\"height: 72%;\"></aui-bar>\n        <aui-bar label=\"Jun 10 · 4,270\" style=\"height: 48%;\"></aui-bar>\n        <aui-bar label=\"Jun 17 · 3,380\" style=\"height: 38%;\" highlighted></aui-bar>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"content\"><aui-text muted size=\"sm\">April 1 – June 29, 2026</aui-text></span>\n  </aui-footer>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "chart-labeled",
+      "type": "block",
+      "summary": "Vertical bar chart with value labels above each bar.",
+      "description": "A card showing vertical bars with exact values displayed above and month labels below. Labels and bars are in separate rows so percentage heights resolve correctly. Alternating opacity adds visual rhythm. Useful when exact numbers matter as much as the trend.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Vertical bar chart with value labels above each bar.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Monthly Visitors</aui-heading>\n        <aui-text muted size=\"sm\">January – June 2026</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"1\">\n        <!-- Value labels row -->\n        <aui-stack direction=\"row\" gap=\"2\">\n          <aui-text muted size=\"xs\" spacer text=\"center\">186</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">305</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">237</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">73</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">209</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">214</aui-text>\n        </aui-stack>\n        <!-- Bars: direct children of align-items=\"end\" row so height % resolves against 8rem -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"end\" style=\"height: 10rem;\">\n          <div style=\"flex: 1; height: 45%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 75%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 58%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 18%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 51%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 52%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n        </aui-stack>\n        <!-- Month labels row -->\n        <aui-stack direction=\"row\" gap=\"2\">\n          <aui-text muted size=\"xs\" spacer text=\"center\">Jan</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">Feb</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">Mar</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">Apr</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">May</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">Jun</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"md\">February peaked at 305 visitors</aui-heading>\n        <aui-text muted size=\"sm\">Showing total visitors for the last 6 months</aui-text>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "checkout-form",
+      "type": "block",
+      "summary": "Payment form with card details and billing address.",
+      "description": "A structured checkout form for collecting payment information. Includes card name, number, CVV, and expiry fields in a grid layout. The billing address section uses aui-fieldset legend=\"Billing Address\" (borderless) with a \"Same as shipping\" checkbox, optional comments. Footer uses aui-button-group for submit/cancel actions.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-field",
+        "aui-fieldset",
+        "aui-input",
+        "aui-textarea",
+        "aui-checkbox",
+        "aui-button",
+        "aui-button-group",
+        "aui-divider"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Payment form with card details and billing address.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Payment Method</aui-heading>\n        <aui-text muted size=\"sm\">All transactions are secure and encrypted</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack>\n        <aui-field label=\"Name on Card\" width=\"full\">\n          <aui-input width=\"full\" placeholder=\"John Doe\"></aui-input>\n        </aui-field>\n        <aui-stack direction=\"row\" gap=\"3\">\n          <aui-field label=\"Card Number\" width=\"full\" grow=\"3\" basis=\"0\">\n            <aui-input width=\"full\" placeholder=\"1234 5678 9012 3456\"></aui-input>\n          </aui-field>\n          <aui-field label=\"CVV\" grow=\"1\" basis=\"0\">\n            <aui-input width=\"full\" placeholder=\"123\"></aui-input>\n          </aui-field>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-fieldset legend=\"Billing Address\" borderless>\n          <aui-text muted size=\"sm\">The address associated with your payment method</aui-text>\n          <aui-checkbox>Same as shipping address</aui-checkbox>\n          <aui-field label=\"Comments\" width=\"full\">\n            <aui-textarea width=\"full\" placeholder=\"Add any additional comments\"></aui-textarea>\n          </aui-field>\n        </aui-fieldset>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button-group>\n      <aui-button primary grow=\"1\" basis=\"0\">Submit Payment</aui-button>\n      <aui-button scrim grow=\"1\" basis=\"0\">Cancel</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "clinical-trial",
+      "type": "block",
+      "summary": "Clinical Trial Pipeline — 13 nodes, 17 connections.",
+      "description": "Visual graph block rendered from the Clinical Trial Pipeline dataset using aui-graph components with port-selector noodle connections.\n",
+      "components": [
+        "aui-container",
+        "aui-text",
+        "aui-graph-ui",
+        "aui-graph-layer",
+        "aui-graph-node",
+        "aui-graph-noodle",
+        "aui-graph-port"
+      ],
+      "examples": [
+        {
+          "description": "Clinical Trial Pipeline — 13 nodes, 17 connections.",
+          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 32.875rem; min-width: 79.625rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- Protocol → Cohort Screening -->\n    <aui-graph-noodle from=\"ct-protocol:right\" to=\"ct-cohort:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Protocol → Randomization Engine -->\n    <aui-graph-noodle from=\"ct-protocol:right\" to=\"ct-randomize:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Cohort Screening → Randomization Engine -->\n    <aui-graph-noodle from=\"ct-cohort:right\" to=\"ct-randomize:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Randomization Engine → Control Arm -->\n    <aui-graph-noodle from=\"ct-randomize:right\" to=\"ct-control:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Randomization Engine → Treatment Arm A -->\n    <aui-graph-noodle from=\"ct-randomize:right\" to=\"ct-treat-a:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Randomization Engine → Treatment Arm B -->\n    <aui-graph-noodle from=\"ct-randomize:right\" to=\"ct-treat-b:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Control Arm → Primary Endpoint -->\n    <aui-graph-noodle from=\"ct-control:right\" to=\"ct-primary:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Treatment Arm A → Primary Endpoint -->\n    <aui-graph-noodle from=\"ct-treat-a:right\" to=\"ct-primary:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Treatment Arm A → Adverse Event Monitor -->\n    <aui-graph-noodle from=\"ct-treat-a:right\" to=\"ct-adverse:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Treatment Arm B → Adverse Event Monitor -->\n    <aui-graph-noodle from=\"ct-treat-b:right\" to=\"ct-adverse:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Treatment Arm B → Secondary Endpoint -->\n    <aui-graph-noodle from=\"ct-treat-b:right\" to=\"ct-secondary:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Primary Endpoint → Interim Analysis -->\n    <aui-graph-noodle from=\"ct-primary:right\" to=\"ct-interim:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Secondary Endpoint → Interim Analysis -->\n    <aui-graph-noodle from=\"ct-secondary:right\" to=\"ct-interim:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Adverse Event Monitor → DSMB Review -->\n    <aui-graph-noodle from=\"ct-adverse:right\" to=\"ct-dsmb:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Interim Analysis → DSMB Review -->\n    <aui-graph-noodle from=\"ct-interim:right\" to=\"ct-dsmb:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- DSMB Review → Regulatory Filing -->\n    <aui-graph-noodle from=\"ct-dsmb:right\" to=\"ct-regulatory:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Regulatory Filing → Publication -->\n    <aui-graph-noodle from=\"ct-regulatory:right\" to=\"ct-publication:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- Protocol -->\n    <aui-graph-node x=\"24\" y=\"186\" node-id=\"ct-protocol\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Protocol</aui-text>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Cohort Screening -->\n    <aui-graph-node x=\"224\" y=\"116\" node-id=\"ct-cohort\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Cohort Screening</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Randomization Engine -->\n    <aui-graph-node x=\"224\" y=\"256\" node-id=\"ct-randomize\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Randomization Engine</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Control Arm -->\n    <aui-graph-node x=\"424\" y=\"46\" node-id=\"ct-control\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Control Arm</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Treatment Arm A -->\n    <aui-graph-node x=\"424\" y=\"186\" node-id=\"ct-treat-a\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Treatment Arm A</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Treatment Arm B -->\n    <aui-graph-node x=\"424\" y=\"326\" node-id=\"ct-treat-b\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Treatment Arm B</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Adverse Event Monitor -->\n    <aui-graph-node x=\"624\" y=\"46\" node-id=\"ct-adverse\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Adverse Event Monitor</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Primary Endpoint -->\n    <aui-graph-node x=\"624\" y=\"186\" node-id=\"ct-primary\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Primary Endpoint</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Secondary Endpoint -->\n    <aui-graph-node x=\"624\" y=\"326\" node-id=\"ct-secondary\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Secondary Endpoint</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Interim Analysis -->\n    <aui-graph-node x=\"824\" y=\"116\" node-id=\"ct-interim\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Interim Analysis</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- DSMB Review -->\n    <aui-graph-node x=\"824\" y=\"256\" node-id=\"ct-dsmb\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">DSMB Review</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Regulatory Filing -->\n    <aui-graph-node x=\"1024\" y=\"116\" node-id=\"ct-regulatory\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Regulatory Filing</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Publication -->\n    <aui-graph-node x=\"1024\" y=\"256\" node-id=\"ct-publication\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Publication</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n  </aui-graph-layer>\n</aui-graph-ui>"
+        }
+      ]
+    },
+    {
+      "name": "commerce-pricing-table",
+      "type": "block",
+      "summary": "Three-tier pricing comparison with billing toggle, feature checklists, and CTAs.",
+      "description": "A pricing page layout with a centered header (title + subtitle), a monthly/yearly billing toggle using aui-segmented-control, and three tier cards in a responsive row. The featured Pro tier uses the accent intent on its container for visual emphasis and a \"Most Popular\" badge. Each card has a tier name, description, price heading, divider, feature checklist with success check icons using color: var(--aui-solid) for intent color, and a CTA button (outline for standard tiers, primary accent width=\"full\" for the featured tier). The Pro card's \"Most Popular\" badge sits above the heading in a centered stack (align-items=\"center\" text=\"center\"), not in the CTA row. Cards use spacer for equal flex sizing.\n",
+      "components": [
+        "aui-container",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-icon",
+        "aui-badge",
+        "aui-button",
+        "aui-divider",
+        "aui-segmented-control",
+        "aui-segment"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Three-tier pricing comparison with billing toggle, feature checklists, and CTAs.",
+          "html": "<aui-stack gap=\"4\" align-items=\"center\" text=\"center\">\n\n  <!-- Header -->\n  <aui-stack gap=\"2\" align-items=\"center\">\n    <aui-heading size=\"xl\">Simple, transparent pricing</aui-heading>\n    <aui-text muted>Choose the plan that fits your team. Upgrade or downgrade anytime.</aui-text>\n  </aui-stack>\n\n  <!-- Billing toggle -->\n  <aui-segmented-control value=\"monthly\">\n    <aui-segment value=\"monthly\" selected>Monthly</aui-segment>\n    <aui-segment value=\"yearly\">Yearly</aui-segment>\n  </aui-segmented-control>\n\n  <!-- Pricing cards -->\n  <aui-stack direction=\"row\" gap=\"3\" wrap align-items=\"start\">\n\n    <!-- Starter -->\n    <aui-container kind=\"card\" bordered spacer min-width=\"14\">\n      <aui-inset>\n        <aui-stack gap=\"4\">\n          <aui-stack gap=\"2\">\n            <aui-heading size=\"md\">Starter</aui-heading>\n            <aui-text muted size=\"sm\">For individuals and small projects.</aui-text>\n          </aui-stack>\n          <aui-stack gap=\"1\">\n            <aui-heading size=\"2xl\">$9<aui-text muted size=\"sm\" inline> / mo</aui-text></aui-heading>\n          </aui-stack>\n          <aui-divider></aui-divider>\n          <aui-stack gap=\"2\">\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-icon name=\"check\" size=\"sm\" success style=\"color: var(--aui-solid);\"></aui-icon>\n              <aui-text size=\"sm\">3 projects</aui-text>\n            </aui-stack>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-icon name=\"check\" size=\"sm\" success style=\"color: var(--aui-solid);\"></aui-icon>\n              <aui-text size=\"sm\">1 GB storage</aui-text>\n            </aui-stack>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-icon name=\"check\" size=\"sm\" success style=\"color: var(--aui-solid);\"></aui-icon>\n              <aui-text size=\"sm\">Email support</aui-text>\n            </aui-stack>\n          </aui-stack>\n          <aui-button outline width=\"full\">Get started</aui-button>\n        </aui-stack>\n      </aui-inset>\n    </aui-container>\n\n    <!-- Pro (featured) -->\n    <aui-container kind=\"card\" bordered accent spacer min-width=\"14\">\n      <aui-inset>\n        <aui-stack gap=\"4\">\n          <aui-stack gap=\"2\" align-items=\"center\" text=\"center\">\n            <aui-badge accent>Most Popular</aui-badge>\n            <aui-heading size=\"md\">Pro</aui-heading>\n            <aui-text muted size=\"sm\">For growing teams with advanced needs.</aui-text>\n          </aui-stack>\n          <aui-stack gap=\"1\">\n            <aui-heading size=\"2xl\">$29<aui-text muted size=\"sm\" inline> / mo</aui-text></aui-heading>\n          </aui-stack>\n          <aui-divider></aui-divider>\n          <aui-stack gap=\"2\">\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-icon name=\"check\" size=\"sm\" success style=\"color: var(--aui-solid);\"></aui-icon>\n              <aui-text size=\"sm\">Unlimited projects</aui-text>\n            </aui-stack>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-icon name=\"check\" size=\"sm\" success style=\"color: var(--aui-solid);\"></aui-icon>\n              <aui-text size=\"sm\">50 GB storage</aui-text>\n            </aui-stack>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-icon name=\"check\" size=\"sm\" success style=\"color: var(--aui-solid);\"></aui-icon>\n              <aui-text size=\"sm\">Priority support</aui-text>\n            </aui-stack>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-icon name=\"check\" size=\"sm\" success style=\"color: var(--aui-solid);\"></aui-icon>\n              <aui-text size=\"sm\">API access</aui-text>\n            </aui-stack>\n          </aui-stack>\n          <aui-button primary accent width=\"full\">Get started</aui-button>\n        </aui-stack>\n      </aui-inset>\n    </aui-container>\n\n    <!-- Enterprise -->\n    <aui-container kind=\"card\" bordered spacer min-width=\"14\">\n      <aui-inset>\n        <aui-stack gap=\"4\">\n          <aui-stack gap=\"2\">\n            <aui-heading size=\"md\">Enterprise</aui-heading>\n            <aui-text muted size=\"sm\">For large organizations with custom requirements.</aui-text>\n          </aui-stack>\n          <aui-stack gap=\"1\">\n            <aui-heading size=\"2xl\">Custom</aui-heading>\n          </aui-stack>\n          <aui-divider></aui-divider>\n          <aui-stack gap=\"2\">\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-icon name=\"check\" size=\"sm\" success style=\"color: var(--aui-solid);\"></aui-icon>\n              <aui-text size=\"sm\">Everything in Pro</aui-text>\n            </aui-stack>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-icon name=\"check\" size=\"sm\" success style=\"color: var(--aui-solid);\"></aui-icon>\n              <aui-text size=\"sm\">Unlimited storage</aui-text>\n            </aui-stack>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-icon name=\"check\" size=\"sm\" success style=\"color: var(--aui-solid);\"></aui-icon>\n              <aui-text size=\"sm\">SSO & SAML</aui-text>\n            </aui-stack>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-icon name=\"check\" size=\"sm\" success style=\"color: var(--aui-solid);\"></aui-icon>\n              <aui-text size=\"sm\">Dedicated account manager</aui-text>\n            </aui-stack>\n          </aui-stack>\n          <aui-button outline width=\"full\">Contact sales</aui-button>\n        </aui-stack>\n      </aui-inset>\n    </aui-container>\n\n  </aui-stack>\n</aui-stack>"
+        }
+      ]
+    },
+    {
+      "name": "comms-chat-thread",
+      "type": "block",
+      "summary": "Direct message chat thread with sent/received bubbles, typing indicator, and input bar.",
+      "description": "A chat interface panel (max-width=\"sm\", fixed height) with header (avatar, name/status stack with spacer, aui-dropdown-menu for more actions), scrollable message area with received (control background, padding, radius) and sent (solid background, color: var(--aui-solid-ink), padding, radius) message bubbles aligned left/right at max-width: 80%, timestamps, a typing indicator, and a footer input bar with attach button, full-width input (min-width: 0), and primary accent send button.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-avatar",
+        "aui-input",
+        "aui-button",
+        "aui-dropdown-menu",
+        "aui-option",
+        "aui-optgroup"
+      ],
+      "kind": "panel",
+      "examples": [
+        {
+          "description": "Direct message chat thread with sent/received bubbles, typing indicator, and input bar.",
+          "html": "<aui-container kind=\"panel\" bordered max-width=\"sm\" style=\"height: 28rem;\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-avatar size=\"sm\">SC</aui-avatar>\n      <aui-stack gap=\"0\" spacer>\n        <aui-heading size=\"sm\">Sarah Chen</aui-heading>\n        <aui-text muted size=\"xs\">Online</aui-text>\n      </aui-stack>\n      <aui-dropdown-menu label=\"More\" ghost hide-label size=\"sm\">\n        <aui-option value=\"mute\">Mute</aui-option>\n        <aui-option value=\"search\">Search</aui-option>\n        <aui-option value=\"pin\">Pin conversation</aui-option>\n        <aui-optgroup divider>\n          <aui-option value=\"delete\" danger>Delete</aui-option>\n        </aui-optgroup>\n      </aui-dropdown-menu>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack>\n\n        <!-- Received message -->\n        <aui-stack gap=\"1\" style=\"max-width: 80%;\">\n          <aui-container kind=\"widget\" class=\"aui-chat-thread-bubble aui-chat-thread-bubble-received\">\n            <aui-text size=\"sm\">Hey! Have you had a chance to review the token pipeline PR?</aui-text>\n          </aui-container>\n          <aui-text muted size=\"xs\">10:42 AM</aui-text>\n        </aui-stack>\n\n        <!-- Sent message -->\n        <aui-stack gap=\"1\" align-items=\"end\" style=\"max-width: 80%; align-self: end;\">\n          <aui-container kind=\"widget\" accent class=\"aui-chat-thread-bubble aui-chat-thread-bubble-sent\">\n            <aui-text size=\"sm\">Yes! Just finished reviewing it. Left a few comments on the transform stage.</aui-text>\n          </aui-container>\n          <aui-text muted size=\"xs\">10:44 AM</aui-text>\n        </aui-stack>\n\n        <!-- Received message -->\n        <aui-stack gap=\"1\" style=\"max-width: 80%;\">\n          <aui-container kind=\"widget\" class=\"aui-chat-thread-bubble aui-chat-thread-bubble-received\">\n            <aui-text size=\"sm\">Great, I'll take a look. Want to pair on the CSS output format?</aui-text>\n          </aui-container>\n          <aui-text muted size=\"xs\">10:45 AM</aui-text>\n        </aui-stack>\n\n        <!-- Typing indicator -->\n        <aui-stack gap=\"1\" style=\"max-width: 80%;\">\n          <aui-container kind=\"widget\" class=\"aui-chat-thread-bubble aui-chat-thread-bubble-received\">\n            <aui-text muted size=\"sm\">typing…</aui-text>\n          </aui-container>\n        </aui-stack>\n\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-button ghost hide-label label=\"Attach\" icon-leading=\"paperclip\" size=\"sm\"></aui-button>\n      <aui-input placeholder=\"Type a message…\" width=\"full\" size=\"sm\"></aui-input>\n      <aui-button primary accent hide-label label=\"Send\" icon-leading=\"arrow-up\" size=\"sm\"></aui-button>\n    </aui-stack>\n  </aui-footer>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "comms-notification-list",
+      "type": "block",
+      "summary": "Notification panel with count badge, mark-all-read action, and categorized items.",
+      "description": "A notifications panel (max-width=\"sm\") with a header showing title heading (no spacer), count badge next to heading, spacer, then a scrim mark-all-read button. Notification items have category-colored solid avatars using the solid attribute (comment=accent chat-dots, mention=warning user, assign=success check, alert=danger warning). Each item has a heading with strong actor/entity names, muted xs timestamp, and optional unread accent dot badge. Items use gap=\"4\" for vertical spacing.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-avatar",
+        "aui-icon",
+        "aui-badge",
+        "aui-button"
+      ],
+      "kind": "panel",
+      "examples": [
+        {
+          "description": "Notification panel with count badge, mark-all-read action, and categorized items.",
+          "html": "<aui-container kind=\"panel\" bordered max-width=\"sm\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-heading size=\"lg\">Notifications</aui-heading>\n      <aui-badge>12</aui-badge>\n      <aui-text spacer></aui-text>\n      <aui-button scrim size=\"sm\">Mark all read</aui-button>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"start\">\n          <aui-avatar size=\"xs\" accent solid><aui-icon name=\"chat-dots\" size=\"xs\"></aui-icon></aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"sm\"><strong>Sarah Chen</strong> commented on <strong>Auth flow redesign</strong></aui-heading>\n            <aui-text muted size=\"xs\">2 minutes ago</aui-text>\n          </aui-stack>\n          <aui-badge accent dot></aui-badge>\n        </aui-stack>\n\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"start\">\n          <aui-avatar size=\"xs\" warning solid><aui-icon name=\"user\" size=\"xs\"></aui-icon></aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"sm\"><strong>Alex Rivera</strong> mentioned you in <strong>Sprint planning</strong></aui-heading>\n            <aui-text muted size=\"xs\">15 minutes ago</aui-text>\n          </aui-stack>\n          <aui-badge accent dot></aui-badge>\n        </aui-stack>\n\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"start\">\n          <aui-avatar size=\"xs\" success solid><aui-icon name=\"check\" size=\"xs\"></aui-icon></aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"sm\"><strong>James Wilson</strong> assigned you to <strong>API migration</strong></aui-heading>\n            <aui-text muted size=\"xs\">1 hour ago</aui-text>\n          </aui-stack>\n        </aui-stack>\n\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"start\">\n          <aui-avatar size=\"xs\" danger solid><aui-icon name=\"warning\" size=\"xs\"></aui-icon></aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"sm\">Build failed on <strong>main</strong> branch</aui-heading>\n            <aui-text muted size=\"xs\">3 hours ago</aui-text>\n          </aui-stack>\n        </aui-stack>\n\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"start\">\n          <aui-avatar size=\"xs\" accent solid><aui-icon name=\"chat-dots\" size=\"xs\"></aui-icon></aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"sm\"><strong>Maria Santos</strong> replied to your comment</aui-heading>\n            <aui-text muted size=\"xs\">5 hours ago</aui-text>\n          </aui-stack>\n        </aui-stack>\n\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"start\">\n          <aui-avatar size=\"xs\" success solid><aui-icon name=\"check\" size=\"xs\"></aui-icon></aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"sm\"><strong>Liam Walker</strong> approved your PR <strong>#142</strong></aui-heading>\n            <aui-text muted size=\"xs\">Yesterday</aui-text>\n          </aui-stack>\n        </aui-stack>\n\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "content-article-card",
+      "type": "block",
+      "summary": "Article preview card with thumbnail, tags, title, excerpt, and author row.",
+      "description": "A vertical article card for content grids and feeds. Top zone is a 16:9 aspect-ratio thumbnail placeholder. Body contains colored tag badges, a title heading, a 3-line clamped excerpt, a divider, and an author row with avatar initials, name, date, and right-aligned read time. The container uses the interactive attribute for hover/click affordance. Suitable for blog listings, documentation indexes, and content hubs.\n",
+      "components": [
+        "aui-container",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-badge",
+        "aui-avatar",
+        "aui-icon",
+        "aui-divider"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Article preview card with thumbnail, tags, title, excerpt, and author row.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\" interactive>\n\n  <!-- Thumbnail -->\n  <div style=\"aspect-ratio: 16/9; background: var(--aui-neutral-3); display: flex; align-items: center; justify-content: center;\">\n    <aui-icon name=\"image\" style=\"--aui-icon-size: 2rem;\" muted></aui-icon>\n  </div>\n\n  <!-- Body -->\n  <aui-inset>\n    <aui-stack>\n      <aui-stack direction=\"row\" gap=\"2\">\n        <aui-badge accent>Engineering</aui-badge>\n        <aui-badge success>New</aui-badge>\n      </aui-stack>\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"md\">Building a Scalable Design Token Pipeline</aui-heading>\n        <aui-text muted size=\"sm\" style=\"-webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;\">How we automated our design-to-code workflow using Style Dictionary, custom transforms, and a CI pipeline that keeps tokens in sync across web, iOS, and Android platforms.</aui-text>\n      </aui-stack>\n      <aui-divider></aui-divider>\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-avatar size=\"sm\">SR</aui-avatar>\n        <aui-text size=\"xs\" spacer>Sarah Rivera · Mar 12</aui-text>\n        <aui-text size=\"xs\" muted>6 min read</aui-text>\n      </aui-stack>\n    </aui-stack>\n  </aui-inset>\n\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "contributors",
+      "type": "block",
+      "summary": "Contributors card showing overlapping avatar group with count and overflow link.",
+      "description": "A card displaying project contributors as an overlapping avatar group with a count badge and automatic +N overflow counter. Footer shows total contributor count as a text link. Use for open source projects, team pages, or community sections.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-avatar",
+        "aui-avatar-group",
+        "aui-badge"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Contributors card showing overlapping avatar group with count and overflow link.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-heading size=\"lg\">Contributors</aui-heading>\n        <aui-badge>312</aui-badge>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-avatar-group max=\"8\">\n        <aui-avatar>AJ</aui-avatar>\n        <aui-avatar>BK</aui-avatar>\n        <aui-avatar>CL</aui-avatar>\n        <aui-avatar>DM</aui-avatar>\n        <aui-avatar>EP</aui-avatar>\n        <aui-avatar>FW</aui-avatar>\n        <aui-avatar>GR</aui-avatar>\n        <aui-avatar>HN</aui-avatar>\n        <aui-avatar>IQ</aui-avatar>\n        <aui-avatar>JT</aui-avatar>\n        <aui-avatar>KS</aui-avatar>\n        <aui-avatar>LV</aui-avatar>\n        <aui-avatar>MX</aui-avatar>\n        <aui-avatar>NY</aui-avatar>\n        <aui-avatar>OZ</aui-avatar>\n        <aui-avatar>PA</aui-avatar>\n      </aui-avatar-group>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\"><aui-text muted size=\"sm\"><a href=\"#\">+ 810 contributors</a></aui-text></span>\n  </aui-footer>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "cyber-threat",
+      "type": "block",
+      "summary": "Cyber Threat Intelligence — 12 nodes, 14 connections.",
+      "description": "Visual graph block rendered from the Cyber Threat Intelligence dataset using aui-graph components with port-selector noodle connections.\n",
+      "components": [
+        "aui-container",
+        "aui-text",
+        "aui-graph-ui",
+        "aui-graph-layer",
+        "aui-graph-node",
+        "aui-graph-noodle",
+        "aui-graph-port"
+      ],
+      "examples": [
+        {
+          "description": "Cyber Threat Intelligence — 12 nodes, 14 connections.",
+          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 32.875rem; min-width: 84.625rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- Network Sensor → SIEM Aggregator -->\n    <aui-graph-noodle from=\"cy-sensor:right\" to=\"cy-siem:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Endpoint Agent → SIEM Aggregator -->\n    <aui-graph-noodle from=\"cy-endpoint:right\" to=\"cy-siem:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Threat Intel Feed → SIEM Aggregator -->\n    <aui-graph-noodle from=\"cy-intel:right\" to=\"cy-siem:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- SIEM Aggregator → Threat Classifier -->\n    <aui-graph-noodle from=\"cy-siem:right\" to=\"cy-classify:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- SIEM Aggregator → IOC Enrichment -->\n    <aui-graph-noodle from=\"cy-siem:right\" to=\"cy-ioc:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Threat Classifier → Triage Engine -->\n    <aui-graph-noodle from=\"cy-classify:right\" to=\"cy-triage:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- IOC Enrichment → Triage Engine -->\n    <aui-graph-noodle from=\"cy-ioc:right\" to=\"cy-triage:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Triage Engine → Incident Response -->\n    <aui-graph-noodle from=\"cy-triage:right\" to=\"cy-incident:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Triage Engine → Containment Action -->\n    <aui-graph-noodle from=\"cy-triage:right\" to=\"cy-contain:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Incident Response → Forensic Analysis -->\n    <aui-graph-noodle from=\"cy-incident:right\" to=\"cy-forensic:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Incident Response → Recovery -->\n    <aui-graph-noodle from=\"cy-incident:right\" to=\"cy-recovery:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Containment Action → Recovery -->\n    <aui-graph-noodle from=\"cy-contain:right\" to=\"cy-recovery:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Forensic Analysis → Post-Mortem -->\n    <aui-graph-noodle from=\"cy-forensic:left\" to=\"cy-postmortem:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Recovery → Post-Mortem -->\n    <aui-graph-noodle from=\"cy-recovery:left\" to=\"cy-postmortem:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- Network Sensor -->\n    <aui-graph-node x=\"24\" y=\"46\" node-id=\"cy-sensor\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Network Sensor</aui-text>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Endpoint Agent -->\n    <aui-graph-node x=\"24\" y=\"186\" node-id=\"cy-endpoint\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Endpoint Agent</aui-text>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Threat Intel Feed -->\n    <aui-graph-node x=\"24\" y=\"326\" node-id=\"cy-intel\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Threat Intel Feed</aui-text>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- SIEM Aggregator -->\n    <aui-graph-node x=\"240\" y=\"186\" node-id=\"cy-siem\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">SIEM Aggregator</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Threat Classifier -->\n    <aui-graph-node x=\"456\" y=\"116\" node-id=\"cy-classify\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Threat Classifier</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- IOC Enrichment -->\n    <aui-graph-node x=\"456\" y=\"256\" node-id=\"cy-ioc\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">IOC Enrichment</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Triage Engine -->\n    <aui-graph-node x=\"672\" y=\"186\" node-id=\"cy-triage\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Triage Engine</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Incident Response -->\n    <aui-graph-node x=\"888\" y=\"116\" node-id=\"cy-incident\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Incident Response</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Containment Action -->\n    <aui-graph-node x=\"888\" y=\"256\" node-id=\"cy-contain\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Containment Action</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Forensic Analysis -->\n    <aui-graph-node x=\"1104\" y=\"46\" node-id=\"cy-forensic\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Forensic Analysis</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Recovery -->\n    <aui-graph-node x=\"1104\" y=\"186\" node-id=\"cy-recovery\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Recovery</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Post-Mortem -->\n    <aui-graph-node x=\"1104\" y=\"326\" node-id=\"cy-postmortem\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Post-Mortem</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n  </aui-graph-layer>\n</aui-graph-ui>"
+        }
+      ]
+    },
+    {
+      "name": "dashboard-kpi-grid",
+      "type": "block",
+      "summary": "Dashboard page with title, date range, period selector, and 4-card KPI grid with sparklines.",
+      "description": "A dashboard overview layout. Header has a title, date range subtitle, and a segmented control for time period selection (24h/7d/30d/90d). Below is a responsive 4-card KPI grid using aui-stat components, each with label, large value, trend direction, change amount, and an aui-sparkline child for inline visualization. Intent attrs (danger, success) color the value when trend direction differs from sentiment.\n",
+      "components": [
+        "aui-container",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-stat",
+        "aui-segmented-control",
+        "aui-segment",
+        "aui-sparkline"
+      ],
+      "kind": "widget",
+      "examples": [
+        {
+          "description": "Dashboard page with title, date range, period selector, and 4-card KPI grid with sparklines.",
+          "html": "<aui-stack gap=\"4\">\n\n  <!-- Dashboard header -->\n  <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n    <aui-stack gap=\"1\" spacer>\n      <aui-heading size=\"xl\">Overview</aui-heading>\n      <aui-text muted size=\"sm\">Mon, Mar 10 – Sun, Mar 16</aui-text>\n    </aui-stack>\n    <aui-segmented-control value=\"7d\" size=\"sm\">\n      <aui-segment value=\"24h\">24h</aui-segment>\n      <aui-segment value=\"7d\" selected>7d</aui-segment>\n      <aui-segment value=\"30d\">30d</aui-segment>\n      <aui-segment value=\"90d\">90d</aui-segment>\n    </aui-segmented-control>\n  </aui-stack>\n\n  <!-- KPI grid -->\n  <aui-stack direction=\"row\" gap=\"3\" wrap>\n\n    <aui-container kind=\"widget\" bordered spacer min-width=\"12\">\n      <aui-inset>\n        <aui-stat label=\"Revenue\" value=\"$48.2k\" trend=\"up\" change=\"+12.3%\">\n          <aui-sparkline values=\"40,55,70,60,80,75,95\" color=\"1\" highlight=\"last\"></aui-sparkline>\n        </aui-stat>\n      </aui-inset>\n    </aui-container>\n\n    <aui-container kind=\"widget\" bordered spacer min-width=\"12\">\n      <aui-inset>\n        <aui-stat label=\"Users\" value=\"2,847\" trend=\"up\" change=\"+8.1%\">\n          <aui-sparkline values=\"50,60,55,70,65,75,90\" color=\"2\" highlight=\"last\"></aui-sparkline>\n        </aui-stat>\n      </aui-inset>\n    </aui-container>\n\n    <aui-container kind=\"widget\" bordered spacer min-width=\"12\">\n      <aui-inset>\n        <aui-stat label=\"Conversion\" value=\"4.2%\" trend=\"down\" change=\"−0.3%\" danger>\n          <aui-sparkline values=\"70,60,50,55,45,40,35\" color=\"3\" highlight=\"last\"></aui-sparkline>\n        </aui-stat>\n      </aui-inset>\n    </aui-container>\n\n    <aui-container kind=\"widget\" bordered spacer min-width=\"12\">\n      <aui-inset>\n        <aui-stat label=\"Latency\" value=\"142ms\" trend=\"down\" change=\"−18ms\" success>\n          <aui-sparkline values=\"60,55,65,50,45,40,35\" color=\"4\" highlight=\"last\"></aui-sparkline>\n        </aui-stat>\n      </aui-inset>\n    </aui-container>\n\n  </aui-stack>\n</aui-stack>"
+        }
+      ]
+    },
+    {
+      "name": "dashboard-layout",
+      "type": "block",
+      "summary": "Application shell with sidebar, page header, and content grid.",
+      "description": "A production-ready app shell combining a compact sidebar with a main content area. The sidebar uses card kind with elevation for visual separation, aui-nav-item elements with an active state, and a user footer. The main area has a welcoming page header and a responsive grid of aui-stat widgets. This is a starting composition — the content area would hold tables, charts, or lists in a real app.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-wrap",
+        "aui-heading",
+        "aui-text",
+        "aui-stat",
+        "aui-icon",
+        "aui-avatar",
+        "aui-nav-item"
+      ],
+      "kind": "card",
       "examples": [
         {
           "description": "Application shell with sidebar, page header, and content grid.",
@@ -16775,6 +17287,33 @@
         }
       ]
     },
+    {
+      "name": "data-activity-log",
+      "type": "block",
+      "summary": "Chronological activity feed with date groups, semantic icons, and filter controls.",
+      "description": "A panel listing recent activity entries grouped by date. Header has a title and a segmented control for filtering (All/Changes/Comments). Each date group has an uppercase label and a list of activity items. Each item uses a solid-color avatar with a semantic icon (deploy=success, comment=warning, update=accent, create=success, delete=danger), a text description with bold actor and entity names, optional monospace detail, and a timestamp. Groups are separated by dividers.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-avatar",
+        "aui-icon",
+        "aui-segmented-control",
+        "aui-segment",
+        "aui-divider"
+      ],
+      "kind": "panel",
+      "examples": [
+        {
+          "description": "Chronological activity feed with date groups, semantic icons, and filter controls.",
+          "html": "<aui-container kind=\"panel\" bordered max-width=\"lg\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-heading size=\"lg\" spacer>Activity</aui-heading>\n      <aui-segmented-control value=\"all\" size=\"sm\">\n        <aui-segment value=\"all\" selected>All</aui-segment>\n        <aui-segment value=\"changes\">Changes</aui-segment>\n        <aui-segment value=\"comments\">Comments</aui-segment>\n      </aui-segmented-control>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n\n        <!-- Today group -->\n        <aui-stack gap=\"3\">\n          <aui-heading group>Today</aui-heading>\n\n          <aui-stack gap=\"3\">\n            <aui-stack direction=\"row\" gap=\"3\">\n              <aui-avatar size=\"xs\" success shrink=\"0\" solid><aui-icon name=\"arrow-up\" size=\"xs\"></aui-icon></aui-avatar>\n              <aui-stack gap=\"1\" spacer>\n                <aui-heading size=\"sm\"><strong>Sarah Chen</strong> deployed <strong>v2.4.1</strong> to production</aui-heading>\n                <aui-text size=\"xs\" muted style=\"font-family: var(--aui-font-mono);\">commit a1b2c3d</aui-text>\n                <aui-text size=\"xs\" muted>2 minutes ago</aui-text>\n              </aui-stack>\n            </aui-stack>\n\n            <aui-stack direction=\"row\" gap=\"3\">\n              <aui-avatar size=\"xs\" warning shrink=\"0\" solid><aui-icon name=\"chat-dots\" size=\"xs\"></aui-icon></aui-avatar>\n              <aui-stack gap=\"1\" spacer>\n                <aui-heading size=\"sm\"><strong>Alex Rivera</strong> commented on <strong>Auth flow redesign</strong></aui-heading>\n                <aui-text size=\"xs\" muted>15 minutes ago</aui-text>\n              </aui-stack>\n            </aui-stack>\n\n            <aui-stack direction=\"row\" gap=\"3\">\n              <aui-avatar size=\"xs\" accent shrink=\"0\" solid><aui-icon name=\"pencil\" size=\"xs\"></aui-icon></aui-avatar>\n              <aui-stack gap=\"1\" spacer>\n                <aui-heading size=\"sm\"><strong>Maria Santos</strong> updated <strong>API rate limits</strong> to 1000 req/min</aui-heading>\n                <aui-text size=\"xs\" muted>1 hour ago</aui-text>\n              </aui-stack>\n            </aui-stack>\n          </aui-stack>\n        </aui-stack>\n\n        <aui-divider></aui-divider>\n\n        <!-- Yesterday group -->\n        <aui-stack gap=\"3\">\n          <aui-heading group>Yesterday</aui-heading>\n\n          <aui-stack gap=\"3\">\n            <aui-stack direction=\"row\" gap=\"3\">\n              <aui-avatar size=\"xs\" success shrink=\"0\" solid><aui-icon name=\"plus\" size=\"xs\"></aui-icon></aui-avatar>\n              <aui-stack gap=\"1\" spacer>\n                <aui-heading size=\"sm\"><strong>James Wilson</strong> created <strong>Mobile app project</strong></aui-heading>\n                <aui-text size=\"xs\" muted style=\"font-family: var(--aui-font-mono);\">3 files added</aui-text>\n                <aui-text size=\"xs\" muted>Yesterday at 4:32 PM</aui-text>\n              </aui-stack>\n            </aui-stack>\n\n            <aui-stack direction=\"row\" gap=\"3\">\n              <aui-avatar size=\"xs\" danger shrink=\"0\" solid><aui-icon name=\"trash\" size=\"xs\"></aui-icon></aui-avatar>\n              <aui-stack gap=\"1\" spacer>\n                <aui-heading size=\"sm\"><strong>Sarah Chen</strong> deleted <strong>Legacy endpoints</strong></aui-heading>\n                <aui-text size=\"xs\" muted>Yesterday at 2:15 PM</aui-text>\n              </aui-stack>\n            </aui-stack>\n          </aui-stack>\n        </aui-stack>\n\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
+        }
+      ]
+    },
     {
       "name": "data-eng-dag",
       "type": "block",
@@ -16796,6 +17335,85 @@
         }
       ]
     },
+    {
+      "name": "data-metric-card",
+      "type": "block",
+      "summary": "Row of KPI metric widgets with sparklines and trend indicators.",
+      "description": "A responsive row of four compact metric cards using the aui-stat component. Each stat displays a label, large numeric value, trend direction with change amount, and an aui-sparkline child for inline visualization. Cards wrap responsively via flex-wrap. Each card uses the widget kind for compact density.\n",
+      "components": [
+        "aui-container",
+        "aui-inset",
+        "aui-stack",
+        "aui-stat",
+        "aui-sparkline"
+      ],
+      "kind": "widget",
+      "examples": [
+        {
+          "description": "Row of KPI metric widgets with sparklines and trend indicators.",
+          "html": "<aui-stack direction=\"row\" gap=\"3\" wrap>\n\n  <aui-container kind=\"widget\" bordered spacer min-width=\"10\">\n    <aui-inset>\n      <aui-stat label=\"Monthly Revenue\" value=\"$48.2k\" trend=\"up\" change=\"+12.3%\">\n        <aui-sparkline values=\"40,55,35,70,60,80,95\" color=\"1\" highlight=\"last\"></aui-sparkline>\n      </aui-stat>\n    </aui-inset>\n  </aui-container>\n\n  <aui-container kind=\"widget\" bordered spacer min-width=\"10\">\n    <aui-inset>\n      <aui-stat label=\"Active Users\" value=\"2,847\" trend=\"up\" change=\"+8.1%\">\n        <aui-sparkline values=\"60,45,55,50,70,65,85\" color=\"2\" highlight=\"last\"></aui-sparkline>\n      </aui-stat>\n    </aui-inset>\n  </aui-container>\n\n  <aui-container kind=\"widget\" bordered spacer min-width=\"10\">\n    <aui-inset>\n      <aui-stat label=\"Churn Rate\" value=\"3.2%\" trend=\"up\" change=\"+0.4%\" danger>\n        <aui-sparkline values=\"80,70,60,50,55,40,35\" color=\"3\" highlight=\"last\"></aui-sparkline>\n      </aui-stat>\n    </aui-inset>\n  </aui-container>\n\n  <aui-container kind=\"widget\" bordered spacer min-width=\"10\">\n    <aui-inset>\n      <aui-stat label=\"Avg. Session\" value=\"4m 32s\" trend=\"up\" change=\"+0:18\">\n        <aui-sparkline values=\"50,60,55,70,65,75,90\" color=\"4\" highlight=\"last\"></aui-sparkline>\n      </aui-stat>\n    </aui-inset>\n  </aui-container>\n\n</aui-stack>"
+        }
+      ]
+    },
+    {
+      "name": "data-table",
+      "type": "block",
+      "summary": "Customer data table with search, status badges, and pagination footer.",
+      "description": "A panel with a searchable data table. Header has a title+count stack and a compact type=\"search\" input (auto icon + clear) in a vertically centered row. The table uses aui-table with cols=\"2fr 1fr auto\" for grid track sizing (Company with name+email stack, Plan, Status badge). Footer shows row count and pagination controls. Status badges use success/warning/danger intents for Active/Trial/Churned states.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-footer",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-input",
+        "aui-table",
+        "aui-table-head",
+        "aui-table-body",
+        "aui-table-row",
+        "aui-table-header",
+        "aui-table-cell",
+        "aui-badge",
+        "aui-pagination"
+      ],
+      "kind": "panel",
+      "examples": [
+        {
+          "description": "Customer data table with search, status badges, and pagination footer.",
+          "html": "<aui-container kind=\"panel\" bordered max-width=\"xl\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-stack gap=\"1\" spacer>\n        <aui-heading size=\"lg\">Customers</aui-heading>\n        <aui-text muted size=\"sm\">248 total</aui-text>\n      </aui-stack>\n      <aui-input type=\"search\" placeholder=\"Search…\" size=\"sm\"></aui-input>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-table cols=\"2fr 1fr auto\">\n      <aui-table-head>\n        <aui-table-row>\n          <aui-table-header>Company</aui-table-header>\n          <aui-table-header>Plan</aui-table-header>\n          <aui-table-header>Status</aui-table-header>\n        </aui-table-row>\n      </aui-table-head>\n      <aui-table-body>\n        <aui-table-row>\n          <aui-table-cell>\n            <aui-stack gap=\"0\">\n              <aui-heading size=\"sm\">Acme Corp</aui-heading>\n              <aui-text muted size=\"xs\">contact@acme.com</aui-text>\n            </aui-stack>\n          </aui-table-cell>\n          <aui-table-cell><aui-text size=\"sm\">Enterprise</aui-text></aui-table-cell>\n          <aui-table-cell><aui-badge success>Active</aui-badge></aui-table-cell>\n        </aui-table-row>\n        <aui-table-row>\n          <aui-table-cell>\n            <aui-stack gap=\"0\">\n              <aui-heading size=\"sm\">Globex Inc</aui-heading>\n              <aui-text muted size=\"xs\">admin@globex.io</aui-text>\n            </aui-stack>\n          </aui-table-cell>\n          <aui-table-cell><aui-text size=\"sm\">Pro</aui-text></aui-table-cell>\n          <aui-table-cell><aui-badge success>Active</aui-badge></aui-table-cell>\n        </aui-table-row>\n        <aui-table-row>\n          <aui-table-cell>\n            <aui-stack gap=\"0\">\n              <aui-heading size=\"sm\">Initech</aui-heading>\n              <aui-text muted size=\"xs\">hello@initech.com</aui-text>\n            </aui-stack>\n          </aui-table-cell>\n          <aui-table-cell><aui-text size=\"sm\">Starter</aui-text></aui-table-cell>\n          <aui-table-cell><aui-badge warning>Trial</aui-badge></aui-table-cell>\n        </aui-table-row>\n        <aui-table-row>\n          <aui-table-cell>\n            <aui-stack gap=\"0\">\n              <aui-heading size=\"sm\">Umbrella Ltd</aui-heading>\n              <aui-text muted size=\"xs\">ops@umbrella.co</aui-text>\n            </aui-stack>\n          </aui-table-cell>\n          <aui-table-cell><aui-text size=\"sm\">Enterprise</aui-text></aui-table-cell>\n          <aui-table-cell><aui-badge success>Active</aui-badge></aui-table-cell>\n        </aui-table-row>\n        <aui-table-row>\n          <aui-table-cell>\n            <aui-stack gap=\"0\">\n              <aui-heading size=\"sm\">Stark Industries</aui-heading>\n              <aui-text muted size=\"xs\">tony@stark.dev</aui-text>\n            </aui-stack>\n          </aui-table-cell>\n          <aui-table-cell><aui-text size=\"sm\">Pro</aui-text></aui-table-cell>\n          <aui-table-cell><aui-badge danger>Churned</aui-badge></aui-table-cell>\n        </aui-table-row>\n      </aui-table-body>\n    </aui-table>\n  </aui-content>\n  <aui-footer>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-text muted size=\"xs\" spacer>Showing 1–5 of 248</aui-text>\n      <aui-pagination total=\"50\" current=\"1\" size=\"sm\"></aui-pagination>\n    </aui-stack>\n  </aui-footer>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "data-timeline",
+      "type": "block",
+      "summary": "Chronological event timeline with date groups, connector lines, and semantic icons.",
+      "description": "A vertical timeline panel showing events grouped by date. Header has a title and event count badge. Events use aui-stepper with aui-step children for connector lines between entries, with solid-color avatars per action type (deploy=success, comment=warning, update=accent, create=success, delete=danger) using solid for solid avatar backgrounds. Each event row has an aui-heading size=\"sm\" with strong actor/entity names, optional monospace detail via inline font-family, and a timestamp. Date groups use aui-heading group for uppercase section labels and are separated by dividers.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-inset",
+        "aui-stepper",
+        "aui-step",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-avatar",
+        "aui-icon",
+        "aui-badge",
+        "aui-divider"
+      ],
+      "kind": "panel",
+      "examples": [
+        {
+          "description": "Chronological event timeline with date groups, connector lines, and semantic icons.",
+          "html": "<aui-container kind=\"panel\" bordered max-width=\"lg\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-heading size=\"lg\" spacer>History</aui-heading>\n      <aui-badge>12 events</aui-badge>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n\n        <!-- Today -->\n        <aui-stack gap=\"3\">\n          <aui-heading group>Today</aui-heading>\n\n          <aui-stepper>\n            <aui-step state=\"done\">\n              <aui-avatar size=\"xs\" success shrink=\"0\" solid><aui-icon name=\"arrow-up\" size=\"xs\"></aui-icon></aui-avatar>\n              <aui-stack gap=\"1\" spacer>\n                <aui-heading size=\"sm\"><strong>Sarah Chen</strong> deployed <strong>v2.4.1</strong></aui-heading>\n                <aui-text size=\"xs\" muted style=\"font-family: var(--aui-font-mono);\">commit a1b2c3d · 3 files changed</aui-text>\n                <aui-text size=\"xs\" muted>10:42 AM</aui-text>\n              </aui-stack>\n            </aui-step>\n\n            <aui-step state=\"done\">\n              <aui-avatar size=\"xs\" warning shrink=\"0\" solid><aui-icon name=\"chat-dots\" size=\"xs\"></aui-icon></aui-avatar>\n              <aui-stack gap=\"1\" spacer>\n                <aui-heading size=\"sm\"><strong>Alex Rivera</strong> commented on <strong>Auth flow redesign</strong></aui-heading>\n                <aui-text size=\"xs\" muted>9:15 AM</aui-text>\n              </aui-stack>\n            </aui-step>\n\n            <aui-step state=\"done\">\n              <aui-avatar size=\"xs\" accent shrink=\"0\" solid><aui-icon name=\"pencil\" size=\"xs\"></aui-icon></aui-avatar>\n              <aui-stack gap=\"1\" spacer>\n                <aui-heading size=\"sm\"><strong>Maria Santos</strong> updated <strong>API rate limits</strong></aui-heading>\n                <aui-text size=\"xs\" muted>8:30 AM</aui-text>\n              </aui-stack>\n            </aui-step>\n          </aui-stepper>\n        </aui-stack>\n\n        <aui-divider></aui-divider>\n\n        <!-- Yesterday -->\n        <aui-stack gap=\"3\">\n          <aui-heading group>Yesterday</aui-heading>\n\n          <aui-stepper>\n            <aui-step state=\"done\">\n              <aui-avatar size=\"xs\" success shrink=\"0\" solid><aui-icon name=\"plus\" size=\"xs\"></aui-icon></aui-avatar>\n              <aui-stack gap=\"1\" spacer>\n                <aui-heading size=\"sm\"><strong>James Wilson</strong> created <strong>Mobile app project</strong></aui-heading>\n                <aui-text size=\"xs\" muted>4:32 PM</aui-text>\n              </aui-stack>\n            </aui-step>\n\n            <aui-step state=\"done\">\n              <aui-avatar size=\"xs\" danger shrink=\"0\" solid><aui-icon name=\"trash\" size=\"xs\"></aui-icon></aui-avatar>\n              <aui-stack gap=\"1\" spacer>\n                <aui-heading size=\"sm\"><strong>Sarah Chen</strong> deleted <strong>Legacy endpoints</strong></aui-heading>\n                <aui-text size=\"xs\" muted>2:15 PM</aui-text>\n              </aui-stack>\n            </aui-step>\n\n            <aui-step>\n              <aui-avatar size=\"xs\" accent shrink=\"0\" solid><aui-icon name=\"gear\" size=\"xs\"></aui-icon></aui-avatar>\n              <aui-stack gap=\"1\" spacer>\n                <aui-heading size=\"sm\"><strong>Liam Walker</strong> changed status to <aui-badge success>Resolved</aui-badge></aui-heading>\n                <aui-text size=\"xs\" muted>11:08 AM</aui-text>\n              </aui-stack>\n            </aui-step>\n          </aui-stepper>\n        </aui-stack>\n\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
+        }
+      ]
+    },
     {
       "name": "date-picker",
       "type": "block",
@@ -16857,10 +17475,227 @@
       ]
     },
     {
-      "name": "env-variables",
+      "name": "env-variables",
+      "type": "block",
+      "summary": "Environment variables panel with masked secrets and deploy action.",
+      "description": "A panel listing environment variable key-value pairs. Keys use monospace font. Secret values are masked with dots; public values show their content. Footer uses aui-button-group for edit and deploy actions.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-input",
+        "aui-button",
+        "aui-button-group"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Environment variables panel with masked secrets and deploy action.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"md\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Environment Variables</aui-heading>\n        <aui-text muted size=\"sm\">Production · 8 variables</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" class=\"aui-env-variables-row\">\n          <aui-text size=\"sm\" weight=\"medium\" font=\"mono\" style=\"white-space: nowrap;\">DATABASE_URL</aui-text>\n          <aui-text muted size=\"sm\" spacer font=\"mono\" style=\"letter-spacing: 0.1em; text-align: end;\">········</aui-text>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" class=\"aui-env-variables-row\">\n          <aui-text size=\"sm\" weight=\"medium\" font=\"mono\" style=\"white-space: nowrap;\">NEXT_PUBLIC_API</aui-text>\n          <aui-text muted size=\"sm\" spacer font=\"mono\" truncate style=\"text-align: end;\">https://api.example.com</aui-text>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" class=\"aui-env-variables-row\">\n          <aui-text size=\"sm\" weight=\"medium\" font=\"mono\" style=\"white-space: nowrap;\">STRIPE_SECRET</aui-text>\n          <aui-text muted size=\"sm\" spacer font=\"mono\" style=\"letter-spacing: 0.1em; text-align: end;\">········</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button-group>\n      <aui-button primary grow=\"1\" basis=\"0\">Deploy</aui-button>\n      <aui-button scrim grow=\"1\" basis=\"0\">Edit</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "feature-upgrade",
+      "type": "block",
+      "summary": "Feature upgrade card with checklist, note, and call-to-action.",
+      "description": "A persuasion card for upsells and feature announcements. Heading and description at top, a checklist of feature benefits with check icons, an inset note box with supporting detail, and a footer with cancel and primary enable actions in an aui-button-group.\n",
+      "components": [
+        "aui-container",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-avatar",
+        "aui-icon",
+        "aui-badge",
+        "aui-button",
+        "aui-button-group"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Feature upgrade card with checklist, note, and call-to-action.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"xl\">Ship faster & safer with AI Agent</aui-heading>\n          <aui-text muted size=\"sm\">Your use is subject to the Public Beta Agreement and AI Product Terms.</aui-text>\n        </aui-stack>\n        <aui-stack gap=\"3\">\n          <aui-stack direction=\"row\" gap=\"2\">\n            <aui-avatar square size=\"sm\" success solid><aui-icon name=\"check\"></aui-icon></aui-avatar>\n            <aui-heading size=\"sm\"><strong>Code reviews</strong> with full codebase context to catch <strong>hard-to-find</strong> bugs.</aui-heading>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\">\n            <aui-avatar square size=\"sm\" success solid><aui-icon name=\"check\"></aui-icon></aui-avatar>\n            <aui-heading size=\"sm\"><strong>Code suggestions</strong> validated in sandboxes before you merge.</aui-heading>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\">\n            <aui-avatar square size=\"sm\" success solid><aui-icon name=\"check\"></aui-icon></aui-avatar>\n            <aui-heading size=\"sm\"><strong>Root-cause analysis</strong> for production issues with deployment context. <aui-badge accent>Requires Plus</aui-badge></aui-heading>\n          </aui-stack>\n        </aui-stack>\n        <aui-container kind=\"widget\" elevation=\"3\">\n          <aui-inset>\n            <aui-text muted size=\"sm\">Pro teams get $100 in trial credit for 2 weeks after activation.</aui-text>\n          </aui-inset>\n        </aui-container>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button-group>\n      <aui-button primary grow=\"1\" basis=\"0\">Enable with $100 credits</aui-button>\n      <aui-button scrim grow=\"1\" basis=\"0\">Cancel</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "feedback-alert-banner",
+      "type": "block",
+      "summary": "Dismissible alert banners in info, success, warning, and danger variants.",
+      "description": "Four inline notification banners showcasing each intent variant using aui-alert. Each alert carries an intent attribute (info, success, warning, danger), an icon attribute for the leading icon, and the dismissable modifier for the close button. Content uses strong for the heading and p elements for body text and optional action links.\n",
+      "components": [
+        "aui-alert",
+        "aui-stack"
+      ],
+      "kind": "widget",
+      "examples": [
+        {
+          "description": "Dismissible alert banners in info, success, warning, and danger variants.",
+          "html": "<aui-stack>\n\n  <!-- Info -->\n  <aui-alert icon=\"info\" dismissable>\n    <strong>New version available</strong>\n    <p>Version 2.4.1 includes performance improvements and bug fixes.</p>\n    <p><a href=\"#\">View changelog</a></p>\n  </aui-alert>\n\n  <!-- Success -->\n  <aui-alert success icon=\"check-circle\" dismissable>\n    <strong>Deployment successful</strong>\n    <p>Your changes are now live in production.</p>\n  </aui-alert>\n\n  <!-- Warning -->\n  <aui-alert warning icon=\"warning\" dismissable>\n    <strong>Storage almost full</strong>\n    <p>You've used 90% of your storage quota. Consider upgrading your plan.</p>\n    <p><a href=\"#\">Upgrade plan</a></p>\n  </aui-alert>\n\n  <!-- Danger -->\n  <aui-alert danger icon=\"warning-circle\" dismissable>\n    <strong>Payment failed</strong>\n    <p>Your last payment was declined. Please update your billing information to avoid service interruption.</p>\n    <p><a href=\"#\">Update billing</a></p>\n  </aui-alert>\n\n</aui-stack>"
+        }
+      ]
+    },
+    {
+      "name": "feedback-empty-state",
+      "type": "block",
+      "summary": "Centered empty state with illustration, heading, description, and primary + secondary actions.",
+      "description": "A vertically centered empty-state card for when a collection or page has no content yet. Uses the aui-empty-state component with an icon, heading, description, and a primary CTA button with leading icon.\n",
+      "components": [
+        "aui-container",
+        "aui-empty-state",
+        "aui-button"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Centered empty state with illustration, heading, description, and primary + secondary actions.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-empty-state icon=\"file-dashed\" heading=\"No projects yet\" description=\"Create your first project to get started. Projects help you organize your work and collaborate with your team.\">\n    <aui-button accent icon-leading=\"plus\">Create Project</aui-button>\n  </aui-empty-state>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "feedback-progress-stepper",
+      "type": "block",
+      "summary": "Horizontal multi-step progress wizard with step content and navigation footer.",
+      "description": "A wizard-style card with aui-stepper direction=\"horizontal\" at the top showing step indicators connected by lines. Each aui-step has a state-driven avatar with solid backgrounds (done=success check, running=accent number, pending=--aui-neutral-highest with --aui-ink-muted text) with label and optional sublabel. Below the stepper, the current step's content area uses aui-inset gap=\"4\" and shows a title, description, and progress bar with --aui-accent-500 fill on --aui-control track. Footer has scrim Back and primary accent Continue buttons with grow=\"1\" basis=\"0\" for equal sizing. Connector lines between steps are handled by the aui-stepper/aui-step elements.\n",
+      "components": [
+        "aui-container",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stepper",
+        "aui-step",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-avatar",
+        "aui-icon",
+        "aui-button",
+        "aui-button-group"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Horizontal multi-step progress wizard with step content and navigation footer.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"lg\">\n\n  <!-- Current step content -->\n  <aui-content>\n    <aui-inset gap=\"4\">\n\n      <!-- Stepper track -->\n      <aui-stepper direction=\"horizontal\">\n\n        <aui-step state=\"done\">\n          <aui-avatar size=\"xs\" success solid><aui-icon name=\"check\" size=\"xs\"></aui-icon></aui-avatar>\n          <aui-text size=\"xs\" weight=\"medium\">Account</aui-text>\n          <aui-text size=\"xs\" muted>Completed</aui-text>\n        </aui-step>\n\n        <aui-step state=\"done\">\n          <aui-avatar size=\"xs\" success solid><aui-icon name=\"check\" size=\"xs\"></aui-icon></aui-avatar>\n          <aui-text size=\"xs\" weight=\"medium\">Team</aui-text>\n          <aui-text size=\"xs\" muted>3 invited</aui-text>\n        </aui-step>\n\n        <aui-step state=\"running\">\n          <aui-avatar size=\"xs\" accent solid>3</aui-avatar>\n          <aui-text size=\"xs\" weight=\"medium\">Integrations</aui-text>\n          <aui-text size=\"xs\" muted>In progress</aui-text>\n        </aui-step>\n\n        <aui-step>\n          <aui-avatar size=\"xs\" style=\"background: var(--aui-neutral-highest); color: var(--aui-ink-muted);\">4</aui-avatar>\n          <aui-text size=\"xs\" muted>Review</aui-text>\n        </aui-step>\n\n      </aui-stepper>\n      <aui-stack gap=\"4\">\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"lg\">Connect your tools</aui-heading>\n          <aui-text muted size=\"sm\">Link the services your team uses every day. We'll import your existing data and configure notifications automatically.</aui-text>\n        </aui-stack>\n        <aui-stack gap=\"2\">\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <aui-text size=\"xs\" spacer>Setup progress</aui-text>\n            <aui-text size=\"xs\" muted>2 of 5 connected</aui-text>\n          </aui-stack>\n          <div style=\"height: 4px; border-radius: var(--aui-radius); background: var(--aui-control);\">\n            <div style=\"width: 40%; height: 100%; border-radius: var(--aui-radius); background: var(--aui-accent-500);\"></div>\n          </div>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n\n  <aui-footer>\n    <aui-button-group>\n      <aui-button scrim grow=\"1\" basis=\"0\">Back</aui-button>\n      <aui-button primary accent icon-trailing=\"caret-right\" grow=\"1\" basis=\"0\">Continue</aui-button>\n    </aui-button-group>\n  </aui-footer>\n\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "financial-risk",
+      "type": "block",
+      "summary": "Financial Risk Cascade — 12 nodes, 14 connections.",
+      "description": "Visual graph block rendered from the Financial Risk Cascade dataset using aui-graph components with port-selector noodle connections.\n",
+      "components": [
+        "aui-container",
+        "aui-text",
+        "aui-graph-ui",
+        "aui-graph-layer",
+        "aui-graph-node",
+        "aui-graph-noodle",
+        "aui-graph-port"
+      ],
+      "examples": [
+        {
+          "description": "Financial Risk Cascade — 12 nodes, 14 connections.",
+          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 32.875rem; min-width: 71.125rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- Market Data Feed → Interest Rate Model -->\n    <aui-graph-noodle from=\"fr-market:right\" to=\"fr-interest:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Market Data Feed → Credit Risk Model -->\n    <aui-graph-noodle from=\"fr-market:right\" to=\"fr-credit:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- FX Rate Engine → Credit Risk Model -->\n    <aui-graph-noodle from=\"fr-fx:right\" to=\"fr-credit:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- FX Rate Engine → VaR Calculator -->\n    <aui-graph-noodle from=\"fr-fx:right\" to=\"fr-var:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Interest Rate Model → VaR Calculator -->\n    <aui-graph-noodle from=\"fr-interest:right\" to=\"fr-var:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Credit Risk Model → Stress Test Engine -->\n    <aui-graph-noodle from=\"fr-credit:right\" to=\"fr-stress:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- VaR Calculator → Compliance Gateway -->\n    <aui-graph-noodle from=\"fr-var:right\" to=\"fr-compliance:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- VaR Calculator → P&L Attribution -->\n    <aui-graph-noodle from=\"fr-var:right\" to=\"fr-pnl:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Stress Test Engine → Compliance Gateway -->\n    <aui-graph-noodle from=\"fr-stress:right\" to=\"fr-compliance:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Liquidity Monitor → Compliance Gateway -->\n    <aui-graph-noodle from=\"fr-liquidity:right\" to=\"fr-compliance:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Compliance Gateway → Regulatory Report -->\n    <aui-graph-noodle from=\"fr-compliance:right\" to=\"fr-regulatory:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- P&L Attribution → Counterparty Exposure -->\n    <aui-graph-noodle from=\"fr-pnl:right\" to=\"fr-counterparty:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Counterparty Exposure → Margin Call Engine -->\n    <aui-graph-noodle from=\"fr-counterparty:right\" to=\"fr-margin:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Margin Call Engine → Regulatory Report -->\n    <aui-graph-noodle from=\"fr-margin:right\" to=\"fr-regulatory:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- Market Data Feed -->\n    <aui-graph-node x=\"24\" y=\"116\" node-id=\"fr-market\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Market Data Feed</aui-text>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- FX Rate Engine -->\n    <aui-graph-node x=\"24\" y=\"256\" node-id=\"fr-fx\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">FX Rate Engine</aui-text>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Interest Rate Model -->\n    <aui-graph-node x=\"240\" y=\"46\" node-id=\"fr-interest\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Interest Rate Model</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Credit Risk Model -->\n    <aui-graph-node x=\"240\" y=\"186\" node-id=\"fr-credit\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Credit Risk Model</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- VaR Calculator -->\n    <aui-graph-node x=\"456\" y=\"46\" node-id=\"fr-var\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">VaR Calculator</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Stress Test Engine -->\n    <aui-graph-node x=\"456\" y=\"186\" node-id=\"fr-stress\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Stress Test Engine</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Liquidity Monitor -->\n    <aui-graph-node x=\"456\" y=\"326\" node-id=\"fr-liquidity\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Liquidity Monitor</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Compliance Gateway -->\n    <aui-graph-node x=\"672\" y=\"116\" node-id=\"fr-compliance\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Compliance Gateway</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- P&L Attribution -->\n    <aui-graph-node x=\"672\" y=\"256\" node-id=\"fr-pnl\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">P&L Attribution</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Regulatory Report -->\n    <aui-graph-node x=\"888\" y=\"46\" node-id=\"fr-regulatory\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Regulatory Report</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Counterparty Exposure -->\n    <aui-graph-node x=\"888\" y=\"186\" node-id=\"fr-counterparty\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Counterparty Exposure</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Margin Call Engine -->\n    <aui-graph-node x=\"888\" y=\"326\" node-id=\"fr-margin\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Margin Call Engine</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n  </aui-graph-layer>\n</aui-graph-ui>"
+        }
+      ]
+    },
+    {
+      "name": "flow-editor",
+      "type": "block",
+      "summary": "Data-driven pipeline diagram rendered from a JSON dataset.",
+      "description": "A visual flow editor that renders pipeline nodes and connections from a standard JSON structure. Each node has an id, label, description, intent, and x/y position. Connections define from/to relationships between nodes. The same JSON schema powers the static CSS preview shown here and the interactive aui-noodles version with draggable bezier connections. Adapters can transform external formats (Airflow DAGs, dbt lineage, CI/CD pipelines) into this standard structure.\n",
+      "components": [
+        "aui-container",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-badge",
+        "aui-editor",
+        "aui-editor-layer",
+        "aui-graph-ui",
+        "aui-graph-layer",
+        "aui-graph-node",
+        "aui-graph-noodle",
+        "aui-graph-port"
+      ],
+      "schema": {
+        "nodes": [
+          {
+            "id": "string",
+            "label": "string",
+            "description": "string",
+            "intent": "accent | info | success | warning | danger",
+            "badge": "string",
+            "x": "number (rem)",
+            "y": "number (rem)",
+            "width": "number (rem, default 10)"
+          }
+        ],
+        "connections": [
+          {
+            "from": "string (node id)",
+            "to": "string (node id)"
+          }
+        ]
+      },
+      "dataset": "{\n  \"nodes\": [\n    { \"id\": \"ingest\",    \"label\": \"Data Ingest\",     \"description\": \"S3 + Kafka streams\",     \"intent\": \"accent\",  \"badge\": \"Source\",  \"x\": 2,  \"y\": 4, \"width\": 10 },\n    { \"id\": \"transform\", \"label\": \"Transform\",       \"description\": \"dbt models + Spark\",     \"intent\": \"info\",    \"badge\": \"Process\", \"x\": 17, \"y\": 1.5, \"width\": 10 },\n    { \"id\": \"validate\",  \"label\": \"Validate\",        \"description\": \"Schema + quality checks\", \"intent\": \"warning\", \"badge\": \"QA\",      \"x\": 17, \"y\": 10.5, \"width\": 10 },\n    { \"id\": \"warehouse\", \"label\": \"Data Warehouse\",  \"description\": \"Gold layer analytics\",   \"intent\": \"success\", \"badge\": \"Sink\",    \"x\": 32, \"y\": 6, \"width\": 10 }\n  ],\n  \"connections\": [\n    { \"from\": \"ingest\",    \"to\": \"transform\" },\n    { \"from\": \"ingest\",    \"to\": \"validate\" },\n    { \"from\": \"transform\", \"to\": \"warehouse\" },\n    { \"from\": \"validate\",  \"to\": \"warehouse\" }\n  ]\n}\n",
+      "examples": [
+        {
+          "description": "Data-driven pipeline diagram rendered from a JSON dataset.",
+          "html": "<aui-stack gap=\"2\">\n  <aui-graph-ui connectable style=\"width: 100%; height: 22rem\" min-width=\"44\" zoom=\"1\">\n    <aui-graph-layer name=\"wires\" type=\"svg\">\n      <!-- Data Ingest → Transform -->\n      <aui-graph-noodle from=\"data-ingest:out\" to=\"transform:in\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n      <!-- Data Ingest → Validate -->\n      <aui-graph-noodle from=\"data-ingest:out\" to=\"validate:in\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n      <!-- Transform → Data Warehouse -->\n      <aui-graph-noodle from=\"transform:out\" to=\"data-warehouse:in\" color=\"success\" weight=\"2\"></aui-graph-noodle>\n      <!-- Validate → Data Warehouse -->\n      <aui-graph-noodle from=\"validate:out\" to=\"data-warehouse:in\" color=\"warning\" weight=\"2\"></aui-graph-noodle>\n    </aui-graph-layer>\n    <aui-graph-layer name=\"content\">\n      <!-- Source node -->\n      <aui-graph-node x=\"30\" y=\"45\" node-id=\"data-ingest\">\n        <aui-container kind=\"widget\" bordered accent>\n          <aui-inset>\n            <aui-stack gap=\"1\">\n              <aui-badge accent>Source</aui-badge>\n              <aui-heading size=\"sm\">Data Ingest</aui-heading>\n              <aui-text muted size=\"xs\">S3 + Kafka streams</aui-text>\n            </aui-stack>\n          </aui-inset>\n          <aui-graph-port port-id=\"out\" side=\"right\" type=\"output\"></aui-graph-port>\n        </aui-container>\n      </aui-graph-node>\n      <!-- Transform node -->\n      <aui-graph-node x=\"270\" y=\"10\" node-id=\"transform\">\n        <aui-container kind=\"widget\" bordered info>\n          <aui-inset>\n            <aui-stack gap=\"1\">\n              <aui-badge info>Process</aui-badge>\n              <aui-heading size=\"sm\">Transform</aui-heading>\n              <aui-text muted size=\"xs\">dbt models + Spark</aui-text>\n            </aui-stack>\n          </aui-inset>\n          <aui-graph-port port-id=\"in\" side=\"left\" type=\"input\"></aui-graph-port>\n          <aui-graph-port port-id=\"out\" side=\"right\" type=\"output\"></aui-graph-port>\n        </aui-container>\n      </aui-graph-node>\n      <!-- Validate node -->\n      <aui-graph-node x=\"270\" y=\"140\" node-id=\"validate\">\n        <aui-container kind=\"widget\" bordered warning>\n          <aui-inset>\n            <aui-stack gap=\"1\">\n              <aui-badge warning>QA</aui-badge>\n              <aui-heading size=\"sm\">Validate</aui-heading>\n              <aui-text muted size=\"xs\">Schema + quality checks</aui-text>\n            </aui-stack>\n          </aui-inset>\n          <aui-graph-port port-id=\"in\" side=\"left\" type=\"input\"></aui-graph-port>\n          <aui-graph-port port-id=\"out\" side=\"right\" type=\"output\"></aui-graph-port>\n        </aui-container>\n      </aui-graph-node>\n      <!-- Sink node -->\n      <aui-graph-node x=\"510\" y=\"75\" node-id=\"data-warehouse\">\n        <aui-container kind=\"widget\" bordered success>\n          <aui-inset>\n            <aui-stack gap=\"1\">\n              <aui-badge success>Sink</aui-badge>\n              <aui-heading size=\"sm\">Data Warehouse</aui-heading>\n              <aui-text muted size=\"xs\">Gold layer analytics</aui-text>\n            </aui-stack>\n          </aui-inset>\n          <aui-graph-port port-id=\"in\" side=\"left\" type=\"input\"></aui-graph-port>\n        </aui-container>\n      </aui-graph-node>\n    </aui-graph-layer>\n  </aui-graph-ui>\n\n  <aui-text muted size=\"xs\" align-items=\"center\">Rendered from a standard JSON dataset. The same schema powers the interactive aui-graph version. Adapters can transform Airflow DAGs, dbt lineage, or CI/CD pipelines into this format.</aui-text>\n</aui-stack>"
+        }
+      ]
+    },
+    {
+      "name": "form-settings-section",
+      "type": "block",
+      "summary": "Multi-section settings page with profile form fields and notification toggles.",
+      "description": "A vertically stacked pair of settings sections. The first section uses aui-fieldset legend=\"Personal Details\" (borderless) to group a profile form with two-column field rows using gap=\"3\" between rows (display name, email, timezone, role) with fields using grow=\"1\" basis=\"0\" for equal sizing, and a save/cancel footer in an aui-button-group. The second section uses aui-fieldset legend=\"Notification Channels\" (borderless) for notification toggle rows where the switch aligns horizontally with the title in a direction=\"row\" stack, and the description sits below spanning full width. No footer on the notifications section since toggles save immediately. Both sections follow the container-header- content skeleton with the notifications section adding dividers between rows. Sections are wrapped in a max-width stack for page-level constraint.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-field",
+        "aui-input",
+        "aui-select",
+        "aui-option",
+        "aui-switch",
+        "aui-button",
+        "aui-button-group",
+        "aui-fieldset",
+        "aui-divider"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Multi-section settings page with profile form fields and notification toggles.",
+          "html": "<aui-stack gap=\"4\" max-width=\"2xl\">\n\n  <!-- Profile section -->\n  <aui-container kind=\"card\" bordered>\n    <aui-header>\n      <span slot=\"leading\">\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"lg\">Profile</aui-heading>\n          <aui-text muted size=\"sm\">Your public identity across the workspace.</aui-text>\n        </aui-stack>\n      </span>\n    </aui-header>\n    <aui-content>\n      <aui-inset>\n        <aui-fieldset legend=\"Personal Details\" borderless>\n          <aui-stack direction=\"row\" gap=\"3\">\n            <aui-field label=\"Display name\" width=\"full\" grow=\"1\" basis=\"0\">\n              <aui-input placeholder=\"Amara Osei\" width=\"full\"></aui-input>\n            </aui-field>\n            <aui-field label=\"Email address\" width=\"full\" grow=\"1\" basis=\"0\">\n              <aui-input type=\"email\" placeholder=\"amara@acme.io\" width=\"full\"></aui-input>\n            </aui-field>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"3\">\n            <aui-field label=\"Timezone\" width=\"full\" grow=\"1\" basis=\"0\">\n              <aui-select width=\"full\" placeholder=\"(UTC-08:00) Pacific Time\">\n                <aui-option value=\"pst\">(UTC-08:00) Pacific Time</aui-option>\n                <aui-option value=\"mst\">(UTC-07:00) Mountain Time</aui-option>\n                <aui-option value=\"cst\">(UTC-06:00) Central Time</aui-option>\n                <aui-option value=\"est\">(UTC-05:00) Eastern Time</aui-option>\n              </aui-select>\n            </aui-field>\n            <aui-field label=\"Role\" width=\"full\" grow=\"1\" basis=\"0\">\n              <aui-select width=\"full\" placeholder=\"Engineering\">\n                <aui-option value=\"eng\">Engineering</aui-option>\n                <aui-option value=\"design\">Design</aui-option>\n                <aui-option value=\"product\">Product</aui-option>\n                <aui-option value=\"marketing\">Marketing</aui-option>\n              </aui-select>\n            </aui-field>\n          </aui-stack>\n        </aui-fieldset>\n      </aui-inset>\n    </aui-content>\n    <aui-footer>\n      <aui-button-group>\n        <aui-button primary grow=\"1\" basis=\"0\">Save changes</aui-button>\n        <aui-button scrim grow=\"1\" basis=\"0\">Cancel</aui-button>\n      </aui-button-group>\n    </aui-footer>\n  </aui-container>\n\n  <!-- Notifications section -->\n  <aui-container kind=\"card\" bordered>\n    <aui-header>\n      <span slot=\"leading\">\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"lg\">Notifications</aui-heading>\n          <aui-text muted size=\"sm\">Choose which updates reach you and how.</aui-text>\n        </aui-stack>\n      </span>\n    </aui-header>\n    <aui-content>\n      <aui-inset>\n        <aui-fieldset legend=\"Notification Channels\" borderless>\n          <aui-stack gap=\"1\">\n            <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n              <aui-heading size=\"md\" spacer>Email notifications</aui-heading>\n              <aui-switch checked></aui-switch>\n            </aui-stack>\n            <aui-text muted size=\"sm\">Receive updates via email when someone mentions you.</aui-text>\n          </aui-stack>\n          <aui-divider></aui-divider>\n          <aui-stack gap=\"1\">\n            <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n              <aui-heading size=\"md\" spacer>Push notifications</aui-heading>\n              <aui-switch checked></aui-switch>\n            </aui-stack>\n            <aui-text muted size=\"sm\">Get push notifications on your mobile device.</aui-text>\n          </aui-stack>\n          <aui-divider></aui-divider>\n          <aui-stack gap=\"1\">\n            <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n              <aui-heading size=\"md\" spacer>Weekly report</aui-heading>\n              <aui-switch></aui-switch>\n            </aui-stack>\n            <aui-text muted size=\"sm\">Receive a weekly summary of your activity.</aui-text>\n          </aui-stack>\n          <aui-divider></aui-divider>\n          <aui-stack gap=\"1\">\n            <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n              <aui-heading size=\"md\" spacer>Marketing emails</aui-heading>\n              <aui-switch></aui-switch>\n            </aui-stack>\n            <aui-text muted size=\"sm\">Occasional product updates and announcements.</aui-text>\n          </aui-stack>\n        </aui-fieldset>\n      </aui-inset>\n    </aui-content>\n  </aui-container>\n\n</aui-stack>"
+        }
+      ]
+    },
+    {
+      "name": "game-battleship",
       "type": "block",
-      "summary": "Environment variables panel with masked secrets and deploy action.",
-      "description": "A panel listing environment variable key-value pairs. Keys use monospace font. Secret values are masked with dots; public values show their content. Footer uses aui-button-group for edit and deploy actions.\n",
+      "summary": "Battleship game with dual 8x8 grids, hits/misses, fleet status, and turn indicator.",
+      "description": "A Battleship game card with header (title with spacer + accent turn badge), two side-by-side aui-grid cols=\"8\" rows=\"8\" gap=\"1\" square boards in a flex-wrap row with gap=\"6\". Each grid section is an aui-stack with spacer, min-width=\"12\", and aui-heading group label. Cells are aui-button size=\"fill\" hide-label with label for accessibility and CSS classes for state: .aui-battleship-water, .aui-battleship-ship, .aui-battleship-hit (with icon-leading=\"x\"), .aui-battleship-miss (with icon-leading=\"circle\"). Footer shows muted hit/miss stats with spacer and scrim new game button.\n",
       "components": [
         "aui-container",
         "aui-header",
@@ -16868,113 +17703,92 @@
         "aui-footer",
         "aui-inset",
         "aui-stack",
+        "aui-grid",
         "aui-heading",
         "aui-text",
-        "aui-input",
-        "aui-button",
-        "aui-button-group"
+        "aui-badge",
+        "aui-button"
       ],
       "kind": "card",
       "examples": [
         {
-          "description": "Environment variables panel with masked secrets and deploy action.",
-          "html": "<aui-container kind=\"card\" bordered max-width=\"md\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Environment Variables</aui-heading>\n        <aui-text muted size=\"sm\">Production · 8 variables</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" class=\"aui-env-variables-row\">\n          <aui-text size=\"sm\" weight=\"medium\" font=\"mono\" style=\"white-space: nowrap;\">DATABASE_URL</aui-text>\n          <aui-text muted size=\"sm\" spacer font=\"mono\" style=\"letter-spacing: 0.1em; text-align: end;\">········</aui-text>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" class=\"aui-env-variables-row\">\n          <aui-text size=\"sm\" weight=\"medium\" font=\"mono\" style=\"white-space: nowrap;\">NEXT_PUBLIC_API</aui-text>\n          <aui-text muted size=\"sm\" spacer font=\"mono\" truncate style=\"text-align: end;\">https://api.example.com</aui-text>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" class=\"aui-env-variables-row\">\n          <aui-text size=\"sm\" weight=\"medium\" font=\"mono\" style=\"white-space: nowrap;\">STRIPE_SECRET</aui-text>\n          <aui-text muted size=\"sm\" spacer font=\"mono\" style=\"letter-spacing: 0.1em; text-align: end;\">········</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button-group>\n      <aui-button primary grow=\"1\" basis=\"0\">Deploy</aui-button>\n      <aui-button scrim grow=\"1\" basis=\"0\">Edit</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>"
+          "description": "Battleship game with dual 8x8 grids, hits/misses, fleet status, and turn indicator.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"xl\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-heading size=\"lg\" spacer>Battleship</aui-heading>\n      <aui-badge accent>Your turn</aui-badge>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"6\" wrap>\n\n        <!-- Enemy waters -->\n        <aui-stack gap=\"2\" spacer min-width=\"12\">\n          <aui-heading group>Enemy Waters</aui-heading>\n          <aui-grid cols=\"8\" rows=\"8\" gap=\"1\" square>\n            <aui-button size=\"fill\" hide-label label=\"A1\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"A2\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"A3\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"A4\" class=\"aui-battleship-hit\" icon-leading=\"x\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"A5\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"A6\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"A7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"A8\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B1\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B2\" class=\"aui-battleship-miss\" icon-leading=\"circle\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B3\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B4\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B5\" class=\"aui-battleship-hit\" icon-leading=\"x\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B6\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B8\" class=\"aui-battleship-miss\" icon-leading=\"circle\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C1\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C2\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C3\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C4\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C5\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C6\" class=\"aui-battleship-hit\" icon-leading=\"x\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C8\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D1\" class=\"aui-battleship-miss\" icon-leading=\"circle\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D2\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D3\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D4\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D5\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D6\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D8\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E1\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E2\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E3\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E4\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E5\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E6\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E8\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F1\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F2\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F3\" class=\"aui-battleship-miss\" icon-leading=\"circle\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F4\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F5\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F6\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F8\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G1\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G2\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G3\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G4\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G5\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G6\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G8\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H1\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H2\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H3\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H4\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H5\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H6\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H8\" class=\"aui-battleship-water\"></aui-button>\n          </aui-grid>\n        </aui-stack>\n\n        <!-- Your fleet -->\n        <aui-stack gap=\"2\" spacer min-width=\"12\">\n          <aui-heading group>Your Fleet</aui-heading>\n          <aui-grid cols=\"8\" rows=\"8\" gap=\"1\" square>\n            <aui-button size=\"fill\" hide-label label=\"A1\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"A2\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"A3\" class=\"aui-battleship-ship\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"A4\" class=\"aui-battleship-ship\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"A5\" class=\"aui-battleship-ship\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"A6\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"A7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"A8\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B1\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B2\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B3\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B4\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B5\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B6\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"B8\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C1\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C2\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C3\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C4\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C5\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C6\" class=\"aui-battleship-ship\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"C8\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D1\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D2\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D3\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D4\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D5\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D6\" class=\"aui-battleship-ship\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"D8\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E1\" class=\"aui-battleship-ship\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E2\" class=\"aui-battleship-ship\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E3\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E4\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E5\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E6\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"E8\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F1\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F2\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F3\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F4\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F5\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F6\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"F8\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G1\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G2\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G3\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G4\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G5\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G6\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"G8\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H1\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H2\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H3\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H4\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H5\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H6\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H7\" class=\"aui-battleship-water\"></aui-button>\n            <aui-button size=\"fill\" hide-label label=\"H8\" class=\"aui-battleship-water\"></aui-button>\n          </aui-grid>\n        </aui-stack>\n\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-text muted size=\"xs\" spacer>Hits: 3 · Misses: 4</aui-text>\n      <aui-button scrim size=\"sm\">New Game</aui-button>\n    </aui-stack>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
     {
-      "name": "feature-upgrade",
+      "name": "game-chess",
       "type": "block",
-      "summary": "Feature upgrade card with checklist, note, and call-to-action.",
-      "description": "A persuasion card for upsells and feature announcements. Heading and description at top, a checklist of feature benefits with check icons, an inset note box with supporting detail, and a footer with cancel and primary enable actions in an aui-button-group.\n",
+      "summary": "Chess board with 8x8 grid, Unicode pieces, player bars with clocks.",
+      "description": "A chess game card with opponent bar in header (avatar, name with spacer, mono clock) and player bar in footer (same layout). Avatars use default size (no size=\"xs\"). The board is an aui-grid cols=\"8\" rows=\"8\" gap=\"0\" square with .aui-chess-board class (border-radius and overflow). Square cells use .aui-chess-cell class for flex centering, aspect-ratio: 1, and nth-child-based alternating var(--aui-control) / var(--aui-neutral-3) backgrounds — no inline styles needed. Empty squares have no content.\n",
       "components": [
         "aui-container",
+        "aui-header",
         "aui-content",
         "aui-footer",
         "aui-inset",
+        "aui-grid",
         "aui-stack",
         "aui-heading",
         "aui-text",
-        "aui-avatar",
-        "aui-icon",
-        "aui-badge",
-        "aui-button",
-        "aui-button-group"
+        "aui-avatar"
       ],
       "kind": "card",
       "examples": [
         {
-          "description": "Feature upgrade card with checklist, note, and call-to-action.",
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"xl\">Ship faster & safer with AI Agent</aui-heading>\n          <aui-text muted size=\"sm\">Your use is subject to the Public Beta Agreement and AI Product Terms.</aui-text>\n        </aui-stack>\n        <aui-stack gap=\"3\">\n          <aui-stack direction=\"row\" gap=\"2\">\n            <aui-avatar square size=\"sm\" success solid><aui-icon name=\"check\"></aui-icon></aui-avatar>\n            <aui-heading size=\"sm\"><strong>Code reviews</strong> with full codebase context to catch <strong>hard-to-find</strong> bugs.</aui-heading>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\">\n            <aui-avatar square size=\"sm\" success solid><aui-icon name=\"check\"></aui-icon></aui-avatar>\n            <aui-heading size=\"sm\"><strong>Code suggestions</strong> validated in sandboxes before you merge.</aui-heading>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\">\n            <aui-avatar square size=\"sm\" success solid><aui-icon name=\"check\"></aui-icon></aui-avatar>\n            <aui-heading size=\"sm\"><strong>Root-cause analysis</strong> for production issues with deployment context. <aui-badge accent>Requires Plus</aui-badge></aui-heading>\n          </aui-stack>\n        </aui-stack>\n        <aui-container kind=\"widget\" elevation=\"3\">\n          <aui-inset>\n            <aui-text muted size=\"sm\">Pro teams get $100 in trial credit for 2 weeks after activation.</aui-text>\n          </aui-inset>\n        </aui-container>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button-group>\n      <aui-button primary grow=\"1\" basis=\"0\">Enable with $100 credits</aui-button>\n      <aui-button scrim grow=\"1\" basis=\"0\">Cancel</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>"
+          "description": "Chess board with 8x8 grid, Unicode pieces, player bars with clocks.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-avatar>OP</aui-avatar>\n      <aui-heading size=\"sm\" spacer>Opponent</aui-heading>\n      <aui-text size=\"sm\" font=\"mono\">12:34</aui-text>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-grid cols=\"8\" rows=\"8\" gap=\"0\" square class=\"aui-chess-board\">\n        <!-- Row 8 -->\n        <div class=\"aui-chess-cell\">♜</div>\n        <div class=\"aui-chess-cell\">♞</div>\n        <div class=\"aui-chess-cell\">♝</div>\n        <div class=\"aui-chess-cell\">♛</div>\n        <div class=\"aui-chess-cell\">♚</div>\n        <div class=\"aui-chess-cell\">♝</div>\n        <div class=\"aui-chess-cell\">♞</div>\n        <div class=\"aui-chess-cell\">♜</div>\n        <!-- Row 7 (pawns) -->\n        <div class=\"aui-chess-cell\">♟</div>\n        <div class=\"aui-chess-cell\">♟</div>\n        <div class=\"aui-chess-cell\">♟</div>\n        <div class=\"aui-chess-cell\">♟</div>\n        <div class=\"aui-chess-cell\">♟</div>\n        <div class=\"aui-chess-cell\">♟</div>\n        <div class=\"aui-chess-cell\">♟</div>\n        <div class=\"aui-chess-cell\">♟</div>\n        <!-- Rows 6-3 (empty) -->\n        <div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div>\n        <div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div>\n        <div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div>\n        <div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div><div class=\"aui-chess-cell\"></div>\n        <!-- Row 2 (white pawns) -->\n        <div class=\"aui-chess-cell\">♙</div>\n        <div class=\"aui-chess-cell\">♙</div>\n        <div class=\"aui-chess-cell\">♙</div>\n        <div class=\"aui-chess-cell\">♙</div>\n        <div class=\"aui-chess-cell\">♙</div>\n        <div class=\"aui-chess-cell\">♙</div>\n        <div class=\"aui-chess-cell\">♙</div>\n        <div class=\"aui-chess-cell\">♙</div>\n        <!-- Row 1 -->\n        <div class=\"aui-chess-cell\">♖</div>\n        <div class=\"aui-chess-cell\">♘</div>\n        <div class=\"aui-chess-cell\">♗</div>\n        <div class=\"aui-chess-cell\">♕</div>\n        <div class=\"aui-chess-cell\">♔</div>\n        <div class=\"aui-chess-cell\">♗</div>\n        <div class=\"aui-chess-cell\">♘</div>\n        <div class=\"aui-chess-cell\">♖</div>\n      </aui-grid>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-avatar>YO</aui-avatar>\n      <aui-heading size=\"sm\" spacer>You</aui-heading>\n      <aui-text size=\"sm\" font=\"mono\">14:22</aui-text>\n    </aui-stack>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
     {
-      "name": "financial-risk",
+      "name": "game-connect-four",
       "type": "block",
-      "summary": "Financial Risk Cascade — 12 nodes, 14 connections.",
-      "description": "Visual graph block rendered from the Financial Risk Cascade dataset using aui-graph components with port-selector noodle connections.\n",
+      "summary": "Connect Four game with 7-column board, colored discs, score header, and new game button.",
+      "description": "A Connect Four game card (max-width=\"md\") with score badges (Red danger / Yellow warning) in header with spacers centering turn text. The board is an aui-grid cols=\"7\" gap=\"1\" with .aui-connect-four-board class (accent background, padding, border-radius). Disc slots are aui-button size=\"fill\" round hide-label with icon-leading=\"circle\" and aspect-ratio: 1 via CSS. Empty holes use .aui-connect-four-empty class (neutral-2 background, color matched to hide the icon), red pieces use .aui-connect-four-red with danger attr, yellow pieces use .aui-connect-four-yellow with warning attr. Footer has a scrim full-width new game button.\n",
       "components": [
         "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-grid",
+        "aui-stack",
         "aui-text",
-        "aui-graph-ui",
-        "aui-graph-layer",
-        "aui-graph-node",
-        "aui-graph-noodle",
-        "aui-graph-port"
+        "aui-badge",
+        "aui-button"
       ],
+      "kind": "card",
       "examples": [
         {
-          "description": "Financial Risk Cascade — 12 nodes, 14 connections.",
-          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 32.875rem; min-width: 71.125rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- Market Data Feed → Interest Rate Model -->\n    <aui-graph-noodle from=\"fr-market:right\" to=\"fr-interest:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Market Data Feed → Credit Risk Model -->\n    <aui-graph-noodle from=\"fr-market:right\" to=\"fr-credit:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- FX Rate Engine → Credit Risk Model -->\n    <aui-graph-noodle from=\"fr-fx:right\" to=\"fr-credit:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- FX Rate Engine → VaR Calculator -->\n    <aui-graph-noodle from=\"fr-fx:right\" to=\"fr-var:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Interest Rate Model → VaR Calculator -->\n    <aui-graph-noodle from=\"fr-interest:right\" to=\"fr-var:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Credit Risk Model → Stress Test Engine -->\n    <aui-graph-noodle from=\"fr-credit:right\" to=\"fr-stress:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- VaR Calculator → Compliance Gateway -->\n    <aui-graph-noodle from=\"fr-var:right\" to=\"fr-compliance:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- VaR Calculator → P&L Attribution -->\n    <aui-graph-noodle from=\"fr-var:right\" to=\"fr-pnl:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Stress Test Engine → Compliance Gateway -->\n    <aui-graph-noodle from=\"fr-stress:right\" to=\"fr-compliance:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Liquidity Monitor → Compliance Gateway -->\n    <aui-graph-noodle from=\"fr-liquidity:right\" to=\"fr-compliance:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Compliance Gateway → Regulatory Report -->\n    <aui-graph-noodle from=\"fr-compliance:right\" to=\"fr-regulatory:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- P&L Attribution → Counterparty Exposure -->\n    <aui-graph-noodle from=\"fr-pnl:right\" to=\"fr-counterparty:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Counterparty Exposure → Margin Call Engine -->\n    <aui-graph-noodle from=\"fr-counterparty:right\" to=\"fr-margin:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Margin Call Engine → Regulatory Report -->\n    <aui-graph-noodle from=\"fr-margin:right\" to=\"fr-regulatory:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- Market Data Feed -->\n    <aui-graph-node x=\"24\" y=\"116\" node-id=\"fr-market\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Market Data Feed</aui-text>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- FX Rate Engine -->\n    <aui-graph-node x=\"24\" y=\"256\" node-id=\"fr-fx\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">FX Rate Engine</aui-text>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Interest Rate Model -->\n    <aui-graph-node x=\"240\" y=\"46\" node-id=\"fr-interest\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Interest Rate Model</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Credit Risk Model -->\n    <aui-graph-node x=\"240\" y=\"186\" node-id=\"fr-credit\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Credit Risk Model</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- VaR Calculator -->\n    <aui-graph-node x=\"456\" y=\"46\" node-id=\"fr-var\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">VaR Calculator</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Stress Test Engine -->\n    <aui-graph-node x=\"456\" y=\"186\" node-id=\"fr-stress\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Stress Test Engine</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Liquidity Monitor -->\n    <aui-graph-node x=\"456\" y=\"326\" node-id=\"fr-liquidity\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Liquidity Monitor</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Compliance Gateway -->\n    <aui-graph-node x=\"672\" y=\"116\" node-id=\"fr-compliance\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Compliance Gateway</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- P&L Attribution -->\n    <aui-graph-node x=\"672\" y=\"256\" node-id=\"fr-pnl\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">P&L Attribution</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Regulatory Report -->\n    <aui-graph-node x=\"888\" y=\"46\" node-id=\"fr-regulatory\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Regulatory Report</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Counterparty Exposure -->\n    <aui-graph-node x=\"888\" y=\"186\" node-id=\"fr-counterparty\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Counterparty Exposure</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"bottom\" side=\"bottom\" type=\"output\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n    <!-- Margin Call Engine -->\n    <aui-graph-node x=\"888\" y=\"326\" node-id=\"fr-margin\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Margin Call Engine</aui-text>\n        <aui-graph-port port-id=\"left\" side=\"left\" type=\"input\"></aui-graph-port>\n        <aui-graph-port port-id=\"right\" side=\"right\" type=\"output\"></aui-graph-port>\n        <aui-graph-port port-id=\"top\" side=\"top\" type=\"input\"></aui-graph-port>\n      </aui-container>\n    </aui-graph-node>\n  </aui-graph-layer>\n</aui-graph-ui>"
+          "description": "Connect Four game with 7-column board, colored discs, score header, and new game button.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"md\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-badge danger>Red: 2</aui-badge>\n      <aui-text spacer></aui-text>\n      <aui-text size=\"sm\" weight=\"medium\">Red's turn</aui-text>\n      <aui-text spacer></aui-text>\n      <aui-badge warning>Yellow: 1</aui-badge>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-grid cols=\"7\" gap=\"1\" class=\"aui-connect-four-board\">\n        <!-- Row 1 (empty) -->\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <!-- Row 2 -->\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Red\" icon-leading=\"circle\" danger class=\"aui-connect-four-red\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <!-- Row 3 -->\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Yellow\" icon-leading=\"circle\" warning class=\"aui-connect-four-yellow\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Red\" icon-leading=\"circle\" danger class=\"aui-connect-four-red\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <!-- Row 4 -->\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Yellow\" icon-leading=\"circle\" warning class=\"aui-connect-four-yellow\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Red\" icon-leading=\"circle\" danger class=\"aui-connect-four-red\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Yellow\" icon-leading=\"circle\" warning class=\"aui-connect-four-yellow\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <!-- Row 5 -->\n        <aui-button size=\"fill\" round hide-label label=\"Drop\" icon-leading=\"circle\" class=\"aui-connect-four-empty\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Red\" icon-leading=\"circle\" danger class=\"aui-connect-four-red\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Red\" icon-leading=\"circle\" danger class=\"aui-connect-four-red\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Yellow\" icon-leading=\"circle\" warning class=\"aui-connect-four-yellow\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Red\" icon-leading=\"circle\" danger class=\"aui-connect-four-red\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Yellow\" icon-leading=\"circle\" warning class=\"aui-connect-four-yellow\"></aui-button>\n        <aui-button size=\"fill\" round hide-label label=\"Red\" icon-leading=\"circle\" danger class=\"aui-connect-four-red\"></aui-button>\n      </aui-grid>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button scrim width=\"full\">New Game</aui-button>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
     {
-      "name": "flow-editor",
+      "name": "game-tic-tac-toe",
       "type": "block",
-      "summary": "Data-driven pipeline diagram rendered from a JSON dataset.",
-      "description": "A visual flow editor that renders pipeline nodes and connections from a standard JSON structure. Each node has an id, label, description, intent, and x/y position. Connections define from/to relationships between nodes. The same JSON schema powers the static CSS preview shown here and the interactive aui-noodles version with draggable bezier connections. Adapters can transform external formats (Airflow DAGs, dbt lineage, CI/CD pipelines) into this standard structure.\n",
+      "summary": "Tic-tac-toe game board with score header, 3x3 grid, and new game button.",
+      "description": "A game card (max-width=\"sm\") with score badges in the header (X accent vs O, spacers centering turn text), a 3x3 aui-grid (cols=\"3\" rows=\"3\" gap=\"1\" square) constrained to max-width: 16rem. Cells are aui-button size=\"fill\" icon-size=\"half\" hide-label with .aui-ttt-cell class for control background, transparent border, and aspect-ratio: 1. X pieces add .aui-ttt-cell-x for --aui-button-color: var(--aui-solid) plus accent attr. O pieces use icon-leading=\"circle\", empty cells have no icon. Footer has a scrim full-width new game button.\n",
       "components": [
         "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-footer",
         "aui-inset",
         "aui-stack",
-        "aui-heading",
+        "aui-grid",
         "aui-text",
         "aui-badge",
-        "aui-editor",
-        "aui-editor-layer",
-        "aui-graph-ui",
-        "aui-graph-layer",
-        "aui-graph-node",
-        "aui-graph-noodle",
-        "aui-graph-port"
+        "aui-button"
       ],
-      "schema": {
-        "nodes": [
-          {
-            "id": "string",
-            "label": "string",
-            "description": "string",
-            "intent": "accent | info | success | warning | danger",
-            "badge": "string",
-            "x": "number (rem)",
-            "y": "number (rem)",
-            "width": "number (rem, default 10)"
-          }
-        ],
-        "connections": [
-          {
-            "from": "string (node id)",
-            "to": "string (node id)"
-          }
-        ]
-      },
-      "dataset": "{\n  \"nodes\": [\n    { \"id\": \"ingest\",    \"label\": \"Data Ingest\",     \"description\": \"S3 + Kafka streams\",     \"intent\": \"accent\",  \"badge\": \"Source\",  \"x\": 2,  \"y\": 4, \"width\": 10 },\n    { \"id\": \"transform\", \"label\": \"Transform\",       \"description\": \"dbt models + Spark\",     \"intent\": \"info\",    \"badge\": \"Process\", \"x\": 17, \"y\": 1.5, \"width\": 10 },\n    { \"id\": \"validate\",  \"label\": \"Validate\",        \"description\": \"Schema + quality checks\", \"intent\": \"warning\", \"badge\": \"QA\",      \"x\": 17, \"y\": 10.5, \"width\": 10 },\n    { \"id\": \"warehouse\", \"label\": \"Data Warehouse\",  \"description\": \"Gold layer analytics\",   \"intent\": \"success\", \"badge\": \"Sink\",    \"x\": 32, \"y\": 6, \"width\": 10 }\n  ],\n  \"connections\": [\n    { \"from\": \"ingest\",    \"to\": \"transform\" },\n    { \"from\": \"ingest\",    \"to\": \"validate\" },\n    { \"from\": \"transform\", \"to\": \"warehouse\" },\n    { \"from\": \"validate\",  \"to\": \"warehouse\" }\n  ]\n}\n",
+      "kind": "card",
       "examples": [
         {
-          "description": "Data-driven pipeline diagram rendered from a JSON dataset.",
-          "html": "<aui-stack gap=\"2\">\n  <aui-graph-ui connectable style=\"width: 100%; height: 22rem\" min-width=\"44\" zoom=\"1\">\n    <aui-graph-layer name=\"wires\" type=\"svg\">\n      <!-- Data Ingest → Transform -->\n      <aui-graph-noodle from=\"data-ingest:out\" to=\"transform:in\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n      <!-- Data Ingest → Validate -->\n      <aui-graph-noodle from=\"data-ingest:out\" to=\"validate:in\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n      <!-- Transform → Data Warehouse -->\n      <aui-graph-noodle from=\"transform:out\" to=\"data-warehouse:in\" color=\"success\" weight=\"2\"></aui-graph-noodle>\n      <!-- Validate → Data Warehouse -->\n      <aui-graph-noodle from=\"validate:out\" to=\"data-warehouse:in\" color=\"warning\" weight=\"2\"></aui-graph-noodle>\n    </aui-graph-layer>\n    <aui-graph-layer name=\"content\">\n      <!-- Source node -->\n      <aui-graph-node x=\"30\" y=\"45\" node-id=\"data-ingest\">\n        <aui-container kind=\"widget\" bordered accent>\n          <aui-inset>\n            <aui-stack gap=\"1\">\n              <aui-badge accent>Source</aui-badge>\n              <aui-heading size=\"sm\">Data Ingest</aui-heading>\n              <aui-text muted size=\"xs\">S3 + Kafka streams</aui-text>\n            </aui-stack>\n          </aui-inset>\n          <aui-graph-port port-id=\"out\" side=\"right\" type=\"output\"></aui-graph-port>\n        </aui-container>\n      </aui-graph-node>\n      <!-- Transform node -->\n      <aui-graph-node x=\"270\" y=\"10\" node-id=\"transform\">\n        <aui-container kind=\"widget\" bordered info>\n          <aui-inset>\n            <aui-stack gap=\"1\">\n              <aui-badge info>Process</aui-badge>\n              <aui-heading size=\"sm\">Transform</aui-heading>\n              <aui-text muted size=\"xs\">dbt models + Spark</aui-text>\n            </aui-stack>\n          </aui-inset>\n          <aui-graph-port port-id=\"in\" side=\"left\" type=\"input\"></aui-graph-port>\n          <aui-graph-port port-id=\"out\" side=\"right\" type=\"output\"></aui-graph-port>\n        </aui-container>\n      </aui-graph-node>\n      <!-- Validate node -->\n      <aui-graph-node x=\"270\" y=\"140\" node-id=\"validate\">\n        <aui-container kind=\"widget\" bordered warning>\n          <aui-inset>\n            <aui-stack gap=\"1\">\n              <aui-badge warning>QA</aui-badge>\n              <aui-heading size=\"sm\">Validate</aui-heading>\n              <aui-text muted size=\"xs\">Schema + quality checks</aui-text>\n            </aui-stack>\n          </aui-inset>\n          <aui-graph-port port-id=\"in\" side=\"left\" type=\"input\"></aui-graph-port>\n          <aui-graph-port port-id=\"out\" side=\"right\" type=\"output\"></aui-graph-port>\n        </aui-container>\n      </aui-graph-node>\n      <!-- Sink node -->\n      <aui-graph-node x=\"510\" y=\"75\" node-id=\"data-warehouse\">\n        <aui-container kind=\"widget\" bordered success>\n          <aui-inset>\n            <aui-stack gap=\"1\">\n              <aui-badge success>Sink</aui-badge>\n              <aui-heading size=\"sm\">Data Warehouse</aui-heading>\n              <aui-text muted size=\"xs\">Gold layer analytics</aui-text>\n            </aui-stack>\n          </aui-inset>\n          <aui-graph-port port-id=\"in\" side=\"left\" type=\"input\"></aui-graph-port>\n        </aui-container>\n      </aui-graph-node>\n    </aui-graph-layer>\n  </aui-graph-ui>\n\n  <aui-text muted size=\"xs\" align-items=\"center\">Rendered from a standard JSON dataset. The same schema powers the interactive aui-graph version. Adapters can transform Airflow DAGs, dbt lineage, or CI/CD pipelines into this format.</aui-text>\n</aui-stack>"
+          "description": "Tic-tac-toe game board with score header, 3x3 grid, and new game button.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-badge accent>X: 3</aui-badge>\n      <aui-text spacer></aui-text>\n      <aui-text size=\"sm\" weight=\"medium\">X's turn</aui-text>\n      <aui-text spacer></aui-text>\n      <aui-badge>O: 2</aui-badge>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"2\" align-items=\"center\">\n        <aui-grid cols=\"3\" rows=\"3\" gap=\"1\" square style=\"width: 100%; max-width: 16rem;\">\n          <aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"X\" icon-leading=\"x\" accent class=\"aui-ttt-cell aui-ttt-cell-x\"></aui-button>\n          <aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"O\" icon-leading=\"circle\" class=\"aui-ttt-cell\"></aui-button>\n          <aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"Empty\" class=\"aui-ttt-cell\"></aui-button>\n          <aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"Empty\" class=\"aui-ttt-cell\"></aui-button>\n          <aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"X\" icon-leading=\"x\" accent class=\"aui-ttt-cell aui-ttt-cell-x\"></aui-button>\n          <aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"O\" icon-leading=\"circle\" class=\"aui-ttt-cell\"></aui-button>\n          <aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"O\" icon-leading=\"circle\" class=\"aui-ttt-cell\"></aui-button>\n          <aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"Empty\" class=\"aui-ttt-cell\"></aui-button>\n          <aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"X\" icon-leading=\"x\" accent class=\"aui-ttt-cell aui-ttt-cell-x\"></aui-button>\n        </aui-grid>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button scrim width=\"full\">New Game</aui-button>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
@@ -17014,8 +17828,8 @@
         "aui-text",
         "aui-avatar",
         "aui-chip",
-        "aui-button",
-        "aui-icon"
+        "aui-dropdown-menu",
+        "aui-option"
       ],
       "kind": "card",
       "examples": [
@@ -17049,6 +17863,34 @@
         }
       ]
     },
+    {
+      "name": "list-kanban-board",
+      "type": "block",
+      "summary": "Roadmap kanban board with segmented control view toggle, vote counts, descriptions, and avatar-groups.",
+      "description": "A product roadmap kanban board with header containing title heading with spacer, a Board/List segmented control, and a primary accent \"New\" button with plus icon. Content is an inset with horizontally scrolling row of columns using aui-stack with min-width=\"14\" and a .aui-kanban-column CSS class for control background, border-radius, and padding. Each column has a header row with a colored dot badge (plain=Planned, accent=In Progress, success=Complete), column heading with spacer, and muted xs item count. Cards are plain divs with .aui-kanban-card class containing a heading, muted xs description text, and a footer row with a category badge (Feature, Enhancement, Refactor, QA, Done), spacer, and either upvote button + vote count, avatar-group assignees, or a completion date. Vote rows use ghost hide-label caret-up buttons with xs muted count text.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-avatar",
+        "aui-avatar-group",
+        "aui-badge",
+        "aui-button",
+        "aui-segmented-control",
+        "aui-segment"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Roadmap kanban board with segmented control view toggle, vote counts, descriptions, and avatar-groups.",
+          "html": "<aui-container kind=\"card\" bordered>\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-heading size=\"lg\" spacer>Roadmap</aui-heading>\n      <aui-segmented-control value=\"board\" size=\"sm\">\n        <aui-segment value=\"board\" selected>Board</aui-segment>\n        <aui-segment value=\"list\">List</aui-segment>\n      </aui-segmented-control>\n      <aui-button primary accent size=\"sm\" icon-leading=\"plus\">New</aui-button>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"3\" style=\"overflow-x: auto; align-items: start;\">\n\n        <!-- Planned column -->\n        <aui-stack gap=\"3\" min-width=\"14\" class=\"aui-kanban-column\">\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <aui-badge dot></aui-badge>\n            <aui-heading size=\"sm\" spacer>Planned</aui-heading>\n            <aui-text muted size=\"xs\">4</aui-text>\n          </aui-stack>\n          <aui-stack gap=\"2\">\n            <div class=\"aui-kanban-card\">\n              <aui-stack gap=\"2\">\n                <aui-heading size=\"sm\">Keyboard shortcuts panel</aui-heading>\n                <aui-text muted size=\"xs\">Global shortcut viewer with search and customization support.</aui-text>\n                <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n                  <aui-badge>Feature</aui-badge>\n                  <aui-text spacer></aui-text>\n                  <aui-button ghost hide-label label=\"Upvote\" icon-leading=\"caret-up\" size=\"sm\"></aui-button>\n                  <aui-text size=\"xs\" muted>24</aui-text>\n                </aui-stack>\n              </aui-stack>\n            </div>\n            <div class=\"aui-kanban-card\">\n              <aui-stack gap=\"2\">\n                <aui-heading size=\"sm\">Color picker OKLCH rework</aui-heading>\n                <aui-text muted size=\"xs\">Native OKLCH color model with L/C/H/A sliders.</aui-text>\n                <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n                  <aui-badge accent>Enhancement</aui-badge>\n                  <aui-text spacer></aui-text>\n                  <aui-button ghost hide-label label=\"Upvote\" icon-leading=\"caret-up\" size=\"sm\"></aui-button>\n                  <aui-text size=\"xs\" muted>18</aui-text>\n                </aui-stack>\n              </aui-stack>\n            </div>\n            <div class=\"aui-kanban-card\">\n              <aui-stack gap=\"2\">\n                <aui-heading size=\"sm\">Notification center rebuild</aui-heading>\n                <aui-text muted size=\"xs\">Use aui-select popover pattern instead of custom panel.</aui-text>\n                <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n                  <aui-badge warning>Refactor</aui-badge>\n                  <aui-text spacer></aui-text>\n                  <aui-button ghost hide-label label=\"Upvote\" icon-leading=\"caret-up\" size=\"sm\"></aui-button>\n                  <aui-text size=\"xs\" muted>12</aui-text>\n                </aui-stack>\n              </aui-stack>\n            </div>\n          </aui-stack>\n        </aui-stack>\n\n        <!-- In Progress column -->\n        <aui-stack gap=\"3\" min-width=\"14\" class=\"aui-kanban-column\">\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <aui-badge accent dot></aui-badge>\n            <aui-heading size=\"sm\" spacer>In Progress</aui-heading>\n            <aui-text muted size=\"xs\">2</aui-text>\n          </aui-stack>\n          <aui-stack gap=\"2\">\n            <div class=\"aui-kanban-card\">\n              <aui-stack gap=\"2\">\n                <aui-heading size=\"sm\">Token pipeline v2</aui-heading>\n                <aui-text muted size=\"xs\">Build-time transforms for CSS, Swift, and Android outputs.</aui-text>\n                <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n                  <aui-badge accent>Enhancement</aui-badge>\n                  <aui-text spacer></aui-text>\n                  <aui-avatar-group>\n                    <aui-avatar size=\"xs\">SC</aui-avatar>\n                    <aui-avatar size=\"xs\">JW</aui-avatar>\n                  </aui-avatar-group>\n                </aui-stack>\n              </aui-stack>\n            </div>\n            <div class=\"aui-kanban-card\">\n              <aui-stack gap=\"2\">\n                <aui-heading size=\"sm\">Dark mode QA</aui-heading>\n                <aui-text muted size=\"xs\">Verify all components render correctly in dark theme.</aui-text>\n                <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n                  <aui-badge>QA</aui-badge>\n                  <aui-text spacer></aui-text>\n                  <aui-avatar size=\"xs\">MR</aui-avatar>\n                </aui-stack>\n              </aui-stack>\n            </div>\n          </aui-stack>\n        </aui-stack>\n\n        <!-- Complete column -->\n        <aui-stack gap=\"3\" min-width=\"14\" class=\"aui-kanban-column\">\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <aui-badge success dot></aui-badge>\n            <aui-heading size=\"sm\" spacer>Complete</aui-heading>\n            <aui-text muted size=\"xs\">3</aui-text>\n          </aui-stack>\n          <aui-stack gap=\"2\">\n            <div class=\"aui-kanban-card\">\n              <aui-stack gap=\"2\">\n                <aui-heading size=\"sm\">40 blocks ported</aui-heading>\n                <aui-text muted size=\"xs\">All training source blocks converted to agent-ui patterns.</aui-text>\n                <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n                  <aui-badge success>Done</aui-badge>\n                  <aui-text spacer></aui-text>\n                  <aui-text size=\"xs\" muted>Mar 21</aui-text>\n                </aui-stack>\n              </aui-stack>\n            </div>\n            <div class=\"aui-kanban-card\">\n              <aui-stack gap=\"2\">\n                <aui-heading size=\"sm\">Component token audit</aui-heading>\n                <aui-text muted size=\"xs\">8 tokens added, toast/tabs/select cleaned up.</aui-text>\n                <aui-stack direction=\"row\" gap=\"1\" align-items=\"center\">\n                  <aui-badge success>Done</aui-badge>\n                  <aui-text spacer></aui-text>\n                  <aui-text size=\"xs\" muted>Mar 21</aui-text>\n                </aui-stack>\n              </aui-stack>\n            </div>\n          </aui-stack>\n        </aui-stack>\n\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
+        }
+      ]
+    },
     {
       "name": "login-branded",
       "type": "block",
@@ -17230,6 +18072,29 @@
         }
       ]
     },
+    {
+      "name": "media-image-gallery",
+      "type": "block",
+      "summary": "Asset gallery grid with image placeholders, file count badge, and upload button.",
+      "description": "A panel (max-width=\"xl\") for browsing uploaded assets. Header has title with spacer, file count badge, and scrim upload button. Content shows a 3-column flex-wrap layout of aui-button size=\"fill\" icon-size=\"half\" tiles with hide-label, icon-leading=\"image\", --aui-button-background: var(--aui-control), and --aui-button-border: transparent. Tiles use width: calc(33.333% - 0.67rem) and aspect-ratio: 1 for the 3-column grid.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-badge",
+        "aui-button"
+      ],
+      "kind": "panel",
+      "examples": [
+        {
+          "description": "Asset gallery grid with image placeholders, file count badge, and upload button.",
+          "html": "<aui-container kind=\"panel\" bordered max-width=\"xl\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-heading size=\"lg\" spacer>Assets</aui-heading>\n      <aui-badge>24 files</aui-badge>\n      <aui-button scrim size=\"sm\" icon-leading=\"arrow-up\">Upload</aui-button>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"3\" wrap>\n        <aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"Asset 1\" icon-leading=\"image\" square style=\"width: calc(33.333% - 0.67rem); --aui-button-background: var(--aui-control); --aui-button-border: transparent;\"></aui-button>\n        <aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"Asset 2\" icon-leading=\"image\" square style=\"width: calc(33.333% - 0.67rem); --aui-button-background: var(--aui-control); --aui-button-border: transparent;\"></aui-button>\n        <aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"Asset 3\" icon-leading=\"image\" square style=\"width: calc(33.333% - 0.67rem); --aui-button-background: var(--aui-control); --aui-button-border: transparent;\"></aui-button>\n        <aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"Asset 4\" icon-leading=\"image\" square style=\"width: calc(33.333% - 0.67rem); --aui-button-background: var(--aui-control); --aui-button-border: transparent;\"></aui-button>\n        <aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"Asset 5\" icon-leading=\"image\" square style=\"width: calc(33.333% - 0.67rem); --aui-button-background: var(--aui-control); --aui-button-border: transparent;\"></aui-button>\n        <aui-button size=\"fill\" icon-size=\"half\" hide-label label=\"Asset 6\" icon-leading=\"image\" square style=\"width: calc(33.333% - 0.67rem); --aui-button-background: var(--aui-control); --aui-button-border: transparent;\"></aui-button>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
+        }
+      ]
+    },
     {
       "name": "member-list",
       "type": "block",
@@ -17299,6 +18164,31 @@
         }
       ]
     },
+    {
+      "name": "nav-sidebar",
+      "type": "block",
+      "summary": "App sidebar with workspace header, nav items, favorites section, and user footer.",
+      "description": "A fixed-width sidebar for application navigation without height constraint or aui-content wrapper — sections use aui-inset directly separated by aui-divider. Workspace header shows an accent avatar icon with solid background and org name. Main navigation section uses aui-nav-item elements with active state for the current page, and an activity item with a danger badge count. A Favorites section label uses aui-heading group for uppercase styling. Footer has a settings link and user row with avatar, name, and online status dot badge.\n",
+      "components": [
+        "aui-container",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-avatar",
+        "aui-icon",
+        "aui-badge",
+        "aui-divider",
+        "aui-nav-item"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "App sidebar with workspace header, nav items, favorites section, and user footer.",
+          "html": "<aui-container kind=\"card\" bordered style=\"width: 15rem;\">\n\n  <!-- Workspace header -->\n  <aui-inset>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-avatar size=\"sm\" accent solid><aui-icon name=\"globe-simple\" size=\"xs\"></aui-icon></aui-avatar>\n      <aui-heading size=\"sm\">Acme Inc</aui-heading>\n    </aui-stack>\n  </aui-inset>\n\n  <aui-divider></aui-divider>\n\n  <!-- Main navigation -->\n  <aui-inset>\n    <aui-stack gap=\"1\">\n      <aui-nav-item active>\n        <aui-icon name=\"house\"></aui-icon>\n        Dashboard\n      </aui-nav-item>\n      <aui-nav-item muted>\n        <aui-icon name=\"star\"></aui-icon>\n        Projects\n      </aui-nav-item>\n      <aui-nav-item muted>\n        <aui-icon name=\"clock\"></aui-icon>\n        Activity\n        <aui-badge danger>3</aui-badge>\n      </aui-nav-item>\n      <aui-nav-item muted>\n        <aui-icon name=\"users-three\"></aui-icon>\n        Team\n      </aui-nav-item>\n\n      <aui-heading group style=\"padding-top: 0.75rem;\">Favorites</aui-heading>\n\n      <aui-nav-item muted>\n        <aui-icon name=\"file-text\"></aui-icon>\n        Design System\n      </aui-nav-item>\n      <aui-nav-item muted>\n        <aui-icon name=\"file-text\"></aui-icon>\n        API Docs\n      </aui-nav-item>\n    </aui-stack>\n  </aui-inset>\n\n  <aui-divider></aui-divider>\n\n  <!-- Footer -->\n  <aui-inset>\n    <aui-stack gap=\"2\">\n      <aui-nav-item muted>\n        <aui-icon name=\"gear\"></aui-icon>\n        Settings\n      </aui-nav-item>\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-avatar size=\"xs\">SC</aui-avatar>\n        <aui-text size=\"sm\" spacer>Sarah Chen</aui-text>\n        <aui-badge success dot></aui-badge>\n      </aui-stack>\n    </aui-stack>\n  </aui-inset>\n\n</aui-container>"
+        }
+      ]
+    },
     {
       "name": "notification-list",
       "type": "block",
@@ -17323,6 +18213,38 @@
         }
       ]
     },
+    {
+      "name": "onboard-stepper",
+      "type": "block",
+      "summary": "Vertical onboarding wizard with progress bar, step timeline, inline form, and navigation.",
+      "description": "An onboarding card with a header (title + subtitle), a progress bar (--aui-accent-500 fill on --aui-control track) showing completion, and aui-stepper with aui-step children for a vertical step timeline. Steps have state-driven avatars with solid backgrounds (done=success check, running=accent number, pending=--aui-neutral-highest with --aui-ink-muted text). The active step expands to show inline form fields wrapped in a bordered widget container. The Workspace URL field uses aui-input-group with a \"yourteam.app/\" prefix for connected border treatment. Footer has scrim Back and primary accent Continue buttons in an aui-button-group with equal sizing via grow=\"1\" basis=\"0\". Connector lines between steps are handled by the aui-stepper/aui-step elements.\n",
+      "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-field",
+        "aui-input",
+        "aui-input-group",
+        "aui-button",
+        "aui-button-group"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Vertical onboarding wizard with progress bar, step timeline, inline form, and navigation.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"lg\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Set up your workspace</aui-heading>\n        <aui-text muted size=\"sm\">Complete these steps to get your team up and running.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n\n        <!-- Progress bar -->\n        <aui-stack gap=\"2\">\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <aui-text size=\"xs\" spacer>Setup progress</aui-text>\n            <aui-text size=\"xs\" muted>2 of 4 complete</aui-text>\n          </aui-stack>\n          <div style=\"height: 4px; border-radius: var(--aui-radius); background: var(--aui-control);\">\n            <div style=\"width: 50%; height: 100%; border-radius: var(--aui-radius); background: var(--aui-accent-500);\"></div>\n          </div>\n        </aui-stack>\n\n        <!-- Steps -->\n        <aui-stepper>\n\n          <!-- Step 1: Done -->\n          <aui-step state=\"done\">\n            <aui-avatar size=\"xs\" success shrink=\"0\" solid><aui-icon name=\"check\" size=\"xs\"></aui-icon></aui-avatar>\n            <aui-stack gap=\"1\" spacer>\n              <aui-heading size=\"sm\">Create account</aui-heading>\n              <aui-text size=\"xs\" muted>Email verified and profile created</aui-text>\n            </aui-stack>\n          </aui-step>\n\n          <!-- Step 2: Active -->\n          <aui-step state=\"running\">\n            <aui-avatar size=\"xs\" accent shrink=\"0\" solid>2</aui-avatar>\n            <aui-stack gap=\"3\" spacer min-width=\"0\">\n              <aui-heading size=\"sm\">Name your workspace</aui-heading>\n              <aui-container kind=\"widget\" bordered>\n                <aui-inset>\n                  <aui-stack>\n                    <aui-field label=\"Workspace name\" width=\"full\">\n                      <aui-input placeholder=\"Acme Engineering\" width=\"full\"></aui-input>\n                    </aui-field>\n                    <aui-field label=\"Workspace URL\" width=\"full\">\n                      <aui-input placeholder=\"acme-eng\" prefix=\"yourteam.app/\" width=\"full\"></aui-input>\n                    </aui-field>\n                  </aui-stack>\n                </aui-inset>\n              </aui-container>\n            </aui-stack>\n          </aui-step>\n\n          <!-- Step 3: Pending -->\n          <aui-step>\n            <aui-avatar size=\"xs\" shrink=\"0\" style=\"background: var(--aui-neutral-highest); color: var(--aui-ink-muted);\">3</aui-avatar>\n            <aui-stack gap=\"1\">\n              <aui-text size=\"sm\" muted>Invite your team</aui-text>\n            </aui-stack>\n          </aui-step>\n\n          <!-- Step 4: Pending -->\n          <aui-step>\n            <aui-avatar size=\"xs\" shrink=\"0\" style=\"background: var(--aui-neutral-highest); color: var(--aui-ink-muted);\">4</aui-avatar>\n            <aui-stack gap=\"1\">\n              <aui-text size=\"sm\" muted>Review and launch</aui-text>\n            </aui-stack>\n          </aui-step>\n\n        </aui-stepper>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n\n  <aui-footer>\n    <aui-button-group>\n      <aui-button scrim grow=\"1\" basis=\"0\">Back</aui-button>\n      <aui-button primary accent icon-trailing=\"caret-right\" grow=\"1\" basis=\"0\">Continue</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>"
+        }
+      ]
+    },
     {
       "name": "oncology-pathway",
       "type": "block",
@@ -17344,6 +18266,59 @@
         }
       ]
     },
+    {
+      "name": "overlay-confirmation-modal",
+      "type": "block",
+      "summary": "Confirmation dialog with danger icon, warning detail, and cancel/confirm actions.",
+      "description": "A modal dialog for confirming destructive actions. Two variants shown: an enhanced version with a danger avatar icon (solid background), title, description with bold entity name \"AgentUI Corp\", a bordered danger aui-alert danger listing impact details, and a footer with scrim cancel and danger-primary confirm buttons using grow=\"1\" basis=\"0\" for equal sizing; and a minimal version with just title, description, and buttons. Uses aui-dialog with open attribute. The danger alert and button use the danger intent for semantic red coloring.\n",
+      "components": [
+        "aui-dialog",
+        "aui-container",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-avatar",
+        "aui-icon",
+        "aui-footer",
+        "aui-button",
+        "aui-button-group",
+        "aui-alert"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Danger confirmation with warning detail",
+          "html": "<aui-dialog open max-width=\"sm\">\n  <aui-container kind=\"card\">\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-avatar size=\"lg\" danger solid><aui-icon name=\"warning\"></aui-icon></aui-avatar>\n        <aui-stack gap=\"2\">\n          <aui-heading size=\"lg\">Delete workspace?</aui-heading>\n          <aui-text muted size=\"sm\">This will permanently delete <strong>AgentUI Corp</strong> and remove all associated data. This action cannot be undone.</aui-text>\n        </aui-stack>\n        <aui-alert danger>All 47 projects, 312 files, and 8 team members will be removed.</aui-alert>\n      </aui-stack>\n    </aui-inset>\n    <aui-footer>\n      <aui-button-group>\n        <aui-button scrim grow=\"1\" basis=\"0\">Cancel</aui-button>\n        <aui-button primary danger grow=\"1\" basis=\"0\">Delete Workspace</aui-button>\n      </aui-button-group>\n    </aui-footer>\n  </aui-container>\n</aui-dialog>"
+        },
+        {
+          "description": "Simple confirmation without warning box",
+          "html": "<aui-dialog open max-width=\"sm\">\n  <aui-container kind=\"card\">\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-heading size=\"lg\">Discard changes?</aui-heading>\n        <aui-text muted size=\"sm\">You have unsaved changes that will be lost. Are you sure you want to leave this page?</aui-text>\n      </aui-stack>\n    </aui-inset>\n    <aui-footer>\n      <aui-button-group>\n        <aui-button scrim grow=\"1\" basis=\"0\">Keep editing</aui-button>\n        <aui-button primary danger grow=\"1\" basis=\"0\">Discard</aui-button>\n      </aui-button-group>\n    </aui-footer>\n  </aui-container>\n</aui-dialog>"
+        }
+      ]
+    },
+    {
+      "name": "overlay-dropdown-menu",
+      "type": "block",
+      "summary": "Dropdown menus with action items, keyboard shortcuts, view selector, and danger delete.",
+      "description": "Two dropdown menu variants side by side. The actions menu uses aui-dropdown-menu with ghost trigger, containing icon+label options with trailing keyboard shortcuts in mono font (font=\"mono\"), a disabled Archive option, optgroup dividers between groups, and a danger-intent Delete option. The view selector menu uses aui-select mode=\"list\" inside an aui-container with aui-optgroup label attributes for section headers (View, Sort by) and selected attribute for active items, since it tracks selection state rather than firing actions.\n",
+      "components": [
+        "aui-dropdown-menu",
+        "aui-container",
+        "aui-select",
+        "aui-option",
+        "aui-optgroup",
+        "aui-text",
+        "aui-icon"
+      ],
+      "kind": "widget",
+      "examples": [
+        {
+          "description": "Dropdown menus with action items, keyboard shortcuts, view selector, and danger delete.",
+          "html": "<aui-stack direction=\"row\">\n\n  <!-- Actions menu -->\n  <aui-dropdown-menu label=\"Actions\" ghost>\n    <aui-option value=\"edit\">\n      <aui-icon name=\"pencil\" size=\"sm\" muted></aui-icon>\n      <aui-text size=\"sm\" spacer>Edit</aui-text>\n      <aui-text size=\"xs\" muted font=\"mono\">⌘E</aui-text>\n    </aui-option>\n    <aui-option value=\"duplicate\">\n      <aui-icon name=\"copy\" size=\"sm\" muted></aui-icon>\n      <aui-text size=\"sm\" spacer>Duplicate</aui-text>\n      <aui-text size=\"xs\" muted font=\"mono\">⌘D</aui-text>\n    </aui-option>\n    <aui-option value=\"share\">\n      <aui-icon name=\"arrow-up\" size=\"sm\" muted></aui-icon>\n      <aui-text size=\"sm\" spacer>Share</aui-text>\n    </aui-option>\n    <aui-optgroup>\n      <aui-option value=\"move\">\n        <aui-icon name=\"star\" size=\"sm\" muted></aui-icon>\n        <aui-text size=\"sm\" spacer>Move to</aui-text>\n        <aui-icon name=\"caret-right\" size=\"sm\" muted></aui-icon>\n      </aui-option>\n      <aui-option value=\"archive\" disabled>\n        <aui-icon name=\"stop\" size=\"sm\" muted></aui-icon>\n        <aui-text size=\"sm\" muted spacer>Archive</aui-text>\n      </aui-option>\n    </aui-optgroup>\n    <aui-optgroup>\n      <aui-option value=\"delete\" danger>\n        <aui-icon name=\"trash\" size=\"sm\"></aui-icon>\n        <aui-text size=\"sm\" spacer>Delete</aui-text>\n        <aui-text size=\"xs\" muted font=\"mono\">⌫</aui-text>\n      </aui-option>\n    </aui-optgroup>\n  </aui-dropdown-menu>\n\n  <!-- View selector menu -->\n  <aui-container kind=\"widget\" bordered max-width=\"xs\" shadow=\"2\">\n    <aui-select mode=\"list\">\n      <aui-optgroup label=\"View\">\n        <aui-option value=\"board\" selected>Board</aui-option>\n        <aui-option value=\"list\">List</aui-option>\n        <aui-option value=\"table\">Table</aui-option>\n      </aui-optgroup>\n      <aui-optgroup label=\"Sort by\">\n        <aui-option value=\"name\" selected>Name</aui-option>\n        <aui-option value=\"date-modified\">Date modified</aui-option>\n        <aui-option value=\"date-created\">Date created</aui-option>\n      </aui-optgroup>\n    </aui-select>\n  </aui-container>\n\n</aui-stack>"
+        }
+      ]
+    },
     {
       "name": "pricing-card",
       "type": "block",
@@ -17400,10 +18375,8 @@
       "description": "A card displaying a user's profile information at a glance. Centered layout with a large avatar, name, role, short bio, and an aui-stat row for key metrics. Footer provides edit and messaging actions. Useful for team directories, account pages, or social-style dashboards where you need to present identity alongside engagement metrics.\n",
       "components": [
         "aui-container",
-        "aui-inset",
-        "aui-header",
         "aui-content",
-        "aui-footer",
+        "aui-inset",
         "aui-stack",
         "aui-heading",
         "aui-text",
@@ -17484,9 +18457,8 @@
         "aui-text",
         "aui-switch",
         "aui-button",
-        "aui-badge",
-        "aui-divider",
-        "aui-icon"
+        "aui-alert",
+        "aui-divider"
       ],
       "kind": "card",
       "examples": [
@@ -17503,7 +18475,6 @@
       "description": "A fixed-width sidebar for app-level navigation. Uses card kind for tighter padding than panel. Nav items use aui-nav-item elements — the active item uses the active attribute for visual distinction. Footer shows the signed-in user with avatar and email. Designed to sit at the left edge of a layout at 14-16rem width.\n",
       "components": [
         "aui-container",
-        "aui-header",
         "aui-content",
         "aui-footer",
         "aui-inset",
@@ -17512,7 +18483,6 @@
         "aui-text",
         "aui-icon",
         "aui-avatar",
-        "aui-divider",
         "aui-nav-item"
       ],
       "kind": "card",
@@ -17739,6 +18709,62 @@
           "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-header>\n    <span slot=\"content\"><aui-text muted size=\"sm\">5 days remaining in cycle</aui-text></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"0\">\n\n        <!-- Edge Requests: 91% -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-progress-circle value=\"91\" size=\"sm\"></aui-progress-circle>\n          <aui-heading size=\"sm\" spacer truncate>Edge Requests</aui-heading>\n          <aui-text size=\"sm\" weight=\"medium\">$1.83K</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n\n        <!-- Fast Data Transfer: 73% -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-progress-circle value=\"73\" size=\"sm\"></aui-progress-circle>\n          <aui-heading size=\"sm\" spacer truncate>Fast Data Transfer</aui-heading>\n          <aui-text size=\"sm\" weight=\"medium\">$952.51</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n\n        <!-- Monitoring Data Points: 58% -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-progress-circle value=\"58\" size=\"sm\"></aui-progress-circle>\n          <aui-heading size=\"sm\" spacer truncate>Monitoring Data Points</aui-heading>\n          <aui-text size=\"sm\" weight=\"medium\">$901.20</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n\n        <!-- Web Analytics Events: 42% -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-progress-circle value=\"42\" size=\"sm\"></aui-progress-circle>\n          <aui-heading size=\"sm\" spacer truncate>Web Analytics Events</aui-heading>\n          <aui-text size=\"sm\" weight=\"medium\">$603.71</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n\n        <!-- ISR Writes: 26% (524K / 2M) -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-progress-circle value=\"26\" size=\"sm\"></aui-progress-circle>\n          <aui-heading size=\"sm\" spacer truncate>ISR Writes</aui-heading>\n          <aui-text muted size=\"sm\">524.52K / 2M</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n\n        <!-- Function Duration: 0.5% (5.11 / 1K GB Hrs) -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-progress-circle value=\"1\" size=\"sm\"></aui-progress-circle>\n          <aui-heading size=\"sm\" spacer truncate>Function Duration</aui-heading>\n          <aui-text muted size=\"sm\">5.11 GB Hrs / 1K GB Hrs</aui-text>\n        </aui-stack>\n\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
         }
       ]
+    },
+    {
+      "name": "user-profile-card",
+      "type": "block",
+      "summary": "User profile card with avatar, name, role, stats grid, and action buttons.",
+      "description": "A compact centered profile card. Top section has a large accent solid avatar with initials, name heading, and role/location text. A divider separates the identity from a 3-column stats row using aui-stat for Commits, PRs, and Reviews. Footer has Message (primary accent) and View Profile (outline) buttons with equal sizing via grow=\"1\" basis=\"0\".\n",
+      "components": [
+        "aui-container",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-stat",
+        "aui-avatar",
+        "aui-button",
+        "aui-button-group",
+        "aui-divider",
+        "aui-footer"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "User profile card with avatar, name, role, stats grid, and action buttons.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-inset>\n    <aui-stack gap=\"4\">\n\n      <!-- Identity -->\n      <aui-stack gap=\"2\" align-items=\"center\" text=\"center\">\n        <aui-avatar size=\"xl\" accent solid>KG</aui-avatar>\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"lg\">Kim Granlund</aui-heading>\n          <aui-text muted size=\"sm\">Senior Engineer · San Francisco</aui-text>\n        </aui-stack>\n      </aui-stack>\n\n      <aui-divider></aui-divider>\n\n      <!-- Stats -->\n      <aui-stack direction=\"row\" gap=\"3\" text=\"center\">\n        <aui-stat label=\"Commits\" value=\"847\" spacer></aui-stat>\n        <aui-stat label=\"PRs\" value=\"132\" spacer></aui-stat>\n        <aui-stat label=\"Reviews\" value=\"56\" spacer></aui-stat>\n      </aui-stack>\n\n    </aui-stack>\n  </aui-inset>\n  <aui-footer>\n    <aui-button-group>\n      <aui-button primary accent grow=\"1\" basis=\"0\">Message</aui-button>\n      <aui-button outline grow=\"1\" basis=\"0\">View Profile</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "user-team-list",
+      "type": "block",
+      "summary": "Team member panel with search, role badges, invite button, and per-row actions.",
+      "description": "A full-featured team management panel. Header shows a title with member count, subtitle, and a trailing invite button. Content area includes a type=\"search\" input (auto icon + clear) followed by repeating member rows separated by dividers. Each row has an avatar with initials, a name/email column using the spacer pattern, a color-coded role badge (Owner=accent, Admin=warning, Member=neutral), and a trailing aui-dropdown-menu with ghost hide-label for per-row actions (edit role, remove). Pending invites are visually dimmed with a small badge alongside the name and have revoke/resend invite options.\n",
+      "components": [
+        "aui-container",
+        "aui-header",
+        "aui-content",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-field",
+        "aui-input",
+        "aui-avatar",
+        "aui-badge",
+        "aui-button",
+        "aui-dropdown-menu",
+        "aui-option",
+        "aui-divider"
+      ],
+      "kind": "panel",
+      "examples": [
+        {
+          "description": "Team member panel with search, role badges, invite button, and per-row actions.",
+          "html": "<aui-container kind=\"panel\" bordered max-width=\"xl\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Team Members</aui-heading>\n        <aui-text muted size=\"sm\">5 members · 1 pending invite</aui-text>\n      </aui-stack>\n    </span>\n    <span slot=\"trailing\">\n      <aui-button primary accent icon-leading=\"plus\">Invite</aui-button>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"2\">\n        <aui-field width=\"full\">\n          <aui-input type=\"search\" placeholder=\"Search members…\" width=\"full\"></aui-input>\n        </aui-field>\n        <aui-stack gap=\"3\">\n          <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n            <aui-avatar>AO</aui-avatar>\n            <aui-stack gap=\"1\" spacer>\n              <aui-heading size=\"md\">Amara Osei</aui-heading>\n              <aui-text muted size=\"sm\">amara@acme.io</aui-text>\n            </aui-stack>\n            <aui-badge accent>Owner</aui-badge>\n            <aui-dropdown-menu label=\"Options\" ghost hide-label shrink=\"0\">\n              <aui-option value=\"edit-role\">Edit role</aui-option>\n              <aui-option value=\"remove\" danger>Remove</aui-option>\n            </aui-dropdown-menu>\n          </aui-stack>\n          <aui-divider></aui-divider>\n          <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n            <aui-avatar>JC</aui-avatar>\n            <aui-stack gap=\"1\" spacer>\n              <aui-heading size=\"md\">James Chen</aui-heading>\n              <aui-text muted size=\"sm\">james@acme.io</aui-text>\n            </aui-stack>\n            <aui-badge warning>Admin</aui-badge>\n            <aui-dropdown-menu label=\"Options\" ghost hide-label shrink=\"0\">\n              <aui-option value=\"edit-role\">Edit role</aui-option>\n              <aui-option value=\"remove\" danger>Remove</aui-option>\n            </aui-dropdown-menu>\n          </aui-stack>\n          <aui-divider></aui-divider>\n          <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n            <aui-avatar>SP</aui-avatar>\n            <aui-stack gap=\"1\" spacer>\n              <aui-heading size=\"md\">Sara Petrov</aui-heading>\n              <aui-text muted size=\"sm\">sara@acme.io</aui-text>\n            </aui-stack>\n            <aui-badge>Member</aui-badge>\n            <aui-dropdown-menu label=\"Options\" ghost hide-label shrink=\"0\">\n              <aui-option value=\"edit-role\">Edit role</aui-option>\n              <aui-option value=\"remove\" danger>Remove</aui-option>\n            </aui-dropdown-menu>\n          </aui-stack>\n          <aui-divider></aui-divider>\n          <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n            <aui-avatar>LW</aui-avatar>\n            <aui-stack gap=\"1\" spacer>\n              <aui-heading size=\"md\">Liam Walker</aui-heading>\n              <aui-text muted size=\"sm\">liam@acme.io</aui-text>\n            </aui-stack>\n            <aui-badge>Member</aui-badge>\n            <aui-dropdown-menu label=\"Options\" ghost hide-label shrink=\"0\">\n              <aui-option value=\"edit-role\">Edit role</aui-option>\n              <aui-option value=\"remove\" danger>Remove</aui-option>\n            </aui-dropdown-menu>\n          </aui-stack>\n          <aui-divider></aui-divider>\n          <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\" style=\"opacity: 0.6;\">\n            <aui-avatar>NK</aui-avatar>\n            <aui-stack gap=\"1\" spacer>\n              <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n                <aui-heading size=\"md\">Nadia Kim</aui-heading>\n                <aui-badge>Pending</aui-badge>\n              </aui-stack>\n              <aui-text muted size=\"sm\">nadia@acme.io</aui-text>\n            </aui-stack>\n            <aui-badge>Member</aui-badge>\n            <aui-dropdown-menu label=\"Options\" ghost hide-label shrink=\"0\">\n              <aui-option value=\"revoke-invite\">Revoke invite</aui-option>\n              <aui-option value=\"resend\">Resend invite</aui-option>\n            </aui-dropdown-menu>\n          </aui-stack>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
+        }
+      ]
     }
   ]
 }