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

package/dist/docs/blocks/checkout-form.yaml

@@ -1,18 +1,29 @@
 name: checkout-form
 type: block
 summary: Payment form with card details and billing address.
-description: >
-  A structured checkout form for collecting payment information. Includes card
-  name, number, CVV, and expiry fields in a grid layout. The billing address
-  section uses aui-fieldset legend="Billing Address" (borderless) with a
-  "Same as shipping" checkbox, optional comments. Footer uses aui-button-group
-  for submit/cancel actions.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-fieldset, aui-input, aui-textarea, aui-checkbox, aui-button, aui-button-group, aui-divider]
+description: |
+  A structured checkout form for collecting payment information. Includes card name, number, CVV, and expiry fields in a grid layout. The billing address section uses aui-fieldset legend="Billing Address" (borderless) with a "Same as shipping" checkbox, optional comments. Footer uses aui-button-group for submit/cancel actions.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-field
+  - aui-fieldset
+  - aui-input
+  - aui-textarea
+  - aui-checkbox
+  - aui-button
+  - aui-button-group
+  - aui-divider
 kind: card
-
 examples:
-  - html: |
+  - description: Payment form with card details and billing address.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <span slot="leading">
@@ -24,15 +35,15 @@ examples:
         </aui-header>
         <aui-content>
           <aui-inset>
-            <aui-stack gap="6">
+            <aui-stack>
               <aui-field label="Name on Card" width="full">
                 <aui-input width="full" placeholder="John Doe"></aui-input>
               </aui-field>
               <aui-stack direction="row" gap="3">
-                <aui-field label="Card Number" width="full" grow="3">
+                <aui-field label="Card Number" width="full" grow="3" basis="0">
                   <aui-input width="full" placeholder="1234 5678 9012 3456"></aui-input>
                 </aui-field>
-                <aui-field label="CVV" grow="1">
+                <aui-field label="CVV" grow="1" basis="0">
                   <aui-input width="full" placeholder="123"></aui-input>
                 </aui-field>
               </aui-stack>
@@ -49,9 +60,8 @@ examples:
         </aui-content>
         <aui-footer>
           <aui-button-group>
-            <aui-button scrim grow="1">Cancel</aui-button>
-            <aui-button primary grow="1">Submit Payment</aui-button>
+            <aui-button primary grow="1" basis="0">Submit Payment</aui-button>
+            <aui-button scrim grow="1" basis="0">Cancel</aui-button>
           </aui-button-group>
         </aui-footer>
       </aui-container>
-    description: Payment form with card details, billing address toggle, comments, and submit/cancel actions.

package/dist/docs/blocks/clinical-trial.yaml

@@ -1,7 +1,183 @@
 name: clinical-trial
 type: block
 summary: Clinical Trial Pipeline — 13 nodes, 17 connections.
