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

package/dist/docs/blocks/index.yaml

@@ -0,0 +1,245 @@
+settings-form:
+  summary: Card with header, form fields, and action footer.
+  kind: card
+  uses: [project preferences, account settings, app configuration]
+  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]
+
+settings-panel:
+  summary: Settings card with toggles, descriptions, and grouped controls.
+  kind: card
+  uses: [security preferences, notification toggles, feature flag management]
+  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]
+
+login-form:
+  summary: Login card with email, password, and forgot-password link.
+  kind: panel
+  uses: [app sign-in page, session-expired modal, admin portal entry]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-input, aui-button]
+
+login-simple:
+  summary: Simple bordered login card with email, password, and a single social option.
+  kind: panel
+  uses: [quick internal tool login, minimal auth page, embedded sign-in widget]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-input, aui-button, aui-divider]
+
+login-social:
+  summary: Centered login page with social providers, email/password, and brand header.
+  kind: panel
+  uses: [consumer app sign-in, social-first auth flow, marketing landing login]
+  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]
+
+login-branded:
+  summary: Two-column login with branded sidebar panel and image placeholder.
+  kind: panel
+  uses: [SaaS product login, brand-forward sign-in, marketing-oriented auth page]
+  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]
+
+login-two-column:
+  summary: Two-column login with form on the left and image placeholder on the right.
+  kind: panel
+  uses: [enterprise sign-in page, split-screen auth layout, branded login with illustration]
+  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]
+
+login-email-only:
+  summary: Minimal centered login with email field and optional social buttons.
+  kind: panel
+  uses: [magic-link auth page, passwordless sign-in, minimal onboarding entry]
+  components: [aui-stack, aui-heading, aui-text, aui-icon, aui-field, aui-input, aui-button]
+
+signup-form:
+  summary: Signup card with name, email, password, and terms notice.
+  kind: panel
+  uses: [new user registration, SaaS onboarding, trial account creation]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-input, aui-button]
+
+checkout-form:
+  summary: Payment form with card details and billing address.
+  kind: card
+  uses: [subscription payment, e-commerce checkout, plan upgrade billing]
+  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]
+
+pricing-card:
+  summary: Pricing tier card with features list and call-to-action.
+  kind: card
+  uses: [SaaS pricing page tier, plan comparison column, upgrade prompt]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-badge, aui-button]
+
+feature-upgrade:
+  summary: Feature upgrade card with checklist, note, and call-to-action.
+  kind: card
+  uses: [premium upsell prompt, beta feature activation, trial credit offer]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-badge, aui-button]
+
+profile-card:
+  summary: User profile card with avatar, bio, stats, and actions.
+  kind: card
+  uses: [team directory entry, social profile widget, account overview card]
+  components: [aui-container, aui-inset, aui-header, aui-content, aui-footer, aui-stack, aui-heading, aui-text, aui-avatar, aui-button]
+
+member-list:
+  summary: Panel with header and avatar-based member rows.
+  kind: panel
+  uses: [team management page, project access list, org member directory]
+  components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon, aui-badge, aui-button]
+
+contributors:
+  summary: Contributors card showing avatar grid with count and overflow link.
+  kind: card
+  uses: [open source contributor list, project team showcase, community members display]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-badge]
+
+notification-list:
+  summary: Panel listing recent notifications with avatars and timestamps.
+  kind: panel
+  uses: [notification drawer, activity feed sidebar, inbox-style message list]
+  components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-button]
+
+issue-assign:
+  summary: Issue assignment card with user search and selected token chips.
+  kind: card
+  uses: [bug tracker assignee picker, PR reviewer selection, task delegation widget]
+  components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-button, aui-icon]
+
+survey-card:
+  summary: Survey question card with checkbox options and submit action.
+  kind: card
+  uses: [onboarding questionnaire, feedback collection, preference multi-select]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-checkbox, aui-button]
+
+announcement-card:
+  summary: Announcement card with image area, description, and contextual footer actions.
+  kind: card
+  uses: [product deprecation notice, feature launch banner, marketing highlight card]
+  components: [aui-container, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-badge, aui-button]
+
+date-picker:
+  summary: Calendar date picker inside a bordered card.
+  kind: card
+  uses: [appointment booking widget, event date selector, date range filter card]
+  components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-calendar]
+
+empty-state:
+  summary: Centered placeholder for empty content areas with a call-to-action.
+  kind: card
+  uses: [first-project prompt, empty search results, blank dashboard placeholder]
+  components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-button]
+
+team-empty:
+  summary: Empty state for team member lists with invite action.
+  kind: card
+  uses: [new project team placeholder, workspace member onboarding, empty collaborator list]
+  components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon, aui-button]
+
+processing-state:
+  summary: Loading state with status icon, message, and cancel action.
+  kind: card
+  uses: [payment processing overlay, deployment in-progress card, file upload wait state]
+  components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon, aui-button]
+
+status-card:
+  summary: Centered confirmation or alert card with icon and CTA.
+  kind: card
+  uses: [payment success confirmation, error state with retry, subscription renewal notice]
+  components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-button]
+
+nav-card:
+  summary: Compact clickable card for navigation menus.
+  kind: widget
+  uses: [settings category link, dashboard quick-nav tile, app launcher grid item]
+  components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-icon]
+
+stat-cards:
+  summary: Row of compact KPI stat widgets.
+  kind: widget
+  uses: [dashboard metric summary, admin overview counters, project health indicators]
+  components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-badge]
+
+sidebar-nav:
+  summary: Compact app sidebar with icon navigation and user footer.
+  kind: card
+  uses: [SaaS app sidebar, admin panel navigation, project workspace menu]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-avatar, aui-divider]
+
+dashboard-layout:
+  summary: Application shell with sidebar, page header, and content grid.
+  kind: card
+  uses: [admin dashboard scaffold, SaaS main layout, project management shell]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-avatar, aui-badge, aui-divider]
+
+tabbed-panel:
+  summary: Segmented control card with tab-switched content panels.
+  kind: card
+  uses: [repo codespaces/local toggle, settings section switcher, dual-view panel]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-icon, aui-button, aui-segmented-control, aui-segment]
+
+keyboard-shortcuts:
+  summary: Panel listing keyboard shortcuts with command names and key combinations.
+  kind: card
+  uses: [help overlay reference, onboarding shortcut guide, settings hotkey list]
+  components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-divider, aui-kbd]
+
+env-variables:
+  summary: Environment variables panel with masked secrets and deploy action.
+  kind: card
+  uses: [deployment config panel, CI/CD secret management, app env editor]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-input, aui-button]
+
+usage-billing:
+  summary: Billing usage panel with SVG progress rings and cost breakdown.
+  kind: card
+  uses: [subscription billing dashboard, resource utilization monitor, cloud spend overview]
+  components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-divider]
+
+flow-editor:
+  summary: Data-driven pipeline diagram rendered from a JSON dataset.
+  kind: panel
+  uses: [data pipeline visualization, CI/CD workflow diagram, ETL lineage map]
+  components: [aui-container, aui-inset, aui-stack, aui-heading, aui-text, aui-badge]
+
+chart-card:
+  summary: Simple vertical bar chart card with month labels.
+  kind: card
+  uses: [monthly visitor trend, revenue over time, signup volume chart]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text]
+
+chart-labeled:
+  summary: Vertical bar chart with value labels above each bar.
+  kind: card
+  uses: [exact-value monthly comparison, sales figures by period, headcount by quarter]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text]
+
+chart-grouped:
+  summary: Grouped vertical bar chart comparing two data series.
+  kind: card
+  uses: [desktop vs mobile traffic, plan A/B comparison, year-over-year revenue]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text]
+
+chart-horizontal:
+  summary: Horizontal bar chart with category labels.
+  kind: card
+  uses: [browser market share, feature adoption ranking, survey response distribution]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text]
+
+chart-interactive:
+  summary: Wide chart card with stat summaries and dense bar visualization.
+  kind: card
+  uses: [dashboard hero chart, full-width analytics panel, traffic overview widget]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-bar]
+
+chart-donut:
+  summary: Donut chart card with center stat, legend, and selected segment footer.
+  kind: card
+  uses: [browser share breakdown, budget allocation ring, storage usage by category]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-badge]
+
+chart-activity:
+  summary: Weekly activity chart with labeled columns and rounded bars.
+  kind: card
+  uses: [fitness activity summary, commit frequency heatmap, daily usage tracker]
+  components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text]
+
+agent-chat:
+  summary: Full agent chat interface with message feed, composer, and suggestion chips.
+  kind: panel
+  uses: [AI assistant chat, code review conversation, customer support bot, onboarding wizard]
+  components: [aui-container, aui-header, aui-content, aui-footer, aui-avatar, aui-badge, aui-agent-feed, aui-agent-thread, aui-agent-message, aui-agent-text, aui-agent-activity, aui-agent-seeds, aui-agent-input, aui-agent-prompt]

