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

package/dist/docs/blocks/commerce-pricing-table.yaml

@@ -0,0 +1,142 @@
+name: commerce-pricing-table
+type: block
+summary: Three-tier pricing comparison with billing toggle, feature checklists, and CTAs.
+description: |
+  A pricing page layout with a centered header (title + subtitle), a monthly/yearly billing toggle using aui-segmented-control, and three tier cards in a responsive row. The featured Pro tier uses the accent intent on its container for visual emphasis and a "Most Popular" badge. Each card has a tier name, description, price heading, divider, feature checklist with success check icons using color: var(--aui-solid) for intent color, and a CTA button (outline for standard tiers, primary accent width="full" for the featured tier). The Pro card's "Most Popular" badge sits above the heading in a centered stack (align-items="center" text="center"), not in the CTA row. Cards use spacer for equal flex sizing.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-icon
+  - aui-badge
+  - aui-button
+  - aui-divider
+  - aui-segmented-control
+  - aui-segment
+kind: card
+examples:
+  - description: Three-tier pricing comparison with billing toggle, feature checklists, and CTAs.
+    html: |-
+      <aui-stack gap="4" align-items="center" text="center">
+
+        <!-- Header -->
+        <aui-stack gap="2" align-items="center">
+          <aui-heading size="xl">Simple, transparent pricing</aui-heading>
+          <aui-text muted>Choose the plan that fits your team. Upgrade or downgrade anytime.</aui-text>
+        </aui-stack>
+
+        <!-- Billing toggle -->
+        <aui-segmented-control value="monthly">
+          <aui-segment value="monthly" selected>Monthly</aui-segment>
+          <aui-segment value="yearly">Yearly</aui-segment>
+        </aui-segmented-control>
+
+        <!-- Pricing cards -->
+        <aui-stack direction="row" gap="3" wrap align-items="start">
+
+          <!-- Starter -->
+          <aui-container kind="card" bordered spacer min-width="14">
+            <aui-inset>
+              <aui-stack gap="4">
+                <aui-stack gap="2">
+                  <aui-heading size="md">Starter</aui-heading>
+                  <aui-text muted size="sm">For individuals and small projects.</aui-text>
+                </aui-stack>
+                <aui-stack gap="1">
+                  <aui-heading size="2xl">$9<aui-text muted size="sm" inline> / mo</aui-text></aui-heading>
+                </aui-stack>
+                <aui-divider></aui-divider>
+                <aui-stack gap="2">
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">3 projects</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">1 GB storage</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">Email support</aui-text>
+                  </aui-stack>
+                </aui-stack>
+                <aui-button outline width="full">Get started</aui-button>
+              </aui-stack>
+            </aui-inset>
+          </aui-container>
+
+          <!-- Pro (featured) -->
+          <aui-container kind="card" bordered accent spacer min-width="14">
+            <aui-inset>
+              <aui-stack gap="4">
+                <aui-stack gap="2" align-items="center" text="center">
+                  <aui-badge accent>Most Popular</aui-badge>
+                  <aui-heading size="md">Pro</aui-heading>
+                  <aui-text muted size="sm">For growing teams with advanced needs.</aui-text>
+                </aui-stack>
+                <aui-stack gap="1">
+                  <aui-heading size="2xl">$29<aui-text muted size="sm" inline> / mo</aui-text></aui-heading>
+                </aui-stack>
+                <aui-divider></aui-divider>
+                <aui-stack gap="2">
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">Unlimited projects</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">50 GB storage</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">Priority support</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">API access</aui-text>
+                  </aui-stack>
+                </aui-stack>
+                <aui-button primary accent width="full">Get started</aui-button>
+              </aui-stack>
+            </aui-inset>
+          </aui-container>
+
+          <!-- Enterprise -->
+          <aui-container kind="card" bordered spacer min-width="14">
+            <aui-inset>
+              <aui-stack gap="4">
+                <aui-stack gap="2">
+                  <aui-heading size="md">Enterprise</aui-heading>
+                  <aui-text muted size="sm">For large organizations with custom requirements.</aui-text>
+                </aui-stack>
+                <aui-stack gap="1">
+                  <aui-heading size="2xl">Custom</aui-heading>
+                </aui-stack>
+                <aui-divider></aui-divider>
+                <aui-stack gap="2">
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">Everything in Pro</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">Unlimited storage</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">SSO & SAML</aui-text>
+                  </aui-stack>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-icon name="check" size="sm" success style="color: var(--aui-solid);"></aui-icon>
+                    <aui-text size="sm">Dedicated account manager</aui-text>
+                  </aui-stack>
+                </aui-stack>
+                <aui-button outline width="full">Contact sales</aui-button>
+              </aui-stack>
+            </aui-inset>
+          </aui-container>
+
+        </aui-stack>
+      </aui-stack>

