@adia-ai/a2ui-corpus 0.0.1

package/patterns/forms/theme-customizer.json

@@ -0,0 +1,180 @@
+{
+  "$schema": "../_schema.json",
+  "name": "theme-customizer",
+  "version": 2,
+  "domain": "forms",
+  "description": "Card with color pickers, theme select, density slider, and preview area for theme customization.",
+  "tags": {
+    "purpose": [
+      "settings",
+      "customization"
+    ],
+    "complexity": "complex",
+    "layout": "single-column",
+    "interaction": [
+      "form-submit",
+      "live-preview"
+    ]
+  },
+  "keywords": [
+    "theme",
+    "customizer",
+    "color",
+    "appearance",
+    "dark mode",
+    "density",
+    "style"
+  ],
+  "related": [
+    "settings-page",
+    "slider-range",
+    "color-picker-panel"
+  ],
+  "template": [
+    {
+      "id": "root",
+      "component": "Card",
+      "size": "lg",
+      "children": [
+        "hdr",
+        "sec",
+        "ftr"
+      ]
+    },
+    {
+      "id": "hdr",
+      "component": "Header",
+      "children": [
+        "title",
+        "desc"
+      ]
+    },
+    {
+      "id": "title",
+      "component": "Text",
+      "slot": "heading",
+      "textContent": "Theme Customizer",
+      "variant": "section"
+    },
+    {
+      "id": "desc",
+      "component": "Text",
+      "slot": "description",
+      "variant": "caption",
+      "textContent": "Personalize your interface appearance"
+    },
+    {
+      "id": "sec",
+      "component": "Section",
+      "children": [
+        "fields"
+      ]
+    },
+    {
+      "id": "fields",
+      "component": "Column",
+      "children": [
+        "colors-row",
+        "theme-select-field",
+        "density-field",
+        "preview-label"
+      ],
+      "gap": "4"
+    },
+    {
+      "id": "colors-row",
+      "component": "Row",
+      "children": [
+        "primary-color-field",
+        "accent-color-field"
+      ],
+      "gap": "3"
+    },
+    {
+      "id": "primary-color-field",
+      "component": "Field",
+      "label": "Primary Color",
+      "children": [
+        "primary-color"
+      ]
+    },
+    {
+      "id": "primary-color",
+      "component": "Input",
+      "type": "color",
+      "name": "primaryColor",
+      "value": "#6366f1"
+    },
+    {
+      "id": "accent-color-field",
+      "component": "Field",
+      "label": "Accent Color",
+      "children": [
+        "accent-color"
+      ]
+    },
+    {
+      "id": "accent-color",
+      "component": "Input",
+      "type": "color",
+      "name": "accentColor",
+      "value": "#f59e0b"
+    },
+    {
+      "id": "theme-select-field",
+      "component": "Field",
+      "label": "Theme",
+      "children": [
+        "theme-select"
+      ]
+    },
+    {
+      "id": "theme-select",
+      "component": "Select",
+      "name": "theme",
+      "placeholder": "Select theme..."
+    },
+    {
+      "id": "density-field",
+      "component": "Field",
+      "label": "Density",
+      "children": [
+        "density"
+      ]
+    },
+    {
+      "id": "density",
+      "component": "Slider",
+      "min": 1,
+      "max": 5,
+      "value": 3,
+      "name": "density"
+    },
+    {
+      "id": "preview-label",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "Preview will update in real time"
+    },
+    {
+      "id": "ftr",
+      "component": "Footer",
+      "children": [
+        "reset-btn",
+        "save-btn"
+      ]
+    },
+    {
+      "id": "reset-btn",
+      "component": "Button",
+      "text": "Reset to Default",
+      "variant": "ghost"
+    },
+    {
+      "id": "save-btn",
+      "component": "Button",
+      "text": "Save Theme",
+      "variant": "primary"
+    }
+  ]
+}

package/patterns/forms/theme-customizer.yaml

