@krizaka/ui 3.51.0 → 3.53.0

package/registry/text-style.json

@@ -0,0 +1,378 @@
+{
+  "name": "text-style",
+  "type": "primitive",
+  "title": "Text style",
+  "summary": "The look of one text role chosen by a person — font, size, weight, spacing, alignment, case, italic and tone — as a plain value the app stores, a live preview, and the same value drawn safely by `StyledText`.",
+  "description": "The look of one text role chosen by a person — font, size, weight, spacing, alignment, case, italic and tone — as a plain value the app stores, a live preview, and the same value drawn safely by `StyledText`.",
+  "status": "beta",
+  "deprecated": null,
+  "category": "forms",
+  "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "gap",
+      "reason": "A shop owner styles the storefront's text from a computer; the native picker is a follow-up when a mobile admin needs it. `StyledText`'s value is the same on a phone.",
+      "issue": "krizaka/krizaka-ui#561"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
+  "whenToUse": [
+    "A person sets the look of a title, a text or a price that the app then draws: a shop's storefront, a product's theme settings.",
+    "In a popover from a toolbar (`compact`), or reduced to a few controls (`fields`)."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For bold, links or colours inside a paragraph: this styles a whole text role, it is not a rich-text editor."
+    },
+    {
+      "when": "For one number chosen by feel, such as a volume.",
+      "use": "slider"
+    },
+    {
+      "when": "For a few named options that are not a text's look.",
+      "use": "radio-group"
+    }
+  ],
+  "bestPractices": [
+    "Store the value as it is and draw it with `StyledText` or `textStyleProps`; re-validate what a server receives with `parseTextStyle`.",
+    "Pass `previewText` with the text people will actually read, and `role=\"title\"` for a heading so a small size is not flagged.",
+    "Give the host's own `presets` (« Titre », « Sous-titre », « Texte », « Prix ») as data, translated.",
+    "Pass `surface` when the text sits on a colour the page cannot tell the picker about.",
+    "The warnings advise, they never change the value: let the person decide."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Tab",
+        "action": "Move from one control to the next."
+      },
+      {
+        "keys": "Arrow keys",
+        "action": "Choose within a font, weight, spacing, alignment, case or tone group; move the size slider by a step."
+      },
+      {
+        "keys": "Space",
+        "action": "Toggle italic; press a preset."
+      }
+    ],
+    "notes": [
+      "Every control is named by a visible label; the tones are named swatches (a radio group), never a colour alone.",
+      "The contrast of the tone against the surface is measured on the preview and warned under 4.5:1 for body text, 3:1 for large text; a body size under `minBodySize` is warned too. Warnings are announced politely.",
+      "On a phone the controls stack in one column; the primitives honour reduced motion."
+    ]
+  },
+  "related": [
+    "slider",
+    "radio-group",
+    "switch",
+    "popover"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/text-style",
+    "import": "import { TextStylePicker, StyledText, textStyleProps, parseTextStyle, textStyleLabelsFr } from \"@krizaka/ui/text-style\";",
+    "props": [
+      {
+        "component": "StyledText",
+        "description": "A text role drawn from a `TextStyle`: its font, size, weight, spacing, alignment, case and tone, all from CSS variables.",
+        "props": [
+          {
+            "name": "as",
+            "type": "ElementType<any, keyof IntrinsicElements>",
+            "default": null,
+            "description": "The element drawn: `h1`…`h6`, `p`, `span`, `div`.",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Merged after the style's own class.",
+            "required": false
+          },
+          {
+            "name": "value",
+            "type": "unknown",
+            "default": null,
+            "description": "The stored text style — validated here: anything invalid draws the default.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "TextStylePicker",
+        "description": "The control of a text style: font, size, weight, spacing, alignment, case, italic and tone, with a live preview.",
+        "props": [
+          {
+            "name": "onChange",
+            "type": "(value: TextStyle) => void",
+            "default": null,
+            "description": "Called with the whole new text style at each change.",
+            "required": true
+          },
+          {
+            "name": "previewText",
+            "type": "string",
+            "default": null,
+            "description": "The sample the preview shows, passed translated (\"Boulangerie Martin\").",
+            "required": true
+          },
+          {
+            "name": "value",
+            "type": "TextStyle",
+            "default": null,
+            "description": "The text style, controlled. Validated by `parseTextStyle`: anything invalid shows the default.",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Merged last on the root.",
+            "required": false
+          },
+          {
+            "name": "compact",
+            "type": "boolean",
+            "default": null,
+            "description": "A denser form for a popover from a toolbar.",
+            "required": false
+          },
+          {
+            "name": "fields",
+            "type": "readonly (\"size\" | \"leading\" | \"tone\" | \"align\" | \"weight\" | \"font\" | \"tracking\" | \"case\" | \"italic\")[]",
+            "default": "[\"font\", \"size\", \"weight\", \"leading\", \"tracking\", \"align\", \"case\", \"italic\", \"tone\"] as const",
+            "description": "The controls to show, in the order of `textStyleFields` (just `[\"font\", \"size\"]`). A preset then changes only these.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<TextStyleLabels>",
+            "default": null,
+            "description": "The words, passed translated: `textStyleLabels` (EN) or `textStyleLabelsFr`, or the host's own.",
+            "required": false
+          },
+          {
+            "name": "minBodySize",
+            "type": "\"sm\" | \"md\" | \"lg\" | \"xs\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\"",
+            "default": "sm",
+            "description": "The smallest step advised for body text: under it, a warning shows — the size is never forced.",
+            "required": false
+          },
+          {
+            "name": "presets",
+            "type": "readonly TextStylePreset[]",
+            "default": null,
+            "description": "Styles the person can start from, as data.",
+            "required": false
+          },
+          {
+            "name": "role",
+            "type": "\"body\" | \"title\"",
+            "default": "body",
+            "description": "What the text is for: `body` (reading text, which `minBodySize` guards) or `title` (a heading, which may be small).",
+            "required": false
+          },
+          {
+            "name": "surface",
+            "type": "string",
+            "default": null,
+            "description": "The colour the text will sit on, for the preview and the contrast check (a CSS colour). By default the page's own surface.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "storefront-title",
+        "title": "Storefront title",
+        "description": "A shop owner styles the shop's title, starting from presets.",
+        "path": "examples/text-style/storefront-title.tsx",
+        "module": "@krizaka/ui/registry/examples/text-style/storefront-title",
+        "code": "import { type TextStyle, TextStylePicker } from \"@krizaka/ui/text-style\";\nimport { useState } from \"react\";\n\n// A shop owner sets the look of the shop's title; the app stores `value` as it is and draws it with `StyledText`.\nexport default function TextStyleStorefrontTitle() {\n  const [value, setValue] = useState<TextStyle>({\n    font: \"display\", size: \"3xl\", weight: 400, leading: \"tight\", tracking: \"normal\", align: \"center\", case: \"none\", italic: false, tone: \"primary\",\n  });\n  return (\n    <TextStylePicker\n      value={value}\n      onChange={setValue}\n      previewText=\"Boulangerie Martin\"\n      role=\"title\"\n      presets={[\n        { id: \"title\", label: \"Title\", value: { font: \"display\", size: \"3xl\", align: \"center\" } },\n        { id: \"subtitle\", label: \"Subtitle\", value: { font: \"text\", size: \"xl\", weight: 600 } },\n        { id: \"text\", label: \"Text\", value: { font: \"text\", size: \"md\" } },\n      ]}\n    />\n  );\n}\n"
+      },
+      {
+        "name": "product-price",
+        "title": "Product price",
+        "description": "Only font, size, weight and tone, and the stored value drawn by `StyledText`.",
+        "path": "examples/text-style/product-price.tsx",
+        "module": "@krizaka/ui/registry/examples/text-style/product-price",
+        "code": "import { StyledText, type TextStyle, TextStylePicker } from \"@krizaka/ui/text-style\";\nimport { useState } from \"react\";\n\n// Only the controls a price needs, and the stored value drawn where the price shows.\nexport default function TextStyleProductPrice() {\n  const [value, setValue] = useState<TextStyle>({\n    font: \"mono\", size: \"2xl\", weight: 700, leading: \"normal\", tracking: \"normal\", align: \"start\", case: \"none\", italic: false, tone: \"accent\",\n  });\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <TextStylePicker value={value} onChange={setValue} previewText=\"12,50 €\" fields={[\"font\", \"size\", \"weight\", \"tone\"]} labels={{ picker: \"Price style\" }} />\n      <StyledText as=\"span\" value={value}>\n        12,50 €\n      </StyledText>\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "compact-toolbar",
+        "title": "Compact toolbar",
+        "description": "`compact` in a popover, in French, with two controls.",
+        "path": "examples/text-style/compact-toolbar.tsx",
+        "module": "@krizaka/ui/registry/examples/text-style/compact-toolbar",
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { Popover } from \"@krizaka/ui/popover\";\nimport { type TextStyle, textStyleLabelsFr,TextStylePicker } from \"@krizaka/ui/text-style\";\nimport { useState } from \"react\";\n\n// `compact` in a popover from a toolbar, with the French words and just two controls.\nexport default function TextStyleCompactToolbar({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  const [value, setValue] = useState<TextStyle>({\n    font: \"text\", size: \"md\", weight: 400, leading: \"normal\", tracking: \"normal\", align: \"start\", case: \"none\", italic: false, tone: \"primary\",\n  });\n  return (\n    <Popover.Root defaultOpen={defaultOpen}>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\">Aa</Button>\n      </Popover.Trigger>\n      <Popover.Content aria-label=\"Style du texte\" className=\"w-72\">\n        <TextStylePicker compact value={value} onChange={setValue} labels={textStyleLabelsFr} previewText=\"Pain au levain\" fields={[\"font\", \"size\"]} />\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [
+    {
+      "path": "cx.ts",
+      "content": "/** Joins class names, skipping the falsy ones. */\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n  return parts.filter(Boolean).join(\" \");\n}\n"
+    },
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which ui.krizaka.com (apps/site) renders as\n// ui.krizaka.com/components/<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  | \"agenda\"\n  | \"account-settings\"\n  | \"drop-overlay\"\n  | \"upload-queue\"\n  | \"achievement\"\n  | \"anatomy-plate\"\n  | \"bird-plate\"\n  | \"taped-photo\"\n  | \"text-style\"\n  | \"flock\"\n  | \"elephant\"\n  | \"footnote\"\n  | \"page-index\"\n  | \"chapter\"\n  | \"specimen-tag\"\n  | \"action-bar\"\n  | \"action-sheet\"\n  | \"activity-feed\"\n  | \"alert\"\n  | \"app-header\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"captcha\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"chat\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"chip-row\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"comparison-table\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cover-hero\"\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  | \"docs-nav\"\n  | \"document-viewer\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"engine-flow\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"force-update-screen\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"genui\"\n  | \"glossary\"\n  | \"glossary-term\"\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  | \"kpi-explained\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"maintenance-screen\"\n  | \"map\"\n  | \"markdown\"\n  | \"meta-row\"\n  | \"waveform\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"match-dialog\"\n  | \"media-capture\"\n  | \"media-grid\"\n  | \"language-switch\"\n  | \"media-gallery\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"opening-hours\"\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  | \"router\"\n  | \"rail-nav\"\n  | \"recipes\"\n  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"service-card\"\n  | \"settings-layout\"\n  | \"account-menu\"\n  | \"showcase\"\n  | \"step-showcase\"\n  | \"site-footer\"\n  | \"sites\"\n  | \"skeleton\"\n  | \"skip-link\"\n  | \"slider\"\n  | \"slot-picker\"\n  | \"slot\"\n  | \"spinner\"\n  | \"sticky-action\"\n  | \"splash-handoff\"\n  | \"split-view\"\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  | \"update-prompt\"\n  | \"verified-badge\"\n  | \"vertical-video\"\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 * Why a component is not on a platform — a decision, never a silence (the parity matrix of ui.krizaka.com/platforms):\n * - `gap` (✗): it belongs there and is not built yet; `issue` is the issue that tracks it (`krizaka/krizaka-ui#275`);\n * - `n/a`: it is not meant for that platform (a site's page block on a phone, a swipe on a desktop); `use` names the\n *   component that answers there, when one does.\n */\nexport type Absence =\n  | { readonly status: \"gap\"; readonly issue: string; readonly reason: string; readonly use?: undefined }\n  | { readonly status: \"n/a\"; readonly reason: string; readonly use?: ComponentName; readonly issue?: undefined };\n\n/**\n * Desktop is the Orazaka Mac app (Tauri 2: the system WebView renders the web components — ADR-002). `web`: the web\n * component runs there as it is; `desktop`: it also has a desktop form (a window's title bar, a denser layout…), said in\n * its documentation; otherwise the absence and why.\n */\nexport type DesktopSupport = \"web\" | \"desktop\" | Absence;\n\n/**\n * The three platforms of Krizaka UI — web · native (React Native, Expo) · desktop — for one component. The side a\n * component has is `platforms`; the side it lacks says why here: `native` is required for (and only for) a web-only\n * component, `web` for a native-only one; `desktop` always. `scripts/registry.test.mjs` fails on a missing decision.\n */\nexport interface Parity {\n  readonly web?: Absence;\n  readonly native?: Absence;\n  readonly desktop: DesktopSupport;\n}\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 ui.krizaka.com/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  /** The platforms it is not on, and why; and its desktop form (see `Parity`). */\n  readonly parity: Parity;\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"
+    },
+    {
+      "path": "text-style/index.ts",
+      "content": "/** @krizaka/ui/text-style — `TextStylePicker` (the control), `StyledText`, `textStyleProps`, `parseTextStyle` and the value's types. Client (\"use client\"); a server imports `@krizaka/ui/text-style/server`. */\nexport { StyledText, type StyledTextProps } from \"./styled-text\";\nexport {\n  type Align,\n  aligns,\n  bodyTextRatio,\n  type Case,\n  cases,\n  contrastRatio,\n  defaultTextStyle,\n  type FontId,\n  fontIds,\n  fontWeights,\n  isLargeText,\n  largeTextRatio,\n  type Leading,\n  leadings,\n  parseColor,\n  parseTextStyle,\n  requiredContrast,\n  type SizeStep,\n  sizeSteps,\n  type TextStyle,\n  textStyleProps,\n  type TextWeight,\n  textWeights,\n  type ToneId,\n  toneIds,\n  type Tracking,\n  trackings,\n} from \"./text-style\";\nexport { type TextStyleField, textStyleFields, type TextStyleLabels, textStyleLabels, textStyleLabelsFr, TextStylePicker, type TextStylePickerProps, type TextStylePreset } from \"./text-style-picker\";\n"
+    },
+    {
+      "path": "text-style/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Text style\",\n  summary: \"The look of one text role chosen by a person — font, size, weight, spacing, alignment, case, italic and tone — as a plain value the app stores, a live preview, and the same value drawn safely by `StyledText`.\",\n  status: \"beta\",\n  category: \"forms\",\n  platforms: \"web\",\n  parity: {\n    native: { status: \"gap\", issue: \"krizaka/krizaka-ui#561\", reason: \"A shop owner styles the storefront's text from a computer; the native picker is a follow-up when a mobile admin needs it. `StyledText`'s value is the same on a phone.\" },\n    desktop: \"web\",\n  },\n  whenToUse: [\n    \"A person sets the look of a title, a text or a price that the app then draws: a shop's storefront, a product's theme settings.\",\n    \"In a popover from a toolbar (`compact`), or reduced to a few controls (`fields`).\",\n  ],\n  whenNotToUse: [\n    { when: \"For bold, links or colours inside a paragraph: this styles a whole text role, it is not a rich-text editor.\" },\n    { when: \"For one number chosen by feel, such as a volume.\", use: \"slider\" },\n    { when: \"For a few named options that are not a text's look.\", use: \"radio-group\" },\n  ],\n  bestPractices: [\n    \"Store the value as it is and draw it with `StyledText` or `textStyleProps`; re-validate what a server receives with `parseTextStyle`.\",\n    \"Pass `previewText` with the text people will actually read, and `role=\\\"title\\\"` for a heading so a small size is not flagged.\",\n    \"Give the host's own `presets` (« Titre », « Sous-titre », « Texte », « Prix ») as data, translated.\",\n    \"Pass `surface` when the text sits on a colour the page cannot tell the picker about.\",\n    \"The warnings advise, they never change the value: let the person decide.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Tab\", action: \"Move from one control to the next.\" },\n      { keys: \"Arrow keys\", action: \"Choose within a font, weight, spacing, alignment, case or tone group; move the size slider by a step.\" },\n      { keys: \"Space\", action: \"Toggle italic; press a preset.\" },\n    ],\n    notes: [\n      \"Every control is named by a visible label; the tones are named swatches (a radio group), never a colour alone.\",\n      \"The contrast of the tone against the surface is measured on the preview and warned under 4.5:1 for body text, 3:1 for large text; a body size under `minBodySize` is warned too. Warnings are announced politely.\",\n      \"On a phone the controls stack in one column; the primitives honour reduced motion.\",\n    ],\n  },\n  related: [\"slider\", \"radio-group\", \"switch\", \"popover\"],\n  web: {\n    imports: [\"TextStylePicker\", \"StyledText\", \"textStyleProps\", \"parseTextStyle\", \"textStyleLabelsFr\"],\n    examples: [\n      { name: \"storefront-title\", title: \"Storefront title\", description: \"A shop owner styles the shop's title, starting from presets.\" },\n      { name: \"product-price\", title: \"Product price\", description: \"Only font, size, weight and tone, and the stored value drawn by `StyledText`.\" },\n      { name: \"compact-toolbar\", title: \"Compact toolbar\", description: \"`compact` in a popover, in French, with two controls.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "text-style/server.ts",
+      "content": "/** @krizaka/ui/text-style/server — the text style for a server (no React hook, no \"use client\"): `parseTextStyle` to validate what is stored, `textStyleProps`, `StyledText`, the value's types. */\nexport { StyledText, type StyledTextProps } from \"./styled-text\";\nexport {\n  type Align,\n  aligns,\n  type Case,\n  cases,\n  defaultTextStyle,\n  type FontId,\n  fontIds,\n  fontWeights,\n  type Leading,\n  leadings,\n  parseTextStyle,\n  type SizeStep,\n  sizeSteps,\n  type TextStyle,\n  textStyleProps,\n  type TextWeight,\n  textWeights,\n  type ToneId,\n  toneIds,\n  type Tracking,\n  trackings,\n} from \"./text-style\";\n"
+    },
+    {
+      "path": "text-style/styled-text.tsx",
+      "content": "// Server-safe: a text drawn with a stored text style. Whatever is passed as `value` goes through `parseTextStyle`.\nimport * as React from \"react\";\n\nimport { cx } from \"../cx\";\nimport { textStyleProps } from \"./text-style\";\n\nexport type StyledTextProps<T extends React.ElementType = \"p\"> = {\n  /** The element drawn: `h1`…`h6`, `p`, `span`, `div`. */\n  as?: T;\n  /** The stored text style — validated here: anything invalid draws the default. */\n  value?: unknown;\n  /** Merged after the style's own class. */\n  className?: string;\n  children?: React.ReactNode;\n} & Omit<React.ComponentPropsWithoutRef<T>, \"as\" | \"value\" | \"className\" | \"style\" | \"children\">;\n\n/** A text role drawn from a `TextStyle`: its font, size, weight, spacing, alignment, case and tone, all from CSS variables. */\nexport function StyledText<T extends React.ElementType = \"p\">({ as, value, className, children, ...rest }: StyledTextProps<T>) {\n  const Tag: React.ElementType = as ?? \"p\";\n  const props = textStyleProps(value);\n  return (\n    <Tag {...rest} className={cx(props.className, className)} style={props.style}>\n      {children}\n    </Tag>\n  );\n}\n"
+    },
+    {
+      "path": "text-style/text-style-picker.tsx",
+      "content": "// Client (state, an observer). A control for the look of one text role — font, size, weight, spacing, alignment, case,\n// italic, tone — over the primitives: the font as a radio group whose options are drawn in their own face, the size as\n// a step slider, the choices as segmented radio groups, italic as a switch, the tone as swatches. It is controlled, shows\n// a live preview, and warns (never clamps) when the tone lacks contrast on the surface or body text is too small.\nimport { Button } from \"@krizaka/ui/button\";\nimport { RadioGroup } from \"@krizaka/ui/radio-group\";\nimport { Slider } from \"@krizaka/ui/slider\";\nimport { Switch } from \"@krizaka/ui/switch\";\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cx } from \"../cx\";\nimport { StyledText } from \"./styled-text\";\nimport {\n  type Align,\n  aligns,\n  type Case,\n  cases,\n  contrastRatio,\n  type FontId,\n  fontIds,\n  fontVariable,\n  fontWeights,\n  isUnderMinimumSize,\n  type Leading,\n  leadings,\n  parseColor,\n  parseTextStyle,\n  type SizeStep,\n  sizeSteps,\n  type TextStyle,\n  type TextWeight,\n  textWeights,\n  type ToneId,\n  toneIds,\n  toneVariable,\n  type Tracking,\n  trackings,\n} from \"./text-style\";\n\n/** The controls of the picker, in the order they are drawn. */\nexport const textStyleFields = [\"font\", \"size\", \"weight\", \"leading\", \"tracking\", \"align\", \"case\", \"italic\", \"tone\"] as const;\nexport type TextStyleField = (typeof textStyleFields)[number];\n\nexport type TextStyleLabels = {\n  /** The name of the whole control. */\n  picker: string;\n  font: string;\n  size: string;\n  weight: string;\n  leading: string;\n  tracking: string;\n  align: string;\n  case: string;\n  italic: string;\n  tone: string;\n  presets: string;\n  preview: string;\n  fonts: Record<FontId, string>;\n  weights: Record<TextWeight, string>;\n  leadings: Record<Leading, string>;\n  trackings: Record<Tracking, string>;\n  aligns: Record<Align, string>;\n  cases: Record<Case, string>;\n  tones: Record<ToneId, string>;\n  /** The contrast warning: `{ratio}` is what the tone reaches, `{min}` what it must. */\n  contrastWarning: string;\n  /** The small-text warning: `{size}` is the smallest step advised for body text. */\n  minSizeWarning: string;\n};\n\n/** The English words. */\nexport const textStyleLabels: TextStyleLabels = {\n  picker: \"Text style\",\n  font: \"Font\",\n  size: \"Size\",\n  weight: \"Weight\",\n  leading: \"Line height\",\n  tracking: \"Letter spacing\",\n  align: \"Alignment\",\n  case: \"Case\",\n  italic: \"Italic\",\n  tone: \"Colour\",\n  presets: \"Presets\",\n  preview: \"Preview\",\n  fonts: { display: \"Display\", text: \"Text\", mono: \"Typewriter\", cahier: \"Pen\" },\n  weights: { 400: \"Regular\", 500: \"Medium\", 600: \"Semibold\", 700: \"Bold\" },\n  leadings: { tight: \"Tight\", normal: \"Normal\", relaxed: \"Relaxed\" },\n  trackings: { tight: \"Tight\", normal: \"Normal\", wide: \"Wide\" },\n  aligns: { start: \"Start\", center: \"Centre\", end: \"End\" },\n  cases: { none: \"Aa\", upper: \"AA\", \"small-caps\": \"Small caps\" },\n  tones: { primary: \"Primary\", secondary: \"Secondary\", muted: \"Muted\", accent: \"Accent\" },\n  contrastWarning: \"This colour reaches only {ratio}:1 on the background; {min}:1 is needed to read it comfortably.\",\n  minSizeWarning: \"Body text under “{size}” is hard to read.\",\n};\n\n/** The French words. */\nexport const textStyleLabelsFr: TextStyleLabels = {\n  picker: \"Style du texte\",\n  font: \"Police\",\n  size: \"Taille\",\n  weight: \"Graisse\",\n  leading: \"Interligne\",\n  tracking: \"Espacement des lettres\",\n  align: \"Alignement\",\n  case: \"Casse\",\n  italic: \"Italique\",\n  tone: \"Couleur\",\n  presets: \"Préréglages\",\n  preview: \"Aperçu\",\n  fonts: { display: \"Titre\", text: \"Texte\", mono: \"Machine à écrire\", cahier: \"Stylo\" },\n  weights: { 400: \"Normal\", 500: \"Moyen\", 600: \"Demi-gras\", 700: \"Gras\" },\n  leadings: { tight: \"Serré\", normal: \"Normal\", relaxed: \"Aéré\" },\n  trackings: { tight: \"Serré\", normal: \"Normal\", wide: \"Large\" },\n  aligns: { start: \"Début\", center: \"Centré\", end: \"Fin\" },\n  cases: { none: \"Aa\", upper: \"AA\", \"small-caps\": \"Petites capitales\" },\n  tones: { primary: \"Principale\", secondary: \"Secondaire\", muted: \"Discrète\", accent: \"Accent\" },\n  contrastWarning: \"Cette couleur n’atteint que {ratio}:1 sur le fond ; {min}:1 est nécessaire pour la lire confortablement.\",\n  minSizeWarning: \"Un texte courant sous « {size} » se lit mal.\",\n};\n\nexport type TextStylePreset = {\n  /** A stable key. */\n  id: string;\n  /** The name on the button, passed translated (« Titre », « Prix »…). */\n  label: string;\n  /** The style it applies; what it does not say takes the default. Validated when applied. */\n  value: Partial<TextStyle>;\n};\n\nexport type TextStylePickerProps = {\n  /** The text style, controlled. Validated by `parseTextStyle`: anything invalid shows the default. */\n  value: TextStyle;\n  /** Called with the whole new text style at each change. */\n  onChange: (value: TextStyle) => void;\n  /** The sample the preview shows, passed translated (\"Boulangerie Martin\"). */\n  previewText: string;\n  /** Styles the person can start from, as data. */\n  presets?: readonly TextStylePreset[];\n  /** The controls to show, in the order of `textStyleFields` (just `[\"font\", \"size\"]`). A preset then changes only these. */\n  fields?: readonly TextStyleField[];\n  /** A denser form for a popover from a toolbar. */\n  compact?: boolean;\n  /** The words, passed translated: `textStyleLabels` (EN) or `textStyleLabelsFr`, or the host's own. */\n  labels?: Partial<TextStyleLabels>;\n  /** The colour the text will sit on, for the preview and the contrast check (a CSS colour). By default the page's own surface. */\n  surface?: string;\n  /**\n   * What the text is for: `body` (reading text, which `minBodySize` guards) or `title` (a heading, which may be small).\n   * @default \"body\"\n   */\n  role?: \"body\" | \"title\";\n  /**\n   * The smallest step advised for body text: under it, a warning shows — the size is never forced.\n   * @default \"sm\"\n   */\n  minBodySize?: SizeStep;\n  /** Merged last on the root. */\n  className?: string;\n};\n\ntype Rgb = [number, number, number];\ntype Rgba = [number, number, number, number];\n\nfunction parseColorWithAlpha(text: string): Rgba | null {\n  const value = text.trim().toLowerCase();\n  if (value === \"transparent\") return [0, 0, 0, 0];\n  const color = parseColor(value);\n  if (!color) return null;\n\n  const hex = /^#([0-9a-f]{4}|[0-9a-f]{8})$/.exec(value)?.[1];\n  if (hex) {\n    const alpha = hex.length === 4 ? Number.parseInt(hex[3]! + hex[3]!, 16) : Number.parseInt(hex.slice(6, 8), 16);\n    return [...color, alpha / 255];\n  }\n\n  const components =\n    /^rgba?\\(([^)]+)\\)$/.exec(value)?.[1] ??\n    /^color\\(srgb\\s+([^)]+)\\)$/.exec(value)?.[1];\n  if (!components) return [...color, 1];\n\n  const [channels, slashAlpha] = components.split(\"/\");\n  const parts = channels!.trim().split(/[\\s,]+/).filter(Boolean);\n  const alpha = slashAlpha?.trim() ?? (parts.length === 4 ? parts[3] : undefined);\n  if (alpha === undefined) return [...color, 1];\n  const parsed = alpha.endsWith(\"%\") ? Number.parseFloat(alpha) / 100 : Number.parseFloat(alpha);\n  return Number.isFinite(parsed) && parsed >= 0 && parsed <= 1 ? [...color, parsed] : null;\n}\n\nconst over = (foreground: Rgba, background: Rgba): Rgba => {\n  const alpha = foreground[3] + background[3] * (1 - foreground[3]);\n  if (alpha === 0) return [0, 0, 0, 0];\n  return [\n    (foreground[0] * foreground[3] + background[0] * background[3] * (1 - foreground[3])) / alpha,\n    (foreground[1] * foreground[3] + background[1] * background[3] * (1 - foreground[3])) / alpha,\n    (foreground[2] * foreground[3] + background[2] * background[3] * (1 - foreground[3])) / alpha,\n    alpha,\n  ];\n};\n\n/** The composited colour behind an element, or null when a background layer cannot be read. */\nfunction surfaceOf(element: HTMLElement): Rgb | null {\n  const layers: HTMLElement[] = [];\n  for (let node: HTMLElement | null = element; node; node = node.parentElement) {\n    layers.push(node);\n    if (node === document.documentElement) break;\n  }\n  let background: Rgba = [0, 0, 0, 0];\n  for (const node of layers.reverse()) {\n    const color = window.getComputedStyle(node).backgroundColor;\n    const layer: Rgba | null = color ? parseColorWithAlpha(color) : [0, 0, 0, 0];\n    if (!layer) return null;\n    background = over(layer, background);\n  }\n  return background[3] >= 1 ? [background[0], background[1], background[2]] : null;\n}\n\n/** What the tone reaches on its surface, measured on the preview as it is drawn (the theme and the product's tokens included). */\nfunction useContrast(ref: React.RefObject<HTMLElement | null>, key: string): { ratio: number; required: number } | null {\n  const [measurement, setMeasurement] = React.useState<{ ratio: number; required: number } | null>(null);\n  React.useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    const measure = () => {\n      const sample = element.querySelector<HTMLElement>(\"[data-text-style-sample]\") ?? element;\n      const computed = window.getComputedStyle(sample);\n      const foreground = parseColor(computed.color);\n      const background = surfaceOf(sample);\n      const fontSize = Number.parseFloat(computed.fontSize);\n      const fontWeight = Number.parseFloat(computed.fontWeight);\n      const required = fontSize >= 24 || (fontSize >= 18.66 && fontWeight >= 700) ? 3 : 4.5;\n      setMeasurement(foreground && background && Number.isFinite(fontSize) && Number.isFinite(fontWeight) ? { ratio: contrastRatio(foreground, background), required } : null);\n    };\n    measure();\n    if (typeof MutationObserver === \"undefined\") return;\n    const observer = new MutationObserver(measure);\n    for (let node: HTMLElement | null = element; node; node = node.parentElement) {\n      observer.observe(node, { attributes: true, attributeFilter: [\"class\", \"style\", \"data-theme\"] });\n      if (node === document.documentElement) break;\n    }\n    return () => observer.disconnect();\n  }, [ref, key]);\n  return measurement;\n}\n\nconst nearest = (weights: readonly TextWeight[], weight: TextWeight): TextWeight =>\n  weights.reduce((best, w) => (Math.abs(w - weight) < Math.abs(best - weight) ? w : best), weights[0]!);\n\n/** The control of a text style: font, size, weight, spacing, alignment, case, italic and tone, with a live preview. */\nexport function TextStylePicker({\n  value,\n  onChange,\n  previewText,\n  presets,\n  fields = textStyleFields,\n  compact,\n  labels: given,\n  surface,\n  role = \"body\",\n  minBodySize = \"sm\",\n  className,\n}: TextStylePickerProps) {\n  const labels = { ...textStyleLabels, ...given };\n  const style = parseTextStyle(value);\n  const shown = (field: TextStyleField) => fields.includes(field);\n  const id = React.useId();\n  const previewRef = React.useRef<HTMLDivElement>(null);\n  const measurement = useContrast(previewRef, `${style.font}|${style.size}|${style.weight}|${style.tone}|${surface ?? \"\"}`);\n\n  const set = (patch: Partial<TextStyle>) => onChange(parseTextStyle({ ...style, ...patch }));\n  const setFont = (font: FontId) => set({ font, weight: nearest(fontWeights[font], style.weight) });\n  const applyPreset = (preset: TextStylePreset) => {\n    const next = parseTextStyle(preset.value);\n    const patch = Object.fromEntries(textStyleFields.filter(shown).map((f) => [f, next[f]])) as Partial<TextStyle>;\n    if (patch.font !== undefined || patch.weight !== undefined) {\n      const font = patch.font ?? style.font;\n      const weight = patch.weight ?? style.weight;\n      set({ ...patch, weight: nearest(fontWeights[font], weight) });\n    } else {\n      set(patch);\n    }\n  };\n\n  const warnings: string[] = [];\n  if (measurement && measurement.ratio < measurement.required) {\n    warnings.push(labels.contrastWarning.replace(\"{ratio}\", measurement.ratio.toFixed(1)).replace(\"{min}\", String(measurement.required)));\n  }\n  if (role === \"body\" && isUnderMinimumSize(style.size, minBodySize)) warnings.push(labels.minSizeWarning.replace(\"{size}\", minBodySize));\n\n  const group = (field: TextStyleField, title: string, control: React.ReactNode, className?: string) => (\n    <div key={field} className={cx(\"flex min-w-0 flex-col gap-2\", className)} data-field={field}>\n      <span id={`${id}-${field}`} className=\"text-xs font-semibold text-fg-secondary\">\n        {title}\n      </span>\n      {control}\n    </div>\n  );\n  const segmented = <T extends string | number>(field: TextStyleField, title: string, items: readonly T[], current: T, text: (item: T) => string, choose: (item: T) => void, disabled?: (item: T) => boolean) =>\n    group(\n      field,\n      title,\n      <RadioGroup.Root variant=\"segmented\" aria-labelledby={`${id}-${field}`} value={String(current)} onValueChange={(next) => choose(items.find((item) => String(item) === next)!)} className=\"w-full max-w-full\">\n        {items.map((item) => (\n          <RadioGroup.Segment key={item} value={String(item)} disabled={disabled?.(item)} className=\"min-w-0 px-1 text-xs\">\n            {text(item)}\n          </RadioGroup.Segment>\n        ))}\n      </RadioGroup.Root>,\n      \"sm:col-span-2\",\n    );\n\n  const controls: Record<TextStyleField, () => React.ReactNode> = {\n    font: () =>\n      group(\n        \"font\",\n        labels.font,\n        <RadioGroup.Root variant=\"cards\" aria-labelledby={`${id}-font`} value={style.font} onValueChange={(next) => setFont(next as FontId)} className=\"grid-cols-[repeat(auto-fit,minmax(9rem,1fr))]\">\n          {fontIds.map((font) => (\n            <RadioGroup.Card key={font} value={font} style={{ fontFamily: fontVariable[font] }}>\n              {labels.fonts[font]}\n            </RadioGroup.Card>\n          ))}\n        </RadioGroup.Root>,\n      ),\n    size: () =>\n      group(\n        \"size\",\n        labels.size,\n        <Slider\n          label={labels.size}\n          min={0}\n          max={sizeSteps.length - 1}\n          step={1}\n          ticks\n          value={sizeSteps.indexOf(style.size)}\n          onValueChange={(index) => set({ size: sizeSteps[index]! })}\n          formatValue={(index) => sizeSteps[index]!}\n          floatingValue\n        />,\n      ),\n    weight: () => segmented(\"weight\", labels.weight, textWeights, style.weight, (w) => labels.weights[w], (weight) => set({ weight }), (w) => !fontWeights[style.font].includes(w)),\n    leading: () => segmented(\"leading\", labels.leading, leadings, style.leading, (l) => labels.leadings[l], (leading) => set({ leading })),\n    tracking: () => segmented(\"tracking\", labels.tracking, trackings, style.tracking, (t) => labels.trackings[t], (tracking) => set({ tracking })),\n    align: () => segmented(\"align\", labels.align, aligns, style.align, (a) => labels.aligns[a], (align) => set({ align })),\n    case: () => segmented(\"case\", labels.case, cases, style.case, (c) => labels.cases[c], (next) => set({ case: next })),\n    italic: () => (\n      <div key=\"italic\" className=\"flex min-w-0 items-center justify-between gap-3\" data-field=\"italic\">\n        <span id={`${id}-italic`} className=\"text-xs font-semibold text-fg-secondary\">\n          {labels.italic}\n        </span>\n        <Switch aria-labelledby={`${id}-italic`} checked={style.italic} onCheckedChange={(italic) => set({ italic })} />\n      </div>\n    ),\n    tone: () =>\n      group(\n        \"tone\",\n        labels.tone,\n        <RadioGroupPrimitive.Root aria-labelledby={`${id}-tone`} value={style.tone} onValueChange={(next) => set({ tone: next as ToneId })} orientation=\"horizontal\" className=\"flex flex-wrap gap-3\">\n          {toneIds.map((tone) => (\n            <RadioGroupPrimitive.Item\n              key={tone}\n              value={tone}\n              aria-label={labels.tones[tone]}\n              title={labels.tones[tone]}\n              style={{ backgroundColor: toneVariable(tone) }}\n              className=\"h-8 w-8 rounded-full border border-border-strong focus-visible:outline-hidden focus-visible:focus-ring data-[state=checked]:ring-2 data-[state=checked]:ring-accent data-[state=checked]:ring-offset-2 data-[state=checked]:ring-offset-surface-0\"\n            />\n          ))}\n        </RadioGroupPrimitive.Root>,\n      ),\n  };\n\n  return (\n    <div role=\"group\" aria-label={labels.picker} data-compact={compact ? \"\" : undefined} className={cx(\"flex min-w-0 flex-col\", compact ? \"gap-3\" : \"gap-5\", className)}>\n      <div\n        ref={previewRef}\n        data-preview=\"\"\n        aria-label={labels.preview}\n        role=\"group\"\n        style={surface ? { backgroundColor: surface } : undefined}\n        className={cx(\"min-w-0 overflow-hidden rounded-xl border border-border-default\", surface ? \"\" : \"bg-surface-1\", compact ? \"p-3\" : \"p-5\")}\n      >\n        <StyledText as=\"p\" value={style} className=\"break-words\" data-text-style-sample=\"\">\n          {previewText}\n        </StyledText>\n      </div>\n      <div role=\"status\" aria-live=\"polite\" data-warnings=\"\">\n        {warnings.map((warning) => (\n          <p key={warning} className=\"text-xs font-medium text-fg-warning\">\n            {warning}\n          </p>\n        ))}\n      </div>\n      {presets?.length ? (\n        <div role=\"group\" aria-label={labels.presets} className=\"flex flex-wrap gap-2\">\n          {presets.map((preset) => (\n            <Button key={preset.id} type=\"button\" size=\"sm\" variant=\"outline\" onClick={() => applyPreset(preset)}>\n              {preset.label}\n            </Button>\n          ))}\n        </div>\n      ) : null}\n      <div className={cx(\"grid grid-cols-1 gap-x-6\", compact ? \"gap-y-3\" : \"gap-y-5 sm:grid-cols-2\")}>\n        {textStyleFields.filter(shown).map((field) => (\n          <React.Fragment key={field}>{controls[field]()}</React.Fragment>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
+    },
+    {
+      "path": "text-style/text-style.ts",
+      "content": "// Server-safe (no hook, no React): the value of a text style, its validation and its CSS. A shop owner's choice is stored\n// by the app, so the value is plain data and its CSS is built from fixed tables of CSS variables — what comes from a\n// database never reaches a style sheet as text. The fonts are the curated roles of @krizaka/fonts (the product theme\n// says which family a role is), the sizes are the type scale's steps, the tones are the text roles and the brand hue.\nimport type { CSSProperties } from \"react\";\nimport * as z from \"zod/mini\";\n\n/** The curated families of `@krizaka/fonts`, by role: `display` (the headlines), `text` (reading), `mono` (the typewriter), `cahier` (the pen). */\nexport const fontIds = [\"display\", \"text\", \"mono\", \"cahier\"] as const;\nexport type FontId = (typeof fontIds)[number];\n\n/** The steps of the type scale, smallest to largest. Never pixels. */\nexport const sizeSteps = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\", \"3xl\", \"4xl\"] as const;\nexport type SizeStep = (typeof sizeSteps)[number];\n\nexport const textWeights = [400, 500, 600, 700] as const;\nexport type TextWeight = (typeof textWeights)[number];\n\nexport const leadings = [\"tight\", \"normal\", \"relaxed\"] as const;\nexport type Leading = (typeof leadings)[number];\n\nexport const trackings = [\"tight\", \"normal\", \"wide\"] as const;\nexport type Tracking = (typeof trackings)[number];\n\nexport const aligns = [\"start\", \"center\", \"end\"] as const;\nexport type Align = (typeof aligns)[number];\n\nexport const cases = [\"none\", \"upper\", \"small-caps\"] as const;\nexport type Case = (typeof cases)[number];\n\n/** The text roles of the tokens, and the brand hue. */\nexport const toneIds = [\"primary\", \"secondary\", \"muted\", \"accent\"] as const;\nexport type ToneId = (typeof toneIds)[number];\n\n/** A text style: what a shop owner chooses, stored as it is. */\nexport type TextStyle = {\n  font: FontId;\n  size: SizeStep;\n  weight: TextWeight;\n  leading: Leading;\n  tracking: Tracking;\n  align: Align;\n  case: Case;\n  italic: boolean;\n  tone: ToneId;\n};\n\n/** What `parseTextStyle` answers for anything that is not a text style. */\nexport const defaultTextStyle: Readonly<TextStyle> = Object.freeze({\n  font: \"text\",\n  size: \"md\",\n  weight: 400,\n  leading: \"normal\",\n  tracking: \"normal\",\n  align: \"start\",\n  case: \"none\",\n  italic: false,\n  tone: \"primary\",\n});\n\n/** The weights each face is cut in: a picker offers these, never a synthesised bold. */\nexport const fontWeights: Readonly<Record<FontId, readonly TextWeight[]>> = {\n  display: [400],\n  text: [400, 600, 700],\n  mono: [400, 700],\n  cahier: [500],\n};\n\nconst schema = z.object({\n  font: z.enum(fontIds),\n  size: z.enum(sizeSteps),\n  weight: z.union([z.literal(400), z.literal(500), z.literal(600), z.literal(700)]),\n  leading: z.enum(leadings),\n  tracking: z.enum(trackings),\n  align: z.enum(aligns),\n  case: z.enum(cases),\n  italic: z.boolean(),\n  tone: z.enum(toneIds),\n});\n\n/**\n * Validates what was stored (or sent): the text style, or `defaultTextStyle` for anything invalid — a free font name, a\n * hex colour, a pixel size, CSS text, a value that is not an object. Keys a text style does not have are dropped; keys it\n * lacks (a value stored before one was added) take their default. Usable on a server.\n */\nexport function parseTextStyle(input: unknown): TextStyle {\n  if (typeof input !== \"object\" || input === null || Array.isArray(input)) return { ...defaultTextStyle };\n  const own = Object.fromEntries(Object.entries(input).filter(([, v]) => v !== undefined));\n  const parsed = schema.safeParse({ ...defaultTextStyle, ...own });\n  return parsed.success ? { ...parsed.data } : { ...defaultTextStyle };\n}\n\nconst rem: Record<SizeStep, string> = { xs: \"0.75rem\", sm: \"0.875rem\", md: \"1rem\", lg: \"1.125rem\", xl: \"1.25rem\", \"2xl\": \"1.5rem\", \"3xl\": \"1.875rem\", \"4xl\": \"2.25rem\" };\nconst lineHeight: Record<Leading, string> = { tight: \"1.15\", normal: \"1.4\", relaxed: \"1.7\" };\nconst letterSpacing: Record<Tracking, string> = { tight: \"-0.02em\", normal: \"0em\", wide: \"0.08em\" };\nconst textAlign: Record<Align, CSSProperties[\"textAlign\"]> = { start: \"start\", center: \"center\", end: \"end\" };\nconst tone: Record<ToneId, string> = {\n  primary: \"var(--kz-text-primary)\",\n  secondary: \"var(--kz-text-secondary)\",\n  muted: \"var(--kz-text-muted)\",\n  accent: \"var(--kz-accent-text)\",\n};\n\n/** The CSS variable of a text role: the product theme's face for `display`, the preset's for the others. */\nexport const fontVariable: Readonly<Record<FontId, string>> = {\n  display: \"var(--kz-font-display)\",\n  text: \"var(--kz-font-text)\",\n  mono: \"var(--kz-font-mono)\",\n  cahier: \"var(--kz-font-cahier)\",\n};\n\n/** A step's size as a CSS value: `var(--kz-text-style-<step>, <rem>)` — a product may re-cut the scale with the variable. */\nexport const sizeVariable = (step: SizeStep): string => `var(--kz-text-style-${step}, ${rem[step]})`;\n\n/** A tone's colour as a CSS value: a role of the tokens. */\nexport const toneVariable = (id: ToneId): string => tone[id];\n\n/** The `className` and `style` that draw a text style. Built from fixed tables of CSS variables only. */\nexport function textStyleProps(style: unknown): { className: string; style: CSSProperties } {\n  const v = parseTextStyle(style);\n  return {\n    className: \"kz-text-style\",\n    style: {\n      fontFamily: fontVariable[v.font],\n      fontSize: sizeVariable(v.size),\n      fontWeight: v.weight,\n      lineHeight: `var(--kz-text-style-leading-${v.leading}, ${lineHeight[v.leading]})`,\n      letterSpacing: `var(--kz-text-style-tracking-${v.tracking}, ${letterSpacing[v.tracking]})`,\n      textAlign: textAlign[v.align],\n      textTransform: v.case === \"upper\" ? \"uppercase\" : \"none\",\n      fontVariantCaps: v.case === \"small-caps\" ? \"small-caps\" : \"normal\",\n      fontStyle: v.italic ? \"italic\" : \"normal\",\n      color: toneVariable(v.tone),\n    },\n  };\n}\n\n/** A colour read from the page, as `[r, g, b]` in 0–255, or `null` when it cannot be read (the check then says nothing). */\nexport function parseColor(text: string): [number, number, number] | null {\n  const value = text.trim().toLowerCase();\n  const hex = /^#([0-9a-f]{3,8})$/.exec(value)?.[1];\n  if (hex && [3, 4, 6, 8].includes(hex.length)) {\n    const full = hex.length <= 4 ? [...hex].map((c) => c + c).join(\"\") : hex;\n    return [0, 2, 4].map((i) => Number.parseInt(full.slice(i, i + 2), 16)) as [number, number, number];\n  }\n  const rgb = /^rgba?\\(([^)]+)\\)$/.exec(value)?.[1];\n  if (rgb) {\n    const parts = rgb.split(/[\\s,/]+/).filter(Boolean).slice(0, 3).map((p) => (p.endsWith(\"%\") ? (Number.parseFloat(p) / 100) * 255 : Number.parseFloat(p)));\n    return parts.length === 3 && parts.every(Number.isFinite) ? (parts as [number, number, number]) : null;\n  }\n  const srgb = /^color\\(srgb\\s+([^)]+)\\)$/.exec(value)?.[1];\n  if (srgb) {\n    const parts = srgb.split(/[\\s/]+/).filter(Boolean).slice(0, 3).map((p) => Number.parseFloat(p) * 255);\n    return parts.length === 3 && parts.every(Number.isFinite) ? (parts as [number, number, number]) : null;\n  }\n  return null;\n}\n\nconst channel = (c: number) => {\n  const s = Math.min(Math.max(c, 0), 255) / 255;\n  return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n};\nconst luminance = ([r, g, b]: [number, number, number]) => 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);\n\n/** The WCAG contrast ratio of two colours (1 – 21). */\nexport function contrastRatio(foreground: [number, number, number], background: [number, number, number]): number {\n  const a = luminance(foreground);\n  const b = luminance(background);\n  return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);\n}\n\n/** The ratio WCAG asks of large text. */\nexport const largeTextRatio = 3;\n/** The ratio WCAG asks of body text. */\nexport const bodyTextRatio = 4.5;\n\n/** Large text for WCAG: 24 px and over, or bold from 18.66 px (`xl`, 20 px, in bold). */\nexport function isLargeText(style: Pick<TextStyle, \"size\" | \"weight\">): boolean {\n  const at = sizeSteps.indexOf(style.size);\n  return at >= sizeSteps.indexOf(\"2xl\") || (at >= sizeSteps.indexOf(\"xl\") && style.weight >= 700);\n}\n\n/** The ratio a style's text must reach on its surface. */\nexport const requiredContrast = (style: Pick<TextStyle, \"size\" | \"weight\">): number => (isLargeText(style) ? largeTextRatio : bodyTextRatio);\n\n/** True when body text in this step is under the minimum: a warning to show, never a size to force. */\nexport const isUnderMinimumSize = (size: SizeStep, minimum: SizeStep): boolean => sizeSteps.indexOf(size) < sizeSteps.indexOf(minimum);\n"
+    }
+  ],
+  "dependencies": [
+    "radix-ui@^1.7.0",
+    "zod@^4.6.5"
+  ],
+  "registryDependencies": [
+    "button",
+    "radio-group",
+    "slider",
+    "switch"
+  ],
+  "demo": {
+    "path": "examples/text-style/storefront-title.tsx",
+    "content": "import { type TextStyle, TextStylePicker } from \"@krizaka/ui/text-style\";\nimport { useState } from \"react\";\n\n// A shop owner sets the look of the shop's title; the app stores `value` as it is and draws it with `StyledText`.\nexport default function TextStyleStorefrontTitle() {\n  const [value, setValue] = useState<TextStyle>({\n    font: \"display\", size: \"3xl\", weight: 400, leading: \"tight\", tracking: \"normal\", align: \"center\", case: \"none\", italic: false, tone: \"primary\",\n  });\n  return (\n    <TextStylePicker\n      value={value}\n      onChange={setValue}\n      previewText=\"Boulangerie Martin\"\n      role=\"title\"\n      presets={[\n        { id: \"title\", label: \"Title\", value: { font: \"display\", size: \"3xl\", align: \"center\" } },\n        { id: \"subtitle\", label: \"Subtitle\", value: { font: \"text\", size: \"xl\", weight: 600 } },\n        { id: \"text\", label: \"Text\", value: { font: \"text\", size: \"md\" } },\n      ]}\n    />\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "StyledText",
+      "description": "A text role drawn from a `TextStyle`: its font, size, weight, spacing, alignment, case and tone, all from CSS variables.",
+      "props": [
+        {
+          "name": "as",
+          "type": "ElementType<any, keyof IntrinsicElements>",
+          "default": null,
+          "description": "The element drawn: `h1`…`h6`, `p`, `span`, `div`.",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Merged after the style's own class.",
+          "required": false
+        },
+        {
+          "name": "value",
+          "type": "unknown",
+          "default": null,
+          "description": "The stored text style — validated here: anything invalid draws the default.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "TextStylePicker",
+      "description": "The control of a text style: font, size, weight, spacing, alignment, case, italic and tone, with a live preview.",
+      "props": [
+        {
+          "name": "onChange",
+          "type": "(value: TextStyle) => void",
+          "default": null,
+          "description": "Called with the whole new text style at each change.",
+          "required": true
+        },
+        {
+          "name": "previewText",
+          "type": "string",
+          "default": null,
+          "description": "The sample the preview shows, passed translated (\"Boulangerie Martin\").",
+          "required": true
+        },
+        {
+          "name": "value",
+          "type": "TextStyle",
+          "default": null,
+          "description": "The text style, controlled. Validated by `parseTextStyle`: anything invalid shows the default.",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Merged last on the root.",
+          "required": false
+        },
+        {
+          "name": "compact",
+          "type": "boolean",
+          "default": null,
+          "description": "A denser form for a popover from a toolbar.",
+          "required": false
+        },
+        {
+          "name": "fields",
+          "type": "readonly (\"size\" | \"leading\" | \"tone\" | \"align\" | \"weight\" | \"font\" | \"tracking\" | \"case\" | \"italic\")[]",
+          "default": "[\"font\", \"size\", \"weight\", \"leading\", \"tracking\", \"align\", \"case\", \"italic\", \"tone\"] as const",
+          "description": "The controls to show, in the order of `textStyleFields` (just `[\"font\", \"size\"]`). A preset then changes only these.",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "Partial<TextStyleLabels>",
+          "default": null,
+          "description": "The words, passed translated: `textStyleLabels` (EN) or `textStyleLabelsFr`, or the host's own.",
+          "required": false
+        },
+        {
+          "name": "minBodySize",
+          "type": "\"sm\" | \"md\" | \"lg\" | \"xs\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\"",
+          "default": "sm",
+          "description": "The smallest step advised for body text: under it, a warning shows — the size is never forced.",
+          "required": false
+        },
+        {
+          "name": "presets",
+          "type": "readonly TextStylePreset[]",
+          "default": null,
+          "description": "Styles the person can start from, as data.",
+          "required": false
+        },
+        {
+          "name": "role",
+          "type": "\"body\" | \"title\"",
+          "default": "body",
+          "description": "What the text is for: `body` (reading text, which `minBodySize` guards) or `title` (a heading, which may be small).",
+          "required": false
+        },
+        {
+          "name": "surface",
+          "type": "string",
+          "default": null,
+          "description": "The colour the text will sit on, for the preview and the contrast check (a CSS colour). By default the page's own surface.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/theme.json

@@ -217,7 +217,7 @@
   "files": [
     {
       "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 ui.krizaka.com (apps/site) renders as\n// ui.krizaka.com/components/<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  | \"agenda\"\n  | \"account-settings\"\n  | \"drop-overlay\"\n  | \"upload-queue\"\n  | \"achievement\"\n  | \"anatomy-plate\"\n  | \"bird-plate\"\n  | \"taped-photo\"\n  | \"flock\"\n  | \"elephant\"\n  | \"footnote\"\n  | \"page-index\"\n  | \"specimen-tag\"\n  | \"action-bar\"\n  | \"action-sheet\"\n  | \"activity-feed\"\n  | \"alert\"\n  | \"app-header\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"captcha\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"chat\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"chip-row\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"comparison-table\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cover-hero\"\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  | \"docs-nav\"\n  | \"document-viewer\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"engine-flow\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"force-update-screen\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"genui\"\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  | \"longform-page\"\n  | \"maintenance-screen\"\n  | \"map\"\n  | \"markdown\"\n  | \"meta-row\"\n  | \"waveform\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"match-dialog\"\n  | \"media-capture\"\n  | \"media-grid\"\n  | \"language-switch\"\n  | \"media-gallery\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"opening-hours\"\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  | \"router\"\n  | \"rail-nav\"\n  | \"recipes\"\n  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"service-card\"\n  | \"settings-layout\"\n  | \"account-menu\"\n  | \"showcase\"\n  | \"step-showcase\"\n  | \"site-footer\"\n  | \"sites\"\n  | \"skeleton\"\n  | \"skip-link\"\n  | \"slider\"\n  | \"slot-picker\"\n  | \"slot\"\n  | \"spinner\"\n  | \"sticky-action\"\n  | \"splash-handoff\"\n  | \"split-view\"\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  | \"update-prompt\"\n  | \"verified-badge\"\n  | \"vertical-video\"\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 * Why a component is not on a platform — a decision, never a silence (the parity matrix of ui.krizaka.com/platforms):\n * - `gap` (✗): it belongs there and is not built yet; `issue` is the issue that tracks it (`krizaka/krizaka-ui#275`);\n * - `n/a`: it is not meant for that platform (a site's page block on a phone, a swipe on a desktop); `use` names the\n *   component that answers there, when one does.\n */\nexport type Absence =\n  | { readonly status: \"gap\"; readonly issue: string; readonly reason: string; readonly use?: undefined }\n  | { readonly status: \"n/a\"; readonly reason: string; readonly use?: ComponentName; readonly issue?: undefined };\n\n/**\n * Desktop is the Orazaka Mac app (Tauri 2: the system WebView renders the web components — ADR-002). `web`: the web\n * component runs there as it is; `desktop`: it also has a desktop form (a window's title bar, a denser layout…), said in\n * its documentation; otherwise the absence and why.\n */\nexport type DesktopSupport = \"web\" | \"desktop\" | Absence;\n\n/**\n * The three platforms of Krizaka UI — web · native (React Native, Expo) · desktop — for one component. The side a\n * component has is `platforms`; the side it lacks says why here: `native` is required for (and only for) a web-only\n * component, `web` for a native-only one; `desktop` always. `scripts/registry.test.mjs` fails on a missing decision.\n */\nexport interface Parity {\n  readonly web?: Absence;\n  readonly native?: Absence;\n  readonly desktop: DesktopSupport;\n}\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 ui.krizaka.com/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  /** The platforms it is not on, and why; and its desktop form (see `Parity`). */\n  readonly parity: Parity;\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 ui.krizaka.com (apps/site) renders as\n// ui.krizaka.com/components/<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  | \"agenda\"\n  | \"account-settings\"\n  | \"drop-overlay\"\n  | \"upload-queue\"\n  | \"achievement\"\n  | \"anatomy-plate\"\n  | \"bird-plate\"\n  | \"taped-photo\"\n  | \"text-style\"\n  | \"flock\"\n  | \"elephant\"\n  | \"footnote\"\n  | \"page-index\"\n  | \"chapter\"\n  | \"specimen-tag\"\n  | \"action-bar\"\n  | \"action-sheet\"\n  | \"activity-feed\"\n  | \"alert\"\n  | \"app-header\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"captcha\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"chat\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"chip-row\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"comparison-table\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cover-hero\"\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  | \"docs-nav\"\n  | \"document-viewer\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"engine-flow\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"force-update-screen\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"genui\"\n  | \"glossary\"\n  | \"glossary-term\"\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  | \"kpi-explained\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"maintenance-screen\"\n  | \"map\"\n  | \"markdown\"\n  | \"meta-row\"\n  | \"waveform\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"match-dialog\"\n  | \"media-capture\"\n  | \"media-grid\"\n  | \"language-switch\"\n  | \"media-gallery\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"opening-hours\"\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  | \"router\"\n  | \"rail-nav\"\n  | \"recipes\"\n  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"service-card\"\n  | \"settings-layout\"\n  | \"account-menu\"\n  | \"showcase\"\n  | \"step-showcase\"\n  | \"site-footer\"\n  | \"sites\"\n  | \"skeleton\"\n  | \"skip-link\"\n  | \"slider\"\n  | \"slot-picker\"\n  | \"slot\"\n  | \"spinner\"\n  | \"sticky-action\"\n  | \"splash-handoff\"\n  | \"split-view\"\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  | \"update-prompt\"\n  | \"verified-badge\"\n  | \"vertical-video\"\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 * Why a component is not on a platform — a decision, never a silence (the parity matrix of ui.krizaka.com/platforms):\n * - `gap` (✗): it belongs there and is not built yet; `issue` is the issue that tracks it (`krizaka/krizaka-ui#275`);\n * - `n/a`: it is not meant for that platform (a site's page block on a phone, a swipe on a desktop); `use` names the\n *   component that answers there, when one does.\n */\nexport type Absence =\n  | { readonly status: \"gap\"; readonly issue: string; readonly reason: string; readonly use?: undefined }\n  | { readonly status: \"n/a\"; readonly reason: string; readonly use?: ComponentName; readonly issue?: undefined };\n\n/**\n * Desktop is the Orazaka Mac app (Tauri 2: the system WebView renders the web components — ADR-002). `web`: the web\n * component runs there as it is; `desktop`: it also has a desktop form (a window's title bar, a denser layout…), said in\n * its documentation; otherwise the absence and why.\n */\nexport type DesktopSupport = \"web\" | \"desktop\" | Absence;\n\n/**\n * The three platforms of Krizaka UI — web · native (React Native, Expo) · desktop — for one component. The side a\n * component has is `platforms`; the side it lacks says why here: `native` is required for (and only for) a web-only\n * component, `web` for a native-only one; `desktop` always. `scripts/registry.test.mjs` fails on a missing decision.\n */\nexport interface Parity {\n  readonly web?: Absence;\n  readonly native?: Absence;\n  readonly desktop: DesktopSupport;\n}\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 ui.krizaka.com/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  /** The platforms it is not on, and why; and its desktop form (see `Parity`). */\n  readonly parity: Parity;\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"
     },
     {
       "path": "theme/index.ts",