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

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

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

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

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

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

@@ -1,17 +1,22 @@
 name: announcement-card
 type: block
 summary: Announcement card with image area, description, and contextual footer actions.
-description: >
-  A card featuring a tall image or illustration area at top, followed by
-  a title, description, and footer with a primary action and a contextual
-  badge or label. Use for product announcements, deprecation notices, or
-  feature highlights.
-
-components: [aui-container, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-badge, aui-button]
+description: |
+  A card featuring a tall image or illustration area at top, followed by a title, description, and footer with a primary action and a contextual badge or label. Use for product announcements, deprecation notices, or feature highlights.
+components:
+  - aui-container
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-badge
+  - aui-button
 kind: card
-
 examples:
-  - html: |
+  - description: Announcement card with image area, description, and contextual footer actions.
+    html: |-
       <aui-container kind="card" bordered max-width="sm" style="overflow: hidden;">
         <div style="height: 12rem; background: linear-gradient(135deg, var(--aui-control) 0%, var(--aui-panel) 100%);"></div>
         <aui-content>
@@ -27,4 +32,3 @@ examples:
           <span slot="leading"><aui-button primary>Create Query</aui-button></span>
         </aui-footer>
       </aui-container>
-    description: Deprecation announcement with gradient image placeholder and warning badge.

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

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

package/dist/docs/blocks/bpm-process.yaml

@@ -1,7 +1,219 @@
 name: bpm-process
 type: block
 summary: Cross-Functional BPM — 16 nodes, 20 connections.
-description: >
-  Visual graph block rendered from the Cross-Functional BPM dataset using
-  aui-graph components with port-selector noodle connections.
-components: [aui-container, aui-text, aui-graph-ui, aui-graph-layer, aui-graph-node, aui-graph-noodle, aui-graph-port]
+description: |
+  Visual graph block rendered from the Cross-Functional BPM dataset using aui-graph components with port-selector noodle connections.
+components:
+  - aui-container
+  - aui-text
+  - aui-graph-ui
+  - aui-graph-layer
+  - aui-graph-node
+  - aui-graph-noodle
+  - aui-graph-port
+examples:
+  - description: Cross-Functional BPM — 16 nodes, 20 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 45.375rem; min-width: 91.875rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Customer Request → Self-Service Portal -->
+          <aui-graph-noodle from="bp-request:right" to="bp-portal:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Customer Request → Lead Qualification -->
+          <aui-graph-noodle from="bp-request:bottom" to="bp-qualify:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Self-Service Portal → Lead Qualification -->
+          <aui-graph-noodle from="bp-portal:bottom" to="bp-qualify:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Lead Qualification → Quote Generation -->
+          <aui-graph-noodle from="bp-qualify:right" to="bp-quote:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Quote Generation → Legal Review -->
+          <aui-graph-noodle from="bp-quote:bottom" to="bp-review:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Quote Generation → Credit Assessment -->
+          <aui-graph-noodle from="bp-quote:bottom" to="bp-credit:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Quote Generation → Contract Negotiation -->
+          <aui-graph-noodle from="bp-quote:right" to="bp-negotiate:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Legal Review → Compliance Check -->
+          <aui-graph-noodle from="bp-review:right" to="bp-compliance:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Compliance Check → Digital Signature -->
+          <aui-graph-noodle from="bp-compliance:right" to="bp-sign:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Contract Negotiation → Digital Signature -->
+          <aui-graph-noodle from="bp-negotiate:bottom" to="bp-sign:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Credit Assessment → Invoice Generation -->
+          <aui-graph-noodle from="bp-credit:right" to="bp-invoice:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Invoice Generation → Payment Processing -->
+          <aui-graph-noodle from="bp-invoice:right" to="bp-payment:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Invoice Generation → Service Provisioning -->
+          <aui-graph-noodle from="bp-invoice:bottom" to="bp-provision:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Digital Signature → Onboarding Workflow -->
+          <aui-graph-noodle from="bp-sign:right" to="bp-onboard:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Payment Processing → Account Activation -->
+          <aui-graph-noodle from="bp-payment:bottom" to="bp-activate:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Service Provisioning → Account Activation -->
+          <aui-graph-noodle from="bp-provision:right" to="bp-activate:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Account Activation → Onboarding Workflow -->
+          <aui-graph-noodle from="bp-activate:top" to="bp-onboard:bottom" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Onboarding Workflow → Customer Feedback -->
+          <aui-graph-noodle from="bp-onboard:top" to="bp-feedback:right" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Account Activation → Escalation Manager -->
+          <aui-graph-noodle from="bp-activate:right" to="bp-escalation:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Escalation Manager → Contract Negotiation -->
+          <aui-graph-noodle from="bp-escalation:top" to="bp-negotiate:bottom" color="danger" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Customer Request -->
+          <aui-graph-node x="24" y="46" node-id="bp-request">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Customer Request</aui-text>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Self-Service Portal -->
+          <aui-graph-node x="260" y="46" node-id="bp-portal">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Self-Service Portal</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Customer Feedback -->
+          <aui-graph-node x="980" y="46" node-id="bp-feedback">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Customer Feedback</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Lead Qualification -->
+          <aui-graph-node x="260" y="166" node-id="bp-qualify">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Lead Qualification</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Quote Generation -->
+          <aui-graph-node x="500" y="166" node-id="bp-quote">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Quote Generation</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Contract Negotiation -->
+          <aui-graph-node x="740" y="166" node-id="bp-negotiate">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Contract Negotiation</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Legal Review -->
+          <aui-graph-node x="500" y="286" node-id="bp-review">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Legal Review</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Compliance Check -->
+          <aui-graph-node x="740" y="286" node-id="bp-compliance">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Compliance Check</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Digital Signature -->
+          <aui-graph-node x="980" y="286" node-id="bp-sign">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Digital Signature</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Credit Assessment -->
+          <aui-graph-node x="500" y="406" node-id="bp-credit">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Credit Assessment</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Invoice Generation -->
+          <aui-graph-node x="740" y="406" node-id="bp-invoice">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Invoice Generation</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Payment Processing -->
+          <aui-graph-node x="980" y="406" node-id="bp-payment">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Payment Processing</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Service Provisioning -->
+          <aui-graph-node x="740" y="526" node-id="bp-provision">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Service Provisioning</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Account Activation -->
+          <aui-graph-node x="980" y="526" node-id="bp-activate">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Account Activation</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Onboarding Workflow -->
+          <aui-graph-node x="1220" y="286" node-id="bp-onboard">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Onboarding Workflow</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Escalation Manager -->
+          <aui-graph-node x="1220" y="526" node-id="bp-escalation">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Escalation Manager</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+        </aui-graph-layer>
+      </aui-graph-ui>

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

