@agent-ui-kit/web-components 0.0.3 → 0.0.5

package/dist/docs/blocks/login-two-column.yaml

@@ -0,0 +1,78 @@
+name: login-two-column
+type: block
+summary: Two-column login with form on the left and image placeholder on the right.
+description: >
+  A split-screen authentication layout pairing a fully featured login
+  form with a visual panel. The left column holds email and password
+  fields plus a row of social provider buttons, while the right column
+  serves as an image or brand illustration placeholder. Works well for
+  marketing-oriented sign-in pages where you want to reinforce brand
+  identity alongside the auth flow.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-field, aui-input, aui-button, aui-divider]
+kind: panel
+
+examples:
+  - html: |
+      <aui-container padding="4" gap="0" transparent>
+        <aui-stack direction="row" gap="8" style="min-width: 44rem; min-height: 32rem">
+          <!-- Left: form -->
+          <aui-container kind="panel" elevation="2" gap="0" spacer>
+            <aui-header>
+              <span slot="content">
+                <aui-stack gap="1" align-items="center" text="center">
+                  <aui-heading size="xl">Welcome back</aui-heading>
+                  <aui-text muted size="sm">Login to your Acme Inc account</aui-text>
+                </aui-stack>
+              </span>
+            </aui-header>
+            <aui-content>
+              <aui-inset>
+                <aui-stack gap="6">
+                  <aui-field label="Email" width="full">
+                    <aui-input type="email" placeholder="m@example.com" width="full"></aui-input>
+                  </aui-field>
+
+                  <aui-field label="Password" width="full">
+                    <aui-input type="password" placeholder="Enter your password" width="full"></aui-input>
+                    <aui-text muted size="xs" slot="trailing" text="right"><a href="#">Forgot your password?</a></aui-text>
+                  </aui-field>
+
+                  <aui-button primary accent width="full">Login</aui-button>
+
+                  <!-- Divider -->
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-divider spacer></aui-divider>
+                    <aui-text muted size="sm">Or continue with</aui-text>
+                    <aui-divider spacer></aui-divider>
+                  </aui-stack>
+
+                  <!-- Social row -->
+                  <aui-stack direction="row" gap="2">
+                    <aui-button scrim grow="1">Apple</aui-button>
+                    <aui-button scrim grow="1">Google</aui-button>
+                    <aui-button scrim grow="1">Meta</aui-button>
+                  </aui-stack>
+
+                  <!-- Terms -->
+                  <aui-text muted size="xs" align-items="center" text="center">By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</aui-text>
+                </aui-stack>
+              </aui-inset>
+            </aui-content>
+            <aui-footer>
+              <span slot="content"><aui-text muted size="sm">Don't have an account? <a href="#">Sign up</a></aui-text></span>
+            </aui-footer>
+          </aui-container>
+
+          <!-- Right: image placeholder -->
+          <aui-container elevation="3" spacer justify-content="center" transparent>
+            <aui-inset>
+              <aui-stack gap="1" align-items="center" text="center">
+                <aui-icon name="image" size="xl" muted></aui-icon>
+                <aui-text muted size="sm">Brand illustration</aui-text>
+              </aui-stack>
+            </aui-inset>
+          </aui-container>
+        </aui-stack>
+      </aui-container>
+    description: Two-column login with email, password, and social buttons on the left and an image placeholder on the right.

package/dist/docs/blocks/marketing-automation.yaml

@@ -0,0 +1,7 @@
+name: marketing-automation
+type: block
+summary: Marketing Automation Engine — 16 nodes, 19 connections.
+description: >
+  Visual graph block rendered from the Marketing Automation Engine 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/member-list.yaml

