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

package/dist/docs/blocks/ml-pipeline.yaml

@@ -1,7 +1,166 @@
 name: ml-pipeline
 type: block
 summary: ML Training Pipeline — 12 nodes, 14 connections.
-description: >
-  Visual graph block rendered from the ML Training Pipeline dataset using
-  aui-graph components with port-selector noodle connections.
-components: [aui-container, aui-text, aui-graph-ui, aui-graph-layer, aui-graph-node, aui-graph-noodle, aui-graph-port]
+description: |
+  Visual graph block rendered from the ML Training Pipeline dataset using aui-graph components with port-selector noodle connections.
+components:
+  - aui-container
+  - aui-text
+  - aui-graph-ui
+  - aui-graph-layer
+  - aui-graph-node
+  - aui-graph-noodle
+  - aui-graph-port
+examples:
+  - description: ML Training Pipeline — 12 nodes, 14 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 37.25rem; min-width: 84.625rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Data Lake → Feature Store -->
+          <aui-graph-noodle from="ml-lake:right" to="ml-features:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Schema Validator → Feature Store -->
+          <aui-graph-noodle from="ml-schema:right" to="ml-features:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Feature Store → Training Cluster GPU -->
+          <aui-graph-noodle from="ml-features:right" to="ml-train:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Feature Store → Hyperparameter Tuner -->
+          <aui-graph-noodle from="ml-features:right" to="ml-hyper:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Training Cluster GPU → Validation Split -->
+          <aui-graph-noodle from="ml-train:right" to="ml-validate:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Hyperparameter Tuner → Training Cluster GPU -->
+          <aui-graph-noodle from="ml-hyper:right" to="ml-train:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Validation Split → Model Registry -->
+          <aui-graph-noodle from="ml-validate:right" to="ml-registry:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Model Registry → A/B Test Gate -->
+          <aui-graph-noodle from="ml-registry:right" to="ml-abtest:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Model Registry → Canary Deploy -->
+          <aui-graph-noodle from="ml-registry:right" to="ml-canary:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- A/B Test Gate → Production Endpoint -->
+          <aui-graph-noodle from="ml-abtest:right" to="ml-prod:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Canary Deploy → Production Endpoint -->
+          <aui-graph-noodle from="ml-canary:right" to="ml-prod:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Production Endpoint → Drift Monitor -->
+          <aui-graph-noodle from="ml-prod:right" to="ml-drift:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Drift Monitor → Retraining Trigger -->
+          <aui-graph-noodle from="ml-drift:right" to="ml-retrain:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Retraining Trigger → Feature Store -->
+          <aui-graph-noodle from="ml-retrain:bottom" to="ml-features:bottom" color="warning" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Data Lake -->
+          <aui-graph-node x="24" y="116" node-id="ml-lake">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Data Lake</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>
+          <!-- Schema Validator -->
+          <aui-graph-node x="24" y="256" node-id="ml-schema">
+            <aui-container kind="card" bordered padding="3" accent>
+              <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-container>
+          </aui-graph-node>
+          <!-- Feature Store -->
+          <aui-graph-node x="240" y="186" node-id="ml-features">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Feature Store</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>
+          <!-- Training Cluster GPU -->
+          <aui-graph-node x="456" y="116" node-id="ml-train">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Training Cluster GPU</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>
+          <!-- Hyperparameter Tuner -->
+          <aui-graph-node x="456" y="256" node-id="ml-hyper">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Hyperparameter Tuner</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>
+          <!-- Validation Split -->
+          <aui-graph-node x="672" y="116" node-id="ml-validate">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Validation Split</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>
+          <!-- Model Registry -->
+          <aui-graph-node x="672" y="256" node-id="ml-registry">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Model Registry</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>
+          <!-- A/B Test Gate -->
+          <aui-graph-node x="888" y="116" node-id="ml-abtest">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">A/B Test Gate</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>
+          <!-- Canary Deploy -->
+          <aui-graph-node x="888" y="256" node-id="ml-canary">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Canary Deploy</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>
+          <!-- Production Endpoint -->
+          <aui-graph-node x="1104" y="116" node-id="ml-prod">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Production Endpoint</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Drift Monitor -->
+          <aui-graph-node x="1104" y="256" node-id="ml-drift">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Drift Monitor</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Retraining Trigger -->
+          <aui-graph-node x="1104" y="396" node-id="ml-retrain">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Retraining Trigger</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+        </aui-graph-layer>
+      </aui-graph-ui>

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

