@krizaka/ui 2.8.0 → 2.9.0

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  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\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-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landscape\"\n  | \"link-card\"\n  | \"loader\"\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  | \"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  | \"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 templates.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"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  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\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-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landscape\"\n  | \"link-card\"\n  | \"loader\"\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  | \"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  | \"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 templates.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"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/mascot-quote.json

@@ -126,7 +126,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  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\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-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landscape\"\n  | \"link-card\"\n  | \"loader\"\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  | \"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  | \"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 templates.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"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/mascot-state.json

@@ -844,7 +844,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  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\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-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landscape\"\n  | \"link-card\"\n  | \"loader\"\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  | \"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  | \"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 templates.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"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/mascots.json

@@ -2,8 +2,8 @@
   "name": "mascots",
   "type": "primitive",
   "title": "Mascots",
-  "summary": "The Krizaka flock: six birds (falcon, owl, duck, flamingo, pigeon, lovebird) in five moods, drawn in the product's brand colours.",
-  "description": "The Krizaka flock: six birds (falcon, owl, duck, flamingo, pigeon, lovebird) in five moods, drawn in the product's brand colours.",
+  "summary": "The Krizaka flock: six birds (falcon, owl, duck, flamingo, pigeon, lovebird) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.",
+  "description": "The Krizaka flock: six birds (falcon, owl, duck, flamingo, pigeon, lovebird) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.",
   "status": "beta",
   "category": "feedback",
   "platforms": "both",
@@ -31,6 +31,7 @@
   "bestPractices": [
     "One mascot per screen, and only at a moment that matters: a welcome, a wait, a success, an empty list, an error.",
     "Keep the bird's role: the owl reads (documents), the falcon watches (security), the duck builds (code), the flamingo answers (support), the pigeon delivers (notifications, packages), the lovebird introduces (matches, two people who meet).",
+    "The phoenix (`Phoenix`) does no job: keep it for a comeback — a relaunch, a recovered account, a second chance — never as one more helper.",
     "Leave `tone=\"brand\"` in a product: the bird wears the product's accent; `own` is for the Krizaka story.",
     "The words stay beside it (a title, a line, an action): the mascot never carries the message alone."
   ],