@@ -0,0 +1,58 @@
+name: member-list
+type: block
+summary: Panel with header and avatar-based member rows.
+description: >
+  A spacious panel listing team members. Header has an icon, title,
+  subtitle, and a primary action button. Each member row shows an
+  avatar, name, metadata, and a role badge.
+
+components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon, aui-badge, aui-button]
+kind: panel
+
+examples:
+  - html: |
+      <aui-container kind="panel" bordered max-width="xl">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack direction="row" gap="3" align-items="center">
+              <aui-avatar size="lg" square><aui-icon name="user"></aui-icon></aui-avatar>
+              <aui-stack gap="1">
+                <aui-heading size="xl">Team Members</aui-heading>
+                <aui-text muted size="sm">Manage who has access to this project.</aui-text>
+              </aui-stack>
+            </aui-stack>
+          </span>
+          <span slot="trailing"><aui-button primary accent>Invite</aui-button></span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-avatar>AJ</aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="md">Alice Johnson</aui-heading>
+                  <aui-text muted size="sm">alice@acme.com · Engineer</aui-text>
+                </aui-stack>
+                <aui-badge>Admin</aui-badge>
+              </aui-stack>
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-avatar>BK</aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="md">Bob Kim</aui-heading>
+                  <aui-text muted size="sm">bob@acme.com · Designer</aui-text>
+                </aui-stack>
+                <aui-badge>Member</aui-badge>
+              </aui-stack>
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-avatar>CL</aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="md">Carol Lee</aui-heading>
+                  <aui-text muted size="sm">carol@acme.com · Product Manager</aui-text>
+                </aui-stack>
+                <aui-badge>Member</aui-badge>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>
+    description: Team member list with avatars, roles, and an invite action.

package/dist/docs/blocks/ml-pipeline.yaml

@@ -0,0 +1,7 @@
+name: ml-pipeline
+type: block
+summary: ML Training Pipeline — 12 nodes, 14 connections.
+description: >
+  Visual graph block rendered from the ML Training 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/nav-card.yaml

@@ -0,0 +1,27 @@
+name: nav-card
+type: block
+summary: Compact clickable card for navigation menus.
+description: >
+  A widget-sized interactive card that navigates on click.
+  Shows an icon in a square avatar, a title, a description,
+  and a trailing chevron. Uses interactive and href for
+  click-to-navigate behavior.
+
+components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon]
+kind: widget
+
+examples:
+  - html: |
+      <aui-container kind="widget" bordered interactive href="#" max-width="sm">
+        <aui-inset>
+          <aui-stack direction="row" gap="2" align-items="center">
+            <aui-avatar square><aui-icon name="gear"></aui-icon></aui-avatar>
+            <aui-stack gap="1" spacer>
+              <aui-heading size="md" weight="medium">Preferences</aui-heading>
+              <aui-text muted size="sm">Language, theme, and notifications</aui-text>
+            </aui-stack>
+            <aui-icon name="caret-right" muted></aui-icon>
+          </aui-stack>
+        </aui-inset>
+      </aui-container>
+    description: Clickable settings navigation card with icon and chevron.

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

@@ -0,0 +1,58 @@
+name: notification-list
+type: block
+summary: Panel listing recent notifications with avatars and timestamps.
+description: >
+  A panel-style container for displaying a chronological list of
+  notifications. The header includes a title and a bulk action to
+  mark all items as read. Each notification row shows an avatar,
+  a title, a message excerpt, and a relative timestamp. Suitable
+  for notification drawers, activity feeds, or inbox-style sidebars.
+
+components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-button]
+kind: panel
+
+examples:
+  - html: |
+      <aui-container kind="panel" bordered max-width="lg">
+        <aui-header>
+          <span slot="leading"><aui-heading size="xl">Notifications</aui-heading></span>
+          <span slot="trailing"><aui-button scrim>Mark all read</aui-button></span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+              <aui-stack direction="row" gap="2">
+                <aui-avatar>AJ</aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-heading size="md" spacer>Pull request comment</aui-heading>
+                    <aui-text muted size="xs">2 min ago</aui-text>
+                  </aui-stack>
+                  <aui-text muted size="sm">Alice Johnson commented on your pull request</aui-text>
+                </aui-stack>
+              </aui-stack>
+              <aui-stack direction="row" gap="2">
+                <aui-avatar>CI</aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-heading size="md" spacer>Build completed</aui-heading>
+                    <aui-text muted size="xs">15 min ago</aui-text>
+                  </aui-stack>
+                  <aui-text muted size="sm">Build #1234 completed successfully</aui-text>
+                </aui-stack>
+              </aui-stack>
+              <aui-stack direction="row" gap="2">
+                <aui-avatar>DT</aui-avatar>
+                <aui-stack gap="1" spacer>
+                  <aui-stack direction="row" gap="2" align-items="center">
+                    <aui-heading size="md" spacer>Team invitation</aui-heading>
+                    <aui-text muted size="xs">1 hour ago</aui-text>
+                  </aui-stack>
+                  <aui-text muted size="sm">You were added to the Design team</aui-text>
+                </aui-stack>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>
+    description: Notification list with three items showing comments, builds, and team activity.

