@krizaka/ui 3.4.0 → 3.6.0

package/registry/list.json

@@ -5,6 +5,7 @@
   "summary": "Records read top to bottom — a leading visual, a title and a line, details and actions beside — dense or comfortable, selectable, windowed when long.",
   "description": "Records read top to bottom — a leading visual, a title and a line, details and actions beside — dense or comfortable, selectable, windowed when long.",
   "status": "beta",
+  "deprecated": null,
   "category": "data-display",
   "platforms": "both",
   "whenToUse": [
@@ -436,7 +437,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  | \"achievement\"\n  | \"action-bar\"\n  | \"activity-feed\"\n  | \"action-sheet\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"description-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"map\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+      "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  | \"activity-feed\"\n  | \"action-sheet\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"chat\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"description-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"map\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"match-dialog\"\n  | \"media-capture\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"photo-grid\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\n  | \"radio-group\"\n  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"skip-link\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"splash-handoff\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"step-progress\"\n  | \"stepper\"\n  | \"swipe-deck\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"tag-selector\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"verified-badge\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\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/**\n * `stable`: its API only changes in a major. `beta`: it may still change in a minor. `deprecated`: no product uses it and\n * no work plans to — it still works, says what replaces it, and goes in the major named by `deprecated.removedIn`.\n */\nexport type Status = \"stable\" | \"beta\" | \"deprecated\";\n\n/** What a deprecated component says (required when `status` is `deprecated`, absent otherwise). */\nexport interface Deprecation {\n  /** The version that deprecated it (`3.6.0`). */\n  readonly since: string;\n  /** The major that removes it (`4.0.0`). */\n  readonly removedIn: string;\n  /** What replaces it, when a component does. */\n  readonly use?: ComponentName;\n  /** Why it goes: no product uses it, no planned work needs it. */\n  readonly reason: string;\n}\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/** Why a reader needs a template: the seven intents the templates are grouped by (sidebar sub-headings, catalogue filter). */\nexport type TemplatePurpose = \"convince\" | \"explain\" | \"show\" | \"act\" | \"operate\" | \"converse\" | \"recover\";\n\n/** The groups of templates, in reading order: the title, and the one line that says when to come to that group. */\nexport const templatePurposes = {\n  convince: { title: \"Convince\", useWhen: \"You come here when a visitor must decide: a landing, a product, a price, a comparison, a proof.\" },\n  explain: { title: \"Explain\", useWhen: \"You come here when a reader must understand: how it works, a documentation hub or article, a changelog, a FAQ, a policy.\" },\n  show: { title: \"Show\", useWhen: \"You come here when the work itself is the argument: a gallery, a story, a case study, an object and its details.\" },\n  act: { title: \"Act\", useWhen: \"You come here when a person must do something once: reach the team, sign in or up, set up, pay.\" },\n  operate: { title: \"Operate\", useWhen: \"You come here when a person works every day: a dashboard, a console with a table, settings, an app shell.\" },\n  converse: { title: \"Converse\", useWhen: \"You come here when people talk: an inbox, a chat, comments, a notifications centre.\" },\n  recover: { title: \"Recover\", useWhen: \"You come here when the way is blocked: an empty list, an error, a missing page, maintenance, a product still being built.\" },\n} as const satisfies Record<TemplatePurpose, { readonly title: string; readonly useWhen: string }>;\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 */\ninterface ExampleBase {\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/** A plain example, or a template: a whole screen with its intent (`purpose`) and the user goal its layout serves (`why`). */\nexport type Example =\n  | (ExampleBase & { readonly template?: false; readonly purpose?: undefined; readonly why?: undefined })\n  | (ExampleBase & {\n      /**\n       * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its\n       * phone version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n       */\n      readonly template: true;\n      /** The intent that groups it: why you need this block. */\n      readonly purpose: TemplatePurpose;\n      /** Why this layout: the user goal it serves, in one sentence. */\n      readonly why: 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  /** Required for, and only for, a `deprecated` component. */\n  readonly deprecated?: Deprecation;\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/loader.json

@@ -5,6 +5,7 @@
   "summary": "A wait from start to end: nothing for the first instants, then the Krizaka glyph with its words, a percentage and an ETA, held long enough to read, ending on a check or a cross that is drawn and announced — and `LoadingRegion`, which hands a region over to a skeleton of its shape.",
   "description": "A wait from start to end: nothing for the first instants, then the Krizaka glyph with its words, a percentage and an ETA, held long enough to read, ending on a check or a cross that is drawn and announced — and `LoadingRegion`, which hands a region over to a skeleton of its shape.",
   "status": "beta",
+  "deprecated": null,
   "category": "feedback",
   "platforms": "both",
   "whenToUse": [
@@ -29,6 +30,7 @@
   ],
   "bestPractices": [
     "Say what is loading (“Loading your invoices”), not “Loading…”; say how it ended with `successLabel` / `errorLabel`.",
+    "Brand it in a product: `mark={<OrochiaLogo animated />}` (web) or `product=\"orochia\"` (native) — the mark replaces the glyph, never the words.",
     "Keep the defaults: 250 ms of delay, 600 ms at least once shown — the two numbers that stop flicker.",
     "Give an `eta` when you can estimate it (format durations with `@krizaka/intl`): a known wait feels shorter.",
     "With `LoadingRegion`, draw the skeleton the shape of the content: nothing moves when it arrives."
@@ -90,6 +92,13 @@
             "description": "The time left, in words (“About 20 s left”) — passed translated (`@krizaka/intl` formats durations).",
             "required": false
           },
+          {
+            "name": "mark",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The product's mark in place of the Krizaka glyph while it waits — `<OrochiaLogo animated />` (or `ProductLogo`) of\n`@krizaka/ui`; it takes the loader's size. The ending (check or cross) stays the glyph's. Decorative: leave `title` off.",
+            "required": false
+          },
           {
             "name": "minDuration",
             "type": "number",
@@ -231,6 +240,14 @@
         "path": "examples/loader/minimal.tsx",
         "module": "@krizaka/ui/registry/examples/loader/minimal",
         "code": "import { Loader } from \"@krizaka/ui/loader\";\n\n// The minimal API: a label. It appears after 250 ms and stays at least 600 ms once shown.\nexport default function LoaderMinimal() {\n  return <Loader label=\"Loading\" delay={0} />;\n}\n"
+      },
+      {
+        "name": "branded",
+        "title": "The product's mark",
+        "description": "`mark`: Orochia's animated mark in place of the Krizaka glyph; the ending stays the check.",
+        "path": "examples/loader/branded.tsx",
+        "module": "@krizaka/ui/registry/examples/loader/branded",
+        "code": "import { OrochiaLogo } from \"@krizaka/ui\";\nimport { Loader } from \"@krizaka/ui/loader\";\n\n// The product's mark in place of the Krizaka glyph: Orochia waits with its own animated mark. Words, delay and ending stay.\nexport default function LoaderBranded() {\n  return <Loader label=\"Loading your videos\" delay={0} variant=\"block\" mark={<OrochiaLogo animated />} />;\n}\n"
       }
     ]
   },
