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

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.

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

@@ -1,18 +1,25 @@
 name: profile-card
 type: block
 summary: User profile card with avatar, bio, stats, and actions.
-description: >
-  A card displaying a user's profile information at a glance. Centered
-  layout with a large avatar, name, role, short bio, and an aui-stat row
-  for key metrics. Footer provides edit and messaging actions. Useful for
-  team directories, account pages, or social-style dashboards where you
-  need to present identity alongside engagement metrics.
-
-components: [aui-container, aui-inset, aui-header, aui-content, aui-footer, aui-stack, aui-heading, aui-text, aui-stat, aui-avatar, aui-button]
+description: |
+  A card displaying a user's profile information at a glance. Centered layout with a large avatar, name, role, short bio, and an aui-stat row for key metrics. Footer provides edit and messaging actions. Useful for team directories, account pages, or social-style dashboards where you need to present identity alongside engagement metrics.
+components:
+  - aui-container
+  - aui-inset
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-stat
+  - aui-avatar
+  - aui-button
+  - aui-button-group
 kind: card
-
 examples:
-  - html: |
+  - description: User profile card with avatar, bio, stats, and actions.
+    html: |-
       <aui-container kind="card" bordered max-width="md">
         <aui-content>
           <aui-inset>
@@ -23,17 +30,16 @@ examples:
                 <aui-text muted size="sm">Senior Product Designer</aui-text>
               </aui-stack>
               <aui-text muted size="sm">Designing thoughtful experiences that bridge user needs and business goals. Previously at Figma and Stripe.</aui-text>
-              <aui-stack direction="row" gap="4">
+              <aui-stack direction="row">
                 <aui-stat label="Projects" value="12"></aui-stat>
                 <aui-stat label="Followers" value="1.2k"></aui-stat>
                 <aui-stat label="Following" value="340"></aui-stat>
               </aui-stack>
-              <aui-stack direction="row" gap="2">
-                <aui-button scrim spacer>Edit profile</aui-button>
-                <aui-button primary accent spacer>Message</aui-button>
-              </aui-stack>
+              <aui-button-group>
+                <aui-button scrim grow="1" basis="0">Edit profile</aui-button>
+                <aui-button primary accent grow="1" basis="0">Message</aui-button>
+              </aui-button-group>
             </aui-stack>
           </aui-inset>
         </aui-content>
       </aui-container>
-    description: User profile card with avatar, bio, stats, and contact actions.

package/dist/docs/blocks/saas-onboarding.yaml

@@ -1,7 +1,225 @@
 name: saas-onboarding
 type: block
 summary: Enterprise SaaS Onboarding — 17 nodes, 19 connections.
-description: >
-  Visual graph block rendered from the Enterprise SaaS Onboarding 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 Enterprise SaaS Onboarding 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: Enterprise SaaS Onboarding — 17 nodes, 19 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 41.625rem; min-width: 92.125rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Account Signup → Email Verification -->
+          <aui-graph-noodle from="sb-signup:right" to="sb-verify:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Account Signup → SSO Configuration -->
+          <aui-graph-noodle from="sb-signup:right" to="sb-sso:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Email Verification → Organization Setup -->
+          <aui-graph-noodle from="sb-verify:right" to="sb-org:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- SSO Configuration → Role & Permission Matrix -->
+          <aui-graph-noodle from="sb-sso:right" to="sb-roles:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Organization Setup → Data Import Wizard -->
+          <aui-graph-noodle from="sb-org:right" to="sb-import:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Role & Permission Matrix → Integration Hub -->
+          <aui-graph-noodle from="sb-roles:right" to="sb-integrate:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Role & Permission Matrix → API Key Provisioning -->
+          <aui-graph-noodle from="sb-roles:bottom" to="sb-api:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- API Key Provisioning → Webhook Configuration -->
+          <aui-graph-noodle from="sb-api:right" to="sb-webhook:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- API Key Provisioning → Sandbox Environment -->
+          <aui-graph-noodle from="sb-api:right" to="sb-sandbox:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Data Import Wizard → Interactive Training -->
+          <aui-graph-noodle from="sb-import:right" to="sb-training:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Integration Hub → Health Check Dashboard -->
+          <aui-graph-noodle from="sb-integrate:right" to="sb-health:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Webhook Configuration → Health Check Dashboard -->
+          <aui-graph-noodle from="sb-webhook:right" to="sb-health:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Sandbox Environment → Compliance Audit -->
+          <aui-graph-noodle from="sb-sandbox:right" to="sb-compliance:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Interactive Training → Go-Live Checklist -->
+          <aui-graph-noodle from="sb-training:right" to="sb-launch:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Health Check Dashboard → Go-Live Checklist -->
+          <aui-graph-noodle from="sb-health:right" to="sb-launch:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Compliance Audit → Billing Activation -->
+          <aui-graph-noodle from="sb-compliance:right" to="sb-billing:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Go-Live Checklist → CSM Handoff -->
+          <aui-graph-noodle from="sb-launch:right" to="sb-csm:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Billing Activation → Support Escalation -->
+          <aui-graph-noodle from="sb-billing:right" to="sb-support:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Go-Live Checklist → Billing Activation -->
+          <aui-graph-noodle from="sb-launch:bottom" to="sb-billing:top" color="accent" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Account Signup -->
+          <aui-graph-node x="24" y="186" node-id="sb-signup">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Account Signup</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>
+          <!-- Email Verification -->
+          <aui-graph-node x="224" y="116" node-id="sb-verify">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Email Verification</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>
+          <!-- SSO Configuration -->
+          <aui-graph-node x="224" y="256" node-id="sb-sso">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">SSO Configuration</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>
+          <!-- Organization Setup -->
+          <aui-graph-node x="424" y="46" node-id="sb-org">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Organization Setup</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>
+          <!-- Role & Permission Matrix -->
+          <aui-graph-node x="424" y="186" node-id="sb-roles">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Role & Permission Matrix</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>
+          <!-- API Key Provisioning -->
+          <aui-graph-node x="424" y="326" node-id="sb-api">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">API Key Provisioning</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 Import Wizard -->
+          <aui-graph-node x="624" y="46" node-id="sb-import">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Data Import Wizard</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>
+          <!-- Integration Hub -->
+          <aui-graph-node x="624" y="186" node-id="sb-integrate">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Integration Hub</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>
+          <!-- Webhook Configuration -->
+          <aui-graph-node x="624" y="326" node-id="sb-webhook">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Webhook Configuration</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>
+          <!-- Sandbox Environment -->
+          <aui-graph-node x="624" y="466" node-id="sb-sandbox">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Sandbox Environment</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>
+          <!-- Interactive Training -->
+          <aui-graph-node x="824" y="116" node-id="sb-training">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Interactive Training</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>
+          <!-- Health Check Dashboard -->
+          <aui-graph-node x="824" y="256" node-id="sb-health">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Health Check Dashboard</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>
+          <!-- Compliance Audit -->
+          <aui-graph-node x="824" y="396" node-id="sb-compliance">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Compliance Audit</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>
+          <!-- Go-Live Checklist -->
+          <aui-graph-node x="1024" y="186" node-id="sb-launch">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Go-Live Checklist</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>
+          <!-- CSM Handoff -->
+          <aui-graph-node x="1224" y="116" node-id="sb-csm">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">CSM Handoff</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>
+          <!-- Billing Activation -->
+          <aui-graph-node x="1024" y="326" node-id="sb-billing">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Billing Activation</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>
+          <!-- Support Escalation -->
+          <aui-graph-node x="1224" y="326" node-id="sb-support">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Support Escalation</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>