@agent-ui-kit/web-components 0.0.2 → 0.0.4

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

@@ -0,0 +1,57 @@
+name: checkout-form
+type: block
+summary: Payment form with card details and billing address.
+description: >
+  A structured checkout form for collecting payment information. Includes card
+  name, number, CVV, and expiry fields in a grid layout, a billing address
+  section with a "Same as shipping" checkbox, optional comments, and
+  submit/cancel actions.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-input, aui-textarea, aui-checkbox, aui-button, aui-divider]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="prose">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">Payment Method</aui-heading>
+              <aui-text muted size="sm">All transactions are secure and encrypted</aui-text>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="6">
+              <aui-field label="Name on Card" width="full">
+                <aui-input width="full" placeholder="John Doe"></aui-input>
+              </aui-field>
+              <aui-stack direction="row" gap="3">
+                <aui-field label="Card Number" width="full" grow="3">
+                  <aui-input width="full" placeholder="1234 5678 9012 3456"></aui-input>
+                </aui-field>
+                <aui-field label="CVV" grow="1">
+                  <aui-input width="full" placeholder="123"></aui-input>
+                </aui-field>
+              </aui-stack>
+              <aui-divider></aui-divider>
+              <aui-stack gap="1">
+                <aui-heading size="md">Billing Address</aui-heading>
+                <aui-text muted size="sm">The address associated with your payment method</aui-text>
+              </aui-stack>
+              <aui-checkbox>Same as shipping address</aui-checkbox>
+              <aui-field label="Comments" width="full">
+                <aui-textarea width="full" placeholder="Add any additional comments"></aui-textarea>
+              </aui-field>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <aui-stack direction="row" gap="2">
+            <aui-button scrim grow="1">Cancel</aui-button>
+            <aui-button primary grow="1">Submit Payment</aui-button>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>
+    description: Payment form with card details, billing address toggle, comments, and submit/cancel actions.

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

@@ -0,0 +1,7 @@
+name: clinical-trial
+type: block
+summary: Clinical Trial Pipeline — 13 nodes, 17 connections.
+description: >
+  Visual graph block rendered from the Clinical Trial Pipeline dataset using
+  aui-graph components with port-selector noodle connections.
+components: [aui-container, aui-text, aui-graph-ui, aui-graph-layer, aui-graph-node, aui-graph-noodle, aui-graph-port]

package/dist/docs/blocks/contributors.yaml

@@ -0,0 +1,51 @@
+name: contributors
+type: block
+summary: Contributors card showing avatar grid with count and overflow link.
+description: >
+  A card displaying project contributors as a grid of avatars with a count
+  badge. 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-badge]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="prose">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack direction="row" gap="2" align-items="center">
+              <aui-heading size="lg">Contributors</aui-heading>
+              <aui-badge>312</aui-badge>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="2">
+              <aui-wrap gap="2">
+                <aui-avatar>AJ</aui-avatar>
+                <aui-avatar>BK</aui-avatar>
+                <aui-avatar>CL</aui-avatar>
+                <aui-avatar>DM</aui-avatar>
+                <aui-avatar>EP</aui-avatar>
+                <aui-avatar>FW</aui-avatar>
+                <aui-avatar>GR</aui-avatar>
+                <aui-avatar>HN</aui-avatar>
+                <aui-avatar>IQ</aui-avatar>
+                <aui-avatar>JT</aui-avatar>
+                <aui-avatar>KS</aui-avatar>
+                <aui-avatar>LV</aui-avatar>
+                <aui-avatar>MX</aui-avatar>
+                <aui-avatar>NY</aui-avatar>
+                <aui-avatar>OZ</aui-avatar>
+                <aui-avatar>PA</aui-avatar>
+              </aui-wrap>
+            </aui-stack>
+          </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>
+        </aui-footer>
+      </aui-container>
+    description: Contributors grid with count badge and overflow link.

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

@@ -0,0 +1,7 @@
+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]

package/dist/docs/blocks/dashboard-layout.yaml

