@adia-ai/a2ui-corpus 0.4.3 → 0.4.4

package/exemplars/AUDIT-REPORT.md

@@ -1,116 +0,0 @@
-# AdiaUI Training Data — Visual Audit Report (REVISED)
-## April 15, 2026
-
-### CRITICAL FINDING
-The initial audit used Python's http.server which cannot resolve bare ES module specifiers
-(`@core/element.js`). ALL components were failing to register. After switching to Vite
-(the project's actual dev server), most patterns render correctly.
-
-**Lesson: Always use `npm run dev` (Vite) to view training patterns.**
-
-### Rating Scale
-- 1/5: Broken / essentially blank
-- 2/5: Renders but major structural problems
-- 3/5: Functional but needs polish or more variations
-- 4/5: Good quality, minor issues
-- 5/5: Production-ready golden example
-
----
-
-## REVISED SCORES (with Vite)
-
-### ⭐⭐⭐⭐⭐ (5/5) — Production quality
-| Pattern | Notes |
-|---------|-------|
-| **ui/empty-state** | 8 variants across 5 categories. Icons, copy, CTAs all excellent. |
-
-### ⭐⭐⭐⭐ (4/5) — Good, minor polish needed
-| Pattern | Notes |
-|---------|-------|
-| **ui/auth-login** | 10 variations. Split layout recently fixed. Best ui pattern for variation count. |
-| **prose/auth-login** | 7 rich compositions. Well-structured. |
-| **ui/kanban** | 3-column board. Cards with tags, avatars, add buttons. Clean. |
-| **ui/chat-list** | 8 contacts with search, avatars, timestamps, unread badges. |
-| **ui/data-table** | Full table with checkboxes, sorting, status badges, pagination, toolbar. |
-| **ui/nav-sidebar** | Full sidebar with nav groups, breadcrumbs, stat cards in main area. |
-| **ui/toolbar** | 3 variations (text editor, app bar, canvas). Icons rendering well. |
-| **ui/otp** | 3 variations. OTP inputs render. Timer + progress bar on 2FA variant. |
-| **prose/footer** | Clean link grid, social icons, copyright. Best prose pattern. |
-
-### ⭐⭐⭐½ (3.5/5) — Decent, needs more variations or polish
-| Pattern | Notes |
-|---------|-------|
-| **ui/stat-cards** | 4 sections render fully. Low card-to-background contrast. |
-| **ui/stat-pattern** | 5 sections. Need to verify sparkline rendering. |
-| **ui/accordion-settings** | Accordions work. Toggles hidden in collapsed sections — needs expanded state. |
-| **prose/feature-grid** | Clean 3x2 grid. Missing icons in cards. |
-| **prose/pricing** | Classic 3-tier. Could use toggle (monthly/annual) and comparison table. |
-| **prose/testimonials** | Grid + featured. Clean. Only 1 composition. |
-| **prose/steps** | 4 stepper variations. Missing labels/connectors on some. |
-
-### ⭐⭐⭐ (3/5) — Functional but needs work
-| Pattern | Notes |
-|---------|-------|
-| **ui/breadcrumb** | 4 contextual variations. Separators may be rendering now — verify. |
-| **ui/tooltip-popover** | 6 sections. Need to re-verify icon rendering. |
-| **ui/theme-builder** | Nice concept. Verify slider controls render with Vite. |
-| **ui/tabs-panels** | 2 variations only. Need more. Avatar may render now. |
-| **ui/timeline-pattern** | 4 sections. Need to verify labels/icons with Vite. |
-| **ui/divider** | 5 sections. Need to verify label rendering with Vite. |
-| **ui/drawer-panel** | Decent list UI. Only 1 real pattern. |
-| **ui/code-block** | Need re-audit with Vite — may have syntax highlighting now. |
-| **ui/command-palette** | Need re-audit — search input + icons may render now. |
-| **ui/file-upload** | Need re-audit — dropzone + progress bars may render now. |
-| **ui/embed** | 3 card types. Minimal but functional. |
-| **prose/cta** | Only 1 variation. Needs 2-3 more compositions. |
-| **prose/hero** | Very minimal. 1 variation with placeholder screenshot. |
-| **prose/user-profile** | 3 variations. Avatars should render now. Spacing needs fix. |
-
-### ⭐⭐ (2/5) — Needs significant rework
-| Pattern | Notes |
-|---------|-------|
-| **ui/auth** | Uses tabs + JS. Different paradigm than other training data. Only shows 1 panel. |
-| **ui/ai-input** | Only 1 variation. Needs full family of chat input patterns. |
-| **ui/chat** | Only 1 variation. Needs conversation states, group chat, etc. |
-| **ui/notifications** | Only empty state shown. Needs populated state + variations. |
-| **ui/settings** | Too thin. Needs full settings page with multiple sections. |
-| **ui/skeleton** | Need to verify with Vite. May still be too minimal. |
-| **ui/navbar** | 1 variation only. Needs mobile, sticky, with-dropdown variants. |
-
----
-
-## STRUCTURAL ISSUES (still valid regardless of rendering)
-
-### 1. Too few variations
-Many ui patterns have only 1-3 variations. auth-login (10) and empty-state (8) are the standard.
-**Target: 4-8 variations per ui pattern.**
-
-Patterns needing more variations:
-- ai-input (1), chat (1), navbar (1), notifications (1), settings (1)
-- skeleton (needs clear section labels), chat-list (1), auth (1)
-
-### 2. Prose patterns too thin
-Most prose patterns are single compositions. Should have 2-3 alternative layouts/styles.
-- hero (1), cta (1), user-profile could be richer
-
-### 3. Some patterns duplicate
-- ui/auth vs ui/auth-login: auth uses tabs/JS, auth-login is the proper multi-variation format.
-  Consider retiring ui/auth in favor of auth-login.
-
----
-
-## PRIORITY ACTION PLAN (revised)
-
-### P1 — Re-audit with Vite (fast pass)
-Spot-check remaining ~12 patterns that weren't re-audited to get accurate scores.
-Patterns: skeleton, chat, notifications, settings, breadcrumb, tooltip-popover,
-theme-builder, timeline-pattern, divider, code-block, command-palette, file-upload
-
-### P2 — Expand thin patterns (needs more variations)
-ai-input, chat, navbar, notifications, settings, skeleton → add 4-6 variations each
-
-### P3 — Enrich prose patterns
-hero, cta → add 2-3 more compositions each
-
-### P4 — Polish existing patterns
-Fix spacing, alignment, typography issues found during audit

package/exemplars/README.md

@@ -1,49 +0,0 @@
-# `exemplars/` — RETIRED 2026-04-28
-
-> **This folder is no longer harvested into the corpus.**
-> Don't add `data-chunk` markers expecting them to land in
-> `packages/a2ui/corpus/chunks/`. Use the `apps/<name>/app/<demo>/`
-> layout instead, per ADR-0020.
-
-## What was here
-
-`exemplars/` was the v0.0.x and early v0.1.x source surface for
-hand-authored A2UI demonstrations: sample shells, blocks-reference
-prose, prototype layouts. Each piece was a static reference for
-designers and the gen-UI synthesizer's training corpus.
-
-## Why it was retired
-
-Three convergent reasons (per the v0.0.6 / mcp v0.0.5 cut on 2026-04-28):
-
-1. **The `data-chunk` marker pipeline replaced it.** Patterns that
-   matter as training material now live as live HTML demos under
-   `apps/<name>/app/<demo>/<demo>.contents.html` with
-   `data-chunk="<slug>"` and `data-chunk-kind` attributes. The
-   harvester (`scripts/build/harvest-chunks.mjs`) extracts them into
-   `packages/a2ui/corpus/chunks/`.
-2. **Single source of truth.** Maintaining hand-authored exemplars
-   alongside live apps doubled the surface that drifts. Apps are
-   already the artifacts users see; harvesting from them keeps demos
-   and training material in sync.
-3. **Composition vs. example.** Compositions and fragments with
-   live `$fragment` linking moved into
-   `packages/a2ui/corpus/{compositions,fragments}/`; everything else
-   (page-level demos) is now sourced from `apps/`.
-
-## What's still in this folder
-
-The 37 files (~248 KB) are kept on disk as historical reference
-(audit reports, blocks-reference prose, prototype shells) — they
-**don't ship** in the npm tarball (see the package.json `files`
-field in `packages/a2ui/corpus/`). Consider this folder a frozen
-snapshot of the pre-v0.1 era; it may be removed entirely in a
-future cleanup.
-
-## See also
-
-- [`packages/a2ui/corpus/README.md`](../README.md) — current corpus structure
-- [`docs/specs/genui-chunk-marker.md`](../../../../docs/specs/genui-chunk-marker.md) — `data-chunk` convention
-- [`.agents/skills/chunk-corpus-migration/SKILL.md`](../../../../.agents/skills/chunk-corpus-migration/SKILL.md) — corpus-migration playbook
-- ADR-0020 — apps/ + co-located component demos
-- Backlog item #92 (closed by this README)