@@ -0,0 +1,53 @@
+# Generated by scripts/generate-yaml-scaffolds.mjs
+# Narrative doc — JSON sibling remains the canonical machine source.
+# Fill in TODO sections by hand.
+
+$schema: ../../../../../scripts/schemas/pattern.yaml.schema.json
+name: theme-customizer
+domain: forms
+version: 1
+description: >-
+  Card with color pickers, theme select, density slider, and preview area for theme customization.
+tags:
+  purpose:
+    - settings
+    - customization
+  complexity: complex
+  layout: single-column
+  interaction:
+    - form-submit
+    - live-preview
+keywords:
+  - theme
+  - customizer
+  - color
+  - appearance
+  - dark mode
+  - density
+  - style
+related:
+  - settings-page
+  - slider-range
+  - color-picker-panel
+use-cases:
+  - "TODO: primary use case"
+  - "TODO: secondary use case"
+variants:
+  - name: TODO
+    description: "TODO: variant description"
+wiring-intent:
+  summary: Static pattern (no interactive wiring).
+  controllers: []
+  actions: []
+components:
+  - Card
+  - Header
+  - Text
+  - Section
+  - Column
+  - Row
+  - Input
+  - Select
+  - Slider
+  - Footer
+  - Button

package/patterns/forms/two-factor-auth.json

@@ -0,0 +1,99 @@
+{
+  "$schema": "../_schema.json",
+  "name": "two-factor-auth",
+  "version": 1,
+  "domain": "forms",
+  "description": "Two-factor authentication setup flow: scan QR code in an authenticator app, enter a 6-digit OTP to verify, view backup codes, then enable 2FA.",
+  "tags": {
+    "purpose": ["authentication", "security", "setup"],
+    "complexity": "composed",
+    "layout": "single-column",
+    "interaction": ["form-submit"]
+  },
+  "keywords": [
+    "2fa",
+    "two factor",
+    "two-factor authentication",
+    "authenticator",
+    "otp",
+    "backup codes",
+    "security",
+    "enable 2fa",
+    "mfa",
+    "totp",
+    "qr code"
+  ],
+  "related": ["otp-form", "otp-verification", "login-form", "settings-page"],
+  "template": [
+    { "id": "root", "component": "Card", "size": "lg",
+      "children": ["root-hdr", "root-sec", "root-ftr"] },
+
+    { "id": "root-hdr", "component": "Header",
+      "children": ["root-title", "root-desc"] },
+
+    { "id": "root-title", "component": "Text", "slot": "heading", "variant": "section",
+      "textContent": "Set up two-factor authentication", "role": "heading" },
+
+    { "id": "root-desc", "component": "Text", "slot": "description", "variant": "caption",
+      "textContent": "Scan the QR code with your authenticator app, then enter the 6-digit code to confirm.",
+      "role": "description" },
+
+    { "id": "root-sec", "component": "Section",
+      "children": ["root-body"] },
+
+    { "id": "root-body", "component": "Column", "gap": "4", "role": "container",
+      "children": ["qr-block", "otp-block", "backup-block"] },
+
+    { "id": "qr-block", "component": "Column", "gap": "2", "align": "center",
+      "children": ["qr-label", "qr-embed", "qr-caption"] },
+    { "id": "qr-label", "component": "Text", "variant": "label",
+      "textContent": "1. Scan this QR code", "role": "heading" },
+    { "id": "qr-embed", "component": "Embed",
+      "src": "https://example.com/2fa/qr.png", "alt": "Authenticator QR code",
+      "width": "200", "height": "200" },
+    { "id": "qr-caption", "component": "Text", "variant": "caption",
+      "textContent": "Or enter this secret manually: JBSWY3DPEHPK3PXP",
+      "role": "description" },
+
+    { "id": "otp-block", "component": "Column", "gap": "2",
+      "children": ["otp-label", "otp", "otp-caption"] },
+    { "id": "otp-label", "component": "Text", "variant": "label",
+      "textContent": "2. Enter the 6-digit code", "role": "heading" },
+    { "id": "otp", "component": "OtpInput", "role": "form-field",
+      "name": "code", "length": 6, "required": true },
+    { "id": "otp-caption", "component": "Text", "variant": "caption",
+      "textContent": "The code refreshes every 30 seconds in your authenticator app.",
+      "role": "description" },
+
+    { "id": "backup-block", "component": "Column", "gap": "2",
+      "children": ["backup-label", "backup-alert", "backup-codes"] },
+    { "id": "backup-label", "component": "Text", "variant": "label",
+      "textContent": "3. Save your backup codes", "role": "heading" },
+    { "id": "backup-alert", "component": "Alert", "variant": "warning",
+      "text": "Store these codes somewhere safe. Each can be used once if you lose access to your authenticator." },
+    { "id": "backup-codes", "component": "Text", "variant": "code",
+      "textContent": "A1B2-C3D4  E5F6-G7H8  I9J0-K1L2  M3N4-O5P6  Q7R8-S9T0  U1V2-W3X4",
+      "role": "description" },
+
+    { "id": "root-ftr", "component": "Footer",
+      "children": ["root-action"] },
+
+    { "id": "root-action", "component": "Button", "variant": "primary", "role": "action",
+      "text": "Enable 2FA", "block": true }
+  ],
+  "wiring": {
+    "controllers": [
+      { "id": "twofa-ctrl", "type": "FormController", "host": "root-body",
+        "config": { "validateOn": "submit" },
+        "bind": { "values": "/form/values", "valid": "/form/valid" } }
+    ],
+    "actions": [
+      { "event": { "event": "press", "target": "root-action" },
+        "handler": "submit-resource",
+        "config": { "uri": "api://auth/2fa/enable", "method": "POST" },
+        "onSuccess": [{ "handler": "notify", "config": { "message": "Two-factor authentication enabled.", "variant": "success" } }],
+        "onError": [{ "handler": "notify", "config": { "message": "Invalid code. Please try again.", "variant": "error" } }]
+      }
+    ]
+  }
+}

