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

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.

package/dist/docs/blocks/data-eng-dag.yaml

@@ -1,9 +1,225 @@
 name: data-eng-dag
 type: block
 summary: Airflow-style data engineering DAG with medallion architecture and quality gates.
-description: >
-  A visual directed acyclic graph representing a modern data engineering pipeline.
-  Ingests from S3, Kafka, PostgreSQL CDC, and REST APIs through schema validation,
-  deduplication, and PII scrubbing into a Bronze/Silver/Gold medallion lakehouse
-  architecture with quality checks, aggregation, and BI dashboard refresh.
-components: [aui-container, aui-text, aui-graph-ui, aui-graph-layer, aui-graph-node, aui-graph-noodle, aui-graph-port]
+description: |
+  A visual directed acyclic graph representing a modern data engineering pipeline. Ingests from S3, Kafka, PostgreSQL CDC, and REST APIs through schema validation, deduplication, and PII scrubbing into a Bronze/Silver/Gold medallion lakehouse architecture with quality checks, aggregation, and BI dashboard refresh.
+components:
+  - aui-container
+  - aui-text
+  - aui-graph-ui
+  - aui-graph-layer
+  - aui-graph-node
+  - aui-graph-noodle
+  - aui-graph-port
+examples:
+  - description: Airflow-style data engineering DAG with medallion architecture and quality gates.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 39rem; min-width: 89rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- S3 Raw Bucket → Schema Validator -->
+          <aui-graph-noodle from="de-s3-raw:right" to="de-schema-val:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Kafka Stream → Schema Validator -->
+          <aui-graph-noodle from="de-kafka:right" to="de-schema-val:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Kafka Stream → Deduplication -->
+          <aui-graph-noodle from="de-kafka:right" to="de-dedup:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- PostgreSQL CDC → Deduplication -->
+          <aui-graph-noodle from="de-postgres:right" to="de-dedup:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- PostgreSQL CDC → PII Scrubber -->
+          <aui-graph-noodle from="de-postgres:right" to="de-pii:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- REST API Ingest → PII Scrubber -->
+          <aui-graph-noodle from="de-api-ingest:right" to="de-pii:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Schema Validator → Bronze Layer -->
+          <aui-graph-noodle from="de-schema-val:right" to="de-bronze:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Deduplication → Bronze Layer -->
+          <aui-graph-noodle from="de-dedup:right" to="de-bronze:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- PII Scrubber → Bronze Layer -->
+          <aui-graph-noodle from="de-pii:right" to="de-bronze:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Bronze Layer → Spark Cleaning Job -->
+          <aui-graph-noodle from="de-bronze:right" to="de-spark-clean:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Bronze Layer → dbt Transform Models -->
+          <aui-graph-noodle from="de-bronze:right" to="de-dbt-models:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Bronze Layer → Great Expectations QA -->
+          <aui-graph-noodle from="de-bronze:right" to="de-quality:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Spark Cleaning Job → Silver Layer -->
+          <aui-graph-noodle from="de-spark-clean:right" to="de-silver:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- dbt Transform Models → Silver Layer -->
+          <aui-graph-noodle from="de-dbt-models:right" to="de-silver:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Great Expectations QA → Pipeline Alert -->
+          <aui-graph-noodle from="de-quality:bottom" to="de-alert:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Great Expectations QA → Silver Layer -->
+          <aui-graph-noodle from="de-quality:right" to="de-silver:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Silver Layer → Aggregation Engine -->
+          <aui-graph-noodle from="de-silver:bottom" to="de-agg:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Silver Layer → Gold Layer -->
+          <aui-graph-noodle from="de-silver:right" to="de-gold:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Aggregation Engine → Data Warehouse Sync -->
+          <aui-graph-noodle from="de-agg:right" to="de-warehouse:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Gold Layer → Data Warehouse Sync -->
+          <aui-graph-noodle from="de-gold:bottom" to="de-warehouse:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Data Warehouse Sync → BI Dashboard Refresh -->
+          <aui-graph-noodle from="de-warehouse:bottom" to="de-dashboard:top" color="accent" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- S3 Raw Bucket -->
+          <aui-graph-node x="24" y="46" node-id="de-s3-raw">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">S3 Raw Bucket</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>
+          <!-- Kafka Stream -->
+          <aui-graph-node x="24" y="186" node-id="de-kafka">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Kafka Stream</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>
+          <!-- PostgreSQL CDC -->
+          <aui-graph-node x="24" y="326" node-id="de-postgres">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">PostgreSQL CDC</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>
+          <!-- REST API Ingest -->
+          <aui-graph-node x="24" y="466" node-id="de-api-ingest">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">REST API Ingest</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>
+          <!-- Schema Validator -->
+          <aui-graph-node x="260" y="116" node-id="de-schema-val">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Schema Validator</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>
+          <!-- Deduplication -->
+          <aui-graph-node x="260" y="256" node-id="de-dedup">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Deduplication</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>
+          <!-- PII Scrubber -->
+          <aui-graph-node x="260" y="396" node-id="de-pii">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">PII Scrubber</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>
+          <!-- Bronze Layer (Iceberg) -->
+          <aui-graph-node x="500" y="186" node-id="de-bronze">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Bronze Layer (Iceberg)</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>
+          <!-- Spark Cleaning Job -->
+          <aui-graph-node x="740" y="116" node-id="de-spark-clean">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Spark Cleaning Job</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>
+          <!-- dbt Transform Models -->
+          <aui-graph-node x="740" y="256" node-id="de-dbt-models">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">dbt Transform Models</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>
+          <!-- Great Expectations QA -->
+          <aui-graph-node x="740" y="396" node-id="de-quality">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Great Expectations QA</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>
+          <!-- Silver Layer -->
+          <aui-graph-node x="980" y="186" node-id="de-silver">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Silver Layer</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>
+          <!-- Aggregation Engine -->
+          <aui-graph-node x="980" y="326" node-id="de-agg">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Aggregation 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>
+          <!-- Gold Layer (Analytics) -->
+          <aui-graph-node x="1220" y="116" node-id="de-gold">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Gold Layer (Analytics)</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>
+          <!-- Data Warehouse Sync -->
+          <aui-graph-node x="1220" y="256" node-id="de-warehouse">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Data Warehouse Sync</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>
+          <!-- BI Dashboard Refresh -->
+          <aui-graph-node x="1220" y="396" node-id="de-dashboard">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">BI Dashboard Refresh</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>
+          <!-- Pipeline Alert -->
+          <aui-graph-node x="980" y="466" node-id="de-alert">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Pipeline Alert</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/date-picker.yaml

@@ -1,17 +1,19 @@
 name: date-picker
 type: block
 summary: Calendar date picker inside a bordered card.
-description: >
-  A date selection card wrapping the aui-calendar component. Shows
-  the calendar with a card surface and border for visual containment.
-  Use as a standalone picker or compose inside dialogs, popovers,
-  or form layouts. Supports single selection and range mode.
-
-components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-calendar]
+description: |
+  A date selection card wrapping the aui-calendar component. Shows the calendar with a card surface and border for visual containment. Use as a standalone picker or compose inside dialogs, popovers, or form layouts. Supports single selection and range mode.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-calendar
 kind: card
-
 examples:
-  - html: |
+  - description: Calendar date picker inside a bordered card.
+    html: |-
       <aui-container kind="card" bordered max-width="sm">
         <aui-header>
           <span slot="leading">
@@ -27,4 +29,3 @@ examples:
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: Calendar picker inside a card with header context.