@krizaka/ui 3.53.0 → 3.55.0

package/registry/app-header.json

@@ -2,27 +2,27 @@
   "name": "app-header",
   "type": "primitive",
   "title": "App header",
-  "summary": "The top bar that sits next to a `RailNav`: the product's name as text, optional status chips, and the actions. The mark is the rail's; on a phone, where the rail is a bottom tab bar, the header shows it too, so one mark is visible at every width.",
-  "description": "The top bar that sits next to a `RailNav`: the product's name as text, optional status chips, and the actions. The mark is the rail's; on a phone, where the rail is a bottom tab bar, the header shows it too, so one mark is visible at every width.",
+  "summary": "The family's top bar beside a `RailNav`: the product's name as text, optional status chips, then the session's controls in a fixed order — search (⌘K), language, the host's actions, messages and notifications with their unread counts, the primary action, the account with its name. Every slot is the host's; an empty one draws nothing.",
+  "description": "The family's top bar beside a `RailNav`: the product's name as text, optional status chips, then the session's controls in a fixed order — search (⌘K), language, the host's actions, messages and notifications with their unread counts, the primary action, the account with its name. Every slot is the host's; an empty one draws nothing.",
   "status": "beta",
   "deprecated": null,
   "category": "navigation",
-  "platforms": "web",
+  "platforms": "both",
   "parity": {
     "web": {
       "state": "yes"
     },
     "native": {
-      "state": "n/a",
-      "reason": "A native screen has its own header.",
-      "use": "header"
+      "state": "yes"
     },
     "desktop": {
       "state": "yes"
     }
   },
   "whenToUse": [
-    "Beside a `RailNav`, as the bar of every signed-in screen: name, status, theme, notifications, account."
+    "Beside a `RailNav`, as the bar of every signed-in screen of a Krizaka app (Orochia, Yomizaka, Akinaza): the same bar in every product.",
+    "With `search` (`AppHeaderSearch`) when the app has a palette (`CommandDialog`): ⌘K opens it from anywhere.",
+    "With `messages` and `notifications` (`AppHeaderCount`) when the app has an inbox: the unread count is drawn and said."
   ],
   "whenNotToUse": [
     {
@@ -36,35 +36,61 @@
     {
       "when": "A page's title block.",
       "use": "page-header"
+    },
+    {
+      "when": "A native screen's title that folds as the list scrolls.",
+      "use": "header"
     }
   ],
   "bestPractices": [
     "Pass the name as text and the mark as `mark`: never put a mark in the header that the rail already carries on a desktop (`mark` is hidden from `md` up for that reason).",
+    "Fill the slots, never `actions` with everything: the order (search · language · actions · messages · notifications · primary · account) is the family's, so every product's bar reads the same.",
+    "`AppHeaderSearch` comes from `@krizaka/ui/app-header/search` (a client entry: its ⌘K listener); the bar itself stays server-safe.",
+    "Give each count its words with their plural (`countLabel=\"3 nouvelles\"`): the badge is decorative, the name says it.",
+    "The language is `LanguageSwitch` (the same control as `NavBar.Language`); the account is `AccountMenu` with `showName` (the name from `sm`).",
     "Chips say a state, not a place: « Local · Sovereign », « Dev », a version.",
-    "Keep the actions to what changes the session (theme, notifications, account menu): the sections are in the rail.",
     "Make the name a link home with `homeLink` (your router's link) or `href`."
   ],
   "accessibility": {
-    "keyboard": [],
+    "keyboard": [
+      {
+        "keys": "⌘ K / Ctrl K",
+        "action": "Opens the palette from anywhere on the page (`AppHeaderSearch`, `shortcut`)."
+      },
+      {
+        "keys": "Tab",
+        "action": "Walks the controls in their visual order: search, language, actions, messages, notifications, primary, account."
+      },
+      {
+        "keys": "Enter / Space",
+        "action": "Opens the palette, follows a count's link or opens the host's popover."
+      }
+    ],
     "notes": [
-      "A `header` landmark; the name is plain text (the page's `h1` is the screen's, below).",
-      "The mark is decorative beside the name: give the home link its name through the visible text."
+      "A `header` landmark (`banner`); the name is plain text (the page's `h1` is the screen's, below).",
+      "A count is in the control's name: « Notifications, 3 new »; the digits on the icon are hidden from screen readers. A page it leads to is `aria-current=\"page\"`.",
+      "The search trigger is a button named by its words at every width (sr-only below `md`), with `aria-haspopup=\"dialog\"` and `aria-keyshortcuts`.",
+      "Reduced motion: the controls' colour transitions stop; nothing else moves.",
+      "At 360 px the name truncates and the controls keep their size: nothing is clipped."
     ]
   },
   "related": [
     "rail-nav",
     "app-shell",
     "nav-bar",
+    "command",
+    "language-switch",
+    "account-menu",
     "badge",
     "page-header"
   ],
   "web": {
     "entry": "@krizaka/ui/app-header",
-    "import": "import { AppHeader } from \"@krizaka/ui/app-header\";",
+    "import": "import { AppHeader, AppHeaderCount } from \"@krizaka/ui/app-header\";",
     "props": [
       {
         "component": "AppHeader",
-        "description": "The app's top bar: the name next to the rail, the mark on a phone, chips, actions.",
+        "description": "The app's top bar: the name next to the rail, the mark on a phone, chips, then search · language · actions · messages · notifications · primary · account.",
         "props": [
           {
             "name": "name",
@@ -73,11 +99,18 @@
             "description": "The product's name, as text (`Orazaka`): the only brand element on a desktop.",
             "required": true
           },
+          {
+            "name": "account",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The account, last: `AccountMenu` with `showName` (the name from `sm`), or the visitor's Sign in.",
+            "required": false
+          },
           {
             "name": "actions",
             "type": "ReactNode",
             "default": null,
-            "description": "On the right: theme, notifications, the account menu.",
+            "description": "The host's own controls, after the language (a theme toggle). Alone, it is the whole right side, as before.",
             "required": false
           },
           {
@@ -101,12 +134,109 @@
             "description": "Makes the name (and the mark) a link home: pass your router's link as `homeLink` or give a `href`.",
             "required": false
           },
+          {
+            "name": "language",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The language: `LanguageSwitch` (`@krizaka/ui/language-switch`) — a globe and « FR », labelled.",
+            "required": false
+          },
           {
             "name": "mark",
             "type": "ReactNode",
             "default": null,
             "description": "The product's mark (`<ProductLogo id=\"orazaka\" size={22} />`): shown below `md` only, where the rail (which carries it) is a bottom bar.",
             "required": false
+          },
+          {
+            "name": "messages",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Messages: an `AppHeaderCount` (an icon button or link with its unread count). Empty: hidden.",
+            "required": false
+          },
+          {
+            "name": "notifications",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Notifications: an `AppHeaderCount` (or the trigger of the host's popover). Empty: hidden.",
+            "required": false
+          },
+          {
+            "name": "primary",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The one primary action of the app (« New check », #588), before the account.",
+            "required": false
+          },
+          {
+            "name": "search",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The search trigger, first of the controls: `AppHeaderSearch` (`@krizaka/ui/app-header/search`) — a field from `md`, an icon below, ⌘K.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "AppHeaderCount",
+        "description": "An icon button or link of the top bar with an unread count, the count announced in its name.",
+        "props": [
+          {
+            "name": "icon",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The icon (`<NotificationIcon />` of\n@krizaka /icons): decorative, the name is `label`.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "What it is (« Notifications », « Messages ») — passed translated; its accessible name, with the count.",
+            "required": true
+          },
+          {
+            "name": "count",
+            "type": "number",
+            "default": null,
+            "description": "The unread count; 0 or absent draws no badge.",
+            "required": false
+          },
+          {
+            "name": "countLabel",
+            "type": "string",
+            "default": null,
+            "description": "The count in words, said after the label (« 3 new », « 3 nouvelles ») — passed translated, with its plural. Default: the number.",
+            "required": false
+          },
+          {
+            "name": "current",
+            "type": "boolean",
+            "default": null,
+            "description": "The page is the one it leads to (`aria-current=\"page\"`).",
+            "required": false
+          },
+          {
+            "name": "href",
+            "type": "string",
+            "default": null,
+            "description": "A link to the page (`/notifications`) instead of a button.",
+            "required": false
+          },
+          {
+            "name": "linkAs",
+            "type": "ElementType<any, keyof IntrinsicElements>",
+            "default": null,
+            "description": "Your router's link (Next's `Link`) for `href`; an `<a>` otherwise.",
+            "required": false
+          },
+          {
+            "name": "max",
+            "type": "number",
+            "default": "99",
+            "description": "Above it the badge shows `max+`.",
+            "required": false
           }
         ]
       }
@@ -115,36 +245,249 @@
       {
         "name": "basic",
         "title": "Name, chip and actions",
-        "description": "Orazaka's bar: the name, a « Local · Sovereign » chip, and the theme and account on the right; the mark joins the name below `md`.",
+        "description": "Orazaka's bar: the name, a « Local · Sovereign » chip, and the account on the right; the mark joins the name below `md`.",
         "path": "examples/app-header/basic.tsx",
         "module": "@krizaka/ui/registry/examples/app-header/basic",
         "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AppHeader } from \"@krizaka/ui/app-header\";\nimport { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\n\n// The name is text; the mark shows below `md` only (a desktop's rail carries it). Chips say a state.\nexport default function AppHeaderBasic() {\n  return (\n    <AppHeader\n      name=\"Orazaka\"\n      mark={<ProductLogo id=\"orazaka\" size={22} animated={false} />}\n      href=\"#home\"\n      chips={<Badge tone=\"success\" dot>Local · Sovereign</Badge>}\n      actions={<Button size=\"sm\" variant=\"secondary\">Account</Button>}\n    />\n  );\n}\n"
+      },
+      {
+        "name": "family",
+        "title": "The family's bar",
+        "description": "Yomizaka's bar: search with ⌘K and its palette, the language, messages and notifications with their counts, the account with its name.",
+        "path": "examples/app-header/family.tsx",
+        "module": "@krizaka/ui/registry/examples/app-header/family",
+        "code": "\"use client\";\n\nimport { ProductLogo } from \"@krizaka/ui\";\nimport { AccountMenu } from \"@krizaka/ui/account-menu\";\nimport { AppHeader, AppHeaderCount } from \"@krizaka/ui/app-header\";\nimport { AppHeaderSearch } from \"@krizaka/ui/app-header/search\";\nimport { Command, CommandDialog } from \"@krizaka/ui/command\";\nimport { languagesFor, LanguageSwitch } from \"@krizaka/ui/language-switch\";\nimport { useState } from \"react\";\n\nconst icon = (d: string) => <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden><path d={d} /></svg>;\n\n// The family's bar: search (⌘K opens the palette), language, messages, notifications with their counts, the account.\nexport default function AppHeaderFamily() {\n  const [open, setOpen] = useState(false);\n  return (\n    <>\n      <AppHeader\n        name=\"Yomizaka\"\n        mark={<ProductLogo id=\"yomizaka\" size={22} animated={false} />}\n        href=\"#home\"\n        search={<AppHeaderSearch label=\"Search files and checks\" onOpen={() => setOpen(true)} />}\n        language={<LanguageSwitch label=\"Language\" current=\"en\" languages={languagesFor(\"/en/files\")} />}\n        messages={<AppHeaderCount label=\"Messages\" icon={icon(\"M4 5h16v11H8l-4 4z\")} count={2} countLabel=\"2 unread\" href=\"#messages\" />}\n        notifications={<AppHeaderCount label=\"Notifications\" icon={icon(\"M6 16V11a6 6 0 1 1 12 0v5l2 2H4zM10 20h4\")} count={3} countLabel=\"3 new\" />}\n        account={<AccountMenu label=\"Account\" name=\"Eric Tremblay\" email=\"eric@example.com\" showName avatar={{ defaultAvatar: { brand: \"yomizaka\", seed: \"eric\" } }} signOut={{ label: \"Sign out\", onSelect: () => {} }} />}\n      />\n      <CommandDialog open={open} onOpenChange={setOpen} label=\"Search\">\n        <Command.Input placeholder=\"Search files and checks\" />\n        <Command.List label=\"Results\" emptyLabel=\"Nothing matches.\">\n          <Command.Item onSelect={() => setOpen(false)}>Applicant files</Command.Item>\n          <Command.Item onSelect={() => setOpen(false)}>Checks</Command.Item>\n        </Command.List>\n      </CommandDialog>\n    </>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": {
+    "entry": "@krizaka/ui/native",
+    "import": "import { AppHeader, AppHeaderCount, AppHeaderSearch } from \"@krizaka/ui/native\";",
+    "differences": [
+      "`onHome` instead of `href`/`homeLink`; no `chips` (a phone has no room).",
+      "`AppHeaderSearch` is an icon (no ⌘K): it opens the app's search screen; `AppHeaderCount` takes `onPress`.",
+      "The safe area's top inset is the provider's (`insets`)."
+    ],
+    "deprecated": null,
+    "props": [
+      {
+        "component": "AppHeader",
+        "description": "The app's top bar, the web's `AppHeader` on a phone: the mark and the name, then the controls in the family's fixed order —\nsearch · language · actions · messages · notifications · primary · account — under the status bar's safe area. The\nname truncates first; the controls keep their size.",
+        "props": [
+          {
+            "name": "name",
+            "type": "string",
+            "default": null,
+            "description": "The product's name, as text (`Yomizaka`).",
+            "required": true
+          },
+          {
+            "name": "account",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The account, last (an `Avatar` in a button, named).",
+            "required": false
+          },
+          {
+            "name": "actions",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The host's own controls, after the language.",
+            "required": false
+          },
+          {
+            "name": "language",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The language (« FR »): the host's control, labelled.",
+            "required": false
+          },
+          {
+            "name": "mark",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The product's mark (`<ProductMark id=\"yomizaka\" size={24} />`), before the name.",
+            "required": false
+          },
+          {
+            "name": "messages",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Messages: an `AppHeaderCount`. Empty: hidden.",
+            "required": false
+          },
+          {
+            "name": "notifications",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Notifications: an `AppHeaderCount`. Empty: hidden.",
+            "required": false
+          },
+          {
+            "name": "onHome",
+            "type": "(() => void)",
+            "default": null,
+            "description": "Makes the name a button home; its accessible name is `name`.",
+            "required": false
+          },
+          {
+            "name": "primary",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The one primary action, before the account.",
+            "required": false
+          },
+          {
+            "name": "search",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The search trigger, first of the controls: `AppHeaderSearch`.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles merged last.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "AppHeaderCount",
+        "description": "An icon button of the top bar with an unread count, the count said in its name (« Notifications, 3 new »).",
+        "props": [
+          {
+            "name": "icon",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The icon (an `@krizaka/icons/native` glyph): decorative.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "What it is (« Notifications ») — passed translated; its accessible name, with the count.",
+            "required": true
+          },
+          {
+            "name": "count",
+            "type": "number",
+            "default": null,
+            "description": "The unread count; 0 or absent draws no badge.",
+            "required": false
+          },
+          {
+            "name": "countLabel",
+            "type": "string",
+            "default": null,
+            "description": "The count in words (« 3 new ») — passed translated, with its plural. Default: the number.",
+            "required": false
+          },
+          {
+            "name": "current",
+            "type": "boolean",
+            "default": null,
+            "description": "The screen it leads to is on view (drawn as pressed).",
+            "required": false
+          },
+          {
+            "name": "max",
+            "type": "number",
+            "default": "99",
+            "description": "Above it the badge shows `max+`. Default 99.",
+            "required": false
+          },
+          {
+            "name": "onPress",
+            "type": "(() => void)",
+            "default": null,
+            "description": "Opens the screen (Notifications, Messages).",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "AppHeaderSearch",
+        "description": "The top bar's search trigger on a phone: a magnifier, named by `label`, that opens the app's search.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "What it searches (« Search files and checks ») — passed translated: the button's name.",
+            "required": true
+          },
+          {
+            "name": "onOpen",
+            "type": "() => void",
+            "default": null,
+            "description": "Opens the app's search screen or palette.",
+            "required": true
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "family",
+        "title": "The family's bar",
+        "description": "Search, language, notifications with their count and the account, at 360 pt.",
+        "path": "examples/app-header/native/family.tsx",
+        "module": "@krizaka/ui/registry/examples/app-header/native/family",
+        "code": "import { AppHeader, AppHeaderCount, AppHeaderSearch, Avatar, ProductMark, useTheme } from \"@krizaka/ui/native\";\nimport { Pressable, Text, View } from \"react-native\";\nimport Svg, { Path } from \"react-native-svg\";\n\n// The family's bar on a phone: search, language, notifications with their count, the account.\nexport default function NativeAppHeaderFamily() {\n  const { theme } = useTheme();\n  const bell = (\n    <Svg width={20} height={20} viewBox=\"0 0 24 24\" fill=\"none\" stroke={theme.textSecondary} strokeWidth={1.8} strokeLinecap=\"round\" aria-hidden>\n      <Path d=\"M6 16V11a6 6 0 1 1 12 0v5l2 2H4zM10 20h4\" />\n    </Svg>\n  );\n  return (\n    <View style={{ width: 360 }}>\n      <AppHeader\n        name=\"Yomizaka\"\n        mark={<ProductMark id=\"yomizaka\" size={24} animated={false} />}\n        search={<AppHeaderSearch label=\"Search files and checks\" onOpen={() => undefined} />}\n        language={\n          <Pressable role=\"button\" aria-label=\"Language: EN (English)\" style={{ minHeight: 40, justifyContent: \"center\", paddingHorizontal: 6 }}>\n            <Text style={{ color: theme.textSecondary, fontWeight: \"600\", fontSize: 12 }}>EN</Text>\n          </Pressable>\n        }\n        notifications={<AppHeaderCount label=\"Notifications\" icon={bell} count={3} countLabel=\"3 new\" onPress={() => undefined} />}\n        account={\n          <Pressable role=\"button\" aria-label=\"Account, Eric Tremblay\">\n            <Avatar size=\"sm\" fallback=\"E\" />\n          </Pressable>\n        }\n      />\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/app-header/native/family.dark.png",
+          "light": "examples/app-header/native/family.light.png"
+        }
       }
     ]
   },
-  "native": null,
   "files": [
     {
       "path": "app-header/app-header.tsx",
-      "content": "// Server-safe: no hook, no context. The top bar that sits next to a `RailNav`: the product's NAME as text (the mark is the\n// rail's), then optional chips, then the actions. Where the rail is a bottom tab bar (a phone) it has no room for the mark,\n// so the header shows it there and only there: exactly one brand mark is visible at every width.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const appHeader = tv({\n  slots: {\n    root: \"sticky top-0 z-30 flex h-14 w-full shrink-0 items-center gap-3 border-b border-border-subtle bg-surface-1 px-4 md:bg-surface-1 md:pl-3 md:pr-5\",\n    // The rail's mark is 56 px tall and so is this bar: the word shares the mark's line, right after the rail.\n    brand: \"flex min-w-0 items-center gap-2 font-display text-sm font-bold tracking-tight text-fg no-underline\",\n    mark: \"inline-flex shrink-0 md:hidden\",\n    name: \"truncate\",\n    chips: \"flex shrink-0 items-center gap-2\",\n    actions: \"ml-auto flex shrink-0 items-center gap-2\",\n  },\n});\nconst s = appHeader();\n\nexport type AppHeaderProps = Omit<React.ComponentProps<\"header\">, \"children\"> & {\n  /** The product's name, as text (`Orazaka`): the only brand element on a desktop. */\n  name: string;\n  /** The product's mark (`<ProductLogo id=\"orazaka\" size={22} />`): shown below `md` only, where the rail (which carries it) is a bottom bar. */\n  mark?: React.ReactNode;\n  /** Makes the name (and the mark) a link home: pass your router's link as `homeLink` or give a `href`. */\n  href?: string;\n  /** Your router's link element for the home link; it receives the name and the mark as children. */\n  homeLink?: React.ReactElement<{ className?: string; children?: React.ReactNode }>;\n  /** Status chips beside the name (`Badge`): « Local · Sovereign », « Dev », a version. */\n  chips?: React.ReactNode;\n  /** On the right: theme, notifications, the account menu. */\n  actions?: React.ReactNode;\n};\n\n/** The app's top bar: the name next to the rail, the mark on a phone, chips, actions. */\nexport function AppHeader({ name, mark, href, homeLink, chips, actions, className, ...props }: AppHeaderProps) {\n  const brand = (\n    <>\n      {mark && <span data-brand-mark className={s.mark()}>{mark}</span>}\n      <span className={s.name()}>{name}</span>\n    </>\n  );\n  return (\n    <header className={s.root({ className })} {...props}>\n      {homeLink ? (\n        React.cloneElement(homeLink, { className: s.brand() }, brand)\n      ) : href ? (\n        <a href={href} className={s.brand()}>{brand}</a>\n      ) : (\n        <div className={s.brand()}>{brand}</div>\n      )}\n      {chips && <div className={s.chips()}>{chips}</div>}\n      {actions && <div className={s.actions()}>{actions}</div>}\n    </header>\n  );\n}\n"
+      "content": "// Server-safe: no hook, no context. The family's top bar (#640): the product's NAME as text (the mark is the rail's), optional\n// chips, then the session's controls in a fixed order — search, language, the host's actions (a theme toggle), messages,\n// notifications, the primary action, the account. Every slot is the host's; a slot left empty draws nothing. Where the\n// rail is a bottom tab bar (a phone) it has no room for the mark, so the header shows it there and only there: exactly\n// one brand mark is visible at every width. At 360 px the name truncates first; the controls never clip.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const appHeader = tv({\n  slots: {\n    root: \"sticky top-0 z-30 flex h-14 w-full min-w-0 shrink-0 items-center gap-3 border-b border-border-subtle bg-surface-1 px-4 md:bg-surface-1 md:pl-3 md:pr-5\",\n    // The rail's mark is 56 px tall and so is this bar: the word shares the mark's line, right after the rail.\n    brand: \"flex min-w-0 items-center gap-2 font-display text-sm font-bold tracking-tight text-fg no-underline\",\n    mark: \"inline-flex shrink-0 md:hidden\",\n    name: \"truncate\",\n    chips: \"flex shrink-0 items-center gap-2\",\n    // The controls: one row at the right, in the order of the slots. They keep their size; the name gives way.\n    actions: \"ml-auto flex shrink-0 items-center gap-1 sm:gap-2\",\n    search: \"flex min-w-0 shrink-0\",\n  },\n});\nconst s = appHeader();\n\nexport type AppHeaderProps = Omit<React.ComponentProps<\"header\">, \"children\"> & {\n  /** The product's name, as text (`Orazaka`): the only brand element on a desktop. */\n  name: string;\n  /** The product's mark (`<ProductLogo id=\"orazaka\" size={22} />`): shown below `md` only, where the rail (which carries it) is a bottom bar. */\n  mark?: React.ReactNode;\n  /** Makes the name (and the mark) a link home: pass your router's link as `homeLink` or give a `href`. */\n  href?: string;\n  /** Your router's link element for the home link; it receives the name and the mark as children. */\n  homeLink?: React.ReactElement<{ className?: string; children?: React.ReactNode }>;\n  /** Status chips beside the name (`Badge`): « Local · Sovereign », « Dev », a version. */\n  chips?: React.ReactNode;\n  /** The search trigger, first of the controls: `AppHeaderSearch` (`@krizaka/ui/app-header/search`) — a field from `md`, an icon below, ⌘K. */\n  search?: React.ReactNode;\n  /** The language: `LanguageSwitch` (`@krizaka/ui/language-switch`) — a globe and « FR », labelled. */\n  language?: React.ReactNode;\n  /** The host's own controls, after the language (a theme toggle). Alone, it is the whole right side, as before. */\n  actions?: React.ReactNode;\n  /** Messages: an `AppHeaderCount` (an icon button or link with its unread count). Empty: hidden. */\n  messages?: React.ReactNode;\n  /** Notifications: an `AppHeaderCount` (or the trigger of the host's popover). Empty: hidden. */\n  notifications?: React.ReactNode;\n  /** The one primary action of the app (« New check », #588), before the account. */\n  primary?: React.ReactNode;\n  /** The account, last: `AccountMenu` with `showName` (the name from `sm`), or the visitor's Sign in. */\n  account?: React.ReactNode;\n};\n\n/** The app's top bar: the name next to the rail, the mark on a phone, chips, then search · language · actions · messages · notifications · primary · account. */\nexport function AppHeader({ name, mark, href, homeLink, chips, search, language, actions, messages, notifications, primary, account, className, ...props }: AppHeaderProps) {\n  const brand = (\n    <>\n      {mark && <span data-brand-mark className={s.mark()}>{mark}</span>}\n      <span className={s.name()}>{name}</span>\n    </>\n  );\n  const hasControls = [search, language, actions, messages, notifications, primary, account].some(Boolean);\n  return (\n    <header className={s.root({ className })} {...props}>\n      {homeLink ? (\n        React.cloneElement(homeLink, { className: s.brand() }, brand)\n      ) : href ? (\n        <a href={href} className={s.brand()}>{brand}</a>\n      ) : (\n        <div className={s.brand()}>{brand}</div>\n      )}\n      {chips && <div className={s.chips()}>{chips}</div>}\n      {/* The order is the family's, not the host's: the same bar in every product. */}\n      {hasControls && (\n        <div className={s.actions()}>\n          {search && <div data-slot=\"search\" className={s.search()}>{search}</div>}\n          {language}\n          {actions}\n          {messages}\n          {notifications}\n          {primary}\n          {account}\n        </div>\n      )}\n    </header>\n  );\n}\n"
+    },
+    {
+      "path": "app-header/count-text.ts",
+      "content": "// Pure, no import: shared by the web's AppHeaderCount and the native one (src/native/app-header.tsx).\n\n/** What the badge shows: the count, or `max+` above `max`; nothing at 0. */\nexport function countText(count: number | undefined, max = 99): string | null {\n  if (!count || count <= 0 || !Number.isFinite(count)) return null;\n  return count > max ? `${max}+` : String(Math.floor(count));\n}\n\n/** The control's accessible name: the label alone, or the label and the count's words (« Notifications, 3 new »). */\nexport function countName(label: string, count: number | undefined, countLabel?: string): string {\n  if (!countText(count, Number.POSITIVE_INFINITY)) return label;\n  return `${label}, ${countLabel ?? String(Math.floor(count!))}`;\n}\n"
+    },
+    {
+      "path": "app-header/count.tsx",
+      "content": "// Server-safe: no hook. An icon control of the top bar with an unread count — messages, notifications. A link (`href`, your\n// router's `linkAs`) or a button (the trigger of the host's popover, through `asChild` of Radix: its props and ref are\n// spread here). The count is drawn as a small badge and said in the name: « Notifications, 3 new ».\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { countName, countText } from \"./count-text\";\n\nexport const appHeaderCount = tv({\n  slots: {\n    root:\n      \"relative inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-fg-secondary no-underline transition-colors \" +\n      \"hover:bg-surface-2 hover:text-fg aria-expanded:bg-surface-2 aria-expanded:text-fg aria-[current=page]:bg-surface-2 aria-[current=page]:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none\",\n    icon: \"inline-flex h-5 w-5 items-center justify-center [&>svg]:h-5 [&>svg]:w-5\",\n    count:\n      \"pointer-events-none absolute -right-0.5 -top-0.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-accent px-1 \" +\n      \"font-mono text-[10px] font-bold leading-none tabular-nums text-on-accent ring-2 ring-surface-1\",\n  },\n});\nconst s = appHeaderCount();\n\nexport type AppHeaderCountProps = Omit<React.ComponentProps<\"button\">, \"children\"> & {\n  /** What it is (« Notifications », « Messages ») — passed translated; its accessible name, with the count. */\n  label: string;\n  /** The icon (`<NotificationIcon />` of @krizaka/icons): decorative, the name is `label`. */\n  icon: React.ReactNode;\n  /** The unread count; 0 or absent draws no badge. */\n  count?: number;\n  /** The count in words, said after the label (« 3 new », « 3 nouvelles ») — passed translated, with its plural. Default: the number. */\n  countLabel?: string;\n  /**\n   * Above it the badge shows `max+`.\n   * @default 99\n   */\n  max?: number;\n  /** A link to the page (`/notifications`) instead of a button. */\n  href?: string;\n  /** Your router's link (Next's `Link`) for `href`; an `<a>` otherwise. */\n  linkAs?: React.ElementType;\n  /** The page is the one it leads to (`aria-current=\"page\"`). */\n  current?: boolean;\n};\n\n/** An icon button or link of the top bar with an unread count, the count announced in its name. */\nexport function AppHeaderCount({ label, icon, count, countLabel, max = 99, href, linkAs, current, className, type, ...props }: AppHeaderCountProps) {\n  const text = countText(count, max);\n  const shared = {\n    ...props,\n    \"aria-label\": countName(label, count, countLabel),\n    \"aria-current\": current ? (\"page\" as const) : undefined,\n    \"data-unread\": text ? \"\" : undefined,\n    className: s.root({ className }),\n  };\n  const children = (\n    <>\n      <span aria-hidden className={s.icon()}>{icon}</span>\n      {text && <span aria-hidden data-count className={s.count()}>{text}</span>}\n    </>\n  );\n  if (href) {\n    const Link = linkAs ?? \"a\";\n    return <Link href={href} {...shared}>{children}</Link>;\n  }\n  return <button type={type ?? \"button\"} {...shared}>{children}</button>;\n}\n"
     },
     {
       "path": "app-header/index.ts",
-      "content": "/** @krizaka/ui/app-header — `AppHeader` (`name`, `mark`, `chips`, `actions`), `appHeader`: the top bar beside a `RailNav`. Server-safe. */\nexport { AppHeader, appHeader, type AppHeaderProps } from \"./app-header\";\n"
+      "content": "/**\n * @krizaka/ui/app-header — `AppHeader` (`name`, `mark`, `chips`, then the slots `search` · `language` · `actions` · `messages` ·\n * `notifications` · `primary` · `account`), `appHeader`, and `AppHeaderCount` (an icon control with its unread count): the\n * family's top bar beside a `RailNav`. Server-safe; the search trigger (a hook: ⌘K) is `@krizaka/ui/app-header/search`.\n */\nexport { AppHeader, appHeader, type AppHeaderProps } from \"./app-header\";\nexport { AppHeaderCount, appHeaderCount, type AppHeaderCountProps } from \"./count\";\nexport { countName, countText } from \"./count-text\";\n"
     },
     {
       "path": "app-header/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"App header\",\n  summary: \"The top bar that sits next to a `RailNav`: the product's name as text, optional status chips, and the actions. The mark is the rail's; on a phone, where the rail is a bottom tab bar, the header shows it too, so one mark is visible at every width.\",\n  status: \"beta\",\n  category: \"navigation\",\n  platforms: \"web\",\n  parity: { native: { status: \"n/a\", reason: \"A native screen has its own header.\", use: \"header\" }, desktop: \"web\" },\n  whenToUse: [\n    \"Beside a `RailNav`, as the bar of every signed-in screen: name, status, theme, notifications, account.\",\n  ],\n  whenNotToUse: [\n    { when: \"The bar of a site, with its menus and its call to action.\", use: \"nav-bar\" },\n    { when: \"A screen's title and its actions inside an AppShell.\", use: \"app-shell\" },\n    { when: \"A page's title block.\", use: \"page-header\" },\n  ],\n  bestPractices: [\n    \"Pass the name as text and the mark as `mark`: never put a mark in the header that the rail already carries on a desktop (`mark` is hidden from `md` up for that reason).\",\n    \"Chips say a state, not a place: « Local · Sovereign », « Dev », a version.\",\n    \"Keep the actions to what changes the session (theme, notifications, account menu): the sections are in the rail.\",\n    \"Make the name a link home with `homeLink` (your router's link) or `href`.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"A `header` landmark; the name is plain text (the page's `h1` is the screen's, below).\",\n      \"The mark is decorative beside the name: give the home link its name through the visible text.\",\n    ],\n  },\n  related: [\"rail-nav\", \"app-shell\", \"nav-bar\", \"badge\", \"page-header\"],\n  web: {\n    imports: [\"AppHeader\"],\n    examples: [\n      { name: \"basic\", title: \"Name, chip and actions\", description: \"Orazaka's bar: the name, a « Local · Sovereign » chip, and the theme and account on the right; the mark joins the name below `md`.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"App header\",\n  summary:\n    \"The family's top bar beside a `RailNav`: the product's name as text, optional status chips, then the session's controls in a fixed order — search (⌘K), language, the host's actions, messages and notifications with their unread counts, the primary action, the account with its name. Every slot is the host's; an empty one draws nothing.\",\n  status: \"beta\",\n  category: \"navigation\",\n  platforms: \"both\",\n  parity: { desktop: \"web\" },\n  whenToUse: [\n    \"Beside a `RailNav`, as the bar of every signed-in screen of a Krizaka app (Orochia, Yomizaka, Akinaza): the same bar in every product.\",\n    \"With `search` (`AppHeaderSearch`) when the app has a palette (`CommandDialog`): ⌘K opens it from anywhere.\",\n    \"With `messages` and `notifications` (`AppHeaderCount`) when the app has an inbox: the unread count is drawn and said.\",\n  ],\n  whenNotToUse: [\n    { when: \"The bar of a site, with its menus and its call to action.\", use: \"nav-bar\" },\n    { when: \"A screen's title and its actions inside an AppShell.\", use: \"app-shell\" },\n    { when: \"A page's title block.\", use: \"page-header\" },\n    { when: \"A native screen's title that folds as the list scrolls.\", use: \"header\" },\n  ],\n  bestPractices: [\n    \"Pass the name as text and the mark as `mark`: never put a mark in the header that the rail already carries on a desktop (`mark` is hidden from `md` up for that reason).\",\n    \"Fill the slots, never `actions` with everything: the order (search · language · actions · messages · notifications · primary · account) is the family's, so every product's bar reads the same.\",\n    \"`AppHeaderSearch` comes from `@krizaka/ui/app-header/search` (a client entry: its ⌘K listener); the bar itself stays server-safe.\",\n    \"Give each count its words with their plural (`countLabel=\\\"3 nouvelles\\\"`): the badge is decorative, the name says it.\",\n    \"The language is `LanguageSwitch` (the same control as `NavBar.Language`); the account is `AccountMenu` with `showName` (the name from `sm`).\",\n    \"Chips say a state, not a place: « Local · Sovereign », « Dev », a version.\",\n    \"Make the name a link home with `homeLink` (your router's link) or `href`.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"⌘ K / Ctrl K\", action: \"Opens the palette from anywhere on the page (`AppHeaderSearch`, `shortcut`).\" },\n      { keys: \"Tab\", action: \"Walks the controls in their visual order: search, language, actions, messages, notifications, primary, account.\" },\n      { keys: \"Enter / Space\", action: \"Opens the palette, follows a count's link or opens the host's popover.\" },\n    ],\n    notes: [\n      \"A `header` landmark (`banner`); the name is plain text (the page's `h1` is the screen's, below).\",\n      \"A count is in the control's name: « Notifications, 3 new »; the digits on the icon are hidden from screen readers. A page it leads to is `aria-current=\\\"page\\\"`.\",\n      \"The search trigger is a button named by its words at every width (sr-only below `md`), with `aria-haspopup=\\\"dialog\\\"` and `aria-keyshortcuts`.\",\n      \"Reduced motion: the controls' colour transitions stop; nothing else moves.\",\n      \"At 360 px the name truncates and the controls keep their size: nothing is clipped.\",\n    ],\n  },\n  related: [\"rail-nav\", \"app-shell\", \"nav-bar\", \"command\", \"language-switch\", \"account-menu\", \"badge\", \"page-header\"],\n  web: {\n    imports: [\"AppHeader\", \"AppHeaderCount\"],\n    examples: [\n      { name: \"basic\", title: \"Name, chip and actions\", description: \"Orazaka's bar: the name, a « Local · Sovereign » chip, and the account on the right; the mark joins the name below `md`.\" },\n      { name: \"family\", title: \"The family's bar\", description: \"Yomizaka's bar: search with ⌘K and its palette, the language, messages and notifications with their counts, the account with its name.\" },\n    ],\n  },\n  native: {\n    imports: [\"AppHeader\", \"AppHeaderCount\", \"AppHeaderSearch\"],\n    differences: [\n      \"`onHome` instead of `href`/`homeLink`; no `chips` (a phone has no room).\",\n      \"`AppHeaderSearch` is an icon (no ⌘K): it opens the app's search screen; `AppHeaderCount` takes `onPress`.\",\n      \"The safe area's top inset is the provider's (`insets`).\",\n    ],\n    examples: [{ name: \"family\", title: \"The family's bar\", description: \"Search, language, notifications with their count and the account, at 360 pt.\" }],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "app-header/search/index.ts",
+      "content": "/** @krizaka/ui/app-header/search — `AppHeaderSearch`, the top bar's search trigger (a field from `md`, an icon below; ⌘K opens the host's palette), `isSearchShortcut`. Client: its global shortcut. */\nexport { AppHeaderSearch, appHeaderSearch, type AppHeaderSearchProps, isSearchShortcut } from \"./search\";\n"
+    },
+    {
+      "path": "app-header/search/search.tsx",
+      "content": "// Client (a global shortcut). The top bar's search trigger: a field-like button (the glyph, the label, ⌘K) from `md`, an\n// icon below. It does not search: it opens the host's palette (`CommandDialog` of @krizaka/ui/command) — on a click, on\n// Enter, and on ⌘K / Ctrl+K from anywhere on the page.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { SearchGlyph } from \"../../glyphs\";\nimport { Kbd } from \"../../kbd/kbd\";\n\nexport const appHeaderSearch = tv({\n  slots: {\n    root:\n      \"inline-flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-lg text-fg-secondary transition-colors \" +\n      \"hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none \" +\n      \"md:w-56 md:justify-start md:border md:border-border-default md:bg-surface-2/60 md:px-3 md:text-xs md:hover:border-border-strong lg:w-72\",\n    glyph: \"h-5 w-5 shrink-0 md:h-4 md:w-4\",\n    // Hidden on a phone, still the button's name there (sr-only), so the name is the same at every width.\n    label: \"sr-only md:not-sr-only md:flex-1 md:truncate md:text-left\",\n    keys: \"ml-auto hidden shrink-0 items-center gap-0.5 lg:flex\",\n  },\n});\nconst s = appHeaderSearch();\n\nconst isApple = () => typeof navigator !== \"undefined\" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);\n\n/** Whether a keydown is the shortcut: ⌘ or Ctrl with the key, no Alt. */\nexport function isSearchShortcut(event: Pick<KeyboardEvent, \"key\" | \"metaKey\" | \"ctrlKey\" | \"altKey\">, key: string): boolean {\n  return event.key.toLowerCase() === key.toLowerCase() && (event.metaKey || event.ctrlKey) && !event.altKey;\n}\n\nexport type AppHeaderSearchProps = Omit<React.ComponentProps<\"button\">, \"children\" | \"onClick\"> & {\n  /** What it searches (« Search files and checks ») — passed translated: the field's words from `md`, the button's name at every width. */\n  label: string;\n  /** Opens the palette: a click, Enter, and the shortcut. */\n  onOpen: () => void;\n  /**\n   * The shortcut's key with ⌘ (Apple) or Ctrl (elsewhere), global to the page; `false` for none. One per page.\n   * @default \"k\"\n   */\n  shortcut?: string | false;\n};\n\n/** The top bar's search trigger: a field from `md`, an icon below; it opens the host's palette, also on ⌘K. */\nexport function AppHeaderSearch({ label, onOpen, shortcut = \"k\", className, type, ...props }: AppHeaderSearchProps) {\n  const [apple, setApple] = React.useState(true);\n  const open = React.useRef(onOpen);\n  React.useEffect(() => {\n    open.current = onOpen;\n  }, [onOpen]);\n\n  React.useEffect(() => {\n    if (!shortcut) return;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- the platform is only known in the browser (no hydration mismatch)\n    setApple(isApple());\n    const onKey = (event: KeyboardEvent) => {\n      if (!isSearchShortcut(event, shortcut)) return;\n      event.preventDefault();\n      open.current();\n    };\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [shortcut]);\n\n  const key = shortcut ? shortcut.toUpperCase() : null;\n  return (\n    <button\n      type={type ?? \"button\"}\n      aria-haspopup=\"dialog\"\n      aria-keyshortcuts={key ? `Meta+${key} Control+${key}` : undefined}\n      {...props}\n      onClick={() => onOpen()}\n      className={s.root({ className })}\n    >\n      <SearchGlyph className={s.glyph()} />\n      <span className={s.label()}>{label}</span>\n      {key && (\n        <span aria-hidden className={s.keys()}>\n          <Kbd size=\"sm\">{apple ? \"⌘\" : \"Ctrl\"}</Kbd>\n          <Kbd size=\"sm\">{key}</Kbd>\n        </span>\n      )}\n    </button>\n  );\n}\n"
+    },
+    {
+      "path": "glyphs.tsx",
+      "content": "// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill={fill ? \"currentColor\" : \"none\"}\n      stroke={fill ? \"none\" : \"currentColor\"}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n  </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n  </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n  <Glyph {...p}>\n    <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n    {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n  </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n  <Glyph {...p}>\n    {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n  </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n  </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n  </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n  <Glyph {...p}>\n    <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n  </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 5v14M5 12h14\" />\n  </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n    <path d=\"M3 10h18M8 3v4M16 3v4\" />\n  </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n    <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n  </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n    <path d=\"M14 3v5h5\" />\n  </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n    <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n  </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n    <path d=\"M18 3v4h-4M6 21v-4h4\" />\n  </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n    <path d=\"M4 4v4.5h4.5\" />\n  </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n  <Glyph {...p}>\n    {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n  </Glyph>\n);\nexport const ArrowGlyph = ({ direction = \"right\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" }) => (\n  <Glyph {...p}>\n    <path d={direction === \"left\" ? \"M19 12H5m0 0 6-6m-6 6 6 6\" : \"M5 12h14m0 0-6-6m6 6-6 6\"} />\n  </Glyph>\n);\nexport const ExternalGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 4h6v6M20 4l-9 9\" />\n    <path d=\"M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4\" />\n  </Glyph>\n);\nexport const WarningGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 4 2.5 20h19L12 4Z\" />\n    <path d=\"M12 10v4M12 17.2v.1\" />\n  </Glyph>\n);\nexport const CopyGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n    <path d=\"M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3\" />\n  </Glyph>\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"
+      "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  | \"notification-preferences\"\n  | \"quota-meter\"\n  | \"agenda\"\n  | \"account-settings\"\n  | \"drop-overlay\"\n  | \"upload-queue\"\n  | \"achievement\"\n  | \"anatomy-plate\"\n  | \"bird-plate\"\n  | \"taped-photo\"\n  | \"stuck\"\n  | \"doodle\"\n  | \"signature\"\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  | \"retro-tv\"\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  /** The React Native entry alone is deprecated while the web one stays (ADR-006 §7); a deprecated component says it once, above. */\n  readonly deprecated?: Deprecation;\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"
     }
   ],
   "dependencies": [
     "tailwind-variants@^3.3.1"
   ],
-  "registryDependencies": [],
+  "registryDependencies": [
+    "kbd"
+  ],
   "demo": {
     "path": "examples/app-header/basic.tsx",
     "content": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AppHeader } from \"@krizaka/ui/app-header\";\nimport { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\n\n// The name is text; the mark shows below `md` only (a desktop's rail carries it). Chips say a state.\nexport default function AppHeaderBasic() {\n  return (\n    <AppHeader\n      name=\"Orazaka\"\n      mark={<ProductLogo id=\"orazaka\" size={22} animated={false} />}\n      href=\"#home\"\n      chips={<Badge tone=\"success\" dot>Local · Sovereign</Badge>}\n      actions={<Button size=\"sm\" variant=\"secondary\">Account</Button>}\n    />\n  );\n}\n"
@@ -152,7 +495,7 @@
   "props": [
     {
       "component": "AppHeader",
-      "description": "The app's top bar: the name next to the rail, the mark on a phone, chips, actions.",
+      "description": "The app's top bar: the name next to the rail, the mark on a phone, chips, then search · language · actions · messages · notifications · primary · account.",
       "props": [
         {
           "name": "name",
@@ -161,11 +504,18 @@
           "description": "The product's name, as text (`Orazaka`): the only brand element on a desktop.",
           "required": true
         },
+        {
+          "name": "account",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The account, last: `AccountMenu` with `showName` (the name from `sm`), or the visitor's Sign in.",
+          "required": false
+        },
         {
           "name": "actions",
           "type": "ReactNode",
           "default": null,
-          "description": "On the right: theme, notifications, the account menu.",
+          "description": "The host's own controls, after the language (a theme toggle). Alone, it is the whole right side, as before.",
           "required": false
         },
         {
@@ -189,12 +539,109 @@
           "description": "Makes the name (and the mark) a link home: pass your router's link as `homeLink` or give a `href`.",
           "required": false
         },
+        {
+          "name": "language",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The language: `LanguageSwitch` (`@krizaka/ui/language-switch`) — a globe and « FR », labelled.",
+          "required": false
+        },
         {
           "name": "mark",
           "type": "ReactNode",
           "default": null,
           "description": "The product's mark (`<ProductLogo id=\"orazaka\" size={22} />`): shown below `md` only, where the rail (which carries it) is a bottom bar.",
           "required": false
+        },
+        {
+          "name": "messages",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Messages: an `AppHeaderCount` (an icon button or link with its unread count). Empty: hidden.",
+          "required": false
+        },
+        {
+          "name": "notifications",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Notifications: an `AppHeaderCount` (or the trigger of the host's popover). Empty: hidden.",
+          "required": false
+        },
+        {
+          "name": "primary",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The one primary action of the app (« New check », #588), before the account.",
+          "required": false
+        },
+        {
+          "name": "search",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The search trigger, first of the controls: `AppHeaderSearch` (`@krizaka/ui/app-header/search`) — a field from `md`, an icon below, ⌘K.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "AppHeaderCount",
+      "description": "An icon button or link of the top bar with an unread count, the count announced in its name.",
+      "props": [
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The icon (`<NotificationIcon />` of\n@krizaka /icons): decorative, the name is `label`.",
+          "required": true
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "What it is (« Notifications », « Messages ») — passed translated; its accessible name, with the count.",
+          "required": true
+        },
+        {
+          "name": "count",
+          "type": "number",
+          "default": null,
+          "description": "The unread count; 0 or absent draws no badge.",
+          "required": false
+        },
+        {
+          "name": "countLabel",
+          "type": "string",
+          "default": null,
+          "description": "The count in words, said after the label (« 3 new », « 3 nouvelles ») — passed translated, with its plural. Default: the number.",
+          "required": false
+        },
+        {
+          "name": "current",
+          "type": "boolean",
+          "default": null,
+          "description": "The page is the one it leads to (`aria-current=\"page\"`).",
+          "required": false
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "default": null,
+          "description": "A link to the page (`/notifications`) instead of a button.",
+          "required": false
+        },
+        {
+          "name": "linkAs",
+          "type": "ElementType<any, keyof IntrinsicElements>",
+          "default": null,
+          "description": "Your router's link (Next's `Link`) for `href`; an `<a>` otherwise.",
+          "required": false
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "default": "99",
+          "description": "Above it the badge shows `max+`.",
+          "required": false
         }
       ]
     }