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

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.16",
+  "generated": "2026-03-22T04:11:44.159Z",
   "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>"
         }
       ]
     },
@@ -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.\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.\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",
@@ -2783,8 +2823,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 +3639,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 +4204,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 +4377,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 +4943,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 +7622,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 +8341,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 +8370,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 +8795,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 +8886,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 +11776,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 +12065,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 +13453,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 +13487,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 +13624,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>"
         }
       ]
     },
@@ -16189,12 +16430,12 @@
       "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>"
         }
       ]
     },
@@ -16217,8 +16458,8 @@
       "kind": "card",
       "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": "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>"
         }
       ]
     },
@@ -16235,6 +16476,12 @@
         "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>"
+        }
       ]
     },
     {
@@ -16254,8 +16501,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\">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": "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>"
         }
       ]
     },
@@ -16277,8 +16524,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\">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": "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>"
         }
       ]
     },
@@ -16301,8 +16548,8 @@
       "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\">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": "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>"
         }
       ]
     },
@@ -16324,8 +16571,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\">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": "Grouped vertical bar chart comparing two data series.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Visitors by Device</aui-heading>\n        <aui-text muted size=\"sm\">January – June 2026</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"1\">\n        <!-- Bars: paired groups as direct children of align-items=\"end\" row -->\n        <aui-stack direction=\"row\" gap=\"3\" align-items=\"end\" spacer style=\"height: 10rem;\">\n          <!-- Chrome: Desktop 55%, Mobile 40% -->\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 100%;\">\n            <div style=\"flex: 1; height: 55%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n            <div style=\"flex: 1; height: 40%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </aui-stack>\n          <!-- Safari: Desktop 45%, Mobile 50% -->\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 100%;\">\n            <div style=\"flex: 1; height: 45%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n            <div style=\"flex: 1; height: 50%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </aui-stack>\n          <!-- Firefox: Desktop 70%, Mobile 90% -->\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 100%;\">\n            <div style=\"flex: 1; height: 70%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n            <div style=\"flex: 1; height: 90%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </aui-stack>\n          <!-- Edge: Desktop 35%, Mobile 30% -->\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 100%;\">\n            <div style=\"flex: 1; height: 35%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n            <div style=\"flex: 1; height: 30%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </aui-stack>\n          <!-- Other: Desktop 25%, Mobile 20% -->\n          <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 100%;\">\n            <div style=\"flex: 1; height: 25%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n            <div style=\"flex: 1; height: 20%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          </aui-stack>\n        </aui-stack>\n        <!-- Category labels row -->\n        <aui-stack direction=\"row\" gap=\"3\">\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Chrome</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Safari</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Firefox</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Edge</aui-text>\n          <aui-text muted size=\"xs\" spacer align-items=\"center\">Other</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"md\">Mobile overtook Desktop in March</aui-heading>\n        <aui-text muted size=\"sm\">Showing Desktop (light) and Mobile (dark) visitors</aui-text>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
@@ -16347,8 +16594,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\">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": "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>"
         }
       ]
     },
@@ -16372,8 +16619,8 @@
       "kind": "card",
       "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": "Wide chart card with stat summaries and dense bar visualization.",