package/exemplars/_shell.css

@@ -1,88 +0,0 @@
-/*
-  Standalone-demo shell for AdiaUI corpus exemplars.
-
-  Each exemplar `index.html` loads this stylesheet so it can render
-  correctly when opened directly (out of the docs router shell). It
-  carries:
-
-  - body framing — flex-centered, padded, schemes set up via tokens
-  - section min-width — exemplar pages are intentionally desktop-shaped
-  - decoration classes — for the few pages that need a hero / split-
-    layout gradient that can't be expressed via component primitives
-
-  IMPORTANT — training-corpus contract: the exemplar HTML is harvested
-  for the gen-UI training pipeline. Per AGENTS.md, harvested files MUST
-  contain no `<style>` block and no `style="..."` attributes. Anything
-  in this stylesheet is allowed because it's loaded via `<link>`, not
-  inlined.
-*/
-
-body {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  box-sizing: border-box;
-}
-body[data-anchor="bottom"] {
-  align-items: flex-end;
-}
-body > section,
-body > footer {
-  min-width: 600px;
-}
-
-/*
-  Footer-pattern link styling. footer-ui's own contract leaves <a>
-  unstyled (it doesn't slot links itself), so the prose/footer demo
-  legitimately needs a few tone + transition rules here. Defining
-  them in _shell.css keeps the harvested HTML from carrying any
-  inline style attributes for these.
-*/
-footer a {
-  color: var(--a-fg-subtle);
-  text-decoration: none;
-  font-size: var(--a-ui-md);
-  transition: color var(--a-duration-fast) var(--a-easing);
-}
-footer a:hover {
-  color: var(--a-fg);
-}
-
-/*
-  Auth-login brand panel — split-screen hero with photographic
-  background + dark scrim. Used on the first card of
-  prose/auth-login. Class hook keeps the harvested HTML clean
-  while preserving the visual that motivates the pattern.
-*/
-.demo-brand-panel {
-  background:
-    linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
-    url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1200&q=80')
-    center/cover no-repeat;
-  min-height: 560px;
-  color: #fff;
-}
-
-/*
-  Accent split-panel — used on the ui/auth-login split-layout card.
-  Lighter than the brand panel; just an accent-tinted surface with a
-  comfortable min-height so the form panel beside it doesn't collapse.
-*/
-.demo-accent-panel {
-  background: var(--a-accent-subtle);
-  min-height: 480px;
-}
-
-/*
-  CTA hero card — photographic background with dark scrim. Used on
-  the centered CTA on prose/cta. Same shape as `.demo-brand-panel`
-  but with a different image; kept distinct so each page can be
-  retuned without leaking into the others.
-*/
-.demo-cta-hero {
-  background:
-    linear-gradient(to bottom right, rgba(0,0,0,0.7), rgba(0,0,0,0.85)),
-    url('https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?w=1200&q=80')
-    center/cover no-repeat;
-}

