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

package/dist/docs/blocks/chart-donut.yaml

@@ -1,17 +1,22 @@
 name: chart-donut
 type: block
 summary: Donut chart card with center stat, legend, and selected segment footer.
-description: >
-  A card showing a CSS-drawn donut/ring chart with a center value, a legend
-  row below the chart, and a footer showing the selected segment's value.
-  Use for distribution data like browser share, traffic sources, or
-  category breakdowns.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-badge]
+description: |
+  A card showing a CSS-drawn donut/ring chart with a center value, a legend row below the chart, and a footer showing the selected segment's value. Use for distribution data like browser share, traffic sources, or category breakdowns.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-badge
 kind: card
-
 examples:
-  - html: |
+  - description: Donut chart card with center stat, legend, and selected segment footer.
+    html: |-
       <aui-container kind="card" bordered max-width="sm">
         <aui-header>
           <span slot="leading">
@@ -26,19 +31,19 @@ examples:
         </aui-header>
         <aui-content>
           <aui-inset>
-            <aui-stack gap="4" align-items="center">
+            <aui-stack align-items="center">
               <!-- Donut chart via SVG -->
               <div style="position: relative; width: 9rem; height: 9rem;">
                 <svg viewBox="0 0 100 100" style="width: 100%; height: 100%; transform: rotate(-90deg);">
                   <!--
-                    C = 2π × 38 = 238.76  Gap = 2 units per segment end
-                    Seg1 (60%): draw = 143.26 - 2 = 141.26  offset = 0
-                    Seg2 (20%): draw =  47.75 - 2 =  45.75  offset = 238.76 - 143.26 = 95.5
-                    Seg3 (20%): draw =  47.75 - 2 =  45.75  offset = 238.76 - 191.01 = 47.75
+                    C = 2π × 38 ≈ 238.76   Gap = 2 units per segment
+                    Seg1 (60%): arc = 143.26, draw = 141.26, offset = 0
+                    Seg2 (20%): arc =  47.75, draw =  45.75, offset = -143.26
+                    Seg3 (20%): arc =  47.75, draw =  45.75, offset = -191.01
                   -->
-                  <circle cx="50" cy="50" r="38" fill="none" style="stroke: var(--aui-chart-1);" stroke-width="12" stroke-dasharray="141.26 238.76" stroke-dashoffset="0"    stroke-linecap="butt"/>
-                  <circle cx="50" cy="50" r="38" fill="none" style="stroke: var(--aui-chart-2);" stroke-width="12" stroke-dasharray="45.75 238.76"  stroke-dashoffset="95.5"  stroke-linecap="butt"/>
-                  <circle cx="50" cy="50" r="38" fill="none" style="stroke: var(--aui-chart-3);" stroke-width="12" stroke-dasharray="45.75 238.76"  stroke-dashoffset="47.75" stroke-linecap="butt"/>
+                  <circle cx="50" cy="50" r="38" fill="none" style="stroke: var(--aui-chart-1);" stroke-width="12" stroke-dasharray="141.26 238.76" stroke-dashoffset="0"       stroke-linecap="butt"/>
+                  <circle cx="50" cy="50" r="38" fill="none" style="stroke: var(--aui-chart-2);" stroke-width="12" stroke-dasharray="45.75 238.76"  stroke-dashoffset="-143.26" stroke-linecap="butt"/>
+                  <circle cx="50" cy="50" r="38" fill="none" style="stroke: var(--aui-chart-3);" stroke-width="12" stroke-dasharray="45.75 238.76"  stroke-dashoffset="-191.01" stroke-linecap="butt"/>
                 </svg>
                 <div style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;">
                   <aui-heading size="xl">1,125</aui-heading>
@@ -48,23 +53,23 @@ examples:
               <!-- Legend -->
               <aui-wrap gap="3" style="justify-content: center;">
                 <aui-stack direction="row" gap="1" align-items="center">
-                  <div style="width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--aui-chart-1); flex-shrink: 0;"></div>
+                  <div shrink="0" style="width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-1);"></div>
                   <aui-text muted size="xs">Chrome</aui-text>
                 </aui-stack>
                 <aui-stack direction="row" gap="1" align-items="center">
-                  <div style="width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--aui-chart-2); flex-shrink: 0;"></div>
+                  <div shrink="0" style="width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-2);"></div>
                   <aui-text muted size="xs">Safari</aui-text>
                 </aui-stack>
                 <aui-stack direction="row" gap="1" align-items="center">
-                  <div style="width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--aui-chart-3); flex-shrink: 0;"></div>
+                  <div shrink="0" style="width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-3);"></div>
                   <aui-text muted size="xs">Firefox</aui-text>
                 </aui-stack>
                 <aui-stack direction="row" gap="1" align-items="center">