@@ -0,0 +1,121 @@
+name: dashboard-layout
+type: block
+summary: Application shell with sidebar, page header, and content grid.
+description: >
+  A production-ready app shell combining a compact sidebar with a
+  main content area. The sidebar uses card kind with elevation for
+  visual separation, tight nav items with an active state, and a
+  user footer. The main area has a welcoming page header and a
+  responsive grid of stat cards. This is a starting composition —
+  the content area would hold tables, charts, or lists in a real app.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-wrap, aui-heading, aui-text, aui-icon, aui-avatar, aui-badge, aui-divider]
+kind: card
+
+examples:
+  - html: |
+      <aui-stack direction="row" gap="0" style="min-height: 28rem;">
+        <!-- Sidebar -->
+        <aui-container kind="card" elevation="2" style="width: 14rem; flex-shrink: 0;">
+          <aui-header>
+            <span slot="leading"><aui-avatar square size="sm"><img src="/icon.svg" alt="Acme Inc"></aui-avatar></span>
+            <span slot="content"><aui-heading size="md" weight="medium">Acme Inc</aui-heading></span>
+          </aui-header>
+          <aui-content>
+            <aui-inset>
+              <aui-stack gap="2">
+                <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.375rem 0.5rem; border-radius: var(--aui-radius); background: var(--aui-control);">
+                  <aui-icon name="house" size="sm"></aui-icon>
+                  <aui-text size="sm" weight="medium">Dashboard</aui-text>
+                </aui-stack>
+                <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.375rem 0.5rem; border-radius: var(--aui-radius);">
+                  <aui-icon name="star" size="sm" muted></aui-icon>
+                  <aui-text size="sm" muted>Projects</aui-text>
+                </aui-stack>
+                <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.375rem 0.5rem; border-radius: var(--aui-radius);">
+                  <aui-icon name="user" size="sm" muted></aui-icon>
+                  <aui-text size="sm" muted>Team</aui-text>
+                </aui-stack>
+                <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.375rem 0.5rem; border-radius: var(--aui-radius);">
+                  <aui-icon name="gear" size="sm" muted></aui-icon>
+                  <aui-text size="sm" muted>Settings</aui-text>
+                </aui-stack>
+              </aui-stack>
+            </aui-inset>
+          </aui-content>
+          <aui-footer>
+            <span slot="leading">
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-avatar size="sm">AJ</aui-avatar>
+                <aui-stack gap="0" spacer>
+                  <aui-text size="sm" weight="medium">Alice Johnson</aui-text>
+                  <aui-text muted size="xs">alice@acme.com</aui-text>
+                </aui-stack>
+              </aui-stack>
+            </span>
+          </aui-footer>
+        </aui-container>
+
+        <!-- Main -->
+        <aui-stack gap="0" spacer>
+          <!-- Page header -->
+          <aui-header style="padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--aui-border-muted);">
+            <span slot="leading">
+              <aui-stack gap="1">
+                <aui-heading size="xl">Dashboard</aui-heading>
+                <aui-text muted size="sm">Welcome back, Alice. Here's what's happening today.</aui-text>
+              </aui-stack>
+            </span>
+          </aui-header>
+
+          <!-- Content -->
+          <aui-stack gap="3" style="padding: 1.5rem;">
+            <aui-wrap gap="3">
+              <aui-container kind="widget" bordered spacer style="min-width: 11rem;">
+                <aui-inset>
+                  <aui-stack gap="2">
+                    <aui-text muted size="sm">Revenue</aui-text>
+                    <aui-stack direction="row" gap="2" align-items="center">
+                      <aui-heading size="2xl" spacer>$24,500</aui-heading>
+                      <aui-badge accent>+12%</aui-badge>
+                    </aui-stack>
+                  </aui-stack>
+                </aui-inset>
+              </aui-container>
+              <aui-container kind="widget" bordered spacer style="min-width: 11rem;">
+                <aui-inset>
+                  <aui-stack gap="2">
+                    <aui-text muted size="sm">Active Users</aui-text>
+                    <aui-stack direction="row" gap="2" align-items="center">
+                      <aui-heading size="2xl" spacer>1,240</aui-heading>
+                      <aui-badge success>+8%</aui-badge>
+                    </aui-stack>
+                  </aui-stack>
+                </aui-inset>
+              </aui-container>
+              <aui-container kind="widget" bordered spacer style="min-width: 11rem;">
+                <aui-inset>
+                  <aui-stack gap="2">
+                    <aui-text muted size="sm">Open Tasks</aui-text>
+                    <aui-stack direction="row" gap="2" align-items="center">
+                      <aui-heading size="2xl" spacer>17</aui-heading>
+                      <aui-badge warning>3 overdue</aui-badge>
+                    </aui-stack>
+                  </aui-stack>
+                </aui-inset>
+              </aui-container>
+            </aui-wrap>
+
+            <!-- Placeholder for table/chart area -->
+            <aui-container kind="card" bordered style="min-height: 10rem;">
+              <aui-inset>
+                <aui-stack gap="1" align-items="center" text="center" style="padding: 2rem 0;">
+                  <aui-icon name="star" style="--aui-icon-size: 3rem;" muted></aui-icon>
+                  <aui-text muted size="sm">Charts and tables will appear here.</aui-text>
+                </aui-stack>
+              </aui-inset>
+            </aui-container>
+          </aui-stack>
+        </aui-stack>
+      </aui-stack>
+    description: Full dashboard shell with sidebar, page header, stat cards, and content placeholder.