@@ -50,7 +51,7 @@
   ],
   "web": {
     "entry": "@krizaka/ui/mascots",
-    "import": "import { Mascot, MASCOT_BIRDS, MASCOT_MOODS } from \"@krizaka/ui/mascots\";",
+    "import": "import { Mascot, MASCOT_BIRDS, MASCOT_MOODS, Phoenix } from \"@krizaka/ui/mascots\";",
     "props": [
       {
         "component": "MASCOT_BIRDS",
@@ -104,6 +105,40 @@
             "required": false
           }
         ]
+      },
+      {
+        "component": "Phoenix",
+        "description": "The phoenix: the comeback, beside the five birds of the flock (`Mascot`). Decorative unless titled.",
+        "props": [
+          {
+            "name": "animated",
+            "type": "boolean",
+            "default": "true",
+            "description": "A slow float and a breathing core. Off with `false`; always off under `prefers-reduced-motion`.",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "number",
+            "default": "120",
+            "description": "Width and height in pixels.",
+            "required": false
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "An accessible name (the phoenix becomes an image); without it, it is decorative.",
+            "required": false
+          },
+          {
+            "name": "tone",
+            "type": "\"brand\" | \"own\"",
+            "default": "own",
+            "description": "`own` (default): the violet wing and the gold wing of the Krizaka story. `brand`: the host's accent and accent-2.",
+            "required": false
+          }
+        ]
       }
     ],
     "examples": [
@@ -154,12 +189,20 @@
         "path": "examples/mascots/lovebird.tsx",
         "module": "@krizaka/ui/registry/examples/mascots/lovebird",
         "code": "import { Button } from \"@krizaka/ui/button\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\n\n// The lovebird introduces: two people who chose each other meet — the words and the next step beside it.\nexport default function MascotLovebird() {\n  return (\n    <div className=\"flex w-96 items-center gap-4 rounded-xl border border-border-default bg-surface-1 p-4\">\n      <Mascot bird=\"lovebird\" mood=\"success\" size={88} />\n      <div className=\"flex-1\">\n        <p className=\"text-sm font-medium text-fg\">You are both interested</p>\n        <p className=\"mt-1 text-sm text-fg-secondary\">Your introduction is open for seven days.</p>\n        <Button variant=\"primary\" size=\"sm\" className=\"mt-3\">\n          Say hello\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "phoenix",
+        "title": "The phoenix",
+        "description": "The sixth figure: a comeback — a relaunch, a recovered account — in its own colours or the brand's.",
+        "path": "examples/mascots/phoenix.tsx",
+        "module": "@krizaka/ui/registry/examples/mascots/phoenix",
+        "code": "import { Phoenix } from \"@krizaka/ui/mascots\";\n\n// The phoenix stands for a comeback — a relaunch, a recovered account: its own colours, then the product's accent.\nexport default function MascotPhoenix() {\n  return (\n    <div className=\"flex flex-wrap items-end gap-8\">\n      <Phoenix size={112} title=\"The phoenix\" />\n      <Phoenix size={112} tone=\"brand\" title=\"The phoenix in the brand's colours\" />\n    </div>\n  );\n}\n"
       }
     ]
   },
   "native": {
     "entry": "@krizaka/ui/native",
-    "import": "import { Mascot } from \"@krizaka/ui/native\";",
+    "import": "import { Mascot, Phoenix } from \"@krizaka/ui/native\";",
     "differences": [
       "Only the idle bob and the badges: the wave, the dots and the hop are web gestures.",
       "Style with `style`, not `className`."
@@ -245,6 +288,18 @@
           "dark": "examples/mascots/native/lovebird.dark.png",
           "light": "examples/mascots/native/lovebird.light.png"
         }
+      },
+      {
+        "name": "phoenix",
+        "title": "The phoenix",
+        "description": "The comeback, in its own colours and in the app's accent.",
+        "path": "examples/mascots/native/phoenix.tsx",
+        "module": "@krizaka/ui/registry/examples/mascots/native/phoenix",
+        "code": "import { Phoenix, Txt } from \"@krizaka/ui/native\";\nimport { View } from \"react-native\";\n\n// The comeback: the phoenix in its own colours, then in the app's accent.\nexport default function NativeMascotPhoenix() {\n  return (\n    <View style={{ flexDirection: \"row\", gap: 20, alignItems: \"flex-end\" }}>\n      <View style={{ alignItems: \"center\", gap: 4 }}>\n        <Phoenix size={88} animated={false} />\n        <Txt variant=\"caption\">own</Txt>\n      </View>\n      <View style={{ alignItems: \"center\", gap: 4 }}>\n        <Phoenix size={88} tone=\"brand\" animated={false} />\n        <Txt variant=\"caption\">brand</Txt>\n      </View>\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/mascots/native/phoenix.dark.png",
+          "light": "examples/mascots/native/phoenix.light.png"
+        }
       }
     ]
   },