package/dist/docs/blocks/issue-assign.yaml

@@ -0,0 +1,34 @@
+name: issue-assign
+type: block
+summary: Issue assignment card with user search and selected token chips.
+description: >
+  A compact card for assigning users to an issue. Header shows the task title
+  with an add button. Content area shows selected users as removable token
+  chips. Use for project management, code review assignment, or task delegation.
+
+components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-avatar, aui-button, aui-icon]
+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">Assign Issue</aui-heading>
+              <aui-text muted size="sm">Select users to assign to this issue.</aui-text>
+            </aui-stack>
+          </span>
+          <span slot="trailing"><aui-button ghost size="sm"><aui-icon name="plus"></aui-icon></aui-button></span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <div style="padding: 0.5rem 0.75rem; border: 1px solid var(--aui-border-muted); border-radius: var(--aui-radius); display: flex; align-items: center; gap: 0.5rem;">
+              <aui-avatar size="sm">AO</aui-avatar>
+              <aui-text size="sm" spacer>AgentOS</aui-text>
+              <aui-button ghost size="sm"><aui-icon name="x"></aui-icon></aui-button>
+            </div>
+          </aui-inset>
+        </aui-content>
+      </aui-container>
+    description: Issue assignment with selected user token and add action.

package/dist/docs/blocks/keyboard-shortcuts.yaml

