{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "example-auth-page",
  "title": "Example: auth page",
  "description": "An example showing how to compose an auth page: login-split-panel alone at full viewport — one task, nothing competing with it.",
  "registryDependencies": [
    "https://www.quilldesignsystem.com/r/login-split-panel.json"
  ],
  "files": [
    {
      "path": "registry/examples/example-auth-page.tsx",
      "content": "import { SplitPanel } from '@/components/quill/login-split-panel'\n\n// An auth page, composed: login-split-panel alone. Signing in is one task, so\n// nothing else shares the viewport — no navbar, no footer, no promo strip.\n/** A whole sign-in page, composed: login-split-panel alone on the page, with nothing competing with the one task. */\nexport function ExampleAuthPage() {\n  return (\n    <div className=\"min-h-screen bg-background text-foreground\">\n      <SplitPanel />\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/examples/example-auth-page.tsx"
    }
  ],
  "docs": "Composition, top to bottom: login-split-panel. Install it, then replace the blocks' sample content with your own; keep the order and the spacing.\n\nA **4px base step** (`--space-1` = 0.25rem). Editorial rhythm — sections breathe.\n\n`--space-0_5` 2px · `--space-1` 4px · `--space-1_5` 6px · `--space-2` 8px · `--space-2_5` 10px · `--space-3` 12px · `--space-3_5` 14px · `--space-4` 16px · `--space-4_5` 18px · `--space-5` 20px · `--space-6` 24px · `--space-7` 28px · `--space-8` 32px · `--space-9` 36px · `--space-10` 40px · `--space-12` 48px · `--space-16` 64px · `--space-20` 80px · `--space-24` 96px\n\nComponents sit on `--space-4` / `--space-6`; sections breathe with `--space-24`. In a component write the class (`p-4`, `gap-6`): it compiles to the variable (`padding: var(--space-4)`), so the class and the token are one thing. These steps are the whole scale: a Tailwind step outside it (`p-13`, `p-3.25`) or a bracket (`p-[13px]`) is off the system, and `quill-check` flags it with the nearest step. In hand-written CSS use the variable.\n\n### Sizes\nPast the spacing steps, sizes are named for their job: `w-card`, `max-w-page`, `h-frame` (→ `var(--size-card)`). Widths go on `w-`, `max-w-`, `min-w-`, `basis-`; heights on `h-`, `min-h-`, `max-h-`, `size-`. A height is never padding or a width, and Tailwind's `max-w-md` or `w-64` is not Quill's: `quill-check` flags both.\n\nWidths:\n- `w-chip` 160px — the longest a source chip gets before its text truncates\n- `w-menu` 192px — dropdown menus\n- `w-chip-lg` 224px — the longest an attachment chip gets\n- `w-rail` 240px — side rails: an app’s left nav, a board column\n- `w-panel` 288px — popovers, pickers and list columns\n- `w-card-sm` 320px — narrow cards and forms: a minimal sign-in, a short blurb, a search field\n- `w-card` 384px — the standard card: sign-in, sign-up, notifications, an order summary\n- `w-card-lg` 448px — roomier cards: forms with more fields, a command palette, an activity feed\n- `w-card-xl` 560px — wide cards and the text under a headline: settings, FAQ, a cookie banner, a hero’s lead\n- `w-measure` 672px — a readable column: a big headline, the AI home\n- `w-thread` 768px — a chat thread\n- `w-page` 880px — a content page inside the app\n- `w-page-wide` 1400px — the marketing page\n\nHeights:\n- `h-touch` 44px — the smallest a control gets: the WCAG 2.5.5 touch target\n- `h-bar` 56px — a top navigation bar\n- `h-area-sm` 128px — a short content area\n- `h-area` 224px — a chart, or the most a text field grows before it scrolls\n- `h-frame-sm` 480px — a whole-screen block shown on its own, compact (chat, 404)\n- `h-frame` 560px — a whole-screen block shown on its own (mail, nav, list-detail, dashboard)\n- `h-frame-lg` 640px — a whole-screen block shown on its own, tall (AI chat)\n\n### Icon sizes\nAn icon with no class is `1em`: it follows the text beside it. When it needs its own size, give it a class from the icon scale (`<Icon className=\"size-icon-md\" />` → `var(--size-icon-md)`), the same nine steps as Mantis. Inside a Button, menu item, select, tab, Alert or Badge give it no size at all: the part sets its icons. The AI mark takes the step as a prop (`<AiMark size=\"icon-md\" />`), because it picks its drawing from its size. A typed number (`size={18}`) or a spacing class (`size-4`) on an icon is off the system, and `quill-check` flags it.\n\n- `size-icon-3xs` 8px — the smallest mark; unused in Quill, kept so the scale matches Mantis\n- `size-icon-2xs` 10px — a mark inside a chip: a citation source’s kind\n- `size-icon-xs` 12px — status marks in tight rows (step ✓ and ✕, activity), beside 12px text\n- `size-icon-sm` 14px — beside small text: disclosure chevrons, an info mark\n- `size-icon-md` 16px — beside body text: a check in a list, an inline error, a spinner\n- `size-icon-lg` 18px — the lead icon of a row: a notification, a file, a search result\n- `size-icon-xl` 20px — an icon in a small tile\n- `size-icon-2xl` 24px — the icon that leads a feature tile or an empty state\n- `size-icon-3xl` 28px — the icon that leads an upload area\n\n### Layout\nMarketing pages sit in `max-w-page-wide` (1400px), app pages in `max-w-page` (880px), a reading column in `max-w-measure` (672px); side padding **48px** on desktop (`px-12`) and **24px** on mobile (`px-6`), vertical section rhythm **96px** (`py-24`; `py-12` on mobile).\n\n### Composition\n- Recurring section header: eyebrow → headline (one accent word) → right-aligned italic caption.\n- One idea per section: a heading plus one composition (a grid of cards, a table, a form), never a stack of unrelated widgets.\n- No hero-metric row above an identical card grid — that is the generic dashboard Quill exists to avoid. Lead with the thing the page is about; let numbers sit inside it.",
  "type": "registry:component"
}