@@ -255,7 +310,7 @@
     },
     {
       "path": "mascots/index.ts",
-      "content": "/** @krizaka/ui/mascots — `Mascot`, the Krizaka flock (six birds, five moods). Client: an id per instance. */\nexport { MASCOT_BIRDS, MASCOT_MOODS, type MascotBird, type MascotMood, type MascotTone } from \"./geometry\";\nexport { Mascot, type MascotProps } from \"./mascot\";\n"
+      "content": "/** @krizaka/ui/mascots — `Mascot`, the Krizaka flock (six birds, five moods), and `Phoenix`, the comeback. Client: an id per instance. */\nexport { MASCOT_BIRDS, MASCOT_MOODS, type MascotBird, type MascotMood, type MascotTone } from \"./geometry\";\nexport { Mascot, type MascotProps } from \"./mascot\";\nexport { Phoenix, type PhoenixProps } from \"./phoenix\";\n"
     },
     {
       "path": "mascots/mascot.tsx",
@@ -263,11 +318,19 @@
     },
     {
       "path": "mascots/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Mascots\",\n  summary: \"The Krizaka flock: six birds (falcon, owl, duck, flamingo, pigeon, lovebird) in five moods, drawn in the product's brand colours.\",\n  status: \"beta\",\n  category: \"feedback\",\n  platforms: \"both\",\n  whenToUse: [\n    \"To welcome a person on a first screen or an onboarding step (`welcome`).\",\n    \"While a long task runs and the person waits for it (`thinking`), beside its progress.\",\n    \"When a long task has just finished well (`success`): a generation, an import, a verification.\",\n    \"In an empty state the person reaches for the first time (`empty`), above its title.\",\n    \"On a full-page or panel error, beside what went wrong and what to do (`error`).\",\n  ],\n  whenNotToUse: [\n    { when: \"In the middle of working content (a list row, a toolbar, a form): a mascot is for a moment, not decoration.\", use: \"badge\" },\n    { when: \"For a short wait of a second or two.\", use: \"spinner\" },\n    { when: \"To announce a result that needs no celebration.\", use: \"toast\" },\n  ],\n  bestPractices: [\n    \"One mascot per screen, and only at a moment that matters: a welcome, a wait, a success, an empty list, an error.\",\n    \"Keep the bird's role: the owl reads (documents), the falcon watches (security), the duck builds (code), the flamingo answers (support), the pigeon delivers (notifications, packages), the lovebird introduces (matches, two people who meet).\",\n    \"Leave `tone=\\\"brand\\\"` in a product: the bird wears the product's accent; `own` is for the Krizaka story.\",\n    \"The words stay beside it (a title, a line, an action): the mascot never carries the message alone.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"Decorative by default (`aria-hidden`): the text next to it carries the meaning. With `title` it becomes an image with that name.\",\n      \"Every gesture (idle bob, blink, wave, dots, hop) stops under `prefers-reduced-motion`, and with `animated={false}`.\",\n      \"The success and error badges are not the only signal: say it in words beside the bird.\",\n    ],\n  },\n  related: [\"empty-state\", \"progress\", \"alert\", \"spinner\"],\n  web: {\n    imports: [\"Mascot\", \"MASCOT_BIRDS\", \"MASCOT_MOODS\"],\n    examples: [\n      { name: \"moods\", title: \"Moods\", description: \"One bird in its five moods: welcome, thinking, success, empty, error.\" },\n      { name: \"flock\", title: \"The flock\", description: \"The six birds in the brand colours of the host.\" },\n      { name: \"own-tone\", title: \"Signature colours\", description: \"`tone=\\\"own\\\"`: each bird in its colours of the Krizaka story.\" },\n      { name: \"empty-state\", title: \"In an empty state\", description: \"The owl above an empty list, the words and the action beside it.\" },\n      { name: \"long-task\", title: \"During a long task\", description: \"The pigeon thinking beside the progress of a job.\" },\n      { name: \"lovebird\", title: \"An introduction\", description: \"The lovebird celebrates a mutual interest: two people who chose each other meet.\" },\n    ],\n  },\n  native: {\n    imports: [\"Mascot\"],\n    differences: [\"Only the idle bob and the badges: the wave, the dots and the hop are web gestures.\", \"Style with `style`, not `className`.\"],\n    examples: [\n      { name: \"default\", title: \"Default\", description: \"The owl welcoming, the falcon done, the duck with nothing yet.\" },\n      { name: \"lovebird\", title: \"The lovebird\", description: \"The lovebird welcoming, then celebrating a mutual interest.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Mascots\",\n  summary: \"The Krizaka flock: six birds (falcon, owl, duck, flamingo, pigeon, lovebird) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.\",\n  status: \"beta\",\n  category: \"feedback\",\n  platforms: \"both\",\n  whenToUse: [\n    \"To welcome a person on a first screen or an onboarding step (`welcome`).\",\n    \"While a long task runs and the person waits for it (`thinking`), beside its progress.\",\n    \"When a long task has just finished well (`success`): a generation, an import, a verification.\",\n    \"In an empty state the person reaches for the first time (`empty`), above its title.\",\n    \"On a full-page or panel error, beside what went wrong and what to do (`error`).\",\n  ],\n  whenNotToUse: [\n    { when: \"In the middle of working content (a list row, a toolbar, a form): a mascot is for a moment, not decoration.\", use: \"badge\" },\n    { when: \"For a short wait of a second or two.\", use: \"spinner\" },\n    { when: \"To announce a result that needs no celebration.\", use: \"toast\" },\n  ],\n  bestPractices: [\n    \"One mascot per screen, and only at a moment that matters: a welcome, a wait, a success, an empty list, an error.\",\n    \"Keep the bird's role: the owl reads (documents), the falcon watches (security), the duck builds (code), the flamingo answers (support), the pigeon delivers (notifications, packages), the lovebird introduces (matches, two people who meet).\",\n    \"The phoenix (`Phoenix`) does no job: keep it for a comeback — a relaunch, a recovered account, a second chance — never as one more helper.\",\n    \"Leave `tone=\\\"brand\\\"` in a product: the bird wears the product's accent; `own` is for the Krizaka story.\",\n    \"The words stay beside it (a title, a line, an action): the mascot never carries the message alone.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"Decorative by default (`aria-hidden`): the text next to it carries the meaning. With `title` it becomes an image with that name.\",\n      \"Every gesture (idle bob, blink, wave, dots, hop) stops under `prefers-reduced-motion`, and with `animated={false}`.\",\n      \"The success and error badges are not the only signal: say it in words beside the bird.\",\n    ],\n  },\n  related: [\"empty-state\", \"progress\", \"alert\", \"spinner\"],\n  web: {\n    imports: [\"Mascot\", \"MASCOT_BIRDS\", \"MASCOT_MOODS\", \"Phoenix\"],\n    examples: [\n      { name: \"moods\", title: \"Moods\", description: \"One bird in its five moods: welcome, thinking, success, empty, error.\" },\n      { name: \"flock\", title: \"The flock\", description: \"The six birds in the brand colours of the host.\" },\n      { name: \"own-tone\", title: \"Signature colours\", description: \"`tone=\\\"own\\\"`: each bird in its colours of the Krizaka story.\" },\n      { name: \"empty-state\", title: \"In an empty state\", description: \"The owl above an empty list, the words and the action beside it.\" },\n      { name: \"long-task\", title: \"During a long task\", description: \"The pigeon thinking beside the progress of a job.\" },\n      { name: \"lovebird\", title: \"An introduction\", description: \"The lovebird celebrates a mutual interest: two people who chose each other meet.\" },\n      { name: \"phoenix\", title: \"The phoenix\", description: \"The sixth figure: a comeback — a relaunch, a recovered account — in its own colours or the brand's.\" },\n    ],\n  },\n  native: {\n    imports: [\"Mascot\", \"Phoenix\"],\n    differences: [\"Only the idle bob and the badges: the wave, the dots and the hop are web gestures.\", \"Style with `style`, not `className`.\"],\n    examples: [\n      { name: \"default\", title: \"Default\", description: \"The owl welcoming, the falcon done, the duck with nothing yet.\" },\n      { name: \"lovebird\", title: \"The lovebird\", description: \"The lovebird welcoming, then celebrating a mutual interest.\" },\n      { name: \"phoenix\", title: \"The phoenix\", description: \"The comeback, in its own colours and in the app's accent.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "mascots/phoenix-geometry.ts",
+      "content": "/** The phoenix's geometry (120 × 120), drawn by the web `Phoenix` and the native one. */\nexport const PHOENIX = {\n  wingL: \"M56 62 C40 40 22 36 8 40 C22 46 30 56 34 70 C40 64 48 62 56 62 Z\",\n  wingR: \"M64 62 C80 40 98 36 112 40 C98 46 90 56 86 70 C80 64 72 62 64 62 Z\",\n  tailL: \"M52 66 C46 82 40 94 30 104 C44 98 52 90 58 78 Z\",\n  tailR: \"M68 66 C74 82 80 94 90 104 C76 98 68 90 62 78 Z\",\n  body: \"M60 34 L68 60 L60 82 L52 60 Z\",\n  crest: \"M60 34 L56 24 M60 34 L64 24\",\n} as const;\n\nexport interface PhoenixPalette {\n  /** The left wing's gradient (top → bottom). */\n  readonly left: readonly [string, string];\n  /** The right wing's gradient. */\n  readonly right: readonly [string, string];\n  /** The core's glow: centre, edge. */\n  readonly core: readonly [string, string];\n  /** The body and its edge. */\n  readonly body: string;\n  readonly edge: string;\n  /** The crest. */\n  readonly crest: string;\n}\n\n/** The phoenix of the Krizaka story: a violet wing, a gold wing (the brand layer's own colours, like the marks). */\nexport const PHOENIX_PALETTES: { readonly own: PhoenixPalette } = {\n  own: {\n    left: [\"#c084fc\", \"#7c3aed\"],\n    right: [\"#fde68a\", \"#f59e0b\"],\n    core: [\"#fff7ed\", \"#fb923c\"],\n    body: \"#1f1530\",\n    edge: \"#e9d5ff\",\n    crest: \"#fbbf24\",\n  },\n};\n"
+    },
+    {
+      "path": "mascots/phoenix.tsx",
+      "content": "// The phoenix of the Krizaka landscape, on its own: two wings — two rival flames — around one bright core. The sixth\n// figure of the flock: it does no job, it stands for the comeback (a relaunch, a recovered account, a second chance).\nimport type * as React from \"react\";\nimport { useId } from \"react\";\n\nimport { PHOENIX, PHOENIX_PALETTES,type PhoenixPalette } from \"./phoenix-geometry\";\n\nconst CSS = `\n@keyframes kzp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }\n@keyframes kzp-core { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }\n.kzp[data-animated] { animation: kzp-float 5s ease-in-out infinite; }\n.kzp[data-animated] .kzp-core { animation: kzp-core 2.8s ease-in-out infinite; }\n@media (prefers-reduced-motion: reduce) { .kzp, .kzp .kzp-core { animation: none !important; } }\n`;\n\nexport type PhoenixProps = Omit<React.ComponentProps<\"svg\">, \"children\"> & {\n  /** `own` (default): the violet wing and the gold wing of the Krizaka story. `brand`: the host's accent and accent-2. */\n  tone?: \"own\" | \"brand\";\n  /** Width and height in pixels. */\n  size?: number;\n  /** A slow float and a breathing core. Off with `false`; always off under `prefers-reduced-motion`. */\n  animated?: boolean;\n  /** An accessible name (the phoenix becomes an image); without it, it is decorative. */\n  title?: string;\n};\n\nconst BRAND: PhoenixPalette = {\n  left: [\"var(--kz-accent-2, var(--kz-accent))\", \"var(--kz-accent)\"],\n  right: [\"var(--kz-accent)\", \"var(--kz-accent-2, var(--kz-accent))\"],\n  core: [\"#ffffff\", \"var(--kz-accent)\"],\n  body: \"var(--kz-surface-3)\",\n  edge: \"var(--kz-border-strong)\",\n  crest: \"var(--kz-accent)\",\n};\n\n/** The phoenix: the comeback, beside the five birds of the flock (`Mascot`). Decorative unless titled. */\nexport function Phoenix({ tone = \"own\", size = 120, animated = true, title, className, ...props }: PhoenixProps) {\n  const id = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n  const p = tone === \"brand\" ? BRAND : PHOENIX_PALETTES.own;\n  const a11y = title ? { role: \"img\", \"aria-label\": title } : { \"aria-hidden\": true };\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      data-animated={animated ? \"\" : undefined}\n      className={[\"kzp\", className].filter(Boolean).join(\" \")}\n      {...a11y}\n      {...props}\n    >\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={`kzp-l-${id}`} x1=\"1\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" stopColor={p.left[0]} />\n          <stop offset=\"100%\" stopColor={p.left[1]} />\n        </linearGradient>\n        <linearGradient id={`kzp-r-${id}`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n          <stop offset=\"0%\" stopColor={p.right[0]} />\n          <stop offset=\"100%\" stopColor={p.right[1]} />\n        </linearGradient>\n        <radialGradient id={`kzp-c-${id}`}>\n          <stop offset=\"0%\" stopColor={p.core[0]} />\n          <stop offset=\"100%\" stopColor={p.core[1]} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      <path d={PHOENIX.wingL} fill={`url(#kzp-l-${id})`} />\n      <path d={PHOENIX.wingR} fill={`url(#kzp-r-${id})`} />\n      <path d={PHOENIX.tailL} fill={`url(#kzp-l-${id})`} opacity=\".7\" />\n      <path d={PHOENIX.tailR} fill={`url(#kzp-r-${id})`} opacity=\".7\" />\n      <path d={PHOENIX.body} fill={p.body} stroke={p.edge} strokeOpacity=\".5\" />\n      <circle cx=\"60\" cy=\"58\" r=\"12\" fill={`url(#kzp-c-${id})`} className=\"kzp-core\" />\n      <circle cx=\"60\" cy=\"58\" r=\"3.5\" fill=\"#fff\" />\n      <path d={PHOENIX.crest} stroke={p.crest} strokeWidth=\"2\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\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  | \"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  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\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-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landscape\"\n  | \"link-card\"\n  | \"loader\"\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  | \"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  | \"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 templates.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"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": [],
@@ -329,6 +392,40 @@
           "required": false
         }
       ]
+    },
+    {
+      "component": "Phoenix",
+      "description": "The phoenix: the comeback, beside the five birds of the flock (`Mascot`). Decorative unless titled.",
+      "props": [
+        {
+          "name": "animated",
+          "type": "boolean",
+          "default": "true",
+          "description": "A slow float and a breathing core. Off with `false`; always off under `prefers-reduced-motion`.",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "default": "120",
+          "description": "Width and height in pixels.",
+          "required": false
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "default": null,
+          "description": "An accessible name (the phoenix becomes an image); without it, it is decorative.",
+          "required": false
+        },
+        {
+          "name": "tone",
+          "type": "\"brand\" | \"own\"",
+          "default": "own",
+          "description": "`own` (default): the violet wing and the gold wing of the Krizaka story. `brand`: the host's accent and accent-2.",
+          "required": false
+        }
+      ]
     }
   ]
 }