@@ -0,0 +1,49 @@
+name: keyboard-shortcuts
+type: block
+summary: Panel listing keyboard shortcuts with command names and key combinations.
+description: >
+  A bordered card listing action names paired with their keyboard shortcuts
+  using aui-kbd elements. Separated by thin dividers. Use for help panels,
+  settings overlays, or onboarding checklists.
+
+components: [aui-container, aui-header, aui-content, aui-inset, aui-stack, aui-heading, aui-text, aui-divider, aui-kbd]
+kind: card
+
+examples:
+  - html: |
+      <aui-container kind="card" bordered max-width="sm">
+        <aui-header>
+          <span slot="content"><aui-heading size="lg">Shortcuts</aui-heading></span>
+        </aui-header>
+        <aui-content>
+          <aui-inset>
+            <aui-stack gap="0">
+              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
+                <aui-text size="sm" spacer>Search</aui-text>
+                <aui-stack direction="row" gap="1"><aui-kbd>⌘</aui-kbd><aui-kbd>K</aui-kbd></aui-stack>
+              </aui-stack>
+              <aui-divider></aui-divider>
+              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
+                <aui-text size="sm" spacer>Quick Actions</aui-text>
+                <aui-stack direction="row" gap="1"><aui-kbd>⌘</aui-kbd><aui-kbd>J</aui-kbd></aui-stack>
+              </aui-stack>
+              <aui-divider></aui-divider>
+              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
+                <aui-text size="sm" spacer>New File</aui-text>
+                <aui-stack direction="row" gap="1"><aui-kbd>⌘</aui-kbd><aui-kbd>N</aui-kbd></aui-stack>
+              </aui-stack>
+              <aui-divider></aui-divider>
+              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
+                <aui-text size="sm" spacer>Save</aui-text>
+                <aui-stack direction="row" gap="1"><aui-kbd>⌘</aui-kbd><aui-kbd>S</aui-kbd></aui-stack>
+              </aui-stack>
+              <aui-divider></aui-divider>
+              <aui-stack direction="row" gap="2" align-items="center" style="padding: 0.625rem 0;">
+                <aui-text size="sm" spacer>Toggle Sidebar</aui-text>
+                <aui-stack direction="row" gap="1"><aui-kbd>⌘</aui-kbd><aui-kbd>B</aui-kbd></aui-stack>
+              </aui-stack>
+            </aui-stack>
+          </aui-inset>
+        </aui-content>
+      </aui-container>
+    description: Keyboard shortcuts reference panel.