@@ -1,21 +1,24 @@
 name: nav-card
 type: block
 summary: Compact clickable card for navigation menus.
-description: >
-  A widget-sized interactive card that navigates on click.
-  Shows an icon in a square avatar, a title, a description,
-  and a trailing chevron. Uses interactive and href for
-  click-to-navigate behavior.
-
-components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon]
+description: |
+  A widget-sized interactive card that navigates on click. Shows an icon in a square avatar, a title, a description, and a trailing chevron. Uses interactive and href for click-to-navigate behavior.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
 kind: widget
-
 examples:
-  - html: |
+  - description: Compact clickable card for navigation menus.
+    html: |-
       <aui-container kind="widget" bordered interactive href="#" max-width="sm">
         <aui-inset>
           <aui-stack direction="row" gap="2" align-items="center">
-            <aui-avatar square><aui-icon name="gear"></aui-icon></aui-avatar>
+            <aui-avatar size="lg" square><aui-icon name="gear"></aui-icon></aui-avatar>
             <aui-stack gap="1" spacer>
               <aui-heading size="md" weight="medium">Preferences</aui-heading>
               <aui-text muted size="sm">Language, theme, and notifications</aui-text>
@@ -24,4 +27,3 @@ examples:
           </aui-stack>
         </aui-inset>
       </aui-container>
-    description: Clickable settings navigation card with icon and chevron.

package/dist/docs/blocks/notification-list.yaml

@@ -1,22 +1,28 @@
 name: notification-list
 type: block
 summary: Panel listing recent notifications with avatars and timestamps.
-description: >
-  A panel-style container for displaying a chronological list of
-  notifications. The header includes a title and a bulk action to
-  mark all items as read. Each notification row shows an avatar,
-  a title, a message excerpt, and a relative timestamp. Suitable
-  for notification drawers, activity feeds, or inbox-style sidebars.
-
-components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-button]
+description: |
+  A panel-style container for displaying a chronological list of notifications. The header includes a title and a bulk action to mark all items as read. Each notification row shows an avatar, a title, a message excerpt, and a relative timestamp. Suitable for notification drawers, activity feeds, or inbox-style sidebars.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-button
 kind: panel
-
 examples:
-  - html: |
+  - description: Panel listing recent notifications with avatars and timestamps.
+    html: |-
       <aui-container kind="panel" bordered max-width="lg">
         <aui-header>
-          <span slot="leading"><aui-heading size="xl">Notifications</aui-heading></span>
-          <span slot="trailing"><aui-button scrim>Mark all read</aui-button></span>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-heading size="xl" spacer>Notifications</aui-heading>
+            <aui-button scrim>Mark all read</aui-button>
+          </aui-stack>
         </aui-header>
         <aui-content>
           <aui-inset>
@@ -55,4 +61,3 @@ examples:
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: Notification list with three items showing comments, builds, and team activity.

package/dist/docs/blocks/oncology-pathway.yaml

@@ -1,7 +1,230 @@
 name: oncology-pathway
 type: block
 summary: Oncology Care Pathway — 17 nodes, 21 connections.