@@ -238,6 +255,7 @@
     "entry": "@krizaka/ui/native",
     "import": "import { Loader, LoaderGlyph, useDelayedWait } from \"@krizaka/ui/native\";",
     "differences": [
+      "`product` (`orochia`, `orazaka`, `yazakia`, `yororis`, `krizaka`) draws the product's animated `ProductMark`; on the web it is the `mark` slot.",
       "Announced with the platform's announcement (and a polite live region) instead of `role=\"status\"`.",
       "No `LoadingRegion`: lists show their own skeleton rows (`List loading`).",
       "`overlay` and `page` cover their parent with the theme's surface at 90 %; no backdrop blur."
@@ -323,6 +341,13 @@
             "description": "Once shown, the least milliseconds it stays. Default 600.",
             "required": false
           },
+          {
+            "name": "product",
+            "type": "BrandId",
+            "default": null,
+            "description": "The product whose animated mark waits in place of the Krizaka glyph (`orochia`, `orazaka`, `yazakia`, `yororis`,\n`krizaka`). Still when the system reduces motion; the ending stays the check or the cross.",
+            "required": false
+          },
           {
             "name": "status",
             "type": "\"success\" | \"loading\" | \"error\"",
@@ -385,6 +410,18 @@
           "dark": "examples/loader/native/block.dark.png",
           "light": "examples/loader/native/block.light.png"
         }
+      },
+      {
+        "name": "branded",
+        "title": "The product's mark",
+        "description": "`product`: the animated mark of the app waits for you, still under reduced motion.",
+        "path": "examples/loader/native/branded.tsx",
+        "module": "@krizaka/ui/registry/examples/loader/native/branded",
+        "code": "import { Loader } from \"@krizaka/ui/native\";\nimport { View } from \"react-native\";\n\n// The app's own mark waits for you: the animated `ProductMark` of Orochia, still when the system reduces motion.\nexport default function NativeLoaderBranded() {\n  return (\n    <View style={{ width: 340 }}>\n      <Loader label=\"Loading your videos\" product=\"orochia\" variant=\"block\" delay={0} />\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/loader/native/branded.dark.png",
+          "light": "examples/loader/native/branded.light.png"
+        }
       }
     ]
   },