-description: >
-  Visual graph block rendered from the Clinical Trial Pipeline dataset using
-  aui-graph components with port-selector noodle connections.
-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 Clinical Trial Pipeline 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: Clinical Trial Pipeline — 13 nodes, 17 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 32.875rem; min-width: 79.625rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Protocol → Cohort Screening -->
+          <aui-graph-noodle from="ct-protocol:right" to="ct-cohort:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Protocol → Randomization Engine -->
+          <aui-graph-noodle from="ct-protocol:right" to="ct-randomize:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Cohort Screening → Randomization Engine -->
+          <aui-graph-noodle from="ct-cohort:right" to="ct-randomize:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Randomization Engine → Control Arm -->
+          <aui-graph-noodle from="ct-randomize:right" to="ct-control:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Randomization Engine → Treatment Arm A -->
+          <aui-graph-noodle from="ct-randomize:right" to="ct-treat-a:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Randomization Engine → Treatment Arm B -->
+          <aui-graph-noodle from="ct-randomize:right" to="ct-treat-b:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Control Arm → Primary Endpoint -->
+          <aui-graph-noodle from="ct-control:right" to="ct-primary:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Treatment Arm A → Primary Endpoint -->
+          <aui-graph-noodle from="ct-treat-a:right" to="ct-primary:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Treatment Arm A → Adverse Event Monitor -->
+          <aui-graph-noodle from="ct-treat-a:right" to="ct-adverse:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Treatment Arm B → Adverse Event Monitor -->
+          <aui-graph-noodle from="ct-treat-b:right" to="ct-adverse:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Treatment Arm B → Secondary Endpoint -->
+          <aui-graph-noodle from="ct-treat-b:right" to="ct-secondary:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Primary Endpoint → Interim Analysis -->
+          <aui-graph-noodle from="ct-primary:right" to="ct-interim:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Secondary Endpoint → Interim Analysis -->
+          <aui-graph-noodle from="ct-secondary:right" to="ct-interim:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Adverse Event Monitor → DSMB Review -->
+          <aui-graph-noodle from="ct-adverse:right" to="ct-dsmb:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Interim Analysis → DSMB Review -->
+          <aui-graph-noodle from="ct-interim:right" to="ct-dsmb:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- DSMB Review → Regulatory Filing -->
+          <aui-graph-noodle from="ct-dsmb:right" to="ct-regulatory:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Regulatory Filing → Publication -->
+          <aui-graph-noodle from="ct-regulatory:right" to="ct-publication:left" color="accent" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Protocol -->
+          <aui-graph-node x="24" y="186" node-id="ct-protocol">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Protocol</aui-text>
+              <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>
+          <!-- Cohort Screening -->
+          <aui-graph-node x="224" y="116" node-id="ct-cohort">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Cohort Screening</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>
+          <!-- Randomization Engine -->
+          <aui-graph-node x="224" y="256" node-id="ct-randomize">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Randomization Engine</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>
+          <!-- Control Arm -->
+          <aui-graph-node x="424" y="46" node-id="ct-control">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Control Arm</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>
+          <!-- Treatment Arm A -->
+          <aui-graph-node x="424" y="186" node-id="ct-treat-a">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Treatment Arm A</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>
+          <!-- Treatment Arm B -->
+          <aui-graph-node x="424" y="326" node-id="ct-treat-b">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Treatment Arm B</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>
+          <!-- Adverse Event Monitor -->
+          <aui-graph-node x="624" y="46" node-id="ct-adverse">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Adverse Event Monitor</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>
+          <!-- Primary Endpoint -->
+          <aui-graph-node x="624" y="186" node-id="ct-primary">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Primary Endpoint</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>
+          <!-- Secondary Endpoint -->
+          <aui-graph-node x="624" y="326" node-id="ct-secondary">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Secondary Endpoint</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>
+          <!-- Interim Analysis -->
+          <aui-graph-node x="824" y="116" node-id="ct-interim">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Interim Analysis</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>
+          <!-- DSMB Review -->
+          <aui-graph-node x="824" y="256" node-id="ct-dsmb">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">DSMB 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>
+          <!-- Regulatory Filing -->
+          <aui-graph-node x="1024" y="116" node-id="ct-regulatory">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Regulatory Filing</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>
+          <!-- Publication -->
+          <aui-graph-node x="1024" y="256" node-id="ct-publication">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Publication</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-container>
+          </aui-graph-node>
+        </aui-graph-layer>
+      </aui-graph-ui>

package/dist/docs/blocks/contributors.yaml

@@ -1,17 +1,24 @@
 name: contributors
 type: block
 summary: Contributors card showing overlapping avatar group with count and overflow link.
-description: >
-  A card displaying project contributors as an overlapping avatar group with
-  a count badge and automatic +N overflow counter. Footer shows total
-  contributor count as a text link. Use for open source projects, team pages,
-  or community sections.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-avatar-group, aui-badge]
+description: |
+  A card displaying project contributors as an overlapping avatar group with a count badge and automatic +N overflow counter. Footer shows total contributor count as a text link. Use for open source projects, team pages, or community sections.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-avatar-group
+  - aui-badge
 kind: card
-
 examples:
-  - html: |
+  - description: Contributors card showing overlapping avatar group with count and overflow link.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <span slot="leading">
@@ -44,7 +51,6 @@ examples:
           </aui-inset>
         </aui-content>
         <aui-footer>
