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

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.

package/dist/docs/blocks/feature-upgrade.yaml

@@ -1,17 +1,25 @@
 name: feature-upgrade
 type: block
 summary: Feature upgrade card with checklist, note, and call-to-action.
-description: >
-  A persuasion card for upsells and feature announcements. Heading and
-  description at top, a checklist of feature benefits with check icons,
-  an inset note box with supporting detail, and a footer with cancel and
-  primary enable actions in an aui-button-group.
-
-components: [aui-container, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon, aui-badge, aui-button, aui-button-group]
+description: |
+  A persuasion card for upsells and feature announcements. Heading and description at top, a checklist of feature benefits with check icons, an inset note box with supporting detail, and a footer with cancel and primary enable actions in an aui-button-group.
+components:
+  - aui-container
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+  - aui-button
+  - aui-button-group
 kind: card
-
 examples:
-  - html: |
+  - description: Feature upgrade card with checklist, note, and call-to-action.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-content>
           <aui-inset>
@@ -22,16 +30,16 @@ examples:
               </aui-stack>
               <aui-stack gap="3">
                 <aui-stack direction="row" gap="2">
-                  <aui-avatar square size="sm"><aui-icon name="check"></aui-icon></aui-avatar>
-                  <aui-text size="sm"><strong>Code reviews</strong> with full codebase context to catch <strong>hard-to-find</strong> bugs.</aui-text>
+                  <aui-avatar square size="sm" success solid><aui-icon name="check"></aui-icon></aui-avatar>
+                  <aui-heading size="sm"><strong>Code reviews</strong> with full codebase context to catch <strong>hard-to-find</strong> bugs.</aui-heading>
                 </aui-stack>
                 <aui-stack direction="row" gap="2">
-                  <aui-avatar square size="sm"><aui-icon name="check"></aui-icon></aui-avatar>
-                  <aui-text size="sm"><strong>Code suggestions</strong> validated in sandboxes before you merge.</aui-text>
+                  <aui-avatar square size="sm" success solid><aui-icon name="check"></aui-icon></aui-avatar>
+                  <aui-heading size="sm"><strong>Code suggestions</strong> validated in sandboxes before you merge.</aui-heading>
                 </aui-stack>
                 <aui-stack direction="row" gap="2">
-                  <aui-avatar square size="sm"><aui-icon name="check"></aui-icon></aui-avatar>
-                  <aui-text size="sm"><strong>Root-cause analysis</strong> for production issues with deployment context. <aui-badge accent>Requires Plus</aui-badge></aui-text>
+                  <aui-avatar square size="sm" success solid><aui-icon name="check"></aui-icon></aui-avatar>
+                  <aui-heading size="sm"><strong>Root-cause analysis</strong> for production issues with deployment context. <aui-badge accent>Requires Plus</aui-badge></aui-heading>
                 </aui-stack>
               </aui-stack>
               <aui-container kind="widget" elevation="3">
@@ -44,9 +52,8 @@ examples:
         </aui-content>
         <aui-footer>
           <aui-button-group>
-            <aui-button scrim grow="1">Cancel</aui-button>
-            <aui-button primary grow="1">Enable with $100 credits</aui-button>
+            <aui-button primary grow="1" basis="0">Enable with $100 credits</aui-button>
+            <aui-button scrim grow="1" basis="0">Cancel</aui-button>
           </aui-button-group>
         </aui-footer>
       </aui-container>
-    description: Feature upgrade card with benefits checklist and trial credit offer.

package/dist/docs/blocks/financial-risk.yaml

@@ -1,7 +1,164 @@
 name: financial-risk
 type: block
 summary: Financial Risk Cascade — 12 nodes, 14 connections.
-description: >
-  Visual graph block rendered from the Financial Risk Cascade 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 Financial Risk Cascade 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: Financial Risk Cascade — 12 nodes, 14 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 32.875rem; min-width: 71.125rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Market Data Feed → Interest Rate Model -->
+          <aui-graph-noodle from="fr-market:right" to="fr-interest:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Market Data Feed → Credit Risk Model -->
+          <aui-graph-noodle from="fr-market:right" to="fr-credit:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- FX Rate Engine → Credit Risk Model -->
+          <aui-graph-noodle from="fr-fx:right" to="fr-credit:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- FX Rate Engine → VaR Calculator -->
+          <aui-graph-noodle from="fr-fx:right" to="fr-var:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Interest Rate Model → VaR Calculator -->
+          <aui-graph-noodle from="fr-interest:right" to="fr-var:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Credit Risk Model → Stress Test Engine -->
+          <aui-graph-noodle from="fr-credit:right" to="fr-stress:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- VaR Calculator → Compliance Gateway -->
+          <aui-graph-noodle from="fr-var:right" to="fr-compliance:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- VaR Calculator → P&L Attribution -->
+          <aui-graph-noodle from="fr-var:right" to="fr-pnl:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Stress Test Engine → Compliance Gateway -->
+          <aui-graph-noodle from="fr-stress:right" to="fr-compliance:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Liquidity Monitor → Compliance Gateway -->
+          <aui-graph-noodle from="fr-liquidity:right" to="fr-compliance:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Compliance Gateway → Regulatory Report -->
+          <aui-graph-noodle from="fr-compliance:right" to="fr-regulatory:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- P&L Attribution → Counterparty Exposure -->
+          <aui-graph-noodle from="fr-pnl:right" to="fr-counterparty:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Counterparty Exposure → Margin Call Engine -->
+          <aui-graph-noodle from="fr-counterparty:right" to="fr-margin:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Margin Call Engine → Regulatory Report -->
+          <aui-graph-noodle from="fr-margin:right" to="fr-regulatory:left" color="accent" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Market Data Feed -->
+          <aui-graph-node x="24" y="116" node-id="fr-market">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Market Data Feed</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>
+          <!-- FX Rate Engine -->
+          <aui-graph-node x="24" y="256" node-id="fr-fx">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">FX Rate Engine</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>
+          <!-- Interest Rate Model -->
+          <aui-graph-node x="240" y="46" node-id="fr-interest">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Interest Rate Model</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>
+          <!-- Credit Risk Model -->
+          <aui-graph-node x="240" y="186" node-id="fr-credit">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Credit Risk Model</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>
+          <!-- VaR Calculator -->
+          <aui-graph-node x="456" y="46" node-id="fr-var">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">VaR Calculator</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>
+          <!-- Stress Test Engine -->
+          <aui-graph-node x="456" y="186" node-id="fr-stress">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Stress Test 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>
+          <!-- Liquidity Monitor -->
+          <aui-graph-node x="456" y="326" node-id="fr-liquidity">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Liquidity 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>
+          <!-- Compliance Gateway -->
+          <aui-graph-node x="672" y="116" node-id="fr-compliance">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Compliance Gateway</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>
+          <!-- P&L Attribution -->
+          <aui-graph-node x="672" y="256" node-id="fr-pnl">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">P&L Attribution</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>
+          <!-- Regulatory Report -->
+          <aui-graph-node x="888" y="46" node-id="fr-regulatory">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Regulatory Report</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>
+          <!-- Counterparty Exposure -->
+          <aui-graph-node x="888" y="186" node-id="fr-counterparty">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Counterparty Exposure</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>
+          <!-- Margin Call Engine -->
+          <aui-graph-node x="888" y="326" node-id="fr-margin">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Margin Call 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-container>
+          </aui-graph-node>
+        </aui-graph-layer>
+      </aui-graph-ui>