-                  <div style="width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--aui-chart-4); flex-shrink: 0;"></div>
+                  <div shrink="0" style="width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-4);"></div>
                   <aui-text muted size="xs">Edge</aui-text>
                 </aui-stack>
                 <aui-stack direction="row" gap="1" align-items="center">
-                  <div style="width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--aui-chart-5); flex-shrink: 0;"></div>
+                  <div shrink="0" style="width: 0.625rem; height: 0.625rem; border-radius: var(--aui-radius); background: var(--aui-chart-5);"></div>
                   <aui-text muted size="xs">Other</aui-text>
                 </aui-stack>
               </aui-wrap>
@@ -80,4 +85,3 @@ examples:
           </span>
         </aui-footer>
       </aui-container>
-    description: Donut chart showing browser share with Firefox selected.

package/dist/docs/blocks/chart-grouped.yaml

@@ -1,17 +1,21 @@
 name: chart-grouped
 type: block
 summary: Grouped vertical bar chart comparing two data series.
-description: >
-  A card showing paired vertical bars per category for comparing
-  two metrics side by side (e.g. Desktop vs Mobile). Labels are
-  in a separate row below so bar height percentages resolve
-  correctly against the constrained bar area.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text]
+description: |
+  A card showing paired vertical bars per category for comparing two metrics side by side (e.g. Desktop vs Mobile). Labels are in a separate row below so bar height percentages resolve correctly against the constrained bar area.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
 kind: card
-
 examples:
-  - html: |
+  - description: Grouped vertical bar chart comparing two data series.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <span slot="leading">
@@ -25,7 +29,7 @@ examples:
           <aui-inset>
             <aui-stack gap="1">
               <!-- Bars: paired groups as direct children of align-items="end" row -->
-              <aui-stack direction="row" gap="3" align-items="end" spacer style="min-height: 9rem;">
+              <aui-stack direction="row" gap="3" align-items="end" style="height: 10rem;">
                 <!-- Chrome: Desktop 55%, Mobile 40% -->
                 <aui-stack direction="row" gap="1" align-items="end" spacer style="height: 100%;">
                   <div style="flex: 1; height: 55%; background: var(--aui-chart-2); border-radius: var(--aui-radius);"></div>
@@ -72,4 +76,3 @@ examples:
           </span>
         </aui-footer>
       </aui-container>
-    description: Grouped bars with category labels below, Desktop at 60% opacity and Mobile at full opacity.

package/dist/docs/blocks/chart-horizontal.yaml

@@ -1,17 +1,21 @@
 name: chart-horizontal
 type: block
 summary: Horizontal bar chart with category labels.
-description: >
-  A card showing horizontal bars for comparing categories. Each row
-  has a fixed-width right-aligned label and a proportional bar sized
-  via max-width percentage. Useful for browser share, feature usage,
-  or any ranked categorical data.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text]
+description: |
+  A card showing horizontal bars for comparing categories. Each row has a fixed-width right-aligned label and a proportional bar sized via max-width percentage. Useful for browser share, feature usage, or any ranked categorical data.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
 kind: card
-
 examples:
-  - html: |
+  - description: Horizontal bar chart with category labels.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <span slot="leading">
@@ -56,4 +60,3 @@ examples:
           </span>
         </aui-footer>
       </aui-container>
-    description: Horizontal bar chart comparing browser market share with proportional bars.

package/dist/docs/blocks/chart-interactive.yaml

@@ -1,35 +1,39 @@
 name: chart-interactive
 type: block
 summary: Wide chart card with stat summaries and dense bar visualization.
-description: >
-  A dashboard hero chart card. Header shows the title on the left
-  with aui-stat summaries (Desktop, Mobile) trailing on the right.
-  Content is a dense 12-bar visualization. Footer shows the date
-  range. Designed for full-width dashboard positions.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-stat, aui-bar]
+description: |
+  A dashboard hero chart card. Header shows the title on the left with aui-stat summaries (Desktop, Mobile) trailing on the right. Content is a dense 12-bar visualization. Footer shows the date range. Designed for full-width dashboard positions.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-stat
+  - aui-bar
 kind: card
-
 examples:
-  - html: |
+  - description: Wide chart card with stat summaries and dense bar visualization.
+    html: |-
       <aui-container kind="card" bordered>
         <aui-header>
-          <span slot="leading">
-            <aui-stack gap="1">
+          <aui-stack direction="row" align-items="center">
+            <aui-stack gap="1" spacer>
               <aui-heading size="lg">Total Visitors</aui-heading>
               <aui-text muted size="sm">Last 3 months</aui-text>
             </aui-stack>
-          </span>
-          <span slot="trailing">
-            <aui-stack direction="row" gap="4">
+            <aui-stack direction="row">
               <aui-stat label="Desktop" value="24,828"></aui-stat>
               <aui-stat label="Mobile" value="25,010"></aui-stat>
             </aui-stack>