package/dist/docs/blocks/comms-chat-thread.yaml

@@ -0,0 +1,88 @@
+name: comms-chat-thread
+type: block
+summary: Direct message chat thread with sent/received bubbles, typing indicator, and input bar.
+description: |
+  A chat interface panel (max-width="sm", fixed height) with header (avatar, name/status stack with spacer, aui-dropdown-menu for more actions), scrollable message area with received (control background, padding, radius) and sent (solid background, color: var(--aui-solid-ink), padding, radius) message bubbles aligned left/right at max-width: 80%, timestamps, a typing indicator, and a footer input bar with attach button, full-width input (min-width: 0), and primary accent send button.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-input
+  - aui-button
+  - aui-dropdown-menu
+  - aui-option
+  - aui-optgroup
+kind: panel
+examples:
+  - description: Direct message chat thread with sent/received bubbles, typing indicator, and input bar.
+    html: |-
+      <aui-container kind="panel" bordered max-width="sm" style="height: 28rem;">
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-avatar size="sm">SC</aui-avatar>
+            <aui-stack gap="0" spacer>
+              <aui-heading size="sm">Sarah Chen</aui-heading>
+              <aui-text muted size="xs">Online</aui-text>
+            </aui-stack>
+            <aui-dropdown-menu label="More" ghost hide-label size="sm">
+              <aui-option value="mute">Mute</aui-option>
+              <aui-option value="search">Search</aui-option>
+              <aui-option value="pin">Pin conversation</aui-option>
+              <aui-optgroup divider>
+                <aui-option value="delete" danger>Delete</aui-option>
+              </aui-optgroup>
+            </aui-dropdown-menu>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack>
+
+              <!-- Received message -->
+              <aui-stack gap="1" style="max-width: 80%;">
+                <aui-container kind="widget" class="aui-chat-thread-bubble aui-chat-thread-bubble-received">
+                  <aui-text size="sm">Hey! Have you had a chance to review the token pipeline PR?</aui-text>
+                </aui-container>
+                <aui-text muted size="xs">10:42 AM</aui-text>
+              </aui-stack>
+
+              <!-- Sent message -->
+              <aui-stack gap="1" align-items="end" style="max-width: 80%; align-self: end;">
+                <aui-container kind="widget" accent class="aui-chat-thread-bubble aui-chat-thread-bubble-sent">
+                  <aui-text size="sm">Yes! Just finished reviewing it. Left a few comments on the transform stage.</aui-text>
+                </aui-container>
+                <aui-text muted size="xs">10:44 AM</aui-text>
+              </aui-stack>
+
+              <!-- Received message -->
+              <aui-stack gap="1" style="max-width: 80%;">
+                <aui-container kind="widget" class="aui-chat-thread-bubble aui-chat-thread-bubble-received">
+                  <aui-text size="sm">Great, I'll take a look. Want to pair on the CSS output format?</aui-text>
+                </aui-container>
+                <aui-text muted size="xs">10:45 AM</aui-text>
+              </aui-stack>
+
+              <!-- Typing indicator -->
+              <aui-stack gap="1" style="max-width: 80%;">
+                <aui-container kind="widget" class="aui-chat-thread-bubble aui-chat-thread-bubble-received">
+                  <aui-text muted size="sm">typing…</aui-text>
+                </aui-container>
+              </aui-stack>
+
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-button ghost hide-label label="Attach" icon-leading="paperclip" size="sm"></aui-button>
+            <aui-input placeholder="Type a message…" width="full" size="sm"></aui-input>
+            <aui-button primary accent hide-label label="Send" icon-leading="arrow-up" size="sm"></aui-button>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>

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

