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

package/dist/api.components.json

@@ -1,7 +1,7 @@
 {
   "package": "@agent-ui-kit/web-components",
-  "version": "0.0.15",
-  "generated": "2026-03-21T23:16:48.908Z",
+  "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",
@@ -293,16 +293,20 @@
           "html": "<aui-agent-activity type=\"typing\" active></aui-agent-activity>"
         },
         {
-          "description": "Thinking indicator with custom label and elapsed timer — used during extended reasoning or chain-of-thought processing",
+          "description": "Thinking indicator with custom label and elapsed timer",
           "html": "<aui-agent-activity type=\"thinking\" active label=\"Reasoning\"></aui-agent-activity>"
         },
         {
-          "description": "Expandable reasoning trace — completed thinking step with visible chain-of-thought. Click toggles the trace content open/closed",
-          "html": "<aui-agent-activity type=\"thinking\" expandable expanded>\n  <div data-role=\"trace\">\n    <aui-stack gap=\"1\">\n      <aui-text muted size=\"sm\">The user is asking about onboarding drop-off. I should consider:</aui-text>\n      <aui-text muted size=\"sm\">1. Funnel analysis — where exactly are users leaving?</aui-text>\n      <aui-text muted size=\"sm\">2. Session recordings — qualitative signals</aui-text>\n      <aui-text muted size=\"sm\">3. Survey data — self-reported friction points</aui-text>\n      <aui-text muted size=\"sm\">Let me structure a response around these three data sources.</aui-text>\n    </aui-stack>\n  </div>\n</aui-agent-activity>"
+          "description": "Expandable reasoning trace — click header to toggle",
+          "html": "<aui-agent-activity type=\"thinking\" expandable expanded>\n  <div data-role=\"trace\">\n    <aui-stack gap=\"2\">\n      <aui-text muted size=\"sm\">The user is asking about onboarding drop-off. I should consider:</aui-text>\n      <aui-text muted size=\"sm\">1. Funnel analysis — where exactly are users leaving?</aui-text>\n      <aui-text muted size=\"sm\">2. Session recordings — qualitative signals</aui-text>\n      <aui-text muted size=\"sm\">3. Survey data — self-reported friction points</aui-text>\n      <aui-text muted size=\"sm\">Let me structure a response around these three data sources.</aui-text>\n    </aui-stack>\n  </div>\n</aui-agent-activity>"
         },
         {
-          "description": "Tool-use activity with live trace — shows the tool call and partial results while the operation is in progress",
-          "html": "<aui-agent-activity type=\"tool-use\" active label=\"Searching codebase\" expandable>\n  <pre>search_files(\"auth middleware\", include=[\"*.ts\", \"*.tsx\"])\n  → Found 12 matches in 5 files</pre>\n</aui-agent-activity>"
+          "description": "Tool-use activities as nested disclosures",
+          "html": "<aui-stack gap=\"2\">\n  <aui-disclosure summary=\"search_files — 12 matches\" open>\n    <aui-code>search_files(\"auth middleware\", include=[\"*.ts\", \"*.tsx\"])\n→ Found 12 matches in 5 files</aui-code>\n  </aui-disclosure>\n\n  <aui-disclosure summary=\"read_file — auth.middleware.ts\">\n    <aui-code>read_file(\"src/middleware/auth.middleware.ts\")\n→ 142 lines read</aui-code>\n  </aui-disclosure>\n\n  <aui-disclosure summary=\"analyze_code — 3 issues found\">\n    <aui-code>analyze_code(\"src/middleware/auth.middleware.ts\")\n→ 2 warnings, 1 suggestion</aui-code>\n  </aui-disclosure>\n</aui-stack>"
+        },
+        {
+          "description": "Active tool-use with trace",
+          "html": "<aui-agent-activity type=\"tool-use\" active label=\"Searching codebase\" expandable expanded>\n  <div data-role=\"trace\">\n    <aui-code>search_files(\"auth middleware\", include=[\"*.ts\", \"*.tsx\"])\n→ Found 12 matches in 5 files</aui-code>\n  </div>\n</aui-agent-activity>"
         }
       ]
     },
@@ -362,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",
@@ -880,7 +884,7 @@
         },
         {
           "description": "Prompt with an inline action icon (sparkle) positioned beside the textarea for triggering AI features",
-          "html": "<aui-agent-prompt>\n  <aui-textarea placeholder=\"Ask anything...\"></aui-textarea>\n  <div data-role=\"leading\">\n    <aui-button ghost>\n      <aui-icon name=\"sparkles\"></aui-icon>\n    </aui-button>\n  </div>\n</aui-agent-prompt>"
+          "html": "<aui-agent-prompt>\n  <aui-textarea placeholder=\"Ask anything...\"></aui-textarea>\n  <div data-role=\"leading\">\n    <aui-button ghost>\n      <aui-icon name=\"sparkle\"></aui-icon>\n    </aui-button>\n  </div>\n</aui-agent-prompt>"
         },
         {
           "description": "Prompt with action toolbar below textarea — attach files, upload images, voice input, and send",
@@ -1015,7 +1019,7 @@
         },
         {
           "description": "Conversation starters with icons — used on an empty chat state to help users begin a session with common tasks",
-          "html": "<aui-agent-seeds options='[{\"value\":\"write-email\",\"label\":\"Draft an email\",\"icon\":\"mail\"},{\"value\":\"summarize\",\"label\":\"Summarize a document\",\"icon\":\"file-text\"},{\"value\":\"brainstorm\",\"label\":\"Brainstorm ideas\",\"icon\":\"lightbulb\"},{\"value\":\"analyze-data\",\"label\":\"Analyze data\",\"icon\":\"chart-bar\"}]'>\n</aui-agent-seeds>"
+          "html": "<aui-agent-seeds options='[{\"value\":\"write-email\",\"label\":\"Draft an email\",\"icon\":\"envelope\"},{\"value\":\"summarize\",\"label\":\"Summarize a document\",\"icon\":\"file-text\"},{\"value\":\"brainstorm\",\"label\":\"Brainstorm ideas\",\"icon\":\"lightbulb\"},{\"value\":\"analyze-data\",\"label\":\"Analyze data\",\"icon\":\"chart-bar\"}]'>\n</aui-agent-seeds>"
         }
       ]
     },
@@ -1885,8 +1889,8 @@
       "name": "aui-breadcrumb",
       "tag": "aui-breadcrumb",
       "type": "component",
-      "summary": "Breadcrumb navigation trail.",
-      "description": "Container for aui-breadcrumb-item children. Sets role=\"navigation\" and aria-label. Separators are rendered via CSS between items.\n",
+      "summary": "Breadcrumb navigation trail with auto-current and depth collapse.",
+      "description": "Container for aui-breadcrumb-item children. Sets role=\"navigation\" and aria-label. Separators are rendered via CSS between items using a --_joiner custom property. The last item is automatically marked [current] by JS. When max-depth is set, middle items collapse into an ellipsis trigger that expands on click.\n",
       "base": "AgentElement",
       "attributes": {
         "label": {
@@ -1900,6 +1904,12 @@
           "type": "string",
           "default": "/",
           "description": "Separator character between breadcrumb items. Common values: \"/\" \"›\" \"→\" \"·\"\n"
+        },
+        "max-depth": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "When set, collapses middle items to keep only the first item and the last N items visible. Hidden items are replaced by an ellipsis button that expands them on click.\n"
         }
       },
       "a11y": {
@@ -1931,24 +1941,38 @@
           "name": "--aui-breadcrumb-gap",
           "default": "calc(var(--aui-space) * 2)",
           "description": "Gap between breadcrumb items."
+        },
+        {
+          "name": "--aui-breadcrumb-item-color-current",
+          "default": "var(--aui-ink-strong)",
+          "description": "Color of the current (last) breadcrumb item."
+        },
+        {
+          "name": "--aui-breadcrumb-item-font-weight-current",
+          "default": "var(--aui-font-weight-medium)",
+          "description": "Font weight of the current breadcrumb item."
         }
       ],
+      "behaviors": {
+        "auto-current": "The last aui-breadcrumb-item child is automatically marked with the [current] attribute by JS. Any manually set [current] attributes on other items are removed.\n",
+        "max-depth-collapse": "When max-depth is set and items exceed maxDepth + 1, middle items are hidden and replaced by an ellipsis button. Clicking the ellipsis expands all hidden items.\n"
+      },
       "examples": [
         {
           "description": "Typical three-level breadcrumb trail",
-          "html": "<aui-breadcrumb>\n  <aui-breadcrumb-item href=\"/\">Home</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/settings\">Settings</aui-breadcrumb-item>\n  <aui-breadcrumb-item current>Profile</aui-breadcrumb-item>\n</aui-breadcrumb>"
+          "html": "<aui-breadcrumb>\n  <aui-breadcrumb-item href=\"/\">Home</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/settings\">Settings</aui-breadcrumb-item>\n  <aui-breadcrumb-item >Profile</aui-breadcrumb-item>\n</aui-breadcrumb>"
         },
         {
           "description": "Deep breadcrumb trail with four levels",
-          "html": "<aui-breadcrumb>\n  <aui-breadcrumb-item href=\"/\">Home</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/products\">Products</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/products/widgets\">Widgets</aui-breadcrumb-item>\n  <aui-breadcrumb-item current>Deluxe Widget</aui-breadcrumb-item>\n</aui-breadcrumb>"
+          "html": "<aui-breadcrumb>\n  <aui-breadcrumb-item href=\"/\">Home</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/products\">Products</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/products/widgets\">Widgets</aui-breadcrumb-item>\n  <aui-breadcrumb-item >Deluxe Widget</aui-breadcrumb-item>\n</aui-breadcrumb>"
         },
         {
           "description": "Custom joiner character (›)",
-          "html": "<aui-breadcrumb joiner=\"›\">\n  <aui-breadcrumb-item href=\"/\">Home</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/docs\">Docs</aui-breadcrumb-item>\n  <aui-breadcrumb-item current>API</aui-breadcrumb-item>\n</aui-breadcrumb>"
+          "html": "<aui-breadcrumb joiner=\"›\">\n  <aui-breadcrumb-item href=\"/\">Home</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/docs\">Docs</aui-breadcrumb-item>\n  <aui-breadcrumb-item >API</aui-breadcrumb-item>\n</aui-breadcrumb>"
         },
         {
           "description": "Deep breadcrumb trail with five levels",
-          "html": "<aui-breadcrumb>\n  <aui-breadcrumb-item href=\"/\">Home</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/workspace\">Workspace</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/workspace/projects\">Projects</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/workspace/projects/agent-ui\">Agent UI</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/workspace/projects/agent-ui/components\">Components</aui-breadcrumb-item>\n  <aui-breadcrumb-item current>Breadcrumb</aui-breadcrumb-item>\n</aui-breadcrumb>"
+          "html": "<aui-breadcrumb>\n  <aui-breadcrumb-item href=\"/\">Home</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/workspace\">Workspace</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/workspace/projects\">Projects</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/workspace/projects/agent-ui\">Agent UI</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/workspace/projects/agent-ui/components\">Components</aui-breadcrumb-item>\n  <aui-breadcrumb-item >Breadcrumb</aui-breadcrumb-item>\n</aui-breadcrumb>"
         },
         {
           "description": "Breadcrumb items with leading icons",
@@ -1956,11 +1980,15 @@
         },
         {
           "description": "Current page is non-clickable, previous items are links",
-          "html": "<aui-breadcrumb joiner=\"→\">\n  <aui-breadcrumb-item href=\"/\">Home</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/blog\">Blog</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/blog/2026\">2026</aui-breadcrumb-item>\n  <aui-breadcrumb-item current>How to build a design system</aui-breadcrumb-item>\n</aui-breadcrumb>"
+          "html": "<aui-breadcrumb joiner=\"→\">\n  <aui-breadcrumb-item href=\"/\">Home</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/blog\">Blog</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/blog/2026\">2026</aui-breadcrumb-item>\n  <aui-breadcrumb-item >How to build a design system</aui-breadcrumb-item>\n</aui-breadcrumb>"
         },
         {
           "description": "Deep breadcrumb with arrow joiner and six levels",
-          "html": "<aui-breadcrumb joiner=\"›\">\n  <aui-breadcrumb-item href=\"/\">Home</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/admin\">Admin</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/admin/users\">Users</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/admin/users/roles\">Roles</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/admin/users/roles/editor\">Editor</aui-breadcrumb-item>\n  <aui-breadcrumb-item current>Permissions</aui-breadcrumb-item>\n</aui-breadcrumb>"
+          "html": "<aui-breadcrumb joiner=\"›\">\n  <aui-breadcrumb-item href=\"/\">Home</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/admin\">Admin</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/admin/users\">Users</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/admin/users/roles\">Roles</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/admin/users/roles/editor\">Editor</aui-breadcrumb-item>\n  <aui-breadcrumb-item>Permissions</aui-breadcrumb-item>\n</aui-breadcrumb>"
+        },
+        {
+          "description": "max-depth=\"2\" collapses middle items into ellipsis (click to expand)",
+          "html": "<aui-breadcrumb max-depth=\"2\">\n  <aui-breadcrumb-item href=\"/\">Home</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/workspace\">Workspace</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/workspace/projects\">Projects</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/workspace/projects/agent-ui\">Agent UI</aui-breadcrumb-item>\n  <aui-breadcrumb-item href=\"/workspace/projects/agent-ui/components\">Components</aui-breadcrumb-item>\n  <aui-breadcrumb-item>Breadcrumb</aui-breadcrumb-item>\n</aui-breadcrumb>"
         }
       ]
     },
@@ -1982,9 +2010,10 @@
             "sm",
             "md",
             "lg",
-            "xl"
+            "xl",
+            "fill"
           ],
-          "description": "Controls dimensions, typography, icon size, and spacing simultaneously. Swaps 7 tokens at once.\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",
@@ -2128,7 +2157,18 @@
       "modifiers": {
         "hide-label": {
           "syntax": "boolean",
-          "description": "Hides the label text and collapses the button to icon-only. Square button sized to --aui-size. Removes inline padding. Use with a slotted icon, icon-leading, or the icon attribute.\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",
+          "values": [
+            "half",
+            "sm",
+            "md",
+            "lg",
+            "full"
+          ],
+          "description": "Percentage-based icon sizing within fill-mode buttons (size=\"fill\"). Maps to 50%, 62.5%, 75%, 87.5%, 100% respectively.\n"
         },
         "text": {
           "syntax": "key-value",
@@ -2376,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": [
         {
@@ -2783,8 +2824,8 @@
         "format": {
           "syntax": "key-value",
           "type": "string",
-          "default": "YYYY-MM-DD",
-          "description": "Display format for the selected date (e.g. MM/DD/YYYY)."
+          "default": "medium",
+          "description": "Display format for the selected date. Named presets use Intl.DateTimeFormat: \"long\" (March 21, 2026), \"medium\" (Mar 21, 2026), \"short\" (03/21/2026). Token-based formats also supported: YYYY-MM-DD, MM/DD/YYYY, etc.\n"
         }
       },
       "modifiers": {
@@ -3599,7 +3640,7 @@
         },
         {
           "description": "Chip with leading icon",
-          "html": "<aui-chip>\n  <aui-icon name=\"tag\" size=\"xs\"></aui-icon>\n  Label\n</aui-chip>\n\n<!-- ===============================================================\n     GROUP -- row of chips\n     =============================================================== -->"
+          "html": "<aui-chip>\n  <aui-icon name=\"star\" size=\"xs\"></aui-icon>\n  Label\n</aui-chip>\n\n<!-- ===============================================================\n     GROUP -- row of chips\n     =============================================================== -->"
         },
         {
           "description": "Row of tag chips",
@@ -4164,24 +4205,28 @@
       },
       "examples": [
         {
-          "description": "Basic color picker with initial blue value (hex input)",
+          "description": "Basic color picker with hex input (blue)",
           "html": "<aui-color-picker value=\"#3b82f6\"></aui-color-picker>"
         },
         {
           "description": "Color picker with OKLCH input",
-          "html": "<aui-color-picker value=\"oklch(0.65 0.2 250)\"></aui-color-picker>"
+          "html": "<aui-color-picker value=\"oklch(0.65 0.2 250)\"></aui-color-picker>\n\n<!-- ===============================================================\n     ALPHA\n     =============================================================== -->"
         },
         {
-          "description": "Color picker with alpha transparency slider",
-          "html": "<aui-color-picker value=\"oklch(0.65 0.2 15 / 0.8)\" alpha></aui-color-picker>"
+          "description": "Color picker with alpha slider row visible",
+          "html": "<aui-color-picker value=\"oklch(0.65 0.2 15 / 0.8)\" alpha></aui-color-picker>\n\n<!-- ===============================================================\n     HEX OUTPUT FORMAT\n     =============================================================== -->"
         },
         {
-          "description": "Color picker with hex format output",
-          "html": "<aui-color-picker value=\"#10b981\" format=\"hex\"></aui-color-picker>"
+          "description": "Color picker serializing value as hex",
+          "html": "<aui-color-picker value=\"#10b981\" format=\"hex\"></aui-color-picker>\n\n<!-- ===============================================================\n     DISABLED\n     =============================================================== -->"
         },
         {
           "description": "Disabled color picker",
-          "html": "<aui-color-picker value=\"#10b981\" disabled></aui-color-picker>"
+          "html": "<aui-color-picker value=\"#10b981\" disabled></aui-color-picker>\n\n<!-- ===============================================================\n     MULTIPLE PICKERS\n     =============================================================== -->"
+        },
+        {
+          "description": "Two pickers side by side for comparison",
+          "html": "<div style=\"display: flex; gap: 2rem;\">\n  <aui-color-picker value=\"oklch(0.7 0.25 145)\"></aui-color-picker>\n  <aui-color-picker value=\"oklch(0.55 0.22 300)\" alpha></aui-color-picker>\n</div>"
         }
       ]
     },
@@ -4333,15 +4378,15 @@
         },
         {
           "description": "Full-width hue slider",
-          "html": "<aui-color-slider channel=\"hue\" value=\"200\" lightness=\"0.65\" chroma=\"0.15\" style=\"width: 100%;\"></aui-color-slider>\n\n<!-- ===============================================================\n     DISABLED\n     =============================================================== -->"
+          "html": "<aui-color-slider channel=\"hue\" value=\"200\" lightness=\"0.65\" chroma=\"0.15\" width=\"full\"></aui-color-slider>\n\n<!-- ===============================================================\n     DISABLED\n     =============================================================== -->"
         },
         {
           "description": "Disabled hue slider",
           "html": "<aui-color-slider channel=\"hue\" value=\"250\" lightness=\"0.65\" chroma=\"0.15\" disabled></aui-color-slider>\n\n<!-- ===============================================================\n     GROUP -- all channels together\n     =============================================================== -->"
         },
         {
-          "description": "All four channel sliders together",
-          "html": "<aui-stack gap=\"3\">\n  <aui-color-slider channel=\"hue\" value=\"250\" lightness=\"0.65\" chroma=\"0.2\" style=\"width: 100%;\"></aui-color-slider>\n  <aui-color-slider channel=\"chroma\" value=\"0.2\" hue=\"250\" lightness=\"0.65\" style=\"width: 100%;\"></aui-color-slider>\n  <aui-color-slider channel=\"lightness\" value=\"0.65\" hue=\"250\" chroma=\"0.2\" style=\"width: 100%;\"></aui-color-slider>\n  <aui-color-slider channel=\"alpha\" value=\"1\" hue=\"250\" chroma=\"0.2\" lightness=\"0.65\" style=\"width: 100%;\"></aui-color-slider>\n</aui-stack>"
+          "description": "All four OKLCH channel sliders together",
+          "html": "<aui-stack gap=\"3\" style=\"min-width: 20rem;\">\n  <aui-color-slider channel=\"hue\" value=\"250\" lightness=\"0.65\" chroma=\"0.2\" width=\"full\"></aui-color-slider>\n  <aui-color-slider channel=\"chroma\" value=\"0.2\" hue=\"250\" lightness=\"0.65\" width=\"full\"></aui-color-slider>\n  <aui-color-slider channel=\"lightness\" value=\"0.65\" hue=\"250\" chroma=\"0.2\" width=\"full\"></aui-color-slider>\n  <aui-color-slider channel=\"alpha\" value=\"1\" hue=\"250\" chroma=\"0.2\" lightness=\"0.65\" width=\"full\"></aui-color-slider>\n</aui-stack>"
         }
       ]
     },
@@ -4899,10 +4944,11 @@
           "values": [
             "widget",
             "card",
-            "panel"
+            "panel",
+            "popover"
           ],
           "default": "card",