@@ -1,17 +1,20 @@
 name: chart-activity
 type: block
 summary: Weekly activity chart with labeled columns and rounded bars.
-description: >
-  A card showing a 7-day activity grid. Each column has a day label and a
-  tall container with a rounded bar showing the day's activity level. The
-  bar height is proportional to the value. Use for fitness summaries,
-  commit frequency, or daily usage patterns.
-
-components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text]
+description: |
+  A card showing a 7-day activity grid. Each column has a day label and a tall container with a rounded bar showing the day's activity level. The bar height is proportional to the value. Use for fitness summaries, commit frequency, or daily usage patterns.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
 kind: card
-
 examples:
-  - html: |
+  - description: Weekly activity chart with labeled columns and rounded bars.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <span slot="leading">
@@ -70,4 +73,3 @@ examples:
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: Weekly activity bars with day labels showing fitness load.

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

@@ -1,17 +1,21 @@
 name: chart-card
 type: block
 summary: Simple vertical bar chart card with month labels.
-description: >
-  A card showing a 6-month bar chart built with CSS. Header has the
-  chart title and date range, content shows proportional bars with
-  month labels, footer shows a trend summary. The simplest chart
-  pattern — one data series, one color, clear labels.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text]
+description: |
+  A card showing a 6-month bar chart built with CSS. Header has the chart title and date range, content shows proportional bars with month labels, footer shows a trend summary. The simplest chart pattern — one data series, one color, clear labels.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
 kind: card
-
 examples:
-  - html: |
+  - description: Simple vertical bar chart card with month labels.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <span slot="leading">
@@ -24,7 +28,7 @@ examples:
         <aui-content>
           <aui-inset>
             <aui-stack gap="1">
-              <aui-stack direction="row" gap="1" align-items="end" spacer style="min-height: 8rem;">
+              <aui-stack direction="row" gap="1" align-items="end" style="height: 10rem;">
                 <div style="flex: 1; height: 45%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
                 <div style="flex: 1; height: 72%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
                 <div style="flex: 1; height: 58%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
@@ -52,4 +56,3 @@ examples:
           </span>
         </aui-footer>
       </aui-container>
-    description: Simple 6-month visitor bar chart with trend footer.