+          "html": "<aui-container kind=\"card\" bordered>\n  <aui-header>\n    <aui-stack direction=\"row\" align-items=\"center\">\n      <aui-stack gap=\"1\" spacer>\n        <aui-heading size=\"lg\">Total Visitors</aui-heading>\n        <aui-text muted size=\"sm\">Last 3 months</aui-text>\n      </aui-stack>\n      <aui-stack direction=\"row\">\n        <aui-stat label=\"Desktop\" value=\"24,828\"></aui-stat>\n        <aui-stat label=\"Mobile\" value=\"25,010\"></aui-stat>\n      </aui-stack>\n    </aui-stack>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack direction=\"row\" gap=\"1\" align-items=\"end\" spacer style=\"height: 10rem;\" data-chart-bars>\n        <aui-bar label=\"Apr 1 · 3,120\" style=\"height: 35%;\"></aui-bar>\n        <aui-bar label=\"Apr 8 · 4,890\" style=\"height: 55%;\"></aui-bar>\n        <aui-bar label=\"Apr 15 · 3,740\" style=\"height: 42%;\"></aui-bar>\n        <aui-bar label=\"Apr 22 · 6,050\" style=\"height: 68%;\"></aui-bar>\n        <aui-bar label=\"Apr 29 · 4,010\" style=\"height: 45%;\"></aui-bar>\n        <aui-bar label=\"May 6 · 6,940\" style=\"height: 78%;\"></aui-bar>\n        <aui-bar label=\"May 13 · 4,630\" style=\"height: 52%;\"></aui-bar>\n        <aui-bar label=\"May 20 · 5,340\" style=\"height: 60%;\"></aui-bar>\n        <aui-bar label=\"May 27 · 8,010\" style=\"height: 90%;\" highlighted></aui-bar>\n        <aui-bar label=\"Jun 3 · 6,410\" style=\"height: 72%;\"></aui-bar>\n        <aui-bar label=\"Jun 10 · 4,270\" style=\"height: 48%;\"></aui-bar>\n        <aui-bar label=\"Jun 17 · 3,380\" style=\"height: 38%;\" highlighted></aui-bar>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"content\"><aui-text muted size=\"sm\">April 1 – June 29, 2026</aui-text></span>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
@@ -16395,8 +16642,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\">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": "Vertical bar chart with value labels above each bar.",
+          "html": "<aui-container kind=\"card\" bordered max-width=\"prose\">\n  <aui-header>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"lg\">Monthly Visitors</aui-heading>\n        <aui-text muted size=\"sm\">January – June 2026</aui-text>\n      </aui-stack>\n    </span>\n  </aui-header>\n  <aui-content>\n    <aui-inset>\n      <aui-stack gap=\"1\">\n        <!-- Value labels row -->\n        <aui-stack direction=\"row\" gap=\"2\">\n          <aui-text muted size=\"xs\" spacer text=\"center\">186</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">305</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">237</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">73</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">209</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">214</aui-text>\n        </aui-stack>\n        <!-- Bars: direct children of align-items=\"end\" row so height % resolves against 8rem -->\n        <aui-stack direction=\"row\" gap=\"2\" align-items=\"end\" spacer style=\"height: 10rem;\">\n          <div style=\"flex: 1; height: 45%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 75%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 58%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 18%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 51%; background: var(--aui-chart-2); border-radius: var(--aui-radius);\"></div>\n          <div style=\"flex: 1; height: 52%; background: var(--aui-chart-1); border-radius: var(--aui-radius);\"></div>\n        </aui-stack>\n        <!-- Month labels row -->\n        <aui-stack direction=\"row\" gap=\"2\">\n          <aui-text muted size=\"xs\" spacer text=\"center\">Jan</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">Feb</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">Mar</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">Apr</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">May</aui-text>\n          <aui-text muted size=\"xs\" spacer text=\"center\">Jun</aui-text>\n        </aui-stack>\n      </aui-stack>\n    </aui-inset>\n  </aui-content>\n  <aui-footer>\n    <span slot=\"leading\">\n      <aui-stack gap=\"1\">\n        <aui-heading size=\"md\">February peaked at 305 visitors</aui-heading>\n        <aui-text muted size=\"sm\">Showing total visitors for the last 6 months</aui-text>\n      </aui-stack>\n    </span>\n  </aui-footer>\n</aui-container>"
         }
       ]
     },
@@ -16426,8 +16673,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\">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": "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>"
         }
       ]
     },
@@ -16444,6 +16691,12 @@
         "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>"
+        }
       ]
     },
     {
@@ -16467,8 +16720,8 @@
       "kind": "card",
       "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": "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>"
         }
       ]
     },
@@ -16485,6 +16738,12 @@
         "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>"
+        }
       ]
     },
     {
@@ -16511,8 +16770,8 @@
       "kind": "card",
       "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": "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>"
         }
       ]
     },
@@ -16529,6 +16788,12 @@
         "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>"
+        }
       ]
     },
     {
@@ -16547,8 +16812,8 @@
       "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": "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>"
         }
       ]
     },
@@ -16565,6 +16830,12 @@
         "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>"
+        }
       ]
     },
     {
@@ -16580,8 +16851,8 @@
       "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": "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>"
         }
       ]
     },
@@ -16606,8 +16877,8 @@
       "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": "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>"
         }
       ]
     },
@@ -16633,8 +16904,8 @@
       "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": "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>"
         }
       ]
     },
@@ -16651,6 +16922,12 @@
         "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>"
+        }
       ]
     },
     {
@@ -16696,8 +16973,8 @@
       "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": [
         {
-          "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": "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>"
         }
       ]
     },
@@ -16714,6 +16991,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>"
+        }
       ]
     },
     {
@@ -16737,8 +17020,8 @@
       "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 +17044,8 @@
       "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>"
         }
       ]
     },
@@ -16789,8 +17072,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 +17094,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 +17120,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 +17147,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 +17175,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 +17204,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 +17222,12 @@
         "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>"
+        }
       ]
     },
     {
@@ -16962,8 +17251,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 +17269,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 +17294,8 @@
       "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>"
         }
       ]
     },
@@ -17023,8 +17318,8 @@
       "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>"
         }
       ]
     },
@@ -17041,6 +17336,12 @@
         "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>"
+        }
       ]
     },
     {
@@ -17064,8 +17365,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 +17388,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>"
         }
       ]
     },
@@ -17114,8 +17415,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 +17433,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 +17464,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>"
         }
       ]
     },
@@ -17184,8 +17491,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\">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>"
         }
       ]
     },
@@ -17211,8 +17518,8 @@
       "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 +17544,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 +17563,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 +17586,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 +17617,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 +17635,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 +17666,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 +17693,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 +17711,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 +17735,8 @@
       "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>"
         }
       ]
     }