-          "description": "Sets the padding and gap scale for all children. widget: 0.75rem (compact, 1/6–1/4 page). card: 1rem (default, 1/4–1/3 page). panel: 1.75rem (spacious, 1/3–3/4 page, modals).\n"
+          "description": "Sets the padding and gap scale for all children. widget: 0.75rem (compact). card: 1rem (default). panel: 1.25rem (spacious). popover: 0.75rem with modal background, shadow, border, and auto-computed border-radius (radius + padding) so inner content corners don't clip.\n"
         },
         "href": {
           "syntax": "key-value",
@@ -7577,7 +7623,7 @@
       "examples": [
         {
           "description": "Full size scale",
-          "html": "<aui-stack gap=\"3\">\n  <aui-heading size=\"2xl\">Heading 2XL — Page title</aui-heading>\n  <aui-heading size=\"xl\">Heading XL — Section title</aui-heading>\n  <aui-heading size=\"lg\">Heading LG — Card title</aui-heading>\n  <aui-heading size=\"md\">Heading MD — List item name</aui-heading>\n  <aui-heading size=\"sm\">Heading SM — Label</aui-heading>\n</aui-stack>"
+          "html": "<aui-stack gap=\"3\">\n  <aui-heading size=\"6xl\">Heading 6XL — Hero</aui-heading>\n  <aui-heading size=\"5xl\">Heading 5XL — Display</aui-heading>\n  <aui-heading size=\"4xl\">Heading 4XL — Landing</aui-heading>\n  <aui-heading size=\"3xl\">Heading 3XL — Page hero</aui-heading>\n  <aui-heading size=\"2xl\">Heading 2XL — Page title</aui-heading>\n  <aui-heading size=\"xl\">Heading XL — Section title</aui-heading>\n  <aui-heading size=\"lg\">Heading LG — Card title</aui-heading>\n  <aui-heading size=\"md\">Heading MD — List item name</aui-heading>\n  <aui-heading size=\"sm\">Heading SM — Label</aui-heading>\n</aui-stack>"
         },
         {
           "description": "Weight variants",
@@ -8296,11 +8342,11 @@
         },
         {
           "description": "Input with leading icon",
-          "html": "<aui-input placeholder=\"Search\">\n  <span slot=\"leading\">🔍</span>\n</aui-input>"
+          "html": "<aui-input placeholder=\"Search\" icon-leading=\"magnifying-glass\"></aui-input>"
         },
         {
           "description": "Input with leading and trailing icons",
-          "html": "<aui-input type=\"email\" placeholder=\"Email\">\n  <span slot=\"leading\">✉</span>\n  <span slot=\"trailing\">✓</span>\n</aui-input>"
+          "html": "<aui-input type=\"email\" placeholder=\"Email\" icon-leading=\"envelope\" icon-trailing=\"check\"></aui-input>"
         },
         {
           "description": "Input inside a labeled field",
@@ -8325,6 +8371,22 @@
         {
           "description": "Search input inside a field",
           "html": "<aui-field label=\"Filter\">\n  <aui-input type=\"search\" placeholder=\"Filter items...\" width=\"full\"></aui-input>\n</aui-field>"
+        },
+        {
+          "description": "Input with text prefix (currency)",
+          "html": "<aui-input placeholder=\"0.00\" prefix=\"$\"></aui-input>"
+        },
+        {
+          "description": "Input with text suffix (unit)",
+          "html": "<aui-input placeholder=\"Weight\" suffix=\"kg\"></aui-input>"
+        },
+        {
+          "description": "Input with both prefix and suffix (URL)",
+          "html": "<aui-input placeholder=\"example\" prefix=\"https://\" suffix=\".com\"></aui-input>"
+        },
+        {
+          "description": "Number input with stepper",
+          "html": "<aui-input type=\"number\" value=\"5\" min=\"0\" max=\"100\" step=\"1\"></aui-input>"
         }
       ]
     },
@@ -8734,24 +8796,16 @@
       },
       "examples": [
         {
-          "description": "Default accent meter at 45%",
-          "html": "<aui-meter value=\"45\"></aui-meter>"
+          "description": "Labeled meters with values",
+          "html": "<aui-stack gap=\"4\">\n  <aui-stack gap=\"2\">\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-text size=\"sm\" spacer>CPU Usage</aui-text>\n      <aui-text size=\"sm\" strong>45%</aui-text>\n    </aui-stack>\n    <aui-meter value=\"45\" size=\"lg\"></aui-meter>\n  </aui-stack>\n\n  <aui-stack gap=\"2\">\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-text size=\"sm\" spacer>Memory</aui-text>\n      <aui-text size=\"sm\" strong>75%</aui-text>\n    </aui-stack>\n    <aui-meter value=\"75\" size=\"lg\" warning></aui-meter>\n  </aui-stack>\n\n  <aui-stack gap=\"2\">\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-text size=\"sm\" spacer>Disk</aui-text>\n      <aui-text size=\"sm\" strong>95%</aui-text>\n    </aui-stack>\n    <aui-meter value=\"95\" size=\"lg\" danger></aui-meter>\n  </aui-stack>\n</aui-stack>"
         },
         {
-          "description": "Warning meter at 75%",
-          "html": "<aui-meter value=\"75\" warning></aui-meter>"
+          "description": "Size comparison",
+          "html": "<aui-stack gap=\"3\">\n  <aui-meter value=\"60\" size=\"sm\" success></aui-meter>\n  <aui-meter value=\"60\"></aui-meter>\n  <aui-meter value=\"60\" size=\"lg\"></aui-meter>\n</aui-stack>"
         },
         {
-          "description": "Danger meter at 95%",
-          "html": "<aui-meter value=\"95\" danger></aui-meter>"
-        },
-        {
-          "description": "Three sizes with different values",
-          "html": "<aui-stack gap=\"3\">\n  <aui-meter value=\"30\" size=\"sm\"></aui-meter>\n  <aui-meter value=\"60\"></aui-meter>\n  <aui-meter value=\"85\" size=\"lg\" warning></aui-meter>\n</aui-stack>"
-        },
-        {
-          "description": "Meter with context labels in a row",
-          "html": "<aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n  <aui-text size=\"xs\" muted>Disk usage</aui-text>\n  <aui-meter value=\"82\" warning style=\"flex: 1\"></aui-meter>\n  <aui-text size=\"xs\" muted>82%</aui-text>\n</aui-stack>"
+          "description": "Custom range (min/max)",
+          "html": "<aui-stack gap=\"2\">\n  <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n    <aui-text size=\"sm\" spacer>Temperature</aui-text>\n    <aui-text size=\"sm\" strong>72°F</aui-text>\n  </aui-stack>\n  <aui-meter value=\"72\" min=\"32\" max=\"120\" size=\"lg\"></aui-meter>\n</aui-stack>"
         }
       ]
     },
@@ -8833,19 +8887,19 @@
         },
         {
           "description": "Nav item with leading icon",
-          "html": "<aui-nav-item>\n  <aui-icon name=\"home\"></aui-icon>\n  Dashboard\n</aui-nav-item>"
+          "html": "<aui-nav-item>\n  <aui-icon name=\"house\"></aui-icon>\n  Dashboard\n</aui-nav-item>"
         },
         {
           "description": "Active nav item with icon",
-          "html": "<aui-nav-item active>\n  <aui-icon name=\"settings\"></aui-icon>\n  Settings\n</aui-nav-item>"
+          "html": "<aui-nav-item active>\n  <aui-icon name=\"gear\"></aui-icon>\n  Settings\n</aui-nav-item>"
         },
         {
           "description": "Navigation list with mixed states",
-          "html": "<aui-stack gap=\"1\">\n  <aui-nav-item active>\n    <aui-icon name=\"home\"></aui-icon>\n    Dashboard\n  </aui-nav-item>\n  <aui-nav-item>\n    <aui-icon name=\"file-text\"></aui-icon>\n    Documents\n  </aui-nav-item>\n  <aui-nav-item>\n    <aui-icon name=\"users\"></aui-icon>\n    Team\n  </aui-nav-item>\n  <aui-nav-item>\n    <aui-icon name=\"settings\"></aui-icon>\n    Settings\n  </aui-nav-item>\n  <aui-nav-item disabled>\n    <aui-icon name=\"lock\"></aui-icon>\n    Admin\n  </aui-nav-item>\n</aui-stack>"
+          "html": "<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>\n    <aui-icon name=\"file-text\"></aui-icon>\n    Documents\n  </aui-nav-item>\n  <aui-nav-item>\n    <aui-icon name=\"users-three\"></aui-icon>\n    Team\n  </aui-nav-item>\n  <aui-nav-item>\n    <aui-icon name=\"gear\"></aui-icon>\n    Settings\n  </aui-nav-item>\n  <aui-nav-item disabled>\n    <aui-icon name=\"warning\"></aui-icon>\n    Admin\n  </aui-nav-item>\n</aui-stack>"
         },
         {
           "description": "Nav item with trailing badge",
-          "html": "<aui-nav-item>\n  <aui-icon name=\"inbox\"></aui-icon>\n  Inbox\n  <aui-badge>12</aui-badge>\n</aui-nav-item>"
+          "html": "<aui-nav-item>\n  <aui-icon name=\"envelope\"></aui-icon>\n  Inbox\n  <aui-badge>12</aui-badge>\n</aui-nav-item>"
         }
       ]
     },
@@ -11723,6 +11777,176 @@
         }
       ]
     },
+    {
+      "name": "aui-stat",
+      "tag": "aui-stat",
+      "type": "component",
+      "summary": "Stat display with label, value, trend indicator, and optional animation.",
+      "description": "Displays a metric with label, formatted value, and optional trend arrow. Stamps three internal spans: [data-stat-label], [data-stat-value], [data-stat-change]. Supports count-up and character-scramble animations with configurable duration. Value formatting preserves prefixes, suffixes, commas, and decimals. Intent attributes (accent, success, warning, danger) color the value.\n",
+      "base": "AgentElement",
+      "presentational": {
+        "intent": {
+          "syntax": "boolean",
+          "exclusive": true,
+          "cascades": false,
+          "default": "neutral",
+          "values": [
+            "accent",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "description": "Colors the stat value text. Default is ink-strong (neutral).\n"
+        }
+      },
+      "attributes": {
+        "label": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Stat label text shown above the value."
+        },
+        "value": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Formatted stat value (e.g. \"$1,234.56\", \"89%\", \"12.4K\"). Preserves prefix, suffix, commas, and decimals during animation.\n"
+        },
+        "trend": {
+          "syntax": "key-value",
+          "type": "enum",
+          "values": [
+            "up",
+            "down",
+            "neutral"
+          ],
+          "default": "",
+          "description": "Trend direction. \"up\" shows a green up-arrow, \"down\" shows a red down-arrow, \"neutral\" shows muted text with no arrow.\n"
+        },
+        "change": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "",
+          "description": "Change description text (e.g. \"+12.5%\", \"-3 units\"). Displayed next to the trend arrow.\n"
+        },
+        "animate-count": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "Enables count-up animation from animate-count-start to the target value. Uses ease-out cubic easing.\n"
+        },
+        "animate-count-start": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "0",
+          "description": "Starting value for count-up animation. Can include prefix/suffix matching the value format.\n"
+        },
+        "animate-scramble": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "Enables character-scramble animation. Digit characters randomize and resolve left-to-right. Non-digit characters pass through unchanged.\n"
+        },
+        "duration-ms": {
+          "syntax": "key-value",
+          "type": "string",
+          "default": "2000",
+          "description": "Animation duration in milliseconds for both animate-count and animate-scramble.\n"
+        }
+      },
+      "content": {
+        "model": "block",
+        "accepts": [
+          "aui-sparkline"
+        ],
+        "required": false,
+        "description": "Optional aui-sparkline child for inline chart below the stat value.\n"
+      },
+      "composition": {
+        "parents": [
+          "aui-container",
+          "aui-inset",
+          "aui-stack",
+          "aui-grid",
+          "div"
+        ],
+        "children": [
+          "aui-sparkline"
+        ],
+        "context": "Typically placed inside aui-container kind=\"widget\" for KPI cards. Multiple stats in a grid for dashboard layouts.\n"
+      },
+      "tokens": [
+        {
+          "name": "font-size (label)",
+          "default": "var(--aui-font-xs)",
+          "description": "Label font size."
+        },
+        {
+          "name": "font-size (value)",
+          "default": "var(--aui-font-2xl)",
+          "description": "Value font size."
+        },
+        {
+          "name": "font-size (change)",
+          "default": "var(--aui-font-xs)",
+          "description": "Change text font size."
+        }
+      ],
+      "examples": [
+        {
+          "description": "Basic stat with label and value",
+          "html": "<aui-stat label=\"Total Users\" value=\"12,450\"></aui-stat>\n\n<!-- ===============================================================\n     TREND -- up/down/neutral\n     =============================================================== -->"
+        },
+        {
+          "description": "Upward trend stat",
+          "html": "<aui-stat label=\"Revenue\" value=\"$48,200\" trend=\"up\" change=\"+12.5%\"></aui-stat>"
+        },
+        {
+          "description": "Downward trend stat",
+          "html": "<aui-stat label=\"Churn Rate\" value=\"3.2%\" trend=\"down\" change=\"-0.8%\"></aui-stat>"
+        },
+        {
+          "description": "Neutral trend stat",
+          "html": "<aui-stat label=\"Active Sessions\" value=\"1,234\" trend=\"neutral\" change=\"0%\"></aui-stat>\n\n<!-- ===============================================================\n     INTENT VARIANTS\n     =============================================================== -->"
+        },
+        {
+          "description": "Success intent stat",
+          "html": "<aui-stat label=\"Uptime\" value=\"99.9%\" success trend=\"up\" change=\"+0.1%\"></aui-stat>"
+        },
+        {
+          "description": "Danger intent stat",
+          "html": "<aui-stat label=\"Error Rate\" value=\"4.7%\" danger trend=\"up\" change=\"+2.1%\"></aui-stat>\n\n<!-- ===============================================================\n     WITH SPARKLINE\n     =============================================================== -->"
+        },
+        {
+          "description": "Stat with inline sparkline",
+          "html": "<aui-stat label=\"Weekly Revenue\" value=\"$12,450\" trend=\"up\" change=\"+12%\">\n  <aui-sparkline values=\"3,5,4,7,6,8,9,11\" color=\"1\"></aui-sparkline>\n</aui-stat>\n\n<!-- ===============================================================\n     GROUP -- row of stats\n     =============================================================== -->"
+        },
+        {
+          "description": "Row of KPI stats in a grid",
+          "html": "<aui-grid cols=\"4\" gap=\"4\">\n  <aui-stat label=\"Revenue\" value=\"$48,200\" trend=\"up\" change=\"+12.5%\"></aui-stat>\n  <aui-stat label=\"Users\" value=\"12,450\" trend=\"up\" change=\"+8.2%\"></aui-stat>\n  <aui-stat label=\"Orders\" value=\"1,234\" trend=\"down\" change=\"-3.1%\"></aui-stat>\n  <aui-stat label=\"Conversion\" value=\"3.2%\" trend=\"neutral\" change=\"0%\"></aui-stat>\n</aui-grid>\n\n<!-- ===============================================================\n     ANIMATE COUNT -- smooth count-up animation\n     =============================================================== -->"
+        },
+        {
+          "description": "Count-up from 0 to $48,200 over 2s",
+          "html": "<aui-stat label=\"Revenue\" value=\"$48,200\" animate-count></aui-stat>"
+        },
+        {
+          "description": "Count-up from 5,000 to 12,450 over 3s",
+          "html": "<aui-stat label=\"Users\" value=\"12,450\" animate-count animate-count-start=\"5000\" duration-ms=\"3000\" trend=\"up\" change=\"+8.2%\"></aui-stat>"
+        },
+        {
+          "description": "Count-up percentage",
+          "html": "<aui-stat label=\"Conversion\" value=\"87.3%\" animate-count duration-ms=\"1500\"></aui-stat>\n\n<!-- ===============================================================\n     ANIMATE SCRAMBLE -- character scramble reveal\n     =============================================================== -->"
+        },
+        {
+          "description": "Scramble reveal of a revenue figure",
+          "html": "<aui-stat label=\"Total Sales\" value=\"$2,847,200\" animate-scramble duration-ms=\"2500\"></aui-stat>"
+        },
+        {
+          "description": "Scramble reveal of a percentage",
+          "html": "<aui-stat label=\"Accuracy\" value=\"99.7%\" animate-scramble></aui-stat>"
+        }
+      ]
+    },
     {
       "name": "aui-step",
       "tag": "aui-step",
@@ -11842,15 +12066,15 @@
       "examples": [
         {
           "description": "Vertical stepper with done, running, and pending steps",
-          "html": "<aui-stepper>\n  <aui-step state=\"done\">\n    <aui-badge success>1</aui-badge>\n    <aui-stack gap=\"1\">\n      <aui-text weight=\"medium\">Account created</aui-text>\n      <aui-text muted size=\"xs\">Email verified</aui-text>\n    </aui-stack>\n  </aui-step>\n  <aui-step state=\"running\">\n    <aui-badge accent>2</aui-badge>\n    <aui-stack gap=\"1\">\n      <aui-text weight=\"medium\">Profile setup</aui-text>\n      <aui-text muted size=\"xs\">Add your details</aui-text>\n    </aui-stack>\n  </aui-step>\n  <aui-step>\n    <aui-badge>3</aui-badge>\n    <aui-stack gap=\"1\">\n      <aui-text weight=\"medium\">Complete</aui-text>\n      <aui-text muted size=\"xs\">Ready to go</aui-text>\n    </aui-stack>\n  </aui-step>\n</aui-stepper>"
+          "html": "<aui-stepper>\n  <aui-step state=\"done\">\n    <aui-avatar size=\"xs\" success solid><aui-icon name=\"check\"></aui-icon></aui-avatar>\n    <aui-stack gap=\"1\">\n      <aui-heading size=\"sm\">Account created</aui-heading>\n      <aui-text muted size=\"xs\">Email verified</aui-text>\n    </aui-stack>\n  </aui-step>\n  <aui-step state=\"running\">\n    <aui-avatar size=\"xs\" accent solid><aui-icon name=\"circle-notch\"></aui-icon></aui-avatar>\n    <aui-stack gap=\"1\">\n      <aui-heading size=\"sm\">Profile setup</aui-heading>\n      <aui-text muted size=\"xs\">Add your details</aui-text>\n    </aui-stack>\n  </aui-step>\n  <aui-step>\n    <aui-avatar size=\"xs\" style=\"background: var(--aui-neutral-highest);\">3</aui-avatar>\n    <aui-stack gap=\"1\">\n      <aui-heading size=\"sm\">Complete</aui-heading>\n      <aui-text muted size=\"xs\">Ready to go</aui-text>\n    </aui-stack>\n  </aui-step>\n</aui-stepper>"
         },
         {
           "description": "All steps completed",
-          "html": "<aui-stepper>\n  <aui-step completed>\n    <aui-badge success>1</aui-badge>\n    <aui-text weight=\"medium\">Order placed</aui-text>\n  </aui-step>\n  <aui-step completed>\n    <aui-badge success>2</aui-badge>\n    <aui-text weight=\"medium\">Payment confirmed</aui-text>\n  </aui-step>\n  <aui-step completed>\n    <aui-badge success>3</aui-badge>\n    <aui-text weight=\"medium\">Shipped</aui-text>\n  </aui-step>\n</aui-stepper>"
+          "html": "<aui-stepper>\n  <aui-step state=\"done\">\n    <aui-avatar size=\"xs\" success solid><aui-icon name=\"check\"></aui-icon></aui-avatar>\n    <aui-heading size=\"sm\">Order placed</aui-heading>\n  </aui-step>\n  <aui-step state=\"done\">\n    <aui-avatar size=\"xs\" success solid><aui-icon name=\"check\"></aui-icon></aui-avatar>\n    <aui-heading size=\"sm\">Payment confirmed</aui-heading>\n  </aui-step>\n  <aui-step state=\"done\">\n    <aui-avatar size=\"xs\" success solid><aui-icon name=\"check\"></aui-icon></aui-avatar>\n    <aui-heading size=\"sm\">Shipped</aui-heading>\n  </aui-step>\n</aui-stepper>"
         },
         {
           "description": "Stepper with error state",
-          "html": "<aui-stepper>\n  <aui-step completed>\n    <aui-badge success>1</aui-badge>\n    <aui-text>Build</aui-text>\n  </aui-step>\n  <aui-step error>\n    <aui-badge danger>2</aui-badge>\n    <aui-text>Deploy</aui-text>\n  </aui-step>\n  <aui-step>\n    <aui-badge>3</aui-badge>\n    <aui-text>Verify</aui-text>\n  </aui-step>\n</aui-stepper>"
+          "html": "<aui-stepper>\n  <aui-step state=\"done\">\n    <aui-avatar size=\"xs\" success solid><aui-icon name=\"check\"></aui-icon></aui-avatar>\n    <aui-heading size=\"sm\">Build</aui-heading>\n  </aui-step>\n  <aui-step state=\"running\">\n    <aui-avatar size=\"xs\" danger solid><aui-icon name=\"warning\"></aui-icon></aui-avatar>\n    <aui-heading size=\"sm\">Deploy</aui-heading>\n  </aui-step>\n  <aui-step>\n    <aui-avatar size=\"xs\" style=\"background: var(--aui-neutral-highest);\">3</aui-avatar>\n    <aui-heading size=\"sm\">Verify</aui-heading>\n  </aui-step>\n</aui-stepper>"
         }
       ]
     },
@@ -13230,8 +13454,8 @@
       "name": "aui-time-field",
       "tag": "aui-time-field",
       "type": "component",
-      "summary": "Segmented time input with independently editable hour and minute segments.",
-      "description": "A time entry control where hour and minute (and optional AM/PM) are separate focusable segments. Each segment supports arrow-key increment/decrement, direct digit entry with auto-advance, and Tab/Arrow navigation between segments. Supports 12h and 24h formats with configurable minute step. No native form elements.\n",
+      "summary": "Segmented time input with independently editable hour, minute, and optional seconds segments.",
+      "description": "A time entry control where hour, minute, and optional seconds (via show-seconds) are separate focusable segments. Each segment supports arrow-key increment/decrement, direct digit entry with auto-advance, and Tab/Arrow navigation between segments. Supports 12h and 24h formats with configurable minute step. No native form elements.\n",
       "base": "AgentElement",
       "attributes": {
         "value": {
@@ -13264,6 +13488,12 @@
           "default": "24h",
           "description": "Display format (12h or 24h)."
         },
+        "show-seconds": {
+          "syntax": "boolean",
+          "type": "boolean",
+          "default": false,
+          "description": "Adds a seconds segment (HH:MM:SS). When enabled, value includes seconds and the committed format is HH:MM:SS.\n"
+        },
         "placeholder": {
           "syntax": "key-value",
           "type": "string",
@@ -13395,7 +13625,19 @@
         },
         {
           "description": "Start and end time fields",
-          "html": "<aui-stack direction=\"row\" gap=\"3\">\n  <aui-field label=\"Start\">\n    <aui-time-field value=\"09:00\"></aui-time-field>\n  </aui-field>\n  <aui-field label=\"End\">\n    <aui-time-field value=\"17:00\"></aui-time-field>\n  </aui-field>\n</aui-stack>"
+          "html": "<aui-stack direction=\"row\" gap=\"3\">\n  <aui-field label=\"Start\">\n    <aui-time-field value=\"09:00\"></aui-time-field>\n  </aui-field>\n  <aui-field label=\"End\">\n    <aui-time-field value=\"17:00\"></aui-time-field>\n  </aui-field>\n</aui-stack>\n\n<!-- ===============================================================\n     WITH SECONDS\n     =============================================================== -->"
+        },
+        {
+          "description": "24h time with seconds",
+          "html": "<aui-time-field value=\"14:30:45\" show-seconds></aui-time-field>"
+        },
+        {
+          "description": "12h time with seconds",
+          "html": "<aui-time-field value=\"09:15:30\" format=\"12h\" show-seconds></aui-time-field>"
+        },
+        {
+          "description": "Live clock — updates every second",
+          "html": "<aui-field label=\"Current time (live)\">\n  <aui-time-field id=\"live-clock\" show-seconds></aui-time-field>\n</aui-field>\n<script>\n  requestAnimationFrame(function tick() {\n    const el = document.getElementById('live-clock')\n    if (el) {\n      const now = new Date()\n      el.setAttribute('value',\n        String(now.getHours()).padStart(2,'0') + ':' +\n        String(now.getMinutes()).padStart(2,'0') + ':' +\n        String(now.getSeconds()).padStart(2,'0')\n      )\n    }\n    requestAnimationFrame(tick)\n  })\n</script>"
         }
       ]
     },
