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

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.

package/dist/docs/blocks/ddx-workflow.yaml

@@ -1,9 +1,205 @@
 name: ddx-workflow
 type: block
 summary: Clinical differential diagnosis workflow with Bayesian reasoning and feedback loops.
-description: >
-  A visual node graph representing a clinical DDx decision process. Starts with
-  patient intake, branches into symptom collection and medical history, then flows
-  through hypothesis generation, Bayesian evidence updates, targeted testing, and
-  pruning with feedback loops for continuous monitoring and specialist consultation.
-components: [aui-container, aui-text, aui-graph-ui, aui-graph-layer, aui-graph-node, aui-graph-noodle, aui-graph-port]
+description: |
+  A visual node graph representing a clinical DDx decision process. Starts with patient intake, branches into symptom collection and medical history, then flows through hypothesis generation, Bayesian evidence updates, targeted testing, and pruning with feedback loops for continuous monitoring and specialist consultation.
+components:
+  - aui-container
+  - aui-text
+  - aui-graph-ui
+  - aui-graph-layer
+  - aui-graph-node
+  - aui-graph-noodle
+  - aui-graph-port
+examples:
+  - description: Clinical differential diagnosis workflow with Bayesian reasoning and feedback loops.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 35rem; min-width: 89rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Patient Intake → Symptom Collection -->
+          <aui-graph-noodle from="dx-intake:right" to="dx-symptoms:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Patient Intake → Medical History Review -->
+          <aui-graph-noodle from="dx-intake:right" to="dx-history:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Symptom Collection → Hypothesis Generator -->
+          <aui-graph-noodle from="dx-symptoms:right" to="dx-hypothesis:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Medical History Review → Hypothesis Generator -->
+          <aui-graph-noodle from="dx-history:right" to="dx-hypothesis:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Hypothesis Generator → Bayesian Evidence Update -->
+          <aui-graph-noodle from="dx-hypothesis:right" to="dx-bayesian:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Hypothesis Generator → Diagnostic Gap Analysis -->
+          <aui-graph-noodle from="dx-hypothesis:right" to="dx-gap:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Bayesian Evidence Update → Targeted Testing -->
+          <aui-graph-noodle from="dx-bayesian:right" to="dx-test:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Diagnostic Gap Analysis → Targeted Testing -->
+          <aui-graph-noodle from="dx-gap:right" to="dx-test:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Targeted Testing → Hypothesis Pruning -->
+          <aui-graph-noodle from="dx-test:right" to="dx-prune:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Hypothesis Pruning → Diagnostic Confirmation -->
+          <aui-graph-noodle from="dx-prune:right" to="dx-confirm:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Hypothesis Pruning → Bayesian Evidence Update (feedback loop) -->
+          <aui-graph-noodle from="dx-prune:top" to="dx-bayesian:bottom" color="warning" weight="2"></aui-graph-noodle>
+          <!-- Diagnostic Confirmation → Treatment Pathway -->
+          <aui-graph-noodle from="dx-confirm:bottom" to="dx-treatment:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Treatment Pathway → Continuous Monitoring -->
+          <aui-graph-noodle from="dx-treatment:right" to="dx-monitor:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Continuous Monitoring → Hypothesis Generator (feedback loop) -->
+          <aui-graph-noodle from="dx-monitor:bottom" to="dx-hypothesis:bottom" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Hypothesis Generator → Lab Results Engine -->
+          <aui-graph-noodle from="dx-hypothesis:bottom" to="dx-lab:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Lab Results Engine → Imaging Analysis -->
+          <aui-graph-noodle from="dx-lab:right" to="dx-imaging:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Imaging Analysis → Specialist Consult -->
+          <aui-graph-noodle from="dx-imaging:right" to="dx-specialist:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Specialist Consult → Hypothesis Pruning -->
+          <aui-graph-noodle from="dx-specialist:top" to="dx-prune:bottom" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Treatment Pathway → Pharmacy Reconciliation -->
+          <aui-graph-noodle from="dx-treatment:bottom" to="dx-pharmacy:left" color="accent" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Patient Intake -->
+          <aui-graph-node x="24" y="186" node-id="dx-intake">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Patient Intake</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>
+          <!-- Symptom Collection -->
+          <aui-graph-node x="224" y="116" node-id="dx-symptoms">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Symptom Collection</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>
+          <!-- Medical History Review -->
+          <aui-graph-node x="224" y="256" node-id="dx-history">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Medical History 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>
+          <!-- Hypothesis Generator -->
+          <aui-graph-node x="424" y="186" node-id="dx-hypothesis">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Hypothesis Generator</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>
+          <!-- Bayesian Evidence Update -->
+          <aui-graph-node x="624" y="116" node-id="dx-bayesian">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Bayesian Evidence Update</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>
+          <!-- Diagnostic Gap Analysis -->
+          <aui-graph-node x="624" y="256" node-id="dx-gap">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Diagnostic Gap 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>
+          <!-- Targeted Testing -->
+          <aui-graph-node x="824" y="116" node-id="dx-test">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Targeted Testing</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>
+          <!-- Hypothesis Pruning -->
+          <aui-graph-node x="824" y="256" node-id="dx-prune">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Hypothesis Pruning</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>
+          <!-- Diagnostic Confirmation -->
+          <aui-graph-node x="1024" y="116" node-id="dx-confirm">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Diagnostic Confirmation</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 Pathway -->
+          <aui-graph-node x="1024" y="256" node-id="dx-treatment">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Treatment Pathway</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>
+          <!-- Continuous Monitoring -->
+          <aui-graph-node x="1224" y="186" node-id="dx-monitor">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Continuous Monitoring</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>
+          <!-- Lab Results Engine -->
+          <aui-graph-node x="424" y="396" node-id="dx-lab">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Lab Results 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>
+          <!-- Imaging Analysis -->
+          <aui-graph-node x="624" y="396" node-id="dx-imaging">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Imaging 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>
+          <!-- Specialist Consult -->
+          <aui-graph-node x="824" y="396" node-id="dx-specialist">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Specialist Consult</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>
+          <!-- Pharmacy Reconciliation -->
+          <aui-graph-node x="1224" y="396" node-id="dx-pharmacy">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Pharmacy Reconciliation</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/empty-state.yaml

