@krizaka/ui 2.6.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  | \"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

@@ -8,7 +8,7 @@
   "category": "blocks",
   "platforms": "web",
   "whenToUse": [
-    "To state the rule a feature stands for (the falcon watches, the owl reads, the duck builds, the flamingo answers or gets paid, the pigeon delivers).",
+    "To state the rule a feature stands for (the falcon watches, the owl reads, the duck builds, the flamingo answers or gets paid, the pigeon delivers, the lovebird introduces).",
     "A promise that deserves its own moment in a section (`callout`)."
   ],
   "whenNotToUse": [
@@ -48,7 +48,7 @@
         "props": [
           {
             "name": "bird",
-            "type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\"",
+            "type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\"",
             "default": null,
             "description": "The bird that speaks — the one whose idea it is.",
             "required": true
@@ -118,15 +118,15 @@
     },
     {
       "path": "mascot-quote/mascot-quote.tsx",
-      "content": "// Client (the bird has an id per instance). A rule, a promise or a decision told by a bird (blocks.css): the sentence in\n// a speech bubble — an opening quote mark, the hue around it — and under its tail the bird and who speaks. One bird per\n// idea (Mascot's rule): the falcon watches, the owl reads, the duck builds, the flamingo answers or gets paid, the\n// pigeon delivers.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { type MascotBird, type MascotMood } from \"../mascots/geometry\";\nimport { Mascot } from \"../mascots/mascot\";\n\nexport type MascotQuoteProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The bird that speaks — the one whose idea it is. */\n  bird: MascotBird;\n  /**\n   * Its mood.\n   * @default \"thinking\"\n   */\n  mood?: MascotMood;\n  /** Who speaks, under the bubble: `The falcon's rule`. */\n  label: React.ReactNode;\n  /** The sentence: the rule, the promise. */\n  children: React.ReactNode;\n  /**\n   * `inline` inside a card (small, the bird answers the pointer); `callout` alone in a section (larger, the bird alive).\n   * @default \"inline\"\n   */\n  variant?: \"inline\" | \"callout\";\n  /** The bird's idle loop (it pauses off screen and stops under reduced motion). Defaults to `true` for a callout. */\n  animated?: boolean;\n};\n\n/** A sentence told by a bird: a speech bubble, the bird under its tail, who speaks. The bird is decorative. */\nexport function MascotQuote({ bird, mood = \"thinking\", label, children, variant = \"inline\", animated, className, ...props }: MascotQuoteProps) {\n  const callout = variant === \"callout\";\n  return (\n    <figure className={cn(\"kz-quote\", className)} data-variant={callout ? \"callout\" : undefined} {...props}>\n      <blockquote>\n        <p>{children}</p>\n      </blockquote>\n      <figcaption>\n        <Mascot bird={bird} mood={mood} size={callout ? 72 : 44} animated={animated ?? callout} className=\"kz-quote-bird\" aria-hidden />\n        <span>{label}</span>\n      </figcaption>\n    </figure>\n  );\n}\n"
+      "content": "// Client (the bird has an id per instance). A rule, a promise or a decision told by a bird (blocks.css): the sentence in\n// a speech bubble — an opening quote mark, the hue around it — and under its tail the bird and who speaks. One bird per\n// idea (Mascot's rule): the falcon watches, the owl reads, the duck builds, the flamingo answers or gets paid, the\n// pigeon delivers, the lovebird introduces.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { type MascotBird, type MascotMood } from \"../mascots/geometry\";\nimport { Mascot } from \"../mascots/mascot\";\n\nexport type MascotQuoteProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The bird that speaks — the one whose idea it is. */\n  bird: MascotBird;\n  /**\n   * Its mood.\n   * @default \"thinking\"\n   */\n  mood?: MascotMood;\n  /** Who speaks, under the bubble: `The falcon's rule`. */\n  label: React.ReactNode;\n  /** The sentence: the rule, the promise. */\n  children: React.ReactNode;\n  /**\n   * `inline` inside a card (small, the bird answers the pointer); `callout` alone in a section (larger, the bird alive).\n   * @default \"inline\"\n   */\n  variant?: \"inline\" | \"callout\";\n  /** The bird's idle loop (it pauses off screen and stops under reduced motion). Defaults to `true` for a callout. */\n  animated?: boolean;\n};\n\n/** A sentence told by a bird: a speech bubble, the bird under its tail, who speaks. The bird is decorative. */\nexport function MascotQuote({ bird, mood = \"thinking\", label, children, variant = \"inline\", animated, className, ...props }: MascotQuoteProps) {\n  const callout = variant === \"callout\";\n  return (\n    <figure className={cn(\"kz-quote\", className)} data-variant={callout ? \"callout\" : undefined} {...props}>\n      <blockquote>\n        <p>{children}</p>\n      </blockquote>\n      <figcaption>\n        <Mascot bird={bird} mood={mood} size={callout ? 72 : 44} animated={animated ?? callout} className=\"kz-quote-bird\" aria-hidden />\n        <span>{label}</span>\n      </figcaption>\n    </figure>\n  );\n}\n"
     },
     {
       "path": "mascot-quote/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Mascot quote\",\n  summary:\n    \"A rule, a promise or a decision told by a bird: the sentence in a speech bubble, the bird under its tail and who speaks — `inline` in a card, `callout` alone in a section.\",\n  status: \"beta\",\n  category: \"blocks\",\n  platforms: \"web\",\n  whenToUse: [\n    \"To state the rule a feature stands for (the falcon watches, the owl reads, the duck builds, the flamingo answers or gets paid, the pigeon delivers).\",\n    \"A promise that deserves its own moment in a section (`callout`).\",\n  ],\n  whenNotToUse: [\n    { when: \"For a bird that only decorates: a bird carries a promise, or it is not there.\", use: \"mascots\" },\n    { when: \"For a status or a warning the reader must act on.\", use: \"alert\" },\n  ],\n  bestPractices: [\n    \"One bird per idea, the same bird for the same idea everywhere.\",\n    \"One sentence, said as a rule: short, in the present tense.\",\n    \"The label says who speaks (`The falcon's rule`): words as props.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"A `figure` with a `blockquote` and its `figcaption`: read as a quote and who says it.\",\n      \"The bird is decorative (`aria-hidden`); its idle loop pauses off screen and stops under `prefers-reduced-motion`.\",\n    ],\n  },\n  related: [\"mascots\", \"argument-card\", \"alert\"],\n  web: {\n    imports: [\"MascotQuote\"],\n    examples: [\n      { name: \"inline\", title: \"Inline\", description: \"The falcon's rule, small, beside a paragraph or inside a card.\" },\n      { name: \"callout\", title: \"Callout\", description: \"The owl's promise, alone in a section, the bird alive.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Mascot quote\",\n  summary:\n    \"A rule, a promise or a decision told by a bird: the sentence in a speech bubble, the bird under its tail and who speaks — `inline` in a card, `callout` alone in a section.\",\n  status: \"beta\",\n  category: \"blocks\",\n  platforms: \"web\",\n  whenToUse: [\n    \"To state the rule a feature stands for (the falcon watches, the owl reads, the duck builds, the flamingo answers or gets paid, the pigeon delivers, the lovebird introduces).\",\n    \"A promise that deserves its own moment in a section (`callout`).\",\n  ],\n  whenNotToUse: [\n    { when: \"For a bird that only decorates: a bird carries a promise, or it is not there.\", use: \"mascots\" },\n    { when: \"For a status or a warning the reader must act on.\", use: \"alert\" },\n  ],\n  bestPractices: [\n    \"One bird per idea, the same bird for the same idea everywhere.\",\n    \"One sentence, said as a rule: short, in the present tense.\",\n    \"The label says who speaks (`The falcon's rule`): words as props.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"A `figure` with a `blockquote` and its `figcaption`: read as a quote and who says it.\",\n      \"The bird is decorative (`aria-hidden`); its idle loop pauses off screen and stops under `prefers-reduced-motion`.\",\n    ],\n  },\n  related: [\"mascots\", \"argument-card\", \"alert\"],\n  web: {\n    imports: [\"MascotQuote\"],\n    examples: [\n      { name: \"inline\", title: \"Inline\", description: \"The falcon's rule, small, beside a paragraph or inside a card.\" },\n      { name: \"callout\", title: \"Callout\", description: \"The owl's promise, alone in a section, the bird alive.\" },\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  | \"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  | \"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": [],
@@ -145,7 +145,7 @@
       "props": [
         {
           "name": "bird",
-          "type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\"",
+          "type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\"",
           "default": null,
           "description": "The bird that speaks — the one whose idea it is.",
           "required": true