package/dist/docs/blocks/oncology-pathway.yaml

@@ -0,0 +1,7 @@
+name: oncology-pathway
+type: block
+summary: Oncology Care Pathway — 17 nodes, 21 connections.
+description: >
+  Visual graph block rendered from the Oncology Care Pathway 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/pricing-card.yaml

@@ -0,0 +1,53 @@
+name: pricing-card
+type: block
+summary: Pricing tier card with features list and call-to-action.
+description: >
+  A single pricing tier presented as a bordered card. Header shows the
+  plan name alongside a highlight badge, followed by a prominent price
+  and billing period. The content area lists included features with
+  check icons, and the footer holds a sign-up button. Ideal for
+  pricing pages where each tier sits side-by-side in a row.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-badge, aui-button]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="sm">
+        <aui-header>
+          <span slot="leading"><aui-heading size="lg">Pro</aui-heading></span>
+          <span slot="trailing"><aui-badge accent>Popular</aui-badge></span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+              <aui-stack gap="1">
+                <aui-heading size="2xl" style="font-size: 3rem; letter-spacing: -0.04em; line-height: 1;">$29</aui-heading>
+                <aui-text muted size="sm">/month, billed annually</aui-text>
+              </aui-stack>
+              <aui-stack gap="3">
+                <aui-stack direction="row" gap="2" align-items="center">
+                  <aui-icon name="check" size="sm"></aui-icon>
+                  <aui-text size="md">Unlimited projects</aui-text>
+                </aui-stack>
+                <aui-stack direction="row" gap="2" align-items="center">
+                  <aui-icon name="check" size="sm"></aui-icon>
+                  <aui-text size="md">Priority support</aui-text>
+                </aui-stack>
+                <aui-stack direction="row" gap="2" align-items="center">
+                  <aui-icon name="check" size="sm"></aui-icon>
+                  <aui-text size="md">Custom integrations</aui-text>
+                </aui-stack>
+                <aui-stack direction="row" gap="2" align-items="center">
+                  <aui-icon name="check" size="sm"></aui-icon>
+                  <aui-text size="md">Advanced analytics</aui-text>
+                </aui-stack>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <aui-button primary width="full">Get started</aui-button>
+        </aui-footer>
+      </aui-container>
+    description: Pro pricing tier card with feature list and sign-up action.

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

@@ -0,0 +1,25 @@
+name: processing-state
+type: block
+summary: Loading state with status icon, message, and cancel action.
+description: >
+  A waiting state shown while an operation is in progress. The icon
+  serves as the visual anchor, the heading names what's happening,
+  the description sets expectations, and the cancel button provides
+  an escape hatch. Keep the message honest and specific.
+
+components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon, aui-button]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered shadow="1" max-width="md">
+        <aui-inset>
+          <aui-stack gap="4" align-items="center" text="center">
+            <aui-avatar size="xl" square><aui-icon name="gear"></aui-icon></aui-avatar>
+            <aui-heading size="xl">Processing your payment</aui-heading>
+            <aui-text muted size="sm">This usually takes a few seconds. You'll be redirected to your dashboard when it's done.</aui-text>
+            <aui-button scrim>Cancel transaction</aui-button>
+          </aui-stack>
+        </aui-inset>
+      </aui-container>
+    description: Processing state with contained icon, specific heading, reassuring description, and labeled cancel action.

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