package/patterns/forms/two-factor-auth.yaml

@@ -0,0 +1,62 @@
+$schema: ../../../../../scripts/schemas/pattern.yaml.schema.json
+name: two-factor-auth
+domain: forms
+version: 1
+intent: >-
+  Guide a user through enabling TOTP-based two-factor authentication:
+  scan a QR code in their authenticator app, verify a 6-digit OTP, and
+  save one-time backup codes before activating.
+when-to-use: >-
+  Use in account/security settings when the user is opting into 2FA for the
+  first time, or rotating their authenticator secret. Distinct from login-
+  time OTP verification (see otp-form).
+description: >-
+  Setup flow for two-factor authentication with a QR code placeholder, a
+  6-digit OTP input, a backup-codes section, and an "Enable 2FA" primary
+  action.
+tags:
+  purpose:
+    - authentication
+    - security
+    - setup
+  complexity: composed
+  layout: single-column
+  interaction:
+    - form-submit
+keywords:
+  - 2fa
+  - two factor
+  - two-factor authentication
+  - authenticator
+  - otp
+  - backup codes
+  - security
+  - enable 2fa
+  - mfa
+  - totp
+  - qr code
+related:
+  - otp-form
+  - otp-verification
+  - login-form
+  - settings-page
+variations:
+  - name: sms-fallback
+    description: Replace QR/TOTP block with a phone-number input for SMS delivery.
+  - name: already-enabled
+    description: Variant showing status + "Regenerate backup codes" and "Disable 2FA" actions.
+anti-patterns:
+  - Do not reuse this as a login-time OTP challenge; use otp-form for that.
+  - Do not hide backup codes behind a disclosure the user can skip silently.
+  - Do not enable 2FA server-side before a verification code has been confirmed.
+components:
+  - Card
+  - Header
+  - Text
+  - Section
+  - Column
+  - Embed
+  - OtpInput
+  - Alert
+  - Footer
+  - Button

package/patterns/forms/volume-control.json

@@ -0,0 +1,99 @@
+{
+  "$schema": "../_schema.json",
+  "name": "volume-control",
+  "version": 2,
+  "domain": "forms",
+  "description": "Audio/media volume control with a single slider and current value readout.",
+  "tags": {
+    "purpose": [
+      "media-control",
+      "settings"
+    ],
+    "complexity": "simple",
+    "layout": "single-column",
+    "interaction": [
+      "range-select"
+    ]
+  },
+  "keywords": [
+    "volume",
+    "audio",
+    "media",
+    "speaker",
+    "slider",
+    "control",
+    "sound"
+  ],
+  "related": [
+    "slider-range",
+    "settings-page"
+  ],
+  "template": [
+    {
+      "id": "root",
+      "component": "Card",
+      "children": [
+        "sec"
+      ]
+    },
+    {
+      "id": "sec",
+      "component": "Section",
+      "children": [
+        "col"
+      ]
+    },
+    {
+      "id": "col",
+      "component": "Column",
+      "children": [
+        "label",
+        "slider-field",
+        "readout"
+      ],
+      "gap": "4"
+    },
+    {
+      "id": "label",
+      "component": "Text",
+      "variant": "section",
+      "textContent": "Volume"
+    },
+    {
+      "id": "slider-field",
+      "component": "Field",
+      "label": "Volume",
+      "children": [
+        "slider"
+      ]
+    },
+    {
+      "id": "slider",
+      "component": "Slider",
+      "min": 0,
+      "max": 100,
+      "value": 75,
+      "name": "volume"
+    },
+    {
+      "id": "readout",
+      "component": "Row",
+      "children": [
+        "speaker-icon",
+        "value-text"
+      ],
+      "gap": "2"
+    },
+    {
+      "id": "speaker-icon",
+      "component": "Icon",
+      "name": "speaker-low"
+    },
+    {
+      "id": "value-text",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "75%"
+    }
+  ]
+}