package/dist/docs/blocks/data-eng-dag.yaml

@@ -0,0 +1,9 @@
+name: data-eng-dag
+type: block
+summary: Airflow-style data engineering DAG with medallion architecture and quality gates.
+description: >
+  A visual directed acyclic graph representing a modern data engineering pipeline.
+  Ingests from S3, Kafka, PostgreSQL CDC, and REST APIs through schema validation,
+  deduplication, and PII scrubbing into a Bronze/Silver/Gold medallion lakehouse
+  architecture with quality checks, aggregation, and BI dashboard refresh.
+components: [aui-container, aui-text, aui-graph-ui, aui-graph-layer, aui-graph-node, aui-graph-noodle, aui-graph-port]

package/dist/docs/blocks/date-picker.yaml

@@ -0,0 +1,30 @@
+name: date-picker
+type: block
+summary: Calendar date picker inside a bordered card.
+description: >
+  A date selection card wrapping the aui-calendar component. Shows
+  the calendar with a card surface and border for visual containment.
+  Use as a standalone picker or compose inside dialogs, popovers,
+  or form layouts. Supports single selection and range mode.
+
+components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-calendar]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="sm">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">Select a date</aui-heading>
+              <aui-text muted size="sm">Choose your preferred appointment date.</aui-text>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-calendar></aui-calendar>
+          </aui-inset>
+        </aui-content>
+      </aui-container>
+    description: Calendar picker inside a card with header context.

package/dist/docs/blocks/ddx-workflow.yaml

@@ -0,0 +1,9 @@
+name: ddx-workflow
+type: block
+summary: Clinical differential diagnosis workflow with Bayesian reasoning and feedback loops.
+description: >
+  A visual node graph representing a clinical DDx decision process. Starts with
+  patient intake, branches into symptom collection and medical history, then flows
+  through hypothesis generation, Bayesian evidence updates, targeted testing, and
+  pruning with feedback loops for continuous monitoring and specialist consultation.
+components: [aui-container, aui-text, aui-graph-ui, aui-graph-layer, aui-graph-node, aui-graph-noodle, aui-graph-port]

package/dist/docs/blocks/empty-state.yaml

