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

package/dist/docs/blocks/dashboard-kpi-grid.yaml

@@ -0,0 +1,72 @@
+name: dashboard-kpi-grid
+type: block
+summary: Dashboard page with title, date range, period selector, and 4-card KPI grid with sparklines.
+description: |
+  A dashboard overview layout. Header has a title, date range subtitle, and a segmented control for time period selection (24h/7d/30d/90d). Below is a responsive 4-card KPI grid using aui-stat components, each with label, large value, trend direction, change amount, and an aui-sparkline child for inline visualization. Intent attrs (danger, success) color the value when trend direction differs from sentiment.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-stat
+  - aui-segmented-control
+  - aui-segment
+  - aui-sparkline
+kind: widget
+examples:
+  - description: Dashboard page with title, date range, period selector, and 4-card KPI grid with sparklines.
+    html: |-
+      <aui-stack gap="4">
+
+        <!-- Dashboard header -->
+        <aui-stack direction="row" gap="3" align-items="center">
+          <aui-stack gap="1" spacer>
+            <aui-heading size="xl">Overview</aui-heading>
+            <aui-text muted size="sm">Mon, Mar 10 – Sun, Mar 16</aui-text>
+          </aui-stack>
+          <aui-segmented-control value="7d" size="sm">
+            <aui-segment value="24h">24h</aui-segment>
+            <aui-segment value="7d" selected>7d</aui-segment>
+            <aui-segment value="30d">30d</aui-segment>
+            <aui-segment value="90d">90d</aui-segment>
+          </aui-segmented-control>
+        </aui-stack>
+
+        <!-- KPI grid -->
+        <aui-stack direction="row" gap="3" wrap>
+
+          <aui-container kind="widget" bordered spacer min-width="12">
+            <aui-inset>
+              <aui-stat label="Revenue" value="$48.2k" trend="up" change="+12.3%">
+                <aui-sparkline values="40,55,70,60,80,75,95" color="1" highlight="last"></aui-sparkline>
+              </aui-stat>
+            </aui-inset>
+          </aui-container>
+
+          <aui-container kind="widget" bordered spacer min-width="12">
+            <aui-inset>
+              <aui-stat label="Users" value="2,847" trend="up" change="+8.1%">
+                <aui-sparkline values="50,60,55,70,65,75,90" color="2" highlight="last"></aui-sparkline>
+              </aui-stat>
+            </aui-inset>
+          </aui-container>
+
+          <aui-container kind="widget" bordered spacer min-width="12">
+            <aui-inset>
+              <aui-stat label="Conversion" value="4.2%" trend="down" change="−0.3%" danger>
+                <aui-sparkline values="70,60,50,55,45,40,35" color="3" highlight="last"></aui-sparkline>
+              </aui-stat>
+            </aui-inset>
+          </aui-container>
+
+          <aui-container kind="widget" bordered spacer min-width="12">
+            <aui-inset>
+              <aui-stat label="Latency" value="142ms" trend="down" change="−18ms" success>
+                <aui-sparkline values="60,55,65,50,45,40,35" color="4" highlight="last"></aui-sparkline>
+              </aui-stat>
+            </aui-inset>
+          </aui-container>
+
+        </aui-stack>
+      </aui-stack>

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

@@ -1,22 +1,29 @@
 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-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 +66,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 +76,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 +107,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-activity-log.yaml

