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

package/dist/components/agent.js

@@ -1,4 +1,4 @@
-import { b as t, d as a, e as i, f as s, g, h as n, i as u, j as d, k as r } from "../chunks/agent-BF_R_HJk.js";
+import { b as t, d as a, e as i, f as s, g, h as n, i as u, j as d, k as r } from "../chunks/agent-XMhz_6OA.js";
 export {
   t as AuiAgentActivity,
   a as AuiAgentFeed,

package/dist/components/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,14 @@
+import { AgentElement, AttributeSchema } from '../../element/index.ts';
+export declare class AuiCheckboxGroup extends AgentElement {
+    #private;
+    static attributes: AttributeSchema;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    value: string;
+    label: string;
+    min: number;
+    max: number;
+    protected activate(): void;
+    protected dispose(): void;
+}

package/dist/components/checkbox-group/index.d.ts

@@ -0,0 +1 @@
+export { AuiCheckboxGroup } from './checkbox-group.ts';

package/dist/components/editor.js

@@ -1,4 +1,4 @@
-import { c as x, A as p, C as z } from "../chunks/agent-BF_R_HJk.js";
+import { c as x, A as p, C as z } from "../chunks/agent-XMhz_6OA.js";
 const b = x("aui-editor");
 class S extends p {
   static attributes = {

package/dist/components/form/form.d.ts

@@ -0,0 +1,12 @@
+import { AgentElement, AttributeSchema } from '../../element/index.ts';
+export declare class AuiForm extends AgentElement {
+    #private;
+    static attributes: AttributeSchema;
+    action: string;
+    method: string;
+    get noValidate(): boolean;
+    protected activate(): void;
+    protected dispose(): void;
+    /** Programmatic submit — runs validation then dispatches. */
+    submit(): void;
+}

package/dist/components/form/index.d.ts

@@ -0,0 +1 @@
+export { AuiForm } from './form.ts';

package/dist/components/graph.js

@@ -1,5 +1,5 @@
 import { AuiEditor as E, AuiEditorLayer as S } from "./editor.js";
-import { A as f } from "../chunks/agent-BF_R_HJk.js";
+import { A as f } from "../chunks/agent-XMhz_6OA.js";
 const w = "http://www.w3.org/2000/svg";
 class N extends E {
   static attributes = {

package/dist/components/index.d.ts

@@ -70,3 +70,5 @@ export { AuiCarousel } from './carousel/index.ts';
 export { AuiNotificationCenter } from './notification-center/index.ts';
 export type { Notification } from './notification-center/index.ts';
 export { AuiEmptyState } from './empty-state/index.ts';
+export { AuiCheckboxGroup } from './checkbox-group/index.ts';
+export { AuiForm } from './form/index.ts';

package/dist/components/noodles/noodle-controller.d.ts

@@ -18,7 +18,7 @@ export interface NoodleOptions {
     selector?: string;
     /** Allow interactive creation/deletion of connections (default: false) */
     editable?: boolean;
-    /** Noodle stroke color (default: 'var(--aui-accent-500)') */
+    /** Noodle stroke color (default: 'var(--aui-accent)') */
     color?: string;
     /** Noodle stroke width in px (default: 2) */
     strokeWidth?: number;

package/dist/components.js

@@ -1,13 +1,13 @@
-import { A as a } from "./chunks/agent-BF_R_HJk.js";
-import { a as p, b as m, d as g, e as c, f as C, g as T, h as S, i as b, j as x, k as I, R as P, r as k, s as R } from "./chunks/agent-BF_R_HJk.js";
-import { A as f, a as h, b as D, c as G, d as B, e as E, f as M, g as w, h as y, i as H, j as O, k as v, l as L, m as N, n as j, o as U, p as _, q, r as z, s as Y, t as J, u as K, v as Q, w as V, x as W, y as X, z as Z, B as $, C as aa, D as ia, E as sa, F as ea, G as Aa, H as ua, I as ta, J as oa, K as ra, L as na, M as da, N as la, O as pa, P as ma, Q as ga, R as ca, S as Ca, T as Ta, U as Sa, V as ba, W as xa, X as Ia, Y as Pa, Z as ka, _ as Ra, $ as Fa, a0 as fa, a1 as ha, a2 as Da, a3 as Ga, a4 as Ba, a5 as Ea, a6 as Ma, a7 as wa, a8 as ya, a9 as Ha, aa as Oa, ab as va, ac as La, ad as Na, ae as ja, af as Ua, ag as _a, ah as qa, ai as za, aj as Ya, ak as Ja, al as Ka, am as Qa, an as Va, ao as Wa, ap as Xa, aq as Za, ar as $a, as as ai } from "./chunks/meter-Dju8ik6C.js";
-import { g as si, a as ei, r as Ai } from "./chunks/registry-BNb5ABBs.js";
+import { A as a } from "./chunks/agent-XMhz_6OA.js";
+import { a as p, b as m, d as c, e as g, f as C, g as T, h as S, i as b, j as x, k as I, R as P, r as k, s as R } from "./chunks/agent-XMhz_6OA.js";
+import { A as h, a as G, b as f, c as D, d as B, e as E, f as M, g as w, h as y, i as H, j as O, k as v, l as L, m as N, n as j, o as U, p as _, q, r as z, s as Y, t as J, u as K, v as Q, w as V, x as W, y as X, z as Z, B as $, C as aa, D as ia, E as sa, F as ea, G as ua, H as Aa, I as ta, J as oa, K as ra, L as na, M as da, N as la, O as pa, P as ma, Q as ca, R as ga, S as Ca, T as Ta, U as Sa, V as ba, W as xa, X as Ia, Y as Pa, Z as ka, _ as Ra, $ as Fa, a0 as ha, a1 as Ga, a2 as fa, a3 as Da, a4 as Ba, a5 as Ea, a6 as Ma, a7 as wa, a8 as ya, a9 as Ha, aa as Oa, ab as va, ac as La, ad as Na, ae as ja, af as Ua, ag as _a, ah as qa, ai as za, aj as Ya, ak as Ja, al as Ka, am as Qa, an as Va, ao as Wa, ap as Xa, aq as Za, ar as $a, as as ai, at as ii, au as si } from "./chunks/form-oekEhwja.js";
+import { g as ui, a as Ai, r as ti } from "./chunks/registry-BNb5ABBs.js";
 class e extends a {
 }
-class A extends a {
-}
 class u extends a {
 }
+class A extends a {
+}
 class t extends a {
 }
 class o extends a {
@@ -18,20 +18,20 @@ class n extends a {
 }
 export {
   p as ACTION_REGISTRY,
-  f as AuiAccordion,
-  h as AuiAccordionItem,
+  h as AuiAccordion,
+  G as AuiAccordionItem,
   m as AuiAgentActivity,
-  g as AuiAgentFeed,
-  c as AuiAgentInput,
+  c as AuiAgentFeed,
+  g as AuiAgentInput,
   C as AuiAgentMessage,
   T as AuiAgentPanel,
   S as AuiAgentPrompt,
   b as AuiAgentSeeds,
   x as AuiAgentText,
   I as AuiAgentThread,
-  A as AuiAlert,
-  D as AuiAppShell,
-  G as AuiAvatarGroup,
+  u as AuiAlert,
+  f as AuiAppShell,
+  D as AuiAvatarGroup,
   B as AuiBreadcrumb,
   E as AuiBreadcrumbItem,
   M as AuiButton,
@@ -39,88 +39,90 @@ export {
   y as AuiCalendarRangePicker,
   H as AuiCarousel,
   O as AuiCheckbox,
-  v as AuiChip,
-  L as AuiCodeBlock,
-  N as AuiColorArea,
-  j as AuiColorField,
-  U as AuiColorPicker,
-  _ as AuiColorSlider,
-  q as AuiCommand,
-  z as AuiCommandEmpty,
-  Y as AuiCommandGroup,
-  J as AuiCommandInput,
-  K as AuiCommandItem,
-  Q as AuiCommandList,
-  V as AuiContainer,
-  W as AuiContextMenu,
-  X as AuiCopyButton,
-  Z as AuiDateField,
-  $ as AuiDialog,
-  aa as AuiDisclosure,
-  ia as AuiDisclosureGroup,
-  sa as AuiDrawer,
-  ea as AuiDropdownMenu,
+  v as AuiCheckboxGroup,
+  L as AuiChip,
+  N as AuiCodeBlock,
+  j as AuiColorArea,
+  U as AuiColorField,
+  _ as AuiColorPicker,
+  q as AuiColorSlider,
+  z as AuiCommand,
+  Y as AuiCommandEmpty,
+  J as AuiCommandGroup,
+  K as AuiCommandInput,
+  Q as AuiCommandItem,
+  V as AuiCommandList,
+  W as AuiContainer,
+  X as AuiContextMenu,
+  Z as AuiCopyButton,
+  $ as AuiDateField,
+  aa as AuiDialog,
+  ia as AuiDisclosure,
+  sa as AuiDisclosureGroup,
+  ea as AuiDrawer,
+  ua as AuiDropdownMenu,
   Aa as AuiEmptyState,
-  ua as AuiFeed,
-  ta as AuiFileUpload,
-  oa as AuiGripper,
-  ra as AuiHoverCard,
-  na as AuiIcon,
-  da as AuiImage,
-  la as AuiInput,
-  pa as AuiInputOtp,
-  u as AuiLink,
-  ma as AuiMeter,
+  ta as AuiFeed,
+  oa as AuiFileUpload,
+  ra as AuiForm,
+  na as AuiGripper,
+  da as AuiHoverCard,
+  la as AuiIcon,
+  pa as AuiImage,
+  ma as AuiInput,
+  ca as AuiInputOtp,
+  A as AuiLink,
+  ga as AuiMeter,
   o as AuiNavItem,
-  ga as AuiNotificationCenter,
-  ca as AuiOptgroup,
-  Ca as AuiOption,
-  Ta as AuiPage,
-  Sa as AuiPageContext,
-  ba as AuiPageMain,
-  xa as AuiPagination,
-  Ia as AuiPane,
-  Pa as AuiPanes,
-  ka as AuiProgress,
-  Ra as AuiProgressCircle,
-  Fa as AuiRadio,
+  Ca as AuiNotificationCenter,
+  Ta as AuiOptgroup,
+  Sa as AuiOption,
+  ba as AuiPage,
+  xa as AuiPageContext,
+  Ia as AuiPageMain,
+  Pa as AuiPagination,
+  ka as AuiPane,
+  Ra as AuiPanes,
+  Fa as AuiProgress,
+  ha as AuiProgressCircle,
+  Ga as AuiRadio,
   fa as AuiRadioGroup,
-  ha as AuiRange,
-  Da as AuiRoot,
-  Ga as AuiSegment,
-  Ba as AuiSegmentedControl,
-  Ea as AuiSelect,
-  Ma as AuiSidebar,
-  wa as AuiSidebarContent,
-  ya as AuiSidebarFooter,
-  Ha as AuiSidebarHeader,
+  Da as AuiRange,
+  Ba as AuiRoot,
+  Ea as AuiSegment,
+  Ma as AuiSegmentedControl,
+  wa as AuiSelect,
+  ya as AuiSidebar,
+  Ha as AuiSidebarContent,
+  Oa as AuiSidebarFooter,
+  va as AuiSidebarHeader,
   e as AuiSkeleton,
-  Oa as AuiSparkline,
+  La as AuiSparkline,
   t as AuiSpinner,
-  va as AuiStat,
+  Na as AuiStat,
   n as AuiStep,
   r as AuiStepper,
-  La as AuiSwitch,
-  Na as AuiTab,
-  ja as AuiTabPanel,
-  Ua as AuiTable,
-  _a as AuiTableBody,
-  qa as AuiTableCell,
-  za as AuiTableHead,
-  Ya as AuiTableHeader,
-  Ja as AuiTableRow,
-  Ka as AuiTabs,
-  Qa as AuiTagGroup,
-  Va as AuiTextarea,
-  Wa as AuiTimeField,
-  Xa as AuiToast,
-  Za as AuiTooltip,
-  $a as AuiTree,
-  ai as AuiTreeItem,
+  ja as AuiSwitch,
+  Ua as AuiTab,
+  _a as AuiTabPanel,
+  qa as AuiTable,
+  za as AuiTableBody,
+  Ya as AuiTableCell,
+  Ja as AuiTableHead,
+  Ka as AuiTableHeader,
+  Qa as AuiTableRow,
+  Va as AuiTabs,
+  Wa as AuiTagGroup,
+  Xa as AuiTextarea,
+  Za as AuiTimeField,
+  $a as AuiToast,
+  ai as AuiTooltip,
+  ii as AuiTree,
+  si as AuiTreeItem,
   P as ROLE_DEFAULTS,
-  si as getIcon,
-  ei as registerIcon,
-  Ai as registerIcons,
+  ui as getIcon,
+  Ai as registerIcon,
+  ti as registerIcons,
   k as renderMarkdown,
   R as sanitizeHtml
 };

package/dist/docs/blocks/agent-chat.yaml

@@ -1,32 +1,42 @@
 name: agent-chat
 type: block
 summary: Full agent chat interface with message feed, composer, and suggestion chips.
-description: >
-  Complete chat composition showing a multi-turn conversation between
-  user and AI assistant. Uses aui-agent-panel as the outer shell to
-  coordinate header, feed, and input. Includes message feed with
-  auto-scroll, threaded messages with avatars, markdown rendering,
-  activity indicators, bordered prompt input with action toolbar,
-  and suggestion chips. Demonstrates all aui-agent-* components
-  working together as a cohesive chat experience.
-
-components: [aui-agent-panel, aui-header, aui-content, aui-footer, aui-stack, aui-heading, aui-text, aui-avatar, aui-badge, aui-button, aui-icon, aui-agent-feed, aui-agent-thread, aui-agent-message, aui-agent-text, aui-agent-activity, aui-agent-seeds, aui-agent-input, aui-agent-prompt]
+description: |
+  Complete chat composition showing a multi-turn conversation between user and AI assistant. Uses aui-agent-panel as the outer shell to coordinate header, feed, and input. Includes message feed with auto-scroll, threaded messages with avatars, markdown rendering, activity indicators, bordered prompt input with action toolbar, and suggestion chips. Demonstrates all aui-agent-* components working together as a cohesive chat experience.
+components:
+  - aui-agent-panel
+  - aui-header
+  - aui-content
+  - aui-footer
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-avatar
+  - aui-badge
+  - aui-button
+  - aui-icon
+  - aui-agent-feed
+  - aui-agent-thread
+  - aui-agent-message
+  - aui-agent-text
+  - aui-agent-activity
+  - aui-agent-seeds
+  - aui-agent-input
+  - aui-agent-prompt
 kind: panel
-
 examples:
-  - html: |
+  - description: Full chat interface with multi-turn conversation, thinking indicator, and suggestion chips
+    html: |-
       <aui-agent-panel panel-title="Design Assistant" max-width="xl" style="height: 32rem;">
         <aui-header dividers>
-          <span slot="leading">
-            <aui-stack direction="row" gap="2" align-items="center">
-              <aui-avatar square>AI</aui-avatar>
-              <aui-stack gap="0">
-                <aui-heading size="sm">Design Assistant</aui-heading>
-                <aui-text muted size="xs">Claude 3.5 Sonnet</aui-text>
-              </aui-stack>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-avatar square>AI</aui-avatar>
+            <aui-stack gap="0" spacer>
+              <aui-heading size="sm">Design Assistant</aui-heading>
+              <aui-text muted size="xs">Claude Sonnet 4</aui-text>
             </aui-stack>
-          </span>
-          <aui-badge accent slot="trailing">Online</aui-badge>
+            <aui-badge accent>Online</aui-badge>
+          </aui-stack>
         </aui-header>
         <aui-agent-feed auto-scroll scrollable>
           <aui-agent-thread role="user" sender="You">
@@ -68,9 +78,8 @@ examples:
         </aui-agent-input>
         <aui-agent-seeds options='[{"value":"tokens","label":"Generate token file"},{"value":"themes","label":"Add dark theme"},{"value":"chart","label":"Chart palette"}]'></aui-agent-seeds>
       </aui-agent-panel>
-    description: Full chat interface with multi-turn conversation, thinking indicator, and suggestion chips.
-
-  - html: |
+  - description: Code review chat with structured markdown feedback
+    html: |-
       <aui-agent-panel panel-title="Code Review" max-width="xl" style="height: 28rem;">
         <aui-header dividers>
           <span slot="leading">
@@ -108,4 +117,3 @@ examples:
           </aui-agent-prompt>
         </aui-agent-input>
       </aui-agent-panel>
-    description: Code review chat with structured markdown feedback.

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

@@ -1,17 +1,22 @@
 name: announcement-card
 type: block
 summary: Announcement card with image area, description, and contextual footer actions.
-description: >
-  A card featuring a tall image or illustration area at top, followed by
-  a title, description, and footer with a primary action and a contextual
-  badge or label. Use for product announcements, deprecation notices, or
-  feature highlights.
-
-components: [aui-container, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-badge, aui-button]
+description: |
+  A card featuring a tall image or illustration area at top, followed by a title, description, and footer with a primary action and a contextual badge or label. Use for product announcements, deprecation notices, or feature highlights.
+components:
+  - aui-container
+  - aui-content
+  - aui-footer
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-badge
+  - aui-button
 kind: card
-
 examples:
-  - html: |
+  - description: Announcement card with image area, description, and contextual footer actions.
+    html: |-
       <aui-container kind="card" bordered max-width="sm" style="overflow: hidden;">
         <div style="height: 12rem; background: linear-gradient(135deg, var(--aui-control) 0%, var(--aui-panel) 100%);"></div>
         <aui-content>
@@ -27,4 +32,3 @@ examples:
           <span slot="leading"><aui-button primary>Create Query</aui-button></span>
         </aui-footer>
       </aui-container>
-    description: Deprecation announcement with gradient image placeholder and warning badge.

package/dist/docs/blocks/bpm-process.yaml

@@ -1,7 +1,219 @@
 name: bpm-process
 type: block
 summary: Cross-Functional BPM — 16 nodes, 20 connections.
-description: >
-  Visual graph block rendered from the Cross-Functional BPM 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 Cross-Functional BPM 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: Cross-Functional BPM — 16 nodes, 20 connections.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 45.375rem; min-width: 91.875rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Customer Request → Self-Service Portal -->
+          <aui-graph-noodle from="bp-request:right" to="bp-portal:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Customer Request → Lead Qualification -->
+          <aui-graph-noodle from="bp-request:bottom" to="bp-qualify:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Self-Service Portal → Lead Qualification -->
+          <aui-graph-noodle from="bp-portal:bottom" to="bp-qualify:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Lead Qualification → Quote Generation -->
+          <aui-graph-noodle from="bp-qualify:right" to="bp-quote:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Quote Generation → Legal Review -->
+          <aui-graph-noodle from="bp-quote:bottom" to="bp-review:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Quote Generation → Credit Assessment -->
+          <aui-graph-noodle from="bp-quote:bottom" to="bp-credit:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Quote Generation → Contract Negotiation -->
+          <aui-graph-noodle from="bp-quote:right" to="bp-negotiate:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Legal Review → Compliance Check -->
+          <aui-graph-noodle from="bp-review:right" to="bp-compliance:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Compliance Check → Digital Signature -->
+          <aui-graph-noodle from="bp-compliance:right" to="bp-sign:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Contract Negotiation → Digital Signature -->
+          <aui-graph-noodle from="bp-negotiate:bottom" to="bp-sign:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Credit Assessment → Invoice Generation -->
+          <aui-graph-noodle from="bp-credit:right" to="bp-invoice:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Invoice Generation → Payment Processing -->
+          <aui-graph-noodle from="bp-invoice:right" to="bp-payment:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Invoice Generation → Service Provisioning -->
+          <aui-graph-noodle from="bp-invoice:bottom" to="bp-provision:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Digital Signature → Onboarding Workflow -->
+          <aui-graph-noodle from="bp-sign:right" to="bp-onboard:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Payment Processing → Account Activation -->
+          <aui-graph-noodle from="bp-payment:bottom" to="bp-activate:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Service Provisioning → Account Activation -->
+          <aui-graph-noodle from="bp-provision:right" to="bp-activate:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Account Activation → Onboarding Workflow -->
+          <aui-graph-noodle from="bp-activate:top" to="bp-onboard:bottom" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Onboarding Workflow → Customer Feedback -->
+          <aui-graph-noodle from="bp-onboard:top" to="bp-feedback:right" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Account Activation → Escalation Manager -->
+          <aui-graph-noodle from="bp-activate:right" to="bp-escalation:left" color="danger" weight="2"></aui-graph-noodle>
+          <!-- Escalation Manager → Contract Negotiation -->
+          <aui-graph-noodle from="bp-escalation:top" to="bp-negotiate:bottom" color="danger" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Customer Request -->
+          <aui-graph-node x="24" y="46" node-id="bp-request">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Customer Request</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>
+          <!-- Self-Service Portal -->
+          <aui-graph-node x="260" y="46" node-id="bp-portal">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Self-Service Portal</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>
+          <!-- Customer Feedback -->
+          <aui-graph-node x="980" y="46" node-id="bp-feedback">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Customer Feedback</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>
+          <!-- Lead Qualification -->
+          <aui-graph-node x="260" y="166" node-id="bp-qualify">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Lead Qualification</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>
+          <!-- Quote Generation -->
+          <aui-graph-node x="500" y="166" node-id="bp-quote">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Quote Generation</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>
+          <!-- Contract Negotiation -->
+          <aui-graph-node x="740" y="166" node-id="bp-negotiate">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Contract Negotiation</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>
+          <!-- Legal Review -->
+          <aui-graph-node x="500" y="286" node-id="bp-review">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Legal 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>
+          <!-- Compliance Check -->
+          <aui-graph-node x="740" y="286" node-id="bp-compliance">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Compliance Check</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>
+          <!-- Digital Signature -->
+          <aui-graph-node x="980" y="286" node-id="bp-sign">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">Digital Signature</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 Assessment -->
+          <aui-graph-node x="500" y="406" node-id="bp-credit">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Credit Assessment</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>
+          <!-- Invoice Generation -->
+          <aui-graph-node x="740" y="406" node-id="bp-invoice">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Invoice Generation</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>
+          <!-- Payment Processing -->
+          <aui-graph-node x="980" y="406" node-id="bp-payment">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Payment Processing</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>
+          <!-- Service Provisioning -->
+          <aui-graph-node x="740" y="526" node-id="bp-provision">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Service Provisioning</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Account Activation -->
+          <aui-graph-node x="980" y="526" node-id="bp-activate">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Account Activation</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+          <!-- Onboarding Workflow -->
+          <aui-graph-node x="1220" y="286" node-id="bp-onboard">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Onboarding Workflow</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>
+          <!-- Escalation Manager -->
+          <aui-graph-node x="1220" y="526" node-id="bp-escalation">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">Escalation Manager</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+        </aui-graph-layer>
+      </aui-graph-ui>