@@ -0,0 +1,26 @@
+name: empty-state
+type: block
+summary: Centered placeholder for empty content areas with a call-to-action.
+description: >
+  A card shown when a section has no data to display. Centered layout
+  with a large muted icon, heading, descriptive text, and a primary
+  action button to guide the user toward their first step. Use this
+  to replace blank space in lists, tables, or dashboards so users
+  always have a clear path forward.
+
+components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-button]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="sm">
+        <aui-inset>
+          <aui-stack gap="4" align-items="center" text="center">
+            <aui-icon name="star" style="--aui-icon-size: 3rem;" muted></aui-icon>
+            <aui-heading size="xl">No projects yet</aui-heading>
+            <aui-text muted>Create your first project to get started. Projects help you organize your work and collaborate with your team.</aui-text>
+            <aui-button primary accent width="full">Create project</aui-button>
+          </aui-stack>
+        </aui-inset>
+      </aui-container>
+    description: Empty state prompting the user to create their first project.

package/dist/docs/blocks/env-variables.yaml

@@ -0,0 +1,46 @@
+name: env-variables
+type: block
+summary: Environment variables panel with masked secrets and deploy action.
+description: >
+  A panel listing environment variable key-value pairs. Keys use monospace
+  font. Secret values are masked with dots; public values show their content.
+  Footer has edit and deploy actions.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-input, aui-button]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="md">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">Environment Variables</aui-heading>
+              <aui-text muted size="sm">Production · 8 variables</aui-text>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="2">
+              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.5rem 0.75rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
+                <aui-text size="sm" weight="medium" spacer style="font-family: var(--aui-font-family-mono);">DATABASE_URL</aui-text>
+                <aui-text muted size="sm" style="font-family: var(--aui-font-family-mono); letter-spacing: 0.1em;">········</aui-text>
+              </aui-stack>
+              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.5rem 0.75rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
+                <aui-text size="sm" weight="medium" spacer style="font-family: var(--aui-font-family-mono);">NEXT_PUBLIC_API</aui-text>
+                <aui-text muted size="sm" style="font-family: var(--aui-font-family-mono);">https://api.example.com</aui-text>
+              </aui-stack>
+              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.5rem 0.75rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius);">
+                <aui-text size="sm" weight="medium" spacer style="font-family: var(--aui-font-family-mono);">STRIPE_SECRET</aui-text>
+                <aui-text muted size="sm" style="font-family: var(--aui-font-family-mono); letter-spacing: 0.1em;">········</aui-text>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <span slot="leading"><aui-button outline size="sm">Edit</aui-button></span>
+          <span slot="trailing"><aui-button primary accent size="sm">Deploy</aui-button></span>
+        </aui-footer>
+      </aui-container>
+    description: Environment variables panel with masked secrets and deploy action.

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

@@ -0,0 +1,52 @@
+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.
+
+components: [aui-container, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon, aui-badge, aui-button]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="prose">
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+              <aui-stack gap="1">
+                <aui-heading size="xl">Ship faster & safer with AI Agent</aui-heading>
+                <aui-text muted size="sm">Your use is subject to the Public Beta Agreement and AI Product Terms.</aui-text>
+              </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-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-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-stack>
+              </aui-stack>
+              <aui-container kind="widget" elevation="3">
+                <aui-inset>
+                  <aui-text muted size="sm">Pro teams get $100 in trial credit for 2 weeks after activation.</aui-text>
+                </aui-inset>
+              </aui-container>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <aui-stack direction="row" gap="2">
+            <aui-button scrim grow="1">Cancel</aui-button>
+            <aui-button primary grow="1">Enable with $100 credits</aui-button>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>
+    description: Feature upgrade card with benefits checklist and trial credit offer.

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

@@ -0,0 +1,7 @@
+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]

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