@@ -16160,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",
@@ -16189,81 +16478,71 @@
       "kind": "panel",
       "examples": [
         {
-          "html": "<aui-agent-panel panel-title=\"Design Assistant\" max-width=\"xl\" style=\"height: 32rem;\">\n  <aui-header dividers>\n    <span slot=\"leading\">\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-avatar square>AI</aui-avatar>\n        <aui-stack gap=\"0\">\n          <aui-heading size=\"sm\">Design Assistant</aui-heading>\n          <aui-text muted size=\"xs\">Claude 3.5 Sonnet</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </span>\n    <aui-badge accent slot=\"trailing\">Online</aui-badge>\n  </aui-header>\n  <aui-agent-feed auto-scroll scrollable>\n    <aui-agent-thread role=\"user\" sender=\"You\">\n      <aui-agent-message role=\"user\">\n        <aui-agent-text format=\"plain\">How should I structure the color system for a component library?</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>I recommend a three-layer approach:\n\n        1. **Primitives** — raw OKLCH values organized by hue family\n        2. **Semantic tokens** — purpose-driven aliases like `--ink`, `--fill`, `--border`\n        3. **Component tokens** — scoped overrides like `--button-bg`, `--card-border`\n\n        This gives you theme-ability at layer 1, consistency at layer 2, and precision at layer 3.</aui-agent-text>\n      </aui-agent-message>\n      <aui-agent-message role=\"assistant\">\n        <aui-agent-text>Want me to draft a token file for your palette?</aui-agent-text>\n      </aui-agent-message>\n    </aui-agent-thread>\n    <aui-agent-thread role=\"user\" sender=\"You\">\n      <aui-agent-message role=\"user\">\n        <aui-agent-text format=\"plain\">Yes, use OKLCH with a blue accent.</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\" status=\"streaming\">\n        <aui-agent-activity type=\"thinking\" active></aui-agent-activity>\n      </aui-agent-message>\n    </aui-agent-thread>\n  </aui-agent-feed>\n  <aui-agent-input>\n    <aui-agent-prompt>\n      <aui-textarea placeholder=\"Ask a follow-up question...\"></aui-textarea>\n    </aui-agent-prompt>\n  </aui-agent-input>\n  <aui-agent-seeds options='[{\"value\":\"tokens\",\"label\":\"Generate token file\"},{\"value\":\"themes\",\"label\":\"Add dark theme\"},{\"value\":\"chart\",\"label\":\"Chart palette\"}]'></aui-agent-seeds>\n</aui-agent-panel>\n",
-          "description": "Full chat interface with multi-turn conversation, thinking indicator, and suggestion chips."
+          "description": "Full chat interface with multi-turn conversation, thinking indicator, and suggestion chips",
+          "html": "<aui-agent-panel panel-title=\"Design Assistant\" max-width=\"xl\" style=\"height: 32rem;\">\n  <aui-header dividers>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-avatar square>AI</aui-avatar>\n      <aui-stack gap=\"0\" spacer>\n        <aui-heading size=\"sm\">Design Assistant</aui-heading>\n        <aui-text muted size=\"xs\">Claude Sonnet 4</aui-text>\n      </aui-stack>\n      <aui-badge accent>Online</aui-badge>\n    </aui-stack>\n  </aui-header>\n  <aui-agent-feed auto-scroll scrollable>\n    <aui-agent-thread role=\"user\" sender=\"You\">\n      <aui-agent-message role=\"user\">\n        <aui-agent-text format=\"plain\">How should I structure the color system for a component library?</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>I recommend a three-layer approach:\n\n        1. **Primitives** — raw OKLCH values organized by hue family\n        2. **Semantic tokens** — purpose-driven aliases like `--ink`, `--fill`, `--border`\n        3. **Component tokens** — scoped overrides like `--button-bg`, `--card-border`\n\n        This gives you theme-ability at layer 1, consistency at layer 2, and precision at layer 3.</aui-agent-text>\n      </aui-agent-message>\n      <aui-agent-message role=\"assistant\">\n        <aui-agent-text>Want me to draft a token file for your palette?</aui-agent-text>\n      </aui-agent-message>\n    </aui-agent-thread>\n    <aui-agent-thread role=\"user\" sender=\"You\">\n      <aui-agent-message role=\"user\">\n        <aui-agent-text format=\"plain\">Yes, use OKLCH with a blue accent.</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\" status=\"streaming\">\n        <aui-agent-activity type=\"thinking\" active></aui-agent-activity>\n      </aui-agent-message>\n    </aui-agent-thread>\n  </aui-agent-feed>\n  <aui-agent-input>\n    <aui-agent-prompt>\n      <aui-textarea placeholder=\"Ask a follow-up question...\"></aui-textarea>\n    </aui-agent-prompt>\n  </aui-agent-input>\n  <aui-agent-seeds options='[{\"value\":\"tokens\",\"label\":\"Generate token file\"},{\"value\":\"themes\",\"label\":\"Add dark theme\"},{\"value\":\"chart\",\"label\":\"Chart palette\"}]'></aui-agent-seeds>\n</aui-agent-panel>"
         },
         {
-          "html": "<aui-agent-panel panel-title=\"Code Review\" max-width=\"xl\" style=\"height: 28rem;\">\n  <aui-header dividers>\n    <span slot=\"leading\">\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-avatar square>C</aui-avatar>\n        <aui-heading size=\"sm\">Code Review</aui-heading>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-agent-feed auto-scroll scrollable>\n    <aui-agent-thread role=\"assistant\" sender=\"Claude\">\n      <aui-avatar>C</aui-avatar>\n      <aui-agent-message role=\"assistant\">\n        <aui-agent-text>I've analyzed your pull request. Here's what I found:\n\n        **2 issues**, **1 suggestion**, **0 blockers**\n\n        ### Issue 1: Memory leak in useSubscription\n\n        The useEffect cleanup doesn't unsubscribe from the WebSocket channel. This will cause duplicate listeners on hot reload.\n\n        ### Issue 2: Missing error boundary\n\n        The Dashboard component catches render errors but doesn't report them to your monitoring service.\n\n        ### Suggestion\n\n        Consider extracting the polling logic into a custom usePolling hook — it's duplicated in 3 files.</aui-agent-text>\n      </aui-agent-message>\n    </aui-agent-thread>\n  </aui-agent-feed>\n  <aui-agent-input>\n    <aui-agent-prompt>\n      <aui-textarea placeholder=\"Ask about the review...\"></aui-textarea>\n    </aui-agent-prompt>\n  </aui-agent-input>\n</aui-agent-panel>\n",
-          "description": "Code review chat with structured markdown feedback."
+          "description": "Code review chat with structured markdown feedback",
+          "html": "<aui-agent-panel panel-title=\"Code Review\" max-width=\"xl\" style=\"height: 28rem;\">\n  <aui-header dividers>\n    <span slot=\"leading\">\n      <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n        <aui-avatar square>C</aui-avatar>\n        <aui-heading size=\"sm\">Code Review</aui-heading>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-agent-feed auto-scroll scrollable>\n    <aui-agent-thread role=\"assistant\" sender=\"Claude\">\n      <aui-avatar>C</aui-avatar>\n      <aui-agent-message role=\"assistant\">\n        <aui-agent-text>I've analyzed your pull request. Here's what I found:\n\n        **2 issues**, **1 suggestion**, **0 blockers**\n\n        ### Issue 1: Memory leak in useSubscription\n\n        The useEffect cleanup doesn't unsubscribe from the WebSocket channel. This will cause duplicate listeners on hot reload.\n\n        ### Issue 2: Missing error boundary\n\n        The Dashboard component catches render errors but doesn't report them to your monitoring service.\n\n        ### Suggestion\n\n        Consider extracting the polling logic into a custom usePolling hook — it's duplicated in 3 files.</aui-agent-text>\n      </aui-agent-message>\n    </aui-agent-thread>\n  </aui-agent-feed>\n  <aui-agent-input>\n    <aui-agent-prompt>\n      <aui-textarea placeholder=\"Ask about the review...\"></aui-textarea>\n    </aui-agent-prompt>\n  </aui-agent-input>\n</aui-agent-panel>"
         }
       ]
     },
     {
-      "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": [
         {
-          "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>\n",
-          "description": "Deprecation announcement with gradient image placeholder and warning badge."
+          "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",
-      "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"
-      ]
-    },
-    {
-      "name": "chart-activity",
+      "name": "agent-code-result",
       "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": "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-content",
-        "aui-inset",
         "aui-stack",
         "aui-heading",
-        "aui-text"
+        "aui-text",
+        "aui-avatar",
+        "aui-icon",
+        "aui-badge",
+        "aui-copy-button",
+        "aui-code"
       ],
-      "kind": "card",
+      "kind": "widget",
       "examples": [
         {
-          "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>\n",
-          "description": "Weekly activity bars with day labels showing fitness load."
+          "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-card",
+      "name": "agent-context-panel",
       "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": "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",
@@ -16272,116 +16551,143 @@
         "aui-inset",
         "aui-stack",
         "aui-heading",
-        "aui-text"
+        "aui-text",
+        "aui-avatar",
+        "aui-icon",
+        "aui-button",
+        "aui-progress",
+        "aui-divider"
       ],
       "kind": "card",
       "examples": [
         {
-          "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\" spacer style=\"min-height: 8rem;\">\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>\n",
-          "description": "Simple 6-month visitor bar chart with trend footer."
+          "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-donut",
+      "name": "agent-feedback-controls",
       "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": "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-badge"
+        "aui-button",
+        "aui-copy-button",
+        "aui-button-group",
+        "aui-dropdown-menu",
+        "aui-option",
+        "aui-divider"
       ],
-      "kind": "card",
+      "kind": "widget",
       "examples": [
         {
-          "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 gap=\"4\" 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 end\n              Seg1 (60%): draw = 143.26 - 2 = 141.26  offset = 0\n              Seg2 (20%): draw =  47.75 - 2 =  45.75  offset = 238.76 - 143.26 = 95.5\n              Seg3 (20%): draw =  47.75 - 2 =  45.75  offset = 238.76 - 191.01 = 47.75\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=\"95.5\"  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=\"47.75\" 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 style=\"width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--aui-chart-1); flex-shrink: 0;\"></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 style=\"width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--aui-chart-2); flex-shrink: 0;\"></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 style=\"width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--aui-chart-3); flex-shrink: 0;\"></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 style=\"width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--aui-chart-4); flex-shrink: 0;\"></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 style=\"width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--aui-chart-5); flex-shrink: 0;\"></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>\n",
-          "description": "Donut chart showing browser share with Firefox selected."
+          "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-grouped",
+      "name": "agent-follow-up-chips",
       "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": "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-button",
+        "aui-button-group",
+        "aui-divider"
       ],
-      "kind": "card",
+      "kind": "widget",
       "examples": [
         {
-          "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=\"min-height: 9rem;\">\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>\n",
-          "description": "Grouped bars with category labels below, Desktop at 60% opacity and Mobile at full opacity."
+          "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-horizontal",
+      "name": "agent-model-selector",
       "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": "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": [
         {
-          "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>\n",
-          "description": "Horizontal bar chart comparing browser market share with proportional bars."
+          "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-interactive",
+      "name": "agent-prompt-input",
       "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": "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-textarea",
+        "aui-chip",
+        "aui-icon",
+        "aui-text",
+        "aui-button"
+      ],
+      "kind": "widget",
+      "examples": [
+        {
+          "description": "Chat composer with file attachment chips, expandable textarea, and toolbar with send button.",
+          "html": "<aui-container kind=\"widget\" bordered max-width=\"lg\">\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": "agent-streaming-message",
+      "type": "block",
+      "summary": "Agent streaming response with identity row, prose + code block mid-stream, and stop button.",
+      "description": "A chat message being actively generated. Identity row has an accent solid avatar, assistant name heading with spacer, \"Generating\" accent badge, elapsed time in mono font, and a ghost hide-label stop button (icon-leading=\"stop\") — all in the same header row. Content interleaves prose text with a mid-stream aui-code-block (with language attribute). No separate stop button below; it lives in the identity row.\n",
+      "components": [
         "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": [
         {
-          "html": "<aui-container kind=\"card\" bordered>\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Total Visitors</aui-heading>\n        <aui-text muted size=\"sm\">Last 3 months</aui-text>\n      </aui-stack>\n    </span>\n    <span slot=\"trailing\">\n      <aui-stack direction=\"row\" gap=\"4\">\n        <aui-stat label=\"Desktop\" value=\"24,828\"></aui-stat>\n        <aui-stat label=\"Mobile\" value=\"25,010\"></aui-stat>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"min-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>\n",
-          "description": "Wide dashboard chart with stat tabs and 12-bar dense visualization."
+          "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",
@@ -16390,137 +16696,162 @@
         "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": [
         {
-          "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=\"min-height: 8rem;\">\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>\n",
-          "description": "Labeled bar chart with value labels row, bar row, and month labels row."
+          "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": [
         {
-          "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 gap=\"6\">\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\">\n            <aui-input width=\"full\" placeholder=\"1234 5678 9012 3456\"></aui-input>\n          </aui-field>\n          <aui-field label=\"CVV\" grow=\"1\">\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 scrim grow=\"1\">Cancel</aui-button>\n      <aui-button primary grow=\"1\">Submit Payment</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>\n",
-          "description": "Payment form with card details, billing address toggle, comments, and submit/cancel actions."
+          "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": "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": [
         {
-          "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\" style=\"text-decoration: underline; cursor: pointer;\">+ 810 contributors</aui-text></span>\n  </aui-footer>\n</aui-container>\n",
-          "description": "Contributors avatar group with count badge and overflow link."
+          "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": "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": [
         {
-          "html": "<aui-stack direction=\"row\" gap=\"0\" style=\"min-height: 28rem;\">\n  <!-- Sidebar -->\n  <aui-container kind=\"card\" elevation=\"2\" style=\"width: 14rem; flex-shrink: 0;\">\n    <aui-header>\n      <span slot=\"leading\"><aui-avatar square size=\"sm\"><img src=\"/icon.svg\" alt=\"Acme Inc\"></aui-avatar></span>\n      <span slot=\"content\"><aui-heading size=\"md\" weight=\"medium\">Acme Inc</aui-heading></span>\n    </aui-header>\n    <aui-content>\n      <aui-inset>\n        <aui-stack gap=\"2\">\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=\"user\"></aui-icon>\n            Team\n          </aui-nav-item>\n          <aui-nav-item muted>\n            <aui-icon name=\"gear\"></aui-icon>\n            Settings\n          </aui-nav-item>\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\">\n          <aui-avatar size=\"sm\">AJ</aui-avatar>\n          <aui-stack gap=\"0\" spacer>\n            <aui-text size=\"sm\" weight=\"medium\">Alice Johnson</aui-text>\n            <aui-text muted size=\"xs\">alice@acme.com</aui-text>\n          </aui-stack>\n        </aui-stack>\n      </span>\n    </aui-footer>\n  </aui-container>\n\n  <!-- Main -->\n  <aui-stack gap=\"0\" spacer>\n    <!-- Page header -->\n    <aui-header style=\"padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--aui-border-muted);\">\n      <span slot=\"leading\">\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"xl\">Dashboard</aui-heading>\n          <aui-text muted size=\"sm\">Welcome back, Alice. Here's what's happening today.</aui-text>\n        </aui-stack>\n      </span>\n    </aui-header>\n\n    <!-- Content -->\n    <aui-stack gap=\"3\" style=\"padding: 1.5rem;\">\n      <aui-wrap gap=\"3\">\n        <aui-container kind=\"widget\" bordered spacer style=\"min-width: 11rem;\">\n          <aui-inset>\n            <aui-stat label=\"Revenue\" value=\"$24,500\" trend=\"up\" change=\"+12%\"></aui-stat>\n          </aui-inset>\n        </aui-container>\n        <aui-container kind=\"widget\" bordered spacer style=\"min-width: 11rem;\">\n          <aui-inset>\n            <aui-stat label=\"Active Users\" value=\"1,240\" trend=\"up\" change=\"+8%\"></aui-stat>\n          </aui-inset>\n        </aui-container>\n        <aui-container kind=\"widget\" bordered spacer style=\"min-width: 11rem;\">\n          <aui-inset>\n            <aui-stat label=\"Open Tasks\" value=\"17\" change=\"3 overdue\"></aui-stat>\n          </aui-inset>\n        </aui-container>\n      </aui-wrap>\n\n      <!-- Placeholder for table/chart area -->\n      <aui-container kind=\"card\" bordered style=\"min-height: 10rem;\">\n        <aui-inset>\n          <aui-stack gap=\"1\" align-items=\"center\" text=\"center\" style=\"padding: 2rem 0;\">\n            <aui-icon name=\"star\" size=\"3xl\" muted></aui-icon>\n            <aui-text muted size=\"sm\">Charts and tables will appear here.</aui-text>\n          </aui-stack>\n        </aui-inset>\n      </aui-container>\n    </aui-stack>\n  </aui-stack>\n</aui-stack>\n",
-          "description": "Full dashboard shell with sidebar, page header, aui-stat widgets, and content placeholder."
+          "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": "data-eng-dag",
+      "name": "bpm-process",
       "type": "block",
-      "summary": "Airflow-style data engineering DAG with medallion architecture and quality gates.",
-      "description": "A visual directed acyclic graph representing a modern data engineering pipeline. Ingests from S3, Kafka, PostgreSQL CDC, and REST APIs through schema validation, deduplication, and PII scrubbing into a Bronze/Silver/Gold medallion lakehouse architecture with quality checks, aggregation, and BI dashboard refresh.\n",
+      "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",
@@ -16529,67 +16860,111 @@
         "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": "date-picker",
+      "name": "chart-activity",
       "type": "block",
-      "summary": "Calendar date picker inside a bordered card.",
-      "description": "A date selection card wrapping the aui-calendar component. Shows the calendar with a card surface and border for visual containment. Use as a standalone picker or compose inside dialogs, popovers, or form layouts. Supports single selection and range mode.\n",
+      "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",
-        "aui-calendar"
+        "aui-text"
       ],
       "kind": "card",
       "examples": [
         {
-          "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\">Select a date</aui-heading>\n        <aui-text muted size=\"sm\">Choose your preferred appointment date.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-calendar></aui-calendar>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
-          "description": "Calendar picker inside a card with header context."
+          "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": "ddx-workflow",
+      "name": "chart-card",
       "type": "block",
-      "summary": "Clinical differential diagnosis workflow with Bayesian reasoning and feedback loops.",
-      "description": "A visual node graph representing a clinical DDx decision process. Starts with patient intake, branches into symptom collection and medical history, then flows through hypothesis generation, Bayesian evidence updates, targeted testing, and pruning with feedback loops for continuous monitoring and specialist consultation.\n",
+      "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-graph-ui",
-        "aui-graph-layer",
-        "aui-graph-node",
-        "aui-graph-noodle",
-        "aui-graph-port"
+        "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": "empty-state",
+      "name": "chart-grouped",
       "type": "block",
-      "summary": "Centered placeholder for empty content areas with a call-to-action.",
-      "description": "A card shown when a section has no data to display. Centered layout with a large muted icon, heading, descriptive text, and a primary action button to guide the user toward their first step. Use this to replace blank space in lists, tables, or dashboards so users always have a clear path forward.\n",
+      "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-empty-state",
-        "aui-button"
+        "aui-header",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-empty-state icon=\"star\" 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>Create project</aui-button>\n  </aui-empty-state>\n</aui-container>\n",
-          "description": "Empty state prompting the user to create their first project."
+          "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": "env-variables",
+      "name": "chart-horizontal",
       "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": "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",
@@ -16598,106 +16973,822 @@
         "aui-inset",
         "aui-stack",
         "aui-heading",
-        "aui-text",
-        "aui-input",
-        "aui-button",
-        "aui-button-group"
+        "aui-text"
       ],
       "kind": "card",
       "examples": [
         {
-          "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\" style=\"padding: 0.5rem 0.75rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);\">\n          <aui-text size=\"sm\" weight=\"medium\" spacer style=\"font-family: var(--aui-font-family-mono);\">DATABASE_URL</aui-text>\n          <aui-text muted size=\"sm\" style=\"font-family: var(--aui-font-family-mono); letter-spacing: 0.1em;\">········</aui-text>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.5rem 0.75rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);\">\n          <aui-text size=\"sm\" weight=\"medium\" spacer style=\"font-family: var(--aui-font-family-mono);\">NEXT_PUBLIC_API</aui-text>\n          <aui-text muted size=\"sm\" style=\"font-family: var(--aui-font-family-mono);\">https://api.example.com</aui-text>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.5rem 0.75rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);\">\n          <aui-text size=\"sm\" weight=\"medium\" spacer style=\"font-family: var(--aui-font-family-mono);\">STRIPE_SECRET</aui-text>\n          <aui-text muted size=\"sm\" style=\"font-family: var(--aui-font-family-mono); letter-spacing: 0.1em;\">········</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\"><aui-button outline size=\"sm\">Edit</aui-button></span>\n    <span slot=\"trailing\"><aui-button primary accent size=\"sm\">Deploy</aui-button></span>\n  </aui-footer>\n</aui-container>\n",
-          "description": "Environment variables panel with masked secrets and deploy action."
+          "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": "feature-upgrade",
+      "name": "chart-interactive",
       "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": "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-avatar",
+        "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.",
+          "html": "<aui-stack direction=\"row\" gap=\"0\" style=\"min-height: 28rem;\">\n  <!-- Sidebar -->\n  <aui-container kind=\"card\" elevation=\"2\" shrink=\"0\" style=\"width: 14rem;\">\n    <aui-header>\n      <span slot=\"leading\"><aui-avatar square size=\"sm\"><img src=\"/icon.svg\" alt=\"Acme Inc\"></aui-avatar></span>\n      <span slot=\"content\"><aui-heading size=\"md\" weight=\"medium\">Acme Inc</aui-heading></span>\n    </aui-header>\n    <aui-content>\n      <aui-inset>\n        <aui-stack gap=\"2\">\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=\"user\"></aui-icon>\n            Team\n          </aui-nav-item>\n          <aui-nav-item muted>\n            <aui-icon name=\"gear\"></aui-icon>\n            Settings\n          </aui-nav-item>\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\">\n          <aui-avatar size=\"sm\">AJ</aui-avatar>\n          <aui-stack gap=\"0\" spacer>\n            <aui-text size=\"sm\" weight=\"medium\">Alice Johnson</aui-text>\n            <aui-text muted size=\"xs\">alice@acme.com</aui-text>\n          </aui-stack>\n        </aui-stack>\n      </span>\n    </aui-footer>\n  </aui-container>\n\n  <!-- Main -->\n  <aui-stack gap=\"0\" spacer>\n    <!-- Page header -->\n    <aui-header class=\"aui-dashboard-layout-page-header\">\n      <span slot=\"leading\">\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"xl\">Dashboard</aui-heading>\n          <aui-text muted size=\"sm\">Welcome back, Alice. Here's what's happening today.</aui-text>\n        </aui-stack>\n      </span>\n    </aui-header>\n\n    <!-- Content -->\n    <aui-stack padding=\"6\">\n      <aui-wrap gap=\"3\">\n        <aui-container kind=\"widget\" bordered spacer min-width=\"11\">\n          <aui-inset>\n            <aui-stat label=\"Revenue\" value=\"$24,500\" trend=\"up\" change=\"+12%\"></aui-stat>\n          </aui-inset>\n        </aui-container>\n        <aui-container kind=\"widget\" bordered spacer min-width=\"11\">\n          <aui-inset>\n            <aui-stat label=\"Active Users\" value=\"1,240\" trend=\"up\" change=\"+8%\"></aui-stat>\n          </aui-inset>\n        </aui-container>\n        <aui-container kind=\"widget\" bordered spacer min-width=\"11\">\n          <aui-inset>\n            <aui-stat label=\"Open Tasks\" value=\"17\" change=\"3 overdue\"></aui-stat>\n          </aui-inset>\n        </aui-container>\n      </aui-wrap>\n\n      <!-- Placeholder for table/chart area -->\n      <aui-container kind=\"card\" bordered style=\"min-height: 10rem;\">\n        <aui-inset>\n          <aui-stack gap=\"1\" align-items=\"center\" text=\"center\" style=\"padding: 2rem 0;\">\n            <aui-icon name=\"star\" size=\"3xl\" muted></aui-icon>\n            <aui-text muted size=\"sm\">Charts and tables will appear here.</aui-text>\n          </aui-stack>\n        </aui-inset>\n      </aui-container>\n    </aui-stack>\n  </aui-stack>\n</aui-stack>"
+        }
+      ]
+    },
+    {
+      "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",
+      "summary": "Airflow-style data engineering DAG with medallion architecture and quality gates.",
+      "description": "A visual directed acyclic graph representing a modern data engineering pipeline. Ingests from S3, Kafka, PostgreSQL CDC, and REST APIs through schema validation, deduplication, and PII scrubbing into a Bronze/Silver/Gold medallion lakehouse architecture with quality checks, aggregation, and BI dashboard refresh.\n",
+      "components": [
+        "aui-container",
+        "aui-text",
+        "aui-graph-ui",
+        "aui-graph-layer",
+        "aui-graph-node",
+        "aui-graph-noodle",
+        "aui-graph-port"
+      ],
+      "examples": [
+        {
+          "description": "Airflow-style data engineering DAG with medallion architecture and quality gates.",
+          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 39rem; min-width: 89rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- S3 Raw Bucket → Schema Validator -->\n    <aui-graph-noodle from=\"de-s3-raw:right\" to=\"de-schema-val:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Kafka Stream → Schema Validator -->\n    <aui-graph-noodle from=\"de-kafka:right\" to=\"de-schema-val:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Kafka Stream → Deduplication -->\n    <aui-graph-noodle from=\"de-kafka:right\" to=\"de-dedup:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- PostgreSQL CDC → Deduplication -->\n    <aui-graph-noodle from=\"de-postgres:right\" to=\"de-dedup:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- PostgreSQL CDC → PII Scrubber -->\n    <aui-graph-noodle from=\"de-postgres:right\" to=\"de-pii:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- REST API Ingest → PII Scrubber -->\n    <aui-graph-noodle from=\"de-api-ingest:right\" to=\"de-pii:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Schema Validator → Bronze Layer -->\n    <aui-graph-noodle from=\"de-schema-val:right\" to=\"de-bronze:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Deduplication → Bronze Layer -->\n    <aui-graph-noodle from=\"de-dedup:right\" to=\"de-bronze:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- PII Scrubber → Bronze Layer -->\n    <aui-graph-noodle from=\"de-pii:right\" to=\"de-bronze:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Bronze Layer → Spark Cleaning Job -->\n    <aui-graph-noodle from=\"de-bronze:right\" to=\"de-spark-clean:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Bronze Layer → dbt Transform Models -->\n    <aui-graph-noodle from=\"de-bronze:right\" to=\"de-dbt-models:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Bronze Layer → Great Expectations QA -->\n    <aui-graph-noodle from=\"de-bronze:right\" to=\"de-quality:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Spark Cleaning Job → Silver Layer -->\n    <aui-graph-noodle from=\"de-spark-clean:right\" to=\"de-silver:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- dbt Transform Models → Silver Layer -->\n    <aui-graph-noodle from=\"de-dbt-models:right\" to=\"de-silver:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Great Expectations QA → Pipeline Alert -->\n    <aui-graph-noodle from=\"de-quality:bottom\" to=\"de-alert:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Great Expectations QA → Silver Layer -->\n    <aui-graph-noodle from=\"de-quality:right\" to=\"de-silver:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Silver Layer → Aggregation Engine -->\n    <aui-graph-noodle from=\"de-silver:bottom\" to=\"de-agg:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Silver Layer → Gold Layer -->\n    <aui-graph-noodle from=\"de-silver:right\" to=\"de-gold:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Aggregation Engine → Data Warehouse Sync -->\n    <aui-graph-noodle from=\"de-agg:right\" to=\"de-warehouse:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Gold Layer → Data Warehouse Sync -->\n    <aui-graph-noodle from=\"de-gold:bottom\" to=\"de-warehouse:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Data Warehouse Sync → BI Dashboard Refresh -->\n    <aui-graph-noodle from=\"de-warehouse:bottom\" to=\"de-dashboard:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- S3 Raw Bucket -->\n    <aui-graph-node x=\"24\" y=\"46\" node-id=\"de-s3-raw\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">S3 Raw Bucket</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    <!-- Kafka Stream -->\n    <aui-graph-node x=\"24\" y=\"186\" node-id=\"de-kafka\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Kafka Stream</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    <!-- PostgreSQL CDC -->\n    <aui-graph-node x=\"24\" y=\"326\" node-id=\"de-postgres\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">PostgreSQL CDC</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    <!-- REST API Ingest -->\n    <aui-graph-node x=\"24\" y=\"466\" node-id=\"de-api-ingest\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">REST API Ingest</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    <!-- Schema Validator -->\n    <aui-graph-node x=\"260\" y=\"116\" node-id=\"de-schema-val\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Schema Validator</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    <!-- Deduplication -->\n    <aui-graph-node x=\"260\" y=\"256\" node-id=\"de-dedup\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Deduplication</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    <!-- PII Scrubber -->\n    <aui-graph-node x=\"260\" y=\"396\" node-id=\"de-pii\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">PII Scrubber</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    <!-- Bronze Layer (Iceberg) -->\n    <aui-graph-node x=\"500\" y=\"186\" node-id=\"de-bronze\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Bronze Layer (Iceberg)</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    <!-- Spark Cleaning Job -->\n    <aui-graph-node x=\"740\" y=\"116\" node-id=\"de-spark-clean\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Spark Cleaning Job</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    <!-- dbt Transform Models -->\n    <aui-graph-node x=\"740\" y=\"256\" node-id=\"de-dbt-models\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">dbt Transform Models</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    <!-- Great Expectations QA -->\n    <aui-graph-node x=\"740\" y=\"396\" node-id=\"de-quality\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Great Expectations QA</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    <!-- Silver Layer -->\n    <aui-graph-node x=\"980\" y=\"186\" node-id=\"de-silver\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Silver Layer</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    <!-- Aggregation Engine -->\n    <aui-graph-node x=\"980\" y=\"326\" node-id=\"de-agg\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Aggregation 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    <!-- Gold Layer (Analytics) -->\n    <aui-graph-node x=\"1220\" y=\"116\" node-id=\"de-gold\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Gold Layer (Analytics)</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    <!-- Data Warehouse Sync -->\n    <aui-graph-node x=\"1220\" y=\"256\" node-id=\"de-warehouse\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Data Warehouse Sync</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    <!-- BI Dashboard Refresh -->\n    <aui-graph-node x=\"1220\" y=\"396\" node-id=\"de-dashboard\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">BI Dashboard Refresh</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    <!-- Pipeline Alert -->\n    <aui-graph-node x=\"980\" y=\"466\" node-id=\"de-alert\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Pipeline Alert</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": "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",
+      "summary": "Calendar date picker inside a bordered card.",
+      "description": "A date selection card wrapping the aui-calendar component. Shows the calendar with a card surface and border for visual containment. Use as a standalone picker or compose inside dialogs, popovers, or form layouts. Supports single selection and range mode.\n",
+      "components": [
+        "aui-container",
+        "aui-inset",
+        "aui-stack",
+        "aui-heading",
+        "aui-text",
+        "aui-calendar"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Calendar date picker inside a bordered card.",
+          "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\">Select a date</aui-heading>\n        <aui-text muted size=\"sm\">Choose your preferred appointment date.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-calendar></aui-calendar>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "name": "ddx-workflow",
+      "type": "block",
+      "summary": "Clinical differential diagnosis workflow with Bayesian reasoning and feedback loops.",
+      "description": "A visual node graph representing a clinical DDx decision process. Starts with patient intake, branches into symptom collection and medical history, then flows through hypothesis generation, Bayesian evidence updates, targeted testing, and pruning with feedback loops for continuous monitoring and specialist consultation.\n",
+      "components": [
+        "aui-container",
+        "aui-text",
+        "aui-graph-ui",
+        "aui-graph-layer",
+        "aui-graph-node",
+        "aui-graph-noodle",
+        "aui-graph-port"
+      ],
+      "examples": [
+        {
+          "description": "Clinical differential diagnosis workflow with Bayesian reasoning and feedback loops.",
+          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 35rem; min-width: 89rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- Patient Intake → Symptom Collection -->\n    <aui-graph-noodle from=\"dx-intake:right\" to=\"dx-symptoms:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Patient Intake → Medical History Review -->\n    <aui-graph-noodle from=\"dx-intake:right\" to=\"dx-history:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Symptom Collection → Hypothesis Generator -->\n    <aui-graph-noodle from=\"dx-symptoms:right\" to=\"dx-hypothesis:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Medical History Review → Hypothesis Generator -->\n    <aui-graph-noodle from=\"dx-history:right\" to=\"dx-hypothesis:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Hypothesis Generator → Bayesian Evidence Update -->\n    <aui-graph-noodle from=\"dx-hypothesis:right\" to=\"dx-bayesian:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Hypothesis Generator → Diagnostic Gap Analysis -->\n    <aui-graph-noodle from=\"dx-hypothesis:right\" to=\"dx-gap:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Bayesian Evidence Update → Targeted Testing -->\n    <aui-graph-noodle from=\"dx-bayesian:right\" to=\"dx-test:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Diagnostic Gap Analysis → Targeted Testing -->\n    <aui-graph-noodle from=\"dx-gap:right\" to=\"dx-test:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Targeted Testing → Hypothesis Pruning -->\n    <aui-graph-noodle from=\"dx-test:right\" to=\"dx-prune:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Hypothesis Pruning → Diagnostic Confirmation -->\n    <aui-graph-noodle from=\"dx-prune:right\" to=\"dx-confirm:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Hypothesis Pruning → Bayesian Evidence Update (feedback loop) -->\n    <aui-graph-noodle from=\"dx-prune:top\" to=\"dx-bayesian:bottom\" color=\"warning\" weight=\"2\"></aui-graph-noodle>\n    <!-- Diagnostic Confirmation → Treatment Pathway -->\n    <aui-graph-noodle from=\"dx-confirm:bottom\" to=\"dx-treatment:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Treatment Pathway → Continuous Monitoring -->\n    <aui-graph-noodle from=\"dx-treatment:right\" to=\"dx-monitor:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Continuous Monitoring → Hypothesis Generator (feedback loop) -->\n    <aui-graph-noodle from=\"dx-monitor:bottom\" to=\"dx-hypothesis:bottom\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Hypothesis Generator → Lab Results Engine -->\n    <aui-graph-noodle from=\"dx-hypothesis:bottom\" to=\"dx-lab:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Lab Results Engine → Imaging Analysis -->\n    <aui-graph-noodle from=\"dx-lab:right\" to=\"dx-imaging:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Imaging Analysis → Specialist Consult -->\n    <aui-graph-noodle from=\"dx-imaging:right\" to=\"dx-specialist:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Specialist Consult → Hypothesis Pruning -->\n    <aui-graph-noodle from=\"dx-specialist:top\" to=\"dx-prune:bottom\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Treatment Pathway → Pharmacy Reconciliation -->\n    <aui-graph-noodle from=\"dx-treatment:bottom\" to=\"dx-pharmacy:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- Patient Intake -->\n    <aui-graph-node x=\"24\" y=\"186\" node-id=\"dx-intake\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Patient Intake</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    <!-- Symptom Collection -->\n    <aui-graph-node x=\"224\" y=\"116\" node-id=\"dx-symptoms\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Symptom Collection</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    <!-- Medical History Review -->\n    <aui-graph-node x=\"224\" y=\"256\" node-id=\"dx-history\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Medical History 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    <!-- Hypothesis Generator -->\n    <aui-graph-node x=\"424\" y=\"186\" node-id=\"dx-hypothesis\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Hypothesis Generator</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    <!-- Bayesian Evidence Update -->\n    <aui-graph-node x=\"624\" y=\"116\" node-id=\"dx-bayesian\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Bayesian Evidence Update</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    <!-- Diagnostic Gap Analysis -->\n    <aui-graph-node x=\"624\" y=\"256\" node-id=\"dx-gap\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Diagnostic Gap 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    <!-- Targeted Testing -->\n    <aui-graph-node x=\"824\" y=\"116\" node-id=\"dx-test\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Targeted Testing</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    <!-- Hypothesis Pruning -->\n    <aui-graph-node x=\"824\" y=\"256\" node-id=\"dx-prune\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Hypothesis Pruning</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    <!-- Diagnostic Confirmation -->\n    <aui-graph-node x=\"1024\" y=\"116\" node-id=\"dx-confirm\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Diagnostic Confirmation</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 Pathway -->\n    <aui-graph-node x=\"1024\" y=\"256\" node-id=\"dx-treatment\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Treatment Pathway</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    <!-- Continuous Monitoring -->\n    <aui-graph-node x=\"1224\" y=\"186\" node-id=\"dx-monitor\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Continuous Monitoring</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    <!-- Lab Results Engine -->\n    <aui-graph-node x=\"424\" y=\"396\" node-id=\"dx-lab\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Lab Results 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    <!-- Imaging Analysis -->\n    <aui-graph-node x=\"624\" y=\"396\" node-id=\"dx-imaging\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Imaging 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    <!-- Specialist Consult -->\n    <aui-graph-node x=\"824\" y=\"396\" node-id=\"dx-specialist\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Specialist Consult</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    <!-- Pharmacy Reconciliation -->\n    <aui-graph-node x=\"1224\" y=\"396\" node-id=\"dx-pharmacy\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Pharmacy Reconciliation</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": "empty-state",
+      "type": "block",
+      "summary": "Centered placeholder for empty content areas with a call-to-action.",
+      "description": "A card shown when a section has no data to display. Centered layout with a large muted icon, heading, descriptive text, and a primary action button to guide the user toward their first step. Use this to replace blank space in lists, tables, or dashboards so users always have a clear path forward.\n",
+      "components": [
+        "aui-container",
+        "aui-empty-state",
+        "aui-button"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "description": "Centered placeholder for empty content areas with a call-to-action.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-empty-state icon=\"star\" 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>Create project</aui-button>\n  </aui-empty-state>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "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": "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",
+        "aui-content",
+        "aui-footer",
+        "aui-inset",
+        "aui-stack",
+        "aui-grid",
+        "aui-heading",
+        "aui-text",
+        "aui-badge",
+        "aui-button"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "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": "game-chess",
+      "type": "block",
+      "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"
+      ],
+      "kind": "card",
+      "examples": [
+        {
+          "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": "game-connect-four",
+      "type": "block",
+      "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-badge",
-        "aui-button",
-        "aui-button-group"
+        "aui-button"
       ],
       "kind": "card",
       "examples": [
         {
-          "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\"><aui-icon name=\"check\"></aui-icon></aui-avatar>\n            <aui-text size=\"sm\"><strong>Code reviews</strong> with full codebase context to catch <strong>hard-to-find</strong> bugs.</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\">\n            <aui-avatar square size=\"sm\"><aui-icon name=\"check\"></aui-icon></aui-avatar>\n            <aui-text size=\"sm\"><strong>Code suggestions</strong> validated in sandboxes before you merge.</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\">\n            <aui-avatar square size=\"sm\"><aui-icon name=\"check\"></aui-icon></aui-avatar>\n            <aui-text size=\"sm\"><strong>Root-cause analysis</strong> for production issues with deployment context. <aui-badge accent>Requires Plus</aui-badge></aui-text>\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 scrim grow=\"1\">Cancel</aui-button>\n      <aui-button primary grow=\"1\">Enable with $100 credits</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>\n",
-          "description": "Feature upgrade card with benefits checklist and trial credit offer."
+          "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": "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"
-      ]
-    },
-    {
-      "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": [
         {
-          "html": "<aui-stack gap=\"2\">\n  <aui-graph-ui style=\"width: 100%; height: 22rem; min-width: 44rem;\" zoom=\"1\">\n    <aui-graph-layer name=\"wires\" type=\"svg\">\n      <aui-graph-noodle from=\"data-ingest:out\" to=\"transform:in\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n      <aui-graph-noodle from=\"data-ingest:out\" to=\"validate:in\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n      <aui-graph-noodle from=\"transform:out\" to=\"data-warehouse:in\" color=\"success\" weight=\"2\"></aui-graph-noodle>\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      <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      <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      <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      <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>\n",
-          "description": "Data pipeline with 4 nodes (Source → Process → QA → Sink) using aui-graph components with draggable nodes and bezier noodle connections.\n"
+          "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>"
         }
       ]
     },
@@ -16714,6 +17805,12 @@
         "aui-graph-node",
         "aui-graph-noodle",
         "aui-graph-port"
+      ],
+      "examples": [
+        {
+          "description": "ComfyUI-style generative AI pipeline with encoders, samplers, and post-processing nodes.",
+          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 39rem; min-width: 89rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- Prompt Encoder → CLIP Text Encoder -->\n    <aui-graph-noodle from=\"ai-prompt:right\" to=\"ai-clip:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Negative Prompt → CLIP Text Encoder -->\n    <aui-graph-noodle from=\"ai-neg-prompt:right\" to=\"ai-clip:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Reference Image → VAE Encoder -->\n    <aui-graph-noodle from=\"ai-ref-image:right\" to=\"ai-vae-enc:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Reference Image → IP-Adapter -->\n    <aui-graph-noodle from=\"ai-ref-image:right\" to=\"ai-ipadapter:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Style Transfer LoRA → LoRA Stack Merge -->\n    <aui-graph-noodle from=\"ai-style:right\" to=\"ai-lora-stack:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- CLIP Text Encoder → KSampler Scheduler -->\n    <aui-graph-noodle from=\"ai-clip:right\" to=\"ai-scheduler:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- CLIP Text Encoder → UNet Backbone -->\n    <aui-graph-noodle from=\"ai-clip:right\" to=\"ai-unet:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- VAE Encoder → ControlNet (Canny) -->\n    <aui-graph-noodle from=\"ai-vae-enc:right\" to=\"ai-controlnet:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- IP-Adapter → UNet Backbone -->\n    <aui-graph-noodle from=\"ai-ipadapter:right\" to=\"ai-unet:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- LoRA Stack Merge → UNet Backbone -->\n    <aui-graph-noodle from=\"ai-lora-stack:top\" to=\"ai-unet:bottom\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- KSampler Scheduler → KSampler -->\n    <aui-graph-noodle from=\"ai-scheduler:right\" to=\"ai-sampler:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- UNet Backbone → KSampler -->\n    <aui-graph-noodle from=\"ai-unet:right\" to=\"ai-sampler:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- ControlNet (Canny) → KSampler -->\n    <aui-graph-noodle from=\"ai-controlnet:right\" to=\"ai-sampler:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- KSampler → SDXL Refiner -->\n    <aui-graph-noodle from=\"ai-sampler:bottom\" to=\"ai-refiner:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- KSampler → VAE Decoder -->\n    <aui-graph-noodle from=\"ai-sampler:right\" to=\"ai-vae-dec:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- SDXL Refiner → VAE Decoder -->\n    <aui-graph-noodle from=\"ai-refiner:right\" to=\"ai-vae-dec:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- VAE Decoder → Upscale -->\n    <aui-graph-noodle from=\"ai-vae-dec:bottom\" to=\"ai-upscale:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- VAE Decoder → Save Image -->\n    <aui-graph-noodle from=\"ai-vae-dec:right\" to=\"ai-output:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Upscale → Face Restore -->\n    <aui-graph-noodle from=\"ai-upscale:bottom\" to=\"ai-face:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Upscale → Save Image -->\n    <aui-graph-noodle from=\"ai-upscale:right\" to=\"ai-output:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Face Restore → Preview Node -->\n    <aui-graph-noodle from=\"ai-face:right\" to=\"ai-preview:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- Prompt Encoder -->\n    <aui-graph-node x=\"24\" y=\"46\" node-id=\"ai-prompt\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Prompt Encoder</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    <!-- Negative Prompt -->\n    <aui-graph-node x=\"24\" y=\"186\" node-id=\"ai-neg-prompt\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Negative Prompt</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    <!-- Reference Image -->\n    <aui-graph-node x=\"24\" y=\"326\" node-id=\"ai-ref-image\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Reference Image</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    <!-- Style Transfer LoRA -->\n    <aui-graph-node x=\"24\" y=\"466\" node-id=\"ai-style\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Style Transfer LoRA</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    <!-- CLIP Text Encoder -->\n    <aui-graph-node x=\"260\" y=\"116\" node-id=\"ai-clip\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">CLIP Text Encoder</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    <!-- VAE Encoder -->\n    <aui-graph-node x=\"260\" y=\"256\" node-id=\"ai-vae-enc\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">VAE Encoder</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    <!-- IP-Adapter -->\n    <aui-graph-node x=\"260\" y=\"396\" node-id=\"ai-ipadapter\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">IP-Adapter</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    <!-- KSampler Scheduler -->\n    <aui-graph-node x=\"500\" y=\"46\" node-id=\"ai-scheduler\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">KSampler Scheduler</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    <!-- UNet Backbone -->\n    <aui-graph-node x=\"500\" y=\"186\" node-id=\"ai-unet\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">UNet Backbone</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    <!-- ControlNet (Canny) -->\n    <aui-graph-node x=\"500\" y=\"326\" node-id=\"ai-controlnet\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">ControlNet (Canny)</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    <!-- KSampler -->\n    <aui-graph-node x=\"740\" y=\"116\" node-id=\"ai-sampler\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">KSampler</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    <!-- SDXL Refiner -->\n    <aui-graph-node x=\"740\" y=\"256\" node-id=\"ai-refiner\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">SDXL Refiner</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    <!-- VAE Decoder -->\n    <aui-graph-node x=\"980\" y=\"116\" node-id=\"ai-vae-dec\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">VAE Decoder</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    <!-- Upscale (4x ESRGAN) -->\n    <aui-graph-node x=\"980\" y=\"256\" node-id=\"ai-upscale\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Upscale (4x ESRGAN)</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    <!-- Face Restore (GFPGAN) -->\n    <aui-graph-node x=\"980\" y=\"396\" node-id=\"ai-face\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Face Restore (GFPGAN)</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    <!-- Save Image -->\n    <aui-graph-node x=\"1220\" y=\"186\" node-id=\"ai-output\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Save Image</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    <!-- Preview Node -->\n    <aui-graph-node x=\"1220\" y=\"396\" node-id=\"ai-preview\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Preview Node</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    <!-- LoRA Stack Merge -->\n    <aui-graph-node x=\"500\" y=\"466\" node-id=\"ai-lora-stack\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">LoRA Stack Merge</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  </aui-graph-layer>\n</aui-graph-ui>"
+        }
       ]
     },
     {
@@ -16731,14 +17828,14 @@
         "aui-text",
         "aui-avatar",
         "aui-chip",
-        "aui-button",
-        "aui-icon"
+        "aui-dropdown-menu",
+        "aui-option"
       ],
       "kind": "card",
       "examples": [
         {
-          "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\">Assign Issue</aui-heading>\n        <aui-text muted size=\"sm\">Select users to assign to this issue.</aui-text>\n      </aui-stack>\n    </span>\n    <span slot=\"trailing\"><aui-button ghost size=\"sm\"><aui-icon name=\"plus\"></aui-icon></aui-button></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-chip removable>\n        <aui-avatar size=\"sm\">AO</aui-avatar>\n        AgentOS\n      </aui-chip>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
-          "description": "Issue assignment with selected user token and add action."
+          "description": "Issue assignment card with user search and selected token chips.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-stack gap=\"1\" spacer>\n        <aui-heading size=\"lg\">Assign Issue</aui-heading>\n        <aui-text muted size=\"sm\">Select users to assign to this issue.</aui-text>\n      </aui-stack>\n      <aui-dropdown-menu label=\"Add assignee\" ghost hide-label size=\"sm\" icon-leading=\"plus\">\n        <aui-option value=\"sarah\">Sarah Chen</aui-option>\n        <aui-option value=\"marcus\">Marcus Rivera</aui-option>\n        <aui-option value=\"priya\">Priya Santos</aui-option>\n        <aui-option value=\"james\">James Wilson</aui-option>\n      </aui-dropdown-menu>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-chip removable>\n        <aui-avatar size=\"sm\">AO</aui-avatar>\n        AgentOS\n      </aui-chip>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
         }
       ]
     },
@@ -16761,8 +17858,36 @@
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-header>\n    <span slot=\"content\"><aui-heading size=\"lg\">Shortcuts</aui-heading></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"0\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-text size=\"sm\" spacer>Search</aui-text>\n          <aui-stack direction=\"row\" gap=\"1\"><aui-kbd>⌘</aui-kbd><aui-kbd>K</aui-kbd></aui-stack>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-text size=\"sm\" spacer>Quick Actions</aui-text>\n          <aui-stack direction=\"row\" gap=\"1\"><aui-kbd>⌘</aui-kbd><aui-kbd>J</aui-kbd></aui-stack>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-text size=\"sm\" spacer>New File</aui-text>\n          <aui-stack direction=\"row\" gap=\"1\"><aui-kbd>⌘</aui-kbd><aui-kbd>N</aui-kbd></aui-stack>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-text size=\"sm\" spacer>Save</aui-text>\n          <aui-stack direction=\"row\" gap=\"1\"><aui-kbd>⌘</aui-kbd><aui-kbd>S</aui-kbd></aui-stack>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-text size=\"sm\" spacer>Toggle Sidebar</aui-text>\n          <aui-stack direction=\"row\" gap=\"1\"><aui-kbd>⌘</aui-kbd><aui-kbd>B</aui-kbd></aui-stack>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
-          "description": "Keyboard shortcuts reference panel."
+          "description": "Panel listing keyboard shortcuts with command names and key combinations.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-header>\n    <span slot=\"content\"><aui-heading size=\"lg\">Shortcuts</aui-heading></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"0\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-text size=\"sm\" spacer>Search</aui-text>\n          <aui-stack direction=\"row\" gap=\"1\"><aui-kbd>⌘</aui-kbd><aui-kbd>K</aui-kbd></aui-stack>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-text size=\"sm\" spacer>Quick Actions</aui-text>\n          <aui-stack direction=\"row\" gap=\"1\"><aui-kbd>⌘</aui-kbd><aui-kbd>J</aui-kbd></aui-stack>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-text size=\"sm\" spacer>New File</aui-text>\n          <aui-stack direction=\"row\" gap=\"1\"><aui-kbd>⌘</aui-kbd><aui-kbd>N</aui-kbd></aui-stack>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-text size=\"sm\" spacer>Save</aui-text>\n          <aui-stack direction=\"row\" gap=\"1\"><aui-kbd>⌘</aui-kbd><aui-kbd>S</aui-kbd></aui-stack>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\" style=\"padding: 0.625rem 0;\">\n          <aui-text size=\"sm\" spacer>Toggle Sidebar</aui-text>\n          <aui-stack direction=\"row\" gap=\"1\"><aui-kbd>⌘</aui-kbd><aui-kbd>B</aui-kbd></aui-stack>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "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>"
         }
       ]
     },
@@ -16789,8 +17914,8 @@
       "kind": "panel",
       "examples": [
         {
-          "html": "<aui-container padding=\"4\" gap=\"0\" transparent>\n  <aui-stack direction=\"row\" gap=\"8\" style=\"min-width: 44rem; min-height: 32rem\">\n    <!-- Left: brand + form -->\n    <aui-container kind=\"panel\" elevation=\"2\" gap=\"0\" spacer>\n      <aui-header>\n        <span slot=\"leading\">\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <img src=\"/icon.svg\" alt=\"Acme Inc\" style=\"width: 1.25rem; height: 1.25rem; border-radius: 0.25rem;\">\n            <aui-heading size=\"md\" weight=\"medium\">Acme Inc.</aui-heading>\n          </aui-stack>\n        </span>\n      </aui-header>\n      <aui-content>\n        <aui-inset>\n          <aui-stack gap=\"6\">\n            <aui-stack gap=\"1\">\n              <aui-heading size=\"xl\">Welcome back</aui-heading>\n              <aui-text muted size=\"sm\">Enter your credentials to access your account</aui-text>\n            </aui-stack>\n\n            <aui-field label=\"Email\" width=\"full\">\n              <aui-input type=\"email\" placeholder=\"m@example.com\" width=\"full\"></aui-input>\n            </aui-field>\n\n            <aui-field label=\"Password\" width=\"full\">\n              <aui-input type=\"password\" placeholder=\"Enter your password\" width=\"full\"></aui-input>\n              <aui-text muted size=\"xs\" slot=\"trailing\" text=\"right\"><a href=\"#\">Forgot your password?</a></aui-text>\n            </aui-field>\n\n            <aui-button primary accent width=\"full\">Login</aui-button>\n\n            <!-- Divider -->\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-divider spacer></aui-divider>\n              <aui-text muted size=\"sm\">Or continue with</aui-text>\n              <aui-divider spacer></aui-divider>\n            </aui-stack>\n\n            <aui-stack gap=\"2\">\n              <aui-button scrim width=\"full\">Login with Apple</aui-button>\n              <aui-button scrim width=\"full\">Login with Google</aui-button>\n            </aui-stack>\n\n            <!-- Terms -->\n            <aui-text muted size=\"xs\" align-items=\"center\" text=\"center\">By clicking continue, you agree to our <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.</aui-text>\n          </aui-stack>\n        </aui-inset>\n      </aui-content>\n      <aui-footer>\n        <span slot=\"content\"><aui-text muted size=\"sm\">Don't have an account? <a href=\"#\">Sign up</a></aui-text></span>\n      </aui-footer>\n    </aui-container>\n\n    <!-- Right: image placeholder -->\n    <aui-container elevation=\"3\" spacer justify-content=\"center\" transparent>\n      <aui-inset>\n        <aui-stack gap=\"1\" align-items=\"center\" text=\"center\">\n          <aui-icon name=\"image\" size=\"xl\" muted></aui-icon>\n          <aui-text muted size=\"sm\">Brand illustration</aui-text>\n        </aui-stack>\n      </aui-inset>\n    </aui-container>\n  </aui-stack>\n</aui-container>\n",
-          "description": "Branded two-column login with form on the left panel and image placeholder on the right."
+          "description": "Two-column login with branded sidebar panel and image placeholder.",
+          "html": "<aui-container padding=\"4\" gap=\"0\" transparent>\n  <aui-stack\n    direction=\"row\"\n    gap=\"8\"\n    min-width=\"44\" style=\"min-height: 32rem\"\n  >\n    <!-- Left: brand + form -->\n    <aui-container kind=\"panel\" elevation=\"2\" gap=\"0\" spacer>\n      <aui-header>\n        <span slot=\"leading\">\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <img\n              src=\"/icon.svg\"\n              alt=\"Acme Inc\"\n              style=\"width: 1.25rem; height: 1.25rem; border-radius: var(--aui-radius)\"\n            />\n            <aui-heading size=\"md\" weight=\"medium\">Acme Inc.</aui-heading>\n          </aui-stack>\n        </span>\n      </aui-header>\n      <aui-content>\n        <aui-inset>\n          <aui-stack>\n            <aui-stack gap=\"1\">\n              <aui-heading size=\"xl\">Welcome back</aui-heading>\n              <aui-text muted size=\"sm\"\n                >Enter your credentials to access your account</aui-text\n              >\n            </aui-stack>\n\n            <aui-field label=\"Email\" width=\"full\">\n              <aui-input\n                type=\"email\"\n                placeholder=\"m@example.com\"\n                width=\"full\"\n              ></aui-input>\n            </aui-field>\n\n            <aui-field label=\"Password\" width=\"full\">\n              <aui-input\n                type=\"password\"\n                placeholder=\"Enter your password\"\n                width=\"full\"\n              ></aui-input>\n              <aui-text muted size=\"xs\" slot=\"trailing\" text=\"right\"\n                ><a href=\"#\">Forgot your password?</a></aui-text\n              >\n            </aui-field>\n\n            <aui-button primary accent width=\"full\">Login</aui-button>\n\n            <!-- Divider -->\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-divider spacer></aui-divider>\n              <aui-text muted size=\"sm\">Or continue with</aui-text>\n              <aui-divider spacer></aui-divider>\n            </aui-stack>\n\n            <aui-stack gap=\"2\">\n              <aui-button scrim width=\"full\">Login with Apple</aui-button>\n              <aui-button scrim width=\"full\">Login with Google</aui-button>\n            </aui-stack>\n\n            <!-- Terms -->\n            <aui-text muted size=\"xs\" align-items=\"center\" text=\"center\">By clicking continue, you agree to our <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.</aui-text>\n          </aui-stack>\n        </aui-inset>\n      </aui-content>\n      <aui-footer>\n        <span slot=\"content\"\n          ><aui-text muted size=\"sm\"\n            >Don't have an account? <a href=\"#\">Sign up</a></aui-text\n          ></span\n        >\n      </aui-footer>\n    </aui-container>\n\n    <!-- Right: image placeholder -->\n    <aui-container\n      elevation=\"3\"\n      spacer\n      justify-content=\"center\"\n      transparent\n    >\n      <aui-inset>\n        <aui-stack\n          gap=\"1\"\n          align-items=\"center\"\n          text=\"center\"\n        >\n          <aui-icon name=\"image\" size=\"3xl\" muted></aui-icon>\n          <aui-text muted size=\"sm\">Brand illustration</aui-text>\n        </aui-stack>\n      </aui-inset>\n    </aui-container>\n  </aui-stack>\n</aui-container>"
         }
       ]
     },
@@ -16811,8 +17936,8 @@
       "kind": "panel",
       "examples": [
         {
-          "html": "<aui-stack gap=\"4\" align-items=\"center\" text=\"center\" max-width=\"md\">\n  <img src=\"/icon.svg\" alt=\"Acme Inc\" style=\"width: 2.5rem; height: 2.5rem; border-radius: 0.375rem;\">\n  <aui-stack gap=\"1\" align-items=\"center\">\n    <aui-heading size=\"xl\">Welcome to Acme Inc.</aui-heading>\n    <aui-text muted size=\"sm\">Don't have an account? <a href=\"#\">Sign up</a></aui-text>\n  </aui-stack>\n\n  <aui-stack gap=\"6\" width=\"full\" text=\"left\">\n    <aui-field label=\"Email\" width=\"full\" hide-label>\n      <aui-input type=\"email\" placeholder=\"m@example.com\" width=\"full\"></aui-input>\n    </aui-field>\n    <aui-button primary accent width=\"full\">Continue</aui-button>\n  </aui-stack>\n\n  <aui-text muted size=\"sm\">Or</aui-text>\n\n  <aui-wrap gap=\"2\" width=\"full\">\n    <aui-button scrim width=\"full\">Continue with Apple</aui-button>\n    <aui-button scrim width=\"full\">Continue with Google</aui-button>\n  </aui-wrap>\n\n  <aui-text muted size=\"xs\">By clicking continue, you agree to our <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.</aui-text>\n</aui-stack>\n",
-          "description": "Minimal email-only login with social alternatives and terms notice."
+          "description": "Minimal centered login with email field and optional social buttons.",
+          "html": "<aui-stack gap=\"4\" align-items=\"center\" text=\"center\" max-width=\"md\">\n  <img src=\"/icon.svg\" alt=\"Acme Inc\" style=\"width: 2.5rem; height: 2.5rem; border-radius: var(--aui-radius);\">\n  <aui-stack gap=\"1\" align-items=\"center\">\n    <aui-heading size=\"xl\">Welcome to Acme Inc.</aui-heading>\n    <aui-text muted size=\"sm\">Don't have an account? <a href=\"#\">Sign up</a></aui-text>\n  </aui-stack>\n\n  <aui-stack width=\"full\" text=\"left\">\n    <aui-field label=\"Email\" width=\"full\" hide-label>\n      <aui-input type=\"email\" placeholder=\"m@example.com\" width=\"full\"></aui-input>\n    </aui-field>\n    <aui-button primary accent width=\"full\">Continue</aui-button>\n  </aui-stack>\n\n  <aui-text muted size=\"sm\">Or</aui-text>\n\n  <aui-wrap gap=\"2\" width=\"full\">\n    <aui-button scrim width=\"full\">Continue with Apple</aui-button>\n    <aui-button scrim width=\"full\">Continue with Google</aui-button>\n  </aui-wrap>\n\n  <aui-text muted size=\"xs\">By clicking continue, you agree to our <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.</aui-text>\n</aui-stack>"
         }
       ]
     },
@@ -16837,8 +17962,8 @@
       "kind": "panel",
       "examples": [
         {
-          "html": "<aui-container kind=\"panel\" bordered max-width=\"md\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"xl\">Sign in to your account</aui-heading>\n        <aui-text muted size=\"sm\">Enter your credentials below to continue.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"6\">\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=\"Enter your password\" width=\"full\"></aui-input>\n          <aui-text muted size=\"xs\" slot=\"trailing\" text=\"right\"><a href=\"#\">Forgot your password?</a></aui-text>\n        </aui-field>\n        <aui-button primary accent width=\"full\">Sign in</aui-button>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"content\"><aui-text muted size=\"sm\">Don't have an account? <a href=\"#\">Sign up</a></aui-text></span>\n  </aui-footer>\n</aui-container>\n",
-          "description": "Login card with email and password fields, forgot-password link, and signup prompt."
+          "description": "Login card with email, password, and forgot-password link.",
+          "html": "<aui-container kind=\"panel\" bordered max-width=\"md\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"xl\">Sign in to your account</aui-heading>\n        <aui-text muted size=\"sm\">Enter your credentials below to continue.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack>\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=\"Enter your password\" width=\"full\"></aui-input>\n          <aui-text muted size=\"xs\" slot=\"trailing\" text=\"right\"><a href=\"#\">Forgot your password?</a></aui-text>\n        </aui-field>\n        <aui-button primary accent width=\"full\">Sign in</aui-button>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"content\"><aui-text muted size=\"sm\">Don't have an account? <a href=\"#\">Sign up</a></aui-text></span>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
@@ -16864,8 +17989,8 @@
       "kind": "panel",
       "examples": [
         {
-          "html": "<aui-container kind=\"panel\" bordered max-width=\"md\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"xl\">Login to your account</aui-heading>\n        <aui-text muted size=\"sm\">Enter your email below to login to your account</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"6\">\n        <aui-field label=\"Email\" width=\"full\">\n          <aui-input type=\"email\" placeholder=\"m@example.com\" width=\"full\"></aui-input>\n        </aui-field>\n\n        <aui-field label=\"Password\" width=\"full\">\n          <aui-input type=\"password\" placeholder=\"Enter your password\" width=\"full\"></aui-input>\n          <aui-text muted size=\"xs\" slot=\"trailing\" text=\"right\"><a href=\"#\">Forgot your password?</a></aui-text>\n        </aui-field>\n\n        <aui-button primary accent width=\"full\">Login</aui-button>\n\n        <!-- Divider -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-divider spacer></aui-divider>\n          <aui-text muted size=\"sm\">Or</aui-text>\n          <aui-divider spacer></aui-divider>\n        </aui-stack>\n\n        <aui-button scrim width=\"full\">Login with Google</aui-button>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"content\"><aui-text muted size=\"sm\">Don't have an account? <a href=\"#\">Sign up</a></aui-text></span>\n  </aui-footer>\n</aui-container>\n",
-          "description": "Simple login card with email, password, forgot-password link, and Google sign-in option."
+          "description": "Simple bordered login card with email, password, and a single social option.",
+          "html": "<aui-container kind=\"panel\" bordered max-width=\"md\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"xl\">Login to your account</aui-heading>\n        <aui-text muted size=\"sm\">Enter your email below to login to your account</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack>\n        <aui-field label=\"Email\" width=\"full\">\n          <aui-input type=\"email\" placeholder=\"m@example.com\" width=\"full\"></aui-input>\n        </aui-field>\n\n        <aui-field label=\"Password\" width=\"full\">\n          <aui-input type=\"password\" placeholder=\"Enter your password\" width=\"full\"></aui-input>\n          <aui-text muted size=\"xs\" slot=\"trailing\" text=\"right\"><a href=\"#\">Forgot your password?</a></aui-text>\n        </aui-field>\n\n        <aui-button primary accent width=\"full\">Login</aui-button>\n\n        <!-- Divider -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-divider spacer></aui-divider>\n          <aui-text muted size=\"sm\">Or</aui-text>\n          <aui-divider spacer></aui-divider>\n        </aui-stack>\n\n        <aui-button scrim width=\"full\">Login with Google</aui-button>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"content\"><aui-text muted size=\"sm\">Don't have an account? <a href=\"#\">Sign up</a></aui-text></span>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
@@ -16892,8 +18017,8 @@
       "kind": "panel",
       "examples": [
         {
-          "html": "<aui-stack gap=\"4\" align-items=\"center\">\n  <!-- Brand -->\n  <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n    <img src=\"/icon.svg\" alt=\"Acme Inc\" style=\"width: 1.5rem; height: 1.5rem; border-radius: 0.25rem;\">\n    <aui-heading size=\"lg\" weight=\"medium\">Acme Inc.</aui-heading>\n  </aui-stack>\n\n  <!-- Card -->\n  <aui-container kind=\"panel\" bordered max-width=\"md\" style=\"min-width: 20rem;\">\n    <aui-header>\n      <span slot=\"content\">\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\">Login with your Apple or Google account</aui-text>\n        </aui-stack>\n      </span>\n    </aui-header>\n    <aui-content>\n      <aui-inset>\n        <aui-stack gap=\"6\">\n          <!-- Social buttons -->\n          <aui-stack gap=\"2\">\n            <aui-button scrim width=\"full\">Login with Apple</aui-button>\n            <aui-button scrim width=\"full\">Login with Google</aui-button>\n          </aui-stack>\n\n          <!-- Divider -->\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <aui-divider spacer></aui-divider>\n            <aui-text muted size=\"sm\">Or continue with</aui-text>\n            <aui-divider spacer></aui-divider>\n          </aui-stack>\n\n          <!-- Email field -->\n          <aui-field label=\"Email\" width=\"full\">\n            <aui-input type=\"email\" placeholder=\"m@example.com\" width=\"full\"></aui-input>\n          </aui-field>\n\n          <!-- Password field with forgot link -->\n          <aui-field label=\"Password\" width=\"full\">\n            <aui-input type=\"password\" placeholder=\"Enter your password\" width=\"full\"></aui-input>\n            <aui-text muted size=\"xs\" slot=\"trailing\" text=\"right\"><a href=\"#\">Forgot your password?</a></aui-text>\n          </aui-field>\n\n          <!-- Login button -->\n          <aui-button primary accent width=\"full\">Login</aui-button>\n\n          <!-- Terms -->\n          <aui-text muted size=\"xs\" align-items=\"center\" text=\"center\">By clicking continue, you agree to our <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.</aui-text>\n        </aui-stack>\n      </aui-inset>\n    </aui-content>\n    <aui-footer>\n      <span slot=\"content\"><aui-text muted size=\"sm\">Don't have an account? <a href=\"#\">Sign up</a></aui-text></span>\n    </aui-footer>\n  </aui-container>\n</aui-stack>\n",
-          "description": "Social-first login page with Apple and Google buttons, email/password fallback, and terms notice."
+          "description": "Centered login page with social providers, email/password, and brand header.",
+          "html": "<aui-stack gap=\"4\" align-items=\"center\">\n  <!-- Brand -->\n  <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n    <img src=\"/icon.svg\" alt=\"Acme Inc\" style=\"width: 1.5rem; height: 1.5rem; border-radius: var(--aui-radius);\">\n    <aui-heading size=\"lg\" weight=\"medium\">Acme Inc.</aui-heading>\n  </aui-stack>\n\n  <!-- Card -->\n  <aui-container kind=\"panel\" bordered max-width=\"md\" min-width=\"20\">\n    <aui-header>\n      <span slot=\"content\">\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\">Login with your Apple or Google account</aui-text>\n        </aui-stack>\n      </span>\n    </aui-header>\n    <aui-content>\n      <aui-inset>\n        <aui-stack>\n          <!-- Social buttons -->\n          <aui-stack gap=\"2\">\n            <aui-button scrim width=\"full\">Login with Apple</aui-button>\n            <aui-button scrim width=\"full\">Login with Google</aui-button>\n          </aui-stack>\n\n          <!-- Divider -->\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <aui-divider spacer></aui-divider>\n            <aui-text muted size=\"sm\">Or continue with</aui-text>\n            <aui-divider spacer></aui-divider>\n          </aui-stack>\n\n          <!-- Email field -->\n          <aui-field label=\"Email\" width=\"full\">\n            <aui-input type=\"email\" placeholder=\"m@example.com\" width=\"full\"></aui-input>\n          </aui-field>\n\n          <!-- Password field with forgot link -->\n          <aui-field label=\"Password\" width=\"full\">\n            <aui-input type=\"password\" placeholder=\"Enter your password\" width=\"full\"></aui-input>\n            <aui-text muted size=\"xs\" slot=\"trailing\" text=\"right\"><a href=\"#\">Forgot your password?</a></aui-text>\n          </aui-field>\n\n          <!-- Login button -->\n          <aui-button primary accent width=\"full\">Login</aui-button>\n\n          <!-- Terms -->\n          <aui-text muted size=\"xs\" align-items=\"center\" text=\"center\">By clicking continue, you agree to our <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.</aui-text>\n        </aui-stack>\n      </aui-inset>\n    </aui-content>\n    <aui-footer>\n      <span slot=\"content\"><aui-text muted size=\"sm\">Don't have an account? <a href=\"#\">Sign up</a></aui-text></span>\n    </aui-footer>\n  </aui-container>\n</aui-stack>"
         }
       ]
     },
@@ -16921,8 +18046,8 @@
       "kind": "panel",
       "examples": [
         {
-          "html": "<aui-container padding=\"4\" gap=\"0\" transparent>\n  <aui-stack direction=\"row\" gap=\"8\" style=\"min-width: 44rem; min-height: 32rem\">\n    <!-- Left: form -->\n    <aui-container kind=\"panel\" elevation=\"2\" gap=\"0\" spacer>\n      <aui-header>\n        <span slot=\"content\">\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\">Login to your Acme Inc account</aui-text>\n          </aui-stack>\n        </span>\n      </aui-header>\n      <aui-content>\n        <aui-inset>\n          <aui-stack gap=\"6\">\n            <aui-field label=\"Email\" width=\"full\">\n              <aui-input type=\"email\" placeholder=\"m@example.com\" width=\"full\"></aui-input>\n            </aui-field>\n\n            <aui-field label=\"Password\" width=\"full\">\n              <aui-input type=\"password\" placeholder=\"Enter your password\" width=\"full\"></aui-input>\n              <aui-text muted size=\"xs\" slot=\"trailing\" text=\"right\"><a href=\"#\">Forgot your password?</a></aui-text>\n            </aui-field>\n\n            <aui-button primary accent width=\"full\">Login</aui-button>\n\n            <!-- Divider -->\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-divider spacer></aui-divider>\n              <aui-text muted size=\"sm\">Or continue with</aui-text>\n              <aui-divider spacer></aui-divider>\n            </aui-stack>\n\n            <!-- Social row -->\n            <aui-button-group>\n              <aui-button scrim grow=\"1\" basis=\"0\">Apple</aui-button>\n              <aui-button scrim grow=\"1\" basis=\"0\">Google</aui-button>\n              <aui-button scrim grow=\"1\" basis=\"0\">Meta</aui-button>\n            </aui-button-group>\n\n            <!-- Terms -->\n            <aui-text muted size=\"xs\" align-items=\"center\" text=\"center\">By clicking continue, you agree to our <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.</aui-text>\n          </aui-stack>\n        </aui-inset>\n      </aui-content>\n      <aui-footer>\n        <span slot=\"content\"><aui-text muted size=\"sm\">Don't have an account? <a href=\"#\">Sign up</a></aui-text></span>\n      </aui-footer>\n    </aui-container>\n\n    <!-- Right: image placeholder -->\n    <aui-container elevation=\"3\" spacer justify-content=\"center\" transparent>\n      <aui-inset>\n        <aui-stack gap=\"1\" align-items=\"center\" text=\"center\">\n          <aui-icon name=\"image\" size=\"xl\" muted></aui-icon>\n          <aui-text muted size=\"sm\">Brand illustration</aui-text>\n        </aui-stack>\n      </aui-inset>\n    </aui-container>\n  </aui-stack>\n</aui-container>\n",
-          "description": "Two-column login with email, password, and social buttons on the left and an image placeholder on the right."
+          "description": "Two-column login with form on the left and image placeholder on the right.",
+          "html": "<aui-container padding=\"4\" gap=\"0\" transparent>\n  <aui-stack\n    direction=\"row\"\n    gap=\"8\"\n    min-width=\"44\" style=\"min-height: 32rem\"\n  >\n    <!-- Left: form -->\n    <aui-container kind=\"panel\" elevation=\"2\" gap=\"0\" spacer>\n      <aui-header>\n        <span slot=\"content\">\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\">Login to your Acme Inc account</aui-text>\n          </aui-stack>\n        </span>\n      </aui-header>\n      <aui-content>\n        <aui-inset>\n          <aui-stack>\n            <aui-field label=\"Email\" width=\"full\">\n              <aui-input type=\"email\" placeholder=\"m@example.com\" width=\"full\"></aui-input>\n            </aui-field>\n\n            <aui-field label=\"Password\" width=\"full\">\n              <aui-input type=\"password\" placeholder=\"Enter your password\" width=\"full\"></aui-input>\n              <aui-text muted size=\"xs\" slot=\"trailing\" text=\"right\"><a href=\"#\">Forgot your password?</a></aui-text>\n            </aui-field>\n\n            <aui-button primary accent width=\"full\">Login</aui-button>\n\n            <!-- Divider -->\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-divider spacer></aui-divider>\n              <aui-text muted size=\"sm\">Or continue with</aui-text>\n              <aui-divider spacer></aui-divider>\n            </aui-stack>\n\n            <!-- Social row -->\n            <aui-button-group>\n              <aui-button scrim grow=\"1\" basis=\"0\">Apple</aui-button>\n              <aui-button scrim grow=\"1\" basis=\"0\">Google</aui-button>\n              <aui-button scrim grow=\"1\" basis=\"0\">Meta</aui-button>\n            </aui-button-group>\n\n            <!-- Terms -->\n            <aui-text muted size=\"xs\" align-items=\"center\" text=\"center\">By clicking continue, you agree to our <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.</aui-text>\n          </aui-stack>\n        </aui-inset>\n      </aui-content>\n      <aui-footer>\n        <span slot=\"content\"><aui-text muted size=\"sm\">Don't have an account? <a href=\"#\">Sign up</a></aui-text></span>\n      </aui-footer>\n    </aui-container>\n\n    <!-- Right: image placeholder -->\n    <aui-container\n      elevation=\"3\"\n      spacer\n      justify-content=\"center\"\n      transparent\n    >\n      <aui-inset>\n        <aui-stack\n          gap=\"1\"\n          align-items=\"center\"\n          text=\"center\"\n        >\n          <aui-icon name=\"image\" size=\"3xl\" muted></aui-icon>\n          <aui-text muted size=\"sm\">Brand illustration</aui-text>\n        </aui-stack>\n      </aui-inset>\n    </aui-container>\n  </aui-stack>\n</aui-container>"
         }
       ]
     },
@@ -16939,6 +18064,35 @@
         "aui-graph-node",
         "aui-graph-noodle",
         "aui-graph-port"
+      ],
+      "examples": [
+        {
+          "description": "Marketing Automation Engine — 16 nodes, 19 connections.",
+          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 37.25rem; min-width: 91.875rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- Lead Capture Form → CRM Enrichment -->\n    <aui-graph-noodle from=\"ma-lead-form:right\" to=\"ma-crm-enrich:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Social Ad Import → CRM Enrichment -->\n    <aui-graph-noodle from=\"ma-social:right\" to=\"ma-crm-enrich:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Social Ad Import → Lead Scoring Engine -->\n    <aui-graph-noodle from=\"ma-social:right\" to=\"ma-score:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Webinar Registration → Lead Scoring Engine -->\n    <aui-graph-noodle from=\"ma-webinar:right\" to=\"ma-score:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- CRM Enrichment → Audience Segmentation -->\n    <aui-graph-noodle from=\"ma-crm-enrich:right\" to=\"ma-segment:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Lead Scoring Engine → Nurture Sequence -->\n    <aui-graph-noodle from=\"ma-score:right\" to=\"ma-nurture:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Lead Scoring Engine → A/B Test Split -->\n    <aui-graph-noodle from=\"ma-score:right\" to=\"ma-abtest:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Audience Segmentation → Engagement Tracker -->\n    <aui-graph-noodle from=\"ma-segment:right\" to=\"ma-engage:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Nurture Sequence → Engagement Tracker -->\n    <aui-graph-noodle from=\"ma-nurture:right\" to=\"ma-engage:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- A/B Test Split → Email Variant A -->\n    <aui-graph-noodle from=\"ma-abtest:right\" to=\"ma-email-a:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- A/B Test Split → Email Variant B -->\n    <aui-graph-noodle from=\"ma-abtest:right\" to=\"ma-email-b:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Engagement Tracker → MQL Qualification -->\n    <aui-graph-noodle from=\"ma-engage:right\" to=\"ma-mql:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Email Variant A → MQL Qualification -->\n    <aui-graph-noodle from=\"ma-email-a:right\" to=\"ma-mql:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Email Variant B → Retargeting Pixel -->\n    <aui-graph-noodle from=\"ma-email-b:right\" to=\"ma-retarget:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- MQL Qualification → Sales Handoff -->\n    <aui-graph-noodle from=\"ma-mql:bottom\" to=\"ma-sales:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Sales Handoff → Campaign Analytics -->\n    <aui-graph-noodle from=\"ma-sales:right\" to=\"ma-report:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Retargeting Pixel → Campaign Analytics -->\n    <aui-graph-noodle from=\"ma-retarget:right\" to=\"ma-report:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Retargeting Pixel → Unsubscribe Handler -->\n    <aui-graph-noodle from=\"ma-retarget:bottom\" to=\"ma-unsubscribe:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Retargeting Pixel → Nurture Sequence -->\n    <aui-graph-noodle from=\"ma-retarget:left\" to=\"ma-nurture:bottom\" color=\"warning\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- Lead Capture Form -->\n    <aui-graph-node x=\"24\" y=\"46\" node-id=\"ma-lead-form\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Lead Capture Form</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    <!-- Social Ad Import -->\n    <aui-graph-node x=\"24\" y=\"186\" node-id=\"ma-social\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Social Ad Import</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    <!-- Webinar Registration -->\n    <aui-graph-node x=\"24\" y=\"326\" node-id=\"ma-webinar\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Webinar Registration</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    <!-- CRM Enrichment -->\n    <aui-graph-node x=\"260\" y=\"116\" node-id=\"ma-crm-enrich\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">CRM 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    <!-- Lead Scoring Engine -->\n    <aui-graph-node x=\"260\" y=\"256\" node-id=\"ma-score\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Lead Scoring 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    <!-- Audience Segmentation -->\n    <aui-graph-node x=\"500\" y=\"46\" node-id=\"ma-segment\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Audience Segmentation</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    <!-- Nurture Sequence -->\n    <aui-graph-node x=\"500\" y=\"186\" node-id=\"ma-nurture\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Nurture Sequence</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    <!-- A/B Test Split -->\n    <aui-graph-node x=\"500\" y=\"326\" node-id=\"ma-abtest\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">A/B Test Split</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    <!-- Email Variant A -->\n    <aui-graph-node x=\"740\" y=\"256\" node-id=\"ma-email-a\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Email Variant 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    <!-- Email Variant B -->\n    <aui-graph-node x=\"740\" y=\"396\" node-id=\"ma-email-b\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Email Variant 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    <!-- Engagement Tracker -->\n    <aui-graph-node x=\"740\" y=\"116\" node-id=\"ma-engage\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Engagement Tracker</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    <!-- MQL Qualification -->\n    <aui-graph-node x=\"980\" y=\"116\" node-id=\"ma-mql\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">MQL 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    <!-- Sales Handoff -->\n    <aui-graph-node x=\"980\" y=\"256\" node-id=\"ma-sales\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Sales Handoff</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    <!-- Retargeting Pixel -->\n    <aui-graph-node x=\"980\" y=\"396\" node-id=\"ma-retarget\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Retargeting Pixel</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    <!-- Campaign Analytics -->\n    <aui-graph-node x=\"1220\" y=\"186\" node-id=\"ma-report\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Campaign Analytics</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    <!-- Unsubscribe Handler -->\n    <aui-graph-node x=\"1220\" y=\"396\" node-id=\"ma-unsubscribe\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Unsubscribe Handler</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": "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>"
+        }
       ]
     },
     {
@@ -16962,8 +18116,8 @@
       "kind": "panel",
       "examples": [
         {
-          "html": "<aui-container kind=\"panel\" bordered max-width=\"xl\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n        <aui-avatar size=\"lg\" square><aui-icon name=\"user\"></aui-icon></aui-avatar>\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"xl\">Team Members</aui-heading>\n          <aui-text muted size=\"sm\">Manage who has access to this project.</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </span>\n    <span slot=\"trailing\"><aui-button primary accent>Invite</aui-button></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar>AJ</aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">Alice Johnson</aui-heading>\n            <aui-text muted size=\"sm\">alice@acme.com · Engineer</aui-text>\n          </aui-stack>\n          <aui-badge>Admin</aui-badge>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar>BK</aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">Bob Kim</aui-heading>\n            <aui-text muted size=\"sm\">bob@acme.com · Designer</aui-text>\n          </aui-stack>\n          <aui-badge>Member</aui-badge>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar>CL</aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">Carol Lee</aui-heading>\n            <aui-text muted size=\"sm\">carol@acme.com · Product Manager</aui-text>\n          </aui-stack>\n          <aui-badge>Member</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
-          "description": "Team member list with avatars, roles, and an invite action."
+          "description": "Panel with header and avatar-based member rows.",
+          "html": "<aui-container kind=\"panel\" bordered max-width=\"xl\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n      <aui-avatar size=\"lg\" square><aui-icon name=\"users-three\"></aui-icon></aui-avatar>\n      <aui-stack gap=\"1\" spacer>\n        <aui-heading size=\"xl\">Team Members</aui-heading>\n        <aui-text muted size=\"sm\">Manage who has access to this project.</aui-text>\n      </aui-stack>\n      <aui-button primary accent>Invite</aui-button>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar>AJ</aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">Alice Johnson</aui-heading>\n            <aui-text muted size=\"sm\">alice@acme.com · Engineer</aui-text>\n          </aui-stack>\n          <aui-badge>Admin</aui-badge>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar>BK</aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">Bob Kim</aui-heading>\n            <aui-text muted size=\"sm\">bob@acme.com · Designer</aui-text>\n          </aui-stack>\n          <aui-badge>Member</aui-badge>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-avatar>CL</aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">Carol Lee</aui-heading>\n            <aui-text muted size=\"sm\">carol@acme.com · Product Manager</aui-text>\n          </aui-stack>\n          <aui-badge>Member</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
         }
       ]
     },
@@ -16980,6 +18134,12 @@
         "aui-graph-node",
         "aui-graph-noodle",
         "aui-graph-port"
+      ],
+      "examples": [
+        {
+          "description": "ML Training Pipeline — 12 nodes, 14 connections.",
+          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 37.25rem; min-width: 84.625rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- Data Lake → Feature Store -->\n    <aui-graph-noodle from=\"ml-lake:right\" to=\"ml-features:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Schema Validator → Feature Store -->\n    <aui-graph-noodle from=\"ml-schema:right\" to=\"ml-features:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Feature Store → Training Cluster GPU -->\n    <aui-graph-noodle from=\"ml-features:right\" to=\"ml-train:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Feature Store → Hyperparameter Tuner -->\n    <aui-graph-noodle from=\"ml-features:right\" to=\"ml-hyper:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Training Cluster GPU → Validation Split -->\n    <aui-graph-noodle from=\"ml-train:right\" to=\"ml-validate:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Hyperparameter Tuner → Training Cluster GPU -->\n    <aui-graph-noodle from=\"ml-hyper:right\" to=\"ml-train:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Validation Split → Model Registry -->\n    <aui-graph-noodle from=\"ml-validate:right\" to=\"ml-registry:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Model Registry → A/B Test Gate -->\n    <aui-graph-noodle from=\"ml-registry:right\" to=\"ml-abtest:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Model Registry → Canary Deploy -->\n    <aui-graph-noodle from=\"ml-registry:right\" to=\"ml-canary:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- A/B Test Gate → Production Endpoint -->\n    <aui-graph-noodle from=\"ml-abtest:right\" to=\"ml-prod:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Canary Deploy → Production Endpoint -->\n    <aui-graph-noodle from=\"ml-canary:right\" to=\"ml-prod:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Production Endpoint → Drift Monitor -->\n    <aui-graph-noodle from=\"ml-prod:right\" to=\"ml-drift:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Drift Monitor → Retraining Trigger -->\n    <aui-graph-noodle from=\"ml-drift:right\" to=\"ml-retrain:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Retraining Trigger → Feature Store -->\n    <aui-graph-noodle from=\"ml-retrain:bottom\" to=\"ml-features:bottom\" color=\"warning\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- Data Lake -->\n    <aui-graph-node x=\"24\" y=\"116\" node-id=\"ml-lake\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Data Lake</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    <!-- Schema Validator -->\n    <aui-graph-node x=\"24\" y=\"256\" node-id=\"ml-schema\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Schema Validator</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    <!-- Feature Store -->\n    <aui-graph-node x=\"240\" y=\"186\" node-id=\"ml-features\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Feature Store</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    <!-- Training Cluster GPU -->\n    <aui-graph-node x=\"456\" y=\"116\" node-id=\"ml-train\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Training Cluster GPU</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    <!-- Hyperparameter Tuner -->\n    <aui-graph-node x=\"456\" y=\"256\" node-id=\"ml-hyper\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Hyperparameter Tuner</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    <!-- Validation Split -->\n    <aui-graph-node x=\"672\" y=\"116\" node-id=\"ml-validate\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Validation Split</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    <!-- Model Registry -->\n    <aui-graph-node x=\"672\" y=\"256\" node-id=\"ml-registry\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Model Registry</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    <!-- A/B Test Gate -->\n    <aui-graph-node x=\"888\" y=\"116\" node-id=\"ml-abtest\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">A/B Test Gate</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    <!-- Canary Deploy -->\n    <aui-graph-node x=\"888\" y=\"256\" node-id=\"ml-canary\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Canary Deploy</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    <!-- Production Endpoint -->\n    <aui-graph-node x=\"1104\" y=\"116\" node-id=\"ml-prod\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Production 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    <!-- Drift Monitor -->\n    <aui-graph-node x=\"1104\" y=\"256\" node-id=\"ml-drift\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Drift 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    <!-- Retraining Trigger -->\n    <aui-graph-node x=\"1104\" y=\"396\" node-id=\"ml-retrain\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Retraining Trigger</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>"
+        }
       ]
     },
     {
@@ -16999,8 +18159,33 @@
       "kind": "widget",
       "examples": [
         {
-          "html": "<aui-container kind=\"widget\" bordered interactive href=\"#\" max-width=\"sm\">\n  <aui-inset>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-avatar square><aui-icon name=\"gear\"></aui-icon></aui-avatar>\n      <aui-stack gap=\"1\" spacer>\n        <aui-heading size=\"md\" weight=\"medium\">Preferences</aui-heading>\n        <aui-text muted size=\"sm\">Language, theme, and notifications</aui-text>\n      </aui-stack>\n      <aui-icon name=\"caret-right\" muted></aui-icon>\n    </aui-stack>\n  </aui-inset>\n</aui-container>\n",
-          "description": "Clickable settings navigation card with icon and chevron."
+          "description": "Compact clickable card for navigation menus.",
+          "html": "<aui-container kind=\"widget\" bordered interactive href=\"#\" max-width=\"sm\">\n  <aui-inset>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-avatar size=\"lg\" square><aui-icon name=\"gear\"></aui-icon></aui-avatar>\n      <aui-stack gap=\"1\" spacer>\n        <aui-heading size=\"md\" weight=\"medium\">Preferences</aui-heading>\n        <aui-text muted size=\"sm\">Language, theme, and notifications</aui-text>\n      </aui-stack>\n      <aui-icon name=\"caret-right\" muted></aui-icon>\n    </aui-stack>\n  </aui-inset>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "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>"
         }
       ]
     },
@@ -17023,8 +18208,40 @@
       "kind": "panel",
       "examples": [
         {
-          "html": "<aui-container kind=\"panel\" bordered max-width=\"lg\">\n  <aui-header>\n    <span slot=\"leading\"><aui-heading size=\"xl\">Notifications</aui-heading></span>\n    <span slot=\"trailing\"><aui-button scrim>Mark all read</aui-button></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-stack direction=\"row\" gap=\"2\">\n          <aui-avatar>AJ</aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-heading size=\"md\" spacer>Pull request comment</aui-heading>\n              <aui-text muted size=\"xs\">2 min ago</aui-text>\n            </aui-stack>\n            <aui-text muted size=\"sm\">Alice Johnson commented on your pull request</aui-text>\n          </aui-stack>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\">\n          <aui-avatar>CI</aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-heading size=\"md\" spacer>Build completed</aui-heading>\n              <aui-text muted size=\"xs\">15 min ago</aui-text>\n            </aui-stack>\n            <aui-text muted size=\"sm\">Build #1234 completed successfully</aui-text>\n          </aui-stack>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\">\n          <aui-avatar>DT</aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-heading size=\"md\" spacer>Team invitation</aui-heading>\n              <aui-text muted size=\"xs\">1 hour ago</aui-text>\n            </aui-stack>\n            <aui-text muted size=\"sm\">You were added to the Design team</aui-text>\n          </aui-stack>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
-          "description": "Notification list with three items showing comments, builds, and team activity."
+          "description": "Panel listing recent notifications with avatars and timestamps.",
+          "html": "<aui-container kind=\"panel\" bordered max-width=\"lg\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-heading size=\"xl\" spacer>Notifications</aui-heading>\n      <aui-button scrim>Mark all read</aui-button>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-stack direction=\"row\" gap=\"2\">\n          <aui-avatar>AJ</aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-heading size=\"md\" spacer>Pull request comment</aui-heading>\n              <aui-text muted size=\"xs\">2 min ago</aui-text>\n            </aui-stack>\n            <aui-text muted size=\"sm\">Alice Johnson commented on your pull request</aui-text>\n          </aui-stack>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\">\n          <aui-avatar>CI</aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-heading size=\"md\" spacer>Build completed</aui-heading>\n              <aui-text muted size=\"xs\">15 min ago</aui-text>\n            </aui-stack>\n            <aui-text muted size=\"sm\">Build #1234 completed successfully</aui-text>\n          </aui-stack>\n        </aui-stack>\n        <aui-stack direction=\"row\" gap=\"2\">\n          <aui-avatar>DT</aui-avatar>\n          <aui-stack gap=\"1\" spacer>\n            <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n              <aui-heading size=\"md\" spacer>Team invitation</aui-heading>\n              <aui-text muted size=\"xs\">1 hour ago</aui-text>\n            </aui-stack>\n            <aui-text muted size=\"sm\">You were added to the Design team</aui-text>\n          </aui-stack>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
+        }
+      ]
+    },
+    {
+      "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>"
         }
       ]
     },
@@ -17041,6 +18258,65 @@
         "aui-graph-node",
         "aui-graph-noodle",
         "aui-graph-port"
+      ],
+      "examples": [
+        {
+          "description": "Oncology Care Pathway — 17 nodes, 21 connections.",
+          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 41.625rem; min-width: 79.625rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- Cancer Screening → Biopsy & Pathology -->\n    <aui-graph-noodle from=\"on-screening:right\" to=\"on-biopsy:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Cancer Screening → Genomic Profiling -->\n    <aui-graph-noodle from=\"on-screening:right\" to=\"on-genomics:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Biopsy & Pathology → TNM Staging -->\n    <aui-graph-noodle from=\"on-biopsy:right\" to=\"on-staging:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Biopsy & Pathology → Tumor Board (MDT) -->\n    <aui-graph-noodle from=\"on-biopsy:right\" to=\"on-mdt:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Genomic Profiling → Biomarker Analysis -->\n    <aui-graph-noodle from=\"on-genomics:right\" to=\"on-biomarker:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Genomic Profiling → Tumor Board (MDT) -->\n    <aui-graph-noodle from=\"on-genomics:right\" to=\"on-mdt:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Tumor Board (MDT) → Surgical Intervention -->\n    <aui-graph-noodle from=\"on-mdt:right\" to=\"on-surgery:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Tumor Board (MDT) → Chemotherapy Protocol -->\n    <aui-graph-noodle from=\"on-mdt:right\" to=\"on-chemo:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Tumor Board (MDT) → Radiation Therapy -->\n    <aui-graph-noodle from=\"on-mdt:right\" to=\"on-radiation:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Biomarker Analysis → Immunotherapy -->\n    <aui-graph-noodle from=\"on-biomarker:right\" to=\"on-immuno:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Insurance Authorization → Immunotherapy -->\n    <aui-graph-noodle from=\"on-insurance:right\" to=\"on-immuno:left\" color=\"warning\" weight=\"2\"></aui-graph-noodle>\n    <!-- Surgical Intervention → Treatment Response -->\n    <aui-graph-noodle from=\"on-surgery:right\" to=\"on-response:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Chemotherapy Protocol → Treatment Response -->\n    <aui-graph-noodle from=\"on-chemo:right\" to=\"on-response:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Chemotherapy Protocol → Toxicity Monitor -->\n    <aui-graph-noodle from=\"on-chemo:right\" to=\"on-toxicity:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Radiation Therapy → Toxicity Monitor -->\n    <aui-graph-noodle from=\"on-radiation:right\" to=\"on-toxicity:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Immunotherapy → Recurrence Detection -->\n    <aui-graph-noodle from=\"on-immuno:right\" to=\"on-recurrence:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Treatment Response → Remission -->\n    <aui-graph-noodle from=\"on-response:right\" to=\"on-remission:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Toxicity Monitor → Palliative Care -->\n    <aui-graph-noodle from=\"on-toxicity:right\" to=\"on-palliative:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Recurrence Detection → Tumor Board (MDT) -->\n    <aui-graph-noodle from=\"on-recurrence:left\" to=\"on-mdt:bottom\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Recurrence Detection → Survivorship Program -->\n    <aui-graph-noodle from=\"on-recurrence:right\" to=\"on-survivor:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Remission → Survivorship Program -->\n    <aui-graph-noodle from=\"on-remission:bottom\" to=\"on-survivor:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- Cancer Screening -->\n    <aui-graph-node x=\"24\" y=\"186\" node-id=\"on-screening\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Cancer Screening</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    <!-- Biopsy & Pathology -->\n    <aui-graph-node x=\"224\" y=\"116\" node-id=\"on-biopsy\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Biopsy & Pathology</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    <!-- Genomic Profiling -->\n    <aui-graph-node x=\"224\" y=\"256\" node-id=\"on-genomics\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Genomic Profiling</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    <!-- TNM Staging -->\n    <aui-graph-node x=\"424\" y=\"46\" node-id=\"on-staging\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">TNM Staging</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    <!-- Tumor Board (MDT) -->\n    <aui-graph-node x=\"424\" y=\"186\" node-id=\"on-mdt\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Tumor Board (MDT)</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    <!-- Biomarker Analysis -->\n    <aui-graph-node x=\"424\" y=\"326\" node-id=\"on-biomarker\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Biomarker 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    <!-- Surgical Intervention -->\n    <aui-graph-node x=\"624\" y=\"46\" node-id=\"on-surgery\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Surgical Intervention</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    <!-- Chemotherapy Protocol -->\n    <aui-graph-node x=\"624\" y=\"186\" node-id=\"on-chemo\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Chemotherapy Protocol</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    <!-- Radiation Therapy -->\n    <aui-graph-node x=\"624\" y=\"326\" node-id=\"on-radiation\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Radiation Therapy</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    <!-- Immunotherapy -->\n    <aui-graph-node x=\"624\" y=\"466\" node-id=\"on-immuno\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Immunotherapy</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 Response -->\n    <aui-graph-node x=\"824\" y=\"116\" node-id=\"on-response\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Treatment 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    <!-- Toxicity Monitor -->\n    <aui-graph-node x=\"824\" y=\"256\" node-id=\"on-toxicity\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Toxicity 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    <!-- Recurrence Detection -->\n    <aui-graph-node x=\"824\" y=\"396\" node-id=\"on-recurrence\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Recurrence Detection</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    <!-- Remission -->\n    <aui-graph-node x=\"1024\" y=\"116\" node-id=\"on-remission\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Remission</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    <!-- Palliative Care -->\n    <aui-graph-node x=\"1024\" y=\"256\" node-id=\"on-palliative\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Palliative Care</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    <!-- Survivorship Program -->\n    <aui-graph-node x=\"1024\" y=\"396\" node-id=\"on-survivor\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Survivorship Program</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    <!-- Insurance Authorization -->\n    <aui-graph-node x=\"424\" y=\"466\" node-id=\"on-insurance\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Insurance Authorization</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  </aui-graph-layer>\n</aui-graph-ui>"
+        }
+      ]
+    },
+    {
+      "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>"
+        }
       ]
     },
     {
@@ -17064,8 +18340,8 @@
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-header>\n    <span slot=\"leading\"><aui-heading size=\"lg\">Pro</aui-heading></span>\n    <span slot=\"trailing\"><aui-badge accent>Popular</aui-badge></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"2xl\" style=\"font-size: 3rem; letter-spacing: -0.04em; line-height: 1;\">$29</aui-heading>\n          <aui-text muted size=\"sm\">/month, billed annually</aui-text>\n        </aui-stack>\n        <aui-stack gap=\"3\">\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <aui-icon name=\"check\" size=\"sm\"></aui-icon>\n            <aui-text size=\"md\">Unlimited projects</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <aui-icon name=\"check\" size=\"sm\"></aui-icon>\n            <aui-text size=\"md\">Priority support</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <aui-icon name=\"check\" size=\"sm\"></aui-icon>\n            <aui-text size=\"md\">Custom integrations</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <aui-icon name=\"check\" size=\"sm\"></aui-icon>\n            <aui-text size=\"md\">Advanced analytics</aui-text>\n          </aui-stack>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button primary width=\"full\">Get started</aui-button>\n  </aui-footer>\n</aui-container>\n",
-          "description": "Pro pricing tier card with feature list and sign-up action."
+          "description": "Pricing tier card with features list and call-to-action.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"sm\">\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-heading size=\"lg\" spacer>Pro</aui-heading>\n      <aui-badge accent>Popular</aui-badge>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"2xl\" style=\"font-size: 3rem; letter-spacing: -0.04em; line-height: 1;\">$29</aui-heading>\n          <aui-text muted size=\"sm\">/month, billed annually</aui-text>\n        </aui-stack>\n        <aui-stack gap=\"3\">\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <aui-icon name=\"check\" size=\"sm\"></aui-icon>\n            <aui-text size=\"md\">Unlimited projects</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <aui-icon name=\"check\" size=\"sm\"></aui-icon>\n            <aui-text size=\"md\">Priority support</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <aui-icon name=\"check\" size=\"sm\"></aui-icon>\n            <aui-text size=\"md\">Custom integrations</aui-text>\n          </aui-stack>\n          <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n            <aui-icon name=\"check\" size=\"sm\"></aui-icon>\n            <aui-text size=\"md\">Advanced analytics</aui-text>\n          </aui-stack>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button primary width=\"full\">Get started</aui-button>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
@@ -17087,8 +18363,8 @@
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered shadow=\"1\" max-width=\"md\">\n  <aui-inset>\n    <aui-stack gap=\"4\" align-items=\"center\" text=\"center\">\n      <aui-avatar size=\"xl\" square><aui-icon name=\"gear\"></aui-icon></aui-avatar>\n      <aui-heading size=\"xl\">Processing your payment</aui-heading>\n      <aui-text muted size=\"sm\">This usually takes a few seconds. You'll be redirected to your dashboard when it's done.</aui-text>\n      <aui-button scrim>Cancel transaction</aui-button>\n    </aui-stack>\n  </aui-inset>\n</aui-container>\n",
-          "description": "Processing state with contained icon, specific heading, reassuring description, and labeled cancel action."
+          "description": "Loading state with status icon, message, and cancel action.",
+          "html": "<aui-container kind=\"card\" bordered shadow=\"1\" max-width=\"md\">\n  <aui-inset>\n    <aui-stack gap=\"4\" align-items=\"center\" text=\"center\">\n      <aui-icon name=\"gear\" size=\"2xl\" muted></aui-icon>\n      <aui-heading size=\"xl\">Processing your payment</aui-heading>\n      <aui-text muted size=\"sm\">This usually takes a few seconds. You'll be redirected to your dashboard when it's done.</aui-text>\n      <aui-button scrim>Cancel transaction</aui-button>\n    </aui-stack>\n  </aui-inset>\n</aui-container>"
         }
       ]
     },
@@ -17099,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",
@@ -17114,8 +18388,8 @@
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"md\">\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\" align-items=\"center\" text=\"center\">\n        <aui-avatar size=\"lg\">SR</aui-avatar>\n        <aui-stack gap=\"1\" align-items=\"center\">\n          <aui-heading size=\"xl\">Sofia Rodriguez</aui-heading>\n          <aui-text muted size=\"sm\">Senior Product Designer</aui-text>\n        </aui-stack>\n        <aui-text muted size=\"sm\">Designing thoughtful experiences that bridge user needs and business goals. Previously at Figma and Stripe.</aui-text>\n        <aui-stack direction=\"row\" gap=\"4\">\n          <aui-stat label=\"Projects\" value=\"12\"></aui-stat>\n          <aui-stat label=\"Followers\" value=\"1.2k\"></aui-stat>\n          <aui-stat label=\"Following\" value=\"340\"></aui-stat>\n        </aui-stack>\n        <aui-button-group>\n          <aui-button scrim grow=\"1\" basis=\"0\">Edit profile</aui-button>\n          <aui-button primary accent grow=\"1\" basis=\"0\">Message</aui-button>\n        </aui-button-group>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
-          "description": "User profile card with avatar, bio, stats, and contact actions."
+          "description": "User profile card with avatar, bio, stats, and actions.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"md\">\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\" align-items=\"center\" text=\"center\">\n        <aui-avatar size=\"lg\">SR</aui-avatar>\n        <aui-stack gap=\"1\" align-items=\"center\">\n          <aui-heading size=\"xl\">Sofia Rodriguez</aui-heading>\n          <aui-text muted size=\"sm\">Senior Product Designer</aui-text>\n        </aui-stack>\n        <aui-text muted size=\"sm\">Designing thoughtful experiences that bridge user needs and business goals. Previously at Figma and Stripe.</aui-text>\n        <aui-stack direction=\"row\">\n          <aui-stat label=\"Projects\" value=\"12\"></aui-stat>\n          <aui-stat label=\"Followers\" value=\"1.2k\"></aui-stat>\n          <aui-stat label=\"Following\" value=\"340\"></aui-stat>\n        </aui-stack>\n        <aui-button-group>\n          <aui-button scrim grow=\"1\" basis=\"0\">Edit profile</aui-button>\n          <aui-button primary accent grow=\"1\" basis=\"0\">Message</aui-button>\n        </aui-button-group>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
         }
       ]
     },
@@ -17132,6 +18406,12 @@
         "aui-graph-node",
         "aui-graph-noodle",
         "aui-graph-port"
+      ],
+      "examples": [
+        {
+          "description": "Enterprise SaaS Onboarding — 17 nodes, 19 connections.",
+          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 41.625rem; min-width: 92.125rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- Account Signup → Email Verification -->\n    <aui-graph-noodle from=\"sb-signup:right\" to=\"sb-verify:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Account Signup → SSO Configuration -->\n    <aui-graph-noodle from=\"sb-signup:right\" to=\"sb-sso:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Email Verification → Organization Setup -->\n    <aui-graph-noodle from=\"sb-verify:right\" to=\"sb-org:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- SSO Configuration → Role & Permission Matrix -->\n    <aui-graph-noodle from=\"sb-sso:right\" to=\"sb-roles:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Organization Setup → Data Import Wizard -->\n    <aui-graph-noodle from=\"sb-org:right\" to=\"sb-import:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Role & Permission Matrix → Integration Hub -->\n    <aui-graph-noodle from=\"sb-roles:right\" to=\"sb-integrate:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Role & Permission Matrix → API Key Provisioning -->\n    <aui-graph-noodle from=\"sb-roles:bottom\" to=\"sb-api:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- API Key Provisioning → Webhook Configuration -->\n    <aui-graph-noodle from=\"sb-api:right\" to=\"sb-webhook:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- API Key Provisioning → Sandbox Environment -->\n    <aui-graph-noodle from=\"sb-api:right\" to=\"sb-sandbox:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Data Import Wizard → Interactive Training -->\n    <aui-graph-noodle from=\"sb-import:right\" to=\"sb-training:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Integration Hub → Health Check Dashboard -->\n    <aui-graph-noodle from=\"sb-integrate:right\" to=\"sb-health:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Webhook Configuration → Health Check Dashboard -->\n    <aui-graph-noodle from=\"sb-webhook:right\" to=\"sb-health:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Sandbox Environment → Compliance Audit -->\n    <aui-graph-noodle from=\"sb-sandbox:right\" to=\"sb-compliance:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Interactive Training → Go-Live Checklist -->\n    <aui-graph-noodle from=\"sb-training:right\" to=\"sb-launch:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Health Check Dashboard → Go-Live Checklist -->\n    <aui-graph-noodle from=\"sb-health:right\" to=\"sb-launch:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Compliance Audit → Billing Activation -->\n    <aui-graph-noodle from=\"sb-compliance:right\" to=\"sb-billing:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Go-Live Checklist → CSM Handoff -->\n    <aui-graph-noodle from=\"sb-launch:right\" to=\"sb-csm:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Billing Activation → Support Escalation -->\n    <aui-graph-noodle from=\"sb-billing:right\" to=\"sb-support:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Go-Live Checklist → Billing Activation -->\n    <aui-graph-noodle from=\"sb-launch:bottom\" to=\"sb-billing:top\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- Account Signup -->\n    <aui-graph-node x=\"24\" y=\"186\" node-id=\"sb-signup\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Account Signup</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    <!-- Email Verification -->\n    <aui-graph-node x=\"224\" y=\"116\" node-id=\"sb-verify\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Email Verification</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    <!-- SSO Configuration -->\n    <aui-graph-node x=\"224\" y=\"256\" node-id=\"sb-sso\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">SSO Configuration</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    <!-- Organization Setup -->\n    <aui-graph-node x=\"424\" y=\"46\" node-id=\"sb-org\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Organization Setup</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    <!-- Role & Permission Matrix -->\n    <aui-graph-node x=\"424\" y=\"186\" node-id=\"sb-roles\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Role & Permission Matrix</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    <!-- API Key Provisioning -->\n    <aui-graph-node x=\"424\" y=\"326\" node-id=\"sb-api\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">API Key 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    <!-- Data Import Wizard -->\n    <aui-graph-node x=\"624\" y=\"46\" node-id=\"sb-import\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Data Import Wizard</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    <!-- Integration Hub -->\n    <aui-graph-node x=\"624\" y=\"186\" node-id=\"sb-integrate\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Integration Hub</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    <!-- Webhook Configuration -->\n    <aui-graph-node x=\"624\" y=\"326\" node-id=\"sb-webhook\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Webhook Configuration</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    <!-- Sandbox Environment -->\n    <aui-graph-node x=\"624\" y=\"466\" node-id=\"sb-sandbox\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Sandbox Environment</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    <!-- Interactive Training -->\n    <aui-graph-node x=\"824\" y=\"116\" node-id=\"sb-training\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Interactive Training</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    <!-- Health Check Dashboard -->\n    <aui-graph-node x=\"824\" y=\"256\" node-id=\"sb-health\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Health Check Dashboard</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 Audit -->\n    <aui-graph-node x=\"824\" y=\"396\" node-id=\"sb-compliance\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Compliance Audit</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    <!-- Go-Live Checklist -->\n    <aui-graph-node x=\"1024\" y=\"186\" node-id=\"sb-launch\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Go-Live Checklist</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    <!-- CSM Handoff -->\n    <aui-graph-node x=\"1224\" y=\"116\" node-id=\"sb-csm\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">CSM Handoff</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    <!-- Billing Activation -->\n    <aui-graph-node x=\"1024\" y=\"326\" node-id=\"sb-billing\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Billing 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    <!-- Support Escalation -->\n    <aui-graph-node x=\"1224\" y=\"326\" node-id=\"sb-support\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Support Escalation</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>"
+        }
       ]
     },
     {
@@ -17157,8 +18437,8 @@
       "kind": "card",
       "examples": [
         {
-          "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\">Project Settings</aui-heading>\n        <aui-text muted size=\"sm\">Make changes to your project here. Click save when you're done.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-field label=\"Name\" width=\"full\">\n          <aui-input placeholder=\"Acme Dashboard\"></aui-input>\n        </aui-field>\n        <aui-field label=\"Description\" description=\"This will be visible to all team members.\" width=\"full\">\n          <aui-textarea placeholder=\"A real-time analytics dashboard for the Acme team.\"></aui-textarea>\n        </aui-field>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button-group>\n      <aui-button primary grow=\"1\">Save changes</aui-button>\n      <aui-button scrim grow=\"1\">Cancel</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>\n",
-          "description": "Project settings form with name and description fields."
+          "description": "Card with header, form fields, and action footer.",
+          "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\">Project Settings</aui-heading>\n        <aui-text muted size=\"sm\">Make changes to your project here. Click save when you're done.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-field label=\"Name\" width=\"full\">\n          <aui-input placeholder=\"Acme Dashboard\"></aui-input>\n        </aui-field>\n        <aui-field label=\"Description\" description=\"This will be visible to all team members.\" width=\"full\">\n          <aui-textarea placeholder=\"A real-time analytics dashboard for the Acme team.\"></aui-textarea>\n        </aui-field>\n      </aui-stack>\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>"
         }
       ]
     },
@@ -17177,15 +18457,14 @@
         "aui-text",
         "aui-switch",
         "aui-button",
-        "aui-badge",
-        "aui-divider",
-        "aui-icon"
+        "aui-alert",
+        "aui-divider"
       ],
       "kind": "card",
       "examples": [
         {
-          "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\">Security Settings</aui-heading>\n        <aui-text muted size=\"sm\">Manage your account security preferences.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">Two-factor authentication</aui-heading>\n            <aui-text muted size=\"sm\">Verify via email or phone number.</aui-text>\n          </aui-stack>\n          <aui-button primary size=\"sm\">Enable</aui-button>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">Wallpaper tinting</aui-heading>\n            <aui-text muted size=\"sm\">Allow the wallpaper to be tinted.</aui-text>\n          </aui-stack>\n          <aui-switch></aui-switch>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n          <aui-icon name=\"check\" style=\"flex-shrink: 0;\"></aui-icon>\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">Profile verified</aui-heading>\n          </aui-stack>\n          <aui-icon name=\"caret-right\" muted></aui-icon>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>\n",
-          "description": "Security settings panel with 2FA button, wallpaper tinting switch, and verified profile row."
+          "description": "Settings card with toggles, descriptions, and grouped controls.",
+          "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\">Security Settings</aui-heading>\n        <aui-text muted size=\"sm\">Manage your account security preferences.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"4\">\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">Two-factor authentication</aui-heading>\n            <aui-text muted size=\"sm\">Verify via email or phone number.</aui-text>\n          </aui-stack>\n          <aui-button primary size=\"sm\">Enable</aui-button>\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>Wallpaper tinting</aui-heading>\n            <aui-switch checked></aui-switch>\n          </aui-stack>\n          <aui-text muted size=\"sm\">Allow the wallpaper to be tinted.</aui-text>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-alert success icon=\"check\">Your profile has been verified.</aui-alert>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n</aui-container>"
         }
       ]
     },
