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

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>

package/dist/docs/blocks/flow-editor.yaml

@@ -1,17 +1,22 @@
 name: flow-editor
 type: block
 summary: Data-driven pipeline diagram rendered from a JSON dataset.
-description: >
-  A visual flow editor that renders pipeline nodes and connections from
-  a standard JSON structure. Each node has an id, label, description,
-  intent, and x/y position. Connections define from/to relationships
-  between nodes. The same JSON schema powers the static CSS preview
-  shown here and the interactive aui-noodles version with draggable
-  bezier connections. Adapters can transform external formats (Airflow
-  DAGs, dbt lineage, CI/CD pipelines) into this standard structure.
-
-components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-badge, aui-editor, aui-editor-layer, aui-graph-ui, aui-graph-layer, aui-graph-node, aui-graph-noodle, aui-graph-port]
-
+description: |
+  A visual flow editor that renders pipeline nodes and connections from a standard JSON structure. Each node has an id, label, description, intent, and x/y position. Connections define from/to relationships between nodes. The same JSON schema powers the static CSS preview shown here and the interactive aui-noodles version with draggable bezier connections. Adapters can transform external formats (Airflow DAGs, dbt lineage, CI/CD pipelines) into this standard structure.
+components:
+  - aui-container
+  - aui-inset
+  - aui-stack
+  - aui-heading
+  - aui-text
+  - aui-badge
+  - aui-editor
+  - aui-editor-layer
+  - aui-graph-ui
+  - aui-graph-layer
+  - aui-graph-node
+  - aui-graph-noodle
+  - aui-graph-port
 schema:
   nodes:
     - id: string
@@ -25,7 +30,6 @@ schema:
   connections:
     - from: string (node id)
       to: string (node id)
-
 dataset: |
   {
     "nodes": [
@@ -41,18 +45,23 @@ dataset: |
       { "from": "validate",  "to": "warehouse" }
     ]
   }
-
 examples:
-  - html: |
+  - description: Data-driven pipeline diagram rendered from a JSON dataset.
+    html: |-
       <aui-stack gap="2">
-        <aui-graph-ui style="width: 100%; height: 22rem; min-width: 44rem;" zoom="1">
+        <aui-graph-ui connectable style="width: 100%; height: 22rem" min-width="44" zoom="1">
           <aui-graph-layer name="wires" type="svg">
+            <!-- Data Ingest → Transform -->
             <aui-graph-noodle from="data-ingest:out" to="transform:in" color="accent" weight="2"></aui-graph-noodle>
+            <!-- Data Ingest → Validate -->
             <aui-graph-noodle from="data-ingest:out" to="validate:in" color="accent" weight="2"></aui-graph-noodle>
+            <!-- Transform → Data Warehouse -->
             <aui-graph-noodle from="transform:out" to="data-warehouse:in" color="success" weight="2"></aui-graph-noodle>
+            <!-- Validate → Data Warehouse -->
             <aui-graph-noodle from="validate:out" to="data-warehouse:in" color="warning" weight="2"></aui-graph-noodle>
           </aui-graph-layer>
           <aui-graph-layer name="content">
+            <!-- Source node -->
             <aui-graph-node x="30" y="45" node-id="data-ingest">
               <aui-container kind="widget" bordered accent>
                 <aui-inset>
@@ -65,6 +74,7 @@ examples:
                 <aui-graph-port port-id="out" side="right" type="output"></aui-graph-port>
               </aui-container>
             </aui-graph-node>
+            <!-- Transform node -->
             <aui-graph-node x="270" y="10" node-id="transform">
               <aui-container kind="widget" bordered info>
                 <aui-inset>
@@ -78,6 +88,7 @@ examples:
                 <aui-graph-port port-id="out" side="right" type="output"></aui-graph-port>
               </aui-container>
             </aui-graph-node>
+            <!-- Validate node -->
             <aui-graph-node x="270" y="140" node-id="validate">
               <aui-container kind="widget" bordered warning>
                 <aui-inset>
@@ -91,6 +102,7 @@ examples:
                 <aui-graph-port port-id="out" side="right" type="output"></aui-graph-port>
               </aui-container>
             </aui-graph-node>
+            <!-- Sink node -->
             <aui-graph-node x="510" y="75" node-id="data-warehouse">
               <aui-container kind="widget" bordered success>
                 <aui-inset>