-          <span slot="leading"><aui-text muted size="sm" style="text-decoration: underline; cursor: pointer;">+ 810 contributors</aui-text></span>
+          <span slot="leading"><aui-text muted size="sm"><a href="#">+ 810 contributors</a></aui-text></span>
         </aui-footer>
       </aui-container>
-    description: Contributors avatar group with count badge and overflow link.

package/dist/docs/blocks/cyber-threat.yaml

@@ -1,7 +1,161 @@
 name: cyber-threat
 type: block
 summary: Cyber Threat Intelligence — 12 nodes, 14 connections.
-description: >
-  Visual graph block rendered from the Cyber Threat Intelligence dataset using
-  aui-graph components with port-selector noodle connections.
-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 Cyber Threat Intelligence 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: Cyber Threat Intelligence — 12 nodes, 14 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 32.875rem; min-width: 84.625rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Network Sensor → SIEM Aggregator -->
+          <aui-graph-noodle from="cy-sensor:right" to="cy-siem:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Endpoint Agent → SIEM Aggregator -->
+          <aui-graph-noodle from="cy-endpoint:right" to="cy-siem:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Threat Intel Feed → SIEM Aggregator -->
+          <aui-graph-noodle from="cy-intel:right" to="cy-siem:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- SIEM Aggregator → Threat Classifier -->
+          <aui-graph-noodle from="cy-siem:right" to="cy-classify:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- SIEM Aggregator → IOC Enrichment -->
+          <aui-graph-noodle from="cy-siem:right" to="cy-ioc:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Threat Classifier → Triage Engine -->
+          <aui-graph-noodle from="cy-classify:right" to="cy-triage:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- IOC Enrichment → Triage Engine -->
+          <aui-graph-noodle from="cy-ioc:right" to="cy-triage:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Triage Engine → Incident Response -->
+          <aui-graph-noodle from="cy-triage:right" to="cy-incident:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Triage Engine → Containment Action -->
+          <aui-graph-noodle from="cy-triage:right" to="cy-contain:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Incident Response → Forensic Analysis -->
+          <aui-graph-noodle from="cy-incident:right" to="cy-forensic:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Incident Response → Recovery -->
+          <aui-graph-noodle from="cy-incident:right" to="cy-recovery:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Containment Action → Recovery -->
+          <aui-graph-noodle from="cy-contain:right" to="cy-recovery:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Forensic Analysis → Post-Mortem -->
+          <aui-graph-noodle from="cy-forensic:left" to="cy-postmortem:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Recovery → Post-Mortem -->
+          <aui-graph-noodle from="cy-recovery:left" to="cy-postmortem:left" color="accent" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Network Sensor -->
+          <aui-graph-node x="24" y="46" node-id="cy-sensor">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Network Sensor</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>
+          <!-- Endpoint Agent -->
+          <aui-graph-node x="24" y="186" node-id="cy-endpoint">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Endpoint Agent</aui-text>
+              <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>
+          <!-- Threat Intel Feed -->
+          <aui-graph-node x="24" y="326" node-id="cy-intel">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Threat Intel Feed</aui-text>
+              <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-container>
+          </aui-graph-node>
+          <!-- SIEM Aggregator -->
+          <aui-graph-node x="240" y="186" node-id="cy-siem">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">SIEM Aggregator</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>
+          <!-- Threat Classifier -->
+          <aui-graph-node x="456" y="116" node-id="cy-classify">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Threat Classifier</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>
+          <!-- IOC Enrichment -->
+          <aui-graph-node x="456" y="256" node-id="cy-ioc">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">IOC Enrichment</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>
+          <!-- Triage Engine -->
+          <aui-graph-node x="672" y="186" node-id="cy-triage">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Triage Engine</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>
+          <!-- Incident Response -->
+          <aui-graph-node x="888" y="116" node-id="cy-incident">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Incident Response</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>
+          <!-- Containment Action -->
+          <aui-graph-node x="888" y="256" node-id="cy-contain">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Containment Action</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>
+          <!-- Forensic Analysis -->
+          <aui-graph-node x="1104" y="46" node-id="cy-forensic">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Forensic Analysis</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>
+          <!-- Recovery -->
+          <aui-graph-node x="1104" y="186" node-id="cy-recovery">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Recovery</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>
+          <!-- Post-Mortem -->
+          <aui-graph-node x="1104" y="326" node-id="cy-postmortem">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Post-Mortem</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-container>
+          </aui-graph-node>
+        </aui-graph-layer>
+      </aui-graph-ui>