@@ -395,15 +432,15 @@
     },
     {
       "path": "loader/loader.tsx",
-      "content": "// Client (timers). The whole life of a wait, done right once: nothing for the first instants (a fast answer never\n// flashes a spinner), then the Krizaka glyph with its words and an ETA, held long enough to be read, ending on a\n// check or a cross that is drawn and announced. `LoadingRegion` hands a region over from its content to a skeleton of\n// the same shape, then to words when the wait grows long, then back to the content.\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport const loader = tv({\n  slots: {\n    root: \"text-fg-secondary\",\n    box: \"kz-fade flex items-center gap-3\",\n    glyph: \"shrink-0 text-accent\",\n    text: \"flex min-w-0 flex-col\",\n    label: \"font-medium text-fg\",\n    detail: \"text-xs text-fg-secondary tabular-nums\",\n  },\n  variants: {\n    variant: {\n      inline: { box: \"text-sm\", glyph: \"h-5 w-5\" },\n      block: { box: \"flex-col justify-center py-10 text-center text-sm\", glyph: \"h-9 w-9\", text: \"items-center\" },\n      overlay: {\n        root: \"absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] empty:hidden\",\n        box: \"flex-col rounded-xl border border-border-default bg-surface-1/90 px-6 py-5 text-center text-sm shadow-lg backdrop-blur-sm\",\n        glyph: \"h-9 w-9\",\n        text: \"items-center\",\n      },\n      page: {\n        root: \"fixed inset-0 z-50 flex items-center justify-center bg-surface-0/80 backdrop-blur-sm empty:hidden\",\n        box: \"flex-col text-center\",\n        glyph: \"h-14 w-14\",\n        text: \"items-center\",\n        label: \"font-display text-lg\",\n      },\n    },\n    ended: {\n      success: { glyph: \"text-fg-success\" },\n      error: { glyph: \"text-fg-danger\" },\n    },\n  },\n  defaultVariants: { variant: \"inline\" },\n});\n\nexport type LoaderVariants = VariantProps<typeof loader>;\n\n/**\n * `true` once `active` has lasted `delay` ms; then stays `true` at least `minDuration` ms — a wait that ends early never\n * shows, one that shows never blinks.\n */\nexport function useDelayedWait(active: boolean, delay = 250, minDuration = 600): boolean {\n  const [shown, setShown] = React.useState(false);\n  const since = React.useRef(0);\n  React.useEffect(() => {\n    if (active === shown) return;\n    const wait = active ? delay : Math.max(0, minDuration - (Date.now() - since.current));\n    const timer = setTimeout(() => {\n      since.current = Date.now();\n      setShown(active);\n    }, wait);\n    return () => clearTimeout(timer);\n  }, [active, shown, delay, minDuration]);\n  return shown;\n}\n\nexport interface LoaderProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** What is loading, in words (“Loading your invoices”) — passed translated; shown and announced. */\n  label: string;\n  /**\n   * loading · success · error. When the wait ends, the loader shows how it ended for `endDuration` ms, then disappears.\n   * @default \"loading\"\n   */\n  status?: \"loading\" | \"success\" | \"error\";\n  /** The words of a success (“Invoices loaded”) — passed translated. Default: nothing more than the check. */\n  successLabel?: string;\n  /** The words of a failure (“Could not load the invoices”) — passed translated. */\n  errorLabel?: string;\n  /** Between 0 and 1: a determinate wait — the trace grows to it and the percentage shows. */\n  value?: number | null;\n  /** The time left, in words (“About 20 s left”) — passed translated (`@krizaka/intl` formats durations). */\n  eta?: string;\n  /**\n   * Milliseconds before anything shows: a wait shorter than this never flashes.\n   * @default 250\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds it stays: it never blinks.\n   * @default 600\n   */\n  minDuration?: number;\n  /**\n   * Milliseconds the ending (check or cross) stays before the loader disappears; `0` never shows it, `Infinity` keeps it.\n   * @default 1600\n   */\n  endDuration?: number;\n  /**\n   * inline (beside the content) · block (a region's centre) · overlay (over a `relative` parent, frosted) · page (the\n   * whole screen).\n   * @default \"inline\"\n   */\n  variant?: LoaderVariants[\"variant\"];\n}\n\n/**\n * A wait, from start to end. `role=\"status\"` (polite): its words are announced when it shows and when it ends. Under\n * prefers-reduced-motion the glyph rests on a still frame; the delay and the ending stay.\n */\nexport function Loader({\n  label,\n  status = \"loading\",\n  successLabel,\n  errorLabel,\n  value,\n  eta,\n  delay = 250,\n  minDuration = 600,\n  endDuration = 1600,\n  variant,\n  className,\n  ...props\n}: LoaderProps) {\n  const waiting = useDelayedWait(status === \"loading\", delay, minDuration);\n  // Rendered already ended (a result to show), it shows its ending; otherwise only a wait that was seen ends visibly.\n  const [ending, setEnding] = React.useState<\"success\" | \"error\" | null>(() => (status !== \"loading\" && endDuration > 0 ? status : null));\n  const wasWaiting = React.useRef(false);\n  React.useEffect(() => {\n    if (!Number.isFinite(endDuration)) return;\n    const hide = setTimeout(() => setEnding((e) => (wasWaiting.current ? e : null)), endDuration);\n    return () => clearTimeout(hide);\n    // Only the ending a loader was mounted with: later endings have their own timer below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  React.useEffect(() => {\n    if (waiting) {\n      wasWaiting.current = true;\n      return;\n    }\n    if (!wasWaiting.current || status === \"loading\") return;\n    wasWaiting.current = false;\n    const end = status;\n    const show = setTimeout(() => setEnding(endDuration > 0 ? end : null), 0);\n    const hide = Number.isFinite(endDuration) ? setTimeout(() => setEnding(null), endDuration) : undefined;\n    return () => {\n      clearTimeout(show);\n      clearTimeout(hide);\n    };\n  }, [waiting, status, endDuration]);\n\n  const phase = waiting ? \"loading\" : ending;\n  const s = loader({ variant, ended: phase === \"success\" || phase === \"error\" ? phase : undefined });\n  const known = phase === \"loading\" && typeof value === \"number\" && Number.isFinite(value);\n  const words = phase === \"success\" ? (successLabel ?? label) : phase === \"error\" ? (errorLabel ?? label) : label;\n  const detail = phase === \"loading\" ? [known ? `${Math.round(Math.min(1, Math.max(0, value)) * 100)} %` : null, eta].filter(Boolean).join(\" · \") : \"\";\n  return (\n    <div role=\"status\" aria-live=\"polite\" data-phase={phase ?? \"idle\"} className={s.root({ className })} {...props}>\n      {phase && (\n        <div className={s.box()}>\n          <LoaderGlyph state={phase} value={known ? value : null} className={s.glyph()} />\n          <span className={s.text()}>\n            <span className={s.label()}>{words}</span>\n            {detail && <span className={s.detail()}>{detail}</span>}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface LoadingRegionProps extends React.ComponentProps<\"div\"> {\n  /** Whether the content is on its way. */\n  loading: boolean;\n  /** What stands in while it loads: skeletons the shape of the content (no layout shift when it arrives). */\n  skeleton: React.ReactNode;\n  /** What is loading, in words — passed translated; announced when the wait shows. */\n  label: string;\n  /** The words when the wait grows long (“Still loading — the server is busy”) — passed translated. */\n  slowLabel?: string;\n  /**\n   * Milliseconds of skeleton before the words of a long wait appear over it.\n   * @default 4000\n   */\n  slowAfter?: number;\n  /**\n   * Milliseconds before the skeleton shows: a fast answer goes straight to the content.\n   * @default 200\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds the skeleton stays.\n   * @default 500\n   */\n  minDuration?: number;\n}\n\n/**\n * A region that hands over: its content → (after `delay`) a skeleton of the same shape → (after `slowAfter`) words over\n * the skeleton → its content again, fading in. `aria-busy` while it waits; the wait is announced once.\n */\nexport function LoadingRegion({\n  loading,\n  skeleton,\n  label,\n  slowLabel,\n  slowAfter = 4000,\n  delay = 200,\n  minDuration = 500,\n  className,\n  children,\n  ...props\n}: LoadingRegionProps) {\n  const waiting = useDelayedWait(loading, delay, minDuration);\n  const slow = useDelayedWait(waiting && loading, slowAfter, 0);\n  const busy = loading || waiting;\n  return (\n    <div aria-busy={busy} data-phase={waiting ? (slow ? \"slow\" : \"skeleton\") : busy ? \"pending\" : \"ready\"} className={[\"relative\", className].filter(Boolean).join(\" \")} {...props}>\n      <span role=\"status\" className=\"sr-only\">\n        {waiting ? (slow ? (slowLabel ?? label) : label) : \"\"}\n      </span>\n      {waiting ? (\n        <div aria-hidden className=\"kz-fade\">\n          {skeleton}\n        </div>\n      ) : busy ? (\n        // Within the delay: the skeleton holds the place, invisible — nothing flashes, nothing jumps.\n        <div aria-hidden className=\"invisible\">\n          {skeleton}\n        </div>\n      ) : (\n        <div className=\"kz-fade\">{children}</div>\n      )}\n      {waiting && slow && <Loader label={slowLabel ?? label} variant=\"overlay\" delay={0} minDuration={0} endDuration={0} aria-live=\"off\" role=\"presentation\" />}\n    </div>\n  );\n}\n"
+      "content": "// Client (timers). The whole life of a wait, done right once: nothing for the first instants (a fast answer never\n// flashes a spinner), then the Krizaka glyph with its words and an ETA, held long enough to be read, ending on a\n// check or a cross that is drawn and announced. `LoadingRegion` hands a region over from its content to a skeleton of\n// the same shape, then to words when the wait grows long, then back to the content.\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { LoaderGlyph } from \"../spinner/glyph\";\n\nexport const loader = tv({\n  slots: {\n    root: \"text-fg-secondary\",\n    box: \"kz-fade flex items-center gap-3\",\n    glyph: \"shrink-0 text-accent\",\n    mark: \"block shrink-0 [&>svg]:block [&>svg]:h-full [&>svg]:w-full\",\n    text: \"flex min-w-0 flex-col\",\n    label: \"font-medium text-fg\",\n    detail: \"text-xs text-fg-secondary tabular-nums\",\n  },\n  variants: {\n    variant: {\n      inline: { box: \"text-sm\", glyph: \"h-5 w-5\", mark: \"h-5 w-5\" },\n      block: { box: \"flex-col justify-center py-10 text-center text-sm\", glyph: \"h-9 w-9\", mark: \"h-9 w-9\", text: \"items-center\" },\n      overlay: {\n        root: \"absolute inset-0 z-10 flex items-center justify-center rounded-[inherit] empty:hidden\",\n        box: \"flex-col rounded-xl border border-border-default bg-surface-1/90 px-6 py-5 text-center text-sm shadow-lg backdrop-blur-sm\",\n        glyph: \"h-9 w-9\", mark: \"h-9 w-9\",\n        text: \"items-center\",\n      },\n      page: {\n        root: \"fixed inset-0 z-50 flex items-center justify-center bg-surface-0/80 backdrop-blur-sm empty:hidden\",\n        box: \"flex-col text-center\",\n        glyph: \"h-14 w-14\", mark: \"h-14 w-14\",\n        text: \"items-center\",\n        label: \"font-display text-lg\",\n      },\n    },\n    ended: {\n      success: { glyph: \"text-fg-success\" },\n      error: { glyph: \"text-fg-danger\" },\n    },\n  },\n  defaultVariants: { variant: \"inline\" },\n});\n\nexport type LoaderVariants = VariantProps<typeof loader>;\n\n/**\n * `true` once `active` has lasted `delay` ms; then stays `true` at least `minDuration` ms — a wait that ends early never\n * shows, one that shows never blinks.\n */\nexport function useDelayedWait(active: boolean, delay = 250, minDuration = 600): boolean {\n  const [shown, setShown] = React.useState(false);\n  const since = React.useRef(0);\n  React.useEffect(() => {\n    if (active === shown) return;\n    const wait = active ? delay : Math.max(0, minDuration - (Date.now() - since.current));\n    const timer = setTimeout(() => {\n      since.current = Date.now();\n      setShown(active);\n    }, wait);\n    return () => clearTimeout(timer);\n  }, [active, shown, delay, minDuration]);\n  return shown;\n}\n\nexport interface LoaderProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /** What is loading, in words (“Loading your invoices”) — passed translated; shown and announced. */\n  label: string;\n  /**\n   * loading · success · error. When the wait ends, the loader shows how it ended for `endDuration` ms, then disappears.\n   * @default \"loading\"\n   */\n  status?: \"loading\" | \"success\" | \"error\";\n  /** The words of a success (“Invoices loaded”) — passed translated. Default: nothing more than the check. */\n  successLabel?: string;\n  /** The words of a failure (“Could not load the invoices”) — passed translated. */\n  errorLabel?: string;\n  /** Between 0 and 1: a determinate wait — the trace grows to it and the percentage shows. */\n  value?: number | null;\n  /** The time left, in words (“About 20 s left”) — passed translated (`@krizaka/intl` formats durations). */\n  eta?: string;\n  /**\n   * Milliseconds before anything shows: a wait shorter than this never flashes.\n   * @default 250\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds it stays: it never blinks.\n   * @default 600\n   */\n  minDuration?: number;\n  /**\n   * Milliseconds the ending (check or cross) stays before the loader disappears; `0` never shows it, `Infinity` keeps it.\n   * @default 1600\n   */\n  endDuration?: number;\n  /**\n   * inline (beside the content) · block (a region's centre) · overlay (over a `relative` parent, frosted) · page (the\n   * whole screen).\n   * @default \"inline\"\n   */\n  variant?: LoaderVariants[\"variant\"];\n  /**\n   * The product's mark in place of the Krizaka glyph while it waits — `<OrochiaLogo animated />` (or `ProductLogo`) of\n   * `@krizaka/ui`; it takes the loader's size. The ending (check or cross) stays the glyph's. Decorative: leave `title` off.\n   */\n  mark?: React.ReactNode;\n}\n\n/**\n * A wait, from start to end. `role=\"status\"` (polite): its words are announced when it shows and when it ends. Under\n * prefers-reduced-motion the glyph rests on a still frame; the delay and the ending stay.\n */\nexport function Loader({\n  label,\n  status = \"loading\",\n  successLabel,\n  errorLabel,\n  value,\n  eta,\n  delay = 250,\n  minDuration = 600,\n  endDuration = 1600,\n  variant,\n  mark,\n  className,\n  ...props\n}: LoaderProps) {\n  const waiting = useDelayedWait(status === \"loading\", delay, minDuration);\n  // Rendered already ended (a result to show), it shows its ending; otherwise only a wait that was seen ends visibly.\n  const [ending, setEnding] = React.useState<\"success\" | \"error\" | null>(() => (status !== \"loading\" && endDuration > 0 ? status : null));\n  const wasWaiting = React.useRef(false);\n  React.useEffect(() => {\n    if (!Number.isFinite(endDuration)) return;\n    const hide = setTimeout(() => setEnding((e) => (wasWaiting.current ? e : null)), endDuration);\n    return () => clearTimeout(hide);\n    // Only the ending a loader was mounted with: later endings have their own timer below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  React.useEffect(() => {\n    if (waiting) {\n      wasWaiting.current = true;\n      return;\n    }\n    if (!wasWaiting.current || status === \"loading\") return;\n    wasWaiting.current = false;\n    const end = status;\n    const show = setTimeout(() => setEnding(endDuration > 0 ? end : null), 0);\n    const hide = Number.isFinite(endDuration) ? setTimeout(() => setEnding(null), endDuration) : undefined;\n    return () => {\n      clearTimeout(show);\n      clearTimeout(hide);\n    };\n  }, [waiting, status, endDuration]);\n\n  const phase = waiting ? \"loading\" : ending;\n  const s = loader({ variant, ended: phase === \"success\" || phase === \"error\" ? phase : undefined });\n  const known = phase === \"loading\" && typeof value === \"number\" && Number.isFinite(value);\n  const words = phase === \"success\" ? (successLabel ?? label) : phase === \"error\" ? (errorLabel ?? label) : label;\n  const detail = phase === \"loading\" ? [known ? `${Math.round(Math.min(1, Math.max(0, value)) * 100)} %` : null, eta].filter(Boolean).join(\" · \") : \"\";\n  return (\n    <div role=\"status\" aria-live=\"polite\" data-phase={phase ?? \"idle\"} className={s.root({ className })} {...props}>\n      {phase && (\n        <div className={s.box()}>\n          {mark && phase === \"loading\" ? (\n            <span aria-hidden className={s.mark()} data-mark=\"\">\n              {mark}\n            </span>\n          ) : (\n            <LoaderGlyph state={phase} value={known ? value : null} className={s.glyph()} />\n          )}\n          <span className={s.text()}>\n            <span className={s.label()}>{words}</span>\n            {detail && <span className={s.detail()}>{detail}</span>}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface LoadingRegionProps extends React.ComponentProps<\"div\"> {\n  /** Whether the content is on its way. */\n  loading: boolean;\n  /** What stands in while it loads: skeletons the shape of the content (no layout shift when it arrives). */\n  skeleton: React.ReactNode;\n  /** What is loading, in words — passed translated; announced when the wait shows. */\n  label: string;\n  /** The words when the wait grows long (“Still loading — the server is busy”) — passed translated. */\n  slowLabel?: string;\n  /**\n   * Milliseconds of skeleton before the words of a long wait appear over it.\n   * @default 4000\n   */\n  slowAfter?: number;\n  /**\n   * Milliseconds before the skeleton shows: a fast answer goes straight to the content.\n   * @default 200\n   */\n  delay?: number;\n  /**\n   * Once shown, the least milliseconds the skeleton stays.\n   * @default 500\n   */\n  minDuration?: number;\n}\n\n/**\n * A region that hands over: its content → (after `delay`) a skeleton of the same shape → (after `slowAfter`) words over\n * the skeleton → its content again, fading in. `aria-busy` while it waits; the wait is announced once.\n */\nexport function LoadingRegion({\n  loading,\n  skeleton,\n  label,\n  slowLabel,\n  slowAfter = 4000,\n  delay = 200,\n  minDuration = 500,\n  className,\n  children,\n  ...props\n}: LoadingRegionProps) {\n  const waiting = useDelayedWait(loading, delay, minDuration);\n  const slow = useDelayedWait(waiting && loading, slowAfter, 0);\n  const busy = loading || waiting;\n  return (\n    <div aria-busy={busy} data-phase={waiting ? (slow ? \"slow\" : \"skeleton\") : busy ? \"pending\" : \"ready\"} className={[\"relative\", className].filter(Boolean).join(\" \")} {...props}>\n      <span role=\"status\" className=\"sr-only\">\n        {waiting ? (slow ? (slowLabel ?? label) : label) : \"\"}\n      </span>\n      {waiting ? (\n        <div aria-hidden className=\"kz-fade\">\n          {skeleton}\n        </div>\n      ) : busy ? (\n        // Within the delay: the skeleton holds the place, invisible — nothing flashes, nothing jumps.\n        <div aria-hidden className=\"invisible\">\n          {skeleton}\n        </div>\n      ) : (\n        <div className=\"kz-fade\">{children}</div>\n      )}\n      {waiting && slow && <Loader label={slowLabel ?? label} variant=\"overlay\" delay={0} minDuration={0} endDuration={0} aria-live=\"off\" role=\"presentation\" />}\n    </div>\n  );\n}\n"
     },
     {
       "path": "loader/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Loader\",\n  summary:\n    \"A wait from start to end: nothing for the first instants, then the Krizaka glyph with its words, a percentage and an ETA, held long enough to read, ending on a check or a cross that is drawn and announced — and `LoadingRegion`, which hands a region over to a skeleton of its shape.\",\n  status: \"beta\",\n  category: \"feedback\",\n  platforms: \"both\",\n  whenToUse: [\n    \"Any wait whose length you do not control (a fetch, a refresh): the delay keeps fast answers from flashing a spinner.\",\n    \"A wait that ends in a result worth saying — “12 invoices loaded”, “Could not publish”.\",\n    \"Over a region that stays readable while it refreshes (`variant=\\\"overlay\\\"`), or over the whole screen at start-up (`page`).\",\n    \"`LoadingRegion` for a card, a list or a panel: a skeleton of its shape while it loads, words when it lasts.\",\n  ],\n  whenNotToUse: [\n    { when: \"Inside the button that started the action: the button draws the same glyph.\", use: \"button\" },\n    { when: \"For a long task with steps or a known size the user follows.\", use: \"progress\" },\n    { when: \"A tiny wait glyph with nothing else.\", use: \"spinner\" },\n  ],\n  bestPractices: [\n    \"Say what is loading (“Loading your invoices”), not “Loading…”; say how it ended with `successLabel` / `errorLabel`.\",\n    \"Keep the defaults: 250 ms of delay, 600 ms at least once shown — the two numbers that stop flicker.\",\n    \"Give an `eta` when you can estimate it (format durations with `@krizaka/intl`): a known wait feels shorter.\",\n    \"With `LoadingRegion`, draw the skeleton the shape of the content: nothing moves when it arrives.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"`role=\\\"status\\\"` (polite) is present from the first render, so its words are announced when the wait shows and again when it ends.\",\n      \"`LoadingRegion` sets `aria-busy` on the region while it waits; the skeleton is hidden from assistive technology and the wait is announced once.\",\n      \"Under `prefers-reduced-motion` the glyph rests on a still frame and endings do not animate; the delay, the words and the announcements stay.\",\n    ],\n  },\n  related: [\"spinner\", \"skeleton\", \"progress\", \"button\"],\n  web: {\n    imports: [\"Loader\", \"LoadingRegion\", \"useDelayedWait\"],\n    examples: [\n      { name: \"fetch-flow\", title: \"No flash, then a result\", description: \"A fast answer shows nothing; a slow one shows the wait, then “12 invoices loaded” with a check, then nothing.\" },\n      { name: \"region-handover\", title: \"Hand-over to a skeleton\", description: \"`LoadingRegion`: a skeleton of the card's shape, words when it lasts, the card fading in.\" },\n      { name: \"upload-eta\", title: \"Progress and ETA\", description: \"`value` and `eta`: the trace grows, the percentage and the time left read in tabular figures.\" },\n      { name: \"overlay\", title: \"Over a region\", description: \"`variant=\\\"overlay\\\"`: the report stays readable behind frosted glass while it refreshes.\" },\n      { name: \"endings\", title: \"Endings\", description: \"`status`: a success and a failure, drawn in their colour and said in words.\" },\n      { name: \"minimal\", title: \"Minimal\", description: \"A label, nothing else: the defaults do the rest.\" },\n    ],\n  },\n  native: {\n    imports: [\"Loader\", \"LoaderGlyph\", \"useDelayedWait\"],\n    differences: [\n      \"Announced with the platform's announcement (and a polite live region) instead of `role=\\\"status\\\"`.\",\n      \"No `LoadingRegion`: lists show their own skeleton rows (`List loading`).\",\n      \"`overlay` and `page` cover their parent with the theme's surface at 90 %; no backdrop blur.\",\n    ],\n    examples: [\n      { name: \"job-wait\", title: \"A job's wait\", description: \"Determinate, with the time left, ending on a check and its words.\" },\n      { name: \"block\", title: \"Block\", description: \"The centre of a region whose content is on its way.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Loader\",\n  summary:\n    \"A wait from start to end: nothing for the first instants, then the Krizaka glyph with its words, a percentage and an ETA, held long enough to read, ending on a check or a cross that is drawn and announced — and `LoadingRegion`, which hands a region over to a skeleton of its shape.\",\n  status: \"beta\",\n  category: \"feedback\",\n  platforms: \"both\",\n  whenToUse: [\n    \"Any wait whose length you do not control (a fetch, a refresh): the delay keeps fast answers from flashing a spinner.\",\n    \"A wait that ends in a result worth saying — “12 invoices loaded”, “Could not publish”.\",\n    \"Over a region that stays readable while it refreshes (`variant=\\\"overlay\\\"`), or over the whole screen at start-up (`page`).\",\n    \"`LoadingRegion` for a card, a list or a panel: a skeleton of its shape while it loads, words when it lasts.\",\n  ],\n  whenNotToUse: [\n    { when: \"Inside the button that started the action: the button draws the same glyph.\", use: \"button\" },\n    { when: \"For a long task with steps or a known size the user follows.\", use: \"progress\" },\n    { when: \"A tiny wait glyph with nothing else.\", use: \"spinner\" },\n  ],\n  bestPractices: [\n    \"Say what is loading (“Loading your invoices”), not “Loading…”; say how it ended with `successLabel` / `errorLabel`.\",\n    \"Brand it in a product: `mark={<OrochiaLogo animated />}` (web) or `product=\\\"orochia\\\"` (native) — the mark replaces the glyph, never the words.\",\n    \"Keep the defaults: 250 ms of delay, 600 ms at least once shown — the two numbers that stop flicker.\",\n    \"Give an `eta` when you can estimate it (format durations with `@krizaka/intl`): a known wait feels shorter.\",\n    \"With `LoadingRegion`, draw the skeleton the shape of the content: nothing moves when it arrives.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"`role=\\\"status\\\"` (polite) is present from the first render, so its words are announced when the wait shows and again when it ends.\",\n      \"`LoadingRegion` sets `aria-busy` on the region while it waits; the skeleton is hidden from assistive technology and the wait is announced once.\",\n      \"Under `prefers-reduced-motion` the glyph rests on a still frame and endings do not animate; the delay, the words and the announcements stay.\",\n    ],\n  },\n  related: [\"spinner\", \"skeleton\", \"progress\", \"button\"],\n  web: {\n    imports: [\"Loader\", \"LoadingRegion\", \"useDelayedWait\"],\n    examples: [\n      { name: \"fetch-flow\", title: \"No flash, then a result\", description: \"A fast answer shows nothing; a slow one shows the wait, then “12 invoices loaded” with a check, then nothing.\" },\n      { name: \"region-handover\", title: \"Hand-over to a skeleton\", description: \"`LoadingRegion`: a skeleton of the card's shape, words when it lasts, the card fading in.\" },\n      { name: \"upload-eta\", title: \"Progress and ETA\", description: \"`value` and `eta`: the trace grows, the percentage and the time left read in tabular figures.\" },\n      { name: \"overlay\", title: \"Over a region\", description: \"`variant=\\\"overlay\\\"`: the report stays readable behind frosted glass while it refreshes.\" },\n      { name: \"endings\", title: \"Endings\", description: \"`status`: a success and a failure, drawn in their colour and said in words.\" },\n      { name: \"minimal\", title: \"Minimal\", description: \"A label, nothing else: the defaults do the rest.\" },\n      { name: \"branded\", title: \"The product's mark\", description: \"`mark`: Orochia's animated mark in place of the Krizaka glyph; the ending stays the check.\" },\n    ],\n  },\n  native: {\n    imports: [\"Loader\", \"LoaderGlyph\", \"useDelayedWait\"],\n    differences: [\n      \"`product` (`orochia`, `orazaka`, `yazakia`, `yororis`, `krizaka`) draws the product's animated `ProductMark`; on the web it is the `mark` slot.\",\n      \"Announced with the platform's announcement (and a polite live region) instead of `role=\\\"status\\\"`.\",\n      \"No `LoadingRegion`: lists show their own skeleton rows (`List loading`).\",\n      \"`overlay` and `page` cover their parent with the theme's surface at 90 %; no backdrop blur.\",\n    ],\n    examples: [\n      { name: \"job-wait\", title: \"A job's wait\", description: \"Determinate, with the time left, ending on a check and its words.\" },\n      { name: \"block\", title: \"Block\", description: \"The centre of a region whose content is on its way.\" },\n      { name: \"branded\", title: \"The product's mark\", description: \"`product`: the animated mark of the app waits for you, still under reduced motion.\" },\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  | \"activity-feed\"\n  | \"action-sheet\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"description-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"map\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+      "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  | \"activity-feed\"\n  | \"action-sheet\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"chat\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"description-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"map\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"match-dialog\"\n  | \"media-capture\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"photo-grid\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\n  | \"radio-group\"\n  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"skip-link\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"splash-handoff\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"step-progress\"\n  | \"stepper\"\n  | \"swipe-deck\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"tag-selector\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"verified-badge\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\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/**\n * `stable`: its API only changes in a major. `beta`: it may still change in a minor. `deprecated`: no product uses it and\n * no work plans to — it still works, says what replaces it, and goes in the major named by `deprecated.removedIn`.\n */\nexport type Status = \"stable\" | \"beta\" | \"deprecated\";\n\n/** What a deprecated component says (required when `status` is `deprecated`, absent otherwise). */\nexport interface Deprecation {\n  /** The version that deprecated it (`3.6.0`). */\n  readonly since: string;\n  /** The major that removes it (`4.0.0`). */\n  readonly removedIn: string;\n  /** What replaces it, when a component does. */\n  readonly use?: ComponentName;\n  /** Why it goes: no product uses it, no planned work needs it. */\n  readonly reason: string;\n}\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/** Why a reader needs a template: the seven intents the templates are grouped by (sidebar sub-headings, catalogue filter). */\nexport type TemplatePurpose = \"convince\" | \"explain\" | \"show\" | \"act\" | \"operate\" | \"converse\" | \"recover\";\n\n/** The groups of templates, in reading order: the title, and the one line that says when to come to that group. */\nexport const templatePurposes = {\n  convince: { title: \"Convince\", useWhen: \"You come here when a visitor must decide: a landing, a product, a price, a comparison, a proof.\" },\n  explain: { title: \"Explain\", useWhen: \"You come here when a reader must understand: how it works, a documentation hub or article, a changelog, a FAQ, a policy.\" },\n  show: { title: \"Show\", useWhen: \"You come here when the work itself is the argument: a gallery, a story, a case study, an object and its details.\" },\n  act: { title: \"Act\", useWhen: \"You come here when a person must do something once: reach the team, sign in or up, set up, pay.\" },\n  operate: { title: \"Operate\", useWhen: \"You come here when a person works every day: a dashboard, a console with a table, settings, an app shell.\" },\n  converse: { title: \"Converse\", useWhen: \"You come here when people talk: an inbox, a chat, comments, a notifications centre.\" },\n  recover: { title: \"Recover\", useWhen: \"You come here when the way is blocked: an empty list, an error, a missing page, maintenance, a product still being built.\" },\n} as const satisfies Record<TemplatePurpose, { readonly title: string; readonly useWhen: string }>;\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 */\ninterface ExampleBase {\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/** A plain example, or a template: a whole screen with its intent (`purpose`) and the user goal its layout serves (`why`). */\nexport type Example =\n  | (ExampleBase & { readonly template?: false; readonly purpose?: undefined; readonly why?: undefined })\n  | (ExampleBase & {\n      /**\n       * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its\n       * phone version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n       */\n      readonly template: true;\n      /** The intent that groups it: why you need this block. */\n      readonly purpose: TemplatePurpose;\n      /** Why this layout: the user goal it serves, in one sentence. */\n      readonly why: 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  /** Required for, and only for, a `deprecated` component. */\n  readonly deprecated?: Deprecation;\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": [
@@ -456,6 +493,13 @@
           "description": "The time left, in words (“About 20 s left”) — passed translated (`@krizaka/intl` formats durations).",
           "required": false
         },
+        {
+          "name": "mark",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The product's mark in place of the Krizaka glyph while it waits — `<OrochiaLogo animated />` (or `ProductLogo`) of\n`@krizaka/ui`; it takes the loader's size. The ending (check or cross) stays the glyph's. Decorative: leave `title` off.",
+          "required": false
+        },
         {
           "name": "minDuration",
           "type": "number",

package/registry/longform-page.json

@@ -5,6 +5,7 @@
   "summary": "A long read — a story, an essay, a case: numbered chapters in a reading column, pull quotes in the margin, figures that break out.",
   "description": "A long read — a story, an essay, a case: numbered chapters in a reading column, pull quotes in the margin, figures that break out.",
   "status": "beta",
+  "deprecated": null,
   "category": "templates",
   "platforms": "web",
   "whenToUse": [
@@ -111,9 +112,22 @@
         "title": "Our story",
         "description": "Krizaka's story in chapters, a pull quote and the flamingo's rule.",
         "template": true,
+        "purpose": "show",
+        "why": "A reader follows a story in chapters, at their own pace, with a break for the key line.",
         "path": "examples/longform-page/story.tsx",
         "module": "@krizaka/ui/registry/examples/longform-page/story",
         "code": "import { LongformPage } from \"@krizaka/ui/longform-page\";\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\n\n// TEMPLATE — a long read (Krizaka's story): numbered chapters in a reading column, a sentence pulled into the margin,\n// a bird's quote breaking out under the text. Editorial, not cards; one column on a phone.\nexport default function LongformPageStory() {\n  return (\n    <LongformPage\n      eyebrow=\"Our story\"\n      title=\"Why a studio in Montréal builds its own AI\"\n      lead=\"Three products, one rule: what is yours stays yours.\"\n      aside={<Mascot bird=\"owl\" mood=\"welcome\" size={112} />}\n      chapters={[\n        {\n          id: \"start\",\n          title: \"It started with a lease\",\n          pull: \"The prompt crossed the ocean before the answer came back.\",\n          children: (\n            <>\n              <p>A notary asked a chatbot to summarise a lease. The answer was good; the lease was now on someone else's server.</p>\n              <p>We built Orazaka so that question never has to leave the office.</p>\n            </>\n          ),\n        },\n        {\n          id: \"creators\",\n          title: \"Then came the creators\",\n          children: <p>Orochia pays creators 90 % of what their fans spend, every Monday — no algorithm in between.</p>,\n          figure: <MascotQuote bird=\"flamingo\" label=\"The flamingo's rule\">Whoever does the work gets paid first.</MascotQuote>,\n        },\n      ]}\n    />\n  );\n}\n"
+      },
+      {
+        "name": "case-study",
+        "title": "Case study",
+        "description": "A customer's situation, what changed and the figures that prove it, in chapters.",
+        "template": true,
+        "purpose": "show",
+        "why": "A prospect trusts a result they can read: the before, the change, the proof in numbers.",
+        "path": "examples/longform-page/case-study.tsx",
+        "module": "@krizaka/ui/registry/examples/longform-page/case-study",
+        "code": "import { LongformPage } from \"@krizaka/ui/longform-page\";\nimport { Stat } from \"@krizaka/ui/stat\";\n\n// TEMPLATE — a case study (a notary's office on Orazaka): the situation, what was done, the figures that prove it. Chapters\n// in a reading column, the result as a figure that breaks out of the column; one column on a phone.\nexport default function LongformPageCaseStudy() {\n  return (\n    <LongformPage\n      brand=\"orazaka\"\n      eyebrow=\"Case study · Notary\"\n      title=\"Eleven leases a day, none of them leaving the office\"\n      lead=\"A four-person firm in Laval summarises contracts with its own AI, on its own server.\"\n      chapters={[\n        {\n          id: \"before\",\n          title: \"Before\",\n          pull: \"The summary took twenty minutes. The cloud tools took the lease with them.\",\n          children: <p>Each lease was read twice by hand. Pasting it into a public chatbot was faster, and not an option.</p>,\n        },\n        {\n          id: \"after\",\n          title: \"What changed\",\n          children: (\n            <>\n              <p>Orazaka runs on a Mac mini in the back room. A pack reads the lease and drafts the summary; the notary signs it.</p>\n              <p>Nothing is sent outside the building, and every request is logged for the audit.</p>\n            </>\n          ),\n          figure: (\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n              <Stat label=\"Per lease\" value=\"2 min\" trend=\"down\" trendLabel=\"was 20 min\" />\n              <Stat label=\"Sent outside\" value=\"0\" hint=\"all answered locally\" />\n              <Stat label=\"Hours a week\" value=\"14\" trend=\"up\" trendLabel=\"given back\" />\n            </div>\n          ),\n        },\n      ]}\n    />\n  );\n}\n"
       }
     ]
   },