@@ -0,0 +1,48 @@
+name: profile-card
+type: block
+summary: User profile card with avatar, bio, stats, and actions.
+description: >
+  A card displaying a user's profile information at a glance. Centered
+  layout with a large avatar, name, role, short bio, and a row of key
+  stats. Footer provides edit and messaging actions. Useful for team
+  directories, account pages, or social-style dashboards where you need
+  to present identity alongside engagement metrics.
+
+components: [aui-container, aui-inset, aui-header, aui-content, aui-footer, aui-stack, aui-heading, aui-text, aui-avatar, aui-button]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="md">
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4" align-items="center" text="center">
+              <aui-avatar size="lg">SR</aui-avatar>
+              <aui-stack gap="1" align-items="center">
+                <aui-heading size="xl">Sofia Rodriguez</aui-heading>
+                <aui-text muted size="sm">Senior Product Designer</aui-text>
+              </aui-stack>
+              <aui-text muted size="sm">Designing thoughtful experiences that bridge user needs and business goals. Previously at Figma and Stripe.</aui-text>
+              <aui-stack direction="row" gap="4">
+                <aui-stack gap="1" align-items="center">
+                  <aui-heading size="lg">12</aui-heading>
+                  <aui-text muted size="sm">Projects</aui-text>
+                </aui-stack>
+                <aui-stack gap="1" align-items="center">
+                  <aui-heading size="lg">1.2k</aui-heading>
+                  <aui-text muted size="sm">Followers</aui-text>
+                </aui-stack>
+                <aui-stack gap="1" align-items="center">
+                  <aui-heading size="lg">340</aui-heading>
+                  <aui-text muted size="sm">Following</aui-text>
+                </aui-stack>
+              </aui-stack>
+              <aui-stack direction="row" gap="2">
+                <aui-button scrim spacer>Edit profile</aui-button>
+                <aui-button primary accent spacer>Message</aui-button>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>
+    description: User profile card with avatar, bio, stats, and contact actions.

package/dist/docs/blocks/saas-onboarding.yaml

@@ -0,0 +1,7 @@
+name: saas-onboarding
+type: block
+summary: Enterprise SaaS Onboarding — 17 nodes, 19 connections.
+description: >
+  Visual graph block rendered from the Enterprise SaaS Onboarding 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/settings-form.yaml

@@ -0,0 +1,42 @@
+name: settings-form
+type: block
+summary: Card with header, form fields, and action footer.
+description: >
+  A structured settings form inside a bordered card container.
+  Header holds the title and description, content holds the fields,
+  footer holds cancel and save actions trailing-aligned.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-input, aui-textarea, aui-button]
+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">Project Settings</aui-heading>
+              <aui-text muted size="sm">Make changes to your project here. Click save when you're done.</aui-text>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+              <aui-field label="Name" width="full">
+                <aui-input placeholder="Acme Dashboard"></aui-input>
+              </aui-field>
+              <aui-field label="Description" description="This will be visible to all team members." width="full">
+                <aui-textarea placeholder="A real-time analytics dashboard for the Acme team."></aui-textarea>
+              </aui-field>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <aui-stack direction="row" gap="2">
+            <aui-button primary grow="1">Save changes</aui-button>
+            <aui-button scrim grow="1">Cancel</aui-button>
+          </aui-stack>
+        </aui-footer>
+      </aui-container>
+    description: Project settings form with name and description fields.

package/dist/docs/blocks/settings-panel.yaml

@@ -0,0 +1,54 @@
+name: settings-panel
+type: block
+summary: Settings card with toggles, descriptions, and grouped controls.
+description: >
+  A settings panel showing configuration options with inline descriptions. Each
+  setting is a row with a label, description, and a trailing control (switch,
+  button, or badge). Commonly used for account preferences, notification
+  settings, or feature toggles.
+
+components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-switch, aui-button, aui-badge, aui-divider, aui-icon]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="lg">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="lg">Security Settings</aui-heading>
+              <aui-text muted size="sm">Manage your account security preferences.</aui-text>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="4">
+              <aui-stack direction="row" gap="3" align-items="center">
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="md">Two-factor authentication</aui-heading>
+                  <aui-text muted size="sm">Verify via email or phone number.</aui-text>
+                </aui-stack>
+                <aui-button primary size="sm">Enable</aui-button>
+              </aui-stack>
+              <aui-divider></aui-divider>
+              <aui-stack direction="row" gap="3" align-items="center">
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="md">Wallpaper tinting</aui-heading>
+                  <aui-text muted size="sm">Allow the wallpaper to be tinted.</aui-text>
+                </aui-stack>
+                <aui-switch></aui-switch>
+              </aui-stack>
+              <aui-divider></aui-divider>
+              <aui-stack direction="row" gap="3" align-items="center">
+                <aui-icon name="check" style="flex-shrink: 0;"></aui-icon>
+                <aui-stack gap="1" spacer>
+                  <aui-heading size="md">Profile verified</aui-heading>
+                </aui-stack>
+                <aui-icon name="caret-right" muted></aui-icon>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>
+    description: Security settings panel with 2FA button, wallpaper tinting switch, and verified profile row.

