@krizaka/ui 2.8.0 → 2.10.0

package/registry/loader.json

@@ -250,7 +250,7 @@
     },
     {
       "path": "meta.ts",
-      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"action-bar\"\n  | \"alert\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"link-card\"\n  | \"loader\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
     }
   ],
   "dependencies": [

package/registry/longform-page.json

@@ -0,0 +1,213 @@
+{
+  "name": "longform-page",
+  "type": "primitive",
+  "title": "Longform page",
+  "summary": "A long read — a story, an essay, a case: numbered chapters in a reading column, pull quotes in the margin, figures that break out.",
+  "description": "A long read — a story, an essay, a case: numbered chapters in a reading column, pull quotes in the margin, figures that break out.",
+  "status": "beta",
+  "category": "templates",
+  "platforms": "web",
+  "whenToUse": [
+    "A company's story, a case study, an essay.",
+    "Any text read from the top, chapter by chapter."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For a documentation article.",
+      "use": "docs-article-page"
+    },
+    {
+      "when": "For a policy.",
+      "use": "legal-page"
+    }
+  ],
+  "bestPractices": [
+    "Chapters of three to six paragraphs; one pull quote at most each.",
+    "Figures carry a promise (a bird's quote, a schema), never decoration.",
+    "Words and content arrive as props; the motion is the platform's (`[data-reveal]`, still under reduced motion)."
+  ],
+  "accessibility": {
+    "keyboard": [],
+    "notes": [
+      "Each chapter is a `section` named by its `h2`; the numbers are decorative.",
+      "The pull quote repeats the text: it adds nothing a reader would miss."
+    ]
+  },
+  "related": [
+    "mascot-quote",
+    "page-hero",
+    "legal-page"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/longform-page",
+    "import": "import { LongformPage } from \"@krizaka/ui/longform-page\";",
+    "props": [
+      {
+        "component": "LongformPage",
+        "description": "A long read: hero, then numbered chapters with pull quotes in the margin and figures that break out.",
+        "props": [
+          {
+            "name": "chapters",
+            "type": "readonly LongformChapter[]",
+            "default": null,
+            "description": "The chapters, in order.",
+            "required": true
+          },
+          {
+            "name": "title",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The page's `h1`.",
+            "required": true
+          },
+          {
+            "name": "aside",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Beside the hero: the page's bird, an illustration.",
+            "required": false
+          },
+          {
+            "name": "back",
+            "type": "{ href: string; label: string; }",
+            "default": null,
+            "description": "The way back.",
+            "required": false
+          },
+          {
+            "name": "brand",
+            "type": "string",
+            "default": null,
+            "description": "The brand the page wears (`.brand-<id>`).",
+            "required": false
+          },
+          {
+            "name": "eyebrow",
+            "type": "ReactNode",
+            "default": null,
+            "description": "A mono line above the title.",
+            "required": false
+          },
+          {
+            "name": "lead",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The standfirst.",
+            "required": false
+          },
+          {
+            "name": "linkAs",
+            "type": "LinkComponent",
+            "default": null,
+            "description": "The app's link component (Next's `Link`).",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "story",
+        "title": "Our story",
+        "description": "Krizaka's story in chapters, a pull quote and the flamingo's rule.",
+        "template": true,
+        "path": "examples/longform-page/story.tsx",
+        "module": "@krizaka/ui/registry/examples/longform-page/story",
+        "code": "import { LongformPage } from \"@krizaka/ui/longform-page\";\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\n\n// TEMPLATE — a long read (Krizaka's story): numbered chapters in a reading column, a sentence pulled into the margin,\n// a bird's quote breaking out under the text. Editorial, not cards; one column on a phone.\nexport default function LongformPageStory() {\n  return (\n    <LongformPage\n      eyebrow=\"Our story\"\n      title=\"Why a studio in Montréal builds its own AI\"\n      lead=\"Three products, one rule: what is yours stays yours.\"\n      aside={<Mascot bird=\"owl\" mood=\"welcome\" size={112} />}\n      chapters={[\n        {\n          id: \"start\",\n          title: \"It started with a lease\",\n          pull: \"The prompt crossed the ocean before the answer came back.\",\n          children: (\n            <>\n              <p>A notary asked a chatbot to summarise a lease. The answer was good; the lease was now on someone else's server.</p>\n              <p>We built Orazaka so that question never has to leave the office.</p>\n            </>\n          ),\n        },\n        {\n          id: \"creators\",\n          title: \"Then came the creators\",\n          children: <p>Orochia pays creators 90 % of what their fans spend, every Monday — no algorithm in between.</p>,\n          figure: <MascotQuote bird=\"flamingo\" label=\"The flamingo's rule\">Whoever does the work gets paid first.</MascotQuote>,\n        },\n      ]}\n    />\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [
+    {
+      "path": "longform-page/index.ts",
+      "content": "/** @krizaka/ui/longform-page — `LongformPage`: A long read: numbered chapters, pull quotes in the margin, figures that break out. Server-safe; a page template. */\nexport { type LongformChapter,LongformPage, type LongformPageProps } from \"./longform-page\";\n"
+    },
+    {
+      "path": "longform-page/longform-page.tsx",
+      "content": "// Server-safe. A long read — a story, an essay, a case (blocks.css `.kz-tpl-chapters`): the hero, then chapters, each\n// with its big outlined number, its title, its text in a reading column, a pull quote in the margin and a figure that\n// breaks out to the margin's width; the contents as chips on a phone. Editorial, not cards.\nimport { Page } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport interface LongformChapter {\n  /** The chapter's anchor. */\n  id: string;\n  /** Its title. */\n  title: React.ReactNode;\n  /** Its text (paragraphs). */\n  children: React.ReactNode;\n  /** A sentence pulled into the margin. */\n  pull?: React.ReactNode;\n  /** A figure under the text (an image, a schema, a quote by a bird). */\n  figure?: React.ReactNode;\n}\n\nexport type LongformPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The brand the page wears (`.brand-<id>`). */\n  brand?: string;\n  /** The way back. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** The standfirst. */\n  lead?: React.ReactNode;\n  /** Beside the hero: the page's bird, an illustration. */\n  aside?: React.ReactNode;\n  /** The chapters, in order. */\n  chapters: readonly LongformChapter[];\n  /** After the chapters: the end note, a call. */\n  children?: React.ReactNode;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A long read: hero, then numbered chapters with pull quotes in the margin and figures that break out. */\nexport function LongformPage({ brand, back, eyebrow, title, lead, aside, chapters, linkAs, className, children, ...props }: LongformPageProps) {\n  return (\n    <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} aside={aside} />\n      <Page className=\"kz-tpl-longform\">\n        <div className=\"kz-tpl-chapters\">\n          {chapters.map((c, i) => (\n            <section key={c.id} className=\"kz-tpl-chapter\" aria-labelledby={c.id} data-reveal=\"\">\n              <span className=\"kz-tpl-chapter-n\" aria-hidden>\n                {String(i + 1).padStart(2, \"0\")}\n              </span>\n              <div className=\"kz-tpl-chapter-body\">\n                <h2 id={c.id}>{c.title}</h2>\n                {c.children}\n              </div>\n              {c.pull && (\n                <aside className=\"kz-tpl-chapter-aside\">\n                  <p className=\"kz-tpl-pull\">{c.pull}</p>\n                </aside>\n              )}\n              {c.figure && <figure className=\"kz-tpl-chapter-figure\">{c.figure}</figure>}\n            </section>\n          ))}\n        </div>\n        {children}\n      </Page>\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "longform-page/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Longform page\",\n  summary: \"A long read — a story, an essay, a case: numbered chapters in a reading column, pull quotes in the margin, figures that break out.\",\n  status: \"beta\",\n  category: \"templates\",\n  platforms: \"web\",\n  whenToUse: [\"A company's story, a case study, an essay.\", \"Any text read from the top, chapter by chapter.\"],\n  whenNotToUse: [\n    { when: \"For a documentation article.\", use: \"docs-article-page\" },\n    { when: \"For a policy.\", use: \"legal-page\" },\n  ],\n  bestPractices: [\"Chapters of three to six paragraphs; one pull quote at most each.\", \"Figures carry a promise (a bird's quote, a schema), never decoration.\", \"Words and content arrive as props; the motion is the platform's (`[data-reveal]`, still under reduced motion).\"],\n  accessibility: {\n    keyboard: [],\n    notes: [\"Each chapter is a `section` named by its `h2`; the numbers are decorative.\", \"The pull quote repeats the text: it adds nothing a reader would miss.\"],\n  },\n  related: [\"mascot-quote\", \"page-hero\", \"legal-page\"],\n  web: {\n    imports: [\"LongformPage\"],\n    examples: [\n      { name: \"story\", title: \"Our story\", description: \"Krizaka's story in chapters, a pull quote and the flamingo's rule.\", template: true },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+    }
+  ],
+  "dependencies": [],
+  "registryDependencies": [
+    "cn",
+    "page",
+    "page-hero"
+  ],
+  "demo": {
+    "path": "examples/longform-page/story.tsx",
+    "content": "import { LongformPage } from \"@krizaka/ui/longform-page\";\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\n\n// TEMPLATE — a long read (Krizaka's story): numbered chapters in a reading column, a sentence pulled into the margin,\n// a bird's quote breaking out under the text. Editorial, not cards; one column on a phone.\nexport default function LongformPageStory() {\n  return (\n    <LongformPage\n      eyebrow=\"Our story\"\n      title=\"Why a studio in Montréal builds its own AI\"\n      lead=\"Three products, one rule: what is yours stays yours.\"\n      aside={<Mascot bird=\"owl\" mood=\"welcome\" size={112} />}\n      chapters={[\n        {\n          id: \"start\",\n          title: \"It started with a lease\",\n          pull: \"The prompt crossed the ocean before the answer came back.\",\n          children: (\n            <>\n              <p>A notary asked a chatbot to summarise a lease. The answer was good; the lease was now on someone else's server.</p>\n              <p>We built Orazaka so that question never has to leave the office.</p>\n            </>\n          ),\n        },\n        {\n          id: \"creators\",\n          title: \"Then came the creators\",\n          children: <p>Orochia pays creators 90 % of what their fans spend, every Monday — no algorithm in between.</p>,\n          figure: <MascotQuote bird=\"flamingo\" label=\"The flamingo's rule\">Whoever does the work gets paid first.</MascotQuote>,\n        },\n      ]}\n    />\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "LongformPage",
+      "description": "A long read: hero, then numbered chapters with pull quotes in the margin and figures that break out.",
+      "props": [
+        {
+          "name": "chapters",
+          "type": "readonly LongformChapter[]",
+          "default": null,
+          "description": "The chapters, in order.",
+          "required": true
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The page's `h1`.",
+          "required": true
+        },
+        {
+          "name": "aside",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Beside the hero: the page's bird, an illustration.",
+          "required": false
+        },
+        {
+          "name": "back",
+          "type": "{ href: string; label: string; }",
+          "default": null,
+          "description": "The way back.",
+          "required": false
+        },
+        {
+          "name": "brand",
+          "type": "string",
+          "default": null,
+          "description": "The brand the page wears (`.brand-<id>`).",
+          "required": false
+        },
+        {
+          "name": "eyebrow",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A mono line above the title.",
+          "required": false
+        },
+        {
+          "name": "lead",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The standfirst.",
+          "required": false
+        },
+        {
+          "name": "linkAs",
+          "type": "LinkComponent",
+          "default": null,
+          "description": "The app's link component (Next's `Link`).",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/marketing-layout.json

@@ -0,0 +1,172 @@
+{
+  "name": "marketing-layout",
+  "type": "primitive",
+  "title": "Marketing layout",
+  "summary": "A site's page: the link that skips to the content, the floating bar, the page made of a PageHero and Sections in one frame, the footer.",
+  "description": "A site's page: the link that skips to the content, the floating bar, the page made of a PageHero and Sections in one frame, the footer.",
+  "status": "beta",
+  "category": "layouts",
+  "platforms": "web",
+  "whenToUse": [
+    "Every public page of a Krizaka site: a product, pricing, a hub, a story.",
+    "A product's public landing."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For a signed-in screen.",
+      "use": "app-shell"
+    },
+    {
+      "when": "For a documentation page with a sidebar.",
+      "use": "docs-layout"
+    }
+  ],
+  "bestPractices": [
+    "One PageHero per page, then Sections; the main action of the page is the only one with `shimmer`.",
+    "Give the bar the frame's width (`--kz-page-max`): its edges are the content's.",
+    "Templates show complete pages: copy one, keep its order."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Tab",
+        "action": "The first stop is the skip link, which jumps to the page's content."
+      }
+    ],
+    "notes": [
+      "`main#content` receives the focus from the skip link.",
+      "The bar floats over the hero: `--kz-hero-top` keeps the title clear of it."
+    ]
+  },
+  "related": [
+    "page-hero",
+    "page",
+    "nav-bar"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/marketing-layout",
+    "import": "import { MarketingLayout } from \"@krizaka/ui/marketing-layout\";",
+    "props": [
+      {
+        "component": "MarketingLayout",
+        "description": "A site's page: skip link, floating bar, the page, the footer.",
+        "props": [
+          {
+            "name": "header",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The site's bar (a floating NavBar of\n@krizaka /ui/nav-bar).",
+            "required": true
+          },
+          {
+            "name": "skipLabel",
+            "type": "string",
+            "default": null,
+            "description": "The words of the link that skips to the content (`Skip to content`).",
+            "required": true
+          },
+          {
+            "name": "footer",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The site's footer.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "product-page",
+        "title": "A product page",
+        "description": "Orazaka's page: hero with facts, reasons, decisions, the owl's promise, the closing call.",
+        "template": true,
+        "path": "examples/marketing-layout/product-page.tsx",
+        "module": "@krizaka/ui/registry/examples/marketing-layout/product-page",
+        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { ActionBar } from \"@krizaka/ui/action-bar\";\nimport { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { DecisionList } from \"@krizaka/ui/decision-list\";\nimport { MarketingLayout } from \"@krizaka/ui/marketing-layout\";\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\nimport { NavBar } from \"@krizaka/ui/nav-bar\";\nimport { Facts, Section } from \"@krizaka/ui/page\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\n\nconst WHY = [\n  { id: \"local\", title: \"Local inference\", hook: \"Elsewhere, every prompt crosses the ocean.\", bird: \"falcon\" as const },\n  { id: \"paid\", title: \"Paid once\", hook: \"Elsewhere, you pay per token, forever.\", bird: \"flamingo\" as const },\n  { id: \"asked\", title: \"Agents that ask\", hook: \"Elsewhere, an agent acts first and apologises later.\", bird: \"pigeon\" as const },\n];\nconst DECISIONS = [\n  { id: \"local\", chose: \"Local models by default.\", refused: \"A hosted API as the default path.\", because: \"A prompt that never leaves cannot leak.\", cost: \"You need a GPU, or patience on a CPU.\" },\n  { id: \"telemetry\", chose: \"Zero telemetry.\", refused: \"Anonymous usage statistics.\", because: \"Anonymous rarely stays anonymous.\", cost: \"You tell us what breaks.\" },\n];\nconst labels = { chose: \"We chose\", refused: \"We refused\", because: \"Because\", cost: \"What it costs you\" };\n\n// TEMPLATE — a product page (Orazaka): the hero with its facts and its main action (cut, shimmer), the reasons as compact\n// argument cards (the bird in the corner), the decisions with their cost, the owl's promise, the closing call. On a\n// phone the hero's bird goes above the title, the cards stack, the decisions' three parts stack under the choice.\nexport default function MarketingLayoutProductPage() {\n  return (\n    <div className=\"brand-orazaka\">\n      <MarketingLayout\n        skipLabel=\"Skip to content\"\n        header={\n          <NavBar.Root label=\"Main\" compactAfter={false} className=\"max-w-(--kz-page-max,72rem)\">\n            <NavBar.Brand href=\"#home\"><ProductLogo id=\"orazaka\" size={22} animated={false} /> Orazaka</NavBar.Brand>\n            <NavBar.Items>\n              <NavBar.Link href=\"#why\" active>Why</NavBar.Link>\n              <NavBar.Link href=\"#decisions\">Decisions</NavBar.Link>\n            </NavBar.Items>\n          </NavBar.Root>\n        }\n      >\n        <PageHero\n          eyebrow=\"Sovereign AI · open source\"\n          title=\"The AI that never leaves home\"\n          lead=\"Chat, image, voice and video on your own server — one governed pipeline, nothing sent anywhere.\"\n          aside={<Mascot bird=\"owl\" mood=\"welcome\" size={112} />}\n        >\n          <Facts items={[{ label: \"Apache-2.0\", tone: \"ok\" }, { label: \"Law 25 · GDPR\" }]} />\n          <Button variant=\"primary\" size=\"lg\" shape=\"cut\" shimmer>Install in three commands</Button>\n        </PageHero>\n        <Section id=\"why\" eyebrow=\"Why\" title=\"Three traps it removes\">\n          <CardGrid min={260} fit=\"fit\" reveal={false}>\n            {WHY.map((w) => (\n              <ArgumentCard\n                key={w.id}\n                id={`why-${w.id}`}\n                title={w.title}\n                mark={<Mascot bird={w.bird} size={40} animated={false} />}\n                hook={{ label: \"The trap\", text: w.hook }}\n                more={{ href: `#${w.id}`, label: \"Details\" }}\n              />\n            ))}\n          </CardGrid>\n        </Section>\n        <Section id=\"decisions\" eyebrow=\"Decisions\" title=\"What we chose, and what it costs you\" divider>\n          <DecisionList decisions={DECISIONS} labels={labels} reveal={false} />\n          <div className=\"mt-8\">\n            <MascotQuote variant=\"callout\" bird=\"owl\" label=\"The owl's promise\">\n              Every personal record stays in Québec, and you can read who touched it.\n            </MascotQuote>\n          </div>\n        </Section>\n        <Section spacing=\"sm\" aria-labelledby=\"product-cta\">\n          <CtaPanel id=\"product-cta\" title=\"Ready to run it at home?\" body=\"Three commands, then your first private answer.\">\n            <ActionBar primaryFirst size=\"lg\" label=\"Get started\" actions={[{ href: \"#install\", label: \"Install\" }, { href: \"#contact\", label: \"Talk to us\" }]} />\n          </CtaPanel>\n        </Section>\n      </MarketingLayout>\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "pricing",
+        "title": "Pricing and credits",
+        "description": "Plans side by side, what a credit buys, the credits left.",
+        "template": true,
+        "path": "examples/marketing-layout/pricing.tsx",
+        "module": "@krizaka/ui/registry/examples/marketing-layout/pricing",
+        "code": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { GlowCard } from \"@krizaka/ui/glow-card\";\nimport { Meter } from \"@krizaka/ui/meter\";\nimport { Section } from \"@krizaka/ui/page\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\n\nconst PLANS = [\n  { id: \"community\", name: \"Community\", price: \"Free\", unit: \"self-hosted\", points: [\"Every feature\", \"Your hardware\", \"Community support\"] },\n  { id: \"workspace\", name: \"Workspace\", price: \"€29\", unit: \"per month · 12,000 credits\", points: [\"Packs & Studios\", \"Shared workspaces\", \"Email support\"], featured: true },\n  { id: \"sovereign\", name: \"Sovereign\", price: \"Custom\", unit: \"on your servers\", points: [\"Installation with you\", \"Law 25 review\", \"A named engineer\"] },\n];\n\n// TEMPLATE — pricing and credits: the plans side by side (the featured one lit by its turning ring), what a credit buys,\n// and the credits left for a signed-in visitor. On a phone the plans stack, the featured one first in the reading order\n// it already has; every action is the cut button, the featured one primary.\nexport default function MarketingLayoutPricing() {\n  return (\n    <div className=\"w-full\">\n      <PageHero eyebrow=\"Pricing\" title=\"Pay once for what was done\" lead=\"Credits buy answers, images and minutes of video — never a seat you do not use.\" align=\"center\" backdrop=\"plain\" />\n      <Section aria-label=\"Plans\" spacing=\"sm\">\n        <ul className=\"grid gap-4 md:grid-cols-3\">\n          {PLANS.map((p) => (\n            <li key={p.id} className=\"flex\">\n              <GlowCard alive={p.featured} className=\"flex w-full flex-col gap-4\">\n                <div className=\"flex items-center justify-between gap-2\">\n                  <h2 className=\"font-display text-lg font-bold text-fg\">{p.name}</h2>\n                  {p.featured && <Badge tone=\"accent\">Most chosen</Badge>}\n                </div>\n                <p>\n                  <span className=\"font-display text-4xl font-extrabold text-fg\">{p.price}</span>\n                  <span className=\"mt-1 block text-sm text-fg-secondary\">{p.unit}</span>\n                </p>\n                <ul className=\"flex flex-col gap-2 text-sm text-fg-secondary\">\n                  {p.points.map((x) => (\n                    <li key={x}>— {x}</li>\n                  ))}\n                </ul>\n                <Button variant={p.featured ? \"primary\" : \"secondary\"} shape=\"cut\" className=\"mt-auto w-full\">\n                  Choose {p.name}\n                </Button>\n              </GlowCard>\n            </li>\n          ))}\n        </ul>\n      </Section>\n      <Section id=\"credits\" title=\"Your credits\" headingSize=\"sm\" spacing=\"sm\" divider>\n        <div className=\"max-w-md\">\n          <Meter label=\"Credits this month\" value={3800} max={12000} valueText=\"3,800 of 12,000 used\" thresholds={{ low: 0.7, high: 0.9 }} showLabel />\n          <p className=\"mt-3 text-sm text-fg-secondary\">One credit ≈ one chat answer · 4 credits an image · 30 a minute of video.</p>\n        </div>\n      </Section>\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "docs-hub",
+        "title": "A documentation hub",
+        "description": "Groups of compact link cards under the hero.",
+        "template": true,
+        "path": "examples/marketing-layout/docs-hub.tsx",
+        "module": "@krizaka/ui/registry/examples/marketing-layout/docs-hub",
+        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { LinkCard } from \"@krizaka/ui/link-card\";\nimport { Section } from \"@krizaka/ui/page\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\n\nconst GROUPS = [\n  {\n    id: \"start\",\n    title: \"Start here\",\n    cards: [\n      { id: \"cli\", logo: \"orazaka\", title: \"The CLI\", text: \"npx orazaka install, start, dev — then every command.\" },\n      { id: \"packs\", logo: \"orazaka\", title: \"Packs & Studios\", text: \"The business offers Orazaka installs without code.\" },\n      { id: \"admin\", logo: \"orochia\", title: \"Orochia admin console\", text: \"Verification, moderation, payouts — behind four gates.\" },\n    ],\n  },\n  {\n    id: \"platform\",\n    title: \"Platform\",\n    cards: [\n      { id: \"ui\", logo: \"krizaka\", title: \"Krizaka UI\", text: \"Tokens, a Tailwind preset and the components — live.\" },\n      { id: \"java\", logo: \"krizaka\", title: \"Krizaka Java\", text: \"Parent, BOM, starters, messaging, Problem Details.\" },\n    ],\n  },\n] as const;\n\n// TEMPLATE — a documentation hub (krizaka.com/docs): the hero, then one section per group, each a grid of compact link\n// cards — the whole card one link, the product's mark, one sentence, the way in. One column on a phone.\nexport default function MarketingLayoutDocsHub() {\n  return (\n    <div className=\"w-full\">\n      <PageHero eyebrow=\"Documentation\" title=\"Build with Krizaka\" lead=\"The building blocks the products are made of, documented from their source.\" backdrop=\"plain\" />\n      {GROUPS.map((g) => (\n        <Section key={g.id} id={`hub-${g.id}`} title={g.title} headingSize=\"sm\" spacing=\"sm\">\n          <CardGrid min={260} reveal={false}>\n            {g.cards.map((c) => (\n              <LinkCard key={c.id} href={`#${c.id}`} icon={<ProductLogo id={c.logo} size={24} animated={false} />} title={c.title} description={c.text} cta=\"Open\" />\n            ))}\n          </CardGrid>\n        </Section>\n      ))}\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "basic",
+        "title": "The layout alone",
+        "description": "Skip link, bar, hero, a section and a footer.",
+        "path": "examples/marketing-layout/basic.tsx",
+        "module": "@krizaka/ui/registry/examples/marketing-layout/basic",
+        "code": "import { MarketingLayout } from \"@krizaka/ui/marketing-layout\";\nimport { NavBar } from \"@krizaka/ui/nav-bar\";\nimport { Section } from \"@krizaka/ui/page\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\n\n// A site's page: the link that skips to the content, the floating bar, the hero and sections in one frame, the footer.\nexport default function MarketingLayoutBasic() {\n  return (\n    <MarketingLayout\n      skipLabel=\"Skip to content\"\n      header={\n        <NavBar.Root label=\"Main\" compactAfter={false} className=\"max-w-(--kz-page-max,72rem)\">\n          <NavBar.Brand href=\"#home\">Krizaka</NavBar.Brand>\n          <NavBar.Items>\n            <NavBar.Link href=\"#products\" active>Products</NavBar.Link>\n            <NavBar.Link href=\"#docs\">Docs</NavBar.Link>\n          </NavBar.Items>\n        </NavBar.Root>\n      }\n      footer={<footer className=\"border-t border-border-subtle px-6 py-8 text-sm text-fg-secondary\">© Krizaka · Montréal</footer>}\n    >\n      <PageHero eyebrow=\"Products\" title=\"Two products, one way of building\" backdrop=\"plain\" />\n      <Section id=\"why\" title=\"Why\" spacing=\"sm\">\n        <p className=\"text-sm text-fg-secondary\">Every page shares the same edges.</p>\n      </Section>\n    </MarketingLayout>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [
+    {
+      "path": "marketing-layout/index.ts",
+      "content": "/** @krizaka/ui/marketing-layout — `MarketingLayout`: skip link, floating bar, the page, the footer. Server-safe. */\nexport { MarketingLayout, marketingLayout, type MarketingLayoutProps } from \"./marketing-layout\";\n"
+    },
+    {
+      "path": "marketing-layout/marketing-layout.tsx",
+      "content": "// Server-safe. The page of a site (krizaka.com, a product's public pages): a link to skip to the content, the site's\n// bar, the page — its PageHero and Sections (@krizaka/ui/page) — and the footer. The bar floats over the hero\n// (`--kz-hero-top` clears it); everything shares the page frame (`--kz-page-max`, `--kz-page-gutter`).\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const marketingLayout = tv({\n  slots: {\n    root: \"flex min-h-dvh w-full flex-col bg-surface-0 text-fg\",\n    skip:\n      \"sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[60] focus:rounded-lg focus:bg-surface-1 focus:px-4 focus:py-2 \" +\n      \"focus:text-sm focus:font-semibold focus:text-fg focus:shadow-lg focus:outline-hidden focus:ring-2 focus:ring-ring\",\n    header: \"fixed inset-x-0 top-3 z-50 px-(--kz-page-gutter,16px) pointer-events-none *:pointer-events-auto\",\n    main: \"flex-1 outline-hidden\",\n  },\n});\nconst s = marketingLayout();\n\nexport type MarketingLayoutProps = React.ComponentProps<\"div\"> & {\n  /** The site's bar (a floating NavBar of @krizaka/ui/nav-bar). */\n  header: React.ReactNode;\n  /** The site's footer. */\n  footer?: React.ReactNode;\n  /** The words of the link that skips to the content (`Skip to content`). */\n  skipLabel: string;\n  /** The page: a PageHero, then Sections. */\n  children: React.ReactNode;\n};\n\n/** A site's page: skip link, floating bar, the page, the footer. */\nexport function MarketingLayout({ header, footer, skipLabel, className, children, ...props }: MarketingLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <a href=\"#content\" className={s.skip()}>\n        {skipLabel}\n      </a>\n      <div className={s.header()}>{header}</div>\n      <main id=\"content\" tabIndex={-1} className={s.main()}>\n        {children}\n      </main>\n      {footer}\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "marketing-layout/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Marketing layout\",\n  summary: \"A site's page: the link that skips to the content, the floating bar, the page made of a PageHero and Sections in one frame, the footer.\",\n  status: \"beta\",\n  category: \"layouts\",\n  platforms: \"web\",\n  whenToUse: [\"Every public page of a Krizaka site: a product, pricing, a hub, a story.\", \"A product's public landing.\"],\n  whenNotToUse: [\n    { when: \"For a signed-in screen.\", use: \"app-shell\" },\n    { when: \"For a documentation page with a sidebar.\", use: \"docs-layout\" },\n  ],\n  bestPractices: [\"One PageHero per page, then Sections; the main action of the page is the only one with `shimmer`.\", \"Give the bar the frame's width (`--kz-page-max`): its edges are the content's.\", \"Templates show complete pages: copy one, keep its order.\"],\n  accessibility: {\n    keyboard: [\n      { keys: \"Tab\", action: \"The first stop is the skip link, which jumps to the page's content.\" }\n    ],\n    notes: [\"`main#content` receives the focus from the skip link.\", \"The bar floats over the hero: `--kz-hero-top` keeps the title clear of it.\"],\n  },\n  related: [\"page-hero\", \"page\", \"nav-bar\"],\n  web: {\n    imports: [\"MarketingLayout\"],\n    examples: [\n      { name: \"product-page\", title: \"A product page\", description: \"Orazaka's page: hero with facts, reasons, decisions, the owl's promise, the closing call.\", template: true },\n      { name: \"pricing\", title: \"Pricing and credits\", description: \"Plans side by side, what a credit buys, the credits left.\", template: true },\n      { name: \"docs-hub\", title: \"A documentation hub\", description: \"Groups of compact link cards under the hero.\", template: true },\n      { name: \"basic\", title: \"The layout alone\", description: \"Skip link, bar, hero, a section and a footer.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "examples/marketing-layout/product-page.tsx",
+    "content": "import { ProductLogo } from \"@krizaka/ui\";\nimport { ActionBar } from \"@krizaka/ui/action-bar\";\nimport { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { DecisionList } from \"@krizaka/ui/decision-list\";\nimport { MarketingLayout } from \"@krizaka/ui/marketing-layout\";\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\nimport { NavBar } from \"@krizaka/ui/nav-bar\";\nimport { Facts, Section } from \"@krizaka/ui/page\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\n\nconst WHY = [\n  { id: \"local\", title: \"Local inference\", hook: \"Elsewhere, every prompt crosses the ocean.\", bird: \"falcon\" as const },\n  { id: \"paid\", title: \"Paid once\", hook: \"Elsewhere, you pay per token, forever.\", bird: \"flamingo\" as const },\n  { id: \"asked\", title: \"Agents that ask\", hook: \"Elsewhere, an agent acts first and apologises later.\", bird: \"pigeon\" as const },\n];\nconst DECISIONS = [\n  { id: \"local\", chose: \"Local models by default.\", refused: \"A hosted API as the default path.\", because: \"A prompt that never leaves cannot leak.\", cost: \"You need a GPU, or patience on a CPU.\" },\n  { id: \"telemetry\", chose: \"Zero telemetry.\", refused: \"Anonymous usage statistics.\", because: \"Anonymous rarely stays anonymous.\", cost: \"You tell us what breaks.\" },\n];\nconst labels = { chose: \"We chose\", refused: \"We refused\", because: \"Because\", cost: \"What it costs you\" };\n\n// TEMPLATE — a product page (Orazaka): the hero with its facts and its main action (cut, shimmer), the reasons as compact\n// argument cards (the bird in the corner), the decisions with their cost, the owl's promise, the closing call. On a\n// phone the hero's bird goes above the title, the cards stack, the decisions' three parts stack under the choice.\nexport default function MarketingLayoutProductPage() {\n  return (\n    <div className=\"brand-orazaka\">\n      <MarketingLayout\n        skipLabel=\"Skip to content\"\n        header={\n          <NavBar.Root label=\"Main\" compactAfter={false} className=\"max-w-(--kz-page-max,72rem)\">\n            <NavBar.Brand href=\"#home\"><ProductLogo id=\"orazaka\" size={22} animated={false} /> Orazaka</NavBar.Brand>\n            <NavBar.Items>\n              <NavBar.Link href=\"#why\" active>Why</NavBar.Link>\n              <NavBar.Link href=\"#decisions\">Decisions</NavBar.Link>\n            </NavBar.Items>\n          </NavBar.Root>\n        }\n      >\n        <PageHero\n          eyebrow=\"Sovereign AI · open source\"\n          title=\"The AI that never leaves home\"\n          lead=\"Chat, image, voice and video on your own server — one governed pipeline, nothing sent anywhere.\"\n          aside={<Mascot bird=\"owl\" mood=\"welcome\" size={112} />}\n        >\n          <Facts items={[{ label: \"Apache-2.0\", tone: \"ok\" }, { label: \"Law 25 · GDPR\" }]} />\n          <Button variant=\"primary\" size=\"lg\" shape=\"cut\" shimmer>Install in three commands</Button>\n        </PageHero>\n        <Section id=\"why\" eyebrow=\"Why\" title=\"Three traps it removes\">\n          <CardGrid min={260} fit=\"fit\" reveal={false}>\n            {WHY.map((w) => (\n              <ArgumentCard\n                key={w.id}\n                id={`why-${w.id}`}\n                title={w.title}\n                mark={<Mascot bird={w.bird} size={40} animated={false} />}\n                hook={{ label: \"The trap\", text: w.hook }}\n                more={{ href: `#${w.id}`, label: \"Details\" }}\n              />\n            ))}\n          </CardGrid>\n        </Section>\n        <Section id=\"decisions\" eyebrow=\"Decisions\" title=\"What we chose, and what it costs you\" divider>\n          <DecisionList decisions={DECISIONS} labels={labels} reveal={false} />\n          <div className=\"mt-8\">\n            <MascotQuote variant=\"callout\" bird=\"owl\" label=\"The owl's promise\">\n              Every personal record stays in Québec, and you can read who touched it.\n            </MascotQuote>\n          </div>\n        </Section>\n        <Section spacing=\"sm\" aria-labelledby=\"product-cta\">\n          <CtaPanel id=\"product-cta\" title=\"Ready to run it at home?\" body=\"Three commands, then your first private answer.\">\n            <ActionBar primaryFirst size=\"lg\" label=\"Get started\" actions={[{ href: \"#install\", label: \"Install\" }, { href: \"#contact\", label: \"Talk to us\" }]} />\n          </CtaPanel>\n        </Section>\n      </MarketingLayout>\n    </div>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "MarketingLayout",
+      "description": "A site's page: skip link, floating bar, the page, the footer.",
+      "props": [
+        {
+          "name": "header",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The site's bar (a floating NavBar of\n@krizaka /ui/nav-bar).",
+          "required": true
+        },
+        {
+          "name": "skipLabel",
+          "type": "string",
+          "default": null,
+          "description": "The words of the link that skips to the content (`Skip to content`).",
+          "required": true
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The site's footer.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/marquee.json

@@ -147,7 +147,7 @@
     },
     {
       "path": "meta.ts",
-      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"action-bar\"\n  | \"alert\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"link-card\"\n  | \"loader\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
     }
   ],
   "dependencies": [],