package/dist/docs/blocks/login-branded.yaml

@@ -0,0 +1,81 @@
+name: login-branded
+type: block
+summary: Two-column login with branded sidebar panel and image placeholder.
+description: >
+  A split-screen login that dedicates the left column to brand identity
+  and the authentication form, while the right column acts as an image
+  or illustration placeholder. The left panel carries the brand logo at
+  the top and vertically centers the form fields, giving the page a
+  polished, marketing-ready feel. Suited for SaaS products that want
+  every touchpoint to reinforce brand recognition.
+
+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: brand + form -->
+          <aui-container kind="panel" elevation="2" gap="0" spacer>
+            <aui-header>
+              <span slot="leading">
+                <aui-stack direction="row" gap="2" align-items="center">
+                  <img src="/icon.svg" alt="Acme Inc" style="width: 1.25rem; height: 1.25rem; border-radius: 0.25rem;">
+                  <aui-heading size="md" weight="medium">Acme Inc.</aui-heading>
+                </aui-stack>
+              </span>
+            </aui-header>
+            <aui-content>
+              <aui-inset>
+                <aui-stack gap="6">
+                  <aui-stack gap="1">
+                    <aui-heading size="xl">Welcome back</aui-heading>
+                    <aui-text muted size="sm">Enter your credentials to access your account</aui-text>
+                  </aui-stack>
+
+                  <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>
+
+                  <aui-stack gap="2">
+                    <aui-button scrim width="full">Login with Apple</aui-button>
+                    <aui-button scrim width="full">Login with Google</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: Branded two-column login with form on the left panel and image placeholder on the right.

package/dist/docs/blocks/login-email-only.yaml

@@ -0,0 +1,39 @@
+name: login-email-only
+type: block
+summary: Minimal centered login with email field and optional social buttons.
+description: >
+  A card-less, centered authentication layout built for magic-link or
+  passwordless flows. A brand icon and heading anchor the top, followed
+  by a single email field and login button. Social alternatives sit
+  below a subtle "Or" separator. Best for apps that prioritize
+  passwordless auth while keeping social login as a secondary path.
+
+components: [aui-stack, aui-heading, aui-text, aui-icon, aui-field, aui-input, aui-button]
+kind: panel
+
+examples:
+  - html: |
+      <aui-stack gap="4" align-items="center" text="center" max-width="md">
+        <img src="/icon.svg" alt="Acme Inc" style="width: 2.5rem; height: 2.5rem; border-radius: 0.375rem;">
+        <aui-stack gap="1" align-items="center">
+          <aui-heading size="xl">Welcome to Acme Inc.</aui-heading>
+          <aui-text muted size="sm">Don't have an account? <a href="#">Sign up</a></aui-text>
+        </aui-stack>
+
+        <aui-stack gap="6" width="full" text="left">
+          <aui-field label="Email" width="full" hide-label>
+            <aui-input type="email" placeholder="m@example.com" width="full"></aui-input>
+          </aui-field>
+          <aui-button primary accent width="full">Continue</aui-button>
+        </aui-stack>
+
+        <aui-text muted size="sm">Or</aui-text>
+
+        <aui-wrap gap="2" width="full">
+          <aui-button scrim width="full">Continue with Apple</aui-button>
+          <aui-button scrim width="full">Continue with Google</aui-button>
+        </aui-wrap>
+
+        <aui-text muted size="xs">By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</aui-text>
+      </aui-stack>
+    description: Minimal email-only login with social alternatives and terms notice.

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