package/patterns/forms/volume-control.yaml

@@ -0,0 +1,47 @@
+# Generated by scripts/generate-yaml-scaffolds.mjs
+# Narrative doc — JSON sibling remains the canonical machine source.
+# Fill in TODO sections by hand.
+
+$schema: ../../../../../scripts/schemas/pattern.yaml.schema.json
+name: volume-control
+domain: forms
+version: 1
+description: >-
+  Audio/media volume control with a single slider and current value readout.
+tags:
+  purpose:
+    - media-control
+    - settings
+  complexity: simple
+  layout: single-column
+  interaction:
+    - range-select
+keywords:
+  - volume
+  - audio
+  - media
+  - speaker
+  - slider
+  - control
+  - sound
+related:
+  - slider-range
+  - settings-page
+use-cases:
+  - "TODO: primary use case"
+  - "TODO: secondary use case"
+variants:
+  - name: TODO
+    description: "TODO: variant description"
+wiring-intent:
+  summary: Static pattern (no interactive wiring).
+  controllers: []
+  actions: []
+components:
+  - Card
+  - Section
+  - Column
+  - Text
+  - Slider
+  - Row
+  - Icon

package/patterns/forms/wizard-steps.json

@@ -0,0 +1,130 @@
+{
+  "$schema": "../_schema.json",
+  "name": "wizard-steps",
+  "version": 1,
+  "domain": "forms",
+  "description": "Multi-step form wizard with progress bar, step content area, and back/next navigation buttons.",
+  "tags": {
+    "purpose": [
+      "data-entry",
+      "workflow"
+    ],
+    "complexity": "complex",
+    "layout": "single-column",
+    "interaction": [
+      "form-submit",
+      "navigation"
+    ]
+  },
+  "keywords": [
+    "wizard",
+    "steps",
+    "multi-step",
+    "progress",
+    "onboarding",
+    "workflow"
+  ],
+  "related": [
+    "create-form",
+    "auth-signup",
+    "progress-tracker"
+  ],
+  "template": [
+    {
+      "id": "root",
+      "component": "Card",
+      "size": "lg",
+      "children": [
+        "hdr",
+        "sec",
+        "ftr"
+      ]
+    },
+    {
+      "id": "hdr",
+      "component": "Header",
+      "children": [
+        "title",
+        "progress-tracker"
+      ]
+    },
+    {
+      "id": "title",
+      "component": "Text",
+      "slot": "heading",
+      "textContent": "Step 1 of 3",
+      "variant": "section"
+    },
+    {
+      "id": "progress-tracker",
+      "component": "Progress",
+      "value": 33,
+      "max": 100
+    },
+    {
+      "id": "sec",
+      "component": "Section",
+      "children": [
+        "step-content"
+      ]
+    },
+    {
+      "id": "step-content",
+      "component": "Column",
+      "children": [
+        "step-title",
+        "step-desc"
+      ],
+      "gap": "4"
+    },
+    {
+      "id": "step-title",
+      "component": "Text",
+      "variant": "body",
+      "textContent": "Personal Information"
+    },
+    {
+      "id": "step-desc",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "Please fill in your details to continue."
+    },
+    {
+      "id": "ftr",
+      "component": "Footer",
+      "children": [
+        "back-btn",
+        "next-btn"
+      ]
+    },
+    {
+      "id": "back-btn",
+      "component": "Button",
+      "text": "Back",
+      "variant": "ghost"
+    },
+    {
+      "id": "next-btn",
+      "component": "Button",
+      "text": "Next",
+      "variant": "primary"
+    }
+  ],
+  "wiring": {
+    "controllers": [
+      { "id": "wizard-ctrl", "type": "FormController", "host": "root",
+        "config": { "validateOn": "step" },
+        "bind": { "values": "/wizard/values", "step": "/wizard/currentStep", "valid": "/wizard/stepValid" } }
+    ],
+    "actions": [
+      { "event": { "event": "press", "target": "next-btn" },
+        "handler": "update-model",
+        "config": { "path": "/wizard/currentStep", "increment": 1 }
+      },
+      { "event": { "event": "press", "target": "back-btn" },
+        "handler": "update-model",
+        "config": { "path": "/wizard/currentStep", "increment": -1 }
+      }
+    ]
+  }
+}