package/exemplars/blocks-reference.md

@@ -1,409 +0,0 @@
-# Blocks & Patterns Reference
-
-Reusable UI compositions built from AdiaUI components. **Blocks** are standalone sections (hero, pricing, footer). **Patterns** are functional interfaces (auth flows, chat, kanban, settings).
-
-Each entry describes what to build, not how to copy-paste. An agent should decompose the description, select the right components, and compose a faithful recreation using AdiaUI conventions.
-
----
-
-## Conventions
-
-Every block and pattern follows these rules:
-
-- **Card anatomy:** `card-ui > header > section > footer` — never skip the section wrapper
-- **Section content:** Always wrap in `col-ui` — never place content directly in `<section>`
-- **Headings:** Every heading element has `data-heading` — `display` for hero, `title` for page-level, `section` for card headings, `label` for group names, `eyebrow` for overlines, `caption` for meta text
-- **Slots:** `slot="heading"` only on non-heading elements (`<span>`). Native `h1-h6` inside `<header>` are auto-targeted by card CSS
-- **Spacing:** `col-ui gap="md"` for standard vertical stacks, `row-ui gap="sm"` for inline groups
-- **Buttons:** `text` attribute for label, `variant` for style, `icon-leading`/`icon-trailing` for icons
-- **Form fields:** Always have `label` and `name` attributes
-- **Layout:** `grid-ui columns="3"` for equal columns, `row-ui` for content-sized
-- **Typography tokens:** `--a-{role}-size` for role-based sizing (e.g. `--a-heading-size`, `--a-body-size`)
-- **UI scale tokens:** `--a-ui-size-{size}` for component font sizes
-- **Parametric spacing:** All spacing scales with `--a-density`, all radii scale with `--a-radius-k`
-
----
-
-## Blocks (8)
-
-Standalone landing page sections. Each is a self-contained composition meant to be dropped into a page layout.
-
-### Hero
-
-A centered call-to-action section with prominent heading, subheading, dual CTA buttons, and an image/illustration area below.
-
-**Structure:**
-- Centered column (max-width ~600px, text-align center)
-- `h1` with `data-heading="display"` — large, bold, hero-scale
-- `p` description — muted color, standard body text
-- Row of 2 buttons centered: primary (large, with trailing icon) + outline (large)
-- Below: placeholder image area with dashed border (or actual `image-ui`)
-
-**Components:** `button-ui` (primary + outline, size lg, with icons), `icon-ui`
-
----
-
-### Navbar
-
-Horizontal top navigation bar with brand, links, and action buttons.
-
-**Structure:**
-- Flex row with 3 zones: brand (left), nav links (center), actions (right)
-- Brand: `icon-ui` logo + text span
-- Nav links: `<a>` elements with active state styling (bold + accent underline)
-- Actions: ghost icon button (search) + primary button (CTA, size sm)
-
-**Components:** `icon-ui`, `button-ui` (ghost + primary, size sm)
-
----
-
-### Feature Grid
-
-Responsive grid of feature/benefit cards, each with icon, heading, and description.
-
-**Structure:**
-- Responsive grid: `auto-fit, minmax(250px, 1fr)` (3 columns on desktop, collapses on mobile)
-- Each card: `card-ui` with header containing icon badge + `slot="heading"` with `data-heading="section"`, and section with paragraph text
-- Icons: `icon-ui` inside a small circle/badge container in the header
-
-**Components:** `card-ui`, `icon-ui`, `col-ui`
-
-**Content:** 6 feature cards. Each has: icon name, heading text, description paragraph.
-
----
-
-### Pricing
-
-Three-tier pricing table with plan comparison, feature lists, and CTA buttons.
-
-**Structure:**
-- 3-column responsive grid (`auto-fit, minmax(280px, 1fr)`)
-- Each tier: `card-ui` with header (`slot="heading"` + `slot="description"`), section with price display + feature checklist, footer with CTA button
-- Middle tier (Pro) highlighted: accent border, `badge-ui text="Popular"` in header
-- Feature list: `col-ui` of `row-ui` items, each with `icon-ui name="check"` + text
-
-**Components:** `card-ui`, `badge-ui`, `icon-ui`, `col-ui`, `row-ui`, `button-ui` (primary for featured, outline for others, stretch width)
-
-**Content:** 3 tiers (Starter $0, Pro $19, Enterprise $49). Each with 4-6 features.
-
----
-
-### Stat Cards
-
-Grid of KPI metric cards showing key numbers with trend indicators.
-
-**Structure:**
-- 4-column responsive grid
-- Each card: `card-ui` with header containing icon slot + label heading (`data-heading="label"`), section with large display value (`data-heading="title"` or `display`) + row with trend icon + delta text
-- Trend: `icon-ui name="trending-up"` (green for positive) or `trending-down` (red for negative)
-
-**Components:** `card-ui`, `icon-ui`, `col-ui`, `row-ui`
-
-**Content:** 4 cards (Total Revenue $45k +20%, Active Users 2.3k +8%, Orders 12k +19%, Growth +573 +201/hr)
-
----
-
-### CTA (Call to Action)
-
-Banner section encouraging user action with heading, description, and buttons.
-
-**Structure:**
-- Full-width banner (surface background, padding, border-radius)
-- Flex row: text column (heading `data-heading="title"` + description) on left, button row on right
-- 2 buttons: primary + ghost (with icons)
-
-**Components:** `button-ui` (primary + ghost, with icon-trailing)
-
----
-
-### Footer
-
-Multi-column site footer with branding, link groups, copyright, and social icons.
-
-**Structure:**
-- Grid: 4 columns (brand 2fr, 3 link columns 1fr each)
-- Brand column: logo + subtitle text
-- Link columns: each has heading (`data-heading="label"`) + vertical stack of `<a>` links
-- Bottom bar (border-top): copyright text left, social icon buttons right
-- Social: `icon-ui` buttons for Twitter, GitHub, Discord, etc.
-
-**Components:** `col-ui`, `icon-ui`, `badge-ui`, `button-ui` (ghost, icon-only)
-
----
-
-### Testimonials
-
-Customer quote cards in a grid, plus a featured large testimonial.
-
-**Structure:**
-- 3-column responsive grid of `card-ui variant="outlined"`
-- Each card: section with italicized quote (with decorative quote marks), then `row-ui` with `avatar-ui` + name/title column
-- Below grid: featured testimonial — large `card-ui` centered with `icon-ui name="quotes"` (large), prominent quote text, avatar + name centered
-
-**Components:** `card-ui` (outlined), `avatar-ui`, `col-ui`, `row-ui`, `icon-ui`
-
----
-
-## Patterns (16)
-
-Functional interface compositions. Each is a complete UI flow, not just a visual block.
-
-### Auth
-
-Authentication forms: login, signup, social login, and magic link.
-
-**4 variants:**
-
-1. **Centered Login** — `card-ui` centered (max-width 400px): header with lock icon + heading + description, section with email `input-ui` + password `input-ui` + row (remember `check-ui` + forgot link), footer with primary block button + sign-up link
-
-2. **Split Signup** — 2-column grid: left column is branding panel (dark bg, display heading, feature list), right column is form card with name + email + password fields + terms checkbox + submit button
-
-3. **Social Login** — `card-ui` centered: 2 OAuth buttons (Google, Apple with icons, outline variant, block), decorative divider with "or continue with email" text, email + password fields, submit button
-
-4. **Magic Link** — `card-ui` centered: mail icon, heading, description, single email field, submit button, back-to-login link
-
-**Key components:** `card-ui`, `input-ui`, `check-ui`, `button-ui`, `icon-ui`, `col-ui`, `row-ui`
-
----
-
-### Chat
-
-Messaging interface with bubble layout, typing indicators, and AI chat variant.
-
-**4 variants:**
-
-1. **Basic Chat** — Container with message list: sent messages right-aligned (accent bg), received messages left-aligned (subtle bg) with `avatar-ui`, timestamps below bubbles
-
-2. **Typing Indicator** — Same as basic + animated 3-dot typing indicator in a received bubble (CSS keyframe bounce animation)
-
-3. **AI Chat** — Received messages have `icon-ui` badge instead of avatar, different bubble styling (no border-radius on bottom-left)
-
-4. **Group Chat** — Received messages show sender name label above bubble, different avatar per sender
-
-**Key components:** `avatar-ui`, `icon-ui`, custom bubble CSS (border-radius manipulation: full except one corner)
-
----
-
-### Chat List
-
-Contact/conversation list with message previews, timestamps, and unread indicators.
-
-**3 variants:**
-
-1. **Contact List** — Vertical bordered list, each item: `avatar-ui` + name + preview text + time badge + optional unread count `badge-ui`
-
-2. **With Online Indicators** — Same + green dot absolutely positioned on avatar corner
-
-3. **With Search** — `search-ui` in header above the list
-
-**Key components:** `avatar-ui`, `badge-ui`, `search-ui`
-
----
-
-### AI Input
-
-Compose areas for AI chat with formatting tools and response display.
-
-**4 variants:**
-
-1. **Basic** — `textarea-ui` + row with markdown label + send `button-ui`
-
-2. **With Suggestions** — Same + row of `tag-ui` suggestion chips above the textarea
-
-3. **With File Attach** — Same + file preview cards (name + size + remove button) above textarea
-
-4. **Streaming Response** — Response area with text + blinking cursor animation (2px wide, `animation: blink 0.8s step-end infinite`)
-
-**Key components:** `textarea-ui`, `button-ui`, `tag-ui`, `toolbar-ui`, `icon-ui`, `progress-ui`
-
----
-
-### Data Table
-
-Full-featured data table with search, filter, sort, selection, and pagination.
-
-**Structure:**
-- `card-ui` container
-- Header: `search-ui` + `select-ui` filter dropdown + action buttons
-- Body: `table-ui` (sortable, selectable) — data set via JS `.columns` and `.data`
-- Footer: page info text + `pagination-ui`
-- Optional: bulk action bar (accent background) that appears when rows are selected
-
-**Key components:** `card-ui`, `table-ui`, `search-ui`, `select-ui`, `button-ui`, `pagination-ui`
-
----
-
-### Settings
-
-Full settings page with sidebar navigation and card-based form sections.
-
-**Structure:**
-- 2-column layout: sidebar (200px) + main content
-- Sidebar: section headings + items with active state
-- Main: stacked `card-ui` sections, each with header (h3 `data-heading="subtitle"` + description) + form section + footer with action buttons
-- 4 sections: Profile (avatar + name + email + bio), Notifications (toggle rows), Appearance (segmented theme + select font), Danger Zone (delete button, variant danger)
-
-**Key components:** `card-ui`, `input-ui`, `avatar-ui`, `switch-ui`, `segmented-ui`, `select-ui`, `button-ui`
-
----
-
-### Kanban
-
-Three-column task board with cards, assignees, and priority tags.
-
-**Structure:**
-- 3-column grid (equal width, gap md)
-- Column header: status icon + title + count `badge-ui` + add `button-ui` (icon-only)
-- Task cards: `card-ui` with title (h4), description (p, muted), footer with `tag-ui` labels + `avatar-ui` assignee
-- Status columns: Todo (circle icon), In Progress (clock icon), Done (check-circle icon)
-
-**Key components:** `card-ui`, `badge-ui`, `tag-ui`, `avatar-ui`, `button-ui`, `icon-ui`, `col-ui`, `row-ui`
-
-**Content:** 10 task cards distributed across 3 columns with varied tags (Design, Testing, Frontend, Backend).
-
----
-
-### Notifications
-
-Notification center with filtering, read/unread states, and mark-all-read action.
-
-**Structure:**
-- `card-ui` with header: title + unread count `badge-ui` + "Mark all read" `button-ui` (ghost)
-- `segmented-ui` filter: All, Unread, Mentions
-- List of notification items: `avatar-ui` + title (bold if unread) + description + time + unread dot `badge-ui`
-- Unread items have subtle highlighted background
-
-**Key components:** `card-ui`, `avatar-ui`, `badge-ui` (dot + count), `segmented-ui`, `segment-ui`, `button-ui`
-
----
-
-### Stat (Pattern)
-
-KPI cards in various configurations beyond the basic stat block.
-
-**5 variants:**
-
-1. **Basic** — Value + delta badge (success/error variant)
-2. **With Icon** — Same + icon in header slot
-3. **With Sparkline** — Same + `chart-ui type="sparkline"` below the value
-4. **With Trend Arrow** — Delta row uses `icon-ui name="trending-up/down"` instead of badge
-5. **Stat Grid** — 4-column grid combining all variants
-
-**Key components:** `card-ui`, `badge-ui`, `icon-ui`, `chart-ui` (sparkline type), `col-ui`, `row-ui`
-
----
-
-### Steps
-
-Step-by-step progress indicators for multi-stage flows.
-
-**4 variants:**
-
-1. **Horizontal** — `timeline-ui` with numbered circles connected by lines, active step highlighted
-2. **Vertical** — Same but stacked vertically with descriptions
-3. **With Icons** — Icon attribute replaces numbers (user, credit-card, check-circle)
-4. **With Content** — Active step shows detail `card-ui` below with form fields or summary
-
-**Key components:** `timeline-ui`, `timeline-item-ui`, `card-ui`, `input-ui`, `button-ui`, `avatar-group-ui`
-
----
-
-### File Upload
-
-File upload flow with drag-and-drop zone, progress tracking, and status display.
-
-**Structure:**
-- `upload-ui` drag-and-drop zone at top
-- Below: file list showing upload states
-- Each file item: type `icon-ui` + name/size info + `progress-ui` (during upload) or `badge-ui` status (Done/Error) + remove `button-ui`
-- Error items: red-tinted border, error badge
-
-**Key components:** `upload-ui`, `icon-ui`, `badge-ui`, `progress-ui`, `button-ui`
-
----
-
-### OTP Input
-
-One-time password entry with variants.
-
-**3 variants:**
-
-1. **Basic** — `otp-input-ui length="6"` + verify button
-2. **With Separator** — Same with `separator` attribute (dash between groups of 3)
-3. **With Timer** — Wrapped in `card-ui` with icon header, `progress-ui` countdown bar, resend link
-
-**Key components:** `otp-input-ui`, `button-ui`, `progress-ui`, `icon-ui`, `card-ui`
-
----
-
-### Theme Builder
-
-Interactive theme customizer with live preview.
-
-**Structure:**
-- 2-column layout: controls (340px left), preview (right)
-- Controls card: sliders (`slider-ui`) for radius/spacing/hue/chroma/lightness, `segmented-ui` for color scheme, `select-ui` for font, preset `button-ui` row
-- Preview card: wrapped with `[data-theme]` attribute with live binding — shows sample components (button variants, form fields, cards, badges)
-- Export card: `code-ui` showing generated CSS + copy `button-ui`
-
-**Key components:** `card-ui`, `slider-ui`, `segmented-ui`, `select-ui`, `button-ui`, `badge-ui`, `input-ui`, `check-ui`, `switch-ui`, `code-ui`
-
----
-
-### Timeline
-
-Chronological event sequences with connected timeline indicators.
-
-**4 variants:**
-
-1. **Vertical** — `timeline-ui` with `timeline-item-ui` items, vertical line connecting dots, content right-aligned
-2. **Horizontal** — Same but horizontal layout, compact
-3. **With Icons** — Dot replaced by `icon-ui` (check, star, flag, etc.)
-4. **Variant Colors** — Items use semantic variants (success=green, accent=blue, warning=yellow, danger=red)
-
-**Key components:** `timeline-ui`, `timeline-item-ui`, `icon-ui`
-
----
-
-### User Profile
-
-Profile display patterns with stats, bio, and social links.
-
-**3 variants:**
-
-1. **Full Profile Card** — Large `avatar-ui`, name (`data-heading="title"`), role, email, 3-column stat cards (Projects/Contributions/Teams), bio paragraph, social icon button row, Edit Profile + Settings buttons
-
-2. **Compact Profile** — Horizontal row: `avatar-ui` + name/role column + action buttons right-aligned
-
-3. **Team Members Grid** — 3-column grid of profile `card-ui` elements, each with centered avatar, name, role, social row
-
-**Key components:** `card-ui`, `avatar-ui`, `badge-ui`, `button-ui` (icon-only for social), `row-ui`, `col-ui`, `icon-ui`
-
----
-
-### Empty State
-
-Placeholder patterns for when content is absent.
-
-**5 variants:**
-
-1. **Default** — Centered: `icon-ui` (48px, folder-open), subtitle heading, description, primary CTA button
-2. **Search No Results** — magnifying-glass icon, "No results" heading, "Try different keywords" description, "Clear search" outline button
-3. **Error** — warning icon, "Something went wrong" heading, "Please try again" description, "Retry" primary button
-4. **First Use/Onboarding** — rocket icon, welcome heading, getting-started checklist with `check-ui` items and `progress-ui` completion bar
-5. **Inline** — Horizontal `row-ui` variant: icon left + text right, for embedding in existing layouts
-
-**Key components:** `card-ui` (outlined), `icon-ui` (48px container), `col-ui` (centered), `button-ui`, `check-ui`, `progress-ui`
-
----
-
-## Source Files
-
-| Type | Directory | Count |
-|------|-----------|-------|
-| Blocks | `site/blocks/*.content.html` | 8 |
-| Patterns | `site/patterns/*.content.html` | 16 |
-| Block setups | `site/blocks/*.setup.js` | varies |
-| Pattern setups | `site/patterns/*.setup.js` | varies |
-
-Total: **24 compositions** with **62 variant examples**.

package/exemplars/index.html

@@ -1,21 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>AdiaUI — Training Data: Blocks Reference</title>
-  <link rel="stylesheet" href="../../web-components/styles/tokens.css" />
-  <link rel="stylesheet" href="../../web-components/styles/styles.css" />
-  <style>
-    body { margin: 0; font-family: var(--a-font-family); }
-  </style>
-</head>
-<body>
-
-<richtext-ui src="./blocks-reference.md"></richtext-ui>
-
-<script type="module">
-  import '../../web-components/components/richtext/richtext.js';
-</script>
-</body>
-</html>