-          </span>
+          </aui-stack>
         </aui-header>
         <aui-content>
           <aui-inset>
-            <aui-stack direction="row" gap="1" align-items="end" spacer style="min-height: 10rem;" data-chart-bars>
+            <aui-stack direction="row" gap="1" align-items="end" style="height: 10rem;" data-chart-bars>
               <aui-bar label="Apr 1 · 3,120" style="height: 35%;"></aui-bar>
               <aui-bar label="Apr 8 · 4,890" style="height: 55%;"></aui-bar>
               <aui-bar label="Apr 15 · 3,740" style="height: 42%;"></aui-bar>
@@ -49,4 +53,3 @@ examples:
           <span slot="content"><aui-text muted size="sm">April 1 – June 29, 2026</aui-text></span>
         </aui-footer>
       </aui-container>
-    description: Wide dashboard chart with stat tabs and 12-bar dense visualization.

package/dist/docs/blocks/chart-labeled.yaml

@@ -1,17 +1,21 @@
 name: chart-labeled
 type: block
 summary: Vertical bar chart with value labels above each bar.
-description: >
-  A card showing vertical bars with exact values displayed above
-  and month labels below. Labels and bars are in separate rows so
-  percentage heights resolve correctly. Alternating opacity adds
-  visual rhythm. Useful when exact numbers matter as much as the trend.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text]
+description: |
+  A card showing vertical bars with exact values displayed above and month labels below. Labels and bars are in separate rows so percentage heights resolve correctly. Alternating opacity adds visual rhythm. Useful when exact numbers matter as much as the trend.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
 kind: card
-
 examples:
-  - html: |
+  - description: Vertical bar chart with value labels above each bar.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <span slot="leading">
@@ -34,7 +38,7 @@ examples:
                 <aui-text muted size="xs" spacer text="center">214</aui-text>
               </aui-stack>
               <!-- Bars: direct children of align-items="end" row so height % resolves against 8rem -->
-              <aui-stack direction="row" gap="2" align-items="end" spacer style="min-height: 8rem;">
+              <aui-stack direction="row" gap="2" align-items="end" style="height: 10rem;">
                 <div style="flex: 1; height: 45%; background: var(--aui-chart-2); border-radius: var(--aui-radius);"></div>
                 <div style="flex: 1; height: 75%; background: var(--aui-chart-1); border-radius: var(--aui-radius);"></div>
                 <div style="flex: 1; height: 58%; background: var(--aui-chart-2); border-radius: var(--aui-radius);"></div>
@@ -63,4 +67,3 @@ examples:
           </span>
         </aui-footer>
       </aui-container>
-    description: Labeled bar chart with value labels row, bar row, and month labels row.

package/dist/docs/blocks/checkout-form.yaml

@@ -1,18 +1,29 @@
 name: checkout-form
 type: block
 summary: Payment form with card details and billing address.
-description: >
-  A structured checkout form for collecting payment information. Includes card
-  name, number, CVV, and expiry fields in a grid layout. The billing address
-  section uses aui-fieldset legend="Billing Address" (borderless) with a
-  "Same as shipping" checkbox, optional comments. Footer uses aui-button-group
-  for submit/cancel actions.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-fieldset, aui-input, aui-textarea, aui-checkbox, aui-button, aui-button-group, aui-divider]
+description: |
+  A structured checkout form for collecting payment information. Includes card name, number, CVV, and expiry fields in a grid layout. The billing address section uses aui-fieldset legend="Billing Address" (borderless) with a "Same as shipping" checkbox, optional comments. Footer uses aui-button-group for submit/cancel actions.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-field
+  - aui-fieldset
+  - aui-input
+  - aui-textarea
+  - aui-checkbox
+  - aui-button
+  - aui-button-group
+  - aui-divider
 kind: card
-
 examples:
-  - html: |
+  - description: Payment form with card details and billing address.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <span slot="leading">
@@ -24,15 +35,15 @@ examples:
         </aui-header>
         <aui-content>
           <aui-inset>
-            <aui-stack gap="6">
+            <aui-stack>
               <aui-field label="Name on Card" width="full">
                 <aui-input width="full" placeholder="John Doe"></aui-input>
               </aui-field>
               <aui-stack direction="row" gap="3">
-                <aui-field label="Card Number" width="full" grow="3">
+                <aui-field label="Card Number" width="full" grow="3" basis="0">
                   <aui-input width="full" placeholder="1234 5678 9012 3456"></aui-input>
                 </aui-field>
-                <aui-field label="CVV" grow="1">
+                <aui-field label="CVV" grow="1" basis="0">
                   <aui-input width="full" placeholder="123"></aui-input>
                 </aui-field>
               </aui-stack>
@@ -49,9 +60,8 @@ examples:
         </aui-content>
         <aui-footer>
           <aui-button-group>