-description: >
-  Visual graph block rendered from the Oncology Care Pathway 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 Oncology Care Pathway 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: Oncology Care Pathway — 17 nodes, 21 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 41.625rem; min-width: 79.625rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Cancer Screening → Biopsy & Pathology -->
+          <aui-graph-noodle from="on-screening:right" to="on-biopsy:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Cancer Screening → Genomic Profiling -->
+          <aui-graph-noodle from="on-screening:right" to="on-genomics:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Biopsy & Pathology → TNM Staging -->
+          <aui-graph-noodle from="on-biopsy:right" to="on-staging:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Biopsy & Pathology → Tumor Board (MDT) -->
+          <aui-graph-noodle from="on-biopsy:right" to="on-mdt:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Genomic Profiling → Biomarker Analysis -->
+          <aui-graph-noodle from="on-genomics:right" to="on-biomarker:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Genomic Profiling → Tumor Board (MDT) -->
+          <aui-graph-noodle from="on-genomics:right" to="on-mdt:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Tumor Board (MDT) → Surgical Intervention -->
+          <aui-graph-noodle from="on-mdt:right" to="on-surgery:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Tumor Board (MDT) → Chemotherapy Protocol -->
+          <aui-graph-noodle from="on-mdt:right" to="on-chemo:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Tumor Board (MDT) → Radiation Therapy -->
+          <aui-graph-noodle from="on-mdt:right" to="on-radiation:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Biomarker Analysis → Immunotherapy -->
+          <aui-graph-noodle from="on-biomarker:right" to="on-immuno:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Insurance Authorization → Immunotherapy -->
+          <aui-graph-noodle from="on-insurance:right" to="on-immuno:left" color="warning" weight="2"></aui-graph-noodle>
+          <!-- Surgical Intervention → Treatment Response -->
+          <aui-graph-noodle from="on-surgery:right" to="on-response:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Chemotherapy Protocol → Treatment Response -->
+          <aui-graph-noodle from="on-chemo:right" to="on-response:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Chemotherapy Protocol → Toxicity Monitor -->
+          <aui-graph-noodle from="on-chemo:right" to="on-toxicity:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Radiation Therapy → Toxicity Monitor -->
+          <aui-graph-noodle from="on-radiation:right" to="on-toxicity:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Immunotherapy → Recurrence Detection -->
+          <aui-graph-noodle from="on-immuno:right" to="on-recurrence:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Treatment Response → Remission -->
+          <aui-graph-noodle from="on-response:right" to="on-remission:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Toxicity Monitor → Palliative Care -->
+          <aui-graph-noodle from="on-toxicity:right" to="on-palliative:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Recurrence Detection → Tumor Board (MDT) -->
+          <aui-graph-noodle from="on-recurrence:left" to="on-mdt:bottom" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Recurrence Detection → Survivorship Program -->
+          <aui-graph-noodle from="on-recurrence:right" to="on-survivor:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Remission → Survivorship Program -->
+          <aui-graph-noodle from="on-remission:bottom" to="on-survivor:top" color="accent" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Cancer Screening -->
+          <aui-graph-node x="24" y="186" node-id="on-screening">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Cancer Screening</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>
+          <!-- Biopsy & Pathology -->
+          <aui-graph-node x="224" y="116" node-id="on-biopsy">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Biopsy & Pathology</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>
+          <!-- Genomic Profiling -->
+          <aui-graph-node x="224" y="256" node-id="on-genomics">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Genomic Profiling</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>
+          <!-- TNM Staging -->
+          <aui-graph-node x="424" y="46" node-id="on-staging">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">TNM Staging</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>
+          <!-- Tumor Board (MDT) -->
+          <aui-graph-node x="424" y="186" node-id="on-mdt">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Tumor Board (MDT)</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>
+          <!-- Biomarker Analysis -->
+          <aui-graph-node x="424" y="326" node-id="on-biomarker">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Biomarker 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>
+          <!-- Surgical Intervention -->
+          <aui-graph-node x="624" y="46" node-id="on-surgery">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Surgical Intervention</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>
+          <!-- Chemotherapy Protocol -->
+          <aui-graph-node x="624" y="186" node-id="on-chemo">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Chemotherapy Protocol</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>
+          <!-- Radiation Therapy -->
+          <aui-graph-node x="624" y="326" node-id="on-radiation">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Radiation Therapy</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>
+          <!-- Immunotherapy -->
+          <aui-graph-node x="624" y="466" node-id="on-immuno">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Immunotherapy</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 Response -->
+          <aui-graph-node x="824" y="116" node-id="on-response">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Treatment 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>
+          <!-- Toxicity Monitor -->
+          <aui-graph-node x="824" y="256" node-id="on-toxicity">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Toxicity Monitor</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Recurrence Detection -->
+          <aui-graph-node x="824" y="396" node-id="on-recurrence">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Recurrence Detection</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>
+          <!-- Remission -->
+          <aui-graph-node x="1024" y="116" node-id="on-remission">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Remission</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>
+          <!-- Palliative Care -->
+          <aui-graph-node x="1024" y="256" node-id="on-palliative">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Palliative Care</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>
+          <!-- Survivorship Program -->
+          <aui-graph-node x="1024" y="396" node-id="on-survivor">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Survivorship Program</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>
+          <!-- Insurance Authorization -->
+          <aui-graph-node x="424" y="466" node-id="on-insurance">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Insurance Authorization</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>
+        </aui-graph-layer>
+      </aui-graph-ui>

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