@@ -0,0 +1,113 @@
+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]
+
+schema:
+  nodes:
+    - id: string
+      label: string
+      description: string
+      intent: accent | info | success | warning | danger
+      badge: string
+      x: number (rem)
+      y: number (rem)
+      width: number (rem, default 10)
+  connections:
+    - from: string (node id)
+      to: string (node id)
+
+dataset: |
+  {
+    "nodes": [
+      { "id": "ingest",    "label": "Data Ingest",     "description": "S3 + Kafka streams",     "intent": "accent",  "badge": "Source",  "x": 2,  "y": 4, "width": 10 },
+      { "id": "transform", "label": "Transform",       "description": "dbt models + Spark",     "intent": "info",    "badge": "Process", "x": 17, "y": 1.5, "width": 10 },
+      { "id": "validate",  "label": "Validate",        "description": "Schema + quality checks", "intent": "warning", "badge": "QA",      "x": 17, "y": 10.5, "width": 10 },
+      { "id": "warehouse", "label": "Data Warehouse",  "description": "Gold layer analytics",   "intent": "success", "badge": "Sink",    "x": 32, "y": 6, "width": 10 }
+    ],
+    "connections": [
+      { "from": "ingest",    "to": "transform" },
+      { "from": "ingest",    "to": "validate" },
+      { "from": "transform", "to": "warehouse" },
+      { "from": "validate",  "to": "warehouse" }
+    ]
+  }
+
+examples:
+  - html: |
+      <aui-stack gap="2">
+        <aui-graph-ui style="width: 100%; height: 22rem; min-width: 44rem;" zoom="1">
+          <aui-graph-layer name="wires" type="svg">
+            <aui-graph-noodle from="data-ingest:out" to="transform:in" color="accent" weight="2"></aui-graph-noodle>
+            <aui-graph-noodle from="data-ingest:out" to="validate:in" color="accent" weight="2"></aui-graph-noodle>
+            <aui-graph-noodle from="transform:out" to="data-warehouse:in" color="success" weight="2"></aui-graph-noodle>
+            <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">
+            <aui-graph-node x="30" y="45" node-id="data-ingest">
+              <aui-container kind="widget" bordered accent>
+                <aui-inset>
+                  <aui-stack gap="1">
+                    <aui-badge accent>Source</aui-badge>
+                    <aui-heading size="sm">Data Ingest</aui-heading>
+                    <aui-text muted size="xs">S3 + Kafka streams</aui-text>
+                  </aui-stack>
+                </aui-inset>
+                <aui-graph-port port-id="out" side="right" type="output"></aui-graph-port>
+              </aui-container>
+            </aui-graph-node>
+            <aui-graph-node x="270" y="10" node-id="transform">
+              <aui-container kind="widget" bordered info>
+                <aui-inset>
+                  <aui-stack gap="1">
+                    <aui-badge info>Process</aui-badge>
+                    <aui-heading size="sm">Transform</aui-heading>
+                    <aui-text muted size="xs">dbt models + Spark</aui-text>
+                  </aui-stack>
+                </aui-inset>
+                <aui-graph-port port-id="in" side="left" type="input"></aui-graph-port>
+                <aui-graph-port port-id="out" side="right" type="output"></aui-graph-port>
+              </aui-container>
+            </aui-graph-node>
+            <aui-graph-node x="270" y="140" node-id="validate">
+              <aui-container kind="widget" bordered warning>
+                <aui-inset>
+                  <aui-stack gap="1">
+                    <aui-badge warning>QA</aui-badge>
+                    <aui-heading size="sm">Validate</aui-heading>
+                    <aui-text muted size="xs">Schema + quality checks</aui-text>
+                  </aui-stack>
+                </aui-inset>
+                <aui-graph-port port-id="in" side="left" type="input"></aui-graph-port>
+                <aui-graph-port port-id="out" side="right" type="output"></aui-graph-port>
+              </aui-container>
+            </aui-graph-node>
+            <aui-graph-node x="510" y="75" node-id="data-warehouse">
+              <aui-container kind="widget" bordered success>
+                <aui-inset>
+                  <aui-stack gap="1">
+                    <aui-badge success>Sink</aui-badge>
+                    <aui-heading size="sm">Data Warehouse</aui-heading>
+                    <aui-text muted size="xs">Gold layer analytics</aui-text>
+                  </aui-stack>
+                </aui-inset>
+                <aui-graph-port port-id="in" side="left" type="input"></aui-graph-port>
+              </aui-container>
+            </aui-graph-node>
+          </aui-graph-layer>
+        </aui-graph-ui>
+
+        <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

@@ -0,0 +1,8 @@
+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]