package/dist/docs/blocks/dashboard-layout.yaml

@@ -1,22 +1,30 @@
 name: dashboard-layout
 type: block
 summary: Application shell with sidebar, page header, and content grid.
-description: >
-  A production-ready app shell combining a compact sidebar with a
-  main content area. The sidebar uses card kind with elevation for
-  visual separation, aui-nav-item elements with an active state, and a
-  user footer. The main area has a welcoming page header and a
-  responsive grid of aui-stat widgets. This is a starting composition —
-  the content area would hold tables, charts, or lists in a real app.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-wrap, aui-heading, aui-text, aui-stat, aui-icon, aui-avatar, aui-divider, aui-nav-item]
+description: |
+  A production-ready app shell combining a compact sidebar with a main content area. The sidebar uses card kind with elevation for visual separation, aui-nav-item elements with an active state, and a user footer. The main area has a welcoming page header and a responsive grid of aui-stat widgets. This is a starting composition — the content area would hold tables, charts, or lists in a real app.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-wrap
+  - aui-heading
+  - aui-text
+  - aui-stat
+  - aui-icon
+  - aui-avatar
+  - aui-divider
+  - aui-nav-item
 kind: card
-
 examples:
-  - html: |
+  - description: Application shell with sidebar, page header, and content grid.
+    html: |-
       <aui-stack direction="row" gap="0" style="min-height: 28rem;">
         <!-- Sidebar -->
-        <aui-container kind="card" elevation="2" style="width: 14rem; flex-shrink: 0;">
+        <aui-container kind="card" elevation="2" shrink="0" style="width: 14rem;">
           <aui-header>
             <span slot="leading"><aui-avatar square size="sm"><img src="/icon.svg" alt="Acme Inc"></aui-avatar></span>
             <span slot="content"><aui-heading size="md" weight="medium">Acme Inc</aui-heading></span>
@@ -59,7 +67,7 @@ examples:
         <!-- Main -->
         <aui-stack gap="0" spacer>
           <!-- Page header -->
-          <aui-header style="padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--aui-border-muted);">
+          <aui-header class="aui-dashboard-layout-page-header">
             <span slot="leading">
               <aui-stack gap="1">
                 <aui-heading size="xl">Dashboard</aui-heading>
@@ -69,19 +77,19 @@ examples:
           </aui-header>
 
           <!-- Content -->
-          <aui-stack gap="3" style="padding: 1.5rem;">
+          <aui-stack padding="6">
             <aui-wrap gap="3">
-              <aui-container kind="widget" bordered spacer style="min-width: 11rem;">
+              <aui-container kind="widget" bordered spacer min-width="11">
                 <aui-inset>
                   <aui-stat label="Revenue" value="$24,500" trend="up" change="+12%"></aui-stat>
                 </aui-inset>
               </aui-container>
-              <aui-container kind="widget" bordered spacer style="min-width: 11rem;">
+              <aui-container kind="widget" bordered spacer min-width="11">
                 <aui-inset>
                   <aui-stat label="Active Users" value="1,240" trend="up" change="+8%"></aui-stat>
                 </aui-inset>
               </aui-container>
-              <aui-container kind="widget" bordered spacer style="min-width: 11rem;">
+              <aui-container kind="widget" bordered spacer min-width="11">
                 <aui-inset>
                   <aui-stat label="Open Tasks" value="17" change="3 overdue"></aui-stat>
                 </aui-inset>
@@ -100,4 +108,3 @@ examples:
           </aui-stack>
         </aui-stack>
       </aui-stack>
-    description: Full dashboard shell with sidebar, page header, aui-stat widgets, and content placeholder.