@@ -0,0 +1,42 @@
+name: login-form
+type: block
+summary: Login card with email, password, and forgot-password link.
+description: >
+  A self-contained sign-in card for authentication flows. Header introduces
+  the form with a friendly heading, content holds email and password fields,
+  and the footer provides a link to the signup page. Use this block as the
+  centerpiece of a login page or inside a modal for session-expired prompts.
+
+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">Sign in to your account</aui-heading>
+              <aui-text muted size="sm">Enter your credentials below to continue.</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="you@company.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">Sign in</aui-button>
+            </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>
+    description: Login card with email and password fields, forgot-password link, and signup prompt.

package/dist/docs/blocks/login-simple.yaml

@@ -0,0 +1,54 @@
+name: login-simple
+type: block
+summary: Simple bordered login card with email, password, and a single social option.
+description: >
+  The most straightforward login block — a single bordered card with
+  email and password fields, a forgot-password link, and one social
+  login alternative. No brand header, no two-column layout, just the
+  essentials. Drop it into any page where you need a quick, clean
+  authentication form without extra visual flair.
+
+components: [aui-container, aui-header, aui-content, aui-footer, aui-inset, aui-stack, aui-heading, aui-text, aui-field, aui-input, aui-button, aui-divider]
+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">Login to your account</aui-heading>
+              <aui-text muted size="sm">Enter your email below to login to your 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</aui-text>
+                <aui-divider spacer></aui-divider>
+              </aui-stack>
+
+              <aui-button scrim width="full">Login with Google</aui-button>
+            </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>
+    description: Simple login card with email, password, forgot-password link, and Google sign-in option.

package/dist/docs/blocks/login-social.yaml

@@ -0,0 +1,73 @@
+name: login-social
+type: block
+summary: Centered login page with social providers, email/password, and brand header.
+description: >
+  A polished sign-in page that leads with social login buttons (Apple and
+  Google) before falling back to traditional email and password fields.
+  A brand mark sits above the card for identity reinforcement. Below the
+  card a terms notice rounds out the legal requirements. Ideal for
+  consumer-facing apps where frictionless social auth is the primary path.
+
+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-stack gap="4" align-items="center">
+        <!-- Brand -->
+        <aui-stack direction="row" gap="2" align-items="center">
+          <img src="/icon.svg" alt="Acme Inc" style="width: 1.5rem; height: 1.5rem; border-radius: 0.25rem;">
+          <aui-heading size="lg" weight="medium">Acme Inc.</aui-heading>
+        </aui-stack>
+
+        <!-- Card -->
+        <aui-container kind="panel" bordered max-width="md" style="min-width: 20rem;">
+          <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 with your Apple or Google account</aui-text>
+              </aui-stack>
+            </span>
+          </aui-header>
+          <aui-content>
+            <aui-inset>
+              <aui-stack gap="6">
+                <!-- Social buttons -->
+                <aui-stack gap="2">
+                  <aui-button scrim width="full">Login with Apple</aui-button>
+                  <aui-button scrim width="full">Login with Google</aui-button>
+                </aui-stack>
+
+                <!-- 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>
+
+                <!-- Email field -->
+                <aui-field label="Email" width="full">
+                  <aui-input type="email" placeholder="m@example.com" width="full"></aui-input>
+                </aui-field>
+
+                <!-- Password field with forgot link -->
+                <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>
+
+                <!-- Login button -->
+                <aui-button primary accent width="full">Login</aui-button>
+
+                <!-- 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>
+      </aui-stack>
+    description: Social-first login page with Apple and Google buttons, email/password fallback, and terms notice.