@@ -1,21 +1,18 @@
 name: empty-state
 type: block
 summary: Centered placeholder for empty content areas with a call-to-action.
-description: >
-  A card shown when a section has no data to display. Centered layout
-  with a large muted icon, heading, descriptive text, and a primary
-  action button to guide the user toward their first step. Use this
-  to replace blank space in lists, tables, or dashboards so users
-  always have a clear path forward.
-
-components: [aui-container, aui-empty-state, aui-button]
+description: |
+  A card shown when a section has no data to display. Centered layout with a large muted icon, heading, descriptive text, and a primary action button to guide the user toward their first step. Use this to replace blank space in lists, tables, or dashboards so users always have a clear path forward.
+components:
+  - aui-container
+  - aui-empty-state
+  - aui-button
 kind: card
-
 examples:
-  - html: |
+  - description: Centered placeholder for empty content areas with a call-to-action.
+    html: |-
       <aui-container kind="card" bordered max-width="sm">
         <aui-empty-state icon="star" heading="No projects yet" description="Create your first project to get started. Projects help you organize your work and collaborate with your team.">
           <aui-button accent>Create project</aui-button>
         </aui-empty-state>
       </aui-container>
-    description: Empty state prompting the user to create their first project.

package/dist/docs/blocks/env-variables.yaml

@@ -1,16 +1,24 @@
 name: env-variables
 type: block
 summary: Environment variables panel with masked secrets and deploy action.
-description: >
-  A panel listing environment variable key-value pairs. Keys use monospace
-  font. Secret values are masked with dots; public values show their content.
-  Footer uses aui-button-group for edit and deploy actions.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-input, aui-button, aui-button-group]
+description: |
+  A panel listing environment variable key-value pairs. Keys use monospace font. Secret values are masked with dots; public values show their content. Footer uses aui-button-group for edit and deploy actions.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-input
+  - aui-button
+  - aui-button-group
 kind: card
-
 examples:
-  - html: |
+  - description: Environment variables panel with masked secrets and deploy action.
+    html: |-
       <aui-container kind="card" bordered max-width="md">
         <aui-header>
           <span slot="leading">
@@ -23,24 +31,25 @@ examples:
         <aui-content>
           <aui-inset>
             <aui-stack gap="2">
-              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.5rem 0.75rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
-                <aui-text size="sm" weight="medium" spacer style="font-family: var(--aui-font-family-mono);">DATABASE_URL</aui-text>
-                <aui-text muted size="sm" style="font-family: var(--aui-font-family-mono); letter-spacing: 0.1em;">········</aui-text>
+              <aui-stack direction="row" gap="2" align-items="center" class="aui-env-variables-row">
+                <aui-text size="sm" weight="medium" font="mono" style="white-space: nowrap;">DATABASE_URL</aui-text>
+                <aui-text muted size="sm" spacer font="mono" style="letter-spacing: 0.1em; text-align: end;">········</aui-text>
               </aui-stack>
-              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.5rem 0.75rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
-                <aui-text size="sm" weight="medium" spacer style="font-family: var(--aui-font-family-mono);">NEXT_PUBLIC_API</aui-text>
-                <aui-text muted size="sm" style="font-family: var(--aui-font-family-mono);">https://api.example.com</aui-text>
+              <aui-stack direction="row" gap="2" align-items="center" class="aui-env-variables-row">
+                <aui-text size="sm" weight="medium" font="mono" style="white-space: nowrap;">NEXT_PUBLIC_API</aui-text>
+                <aui-text muted size="sm" spacer font="mono" truncate style="text-align: end;">https://api.example.com</aui-text>
               </aui-stack>
-              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.5rem 0.75rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
-                <aui-text size="sm" weight="medium" spacer style="font-family: var(--aui-font-family-mono);">STRIPE_SECRET</aui-text>
-                <aui-text muted size="sm" style="font-family: var(--aui-font-family-mono); letter-spacing: 0.1em;">········</aui-text>
+              <aui-stack direction="row" gap="2" align-items="center" class="aui-env-variables-row">
+                <aui-text size="sm" weight="medium" font="mono" style="white-space: nowrap;">STRIPE_SECRET</aui-text>
+                <aui-text muted size="sm" spacer font="mono" style="letter-spacing: 0.1em; text-align: end;">········</aui-text>
               </aui-stack>
             </aui-stack>
           </aui-inset>
         </aui-content>
         <aui-footer>
-          <span slot="leading"><aui-button outline size="sm">Edit</aui-button></span>
-          <span slot="trailing"><aui-button primary accent size="sm">Deploy</aui-button></span>
+          <aui-button-group>
+            <aui-button primary grow="1" basis="0">Deploy</aui-button>
+            <aui-button scrim grow="1" basis="0">Edit</aui-button>
+          </aui-button-group>
         </aui-footer>
       </aui-container>
-    description: Environment variables panel with masked secrets and deploy action.