@@ -0,0 +1,88 @@
+name: comms-notification-list
+type: block
+summary: Notification panel with count badge, mark-all-read action, and categorized items.
+description: |
+  A notifications panel (max-width="sm") with a header showing title heading (no spacer), count badge next to heading, spacer, then a scrim mark-all-read button. Notification items have category-colored solid avatars using the solid attribute (comment=accent chat-dots, mention=warning user, assign=success check, alert=danger warning). Each item has a heading with strong actor/entity names, muted xs timestamp, and optional unread accent dot badge. Items use gap="4" for vertical spacing.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-icon
+  - aui-badge
+  - aui-button
+kind: panel
+examples:
+  - description: Notification panel with count badge, mark-all-read action, and categorized items.
+    html: |-
+      <aui-container kind="panel" bordered max-width="sm">
+        <aui-header>
+          <aui-stack direction="row" gap="3" align-items="center">
+            <aui-heading size="lg">Notifications</aui-heading>
+            <aui-badge>12</aui-badge>
+            <aui-text spacer></aui-text>
+            <aui-button scrim size="sm">Mark all read</aui-button>
+          </aui-stack>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+
+              <aui-stack direction="row" gap="3" align-items="start">
+                <aui-avatar size="xs" accent solid><aui-icon name="chat-dots" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="sm"><strong>Sarah Chen</strong> commented on <strong>Auth flow redesign</strong></aui-heading>
+                  <aui-text muted size="xs">2 minutes ago</aui-text>
+                </aui-stack>
+                <aui-badge accent dot></aui-badge>
+              </aui-stack>
+
+              <aui-stack direction="row" gap="3" align-items="start">
+                <aui-avatar size="xs" warning solid><aui-icon name="user" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="sm"><strong>Alex Rivera</strong> mentioned you in <strong>Sprint planning</strong></aui-heading>
+                  <aui-text muted size="xs">15 minutes ago</aui-text>
+                </aui-stack>
+                <aui-badge accent dot></aui-badge>
+              </aui-stack>
+
+              <aui-stack direction="row" gap="3" align-items="start">
+                <aui-avatar size="xs" success solid><aui-icon name="check" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="sm"><strong>James Wilson</strong> assigned you to <strong>API migration</strong></aui-heading>
+                  <aui-text muted size="xs">1 hour ago</aui-text>
+                </aui-stack>
+              </aui-stack>
+
+              <aui-stack direction="row" gap="3" align-items="start">
+                <aui-avatar size="xs" danger solid><aui-icon name="warning" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="sm">Build failed on <strong>main</strong> branch</aui-heading>
+                  <aui-text muted size="xs">3 hours ago</aui-text>
+                </aui-stack>
+              </aui-stack>
+
+              <aui-stack direction="row" gap="3" align-items="start">
+                <aui-avatar size="xs" accent solid><aui-icon name="chat-dots" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="sm"><strong>Maria Santos</strong> replied to your comment</aui-heading>
+                  <aui-text muted size="xs">5 hours ago</aui-text>
+                </aui-stack>
+              </aui-stack>
+
+              <aui-stack direction="row" gap="3" align-items="start">
+                <aui-avatar size="xs" success solid><aui-icon name="check" size="xs"></aui-icon></aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="sm"><strong>Liam Walker</strong> approved your PR <strong>#142</strong></aui-heading>
+                  <aui-text muted size="xs">Yesterday</aui-text>
+                </aui-stack>
+              </aui-stack>
+
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>