@@ -108,6 +120,3 @@ examples:
 
         <aui-text muted size="xs" align-items="center">Rendered from a standard JSON dataset. The same schema powers the interactive aui-graph version. Adapters can transform Airflow DAGs, dbt lineage, or CI/CD pipelines into this format.</aui-text>
       </aui-stack>
-    description: >
-      Data pipeline with 4 nodes (Source → Process → QA → Sink) using
-      aui-graph components with draggable nodes and bezier noodle connections.

package/dist/docs/blocks/gen-ai-pipeline.yaml

@@ -1,8 +1,235 @@
 name: gen-ai-pipeline
 type: block
 summary: ComfyUI-style generative AI pipeline with encoders, samplers, and post-processing nodes.
-description: >
-  A visual node graph representing a Stable Diffusion / ComfyUI-style image generation
-  pipeline. Includes prompt encoding, CLIP, VAE, UNet, KSampler, ControlNet, LoRA merging,
-  SDXL refinement, upscaling, and face restoration stages connected by typed noodles.
-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 Stable Diffusion / ComfyUI-style image generation pipeline. Includes prompt encoding, CLIP, VAE, UNet, KSampler, ControlNet, LoRA merging, SDXL refinement, upscaling, and face restoration stages connected by typed noodles.
+components:
+  - aui-container
+  - aui-text
+  - aui-graph-ui
+  - aui-graph-layer
+  - aui-graph-node
+  - aui-graph-noodle
+  - aui-graph-port
+examples:
+  - description: ComfyUI-style generative AI pipeline with encoders, samplers, and post-processing nodes.
+    html: |-
+      <aui-graph-ui connectable style="width: 100%; height: 39rem; min-width: 89rem;">
+        <aui-graph-layer name="wires" type="svg">
+          <!-- Prompt Encoder → CLIP Text Encoder -->
+          <aui-graph-noodle from="ai-prompt:right" to="ai-clip:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Negative Prompt → CLIP Text Encoder -->
+          <aui-graph-noodle from="ai-neg-prompt:right" to="ai-clip:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Reference Image → VAE Encoder -->
+          <aui-graph-noodle from="ai-ref-image:right" to="ai-vae-enc:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Reference Image → IP-Adapter -->
+          <aui-graph-noodle from="ai-ref-image:right" to="ai-ipadapter:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Style Transfer LoRA → LoRA Stack Merge -->
+          <aui-graph-noodle from="ai-style:right" to="ai-lora-stack:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- CLIP Text Encoder → KSampler Scheduler -->
+          <aui-graph-noodle from="ai-clip:right" to="ai-scheduler:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- CLIP Text Encoder → UNet Backbone -->
+          <aui-graph-noodle from="ai-clip:right" to="ai-unet:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- VAE Encoder → ControlNet (Canny) -->
+          <aui-graph-noodle from="ai-vae-enc:right" to="ai-controlnet:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- IP-Adapter → UNet Backbone -->
+          <aui-graph-noodle from="ai-ipadapter:right" to="ai-unet:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- LoRA Stack Merge → UNet Backbone -->
+          <aui-graph-noodle from="ai-lora-stack:top" to="ai-unet:bottom" color="accent" weight="2"></aui-graph-noodle>
+          <!-- KSampler Scheduler → KSampler -->
+          <aui-graph-noodle from="ai-scheduler:right" to="ai-sampler:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- UNet Backbone → KSampler -->
+          <aui-graph-noodle from="ai-unet:right" to="ai-sampler:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- ControlNet (Canny) → KSampler -->
+          <aui-graph-noodle from="ai-controlnet:right" to="ai-sampler:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- KSampler → SDXL Refiner -->
+          <aui-graph-noodle from="ai-sampler:bottom" to="ai-refiner:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- KSampler → VAE Decoder -->
+          <aui-graph-noodle from="ai-sampler:right" to="ai-vae-dec:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- SDXL Refiner → VAE Decoder -->
+          <aui-graph-noodle from="ai-refiner:right" to="ai-vae-dec:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- VAE Decoder → Upscale -->
+          <aui-graph-noodle from="ai-vae-dec:bottom" to="ai-upscale:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- VAE Decoder → Save Image -->
+          <aui-graph-noodle from="ai-vae-dec:right" to="ai-output:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Upscale → Face Restore -->
+          <aui-graph-noodle from="ai-upscale:bottom" to="ai-face:top" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Upscale → Save Image -->
+          <aui-graph-noodle from="ai-upscale:right" to="ai-output:left" color="accent" weight="2"></aui-graph-noodle>
+          <!-- Face Restore → Preview Node -->
+          <aui-graph-noodle from="ai-face:right" to="ai-preview:left" color="accent" weight="2"></aui-graph-noodle>
+        </aui-graph-layer>
+        <aui-graph-layer name="content">
+          <!-- Prompt Encoder -->
+          <aui-graph-node x="24" y="46" node-id="ai-prompt">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Prompt Encoder</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>
+          <!-- Negative Prompt -->
+          <aui-graph-node x="24" y="186" node-id="ai-neg-prompt">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Negative Prompt</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>
+          <!-- Reference Image -->
+          <aui-graph-node x="24" y="326" node-id="ai-ref-image">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Reference Image</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>
+          <!-- Style Transfer LoRA -->
+          <aui-graph-node x="24" y="466" node-id="ai-style">
+            <aui-container kind="card" bordered padding="3" accent>
+              <aui-text weight="medium">Style Transfer LoRA</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>
+          <!-- CLIP Text Encoder -->
+          <aui-graph-node x="260" y="116" node-id="ai-clip">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">CLIP Text Encoder</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>
+          <!-- VAE Encoder -->
+          <aui-graph-node x="260" y="256" node-id="ai-vae-enc">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">VAE Encoder</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>
+          <!-- IP-Adapter -->
+          <aui-graph-node x="260" y="396" node-id="ai-ipadapter">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">IP-Adapter</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>
+          <!-- KSampler Scheduler -->
+          <aui-graph-node x="500" y="46" node-id="ai-scheduler">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">KSampler Scheduler</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>
+          <!-- UNet Backbone -->
+          <aui-graph-node x="500" y="186" node-id="ai-unet">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">UNet Backbone</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>
+          <!-- ControlNet (Canny) -->
+          <aui-graph-node x="500" y="326" node-id="ai-controlnet">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">ControlNet (Canny)</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>
+          <!-- KSampler -->
+          <aui-graph-node x="740" y="116" node-id="ai-sampler">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">KSampler</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>
+          <!-- SDXL Refiner -->
+          <aui-graph-node x="740" y="256" node-id="ai-refiner">
+            <aui-container kind="card" bordered padding="3" danger>
+              <aui-text weight="medium">SDXL Refiner</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>
+          <!-- VAE Decoder -->
+          <aui-graph-node x="980" y="116" node-id="ai-vae-dec">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">VAE Decoder</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>
+          <!-- Upscale (4x ESRGAN) -->
+          <aui-graph-node x="980" y="256" node-id="ai-upscale">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Upscale (4x ESRGAN)</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>
+          <!-- Face Restore (GFPGAN) -->
+          <aui-graph-node x="980" y="396" node-id="ai-face">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Face Restore (GFPGAN)</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>
+          <!-- Save Image -->
+          <aui-graph-node x="1220" y="186" node-id="ai-output">
+            <aui-container kind="card" bordered padding="3" success>
+              <aui-text weight="medium">Save Image</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>
+          <!-- Preview Node -->
+          <aui-graph-node x="1220" y="396" node-id="ai-preview">
+            <aui-container kind="card" bordered padding="3" info>
+              <aui-text weight="medium">Preview Node</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>
+          <!-- LoRA Stack Merge -->
+          <aui-graph-node x="500" y="466" node-id="ai-lora-stack">
+            <aui-container kind="card" bordered padding="3" warning>
+              <aui-text weight="medium">LoRA Stack Merge</aui-text>
+              <aui-graph-port port-id="left" side="left" type="input"></aui-graph-port>
+              <aui-graph-port port-id="right" side="right" type="output"></aui-graph-port>
+              <aui-graph-port port-id="top" side="top" type="input"></aui-graph-port>
+              <aui-graph-port port-id="bottom" side="bottom" type="output"></aui-graph-port>
+            </aui-container>
+          </aui-graph-node>
+        </aui-graph-layer>
+      </aui-graph-ui>