@@ -17196,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",
@@ -17205,14 +18483,13 @@
         "aui-text",
         "aui-icon",
         "aui-avatar",
-        "aui-divider",
         "aui-nav-item"
       ],
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered elevation=\"2\" max-width=\"xs\">\n  <aui-header>\n    <span slot=\"leading\"><aui-avatar square size=\"sm\"><img src=\"/icon.svg\" alt=\"Acme Inc\"></aui-avatar></span>\n    <span slot=\"content\"><aui-heading size=\"md\" weight=\"medium\">Acme Inc</aui-heading></span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"2\">\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=\"user\"></aui-icon>\n          Team\n        </aui-nav-item>\n        <aui-nav-item muted>\n          <aui-icon name=\"gear\"></aui-icon>\n          Settings\n        </aui-nav-item>\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\">\n        <aui-avatar size=\"sm\">AJ</aui-avatar>\n        <aui-stack gap=\"0\" spacer>\n          <aui-text size=\"sm\" weight=\"medium\">Alice Johnson</aui-text>\n          <aui-text muted size=\"xs\">alice@acme.com</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>\n",
-          "description": "App sidebar with active Dashboard item, three inactive links, and user footer."
+          "description": "Compact app sidebar with icon navigation and user footer.",
+          "html": "<aui-container kind=\"card\" bordered elevation=\"2\" max-width=\"xs\">\n  <aui-inset>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-avatar square size=\"sm\"><img src=\"/icon.svg\" alt=\"Acme Inc\"></aui-avatar>\n      <aui-heading size=\"md\">Acme Inc</aui-heading>\n    </aui-stack>\n  </aui-inset>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"2\">\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=\"user\"></aui-icon>\n          Team\n        </aui-nav-item>\n        <aui-nav-item muted>\n          <aui-icon name=\"gear\"></aui-icon>\n          Settings\n        </aui-nav-item>\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\">\n        <aui-avatar size=\"sm\">AJ</aui-avatar>\n        <aui-stack gap=\"0\" spacer>\n          <aui-text size=\"sm\" weight=\"medium\">Alice Johnson</aui-text>\n          <aui-text muted size=\"xs\">alice@acme.com</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
@@ -17237,8 +18514,8 @@
       "kind": "panel",
       "examples": [
         {
-          "html": "<aui-container kind=\"panel\" bordered max-width=\"md\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"xl\">Create your account</aui-heading>\n        <aui-text muted size=\"sm\">Get started in less than a minute.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"6\">\n        <aui-field label=\"Full name\" width=\"full\">\n          <aui-input placeholder=\"Jane Smith\" width=\"full\"></aui-input>\n        </aui-field>\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\" description=\"Must be at least 8 characters.\" width=\"full\">\n          <aui-input type=\"password\" placeholder=\"Choose a password\" width=\"full\"></aui-input>\n        </aui-field>\n        <aui-stack gap=\"2\">\n          <aui-button primary accent width=\"full\">Create account</aui-button>\n          <aui-text muted size=\"xs\">By signing up you agree to our <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"content\"><aui-text muted size=\"sm\">Already have an account? <a href=\"#\">Sign in</a></aui-text></span>\n  </aui-footer>\n</aui-container>\n",
-          "description": "Signup card with name, email, and password fields plus terms notice."
+          "description": "Signup card with name, email, password, and terms notice.",
+          "html": "<aui-container kind=\"panel\" bordered max-width=\"md\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"xl\">Create your account</aui-heading>\n        <aui-text muted size=\"sm\">Get started in less than a minute.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack>\n        <aui-field label=\"Full name\" width=\"full\">\n          <aui-input placeholder=\"Jane Smith\" width=\"full\"></aui-input>\n        </aui-field>\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\" description=\"Must be at least 8 characters.\" width=\"full\">\n          <aui-input type=\"password\" placeholder=\"Choose a password\" width=\"full\"></aui-input>\n        </aui-field>\n        <aui-stack gap=\"2\">\n          <aui-button primary accent width=\"full\">Create account</aui-button>\n          <aui-text muted size=\"xs\">By signing up you agree to our <a href=\"#\">Terms of Service</a> and <a href=\"#\">Privacy Policy</a>.</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"content\"><aui-text muted size=\"sm\">Already have an account? <a href=\"#\">Sign in</a></aui-text></span>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
@@ -17256,8 +18533,8 @@
       "kind": "widget",
       "examples": [
         {
-          "html": "<aui-wrap gap=\"3\">\n  <aui-container kind=\"widget\" bordered spacer style=\"min-width: 12rem;\">\n    <aui-inset>\n      <aui-stat label=\"Active Users\" value=\"12\" trend=\"up\" change=\"+3 today\"></aui-stat>\n    </aui-inset>\n  </aui-container>\n  <aui-container kind=\"widget\" bordered spacer style=\"min-width: 12rem;\">\n    <aui-inset>\n      <aui-stat label=\"Uptime\" value=\"99.9%\" success change=\"All systems operational\"></aui-stat>\n    </aui-inset>\n  </aui-container>\n  <aui-container kind=\"widget\" bordered spacer style=\"min-width: 12rem;\">\n    <aui-inset>\n      <aui-stat label=\"Open Issues\" value=\"3\" change=\"Needs review\"></aui-stat>\n    </aui-inset>\n  </aui-container>\n</aui-wrap>\n",
-          "description": "Three KPI stat cards using aui-stat with trend and status change text."
+          "description": "Row of compact KPI stat widgets.",
+          "html": "<aui-wrap gap=\"3\">\n  <aui-container kind=\"widget\" bordered spacer min-width=\"12\">\n    <aui-inset>\n      <aui-stat label=\"Active Users\" value=\"12\" trend=\"up\" change=\"+3 today\"></aui-stat>\n    </aui-inset>\n  </aui-container>\n  <aui-container kind=\"widget\" bordered spacer min-width=\"12\">\n    <aui-inset>\n      <aui-stat label=\"Uptime\" value=\"99.9%\" success change=\"All systems operational\"></aui-stat>\n    </aui-inset>\n  </aui-container>\n  <aui-container kind=\"widget\" bordered spacer min-width=\"12\">\n    <aui-inset>\n      <aui-stat label=\"Open Issues\" value=\"3\" change=\"Needs review\"></aui-stat>\n    </aui-inset>\n  </aui-container>\n</aui-wrap>"
         }
       ]
     },
@@ -17279,12 +18556,12 @@
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered shadow=\"2\" success max-width=\"md\">\n  <aui-inset>\n    <aui-stack gap=\"4\" align-items=\"center\" text=\"center\">\n      <aui-icon name=\"check-circle\" size=\"2xl\"></aui-icon>\n      <aui-heading size=\"xl\">Payment Successful</aui-heading>\n      <aui-text muted>Your subscription has been renewed. You'll receive a confirmation email shortly.</aui-text>\n      <aui-button primary width=\"full\">Go to Dashboard</aui-button>\n    </aui-stack>\n  </aui-inset>\n</aui-container>\n",
-          "description": "Success confirmation after payment."
+          "description": "Success confirmation after payment",
+          "html": "<aui-container kind=\"card\" bordered shadow=\"2\" success max-width=\"sm\">\n  <aui-inset>\n    <aui-stack gap=\"4\" align-items=\"center\" text=\"center\">\n      <aui-icon name=\"check-circle\" size=\"2xl\"></aui-icon>\n      <aui-heading size=\"xl\">Payment Successful</aui-heading>\n      <aui-text muted>Your subscription has been renewed. You'll receive a confirmation email shortly.</aui-text>\n      <aui-button primary width=\"full\">Go to Dashboard</aui-button>\n    </aui-stack>\n  </aui-inset>\n</aui-container>"
         },
         {
-          "html": "<aui-container kind=\"card\" bordered shadow=\"2\" danger max-width=\"md\">\n  <aui-inset>\n    <aui-stack gap=\"4\" align-items=\"center\" text=\"center\">\n      <aui-icon name=\"warning-circle\" size=\"2xl\"></aui-icon>\n      <aui-heading size=\"xl\">Something went wrong</aui-heading>\n      <aui-text muted>We couldn't process your request. Please try again or contact support if the issue persists.</aui-text>\n      <aui-button-group>\n        <aui-button outline width=\"full\">Contact Support</aui-button>\n        <aui-button primary width=\"full\">Try Again</aui-button>\n      </aui-button-group>\n    </aui-stack>\n  </aui-inset>\n</aui-container>\n",
-          "description": "Error state with retry and support actions."
+          "description": "Error state with retry and support actions",
+          "html": "<aui-container kind=\"card\" bordered shadow=\"2\" danger max-width=\"sm\">\n  <aui-inset>\n    <aui-stack gap=\"4\" align-items=\"center\" text=\"center\">\n      <aui-icon name=\"warning-circle\" size=\"2xl\"></aui-icon>\n      <aui-heading size=\"xl\">Something went wrong</aui-heading>\n      <aui-text muted>We couldn't process your request. Please try again or contact support if the issue persists.</aui-text>\n      <aui-button-group direction=\"column\">\n        <aui-button primary grow=\"1\" basis=\"0\">Try Again</aui-button>\n        <aui-button ghost grow=\"1\" basis=\"0\">Contact Support</aui-button>\n      </aui-button-group>\n    </aui-stack>\n  </aui-inset>\n</aui-container>"
         }
       ]
     },