@@ -0,0 +1,99 @@
+name: data-activity-log
+type: block
+summary: Chronological activity feed with date groups, semantic icons, and filter controls.
+description: |
+  A panel listing recent activity entries grouped by date. Header has a title and a segmented control for filtering (All/Changes/Comments). Each date group has an uppercase label and a list of activity items. Each item uses a solid-color avatar with a semantic icon (deploy=success, comment=warning, update=accent, create=success, delete=danger), a text description with bold actor and entity names, optional monospace detail, and a timestamp. Groups are separated by dividers.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-segmented-control
+  - aui-segment
+  - aui-divider
+kind: panel
+examples:
+  - description: Chronological activity feed with date groups, semantic icons, and filter controls.
+    html: |-
+      <aui-container kind="panel" bordered max-width="lg">
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-heading size="lg" spacer>Activity</aui-heading>
+            <aui-segmented-control value="all" size="sm">
+              <aui-segment value="all" selected>All</aui-segment>
+              <aui-segment value="changes">Changes</aui-segment>
+              <aui-segment value="comments">Comments</aui-segment>
+            </aui-segmented-control>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+
+              <!-- Today group -->
+              <aui-stack gap="3">
+                <aui-heading group>Today</aui-heading>
+
+                <aui-stack gap="3">
+                  <aui-stack direction="row" gap="3">
+                    <aui-avatar size="xs" success shrink="0" solid><aui-icon name="arrow-up" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Sarah Chen</strong> deployed <strong>v2.4.1</strong> to production</aui-heading>
+                      <aui-text size="xs" muted style="font-family: var(--aui-font-mono);">commit a1b2c3d</aui-text>
+                      <aui-text size="xs" muted>2 minutes ago</aui-text>
+                    </aui-stack>
+                  </aui-stack>
+
+                  <aui-stack direction="row" gap="3">
+                    <aui-avatar size="xs" warning shrink="0" solid><aui-icon name="chat-dots" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Alex Rivera</strong> commented on <strong>Auth flow redesign</strong></aui-heading>
+                      <aui-text size="xs" muted>15 minutes ago</aui-text>
+                    </aui-stack>
+                  </aui-stack>
+
+                  <aui-stack direction="row" gap="3">
+                    <aui-avatar size="xs" accent shrink="0" solid><aui-icon name="pencil" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Maria Santos</strong> updated <strong>API rate limits</strong> to 1000 req/min</aui-heading>
+                      <aui-text size="xs" muted>1 hour ago</aui-text>
+                    </aui-stack>
+                  </aui-stack>
+                </aui-stack>
+              </aui-stack>
+
+              <aui-divider></aui-divider>
+
+              <!-- Yesterday group -->
+              <aui-stack gap="3">
+                <aui-heading group>Yesterday</aui-heading>
+
+                <aui-stack gap="3">
+                  <aui-stack direction="row" gap="3">
+                    <aui-avatar size="xs" success shrink="0" solid><aui-icon name="plus" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>James Wilson</strong> created <strong>Mobile app project</strong></aui-heading>
+                      <aui-text size="xs" muted style="font-family: var(--aui-font-mono);">3 files added</aui-text>
+                      <aui-text size="xs" muted>Yesterday at 4:32 PM</aui-text>
+                    </aui-stack>
+                  </aui-stack>
+
+                  <aui-stack direction="row" gap="3">
+                    <aui-avatar size="xs" danger shrink="0" solid><aui-icon name="trash" size="xs"></aui-icon></aui-avatar>
+                    <aui-stack gap="1" spacer>
+                      <aui-heading size="sm"><strong>Sarah Chen</strong> deleted <strong>Legacy endpoints</strong></aui-heading>
+                      <aui-text size="xs" muted>Yesterday at 2:15 PM</aui-text>
+                    </aui-stack>
+                  </aui-stack>
+                </aui-stack>
+              </aui-stack>
+
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>

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/data-metric-card.yaml

@@ -0,0 +1,50 @@
+name: data-metric-card
+type: block
+summary: Row of KPI metric widgets with sparklines and trend indicators.
+description: |
+  A responsive row of four compact metric cards using the aui-stat component. Each stat displays a label, large numeric value, trend direction with change amount, and an aui-sparkline child for inline visualization. Cards wrap responsively via flex-wrap. Each card uses the widget kind for compact density.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-stat
+  - aui-sparkline
+kind: widget
+examples:
+  - description: Row of KPI metric widgets with sparklines and trend indicators.
+    html: |-
+      <aui-stack direction="row" gap="3" wrap>
+
+        <aui-container kind="widget" bordered spacer min-width="10">
+          <aui-inset>
+            <aui-stat label="Monthly Revenue" value="$48.2k" trend="up" change="+12.3%">
+              <aui-sparkline values="40,55,35,70,60,80,95" color="1" highlight="last"></aui-sparkline>
+            </aui-stat>
+          </aui-inset>
+        </aui-container>
+
+        <aui-container kind="widget" bordered spacer min-width="10">
+          <aui-inset>
+            <aui-stat label="Active Users" value="2,847" trend="up" change="+8.1%">
+              <aui-sparkline values="60,45,55,50,70,65,85" color="2" highlight="last"></aui-sparkline>
+            </aui-stat>
+          </aui-inset>
+        </aui-container>
+
+        <aui-container kind="widget" bordered spacer min-width="10">
+          <aui-inset>
+            <aui-stat label="Churn Rate" value="3.2%" trend="up" change="+0.4%" danger>
+              <aui-sparkline values="80,70,60,50,55,40,35" color="3" highlight="last"></aui-sparkline>
+            </aui-stat>
+          </aui-inset>
+        </aui-container>
+
+        <aui-container kind="widget" bordered spacer min-width="10">
+          <aui-inset>
+            <aui-stat label="Avg. Session" value="4m 32s" trend="up" change="+0:18">
+              <aui-sparkline values="50,60,55,70,65,75,90" color="4" highlight="last"></aui-sparkline>
+            </aui-stat>
+          </aui-inset>
+        </aui-container>
+
+      </aui-stack>