package/dist/docs/blocks/content-article-card.yaml

@@ -0,0 +1,47 @@
+name: content-article-card
+type: block
+summary: Article preview card with thumbnail, tags, title, excerpt, and author row.
+description: |
+  A vertical article card for content grids and feeds. Top zone is a 16:9 aspect-ratio thumbnail placeholder. Body contains colored tag badges, a title heading, a 3-line clamped excerpt, a divider, and an author row with avatar initials, name, date, and right-aligned read time. The container uses the interactive attribute for hover/click affordance. Suitable for blog listings, documentation indexes, and content hubs.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-badge
+  - aui-avatar
+  - aui-icon
+  - aui-divider
+kind: card
+examples:
+  - description: Article preview card with thumbnail, tags, title, excerpt, and author row.
+    html: |-
+      <aui-container kind="card" bordered max-width="sm" interactive>
+
+        <!-- Thumbnail -->
+        <div style="aspect-ratio: 16/9; background: var(--aui-neutral-3); display: flex; align-items: center; justify-content: center;">
+          <aui-icon name="image" style="--aui-icon-size: 2rem;" muted></aui-icon>
+        </div>
+
+        <!-- Body -->
+        <aui-inset>
+          <aui-stack>
+            <aui-stack direction="row" gap="2">
+              <aui-badge accent>Engineering</aui-badge>
+              <aui-badge success>New</aui-badge>
+            </aui-stack>
+            <aui-stack gap="1">
+              <aui-heading size="md">Building a Scalable Design Token Pipeline</aui-heading>
+              <aui-text muted size="sm" style="-webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;">How we automated our design-to-code workflow using Style Dictionary, custom transforms, and a CI pipeline that keeps tokens in sync across web, iOS, and Android platforms.</aui-text>
+            </aui-stack>
+            <aui-divider></aui-divider>
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-avatar size="sm">SR</aui-avatar>
+              <aui-text size="xs" spacer>Sarah Rivera · Mar 12</aui-text>
+              <aui-text size="xs" muted>6 min read</aui-text>
+            </aui-stack>
+          </aui-stack>
+        </aui-inset>
+
+      </aui-container>

package/dist/docs/blocks/contributors.yaml

@@ -1,17 +1,24 @@
 name: contributors
 type: block
 summary: Contributors card showing overlapping avatar group with count and overflow link.
-description: >
-  A card displaying project contributors as an overlapping avatar group with
-  a count badge and automatic +N overflow counter. Footer shows total
-  contributor count as a text link. Use for open source projects, team pages,
-  or community sections.
-
-components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-avatar-group, aui-badge]
+description: |
+  A card displaying project contributors as an overlapping avatar group with a count badge and automatic +N overflow counter. Footer shows total contributor count as a text link. Use for open source projects, team pages, or community sections.
+components:
+  - aui-container
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-avatar-group
+  - aui-badge
 kind: card
-
 examples:
-  - html: |
+  - description: Contributors card showing overlapping avatar group with count and overflow link.
+    html: |-
       <aui-container kind="card" bordered max-width="prose">
         <aui-header>
           <span slot="leading">
@@ -44,7 +51,6 @@ examples:
           </aui-inset>
         </aui-content>
         <aui-footer>
-          <span slot="leading"><aui-text muted size="sm" style="text-decoration: underline; cursor: pointer;">+ 810 contributors</aui-text></span>
+          <span slot="leading"><aui-text muted size="sm"><a href="#">+ 810 contributors</a></aui-text></span>
         </aui-footer>
       </aui-container>
-    description: Contributors avatar group with count badge and overflow link.