@@ -1,22 +1,30 @@
 name: pricing-card
 type: block
 summary: Pricing tier card with features list and call-to-action.
-description: >
-  A single pricing tier presented as a bordered card. Header shows the
-  plan name alongside a highlight badge, followed by a prominent price
-  and billing period. The content area lists included features with
-  check icons, and the footer holds a sign-up button. Ideal for
-  pricing pages where each tier sits side-by-side in a row.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-badge, aui-button]
+description: |
+  A single pricing tier presented as a bordered card. Header shows the plan name alongside a highlight badge, followed by a prominent price and billing period. The content area lists included features with check icons, and the footer holds a sign-up button. Ideal for pricing pages where each tier sits side-by-side in a row.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-icon
+  - aui-badge
+  - aui-button
 kind: card
-
 examples:
-  - html: |
+  - description: Pricing tier card with features list and call-to-action.
+    html: |-
       <aui-container kind="card" bordered max-width="sm">
         <aui-header>
-          <span slot="leading"><aui-heading size="lg">Pro</aui-heading></span>
-          <span slot="trailing"><aui-badge accent>Popular</aui-badge></span>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-heading size="lg" spacer>Pro</aui-heading>
+            <aui-badge accent>Popular</aui-badge>
+          </aui-stack>
         </aui-header>
         <aui-content>
           <aui-inset>
@@ -50,4 +58,3 @@ examples:
           <aui-button primary width="full">Get started</aui-button>
         </aui-footer>
       </aui-container>
-    description: Pro pricing tier card with feature list and sign-up action.

package/dist/docs/blocks/processing-state.yaml

@@ -1,25 +1,28 @@
 name: processing-state
 type: block
 summary: Loading state with status icon, message, and cancel action.
-description: >
-  A waiting state shown while an operation is in progress. The icon
-  serves as the visual anchor, the heading names what's happening,
-  the description sets expectations, and the cancel button provides
-  an escape hatch. Keep the message honest and specific.
-
-components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon, aui-button]
+description: |
+  A waiting state shown while an operation is in progress. The icon serves as the visual anchor, the heading names what's happening, the description sets expectations, and the cancel button provides an escape hatch. Keep the message honest and specific.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-button
 kind: card
-
 examples:
-  - html: |
+  - description: Loading state with status icon, message, and cancel action.
+    html: |-
       <aui-container kind="card" bordered shadow="1" max-width="md">
         <aui-inset>
           <aui-stack gap="4" align-items="center" text="center">
-            <aui-avatar size="xl" square><aui-icon name="gear"></aui-icon></aui-avatar>
+            <aui-icon name="gear" size="2xl" muted></aui-icon>
             <aui-heading size="xl">Processing your payment</aui-heading>
             <aui-text muted size="sm">This usually takes a few seconds. You'll be redirected to your dashboard when it's done.</aui-text>
             <aui-button scrim>Cancel transaction</aui-button>
           </aui-stack>
         </aui-inset>
       </aui-container>
-    description: Processing state with contained icon, specific heading, reassuring description, and labeled cancel action.