package/dist/docs/blocks/sidebar-nav.yaml

@@ -0,0 +1,55 @@
+name: sidebar-nav
+type: block
+summary: Compact app sidebar with icon navigation and user footer.
+description: >
+  A fixed-width sidebar for app-level navigation. Uses card kind for
+  tighter padding than panel. Nav items are simple row stacks — the
+  active item uses the current attribute for visual distinction.
+  Footer shows the signed-in user with avatar and email. Designed
+  to sit at the left edge of a layout at 14-16rem width.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-avatar, aui-divider]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered elevation="2" max-width="xs">
+        <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" current 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>
+    description: App sidebar with active Dashboard item, three inactive links, and user footer.

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

@@ -0,0 +1,47 @@
+name: signup-form
+type: block
+summary: Signup card with name, email, password, and terms notice.
+description: >
+  A registration card for new-user onboarding. Collects full name, email,
+  and password in a clean vertical stack with a terms-of-service notice
+  near the submit button. Pair with the login-form block to cover both
+  sides of the authentication flow.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-input, aui-button]
+kind: panel
+
+examples:
+  - html: |
+      <aui-container kind="panel" bordered max-width="md">
+        <aui-header>
+          <span slot="leading">
+            <aui-stack gap="1">
+              <aui-heading size="xl">Create your account</aui-heading>
+              <aui-text muted size="sm">Get started in less than a minute.</aui-text>
+            </aui-stack>
+          </span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="6">
+              <aui-field label="Full name" width="full">
+                <aui-input placeholder="Jane Smith" width="full"></aui-input>
+              </aui-field>
+              <aui-field label="Email" width="full">
+                <aui-input type="email" placeholder="you@company.com" width="full"></aui-input>
+              </aui-field>
+              <aui-field label="Password" description="Must be at least 8 characters." width="full">
+                <aui-input type="password" placeholder="Choose a password" width="full"></aui-input>
+              </aui-field>
+              <aui-stack gap="2">
+                <aui-button primary accent width="full">Create account</aui-button>
+                <aui-text muted size="xs">By signing up you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</aui-text>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+        <aui-footer>
+          <span slot="content"><aui-text muted size="sm">Already have an account? <a href="#">Sign in</a></aui-text></span>
+        </aui-footer>
+      </aui-container>
+    description: Signup card with name, email, and password fields plus terms notice.

package/dist/docs/blocks/stat-cards.yaml

@@ -0,0 +1,49 @@
+name: stat-cards
+type: block
+summary: Row of compact KPI stat widgets.
+description: >
+  Dashboard-style stat cards in a horizontal row. Each widget shows
+  a muted label, a large numeric value, and a status badge. Uses
+  widget kind for compact padding.
+
+components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-badge]
+kind: widget
+
+examples:
+  - html: |
+      <aui-wrap gap="3">
+        <aui-container kind="widget" bordered spacer style="min-width: 12rem;">
+          <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>12</aui-heading>
+                <aui-badge accent>+3 today</aui-badge>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-container>
+        <aui-container kind="widget" bordered spacer style="min-width: 12rem;">
+          <aui-inset>
+            <aui-stack gap="2">
+              <aui-text muted size="sm">Uptime</aui-text>
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-heading size="2xl" spacer>99.9%</aui-heading>
+                <aui-badge success>All systems operational</aui-badge>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-container>
+        <aui-container kind="widget" bordered spacer style="min-width: 12rem;">
+          <aui-inset>
+            <aui-stack gap="2">
+              <aui-text muted size="sm">Open Issues</aui-text>
+              <aui-stack direction="row" gap="2" align-items="center">
+                <aui-heading size="2xl" spacer>3</aui-heading>
+                <aui-badge warning>Needs review</aui-badge>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-container>
+      </aui-wrap>
+    description: Three KPI stat cards showing active users, uptime, and open issues.