@krizaka/ui 3.21.0 → 3.23.0

package/registry/rail-nav.json

@@ -0,0 +1,493 @@
+{
+  "name": "rail-nav",
+  "type": "primitive",
+  "title": "Rail nav",
+  "summary": "The compact navigation of an application: a vertical rail of icons on a desktop — the product's mark on top, a tooltip on each icon, an accent bar on the current one, a footer for settings and the account — that becomes a bottom tab bar on a phone. Paired with `AppHeader`, which carries the product's name (and, on a phone, its mark).",
+  "description": "The compact navigation of an application: a vertical rail of icons on a desktop — the product's mark on top, a tooltip on each icon, an accent bar on the current one, a footer for settings and the account — that becomes a bottom tab bar on a phone. Paired with `AppHeader`, which carries the product's name (and, on a phone, its mark).",
+  "status": "beta",
+  "deprecated": null,
+  "category": "navigation",
+  "platforms": "web",
+  "parity": {
+    "web": {
+      "state": "yes"
+    },
+    "native": {
+      "state": "n/a",
+      "reason": "On a phone the rail is already a bottom tab bar; a native app uses the TabBar.",
+      "use": "tab-bar"
+    },
+    "desktop": {
+      "state": "yes"
+    }
+  },
+  "whenToUse": [
+    "An application with three to eight destinations the user works in all day (Home, Studios, Chat, Jobs, Settings) and little else in the way: the rail leaves the screen to the work.",
+    "When the same sections must read as a vertical rail on a desktop and as tabs on a phone, written once."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "Grouped sections, counts and a collapsing sidebar of words, a console with shortcuts.",
+      "use": "app-shell"
+    },
+    {
+      "when": "A public site's pages.",
+      "use": "nav-bar"
+    },
+    {
+      "when": "A native mobile app.",
+      "use": "tab-bar"
+    },
+    {
+      "when": "Views of one screen.",
+      "use": "tabs"
+    }
+  ],
+  "bestPractices": [
+    "Five main items at most: on a phone they are the tabs (the footer's items follow them in the same bar, so keep both short).",
+    "Give every item an icon and a word: the icon is all a desktop shows, the word is the tooltip, the tab's caption and the accessible name.",
+    "Put the product's mark in `mark` and its name in `AppHeader`: the mark is shown once, in the rail on a desktop and in the header on a phone. Never draw it in both.",
+    "Render your router's links with `RailNav.Item asChild`; set `current` from the route.",
+    "Scope the product's colours with `accent` (`orazaka`, `orochia`…) or let the page's brand class do it.",
+    "`expandable` is for apps whose users know the icons less well: it widens the rail to show the words."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Tab",
+        "action": "Moves through the items, the footer's controls and the expand button."
+      },
+      {
+        "keys": "↑ ↓ (rail) · ← → (tab bar)",
+        "action": "Moves the focus to the previous or next item, wrapping at the ends; both pairs always work."
+      },
+      {
+        "keys": "Home / End",
+        "action": "Focuses the first or the last item."
+      },
+      {
+        "keys": "Esc",
+        "action": "Dismisses a tooltip that is showing."
+      }
+    ],
+    "notes": [
+      "A `nav` named by `label`; the current item carries `aria-current=\"page\"`.",
+      "Each item is named by its `label` (and `badgeLabel`): the tooltip and the caption repeat it, they never replace it.",
+      "The focus ring is the Krizaka signature (`focus-ring-inset`), kept inside the rail's edge so it is never clipped.",
+      "A tab is at least 56 px tall, clear of the home indicator (`env(safe-area-inset-bottom)`); the motion of the width respects `prefers-reduced-motion`.",
+      "Exactly one brand mark is visible at every width: the rail's `mark` below `md` is hidden and `AppHeader`'s `mark` is shown there, and the reverse above."
+    ]
+  },
+  "related": [
+    "app-header",
+    "app-shell",
+    "nav-bar",
+    "tooltip",
+    "tab-bar"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/rail-nav",
+    "import": "import { RailNav } from \"@krizaka/ui/rail-nav\";",
+    "props": [
+      {
+        "component": "RailNavShell",
+        "description": "The frame of the page: the rail, then `RailNav.Body` (the header and the content). A row on a desktop.",
+        "props": []
+      },
+      {
+        "component": "RailNavRoot",
+        "description": "The rail: a vertical column of icons on a desktop, a bottom tab bar on a phone.",
+        "props": [
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The main destinations: `RailNav.Item`, the ones you work in. Five at most so that they fit a phone's tab bar.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The navigation's accessible name (`Orazaka`, `Studio`).",
+            "required": true
+          },
+          {
+            "name": "accent",
+            "type": "BrandId",
+            "default": null,
+            "description": "The product's brand: scopes its colours (`brand-orazaka`…) over the rail, so the accent follows. Omit it inside a page that already wears the brand.",
+            "required": false
+          },
+          {
+            "name": "defaultExpanded",
+            "type": "boolean",
+            "default": "false",
+            "description": "The starting width when uncontrolled.",
+            "required": false
+          },
+          {
+            "name": "expandable",
+            "type": "boolean",
+            "default": null,
+            "description": "Adds a button that widens the rail to show the words (desktop only). Needs `expandLabels`.",
+            "required": false
+          },
+          {
+            "name": "expanded",
+            "type": "boolean",
+            "default": null,
+            "description": "Controlled width (pair with `onExpandedChange` to keep the choice).",
+            "required": false
+          },
+          {
+            "name": "expandLabels",
+            "type": "readonly [string, string]",
+            "default": null,
+            "description": "The toggle's words, `[expand, collapse]`.",
+            "required": false
+          },
+          {
+            "name": "footer",
+            "type": "ReactNode",
+            "default": null,
+            "description": "At the foot of the rail (settings, account), after the main items; on a phone they follow them in the same bar. `RailNav.Item`s or a control with `data-rail-item`.",
+            "required": false
+          },
+          {
+            "name": "mark",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The product's mark on top of the rail, as a link home (`<Link href=\"/\"><ProductLogo id=\"orazaka\" /></Link>`); named by the app (its `aria-label`). Hidden on a phone: `AppHeader` shows it there.",
+            "required": false
+          },
+          {
+            "name": "onExpandedChange",
+            "type": "((expanded: boolean) => void)",
+            "default": null,
+            "description": "Called when the toggle widens or narrows the rail.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "RailNavItem",
+        "description": "A destination of the rail.",
+        "props": [
+          {
+            "name": "icon",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The item's icon (a signature icon of `@krizaka/icons`): all that shows on a desktop rail.",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "Its words: the accessible name, the tooltip, the tab's caption on a phone, the row's text when the rail is expanded.",
+            "required": true
+          },
+          {
+            "name": "asChild",
+            "type": "boolean",
+            "default": null,
+            "description": "Renders your router's link with the item's look: pass it as the only child.",
+            "required": false
+          },
+          {
+            "name": "badge",
+            "type": "ReactNode",
+            "default": null,
+            "description": "A count (unread, pending) on the icon. Say it in words with `badgeLabel`.",
+            "required": false
+          },
+          {
+            "name": "badgeLabel",
+            "type": "string",
+            "default": null,
+            "description": "The count in words (« 3 unread »), appended to the accessible name.",
+            "required": false
+          },
+          {
+            "name": "current",
+            "type": "boolean",
+            "default": null,
+            "description": "This is the section the user is in: `aria-current=\"page\"`, the accent bar and the accent colour.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "RailNavBody",
+        "description": "The column beside the rail: the `AppHeader`, then the content. On a phone it keeps clear of the tab bar.",
+        "props": []
+      }
+    ],
+    "examples": [
+      {
+        "name": "studio",
+        "title": "A studio",
+        "description": "Orazaka's signed-in app: the mark on top of the rail, five sections with the current one lit, settings at the foot, the header with the name and a status chip.",
+        "template": true,
+        "purpose": "operate",
+        "why": "A person works in a few sections all day: the rail keeps them one icon away and leaves the screen to the work; on a phone the same sections are the tabs.",
+        "path": "examples/rail-nav/studio.tsx",
+        "module": "@krizaka/ui/registry/examples/rail-nav/studio",
+        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AppHeader } from \"@krizaka/ui/app-header\";\nimport { Badge } from \"@krizaka/ui/badge\";\nimport { RailNav } from \"@krizaka/ui/rail-nav\";\n\nconst icon = (d: string) => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n    <path d={d} />\n  </svg>\n);\n\n// The mark lives in the rail; the header carries the name (and the mark on a phone, where the rail is the tab bar).\nexport default function RailNavStudio() {\n  return (\n    <RailNav.Shell>\n      <RailNav.Root\n        label=\"Orazaka\"\n        accent=\"orazaka\"\n        mark={<a href=\"#home\" aria-label=\"Orazaka, home\"><ProductLogo id=\"orazaka\" size={26} animated={false} /></a>}\n        footer={<RailNav.Item href=\"#settings\" icon={icon(\"M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19 12l2-1-2-4-2 1-2-1-1-2h-4l-1 2-2 1-2-1-2 4 2 1v2l-2 1 2 4 2-1 2 1 1 2h4l1-2 2-1 2 1 2-4-2-1z\")} label=\"Settings\" />}\n      >\n        <RailNav.Item href=\"#home\" icon={icon(\"M4 11 12 4l8 7v9H4z\")} label=\"Home\" current />\n        <RailNav.Item href=\"#studios\" icon={icon(\"M4 5h16v11H4zM8 20h8\")} label=\"Studios\" />\n        <RailNav.Item href=\"#chat\" icon={icon(\"M4 5h16v11H9l-5 4z\")} label=\"Chat\" badge={2} badgeLabel=\"2 unread\" />\n        <RailNav.Item href=\"#jobs\" icon={icon(\"M5 6h14M5 12h14M5 18h9\")} label=\"Jobs\" />\n      </RailNav.Root>\n      <RailNav.Body>\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        />\n        <main id=\"content\" className=\"p-6 text-sm text-fg-secondary\">The screen's content.</main>\n      </RailNav.Body>\n    </RailNav.Shell>\n  );\n}\n"
+      },
+      {
+        "name": "expandable",
+        "title": "Expandable",
+        "description": "The same rail with a button that widens it to show the words, for users who do not know the icons yet.",
+        "path": "examples/rail-nav/expandable.tsx",
+        "module": "@krizaka/ui/registry/examples/rail-nav/expandable",
+        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AppHeader } from \"@krizaka/ui/app-header\";\nimport { RailNav } from \"@krizaka/ui/rail-nav\";\n\nconst dot = <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" aria-hidden><circle cx=\"12\" cy=\"12\" r=\"7\" /></svg>;\n\n// `expandable` adds a button that widens the rail to show the words (desktop). The state can be kept with `expanded`.\nexport default function RailNavExpandable() {\n  return (\n    <RailNav.Shell>\n      <RailNav.Root\n        label=\"Studio\"\n        accent=\"orochia\"\n        expandable\n        expandLabels={[\"Show the words\", \"Hide the words\"]}\n        mark={<a href=\"#home\" aria-label=\"Orochia, home\"><ProductLogo id=\"orochia\" size={26} animated={false} /></a>}\n      >\n        <RailNav.Item href=\"#home\" icon={dot} label=\"Home\" current />\n        <RailNav.Item href=\"#videos\" icon={dot} label=\"Videos\" />\n        <RailNav.Item href=\"#earnings\" icon={dot} label=\"Earnings\" />\n      </RailNav.Root>\n      <RailNav.Body>\n        <AppHeader name=\"Orochia\" mark={<ProductLogo id=\"orochia\" size={22} animated={false} />} />\n        <main id=\"content\" className=\"p-6 text-sm text-fg-secondary\">The screen's content.</main>\n      </RailNav.Body>\n    </RailNav.Shell>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [
+    {
+      "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": "marks/AkinazaLogo.tsx",
+      "content": "import { AKINAZA as G } from \"./akinaza-geometry\";\nimport { a11y, familyMotion, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = familyMotion(\"akm\", { ...G.motion, ...G.pulse });\n\n/**\n * The Akinaza mark, \"the cut log\": a log seen end-on in forest green, its year rings in light, cut at 45° by the beaver\n * (the Krizaka chamfer) with the fresh face in copper, and a copper heart that breathes — a shop built ring by ring.\n * One node, a coin, rides the dashed orbit. Below 48 px it crops to the emblem.\n */\nexport function AkinazaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"akm\", [\"glow\"] as const);\n  const m = (cls: string) => (animated ? `akm-${cls}` : undefined);\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <style>{CSS}</style>\n      <defs>\n        <radialGradient id={id.glow} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n          <stop offset=\"100%\" stopColor={G.glow.color} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      {size >= 48 ? <circle cx={G.center} cy={G.center} r=\"190\" fill={`url(#${id.glow})`} /> : null /* cropped: the halo would show its square */}\n      <circle cx={G.center} cy={G.center} r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n      <g className={m(\"orbit\")}>\n        <circle cx={G.center} cy={G.center} r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n        <circle cx={G.node.at[0]} cy={G.node.at[1]} r={G.node.r} fill={G.copper} />\n      </g>\n      <path d={G.log} fill={G.forest} />\n      <path d={G.cut} fill={G.copper} />\n      {G.rings.r.map((r) => (\n        <circle key={r} cx={G.rings.cx} cy={G.rings.cy} r={r} stroke={G.highlight} strokeOpacity={G.rings.opacity} strokeWidth={G.rings.width} />\n      ))}\n      <g className={m(\"core\")}>\n        <circle cx={G.heart.cx} cy={G.heart.cy} r={G.heart.r} fill={G.copper} />\n        <circle cx={G.heart.cx} cy={G.heart.cy} r={G.heart.inner} fill={G.highlight} />\n      </g>\n    </svg>\n  );\n}\n"
+    },
+    {
+      "path": "marks/KachizakaLogo.tsx",
+      "content": "import { KACHIZAKA as G } from \"./kachizaka-geometry\";\nimport { a11y, familyMotion, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = familyMotion(\"kcm\", { ...G.motion, ...G.pulse });\n\n/**\n * The Kachizaka mark, \"the podium\": three steps cut at their outer corners, the winner in gold and the others in cobalt\n * (the brand's two colours, kept apart), under a gold diamond — the family's lit node — that breathes: a friendly\n * leaderboard where only points change hands. One node, the ball, rides the dashed orbit. Below 48 px it crops to the\n * emblem.\n */\nexport function KachizakaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"kcm\", [\"glow\"] as const);\n  const m = (cls: string) => (animated ? `kcm-${cls}` : undefined);\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <style>{CSS}</style>\n      <defs>\n        <radialGradient id={id.glow} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n          <stop offset=\"100%\" stopColor={G.glow.color} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      {size >= 48 ? <circle cx={G.center} cy={G.center} r=\"190\" fill={`url(#${id.glow})`} /> : null /* cropped: the halo would show its square */}\n      <circle cx={G.center} cy={G.center} r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n      <g className={m(\"orbit\")}>\n        <circle cx={G.center} cy={G.center} r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n        <circle cx={G.ball.at[0]} cy={G.ball.at[1]} r={G.ball.r} fill={G.gold} />\n      </g>\n      <path d={G.steps.second} fill={G.cobalt} />\n      <path d={G.steps.first} fill={G.gold} />\n      <path d={G.steps.third} fill={G.cobalt} />\n      <g className={m(\"core\")}>\n        <path d={G.node.d} fill={G.gold} stroke={G.gold} strokeWidth={G.node.soften} strokeLinejoin=\"round\" />\n        <path d={G.node.light} fill={G.highlight} />\n      </g>\n    </svg>\n  );\n}\n"
+    },
+    {
+      "path": "marks/KrizakaLogo.tsx",
+      "content": "import { KRIZAKA as G } from \"./krizaka-geometry\";\nimport { a11y, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = `\n.kzm-spin { transform-origin: 200px 200px; animation: kzm-spin 30s linear infinite; }\n.kzm-pulse { transform-box: fill-box; transform-origin: center; animation: kzm-pulse 3.2s ease-in-out infinite; }\n@keyframes kzm-spin { to { transform: rotate(360deg); } }\n@keyframes kzm-pulse {\n  0%, 100% { filter: drop-shadow(0 0 6px hsla(217, 92%, 53%, .25)); opacity: .9; }\n  50% { filter: drop-shadow(0 0 14px hsla(217, 92%, 53%, .55)); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) { .kzm-spin, .kzm-pulse { animation: none; } }\n`;\n\n/**\n * The Krizaka mark: an ink hexagonal shield, open at one vertex where a blue node breaks out, around a blue core —\n * the parent of the family (Orochia's coiled serpent, Orazaka's shards). The orbit turns, the node and the core\n * breathe. The shield reads the host's text roles, so it is ink in both themes. Below 48 px it crops to the emblem.\n */\nexport function KrizakaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"kzm\", [\"ink\", \"blue\", \"glow\"] as const);\n  const m = (cls: string) => (animated ? cls : undefined);\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={id.ink} gradientUnits=\"userSpaceOnUse\" x1={G.ink.x1} y1={G.ink.y1} x2={G.ink.x2} y2={G.ink.y2}>\n          <stop offset=\"0%\" stopColor={neutral(\"--kz-text-secondary\", 60)} />\n          <stop offset=\"100%\" stopColor={neutral(\"--kz-text-primary\", 92)} />\n        </linearGradient>\n        <linearGradient id={id.blue} gradientUnits=\"userSpaceOnUse\" x1={G.blue.x1} y1={G.blue.y1} x2={G.blue.x2} y2={G.blue.y2}>\n          {G.blue.stops.map(([offset, color]) => (\n            <stop key={offset} offset={offset} stopColor={color} />\n          ))}\n        </linearGradient>\n        <radialGradient id={id.glow} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n          <stop offset=\"100%\" stopColor={G.glow.color} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      {size >= 48 ? <circle cx=\"200\" cy=\"200\" r=\"190\" fill={`url(#${id.glow})`} /> : null /* cropped: the halo would show its square */}\n      <circle className={m(\"kzm-spin\")} cx=\"200\" cy=\"200\" r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n      <circle cx=\"200\" cy=\"200\" r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n      <g transform={`translate(${G.offset} ${G.offset})`}>\n        <path d={G.shield} stroke={`url(#${id.ink})`} strokeWidth={G.stroke} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        <g className={m(\"kzm-pulse\")}>\n          <circle cx={G.node.cx} cy={G.node.cy} r={G.node.r} fill={`url(#${id.blue})`} />\n          <circle cx={G.node.cx} cy={G.node.cy} r={G.node.inner} fill={G.highlight} />\n        </g>\n        <g className={m(\"kzm-pulse\")}>\n          <circle cx={G.core.cx} cy={G.core.cy} r={G.core.r} fill={`url(#${id.blue})`} />\n          <circle cx={G.core.cx} cy={G.core.cy} r={G.core.inner} fill={G.highlight} />\n        </g>\n      </g>\n    </svg>\n  );\n}\n"
+    },
+    {
+      "path": "marks/OrazakaLogo.tsx",
+      "content": "import { ORAZAKA as G } from \"./orazaka-geometry\";\nimport { a11y, type MarkProps, neutral, useIds, withAlpha } from \"./shared\";\n\nconst CSS = `\n.ozm-orbit { transform-origin: 200px 200px; animation: ozm-orbit 35s linear infinite; }\n.ozm-core { transform-box: fill-box; transform-origin: center; animation: ozm-core 3.2s ease-in-out infinite; }\n@keyframes ozm-orbit { to { transform: rotate(360deg); } }\n@keyframes ozm-core {\n  0%, 100% { filter: drop-shadow(0 0 6px ${withAlpha(G.pulse.color, G.pulse.low)}); opacity: .9; }\n  50% { filter: drop-shadow(0 0 14px ${withAlpha(G.pulse.color, G.pulse.high)}); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) { .ozm-orbit, .ozm-core { animation: none; } }\n`;\n\n/**\n * The Orazaka mark: three solid hexagonal shards in the Orazaka orange (the brand's mark\n * gradient of @krizaka/tokens, deep orange → orange, hue 26 — the same in dark and light) orbiting slowly around a core that breathes —\n * the family's grammar (dashed orbit, ring, bold emblem, bright core). Below 48 px it crops to the emblem.\n */\nexport function OrazakaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"ozm\", [\"gradient\", \"glow\"] as const);\n  const fill = `url(#${id.gradient})`;\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={id.gradient} gradientUnits=\"userSpaceOnUse\" x1={G.gradient.x1} y1={G.gradient.y1} x2={G.gradient.x2} y2={G.gradient.y2}>\n          {G.gradient.stops.map(([offset, color]) => (\n            <stop key={offset} offset={offset} stopColor={color} />\n          ))}\n        </linearGradient>\n        <radialGradient id={id.glow} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n          <stop offset=\"100%\" stopColor={G.glow.color} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      {size >= 48 ? <circle cx={G.center} cy={G.center} r=\"190\" fill={`url(#${id.glow})`} /> : null /* cropped: the halo would show its square */}\n      <circle cx={G.center} cy={G.center} r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n      <circle cx={G.center} cy={G.center} r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n      <g className={animated ? \"ozm-orbit\" : undefined}>\n        {G.shards.map((d) => (\n          <path key={d} d={d} fill={fill} stroke={fill} strokeWidth={G.shardStroke} strokeLinejoin=\"round\" />\n        ))}\n      </g>\n      <g className={animated ? \"ozm-core\" : undefined}>\n        <circle cx={G.center} cy={G.center} r={G.core.r} fill={fill} />\n        <circle cx={G.center} cy={G.center} r={G.core.inner} fill={G.highlight} />\n      </g>\n    </svg>\n  );\n}\n"
+    },
+    {
+      "path": "marks/OrochiaLogo.tsx",
+      "content": "import { OROCHIA as G } from \"./orochia-geometry\";\nimport { a11y, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = `\n.orom-spin { transform-origin: 180px 180px; animation: orom-spin 30s linear infinite; }\n.orom-slither { animation: orom-slither 2.4s linear infinite; }\n.orom-pulse { transform-box: view-box; animation: orom-pulse 3.2s ease-in-out infinite; }\n@keyframes orom-spin { to { transform: rotate(360deg); } }\n@keyframes orom-slither { to { stroke-dashoffset: -64; } }\n@keyframes orom-pulse {\n  0%, 100% { filter: drop-shadow(0 0 6px hsla(292, 84%, 61%, .25)); opacity: .9; }\n  50% { filter: drop-shadow(0 0 14px hsla(292, 84%, 61%, .55)); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) { .orom-spin, .orom-slither, .orom-pulse { animation: none; } }\n`;\n\n/**\n * The Orochia mark: the serpent (Orochi) coiled into an \"O\" around the flame it guards. The orbit turns, scales slide\n * along the body, the eye and the flame breathe. Below 48 px it crops to the serpent: the orbits would be hairlines.\n */\nexport function OrochiaLogo({ size = 36, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"orom\", [\"body\", \"flame\", \"glow\"] as const);\n  const m = (cls: string) => (animated ? cls : undefined);\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={id.body} gradientUnits=\"userSpaceOnUse\" x1={G.body.x1} y1={G.body.y1} x2={G.body.x2} y2={G.body.y2}>\n          {G.body.stops.map(([offset, color]) => (\n            <stop key={offset} offset={offset} stopColor={color} />\n          ))}\n        </linearGradient>\n        <linearGradient id={id.flame} x1=\"50%\" y1=\"100%\" x2=\"50%\" y2=\"0%\">\n          {G.flameGradient.stops.map(([offset, color]) => (\n            <stop key={offset} offset={offset} stopColor={color} />\n          ))}\n        </linearGradient>\n        <radialGradient id={id.glow} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n          <stop offset=\"100%\" stopColor={G.glow.color} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      <g transform={`translate(${G.offset} ${G.offset})`}>\n        <circle cx=\"180\" cy=\"180\" r=\"170\" fill={`url(#${id.glow})`} />\n        <circle className={m(\"orom-spin\")} cx=\"180\" cy=\"180\" r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n        <circle cx=\"180\" cy=\"180\" r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n        <path d={G.arc} stroke={`url(#${id.body})`} strokeWidth=\"22\" strokeLinecap=\"round\" />\n        <path className={m(\"orom-slither\")} d={G.arc} stroke={G.scales.color} strokeOpacity={G.scales.opacity} strokeWidth={G.scales.width} strokeLinecap=\"round\" strokeDasharray={G.scales.dash} />\n        <path d={G.neck} stroke={`url(#${id.body})`} strokeWidth=\"14\" strokeLinecap=\"round\" />\n        <path d={G.tail} stroke={`url(#${id.body})`} strokeWidth=\"6\" strokeLinecap=\"round\" />\n        <ellipse cx={G.head.cx} cy={G.head.cy} rx={G.head.rx} ry={G.head.ry} transform={`rotate(${G.head.rotate} ${G.head.cx} ${G.head.cy})`} fill={`url(#${id.body})`} />\n        <path d={G.tongue.d} stroke={G.tongue.color} strokeWidth=\"3\" strokeLinecap=\"round\" />\n        <circle className={m(\"orom-pulse\")} cx={G.eye.cx} cy={G.eye.cy} r={G.eye.r} fill={G.eye.color} />\n        <path className={m(\"orom-pulse\")} transform={`translate(${G.flame.translate[0]} ${G.flame.translate[1]}) scale(${G.flame.scale})`} d={G.flame.d} fill={`url(#${id.flame})`} />\n      </g>\n    </svg>\n  );\n}\n"
+    },
+    {
+      "path": "marks/ProductLogo.tsx",
+      "content": "import { AkinazaLogo } from \"./AkinazaLogo\";\nimport { KachizakaLogo } from \"./KachizakaLogo\";\nimport { KrizakaLogo } from \"./KrizakaLogo\";\nimport { OrazakaLogo } from \"./OrazakaLogo\";\nimport { OrochiaLogo } from \"./OrochiaLogo\";\nimport type { MarkProps } from \"./shared\";\nimport { YasakiaLogo } from \"./YasakiaLogo\";\nimport { YomizakaLogo } from \"./YomizakaLogo\";\nimport { YororisLogo } from \"./YororisLogo\";\n\nexport type BrandId = \"krizaka\" | \"orazaka\" | \"orochia\" | \"yasakia\" | \"yororis\" | \"yomizaka\" | \"kachizaka\" | \"akinaza\";\n\n/** The mark of a Krizaka brand by id — for navigation, cards and lists driven by data. */\nexport function ProductLogo({ id, ...props }: MarkProps & { /** The brand: `krizaka`, `orazaka`, `orochia`, `yasakia`, `yororis`, `yomizaka`, `kachizaka` or `akinaza` (`yazakia`, deprecated: the old name of `yasakia`). */ id: BrandId | \"yazakia\" }) {\n  if (id === \"krizaka\") return <KrizakaLogo {...props} />;\n  if (id === \"orazaka\") return <OrazakaLogo {...props} />;\n  if (id === \"yasakia\" || id === \"yazakia\") return <YasakiaLogo {...props} />;\n  if (id === \"yororis\") return <YororisLogo {...props} />;\n  if (id === \"yomizaka\") return <YomizakaLogo {...props} />;\n  if (id === \"kachizaka\") return <KachizakaLogo {...props} />;\n  if (id === \"akinaza\") return <AkinazaLogo {...props} />;\n  return <OrochiaLogo {...props} />;\n}\n"
+    },
+    {
+      "path": "marks/YasakiaLogo.tsx",
+      "content": "import { a11y, familyMotion, type MarkProps, neutral, useIds } from \"./shared\";\nimport { YASAKIA as G } from \"./yasakia-geometry\";\n\nconst CSS = familyMotion(\"yzm\", { ...G.motion, ...G.pulse });\n\n/**\n * The Yasakia mark, \"one conversation\": one speech bubble with a tail on each side (turned 180°, never mirrored, so it\n * can never read as a face) in the Yasakia gradient (emerald → turquoise, the same in dark and light), and the spark\n * inside it — the family's lit node — that breathes: talk first, both ways. One node rides the dashed orbit. Below 48 px\n * it crops to the emblem.\n */\nexport function YasakiaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"yzm\", [\"gradient\", \"glow\"] as const);\n  const fill = `url(#${id.gradient})`;\n  const m = (cls: string) => (animated ? `yzm-${cls}` : undefined);\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={id.gradient} gradientUnits=\"userSpaceOnUse\" x1={G.gradient.x1} y1={G.gradient.y1} x2={G.gradient.x2} y2={G.gradient.y2}>\n          {G.gradient.stops.map(([offset, color]) => (\n            <stop key={offset} offset={offset} stopColor={color} />\n          ))}\n        </linearGradient>\n        <radialGradient id={id.glow} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n          <stop offset=\"100%\" stopColor={G.glow.color} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      {size >= 48 ? <circle cx={G.center} cy={G.center} r=\"190\" fill={`url(#${id.glow})`} /> : null /* cropped: the halo would show its square */}\n      <circle cx={G.center} cy={G.center} r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n      <g className={m(\"orbit\")}>\n        <circle cx={G.center} cy={G.center} r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n        <circle cx={G.node.at[0]} cy={G.node.at[1]} r={G.node.r} fill={fill} />\n      </g>\n      <circle cx={G.bubble.cx} cy={G.bubble.cy} r={G.bubble.r} fill={fill} />\n      <path d={G.tails.join(\" \")} fill={fill} />\n      <g className={m(\"core\")}>\n        <path d={G.spark.d} fill={G.highlight} stroke={G.highlight} strokeWidth={G.spark.soften} strokeLinejoin=\"round\" />\n      </g>\n    </svg>\n  );\n}\n\n/** @deprecated Yazakia was renamed Yasakia (2026-10): use `YasakiaLogo`. Kept for one minor version. */\nexport const YazakiaLogo = YasakiaLogo;\n"
+    },
+    {
+      "path": "marks/YomizakaLogo.tsx",
+      "content": "import { a11y, familyMotion, type MarkProps, neutral, useIds } from \"./shared\";\nimport { YOMIZAKA as G } from \"./yomizaka-geometry\";\n\nconst CSS = familyMotion(\"ymm\", { ...G.motion, ...G.pulse });\n\n/**\n * The Yomizaka mark, \"the watch\": the owl — two lenses at the family stroke under one calm brow, its pupils glancing\n * down the line it reads — in the Yomizaka gradient (ink → indigo, the same in dark and light). The pupils are the lit\n * cores and breathe; one node, a page, rides the dashed orbit. Below 48 px it crops to the emblem.\n */\nexport function YomizakaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"ymm\", [\"gradient\", \"glow\"] as const);\n  const fill = `url(#${id.gradient})`;\n  const m = (cls: string) => (animated ? `ymm-${cls}` : undefined);\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={id.gradient} gradientUnits=\"userSpaceOnUse\" x1={G.gradient.x1} y1={G.gradient.y1} x2={G.gradient.x2} y2={G.gradient.y2}>\n          {G.gradient.stops.map(([offset, color]) => (\n            <stop key={offset} offset={offset} stopColor={color} />\n          ))}\n        </linearGradient>\n        <radialGradient id={id.glow} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n          <stop offset=\"100%\" stopColor={G.glow.color} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      {size >= 48 ? <circle cx={G.center} cy={G.center} r=\"190\" fill={`url(#${id.glow})`} /> : null /* cropped: the halo would show its square */}\n      <circle cx={G.center} cy={G.center} r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n      <g className={m(\"orbit\")}>\n        <circle cx={G.center} cy={G.center} r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n        <circle cx={G.node.at[0]} cy={G.node.at[1]} r={G.node.r} fill={fill} />\n      </g>\n      <path d={G.brow} stroke={fill} strokeWidth={G.stroke} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      {G.lenses.map((l) => (\n        <circle key={l.cx} cx={l.cx} cy={l.cy} r={l.r} stroke={fill} strokeWidth={G.stroke} />\n      ))}\n      <g className={m(\"core\")}>\n        {G.pupils.map((p) => (\n          <g key={p.cx}>\n            <circle cx={p.cx} cy={p.cy} r={p.r} fill={fill} />\n            <circle cx={p.cx} cy={p.cy} r={p.inner} fill={G.highlight} />\n          </g>\n        ))}\n      </g>\n    </svg>\n  );\n}\n"
+    },
+    {
+      "path": "marks/YororisLogo.tsx",
+      "content": "import { a11y, familyMotion, type MarkProps, neutral, useIds } from \"./shared\";\nimport { YORORIS as G } from \"./yororis-geometry\";\n\nconst CSS = familyMotion(\"yrm\", { ...G.motion, ...G.pulse });\n\n/**\n * The Yororis mark, \"held\": two open hands, two sage arcs of one circle, cup a warm sand core without closing on it —\n * held, given room, free to go. The core breathes, the slowest breath of the family; one node, the moment, rides the\n * dashed orbit. Below 48 px it crops to the emblem.\n */\nexport function YororisLogo({ size = 32, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"yrm\", [\"glow\"] as const);\n  const m = (cls: string) => (animated ? `yrm-${cls}` : undefined);\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <style>{CSS}</style>\n      <defs>\n        <radialGradient id={id.glow} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n          <stop offset=\"100%\" stopColor={G.glow.color} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      {size >= 48 ? <circle cx={G.center} cy={G.center} r=\"190\" fill={`url(#${id.glow})`} /> : null /* cropped: the halo would show its square */}\n      <circle cx={G.center} cy={G.center} r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n      <g className={m(\"orbit\")}>\n        <circle cx={G.center} cy={G.center} r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n        <circle cx={G.node.at[0]} cy={G.node.at[1]} r={G.node.r} fill={G.sage} />\n      </g>\n      <path d={G.hands} stroke={G.sage} strokeWidth={G.stroke} strokeLinecap=\"round\" />\n      <g className={m(\"core\")}>\n        <circle cx={G.core.cx} cy={G.core.cy} r={G.core.r} fill={G.sand} />\n        <circle cx={G.core.cx} cy={G.core.cy} r={G.core.inner} fill={G.highlight} />\n      </g>\n    </svg>\n  );\n}\n"
+    },
+    {
+      "path": "marks/akinaza-geometry.ts",
+      "content": "import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The Akinaza mark's geometry — drawn by the web mark (AkinazaLogo) and the native one (AkinazaMark). The family's\n * grammar (packages/tokens/BRAND.md, \"Marks\"): 400×400 view box, dashed orbit and ring, a bold solid emblem, a lit core;\n * below 48 px the view box crops to the emblem.\n *\n * The emblem is **the cut log** (2026-10-17): a log seen end-on, its year rings in light, cut at 45° by the beaver —\n * the cut is the Krizaka chamfer, its fresh face in copper — and a copper heart that breathes: a shop built ring by\n * ring, year after year. Forest and copper stay **apart** (blended they turn brown): they are the two stops of the\n * brand's mark gradient (`marks.akinaza` of @krizaka/tokens), each ≥ 3:1 on the page surfaces of both themes.\n *\n * Literal geometry (no clip, so web and native draw the same thing): the log is a circle r 96 centred (194, 206) — set\n * off the centre so the cut log sits optically centred — minus the segment beyond the 45° chord at 70 from its centre;\n * the copper face is the band between that chord and a parallel one at 58, bounded by the circle.\n */\nconst forest = marks.akinaza[0]![1];\n/** The copper end: the cut, the heart, the halo and its breath. */\nconst copper = marks.akinaza[marks.akinaza.length - 1]![1];\n\nexport const AKINAZA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"80 80 240 240\",\n  center: 200,\n  forest,\n  copper,\n  log: \"M197 110 L290 203 A96 96 0 1 1 197 110 Z\",\n  /** The fresh face of the cut: a copper band along the chord. */\n  cut: \"M197 110 L290 203 A96 96 0 0 1 289.1 219.1 L180.9 110.9 A96 96 0 0 1 197 110 Z\",\n  /** The year rings, in light, inside the band. */\n  rings: { cx: 194, cy: 206, r: [52, 28], width: 7, opacity: 0.42 },\n  heart: { cx: 194, cy: 206, r: 16, inner: 5.4 },\n  highlight: \"#fff7ed\",\n  gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.akinaza },\n  /** A coin: one node on the orbit, that turns with it. */\n  node: { r: 9, at: [200, 40] as const },\n  glow: { color: copper, opacity: 0.16 },\n  pulse: { color: copper, low: 0.3, high: 0.65 },\n  motion: { spin: 32, breath: 3.8 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n} as const;\n"
+    },
+    {
+      "path": "marks/kachizaka-geometry.ts",
+      "content": "import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The Kachizaka mark's geometry — drawn by the web mark (KachizakaLogo) and the native one (KachizakaMark). The family's\n * grammar (packages/tokens/BRAND.md, \"Marks\"): 400×400 view box, dashed orbit and ring, a bold solid emblem, a lit core;\n * below 48 px the view box crops to the emblem.\n *\n * The emblem is **the podium** (2026-10-17): three steps, their outer corners wearing the Krizaka cut, the winner in\n * gold and the others in cobalt, under the family's lit node (a diamond) that breathes — a friendly leaderboard where\n * only points change hands. The two colours of the brand stay **apart** (cobalt plays, gold wins): blended, cobalt →\n * gold turns grey. They are the two stops of the brand's mark gradient (`marks.kachizaka` of @krizaka/tokens), each\n * ≥ 3:1 on the page surfaces of both themes.\n */\nconst cobalt = marks.kachizaka[0]![1];\n/** The gold end: the winner, the node, the halo and its breath. */\nconst gold = marks.kachizaka[marks.kachizaka.length - 1]![1];\n\nexport const KACHIZAKA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"80 80 240 240\",\n  center: 200,\n  cobalt,\n  gold,\n  /** The steps: second (left, cut top-left), first (centre, both top corners cut, in gold), third (right, cut top-right). */\n  steps: {\n    second: \"M102 240 L122 220 H162 V296 H102 Z\",\n    first: \"M170 192 L188 174 H212 L230 192 V296 H170 Z\",\n    third: \"M238 248 H278 L298 268 V296 H238 Z\",\n  },\n  /** The lit node over the winner: a gold diamond (half-diagonal 22, softened by a 6-unit round stroke), its light inside. */\n  node: { d: \"M200 102 L222 124 L200 146 L178 124 Z\", light: \"M200 116.1 L207.9 124 L200 131.9 L192.1 124 Z\", soften: 6 },\n  highlight: \"#fffbea\",\n  gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.kachizaka },\n  /** The ball: one node on the orbit, that turns with it. */\n  ball: { r: 9, at: [200, 40] as const },\n  glow: { color: gold, opacity: 0.18 },\n  pulse: { color: gold, low: 0.35, high: 0.75 },\n  motion: { spin: 28, breath: 3.2 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n} as const;\n"
+    },
+    {
+      "path": "marks/krizaka-geometry.ts",
+      "content": "import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The Krizaka mark's geometry — the one description drawn by the web mark (KrizakaLogo) and the native one\n * (KrizakaMark). Built on the Orochia mark's grammar (docs: packages/tokens/BRAND.md, \"Marks\"): a 360×360 artwork at\n * (20, 20) in a 400×400 view box, one bold stroke (22) drawn as an open figure, an end that breaks out as a node, a\n * core, a dashed orbit and a ring; below 48 px the view box crops to the emblem.\n *\n * Krizaka is the parent: the hexagonal shield is **ink** (the host's text roles), the node and the core carry the\n * Krizaka blue (`marks.krizaka` of @krizaka/tokens: the brand's accent hsl(217 92% 53%) → its text tint hsl(217 92% 68%)).\n */\nexport const KRIZAKA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"86 82 228 228\",\n  offset: 20,\n  /** The shield: a pointy-top hexagon (r 92 around 180,180), open at its upper-right edge. */\n  shield: \"M259.7,134 L259.7,226 L180,272 L100.3,226 L100.3,134 L180,88 L212,106.5\",\n  stroke: 22,\n  ink: { x1: 70, y1: 290, x2: 290, y2: 70 },\n  blue: { x1: 180, y1: 180, x2: 300, y2: 60, stops: marks.krizaka },\n  /** The vertex where the shield opens: a node (the serpent's head in Orochia's grammar). */\n  node: { cx: 259.7, cy: 134, r: 19, inner: 6 },\n  core: { cx: 180, cy: 180, r: 24, inner: 8 },\n  highlight: \"#dbeafe\",\n  glow: { color: \"#196df5\", opacity: 0.16 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n} as const;\n"
+    },
+    {
+      "path": "marks/orazaka-geometry.ts",
+      "content": "import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The Orazaka mark's geometry — drawn by the web mark (OrazakaLogo) and the native one (OrazakaMark). The same\n * grammar as Orochia and Krizaka (packages/tokens/BRAND.md, \"Marks\"): 400×400 view box, dashed orbit and ring, a bold\n * emblem in the brand gradient, a bright core; below 48 px the view box crops to the emblem.\n *\n * The emblem keeps the original idea — three hexagonal shards orbiting a core — drawn as solid shards (the weight of\n * Orochia's body) in the Orazaka orange: the brand's mark gradient (`marks.orazaka` of @krizaka/tokens, the same source\n * as the accent), deep orange → orange on the accent's hue 26 — never the amber of --kz-warning (hue 38). Every stop\n * reads ≥ 3:1 on the page surfaces of both themes (tested in @krizaka/tokens), so one mark serves dark and light.\n */\n/** The bright end of the gradient: the halo and the core's glow. */\nconst orange = marks.orazaka[marks.orazaka.length - 1]![1];\n\nexport const ORAZAKA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"76 76 248 248\",\n  center: 200,\n  /**\n   * The three shards — a hexagon's cap (from the original 132-unit drawing), scaled ×1.9 around the centre and turned\n   * 0°, 120°, 240° — in view-box coordinates, so that one gradient runs across all three.\n   */\n  shards: [\n    \"M154.4,121.2 L200,94.7 L245.6,121.2 L245.6,154.4 L226.6,165.4 L226.6,132.2 L200,116.8 L173.4,132.2 L173.4,165.4 L154.4,154.4 Z\",\n    \"M291.1,199.9 L291.2,252.6 L245.5,278.9 L216.7,262.3 L216.6,240.3 L245.4,257 L272.1,241.6 L272,210.9 L243.2,194.3 L262.3,183.3 Z\",\n    \"M154.5,278.9 L108.8,252.6 L108.9,199.9 L137.7,183.3 L156.8,194.3 L128,210.9 L127.9,241.6 L154.6,257 L183.4,240.3 L183.3,262.3 Z\",\n  ],\n  shardStroke: 5.7,\n  gradient: { x1: 90, y1: 310, x2: 310, y2: 90, stops: marks.orazaka },\n  core: { r: 21, inner: 7.6 },\n  highlight: \"#fff7ed\",\n  glow: { color: orange, opacity: 0.16 },\n  /** The core's breathing shadow (web), in the mark's orange. */\n  pulse: { color: orange, low: 0.3, high: 0.6 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n} as const;\n"
+    },
+    {
+      "path": "marks/orochia-geometry.ts",
+      "content": "import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The Orochia mark's geometry — the one description of the serpent and its flame, drawn by the web mark (SVG in the\n * DOM, OrochiaLogo) and the native one (react-native-svg, @krizaka/ui/native). Coordinates are in the 360×360 artwork,\n * placed at (20, 20) in a 400×400 view box; below 48 px the view box crops to the serpent. The body's gradient is the\n * brand's mark gradient (`marks.orochia` of @krizaka/tokens).\n */\nexport const OROCHIA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"86 82 228 228\",\n  offset: 20,\n  body: { x1: 70, y1: 290, x2: 290, y2: 70, stops: marks.orochia },\n  flameGradient: { stops: [[\"0%\", \"#a855f7\"], [\"100%\", \"#f9a8d4\"]] },\n  glow: { color: \"#d946ef\", opacity: 0.18 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n  arc: \"M259.8,142.8 A88,88 0 1 1 142.8,100.2\",\n  neck: \"M142.8,100.2 A88,88 0 0 1 187.7,92.3\",\n  tail: \"M187.7,92.3 A88,88 0 0 1 221.3,102.3\",\n  scales: { color: \"#fdf4ff\", opacity: 0.45, width: 3, dash: \"2 14\" },\n  head: { cx: 253.9, cy: 130.1, rx: 13, ry: 20, rotate: -25 },\n  tongue: { d: \"M245.4,112.0 L242.0,104.8 L235.0,101.5 M242.0,104.8 L244.0,97.3\", color: \"#f472b6\" },\n  eye: { cx: 256.3, cy: 123.5, r: 4.5, color: \"#fdf4ff\" },\n  flame: {\n    translate: [127, 120] as const,\n    scale: 4.4,\n    d: \"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\",\n  },\n} as const;\n"
+    },
+    {
+      "path": "marks/shared.ts",
+      "content": "import { useId } from \"react\";\n\nexport interface MarkProps {\n  /** Width and height in pixels. */\n  size?: number;\n  /** Orbit, pulse and shimmer. Off with `false`; always off under prefers-reduced-motion. */\n  animated?: boolean;\n  /** An accessible name (the mark becomes an image); without it the mark is decorative. */\n  title?: string;\n  className?: string;\n}\n\n/** A neutral stroke: the host's `--kz-*` token when it has one, else the text colour at a low opacity. */\nexport const neutral = (token: string, percent: number) => `var(${token}, color-mix(in srgb, currentColor ${percent}%, transparent))`;\n\n/** Ids unique per instance, so several marks on a page never share a gradient. */\nexport function useIds<K extends string>(prefix: string, keys: readonly K[]): Record<K, string> {\n  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n  return Object.fromEntries(keys.map((k) => [k, `${prefix}-${k}-${uid}`])) as Record<K, string>;\n}\n\nexport const a11y = (title?: string) => (title ? { role: \"img\" as const, \"aria-label\": title } : { \"aria-hidden\": true as const });\n\n/** `#rrggbb` + an opacity → `#rrggbbaa` (a brand colour in a CSS shadow). */\nexport const withAlpha = (hex: string, opacity: number) => `${hex}${Math.round(opacity * 255).toString(16).padStart(2, \"0\")}`;\n\n/**\n * The family's motion (web), for a mark whose classes start with `prefix`: `<prefix>-orbit` turns the dashed orbit and\n * its node, `<prefix>-core` makes the lit core breathe (a shadow in the brand colour). Still under prefers-reduced-motion.\n */\nexport const familyMotion = (prefix: string, { spin, breath, color, low, high }: { spin: number; breath: number; color: string; low: number; high: number }) => `\n.${prefix}-orbit { transform-origin: 200px 200px; animation: ${prefix}-orbit ${spin}s linear infinite; }\n.${prefix}-core { transform-box: fill-box; transform-origin: center; animation: ${prefix}-core ${breath}s ease-in-out infinite; }\n@keyframes ${prefix}-orbit { to { transform: rotate(360deg); } }\n@keyframes ${prefix}-core {\n  0%, 100% { filter: drop-shadow(0 0 6px ${withAlpha(color, low)}); opacity: .92; }\n  50% { filter: drop-shadow(0 0 16px ${withAlpha(color, high)}); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) { .${prefix}-orbit, .${prefix}-core { animation: none; } }\n`;\n"
+    },
+    {
+      "path": "marks/yasakia-geometry.ts",
+      "content": "import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The Yasakia mark's geometry — drawn by the web mark (YasakiaLogo) and the native one (YasakiaMark). The family's\n * grammar (packages/tokens/BRAND.md, \"Marks\"): 400×400 view box, dashed orbit and ring, a bold solid emblem in the\n * brand gradient, a lit core; below 48 px the view box crops to the emblem.\n *\n * The emblem is **one conversation** (2026-10-17): one speech bubble with a tail on each side — the conversation\n * belongs to both people, talk first — and the spark inside it, the family's lit node, breathes. The tails turn about\n * the centre (180°): the mark is symmetric by rotation, never by mirror, so it can never read as a face. The gradient\n * is the brand's mark gradient (`marks.yasakia` of @krizaka/tokens): emerald → turquoise, ≥ 3:1 on both themes.\n */\n/** The turquoise end of the gradient: the halo and the spark's breath. */\nconst turquoise = marks.yasakia[marks.yasakia.length - 1]![1];\n\nexport const YASAKIA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"80 80 240 240\",\n  center: 200,\n  bubble: { cx: 200, cy: 200, r: 86 },\n  /** The two tails, out of the bubble at 115°–160° and, turned 180° about the centre, at 295°–340°. */\n  tails: [\n    \"M163.7 277.9 Q138 294 106 304 Q124 270 119.2 229.4 Z\",\n    \"M236.3 122.1 Q262 106 294 96 Q276 130 280.8 170.6 Z\",\n  ],\n  /** The spark: a diamond of light (half-diagonal 24, softened by a 6-unit round stroke). */\n  spark: { d: \"M200 176 L224 200 L200 224 L176 200 Z\", soften: 6 },\n  highlight: \"#f0fdfa\",\n  gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.yasakia },\n  /** The two people: one node on the orbit, that turns with it. */\n  node: { r: 9, at: [200, 40] as const },\n  glow: { color: turquoise, opacity: 0.16 },\n  pulse: { color: turquoise, low: 0.3, high: 0.6 },\n  motion: { spin: 30, breath: 3.2 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n} as const;\n"
+    },
+    {
+      "path": "marks/yomizaka-geometry.ts",
+      "content": "import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The Yomizaka mark's geometry — drawn by the web mark (YomizakaLogo) and the native one (YomizakaMark). The family's\n * grammar (packages/tokens/BRAND.md, \"Marks\"): 400×400 view box, dashed orbit and ring, a bold emblem at the family\n * stroke (22) in the brand gradient, a lit core; below 48 px the view box crops to the emblem.\n *\n * The emblem is **the watch** (2026-10-17): the owl — the bird that reads documents and knows faces — drawn as two\n * lenses under one calm brow, its pupils glancing down the line it reads. The brow is a soft double curve (never a\n * sharp V: the owl is attentive, not stern). The pupils are the lit cores: they breathe. The gradient is the brand's\n * mark gradient (`marks.yomizaka` of @krizaka/tokens): ink → indigo, ≥ 3:1 on the page surfaces of both themes.\n */\n/** The indigo end of the gradient: the halo and the pupils' breath. */\nconst indigo = marks.yomizaka[marks.yomizaka.length - 1]![1];\n\nexport const YOMIZAKA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"80 80 240 240\",\n  center: 200,\n  stroke: 22,\n  /** The brow: two soft arcs that meet over the beak — calm, never a sharp V. */\n  brow: \"M106 153 C130 125 176 129 200 159 C224 129 270 125 294 153\",\n  /** The two lenses (rings at the family stroke). */\n  lenses: [\n    { cx: 146, cy: 223, r: 40 },\n    { cx: 254, cy: 223, r: 40 },\n  ],\n  /** The pupils, glancing down-right (reading): the lit cores. */\n  pupils: [\n    { cx: 154, cy: 229, r: 15, inner: 5.1 },\n    { cx: 262, cy: 229, r: 15, inner: 5.1 },\n  ],\n  highlight: \"#f4f5ff\",\n  gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.yomizaka },\n  /** One node, a page, rides the orbit. */\n  node: { r: 9, at: [200, 40] as const },\n  glow: { color: indigo, opacity: 0.18 },\n  pulse: { color: indigo, low: 0.3, high: 0.6 },\n  motion: { spin: 32, breath: 3.6 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n} as const;\n"
+    },
+    {
+      "path": "marks/yororis-geometry.ts",
+      "content": "import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The Yororis mark's geometry — drawn by the web mark (YororisLogo) and the native one (YororisMark). The family's\n * grammar (packages/tokens/BRAND.md, \"Marks\"): 400×400 view box, dashed orbit and ring, a bold emblem at the family\n * stroke (22), a lit core; below 48 px the view box crops to the emblem.\n *\n * The emblem is **held** (2026-10-17): two open hands, drawn as two arcs of one circle, cup a warm core without\n * closing on it — held, given room, free to go. The arcs are sage, the core sand: the two stops of the brand's mark\n * gradient (`marks.yororis` of @krizaka/tokens), each ≥ 3:1 on the page surfaces of both themes. The slowest breath of\n * the family (4.2 s).\n */\nconst sand = marks.yororis[0]![1];\n/** The sage end: the hands, the halo. */\nconst sage = marks.yororis[marks.yororis.length - 1]![1];\n\nexport const YORORIS = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"80 80 240 240\",\n  center: 200,\n  stroke: 22,\n  sand,\n  sage,\n  /** The two hands: arcs of a circle r 92 centred (200, 162), from 196° to 104° and from 76° to −16°; open at the bottom and the top. */\n  hands: \"M111.6 136.6 A92 92 0 0 0 177.7 251.3 M222.3 251.3 A92 92 0 0 0 288.4 136.6\",\n  /** The warm core, held inside the hands. */\n  core: { cx: 200, cy: 176, r: 30, inner: 10.2 },\n  highlight: \"#fbf6ea\",\n  gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.yororis },\n  /** The moment: one node on the orbit — it comes round, then it goes. */\n  node: { r: 9, at: [200, 40] as const },\n  glow: { color: sage, opacity: 0.18 },\n  pulse: { color: sand, low: 0.3, high: 0.6 },\n  motion: { spin: 36, breath: 4.2 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n} as const;\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  | \"achievement\"\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  | \"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  | \"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  | \"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  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"photo-grid\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\n  | \"radio-group\"\n  | \"rail-nav\"\n  | \"recipes\"\n  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"showcase\"\n  | \"step-showcase\"\n  | \"site-footer\"\n  | \"sites\"\n  | \"skeleton\"\n  | \"skip-link\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\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": "rail-nav/index.ts",
+      "content": "/** @krizaka/ui/rail-nav — `RailNav` (Shell, Root, Item, Body), `railNav`: a compact vertical rail of icons that becomes a bottom tab bar on a phone. Client. */\nexport {\n  RailNav,\n  railNav,\n  RailNavBody,\n  RailNavItem,\n  type RailNavItemProps,\n  RailNavRoot,\n  type RailNavRootProps,\n  RailNavShell,\n} from \"./rail-nav\";\n"
+    },
+    {
+      "path": "rail-nav/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Rail nav\",\n  summary: \"The compact navigation of an application: a vertical rail of icons on a desktop — the product's mark on top, a tooltip on each icon, an accent bar on the current one, a footer for settings and the account — that becomes a bottom tab bar on a phone. Paired with `AppHeader`, which carries the product's name (and, on a phone, its mark).\",\n  status: \"beta\",\n  category: \"navigation\",\n  platforms: \"web\",\n  parity: { native: { status: \"n/a\", reason: \"On a phone the rail is already a bottom tab bar; a native app uses the TabBar.\", use: \"tab-bar\" }, desktop: \"web\" },\n  whenToUse: [\n    \"An application with three to eight destinations the user works in all day (Home, Studios, Chat, Jobs, Settings) and little else in the way: the rail leaves the screen to the work.\",\n    \"When the same sections must read as a vertical rail on a desktop and as tabs on a phone, written once.\",\n  ],\n  whenNotToUse: [\n    { when: \"Grouped sections, counts and a collapsing sidebar of words, a console with shortcuts.\", use: \"app-shell\" },\n    { when: \"A public site's pages.\", use: \"nav-bar\" },\n    { when: \"A native mobile app.\", use: \"tab-bar\" },\n    { when: \"Views of one screen.\", use: \"tabs\" },\n  ],\n  bestPractices: [\n    \"Five main items at most: on a phone they are the tabs (the footer's items follow them in the same bar, so keep both short).\",\n    \"Give every item an icon and a word: the icon is all a desktop shows, the word is the tooltip, the tab's caption and the accessible name.\",\n    \"Put the product's mark in `mark` and its name in `AppHeader`: the mark is shown once, in the rail on a desktop and in the header on a phone. Never draw it in both.\",\n    \"Render your router's links with `RailNav.Item asChild`; set `current` from the route.\",\n    \"Scope the product's colours with `accent` (`orazaka`, `orochia`…) or let the page's brand class do it.\",\n    \"`expandable` is for apps whose users know the icons less well: it widens the rail to show the words.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Tab\", action: \"Moves through the items, the footer's controls and the expand button.\" },\n      { keys: \"↑ ↓ (rail) · ← → (tab bar)\", action: \"Moves the focus to the previous or next item, wrapping at the ends; both pairs always work.\" },\n      { keys: \"Home / End\", action: \"Focuses the first or the last item.\" },\n      { keys: \"Esc\", action: \"Dismisses a tooltip that is showing.\" },\n    ],\n    notes: [\n      \"A `nav` named by `label`; the current item carries `aria-current=\\\"page\\\"`.\",\n      \"Each item is named by its `label` (and `badgeLabel`): the tooltip and the caption repeat it, they never replace it.\",\n      \"The focus ring is the Krizaka signature (`focus-ring-inset`), kept inside the rail's edge so it is never clipped.\",\n      \"A tab is at least 56 px tall, clear of the home indicator (`env(safe-area-inset-bottom)`); the motion of the width respects `prefers-reduced-motion`.\",\n      \"Exactly one brand mark is visible at every width: the rail's `mark` below `md` is hidden and `AppHeader`'s `mark` is shown there, and the reverse above.\",\n    ],\n  },\n  related: [\"app-header\", \"app-shell\", \"nav-bar\", \"tooltip\", \"tab-bar\"],\n  web: {\n    imports: [\"RailNav\"],\n    examples: [\n      { name: \"studio\", title: \"A studio\", description: \"Orazaka's signed-in app: the mark on top of the rail, five sections with the current one lit, settings at the foot, the header with the name and a status chip.\", template: true, purpose: \"operate\", why: \"A person works in a few sections all day: the rail keeps them one icon away and leaves the screen to the work; on a phone the same sections are the tabs.\" },\n      { name: \"expandable\", title: \"Expandable\", description: \"The same rail with a button that widens it to show the words, for users who do not know the icons yet.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "rail-nav/rail-nav.tsx",
+      "content": "// Client (the expand state, the arrow keys, the tooltip). The compact navigation of an application, read from Orazaka's\n// web client: a vertical rail of icons on a desktop — the product's mark on top, a tooltip on each icon, the current one\n// marked by an accent bar on its left edge, a footer for settings and the account — that becomes a bottom tab bar on a\n// phone. The same nodes in both: only the layout changes, so the items, their order and their words are written once.\n// The mark lives in the rail on a desktop; on a phone, where the rail has no room for it, `AppHeader` shows it (the rule\n// « one mark visible at every width »). Brand-aware through the tokens: `accent` scopes `.brand-<id>`.\nimport { Tooltip } from \"@krizaka/ui/tooltip\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { ChevronGlyph } from \"../glyphs\";\nimport type { BrandId } from \"../marks/ProductLogo\";\n\nexport const railNav = tv({\n  slots: {\n    shell: \"flex min-h-dvh w-full bg-surface-0 text-fg\",\n    root:\n      // Phone: a bottom tab bar, clear of the home indicator. Desktop: a sticky column that is only as wide as its icons.\n      \"fixed inset-x-0 bottom-0 z-40 flex h-[calc(3.5rem+env(safe-area-inset-bottom))] flex-row border-t border-border-subtle bg-surface-1/95 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl \" +\n      \"md:sticky md:inset-auto md:top-0 md:bottom-auto md:z-auto md:h-dvh md:w-14 md:shrink-0 md:flex-col md:border-t-0 md:border-r md:bg-surface-1 md:pb-0 md:backdrop-blur-none \" +\n      \"md:transition-[width] md:duration-300 motion-reduce:md:transition-none md:data-expanded:w-56\",\n    // The mark is the rail's on a desktop; hidden on a phone (the header carries it there).\n    mark: \"hidden h-14 w-full shrink-0 items-center justify-center md:flex md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-4\",\n    group: \"flex min-w-0 flex-row items-stretch md:flex-col md:items-center md:gap-1 md:px-1.5 md:group-data-expanded/rail:items-stretch\",\n    main: \"max-md:grow-(--rail-n) md:flex-1 md:py-2\",\n    foot: \"max-md:grow-(--rail-n) md:border-t md:border-border-subtle md:py-2\",\n    item:\n      \"group/item relative flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 px-1 text-[11px] font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring-inset \" +\n      \"aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg-accent \" +\n      // The accent bar: on the top edge of a tab, on the left edge of a rail item.\n      \"before:absolute before:inset-x-3 before:top-0 before:h-[3px] before:rounded-b-full before:bg-accent before:opacity-0 before:transition-opacity aria-[current=page]:before:opacity-100 \" +\n      \"md:h-10 md:w-full md:flex-none md:flex-row md:justify-center md:gap-3 md:rounded-none md:px-0 md:text-sm \" +\n      \"md:before:inset-x-auto md:before:inset-y-2 md:before:left-0 md:before:top-2 md:before:h-auto md:before:w-[3px] md:before:rounded-r-full md:before:rounded-b-none \" +\n      \"md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-3.5 [&>svg]:h-5 [&>svg]:w-5 [&>svg]:shrink-0\",\n    icon: \"relative inline-flex shrink-0 items-center justify-center [&>svg]:h-5 [&>svg]:w-5\",\n    label: \"max-w-full truncate leading-none md:sr-only md:text-sm md:leading-normal md:group-data-expanded/rail:not-sr-only\",\n    badge:\n      \"absolute -right-2 -top-1.5 inline-flex min-w-4 items-center justify-center rounded-full bg-accent px-1 text-[10px] font-bold leading-4 text-on-accent after:content-[attr(data-count)]\",\n    toggle:\n      \"hidden h-10 w-full items-center justify-center gap-3 text-xs font-medium text-fg-secondary hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring-inset md:flex \" +\n      \"md:group-data-expanded/rail:justify-start md:group-data-expanded/rail:px-3.5\",\n    body: \"flex min-w-0 flex-1 flex-col max-md:pb-[calc(3.5rem+env(safe-area-inset-bottom))]\",\n  },\n});\nconst s = railNav();\n\ninterface RailState {\n  expanded: boolean;\n}\nconst RailContext = React.createContext<RailState | null>(null);\nconst useRail = () => {\n  const ctx = React.useContext(RailContext);\n  if (!ctx) throw new Error(\"RailNav parts must be inside <RailNav.Root>\");\n  return ctx;\n};\n\n/** The frame of the page: the rail, then `RailNav.Body` (the header and the content). A row on a desktop. */\nexport function RailNavShell({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.shell({ className })} {...props} />;\n}\n\n/** The column beside the rail: the `AppHeader`, then the content. On a phone it keeps clear of the tab bar. */\nexport function RailNavBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport type RailNavRootProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  /** The navigation's accessible name (`Orazaka`, `Studio`). */\n  label: string;\n  /** The product's mark on top of the rail, as a link home (`<Link href=\"/\"><ProductLogo id=\"orazaka\" /></Link>`); named by the app (its `aria-label`). Hidden on a phone: `AppHeader` shows it there. */\n  mark?: React.ReactNode;\n  /** The product's brand: scopes its colours (`brand-orazaka`…) over the rail, so the accent follows. Omit it inside a page that already wears the brand. */\n  accent?: BrandId;\n  /** The main destinations: `RailNav.Item`, the ones you work in. Five at most so that they fit a phone's tab bar. */\n  children: React.ReactNode;\n  /** At the foot of the rail (settings, account), after the main items; on a phone they follow them in the same bar. `RailNav.Item`s or a control with `data-rail-item`. */\n  footer?: React.ReactNode;\n  /** Adds a button that widens the rail to show the words (desktop only). Needs `expandLabels`. */\n  expandable?: boolean;\n  /** Controlled width (pair with `onExpandedChange` to keep the choice). */\n  expanded?: boolean;\n  /** The starting width when uncontrolled. */\n  defaultExpanded?: boolean;\n  /** Called when the toggle widens or narrows the rail. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /** The toggle's words, `[expand, collapse]`. */\n  expandLabels?: readonly [string, string];\n};\n\nconst count = (node: React.ReactNode) => React.Children.toArray(node).length;\n\n/** Moves the focus along the rail's items with the arrows (↑ ↓ on the rail, ← → on the tab bar; both always work), Home and End. */\nfunction moveFocus(event: React.KeyboardEvent<HTMLElement>) {\n  const keys: Record<string, number> = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };\n  const step = keys[event.key];\n  if (step === undefined && event.key !== \"Home\" && event.key !== \"End\") return;\n  const items = [...event.currentTarget.querySelectorAll<HTMLElement>(\"[data-rail-item]\")];\n  if (items.length === 0) return;\n  const here = items.findIndex((el) => el === document.activeElement || el.contains(document.activeElement));\n  let next: number;\n  if (event.key === \"Home\") next = 0;\n  else if (event.key === \"End\") next = items.length - 1;\n  else if (here < 0) next = step > 0 ? 0 : items.length - 1;\n  else next = (here + step + items.length) % items.length;\n  event.preventDefault();\n  items[next]?.focus();\n}\n\n/** The rail: a vertical column of icons on a desktop, a bottom tab bar on a phone. */\nexport function RailNavRoot({\n  label, mark, accent, children, footer, expandable, expanded: controlled, defaultExpanded = false, onExpandedChange, expandLabels, className, onKeyDown, ...props\n}: RailNavRootProps) {\n  const [own, setOwn] = React.useState(defaultExpanded);\n  const expanded = expandable ? (controlled ?? own) : false;\n  const toggle = () => {\n    if (controlled === undefined) setOwn(!expanded);\n    onExpandedChange?.(!expanded);\n  };\n  const value = React.useMemo(() => ({ expanded }), [expanded]);\n  return (\n    <RailContext.Provider value={value}>\n      <nav\n        aria-label={label}\n        data-expanded={expanded ? \"\" : undefined}\n        className={cn(\"group/rail\", accent && \"brand-\" + accent, s.root({ className }))}\n        onKeyDown={(e) => {\n          onKeyDown?.(e);\n          if (!e.defaultPrevented) moveFocus(e);\n        }}\n        {...props}\n      >\n        {mark && (\n          <div data-brand-mark className={s.mark()}>\n            {mark}\n          </div>\n        )}\n        <div className={s.group({ className: s.main() })} style={{ [\"--rail-n\" as string]: Math.max(count(children), 1) }}>\n          {children}\n        </div>\n        {(footer || expandable) && (\n          <div className={s.group({ className: s.foot() })} style={{ [\"--rail-n\" as string]: Math.max(count(footer), 1) }}>\n            {footer}\n            {expandable && expandLabels && (\n              <button type=\"button\" data-rail-item className={s.toggle()} aria-expanded={expanded} onClick={toggle}>\n                <ChevronGlyph direction={expanded ? \"left\" : \"right\"} className=\"h-4 w-4 shrink-0\" />\n                <span className={expanded ? undefined : \"sr-only\"}>{expanded ? expandLabels[1] : expandLabels[0]}</span>\n              </button>\n            )}\n          </div>\n        )}\n      </nav>\n    </RailContext.Provider>\n  );\n}\n\nexport type RailNavItemProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The item's icon (a signature icon of `@krizaka/icons`): all that shows on a desktop rail. */\n  icon: React.ReactNode;\n  /** Its words: the accessible name, the tooltip, the tab's caption on a phone, the row's text when the rail is expanded. */\n  label: string;\n  /** This is the section the user is in: `aria-current=\"page\"`, the accent bar and the accent colour. */\n  current?: boolean;\n  /** A count (unread, pending) on the icon. Say it in words with `badgeLabel`. */\n  badge?: React.ReactNode;\n  /** The count in words (« 3 unread »), appended to the accessible name. */\n  badgeLabel?: string;\n  /** Renders your router's link with the item's look: pass it as the only child. */\n  asChild?: boolean;\n  children?: React.ReactElement;\n};\n\n/** A destination of the rail. */\nexport function RailNavItem({ icon, label, current, badge, badgeLabel, asChild, children, className, ...props }: RailNavItemProps) {\n  const { expanded } = useRail();\n  const Comp = asChild ? Slot.Root : \"a\";\n  const inner = (\n    <>\n      <span className={s.icon()}>\n        {icon}\n        {badge != null && (typeof badge === \"string\" || typeof badge === \"number\") ? (\n          // Drawn by CSS, so the count is no text of the link: the visible text stays the label, which the name `Chat, 2 unread` contains.\n          <span className={s.badge()} data-count={badge} aria-hidden />\n        ) : (\n          badge != null && <span className={s.badge()} aria-hidden>{badge}</span>\n        )}\n      </span>\n      <span className={s.label()}>{label}</span>\n    </>\n  );\n  const link = (\n    <Comp data-rail-item aria-label={badgeLabel ? `${label}, ${badgeLabel}` : label} aria-current={current ? \"page\" : undefined} className={s.item({ className })} {...props}>\n      {asChild && children ? React.cloneElement(children, undefined, inner) : inner}\n    </Comp>\n  );\n  // Expanded, the words are on the row; collapsed, the tooltip says them (Escape dismisses it, the keyboard focus shows it).\n  return expanded ? link : <Tooltip content={label} side=\"right\">{link}</Tooltip>;\n}\n\nexport const RailNav = {\n  Shell: RailNavShell,\n  Root: RailNavRoot,\n  Item: RailNavItem,\n  Body: RailNavBody,\n};\n"
+    }
+  ],
+  "dependencies": [
+    "@krizaka/tokens@^3.23.0",
+    "radix-ui@^1.7.0",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tooltip"
+  ],
+  "demo": {
+    "path": "examples/rail-nav/studio.tsx",
+    "content": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AppHeader } from \"@krizaka/ui/app-header\";\nimport { Badge } from \"@krizaka/ui/badge\";\nimport { RailNav } from \"@krizaka/ui/rail-nav\";\n\nconst icon = (d: string) => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n    <path d={d} />\n  </svg>\n);\n\n// The mark lives in the rail; the header carries the name (and the mark on a phone, where the rail is the tab bar).\nexport default function RailNavStudio() {\n  return (\n    <RailNav.Shell>\n      <RailNav.Root\n        label=\"Orazaka\"\n        accent=\"orazaka\"\n        mark={<a href=\"#home\" aria-label=\"Orazaka, home\"><ProductLogo id=\"orazaka\" size={26} animated={false} /></a>}\n        footer={<RailNav.Item href=\"#settings\" icon={icon(\"M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19 12l2-1-2-4-2 1-2-1-1-2h-4l-1 2-2 1-2-1-2 4 2 1v2l-2 1 2 4 2-1 2 1 1 2h4l1-2 2-1 2 1 2-4-2-1z\")} label=\"Settings\" />}\n      >\n        <RailNav.Item href=\"#home\" icon={icon(\"M4 11 12 4l8 7v9H4z\")} label=\"Home\" current />\n        <RailNav.Item href=\"#studios\" icon={icon(\"M4 5h16v11H4zM8 20h8\")} label=\"Studios\" />\n        <RailNav.Item href=\"#chat\" icon={icon(\"M4 5h16v11H9l-5 4z\")} label=\"Chat\" badge={2} badgeLabel=\"2 unread\" />\n        <RailNav.Item href=\"#jobs\" icon={icon(\"M5 6h14M5 12h14M5 18h9\")} label=\"Jobs\" />\n      </RailNav.Root>\n      <RailNav.Body>\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        />\n        <main id=\"content\" className=\"p-6 text-sm text-fg-secondary\">The screen's content.</main>\n      </RailNav.Body>\n    </RailNav.Shell>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "RailNavShell",
+      "description": "The frame of the page: the rail, then `RailNav.Body` (the header and the content). A row on a desktop.",
+      "props": []
+    },
+    {
+      "component": "RailNavRoot",
+      "description": "The rail: a vertical column of icons on a desktop, a bottom tab bar on a phone.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The main destinations: `RailNav.Item`, the ones you work in. Five at most so that they fit a phone's tab bar.",
+          "required": true
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The navigation's accessible name (`Orazaka`, `Studio`).",
+          "required": true
+        },
+        {
+          "name": "accent",
+          "type": "BrandId",
+          "default": null,
+          "description": "The product's brand: scopes its colours (`brand-orazaka`…) over the rail, so the accent follows. Omit it inside a page that already wears the brand.",
+          "required": false
+        },
+        {
+          "name": "defaultExpanded",
+          "type": "boolean",
+          "default": "false",
+          "description": "The starting width when uncontrolled.",
+          "required": false
+        },
+        {
+          "name": "expandable",
+          "type": "boolean",
+          "default": null,
+          "description": "Adds a button that widens the rail to show the words (desktop only). Needs `expandLabels`.",
+          "required": false
+        },
+        {
+          "name": "expanded",
+          "type": "boolean",
+          "default": null,
+          "description": "Controlled width (pair with `onExpandedChange` to keep the choice).",
+          "required": false
+        },
+        {
+          "name": "expandLabels",
+          "type": "readonly [string, string]",
+          "default": null,
+          "description": "The toggle's words, `[expand, collapse]`.",
+          "required": false
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "default": null,
+          "description": "At the foot of the rail (settings, account), after the main items; on a phone they follow them in the same bar. `RailNav.Item`s or a control with `data-rail-item`.",
+          "required": false
+        },
+        {
+          "name": "mark",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The product's mark on top of the rail, as a link home (`<Link href=\"/\"><ProductLogo id=\"orazaka\" /></Link>`); named by the app (its `aria-label`). Hidden on a phone: `AppHeader` shows it there.",
+          "required": false
+        },
+        {
+          "name": "onExpandedChange",
+          "type": "((expanded: boolean) => void)",
+          "default": null,
+          "description": "Called when the toggle widens or narrows the rail.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "RailNavItem",
+      "description": "A destination of the rail.",
+      "props": [
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The item's icon (a signature icon of `@krizaka/icons`): all that shows on a desktop rail.",
+          "required": true
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "Its words: the accessible name, the tooltip, the tab's caption on a phone, the row's text when the rail is expanded.",
+          "required": true
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "default": null,
+          "description": "Renders your router's link with the item's look: pass it as the only child.",
+          "required": false
+        },
+        {
+          "name": "badge",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A count (unread, pending) on the icon. Say it in words with `badgeLabel`.",
+          "required": false
+        },
+        {
+          "name": "badgeLabel",
+          "type": "string",
+          "default": null,
+          "description": "The count in words (« 3 unread »), appended to the accessible name.",
+          "required": false
+        },
+        {
+          "name": "current",
+          "type": "boolean",
+          "default": null,
+          "description": "This is the section the user is in: `aria-current=\"page\"`, the accent bar and the accent colour.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "RailNavBody",
+      "description": "The column beside the rail: the `AppHeader`, then the content. On a phone it keeps clear of the tab bar.",
+      "props": []
+    }
+  ]
+}