@@ -17310,8 +18587,8 @@
       "kind": "card",
       "examples": [
         {
-          "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\">Suggested Labs</aui-heading>\n        <aui-text muted size=\"sm\">Based on your symptoms and family history</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-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">RF + Anti-CCP</aui-heading>\n            <aui-text muted size=\"sm\">Rheumatoid Arthritis markers</aui-text>\n          </aui-stack>\n          <aui-badge accent>RA</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">ESR + CRP</aui-heading>\n            <aui-text muted size=\"sm\">Inflammation levels</aui-text>\n          </aui-stack>\n          <aui-badge accent>RA / Lupus</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">TSH + Free T4</aui-heading>\n            <aui-text muted size=\"sm\">Thyroid function</aui-text>\n          </aui-stack>\n          <aui-badge accent>Hypothyroidism</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">ANA</aui-heading>\n            <aui-text muted size=\"sm\">Autoimmune screen</aui-text>\n          </aui-stack>\n          <aui-badge accent>Lupus</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">CBC + Ferritin</aui-heading>\n            <aui-text muted size=\"sm\">Anemia workup</aui-text>\n          </aui-stack>\n          <aui-badge accent>Iron Deficiency</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-stack gap=\"2\">\n      <aui-button primary width=\"full\">Order Now — Route to Dr. Martinez</aui-button>\n      <aui-button-group>\n        <aui-button scrim grow=\"1\">Add to Draft Order</aui-button>\n        <aui-button scrim grow=\"1\">Build Draft for Doctor</aui-button>\n      </aui-button-group>\n    </aui-stack>\n  </aui-footer>\n</aui-container>\n",
-          "description": "Suggested lab panel card with condition badges and physician routing actions."
+          "description": "Lab order card with categorized tests and routing actions.",
+          "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\">Suggested Labs</aui-heading>\n        <aui-text muted size=\"sm\">Based on your symptoms and family history</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-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">RF + Anti-CCP</aui-heading>\n            <aui-text muted size=\"sm\">Rheumatoid Arthritis markers</aui-text>\n          </aui-stack>\n          <aui-badge accent>RA</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">ESR + CRP</aui-heading>\n            <aui-text muted size=\"sm\">Inflammation levels</aui-text>\n          </aui-stack>\n          <aui-badge accent>RA / Lupus</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">TSH + Free T4</aui-heading>\n            <aui-text muted size=\"sm\">Thyroid function</aui-text>\n          </aui-stack>\n          <aui-badge accent>Hypothyroidism</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">ANA</aui-heading>\n            <aui-text muted size=\"sm\">Autoimmune screen</aui-text>\n          </aui-stack>\n          <aui-badge accent>Lupus</aui-badge>\n        </aui-stack>\n        <aui-divider></aui-divider>\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n          <aui-stack gap=\"1\" spacer>\n            <aui-heading size=\"md\">CBC + Ferritin</aui-heading>\n            <aui-text muted size=\"sm\">Anemia workup</aui-text>\n          </aui-stack>\n          <aui-badge accent>Iron Deficiency</aui-badge>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-stack gap=\"4\">\n      <aui-button primary width=\"full\">Order Now — Route to Dr. Martinez</aui-button>\n      <aui-button-group>\n        <aui-button scrim grow=\"1\" basis=\"0\">Add to Draft Order</aui-button>\n        <aui-button scrim grow=\"1\" basis=\"0\">Build Draft for Doctor</aui-button>\n      </aui-button-group>\n    </aui-stack>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
@@ -17328,6 +18605,12 @@
         "aui-graph-node",
         "aui-graph-noodle",
         "aui-graph-port"
+      ],
+      "examples": [
+        {
+          "description": "Supply Chain Network — 12 nodes, 13 connections.",
+          "html": "<aui-graph-ui connectable style=\"width: 100%; height: 37.25rem; min-width: 71.125rem;\">\n  <aui-graph-layer name=\"wires\" type=\"svg\">\n    <!-- Raw Material Supplier → Assembly Line -->\n    <aui-graph-noodle from=\"sc-raw:right\" to=\"sc-assembly:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Component Supplier A → Assembly Line -->\n    <aui-graph-noodle from=\"sc-comp-a:right\" to=\"sc-assembly:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Component Supplier B → Assembly Line -->\n    <aui-graph-noodle from=\"sc-comp-b:right\" to=\"sc-assembly:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Assembly Line → Quality Control -->\n    <aui-graph-noodle from=\"sc-assembly:right\" to=\"sc-qc:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Quality Control → Inventory Buffer -->\n    <aui-graph-noodle from=\"sc-qc:right\" to=\"sc-inventory:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Inventory Buffer → Distribution Hub East -->\n    <aui-graph-noodle from=\"sc-inventory:right\" to=\"sc-hub-east:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Inventory Buffer → Distribution Hub West -->\n    <aui-graph-noodle from=\"sc-inventory:right\" to=\"sc-hub-west:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Distribution Hub East → Retail Fulfillment -->\n    <aui-graph-noodle from=\"sc-hub-east:right\" to=\"sc-retail:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Distribution Hub West → Retail Fulfillment -->\n    <aui-graph-noodle from=\"sc-hub-west:right\" to=\"sc-retail:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Retail Fulfillment → Returns Processing -->\n    <aui-graph-noodle from=\"sc-retail:right\" to=\"sc-returns:left\" color=\"danger\" weight=\"2\"></aui-graph-noodle>\n    <!-- Returns Processing → Demand Forecast -->\n    <aui-graph-noodle from=\"sc-returns:right\" to=\"sc-demand:left\" color=\"accent\" weight=\"2\"></aui-graph-noodle>\n    <!-- Demand Forecast → Procurement Engine -->\n    <aui-graph-noodle from=\"sc-demand:left\" to=\"sc-procurement:right\" color=\"warning\" weight=\"2\"></aui-graph-noodle>\n    <!-- Procurement Engine → Assembly Line -->\n    <aui-graph-noodle from=\"sc-procurement:left\" to=\"sc-assembly:left\" color=\"warning\" weight=\"2\"></aui-graph-noodle>\n  </aui-graph-layer>\n  <aui-graph-layer name=\"content\">\n    <!-- Raw Material Supplier -->\n    <aui-graph-node x=\"24\" y=\"46\" node-id=\"sc-raw\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Raw Material Supplier</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    <!-- Component Supplier A -->\n    <aui-graph-node x=\"24\" y=\"186\" node-id=\"sc-comp-a\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Component Supplier A</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    <!-- Component Supplier B -->\n    <aui-graph-node x=\"24\" y=\"326\" node-id=\"sc-comp-b\">\n      <aui-container kind=\"card\" bordered padding=\"3\" accent>\n        <aui-text weight=\"medium\">Component Supplier B</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    <!-- Assembly Line -->\n    <aui-graph-node x=\"240\" y=\"186\" node-id=\"sc-assembly\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Assembly Line</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    <!-- Quality Control -->\n    <aui-graph-node x=\"456\" y=\"116\" node-id=\"sc-qc\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Quality Control</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    <!-- Inventory Buffer -->\n    <aui-graph-node x=\"456\" y=\"256\" node-id=\"sc-inventory\">\n      <aui-container kind=\"card\" bordered padding=\"3\" warning>\n        <aui-text weight=\"medium\">Inventory Buffer</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    <!-- Distribution Hub East -->\n    <aui-graph-node x=\"672\" y=\"116\" node-id=\"sc-hub-east\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Distribution Hub East</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    <!-- Distribution Hub West -->\n    <aui-graph-node x=\"672\" y=\"256\" node-id=\"sc-hub-west\">\n      <aui-container kind=\"card\" bordered padding=\"3\" success>\n        <aui-text weight=\"medium\">Distribution Hub West</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    <!-- Retail Fulfillment -->\n    <aui-graph-node x=\"888\" y=\"46\" node-id=\"sc-retail\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Retail Fulfillment</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    <!-- Returns Processing -->\n    <aui-graph-node x=\"888\" y=\"186\" node-id=\"sc-returns\">\n      <aui-container kind=\"card\" bordered padding=\"3\" danger>\n        <aui-text weight=\"medium\">Returns 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    <!-- Demand Forecast -->\n    <aui-graph-node x=\"888\" y=\"326\" node-id=\"sc-demand\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Demand Forecast</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    <!-- Procurement Engine -->\n    <aui-graph-node x=\"240\" y=\"396\" node-id=\"sc-procurement\">\n      <aui-container kind=\"card\" bordered padding=\"3\" info>\n        <aui-text weight=\"medium\">Procurement 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  </aui-graph-layer>\n</aui-graph-ui>"
+        }
       ]
     },
     {
@@ -17353,8 +18636,8 @@
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\" style=\"min-width: 22rem;\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">How did you hear about us?</aui-heading>\n        <aui-text muted size=\"sm\">Select all that apply.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-fieldset legend=\"Sources\" borderless>\n        <aui-field>\n          <aui-checkbox>Social Media</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Search Engine</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Friend or Colleague</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Blog or Article</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Other</aui-checkbox>\n        </aui-field>\n      </aui-fieldset>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button-group>\n      <aui-button scrim grow=\"1\">Skip</aui-button>\n      <aui-button primary grow=\"1\">Continue</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>\n",
-          "description": "Survey with checkbox options, header/content/footer structure, and skip/continue actions."
+          "description": "Survey question card with checkbox options and submit action.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\" min-width=\"22\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">How did you hear about us?</aui-heading>\n        <aui-text muted size=\"sm\">Select all that apply.</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-fieldset legend=\"Sources\" borderless>\n        <aui-field>\n          <aui-checkbox>Social Media</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Search Engine</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Friend or Colleague</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Blog or Article</aui-checkbox>\n        </aui-field>\n        <aui-field>\n          <aui-checkbox>Other</aui-checkbox>\n        </aui-field>\n      </aui-fieldset>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <aui-button-group>\n      <aui-button primary grow=\"1\" basis=\"0\">Continue</aui-button>\n      <aui-button scrim grow=\"1\" basis=\"0\">Skip</aui-button>\n    </aui-button-group>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
@@ -17380,8 +18663,8 @@
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"md\">\n  <aui-header>\n    <span slot=\"content\">\n      <aui-segmented-control value=\"codespaces\">\n        <aui-segment value=\"codespaces\">Codespaces</aui-segment>\n        <aui-segment value=\"local\">Local</aui-segment>\n      </aui-segmented-control>\n    </span>\n  </aui-header>\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"md\">Codespaces</aui-heading>\n        <aui-text muted size=\"sm\">Your workspaces in the cloud</aui-text>\n      </aui-stack>\n    </span>\n    <span slot=\"trailing\">\n      <aui-button label=\"Add\" icon-leading=\"plus\" scrim hide-label></aui-button>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"6\" align-items=\"center\" text=\"center\" style=\"padding: 1.5rem 0;\">\n        <div style=\"width: 6rem; height: 6rem; border-radius: var(--aui-radius); background: linear-gradient(135deg, var(--aui-control) 0%, var(--aui-panel) 100%); display: flex; align-items: center; justify-content: center;\">\n          <aui-icon name=\"gear\" size=\"3xl\" muted></aui-icon>\n        </div>\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"md\">No codespaces</aui-heading>\n          <aui-text muted size=\"sm\">You don't have any codespaces with this repository checked out</aui-text>\n        </aui-stack>\n        <aui-button primary accent>Create Codespace</aui-button>\n        <aui-text muted size=\"xs\"><a href=\"#\">Learn more about codespaces</a></aui-text>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"content\"><aui-text muted size=\"xs\">Codespace usage for this repository is paid for by <strong>AgentOS</strong>.</aui-text></span>\n  </aui-footer>\n</aui-container>\n",
-          "description": "Codespaces panel with tab selector and empty state."
+          "description": "Segmented control card with tab-switched content panels.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"md\">\n  <aui-header>\n    <span slot=\"content\">\n      <aui-segmented-control value=\"codespaces\">\n        <aui-segment value=\"codespaces\">Codespaces</aui-segment>\n        <aui-segment value=\"local\">Local</aui-segment>\n      </aui-segmented-control>\n    </span>\n  </aui-header>\n  <aui-header>\n    <aui-stack direction=\"row\" gap=\"2\" align-items=\"center\">\n      <aui-stack gap=\"1\" spacer>\n        <aui-heading size=\"md\">Codespaces</aui-heading>\n        <aui-text muted size=\"sm\">Your workspaces in the cloud</aui-text>\n      </aui-stack>\n      <aui-button label=\"Add\" icon-leading=\"plus\" scrim hide-label></aui-button>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack align-items=\"center\" text=\"center\" style=\"padding: 1.5rem 0;\">\n        <div style=\"width: 6rem; height: 6rem; border-radius: var(--aui-radius); background: linear-gradient(135deg, var(--aui-control) 0%, var(--aui-panel) 100%); display: flex; align-items: center; justify-content: center;\">\n          <aui-icon name=\"gear\" size=\"3xl\" muted></aui-icon>\n        </div>\n        <aui-stack gap=\"1\">\n          <aui-heading size=\"md\">No codespaces</aui-heading>\n          <aui-text muted size=\"sm\">You don't have any codespaces with this repository checked out</aui-text>\n        </aui-stack>\n        <aui-button primary accent>Create Codespace</aui-button>\n        <aui-text muted size=\"xs\"><a href=\"#\">Learn more about codespaces</a></aui-text>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"content\"><aui-text muted size=\"xs\">Codespace usage for this repository is paid for by <strong>AgentOS</strong>.</aui-text></span>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
@@ -17398,8 +18681,8 @@
       "kind": "card",
       "examples": [
         {
-          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-empty-state icon=\"users-three\" heading=\"No Team Members\" description=\"Invite your team to collaborate on this project.\">\n    <aui-button accent>Invite Members</aui-button>\n  </aui-empty-state>\n</aui-container>\n",
-          "description": "Team empty state with icon, heading, description, and invite button."
+          "description": "Empty state for team member lists with invite action.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-empty-state icon=\"users-three\" heading=\"No Team Members\" description=\"Invite your team to collaborate on this project.\">\n    <aui-button accent>Invite Members</aui-button>\n  </aui-empty-state>\n</aui-container>"
         }
       ]
     },
@@ -17422,8 +18705,64 @@
       "kind": "card",
       "examples": [
         {
-          "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-text size=\"sm\" spacer>Edge Requests</aui-text>\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-text size=\"sm\" spacer>Fast Data Transfer</aui-text>\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-text size=\"sm\" spacer>Monitoring Data Points</aui-text>\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-text size=\"sm\" spacer>Web Analytics Events</aui-text>\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-text size=\"sm\" spacer>ISR Writes</aui-text>\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-text size=\"sm\" spacer>Function Duration</aui-text>\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>\n",
-          "description": "Six billing line items with aui-progress-circle size=\"sm\" at varied fill levels."
+          "description": "Billing usage panel with progress circle rings and cost breakdown.",
+          "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>"
         }
       ]
     }