package/dist/docs/blocks/cyber-threat.yaml

@@ -1,7 +1,161 @@
 name: cyber-threat
 type: block
 summary: Cyber Threat Intelligence — 12 nodes, 14 connections.
-description: >
-  Visual graph block rendered from the Cyber Threat Intelligence 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 Cyber Threat Intelligence 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: Cyber Threat Intelligence — 12 nodes, 14 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 32.875rem; min-width: 84.625rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Network Sensor → SIEM Aggregator -->
+          <aui-graph-noodle from="cy-sensor:right" to="cy-siem:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Endpoint Agent → SIEM Aggregator -->
+          <aui-graph-noodle from="cy-endpoint:right" to="cy-siem:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Threat Intel Feed → SIEM Aggregator -->
+          <aui-graph-noodle from="cy-intel:right" to="cy-siem:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- SIEM Aggregator → Threat Classifier -->
+          <aui-graph-noodle from="cy-siem:right" to="cy-classify:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- SIEM Aggregator → IOC Enrichment -->
+          <aui-graph-noodle from="cy-siem:right" to="cy-ioc:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Threat Classifier → Triage Engine -->
+          <aui-graph-noodle from="cy-classify:right" to="cy-triage:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- IOC Enrichment → Triage Engine -->
+          <aui-graph-noodle from="cy-ioc:right" to="cy-triage:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Triage Engine → Incident Response -->
+          <aui-graph-noodle from="cy-triage:right" to="cy-incident:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Triage Engine → Containment Action -->
+          <aui-graph-noodle from="cy-triage:right" to="cy-contain:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Incident Response → Forensic Analysis -->
+          <aui-graph-noodle from="cy-incident:right" to="cy-forensic:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Incident Response → Recovery -->
+          <aui-graph-noodle from="cy-incident:right" to="cy-recovery:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Containment Action → Recovery -->
+          <aui-graph-noodle from="cy-contain:right" to="cy-recovery:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Forensic Analysis → Post-Mortem -->
+          <aui-graph-noodle from="cy-forensic:left" to="cy-postmortem:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Recovery → Post-Mortem -->
+          <aui-graph-noodle from="cy-recovery:left" to="cy-postmortem:left" color="accent" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Network Sensor -->
+          <aui-graph-node x="24" y="46" node-id="cy-sensor">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Network Sensor</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>
+          <!-- Endpoint Agent -->
+          <aui-graph-node x="24" y="186" node-id="cy-endpoint">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Endpoint Agent</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>
+          <!-- Threat Intel Feed -->
+          <aui-graph-node x="24" y="326" node-id="cy-intel">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Threat Intel Feed</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>
+          <!-- SIEM Aggregator -->
+          <aui-graph-node x="240" y="186" node-id="cy-siem">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">SIEM Aggregator</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>
+          <!-- Threat Classifier -->
+          <aui-graph-node x="456" y="116" node-id="cy-classify">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Threat Classifier</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>
+          <!-- IOC Enrichment -->
+          <aui-graph-node x="456" y="256" node-id="cy-ioc">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">IOC Enrichment</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>
+          <!-- Triage Engine -->
+          <aui-graph-node x="672" y="186" node-id="cy-triage">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Triage 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>
+          <!-- Incident Response -->
+          <aui-graph-node x="888" y="116" node-id="cy-incident">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Incident 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>
+          <!-- Containment Action -->
+          <aui-graph-node x="888" y="256" node-id="cy-contain">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Containment Action</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>
+          <!-- Forensic Analysis -->
+          <aui-graph-node x="1104" y="46" node-id="cy-forensic">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Forensic Analysis</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>
+          <!-- Recovery -->
+          <aui-graph-node x="1104" y="186" node-id="cy-recovery">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Recovery</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>
+          <!-- Post-Mortem -->
+          <aui-graph-node x="1104" y="326" node-id="cy-postmortem">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Post-Mortem</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>