-            <aui-button scrim grow="1">Cancel</aui-button>
-            <aui-button primary grow="1">Submit Payment</aui-button>
+            <aui-button primary grow="1" basis="0">Submit Payment</aui-button>
+            <aui-button scrim grow="1" basis="0">Cancel</aui-button>
           </aui-button-group>
         </aui-footer>
       </aui-container>
-    description: Payment form with card details, billing address toggle, comments, and submit/cancel actions.

package/dist/docs/blocks/clinical-trial.yaml

@@ -1,7 +1,183 @@
 name: clinical-trial
 type: block
 summary: Clinical Trial Pipeline — 13 nodes, 17 connections.
-description: >
-  Visual graph block rendered from the Clinical Trial 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 Clinical Trial 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: Clinical Trial Pipeline — 13 nodes, 17 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 32.875rem; min-width: 79.625rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Protocol → Cohort Screening -->
+          <aui-graph-noodle from="ct-protocol:right" to="ct-cohort:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Protocol → Randomization Engine -->
+          <aui-graph-noodle from="ct-protocol:right" to="ct-randomize:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Cohort Screening → Randomization Engine -->
+          <aui-graph-noodle from="ct-cohort:right" to="ct-randomize:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Randomization Engine → Control Arm -->
+          <aui-graph-noodle from="ct-randomize:right" to="ct-control:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Randomization Engine → Treatment Arm A -->
+          <aui-graph-noodle from="ct-randomize:right" to="ct-treat-a:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Randomization Engine → Treatment Arm B -->
+          <aui-graph-noodle from="ct-randomize:right" to="ct-treat-b:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Control Arm → Primary Endpoint -->
+          <aui-graph-noodle from="ct-control:right" to="ct-primary:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Treatment Arm A → Primary Endpoint -->
+          <aui-graph-noodle from="ct-treat-a:right" to="ct-primary:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Treatment Arm A → Adverse Event Monitor -->
+          <aui-graph-noodle from="ct-treat-a:right" to="ct-adverse:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Treatment Arm B → Adverse Event Monitor -->
+          <aui-graph-noodle from="ct-treat-b:right" to="ct-adverse:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Treatment Arm B → Secondary Endpoint -->
+          <aui-graph-noodle from="ct-treat-b:right" to="ct-secondary:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Primary Endpoint → Interim Analysis -->
+          <aui-graph-noodle from="ct-primary:right" to="ct-interim:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Secondary Endpoint → Interim Analysis -->
+          <aui-graph-noodle from="ct-secondary:right" to="ct-interim:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Adverse Event Monitor → DSMB Review -->
+          <aui-graph-noodle from="ct-adverse:right" to="ct-dsmb:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Interim Analysis → DSMB Review -->
+          <aui-graph-noodle from="ct-interim:right" to="ct-dsmb:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- DSMB Review → Regulatory Filing -->
+          <aui-graph-noodle from="ct-dsmb:right" to="ct-regulatory:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Regulatory Filing → Publication -->
+          <aui-graph-noodle from="ct-regulatory:right" to="ct-publication:left" color="accent" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Protocol -->
+          <aui-graph-node x="24" y="186" node-id="ct-protocol">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Protocol</aui-text>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Cohort Screening -->
+          <aui-graph-node x="224" y="116" node-id="ct-cohort">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Cohort Screening</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>
+          <!-- Randomization Engine -->
+          <aui-graph-node x="224" y="256" node-id="ct-randomize">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Randomization 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>
+          <!-- Control Arm -->
+          <aui-graph-node x="424" y="46" node-id="ct-control">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Control Arm</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 Arm A -->
+          <aui-graph-node x="424" y="186" node-id="ct-treat-a">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Treatment Arm A</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 Arm B -->
+          <aui-graph-node x="424" y="326" node-id="ct-treat-b">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Treatment Arm B</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>
+          <!-- Adverse Event Monitor -->
+          <aui-graph-node x="624" y="46" node-id="ct-adverse">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Adverse Event 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>
+          <!-- Primary Endpoint -->
+          <aui-graph-node x="624" y="186" node-id="ct-primary">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Primary 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>
+          <!-- Secondary Endpoint -->
+          <aui-graph-node x="624" y="326" node-id="ct-secondary">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Secondary 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>
+          <!-- Interim Analysis -->
+          <aui-graph-node x="824" y="116" node-id="ct-interim">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Interim 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>
+          <!-- DSMB Review -->
+          <aui-graph-node x="824" y="256" node-id="ct-dsmb">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">DSMB 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>
+          <!-- Regulatory Filing -->
+          <aui-graph-node x="1024" y="116" node-id="ct-regulatory">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Regulatory Filing</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>
+          <!-- Publication -->
+          <aui-graph-node x="1024" y="256" node-id="ct-publication">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Publication</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>