@@ -129,11 +143,11 @@
     },
     {
       "path": "longform-page/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Longform page\",\n  summary: \"A long read — a story, an essay, a case: numbered chapters in a reading column, pull quotes in the margin, figures that break out.\",\n  status: \"beta\",\n  category: \"templates\",\n  platforms: \"web\",\n  whenToUse: [\"A company's story, a case study, an essay.\", \"Any text read from the top, chapter by chapter.\"],\n  whenNotToUse: [\n    { when: \"For a documentation article.\", use: \"docs-article-page\" },\n    { when: \"For a policy.\", use: \"legal-page\" },\n  ],\n  bestPractices: [\"Chapters of three to six paragraphs; one pull quote at most each.\", \"Figures carry a promise (a bird's quote, a schema), never decoration.\", \"Words and content arrive as props; the motion is the platform's (`[data-reveal]`, still under reduced motion).\"],\n  accessibility: {\n    keyboard: [],\n    notes: [\"Each chapter is a `section` named by its `h2`; the numbers are decorative.\", \"The pull quote repeats the text: it adds nothing a reader would miss.\"],\n  },\n  related: [\"mascot-quote\", \"page-hero\", \"legal-page\"],\n  web: {\n    imports: [\"LongformPage\"],\n    examples: [\n      { name: \"story\", title: \"Our story\", description: \"Krizaka's story in chapters, a pull quote and the flamingo's rule.\", template: true },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Longform page\",\n  summary: \"A long read — a story, an essay, a case: numbered chapters in a reading column, pull quotes in the margin, figures that break out.\",\n  status: \"beta\",\n  category: \"templates\",\n  platforms: \"web\",\n  whenToUse: [\"A company's story, a case study, an essay.\", \"Any text read from the top, chapter by chapter.\"],\n  whenNotToUse: [\n    { when: \"For a documentation article.\", use: \"docs-article-page\" },\n    { when: \"For a policy.\", use: \"legal-page\" },\n  ],\n  bestPractices: [\"Chapters of three to six paragraphs; one pull quote at most each.\", \"Figures carry a promise (a bird's quote, a schema), never decoration.\", \"Words and content arrive as props; the motion is the platform's (`[data-reveal]`, still under reduced motion).\"],\n  accessibility: {\n    keyboard: [],\n    notes: [\"Each chapter is a `section` named by its `h2`; the numbers are decorative.\", \"The pull quote repeats the text: it adds nothing a reader would miss.\"],\n  },\n  related: [\"mascot-quote\", \"page-hero\", \"legal-page\"],\n  web: {\n    imports: [\"LongformPage\"],\n    examples: [\n      { name: \"story\", title: \"Our story\", description: \"Krizaka's story in chapters, a pull quote and the flamingo's rule.\", template: true, purpose: \"show\", why: \"A reader follows a story in chapters, at their own pace, with a break for the key line.\" },\n      { name: \"case-study\", title: \"Case study\", description: \"A customer's situation, what changed and the figures that prove it, in chapters.\", template: true, purpose: \"show\", why: \"A prospect trusts a result they can read: the before, the change, the proof in numbers.\" },\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  | \"activity-feed\"\n  | \"action-sheet\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"description-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"map\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+      "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  | \"activity-feed\"\n  | \"action-sheet\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"chat\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"description-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"map\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"match-dialog\"\n  | \"media-capture\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"photo-grid\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\n  | \"radio-group\"\n  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"skip-link\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"splash-handoff\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"step-progress\"\n  | \"stepper\"\n  | \"swipe-deck\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"tag-selector\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"verified-badge\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\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/**\n * `stable`: its API only changes in a major. `beta`: it may still change in a minor. `deprecated`: no product uses it and\n * no work plans to — it still works, says what replaces it, and goes in the major named by `deprecated.removedIn`.\n */\nexport type Status = \"stable\" | \"beta\" | \"deprecated\";\n\n/** What a deprecated component says (required when `status` is `deprecated`, absent otherwise). */\nexport interface Deprecation {\n  /** The version that deprecated it (`3.6.0`). */\n  readonly since: string;\n  /** The major that removes it (`4.0.0`). */\n  readonly removedIn: string;\n  /** What replaces it, when a component does. */\n  readonly use?: ComponentName;\n  /** Why it goes: no product uses it, no planned work needs it. */\n  readonly reason: string;\n}\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/** Why a reader needs a template: the seven intents the templates are grouped by (sidebar sub-headings, catalogue filter). */\nexport type TemplatePurpose = \"convince\" | \"explain\" | \"show\" | \"act\" | \"operate\" | \"converse\" | \"recover\";\n\n/** The groups of templates, in reading order: the title, and the one line that says when to come to that group. */\nexport const templatePurposes = {\n  convince: { title: \"Convince\", useWhen: \"You come here when a visitor must decide: a landing, a product, a price, a comparison, a proof.\" },\n  explain: { title: \"Explain\", useWhen: \"You come here when a reader must understand: how it works, a documentation hub or article, a changelog, a FAQ, a policy.\" },\n  show: { title: \"Show\", useWhen: \"You come here when the work itself is the argument: a gallery, a story, a case study, an object and its details.\" },\n  act: { title: \"Act\", useWhen: \"You come here when a person must do something once: reach the team, sign in or up, set up, pay.\" },\n  operate: { title: \"Operate\", useWhen: \"You come here when a person works every day: a dashboard, a console with a table, settings, an app shell.\" },\n  converse: { title: \"Converse\", useWhen: \"You come here when people talk: an inbox, a chat, comments, a notifications centre.\" },\n  recover: { title: \"Recover\", useWhen: \"You come here when the way is blocked: an empty list, an error, a missing page, maintenance, a product still being built.\" },\n} as const satisfies Record<TemplatePurpose, { readonly title: string; readonly useWhen: string }>;\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 */\ninterface ExampleBase {\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/** A plain example, or a template: a whole screen with its intent (`purpose`) and the user goal its layout serves (`why`). */\nexport type Example =\n  | (ExampleBase & { readonly template?: false; readonly purpose?: undefined; readonly why?: undefined })\n  | (ExampleBase & {\n      /**\n       * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its\n       * phone version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n       */\n      readonly template: true;\n      /** The intent that groups it: why you need this block. */\n      readonly purpose: TemplatePurpose;\n      /** Why this layout: the user goal it serves, in one sentence. */\n      readonly why: 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  /** Required for, and only for, a `deprecated` component. */\n  readonly deprecated?: Deprecation;\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": [],