@krizaka/ui 3.14.0 → 3.15.0

package/registry/mascots.json

@@ -2,8 +2,8 @@
   "name": "mascots",
   "type": "primitive",
   "title": "Mascots",
-  "summary": "The Krizaka flock: seven birds (falcon, owl, duck, flamingo, pigeon, lovebird, crane) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.",
-  "description": "The Krizaka flock: seven birds (falcon, owl, duck, flamingo, pigeon, lovebird, crane) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.",
+  "summary": "The Krizaka flock: nine figures (falcon, owl, duck, flamingo, pigeon, lovebird, crane, magpie — and the beaver) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.",
+  "description": "The Krizaka flock: nine figures (falcon, owl, duck, flamingo, pigeon, lovebird, crane, magpie — and the beaver) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.",
   "status": "beta",
   "deprecated": null,
   "category": "feedback",
@@ -31,7 +31,7 @@
   ],
   "bestPractices": [
     "One mascot per screen, and only at a moment that matters: a welcome, a wait, a success, an empty list, an error.",
-    "Keep the bird's role: the owl reads (documents), the falcon watches (security), the duck builds (code), the flamingo answers (support), the pigeon delivers (notifications, packages), the lovebird introduces (matches, two people who meet), the crane listens (a quiet moment, someone who takes their time).",
+    "Keep the bird's role: the owl reads (documents), the falcon watches (security), the duck builds (code), the flamingo answers (support), the pigeon delivers (notifications, packages), the lovebird introduces (matches, two people who meet), the crane listens (a quiet moment, someone who takes their time), the magpie keeps the score (points, standings, trophies), the beaver builds the shop (a small business at work: bookings, invoices, the till).",
     "The phoenix (`Phoenix`) does no job: keep it for a comeback — a relaunch, a recovered account, a second chance — never as one more helper.",
     "Leave `tone=\"brand\"` in a product: the bird wears the product's accent; `own` is for the Krizaka story.",
     "The words stay beside it (a title, a line, an action): the mascot never carries the message alone."
@@ -56,12 +56,12 @@
     "props": [
       {
         "component": "MASCOT_BIRDS",
-        "description": "The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one\n(`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,\nthe owl that reads, the developer duck, the flamingo that answers, the carrier pigeon), the lovebird that\nintroduces (2026-10, with Yasakia: \"l'inséparable présente\") and the crane that listens (2026-10, with Yororis:\n\"la grue écoute\"), redrawn on one 120 × 120 grid so that any bird can wear any mood.\n\nColours are roles, never fixed: `brand` (the default) paints a bird in the host's accent (`--kz-accent`,\n`--kz-accent-2`), so the same falcon is blue on krizaka.com, orange in Orazaka and violet in Orochia; `own` gives\neach bird the signature palette it has in the Krizaka story (the brand layer's exception, like the marks). Shades\nand highlights are black and white at a low opacity over the role, so they hold in both themes.",
+        "description": "The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one\n(`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,\nthe owl that reads, the developer duck, the flamingo that answers, the carrier pigeon), the lovebird that\nintroduces (2026-10, with Yasakia: \"l'inséparable présente\") and the crane that listens (2026-10, with Yororis:\n\"la grue écoute\"), the magpie that keeps the score (2026-10, with Kachizaka: \"la pie compte les points\") and the\nbeaver that builds the shop (2026-10, with Akinaza: \"le castor artisan\" — the one figure of the flock without\nfeathers: its paws are drawn as wings, its paddle tail behind it), redrawn on one 120 × 120 grid so that any figure\ncan wear any mood.\n\nColours are roles, never fixed: `brand` (the default) paints a bird in the host's accent (`--kz-accent`,\n`--kz-accent-2`), so the same falcon is blue on krizaka.com, orange in Orazaka and violet in Orochia; `own` gives\neach bird the signature palette it has in the Krizaka story (the brand layer's exception, like the marks). Shades\nand highlights are black and white at a low opacity over the role, so they hold in both themes.",
         "props": []
       },
       {
         "component": "Mascot",
-        "description": "One of the seven Krizaka birds in one mood — for the moments a product speaks to a person: a welcome, a long wait,\na success, an empty list, an error. Drawn in the host's brand colours by default (`tone=\"own\"` for the story's).",
+        "description": "One of the nine Krizaka figures in one mood — for the moments a product speaks to a person: a welcome, a long wait,\na success, an empty list, an error. Drawn in the host's brand colours by default (`tone=\"own\"` for the story's).",
         "props": [
           {
             "name": "animated",
@@ -72,9 +72,9 @@
           },
           {
             "name": "bird",
-            "type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
+            "type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
             "default": "owl",
-            "description": "Which bird of the flock: `falcon` (watch, security), `owl` (reading, documents), `duck` (building, code), `flamingo` (answers, support), `pigeon` (delivery, notifications), `lovebird` (introductions, two people who meet), `crane` (listening, a calm moment).",
+            "description": "Which bird of the flock: `falcon` (watch, security), `owl` (reading, documents), `duck` (building, code), `flamingo` (answers, support), `pigeon` (delivery, notifications), `lovebird` (introductions, two people who meet), `crane` (listening, a calm moment), `magpie` (the score: points, standings, trophies), `beaver` (the shop: a small business at work).",
             "required": false
           },
           {
@@ -154,10 +154,10 @@
       {
         "name": "flock",
         "title": "The flock",
-        "description": "The seven birds in the brand colours of the host.",
+        "description": "The nine figures in the brand colours of the host.",
         "path": "examples/mascots/flock.tsx",
         "module": "@krizaka/ui/registry/examples/mascots/flock",
-        "code": "import { Mascot,MASCOT_BIRDS } from \"@krizaka/ui/mascots\";\n\n// The seven birds in the host's brand colours: blue on Krizaka, orange in Orazaka, violet in Orochia, turquoise in\n// Yasakia, sage in Yororis.\nexport default function MascotFlock() {\n  return (\n    <div className=\"flex flex-wrap items-end gap-6\">\n      {MASCOT_BIRDS.map((bird) => (\n        <figure key={bird} className=\"flex flex-col items-center gap-2\">\n          <Mascot bird={bird} mood=\"welcome\" size={88} />\n          <figcaption className=\"text-xs text-fg-secondary\">{bird}</figcaption>\n        </figure>\n      ))}\n    </div>\n  );\n}\n"
+        "code": "import { Mascot,MASCOT_BIRDS } from \"@krizaka/ui/mascots\";\n\n// The nine figures in the host's brand colours: blue on Krizaka, orange in Orazaka, violet in Orochia, turquoise in\n// Yasakia, sage in Yororis.\nexport default function MascotFlock() {\n  return (\n    <div className=\"flex flex-wrap items-end gap-6\">\n      {MASCOT_BIRDS.map((bird) => (\n        <figure key={bird} className=\"flex flex-col items-center gap-2\">\n          <Mascot bird={bird} mood=\"welcome\" size={88} />\n          <figcaption className=\"text-xs text-fg-secondary\">{bird}</figcaption>\n        </figure>\n      ))}\n    </div>\n  );\n}\n"
       },
       {
         "name": "own-tone",
@@ -206,6 +206,22 @@
         "path": "examples/mascots/crane.tsx",
         "module": "@krizaka/ui/registry/examples/mascots/crane",
         "code": "import { Button } from \"@krizaka/ui/button\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\n\n// The crane listens: posed and unhurried — a calm opening, the words and one action beside it.\nexport default function MascotCrane() {\n  return (\n    <div className=\"flex w-96 items-center gap-4 rounded-xl border border-border-default bg-surface-1 p-4\">\n      <Mascot bird=\"crane\" mood=\"welcome\" size={88} />\n      <div className=\"flex-1\">\n        <p className=\"text-sm font-medium text-fg\">Take your time</p>\n        <p className=\"mt-1 text-sm text-fg-secondary\">Say it in your own words. One question at a time.</p>\n        <Button variant=\"primary\" size=\"sm\" className=\"mt-3\">\n          Begin\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "magpie",
+        "title": "Keeping the score",
+        "description": "The magpie celebrates a win: the points counted, the standings moved, the words beside it.",
+        "path": "examples/mascots/magpie.tsx",
+        "module": "@krizaka/ui/registry/examples/mascots/magpie",
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\n\n// The magpie keeps the score: a win counted, the standings moved — the words and one action beside it.\nexport default function MascotMagpie() {\n  return (\n    <div className=\"flex w-96 items-center gap-4 rounded-xl border border-border-default bg-surface-1 p-4\">\n      <Mascot bird=\"magpie\" mood=\"success\" size={88} />\n      <div className=\"flex-1\">\n        <p className=\"text-sm font-medium text-fg\">+5 points — exact score</p>\n        <p className=\"mt-1 text-sm text-fg-secondary\">You move up to second place in the league.</p>\n        <Button variant=\"primary\" size=\"sm\" className=\"mt-3\">\n          See the standings\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "beaver",
+        "title": "At the shop",
+        "description": "The beaver at work: the day's bookings, the words and one action beside it.",
+        "path": "examples/mascots/beaver.tsx",
+        "module": "@krizaka/ui/registry/examples/mascots/beaver",
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\n\n// The beaver builds the shop: the day at work — the words and one action beside it.\nexport default function MascotBeaver() {\n  return (\n    <div className=\"flex w-96 items-center gap-4 rounded-xl border border-border-default bg-surface-1 p-4\">\n      <Mascot bird=\"beaver\" mood=\"welcome\" size={88} />\n      <div className=\"flex-1\">\n        <p className=\"text-sm font-medium text-fg\">Six appointments today</p>\n        <p className=\"mt-1 text-sm text-fg-secondary\">The first one is at 9:30. Every invoice is ready.</p>\n        <Button variant=\"primary\" size=\"sm\" className=\"mt-3\">\n          Open the day\n        </Button>\n      </div>\n    </div>\n  );\n}\n"
       }
     ]
   },
@@ -219,7 +235,7 @@
     "props": [
       {
         "component": "Mascot",
-        "description": "One of the seven Krizaka birds in one mood, for React Native — the geometry of the web `Mascot`\n(mascots/geometry.ts), in the theme's accent by default.",
+        "description": "One of the nine Krizaka figures in one mood, for React Native — the geometry of the web `Mascot`\n(mascots/geometry.ts), in the theme's accent by default.",
         "props": [
           {
             "name": "animated",
@@ -230,9 +246,9 @@
           },
           {
             "name": "bird",
-            "type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
+            "type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
             "default": "owl",
-            "description": "Which bird of the flock: `falcon` (watch), `owl` (reading), `duck` (building), `flamingo` (answers), `pigeon` (delivery), `lovebird` (introductions), `crane` (listening).",
+            "description": "Which bird of the flock: `falcon` (watch), `owl` (reading), `duck` (building), `flamingo` (answers), `pigeon` (delivery), `lovebird` (introductions), `crane` (listening), `magpie` (the score), `beaver` (the shop).",
             "required": false
           },
           {
@@ -327,19 +343,19 @@
   "files": [
     {
       "path": "mascots/geometry.ts",
-      "content": "/**\n * The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one\n * (`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,\n * the owl that reads, the developer duck, the flamingo that answers, the carrier pigeon), the lovebird that\n * introduces (2026-10, with Yasakia: \"l'inséparable présente\") and the crane that listens (2026-10, with Yororis:\n * \"la grue écoute\"), redrawn on one 120 × 120 grid so that any bird can wear any mood.\n *\n * Colours are roles, never fixed: `brand` (the default) paints a bird in the host's accent (`--kz-accent`,\n * `--kz-accent-2`), so the same falcon is blue on krizaka.com, orange in Orazaka and violet in Orochia; `own` gives\n * each bird the signature palette it has in the Krizaka story (the brand layer's exception, like the marks). Shades\n * and highlights are black and white at a low opacity over the role, so they hold in both themes.\n */\n\nexport const MASCOT_BIRDS = [\"falcon\", \"owl\", \"duck\", \"flamingo\", \"pigeon\", \"lovebird\", \"crane\"] as const;\nexport type MascotBird = (typeof MASCOT_BIRDS)[number];\n\nexport const MASCOT_MOODS = [\"welcome\", \"thinking\", \"success\", \"empty\", \"error\"] as const;\nexport type MascotMood = (typeof MASCOT_MOODS)[number];\n\nexport type MascotTone = \"brand\" | \"own\";\n\ntype Point = readonly [number, number];\n\nexport interface BirdGeometry {\n  /** The ground shadow: centre x, y and radii. */\n  readonly shadow: readonly [number, number, number, number];\n  /** Legs and feet, stroked in the beak colour. */\n  readonly legs: readonly string[];\n  /** Drawn behind the body (tail, parcel strings). */\n  readonly back?: readonly string[];\n  readonly body: string;\n  readonly belly: string;\n  /** Left then right wing, and the point each one turns around. */\n  readonly wings: readonly [{ readonly d: string; readonly pivot: Point }, { readonly d: string; readonly pivot: Point }];\n  /** A neck, stroked in the body colour with this width (the flamingo). */\n  readonly neck?: { readonly d: string; readonly width: number };\n  /** The head: a circle. */\n  readonly head: { readonly cx: number; readonly cy: number; readonly r: number };\n  /** Ear tufts, a crest, a visor's frame: filled with the detail colour. */\n  readonly details: readonly string[];\n  /** A band behind the eyes (the falcon's visor), in the page's surface. */\n  readonly visor?: { readonly x: number; readonly y: number; readonly w: number; readonly h: number };\n  /** Glasses (the duck): stroked rings around the eyes. */\n  readonly glasses?: boolean;\n  readonly beak: string;\n  /** The eyes: centres, the radius of the white, the radius of the pupil (no white when `white` is 0). */\n  readonly eyes: { readonly at: readonly Point[]; readonly white: number; readonly pupil: number };\n  /** The parcel the pigeon carries: its three faces. */\n  readonly parcel?: readonly [string, string, string];\n}\n\nconst mirror = (d: string) => d.replace(/(-?\\d+(?:\\.\\d+)?) (-?\\d+(?:\\.\\d+)?)/g, (_, x: string, y: string) => `${120 - Number(x)} ${y}`);\n\nconst falconWing = \"M29 58 C17 68 19 88 37 86 C31 76 31 66 29 58 Z\";\nconst pigeonWing = \"M36 58 C20 50 16 80 38 84 C34 74 34 66 36 58 Z\";\n\nexport const BIRDS: Readonly<Record<MascotBird, BirdGeometry>> = {\n  falcon: {\n    shadow: [60, 110, 26, 3.5],\n    legs: [\"M51 94 L48 108 M44 108 L52 108\", \"M69 94 L72 108 M68 108 L76 108\"],\n    body: \"M30 62 C30 42 90 42 90 62 C90 88 78 98 60 98 C42 98 30 88 30 62 Z\",\n    belly: \"M41 66 C41 55 79 55 79 66 C79 82 71 90 60 90 C49 90 41 82 41 66 Z\",\n    wings: [\n      { d: falconWing, pivot: [29, 58] },\n      { d: mirror(falconWing), pivot: [91, 58] },\n    ],\n    head: { cx: 60, cy: 38, r: 22 },\n    details: [\"M46 20 L52 10 L56 19 Z\", \"M74 20 L68 10 L64 19 Z\"],\n    visor: { x: 41, y: 29, w: 38, h: 13 },\n    beak: \"M54 45 L66 45 L60 57 Z\",\n    eyes: { at: [[50, 35.5], [70, 35.5]], white: 0, pupil: 3.2 },\n  },\n  owl: {\n    shadow: [60, 110, 24, 3.5],\n    legs: [\"M53 100 L51 107 M47 107 L55 107\", \"M67 100 L69 107 M65 107 L73 107\"],\n    body: \"M28 52 C28 20 92 20 92 52 C92 86 82 102 60 102 C38 102 28 86 28 52 Z\",\n    belly: \"M42 66 C42 52 78 52 78 66 C78 86 72 94 60 94 C48 94 42 86 42 66 Z\",\n    wings: [\n      { d: \"M29 58 C18 68 20 88 36 90 C32 78 32 68 29 58 Z\", pivot: [29, 58] },\n      { d: mirror(\"M29 58 C18 68 20 88 36 90 C32 78 32 68 29 58 Z\"), pivot: [91, 58] },\n    ],\n    head: { cx: 60, cy: 42, r: 0 },\n    details: [\"M31 20 L47 31 L31 41 Z\", \"M89 20 L73 31 L89 41 Z\"],\n    beak: \"M55 50 L65 50 L60 59 Z\",\n    eyes: { at: [[47, 41], [73, 41]], white: 10, pupil: 4 },\n  },\n  duck: {\n    shadow: [60, 110, 30, 3.5],\n    legs: [],\n    back: [\"M88 80 C100 76 104 66 96 62 C98 70 94 74 88 74 Z\"],\n    body: \"M26 80 C26 62 94 62 94 80 C94 100 82 106 60 106 C38 106 26 100 26 80 Z\",\n    belly: \"M38 84 C38 72 82 72 82 84 C82 96 74 101 60 101 C46 101 38 96 38 84 Z\",\n    wings: [\n      { d: \"M27 74 C14 80 18 98 35 96 C31 88 29 80 27 74 Z\", pivot: [27, 74] },\n      { d: mirror(\"M27 74 C14 80 18 98 35 96 C31 88 29 80 27 74 Z\"), pivot: [93, 74] },\n    ],\n    head: { cx: 60, cy: 42, r: 23 },\n    details: [\"M57 20 C54 11 63 8 66 14 C62 13 60 16 61 20 Z\"],\n    glasses: true,\n    beak: \"M43 51 C43 46 55 45 60 45 C65 45 77 46 77 51 C77 56 66 60 60 60 C54 60 43 56 43 51 Z\",\n    eyes: { at: [[51, 37], [69, 37]], white: 0, pupil: 2.6 },\n  },\n  flamingo: {\n    shadow: [60, 110, 20, 3],\n    legs: [\"M56 86 L55 97 L58 108 M53 108 L62 108\", \"M65 86 L66 108 M62 108 L71 108\"],\n    body: \"M38 70 C38 54 88 54 88 70 C88 86 76 90 62 90 C48 90 38 86 38 70 Z\",\n    belly: \"M46 72 C46 63 80 63 80 72 C80 82 72 85 63 85 C54 85 46 82 46 72 Z\",\n    wings: [\n      { d: \"M42 64 C30 68 32 84 47 84 C43 76 43 70 42 64 Z\", pivot: [42, 64] },\n      { d: \"M84 64 C96 68 94 84 79 84 C83 76 83 70 84 64 Z\", pivot: [84, 64] },\n    ],\n    neck: { d: \"M58 60 C58 42 40 34 46 22\", width: 7 },\n    head: { cx: 48, cy: 18, r: 11 },\n    details: [],\n    beak: \"M38 16 C28 18 29 28 24 33 C33 28 38 23 40 20 Z\",\n    eyes: { at: [[46, 15]], white: 3.2, pupil: 1.8 },\n  },\n  pigeon: {\n    shadow: [60, 112, 22, 3],\n    legs: [\"M52 94 L51 99 M48 99 L54 99\", \"M68 94 L69 99 M66 99 L72 99\"],\n    back: [\"M53 98 L52 103\", \"M67 98 L68 103\", \"M30 68 C16 72 14 62 28 56 C17 57 15 49 32 48 Z\"],\n    body: \"M34 64 C34 44 86 44 86 64 C86 86 74 96 60 96 C46 96 34 86 34 64 Z\",\n    belly: \"M43 68 C43 57 77 57 77 68 C77 82 70 88 60 88 C50 88 43 82 43 68 Z\",\n    wings: [\n      { d: pigeonWing, pivot: [36, 58] },\n      { d: mirror(pigeonWing), pivot: [84, 58] },\n    ],\n    head: { cx: 60, cy: 36, r: 19 },\n    details: [\"M54 18 C56 12 64 12 66 18 C63 16 57 16 54 18 Z\"],\n    beak: \"M55 41 L65 41 L60 50 Z\",\n    eyes: { at: [[52, 33], [68, 33]], white: 5, pupil: 2.4 },\n    parcel: [\"M60 100 L71 105 L60 110 L49 105 Z\", \"M49 105 L60 110 L60 118 L49 113 Z\", \"M71 105 L60 110 L60 118 L71 113 Z\"],\n  },\n  /**\n   * The lovebird — the inseparable that introduces two people. A plump little parrot: a short tail, a round head\n   * with its coloured face (the detail colour), the white eye-rings of the species and a short hooked beak.\n   */\n  lovebird: {\n    shadow: [60, 110, 23, 3.5],\n    legs: [\"M53 96 L52 106 M48 106 L56 106\", \"M67 96 L68 106 M64 106 L72 106\"],\n    back: [\"M74 90 C82 98 88 104 95 103 C91 98 86 91 82 84 Z\"],\n    body: \"M32 66 C32 46 88 46 88 66 C88 90 76 100 60 100 C44 100 32 90 32 66 Z\",\n    belly: \"M42 70 C42 59 78 59 78 70 C78 85 70 92 60 92 C50 92 42 85 42 70 Z\",\n    wings: [\n      { d: \"M33 60 C20 68 22 88 40 90 C35 80 34 70 33 60 Z\", pivot: [33, 60] },\n      { d: mirror(\"M33 60 C20 68 22 88 40 90 C35 80 34 70 33 60 Z\"), pivot: [87, 60] },\n    ],\n    head: { cx: 60, cy: 38, r: 21 },\n    details: [\"M43 40 C42 28 51 22 60 22 C69 22 78 28 77 40 C76 50 68 55 60 55 C52 55 44 50 43 40 Z\"],\n    beak: \"M55 44 C55 40 65 40 65 44 C65 50 62 54 60 55 C58 54 55 50 55 44 Z\",\n    eyes: { at: [[51, 36], [69, 36]], white: 4.6, pupil: 2.4 },\n  },\n  /**\n   * The crane — the one that listens: posed, unhurried, drawn in one line. A tall wader seen in profile, standing still\n   * on two straight legs, the neck a single stroke up to a small head with its crown (the detail colour) and a long,\n   * straight beak; the folded wings low on its back. The flamingo bends and answers; the crane stands and listens.\n   */\n  crane: {\n    shadow: [62, 110, 20, 3],\n    legs: [\"M56 87 L55 108 M51 108 L59 108\", \"M67 87 L68 108 M64 108 L73 108\"],\n    body: \"M40 66 C38 54 84 54 86 68 C88 82 76 88 62 88 C48 88 40 80 40 66 Z\",\n    belly: \"M48 70 C48 62 78 62 79 70 C80 79 72 84 63 84 C54 84 48 79 48 70 Z\",\n    wings: [\n      { d: \"M44 62 C33 68 35 82 49 83 C45 76 45 69 44 62 Z\", pivot: [44, 62] },\n      { d: \"M82 62 C93 67 96 82 80 84 C83 76 83 69 82 62 Z\", pivot: [82, 62] },\n    ],\n    neck: { d: \"M52 62 C48 47 52 37 48 26\", width: 6 },\n    head: { cx: 47, cy: 21, r: 8.5 },\n    details: [\"M41 16.5 C42 11 52 11 53 16.5 C50 14.6 44 14.6 41 16.5 Z\"],\n    beak: \"M40.5 18.5 L19 22.5 L40.5 25.5 Z\",\n    eyes: { at: [[45.5, 19.5]], white: 2.8, pupil: 1.6 },\n  },\n};\n\n/** What a mood adds around the bird: a badge, a thought, an empty tray. */\nexport const MOOD_PARTS = {\n  /** The badge of `success` and `error`, top right. */\n  badge: { cx: 98, cy: 22, r: 11 },\n  check: \"M92.5 22.5 L96.8 26.6 L103.6 18.4\",\n  bang: { line: \"M98 15.5 L98 23.5\", dot: [98, 28] as Point },\n  /** `thinking`: three dots rising to the right of the head. */\n  dots: [\n    [88, 26, 2.6],\n    [96, 19, 3.2],\n    [105, 11, 3.8],\n  ] as const,\n  /** `empty`: an open tray beside the bird. */\n  tray: \"M90 96 L110 96 L107 108 L93 108 Z\",\n  /** `success`: two sparkles. */\n  sparkles: [\"M16 26 L18 31 L23 33 L18 35 L16 40 L14 35 L9 33 L14 31 Z\", \"M104 52 L105.2 55 L108 56 L105.2 57 L104 60 L102.8 57 L100 56 L102.8 55 Z\"],\n} as const;\n\n/** The happy eye of `success`: an arch. */\nexport const archEye = ([x, y]: Point, r: number) => `M${x - r} ${y + r * 0.45} Q${x} ${y - r * 1.15} ${x + r} ${y + r * 0.45}`;\n/** The lowered lid of `empty`: a line across the eye. */\nexport const lidEye = ([x, y]: Point, r: number) => `M${x - r} ${y + 0.4} L${x + r} ${y + 0.4}`;\n/** The heavy lid of `empty` over an eye with a white: its upper half. */\nexport const upperLid = ([x, y]: Point, r: number) => `M${x - r} ${y} A${r} ${r} 0 0 1 ${x + r} ${y} Z`;\n/** The worried brow of `error`, above one eye (`side` -1 left, 1 right). */\nexport const brow = ([x, y]: Point, r: number, side: number) =>\n  `M${x - r * 1.1} ${y - r * 1.25 - (side < 0 ? 0 : r * 0.7)} L${x + r * 1.1} ${y - r * 1.5 - (side < 0 ? r * 0.7 : 0)}`;\n\nexport interface MascotPalette {\n  /** Top and bottom of the body gradient. */\n  readonly from: string;\n  readonly to: string;\n  /** Wings and details (tufts, crest). */\n  readonly wing: string;\n  readonly detail: string;\n  /** Beak and feet. */\n  readonly beak: string;\n  /** The pupils (and the falcon's visor lights). */\n  readonly eye: string;\n}\n\n/** The signature palettes of the Krizaka story (`tone=\"own\"`), from the first drawings of each bird. */\nexport const OWN_PALETTES: Readonly<Record<MascotBird, MascotPalette>> = {\n  falcon: { from: \"#ff9f00\", to: \"#ff2a00\", wing: \"#d84315\", detail: \"#b4320d\", beak: \"#ffb300\", eye: \"#00c8d4\" },\n  owl: { from: \"#a78bfa\", to: \"#6d28d9\", wing: \"#7c3aed\", detail: \"#5b21b6\", beak: \"#fbbf24\", eye: \"#1f2937\" },\n  duck: { from: \"#f43f5e\", to: \"#be123c\", wing: \"#db2777\", detail: \"#9f1239\", beak: \"#fbbf24\", eye: \"#1f2937\" },\n  flamingo: { from: \"#f9a8d4\", to: \"#db2777\", wing: \"#ec4899\", detail: \"#be185d\", beak: \"#fbbf24\", eye: \"#1f2937\" },\n  pigeon: { from: \"#22d3ee\", to: \"#6366f1\", wing: \"#a855f7\", detail: \"#4338ca\", beak: \"#f59e0b\", eye: \"#1f2937\" },\n  lovebird: { from: \"#6ee7b7\", to: \"#059669\", wing: \"#047857\", detail: \"#fb7185\", beak: \"#f97316\", eye: \"#1f2937\" },\n  // The sandhill crane (grue du Canada): sand-grey plumage, its red crown, dark legs and beak.\n  crane: { from: \"#ebe3d6\", to: \"#9c8f80\", wing: \"#7d7266\", detail: \"#dc2626\", beak: \"#44403c\", eye: \"#1f2937\" },\n};\n\n/** Fixed light and shade, laid at a low opacity over a role (they read on both themes). */\nexport const LIGHT = \"#ffffff\";\nexport const SHADE = \"#000000\";\n/** The parcel's faces (pigeon). */\nexport const PARCEL = [\"#f59e0b\", \"#d97706\", \"#b45309\"] as const;\n"
+      "content": "/**\n * The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one\n * (`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,\n * the owl that reads, the developer duck, the flamingo that answers, the carrier pigeon), the lovebird that\n * introduces (2026-10, with Yasakia: \"l'inséparable présente\") and the crane that listens (2026-10, with Yororis:\n * \"la grue écoute\"), the magpie that keeps the score (2026-10, with Kachizaka: \"la pie compte les points\") and the\n * beaver that builds the shop (2026-10, with Akinaza: \"le castor artisan\" — the one figure of the flock without\n * feathers: its paws are drawn as wings, its paddle tail behind it), redrawn on one 120 × 120 grid so that any figure\n * can wear any mood.\n *\n * Colours are roles, never fixed: `brand` (the default) paints a bird in the host's accent (`--kz-accent`,\n * `--kz-accent-2`), so the same falcon is blue on krizaka.com, orange in Orazaka and violet in Orochia; `own` gives\n * each bird the signature palette it has in the Krizaka story (the brand layer's exception, like the marks). Shades\n * and highlights are black and white at a low opacity over the role, so they hold in both themes.\n */\n\nexport const MASCOT_BIRDS = [\"falcon\", \"owl\", \"duck\", \"flamingo\", \"pigeon\", \"lovebird\", \"crane\", \"magpie\", \"beaver\"] as const;\nexport type MascotBird = (typeof MASCOT_BIRDS)[number];\n\nexport const MASCOT_MOODS = [\"welcome\", \"thinking\", \"success\", \"empty\", \"error\"] as const;\nexport type MascotMood = (typeof MASCOT_MOODS)[number];\n\nexport type MascotTone = \"brand\" | \"own\";\n\ntype Point = readonly [number, number];\n\nexport interface BirdGeometry {\n  /** The ground shadow: centre x, y and radii. */\n  readonly shadow: readonly [number, number, number, number];\n  /** Legs and feet, stroked in the beak colour. */\n  readonly legs: readonly string[];\n  /** Drawn behind the body (tail, parcel strings). */\n  readonly back?: readonly string[];\n  readonly body: string;\n  readonly belly: string;\n  /** Left then right wing, and the point each one turns around. */\n  readonly wings: readonly [{ readonly d: string; readonly pivot: Point }, { readonly d: string; readonly pivot: Point }];\n  /** A neck, stroked in the body colour with this width (the flamingo). */\n  readonly neck?: { readonly d: string; readonly width: number };\n  /** The head: a circle. */\n  readonly head: { readonly cx: number; readonly cy: number; readonly r: number };\n  /** Ear tufts, a crest, a visor's frame: filled with the detail colour. */\n  readonly details: readonly string[];\n  /** A band behind the eyes (the falcon's visor), in the page's surface. */\n  readonly visor?: { readonly x: number; readonly y: number; readonly w: number; readonly h: number };\n  /** Glasses (the duck): stroked rings around the eyes. */\n  readonly glasses?: boolean;\n  readonly beak: string;\n  /** The eyes: centres, the radius of the white, the radius of the pupil (no white when `white` is 0). */\n  readonly eyes: { readonly at: readonly Point[]; readonly white: number; readonly pupil: number };\n  /** The parcel the pigeon carries: its three faces. */\n  readonly parcel?: readonly [string, string, string];\n}\n\nconst mirror = (d: string) => d.replace(/(-?\\d+(?:\\.\\d+)?) (-?\\d+(?:\\.\\d+)?)/g, (_, x: string, y: string) => `${120 - Number(x)} ${y}`);\n\nconst falconWing = \"M29 58 C17 68 19 88 37 86 C31 76 31 66 29 58 Z\";\nconst pigeonWing = \"M36 58 C20 50 16 80 38 84 C34 74 34 66 36 58 Z\";\n\nexport const BIRDS: Readonly<Record<MascotBird, BirdGeometry>> = {\n  falcon: {\n    shadow: [60, 110, 26, 3.5],\n    legs: [\"M51 94 L48 108 M44 108 L52 108\", \"M69 94 L72 108 M68 108 L76 108\"],\n    body: \"M30 62 C30 42 90 42 90 62 C90 88 78 98 60 98 C42 98 30 88 30 62 Z\",\n    belly: \"M41 66 C41 55 79 55 79 66 C79 82 71 90 60 90 C49 90 41 82 41 66 Z\",\n    wings: [\n      { d: falconWing, pivot: [29, 58] },\n      { d: mirror(falconWing), pivot: [91, 58] },\n    ],\n    head: { cx: 60, cy: 38, r: 22 },\n    details: [\"M46 20 L52 10 L56 19 Z\", \"M74 20 L68 10 L64 19 Z\"],\n    visor: { x: 41, y: 29, w: 38, h: 13 },\n    beak: \"M54 45 L66 45 L60 57 Z\",\n    eyes: { at: [[50, 35.5], [70, 35.5]], white: 0, pupil: 3.2 },\n  },\n  owl: {\n    shadow: [60, 110, 24, 3.5],\n    legs: [\"M53 100 L51 107 M47 107 L55 107\", \"M67 100 L69 107 M65 107 L73 107\"],\n    body: \"M28 52 C28 20 92 20 92 52 C92 86 82 102 60 102 C38 102 28 86 28 52 Z\",\n    belly: \"M42 66 C42 52 78 52 78 66 C78 86 72 94 60 94 C48 94 42 86 42 66 Z\",\n    wings: [\n      { d: \"M29 58 C18 68 20 88 36 90 C32 78 32 68 29 58 Z\", pivot: [29, 58] },\n      { d: mirror(\"M29 58 C18 68 20 88 36 90 C32 78 32 68 29 58 Z\"), pivot: [91, 58] },\n    ],\n    head: { cx: 60, cy: 42, r: 0 },\n    details: [\"M31 20 L47 31 L31 41 Z\", \"M89 20 L73 31 L89 41 Z\"],\n    beak: \"M55 50 L65 50 L60 59 Z\",\n    eyes: { at: [[47, 41], [73, 41]], white: 10, pupil: 4 },\n  },\n  duck: {\n    shadow: [60, 110, 30, 3.5],\n    legs: [],\n    back: [\"M88 80 C100 76 104 66 96 62 C98 70 94 74 88 74 Z\"],\n    body: \"M26 80 C26 62 94 62 94 80 C94 100 82 106 60 106 C38 106 26 100 26 80 Z\",\n    belly: \"M38 84 C38 72 82 72 82 84 C82 96 74 101 60 101 C46 101 38 96 38 84 Z\",\n    wings: [\n      { d: \"M27 74 C14 80 18 98 35 96 C31 88 29 80 27 74 Z\", pivot: [27, 74] },\n      { d: mirror(\"M27 74 C14 80 18 98 35 96 C31 88 29 80 27 74 Z\"), pivot: [93, 74] },\n    ],\n    head: { cx: 60, cy: 42, r: 23 },\n    details: [\"M57 20 C54 11 63 8 66 14 C62 13 60 16 61 20 Z\"],\n    glasses: true,\n    beak: \"M43 51 C43 46 55 45 60 45 C65 45 77 46 77 51 C77 56 66 60 60 60 C54 60 43 56 43 51 Z\",\n    eyes: { at: [[51, 37], [69, 37]], white: 0, pupil: 2.6 },\n  },\n  flamingo: {\n    shadow: [60, 110, 20, 3],\n    legs: [\"M56 86 L55 97 L58 108 M53 108 L62 108\", \"M65 86 L66 108 M62 108 L71 108\"],\n    body: \"M38 70 C38 54 88 54 88 70 C88 86 76 90 62 90 C48 90 38 86 38 70 Z\",\n    belly: \"M46 72 C46 63 80 63 80 72 C80 82 72 85 63 85 C54 85 46 82 46 72 Z\",\n    wings: [\n      { d: \"M42 64 C30 68 32 84 47 84 C43 76 43 70 42 64 Z\", pivot: [42, 64] },\n      { d: \"M84 64 C96 68 94 84 79 84 C83 76 83 70 84 64 Z\", pivot: [84, 64] },\n    ],\n    neck: { d: \"M58 60 C58 42 40 34 46 22\", width: 7 },\n    head: { cx: 48, cy: 18, r: 11 },\n    details: [],\n    beak: \"M38 16 C28 18 29 28 24 33 C33 28 38 23 40 20 Z\",\n    eyes: { at: [[46, 15]], white: 3.2, pupil: 1.8 },\n  },\n  pigeon: {\n    shadow: [60, 112, 22, 3],\n    legs: [\"M52 94 L51 99 M48 99 L54 99\", \"M68 94 L69 99 M66 99 L72 99\"],\n    back: [\"M53 98 L52 103\", \"M67 98 L68 103\", \"M30 68 C16 72 14 62 28 56 C17 57 15 49 32 48 Z\"],\n    body: \"M34 64 C34 44 86 44 86 64 C86 86 74 96 60 96 C46 96 34 86 34 64 Z\",\n    belly: \"M43 68 C43 57 77 57 77 68 C77 82 70 88 60 88 C50 88 43 82 43 68 Z\",\n    wings: [\n      { d: pigeonWing, pivot: [36, 58] },\n      { d: mirror(pigeonWing), pivot: [84, 58] },\n    ],\n    head: { cx: 60, cy: 36, r: 19 },\n    details: [\"M54 18 C56 12 64 12 66 18 C63 16 57 16 54 18 Z\"],\n    beak: \"M55 41 L65 41 L60 50 Z\",\n    eyes: { at: [[52, 33], [68, 33]], white: 5, pupil: 2.4 },\n    parcel: [\"M60 100 L71 105 L60 110 L49 105 Z\", \"M49 105 L60 110 L60 118 L49 113 Z\", \"M71 105 L60 110 L60 118 L71 113 Z\"],\n  },\n  /**\n   * The lovebird — the inseparable that introduces two people. A plump little parrot: a short tail, a round head\n   * with its coloured face (the detail colour), the white eye-rings of the species and a short hooked beak.\n   */\n  lovebird: {\n    shadow: [60, 110, 23, 3.5],\n    legs: [\"M53 96 L52 106 M48 106 L56 106\", \"M67 96 L68 106 M64 106 L72 106\"],\n    back: [\"M74 90 C82 98 88 104 95 103 C91 98 86 91 82 84 Z\"],\n    body: \"M32 66 C32 46 88 46 88 66 C88 90 76 100 60 100 C44 100 32 90 32 66 Z\",\n    belly: \"M42 70 C42 59 78 59 78 70 C78 85 70 92 60 92 C50 92 42 85 42 70 Z\",\n    wings: [\n      { d: \"M33 60 C20 68 22 88 40 90 C35 80 34 70 33 60 Z\", pivot: [33, 60] },\n      { d: mirror(\"M33 60 C20 68 22 88 40 90 C35 80 34 70 33 60 Z\"), pivot: [87, 60] },\n    ],\n    head: { cx: 60, cy: 38, r: 21 },\n    details: [\"M43 40 C42 28 51 22 60 22 C69 22 78 28 77 40 C76 50 68 55 60 55 C52 55 44 50 43 40 Z\"],\n    beak: \"M55 44 C55 40 65 40 65 44 C65 50 62 54 60 55 C58 54 55 50 55 44 Z\",\n    eyes: { at: [[51, 36], [69, 36]], white: 4.6, pupil: 2.4 },\n  },\n  /**\n   * The crane — the one that listens: posed, unhurried, drawn in one line. A tall wader seen in profile, standing still\n   * on two straight legs, the neck a single stroke up to a small head with its crown (the detail colour) and a long,\n   * straight beak; the folded wings low on its back. The flamingo bends and answers; the crane stands and listens.\n   */\n  crane: {\n    shadow: [62, 110, 20, 3],\n    legs: [\"M56 87 L55 108 M51 108 L59 108\", \"M67 87 L68 108 M64 108 L73 108\"],\n    body: \"M40 66 C38 54 84 54 86 68 C88 82 76 88 62 88 C48 88 40 80 40 66 Z\",\n    belly: \"M48 70 C48 62 78 62 79 70 C80 79 72 84 63 84 C54 84 48 79 48 70 Z\",\n    wings: [\n      { d: \"M44 62 C33 68 35 82 49 83 C45 76 45 69 44 62 Z\", pivot: [44, 62] },\n      { d: \"M82 62 C93 67 96 82 80 84 C83 76 83 69 82 62 Z\", pivot: [82, 62] },\n    ],\n    neck: { d: \"M52 62 C48 47 52 37 48 26\", width: 6 },\n    head: { cx: 47, cy: 21, r: 8.5 },\n    details: [\"M41 16.5 C42 11 52 11 53 16.5 C50 14.6 44 14.6 41 16.5 Z\"],\n    beak: \"M40.5 18.5 L19 22.5 L40.5 25.5 Z\",\n    eyes: { at: [[45.5, 19.5]], white: 2.8, pupil: 1.6 },\n  },\n  /**\n   * The magpie — the one that keeps the score: it counts the points, remembers every trophy and chatters with the\n   * league. A sleek pied bird: a dark cap (the detail colour) over a round head, a white belly, a long tail behind it\n   * (the detail colour), a short straight beak. It watches no one (that is the falcon): it counts.\n   */\n  magpie: {\n    shadow: [58, 110, 24, 3.5],\n    legs: [\"M53 95 L51 107 M47 107 L55 107\", \"M65 95 L67 107 M63 107 L71 107\"],\n    back: [\"M72 88 C84 94 96 102 106 108 C104 111 100 112 97 110 C88 104 78 98 68 94 Z\"],\n    body: \"M34 64 C34 44 84 44 84 64 C84 88 72 98 58 98 C44 98 34 88 34 64 Z\",\n    belly: \"M43 70 C43 60 73 60 73 70 C73 84 67 90 58 90 C49 90 43 84 43 70 Z\",\n    wings: [\n      { d: \"M35 58 C22 64 22 84 40 88 C36 78 35 68 35 58 Z\", pivot: [35, 58] },\n      { d: \"M83 58 C96 64 96 84 78 88 C82 78 83 68 83 58 Z\", pivot: [83, 58] },\n    ],\n    head: { cx: 58, cy: 36, r: 19 },\n    details: [\"M40 34 C40 22 48 16 58 16 C68 16 76 22 76 34 C70 29 64 28 58 28 C52 28 46 29 40 34 Z\"],\n    beak: \"M53 42 L63 42 L58 50 Z\",\n    eyes: { at: [[50, 35], [66, 35]], white: 4.4, pupil: 2.3 },\n  },\n  /**\n   * The beaver — the artisan that builds the shop, Akinaza's figure (and Canada's). Round and sturdy, sitting up: two\n   * round ears and a nose (the detail colour), the two front teeth (the beak colour), small paws drawn as its wings,\n   * and its flat paddle tail lying behind it. No feathers, the same moods.\n   */\n  beaver: {\n    shadow: [62, 110, 30, 3.5],\n    legs: [\"M50 100 L48 106 M43 106 L53 106\", \"M70 100 L72 106 M67 106 L77 106\"],\n    back: [\"M74 94 C86 92 104 96 108 103 C106 110 90 111 76 104 Z\"],\n    body: \"M30 72 C30 48 90 48 90 72 C90 96 78 104 60 104 C42 104 30 96 30 72 Z\",\n    belly: \"M42 76 C42 64 78 64 78 76 C78 92 70 98 60 98 C50 98 42 92 42 76 Z\",\n    wings: [\n      { d: \"M38 66 C28 70 30 84 42 84 C44 78 42 72 38 66 Z\", pivot: [38, 66] },\n      { d: \"M82 66 C92 70 90 84 78 84 C76 78 78 72 82 66 Z\", pivot: [82, 66] },\n    ],\n    head: { cx: 60, cy: 40, r: 22 },\n    details: [\"M37 30 C33 23 39 16 46 20 C43 23 40 26 37 30 Z\", \"M83 30 C87 23 81 16 74 20 C77 23 80 26 83 30 Z\", \"M55 45 C55 42 65 42 65 45 C65 48 62 49 60 49 C58 49 55 48 55 45 Z\"],\n    beak: \"M56 51 H64 V58 C64 59.5 63 60 62 60 H58 C57 60 56 59.5 56 58 Z\",\n    eyes: { at: [[51, 36], [69, 36]], white: 4.6, pupil: 2.4 },\n  },\n};\n\n/** What a mood adds around the bird: a badge, a thought, an empty tray. */\nexport const MOOD_PARTS = {\n  /** The badge of `success` and `error`, top right. */\n  badge: { cx: 98, cy: 22, r: 11 },\n  check: \"M92.5 22.5 L96.8 26.6 L103.6 18.4\",\n  bang: { line: \"M98 15.5 L98 23.5\", dot: [98, 28] as Point },\n  /** `thinking`: three dots rising to the right of the head. */\n  dots: [\n    [88, 26, 2.6],\n    [96, 19, 3.2],\n    [105, 11, 3.8],\n  ] as const,\n  /** `empty`: an open tray beside the bird. */\n  tray: \"M90 96 L110 96 L107 108 L93 108 Z\",\n  /** `success`: two sparkles. */\n  sparkles: [\"M16 26 L18 31 L23 33 L18 35 L16 40 L14 35 L9 33 L14 31 Z\", \"M104 52 L105.2 55 L108 56 L105.2 57 L104 60 L102.8 57 L100 56 L102.8 55 Z\"],\n} as const;\n\n/** The happy eye of `success`: an arch. */\nexport const archEye = ([x, y]: Point, r: number) => `M${x - r} ${y + r * 0.45} Q${x} ${y - r * 1.15} ${x + r} ${y + r * 0.45}`;\n/** The lowered lid of `empty`: a line across the eye. */\nexport const lidEye = ([x, y]: Point, r: number) => `M${x - r} ${y + 0.4} L${x + r} ${y + 0.4}`;\n/** The heavy lid of `empty` over an eye with a white: its upper half. */\nexport const upperLid = ([x, y]: Point, r: number) => `M${x - r} ${y} A${r} ${r} 0 0 1 ${x + r} ${y} Z`;\n/** The worried brow of `error`, above one eye (`side` -1 left, 1 right). */\nexport const brow = ([x, y]: Point, r: number, side: number) =>\n  `M${x - r * 1.1} ${y - r * 1.25 - (side < 0 ? 0 : r * 0.7)} L${x + r * 1.1} ${y - r * 1.5 - (side < 0 ? r * 0.7 : 0)}`;\n\nexport interface MascotPalette {\n  /** Top and bottom of the body gradient. */\n  readonly from: string;\n  readonly to: string;\n  /** Wings and details (tufts, crest). */\n  readonly wing: string;\n  readonly detail: string;\n  /** Beak and feet. */\n  readonly beak: string;\n  /** The pupils (and the falcon's visor lights). */\n  readonly eye: string;\n}\n\n/** The signature palettes of the Krizaka story (`tone=\"own\"`), from the first drawings of each bird. */\nexport const OWN_PALETTES: Readonly<Record<MascotBird, MascotPalette>> = {\n  falcon: { from: \"#ff9f00\", to: \"#ff2a00\", wing: \"#d84315\", detail: \"#b4320d\", beak: \"#ffb300\", eye: \"#00c8d4\" },\n  owl: { from: \"#a78bfa\", to: \"#6d28d9\", wing: \"#7c3aed\", detail: \"#5b21b6\", beak: \"#fbbf24\", eye: \"#1f2937\" },\n  duck: { from: \"#f43f5e\", to: \"#be123c\", wing: \"#db2777\", detail: \"#9f1239\", beak: \"#fbbf24\", eye: \"#1f2937\" },\n  flamingo: { from: \"#f9a8d4\", to: \"#db2777\", wing: \"#ec4899\", detail: \"#be185d\", beak: \"#fbbf24\", eye: \"#1f2937\" },\n  pigeon: { from: \"#22d3ee\", to: \"#6366f1\", wing: \"#a855f7\", detail: \"#4338ca\", beak: \"#f59e0b\", eye: \"#1f2937\" },\n  lovebird: { from: \"#6ee7b7\", to: \"#059669\", wing: \"#047857\", detail: \"#fb7185\", beak: \"#f97316\", eye: \"#1f2937\" },\n  // The sandhill crane (grue du Canada): sand-grey plumage, its red crown, dark legs and beak.\n  crane: { from: \"#ebe3d6\", to: \"#9c8f80\", wing: \"#7d7266\", detail: \"#dc2626\", beak: \"#44403c\", eye: \"#1f2937\" },\n  // The Eurasian magpie (pie bavarde): slate and ink, the cobalt sheen of its wings, a dark beak.\n  magpie: { from: \"#64748b\", to: \"#1e293b\", wing: \"#1d4ed8\", detail: \"#0f172a\", beak: \"#334155\", eye: \"#1f2937\" },\n  // The North American beaver (castor du Canada): warm brown fur, a dark nose and tail, its orange front teeth.\n  beaver: { from: \"#b07a4a\", to: \"#6b4226\", wing: \"#5c3a21\", detail: \"#3f2716\", beak: \"#f59e0b\", eye: \"#1f2937\" },\n};\n\n/** Fixed light and shade, laid at a low opacity over a role (they read on both themes). */\nexport const LIGHT = \"#ffffff\";\nexport const SHADE = \"#000000\";\n/** The parcel's faces (pigeon). */\nexport const PARCEL = [\"#f59e0b\", \"#d97706\", \"#b45309\"] as const;\n"
     },
     {
       "path": "mascots/index.ts",
-      "content": "/** @krizaka/ui/mascots — `Mascot`, the Krizaka flock (seven birds, five moods), and `Phoenix`, the comeback. Client: an id per instance. */\nexport { MASCOT_BIRDS, MASCOT_MOODS, type MascotBird, type MascotMood, type MascotTone } from \"./geometry\";\nexport { Mascot, type MascotProps } from \"./mascot\";\nexport { Phoenix, type PhoenixProps } from \"./phoenix\";\n"
+      "content": "/** @krizaka/ui/mascots — `Mascot`, the Krizaka flock (nine figures, five moods), and `Phoenix`, the comeback. Client: an id per instance. */\nexport { MASCOT_BIRDS, MASCOT_MOODS, type MascotBird, type MascotMood, type MascotTone } from \"./geometry\";\nexport { Mascot, type MascotProps } from \"./mascot\";\nexport { Phoenix, type PhoenixProps } from \"./phoenix\";\n"
     },
     {
       "path": "mascots/mascot.tsx",
-      "content": "// The Krizaka flock on the web: one bird, one mood, drawn from ./geometry in the host's brand colours.\nimport type * as React from \"react\";\nimport { useId } from \"react\";\n\nimport { archEye, BIRDS, brow, lidEye, LIGHT, type MascotBird, type MascotMood, type MascotPalette, type MascotTone, MOOD_PARTS, OWN_PALETTES, PARCEL, SHADE, upperLid } from \"./geometry\";\n\nconst CSS = `\n.kzb-bird { transform-box: view-box; transform-origin: 60px 108px; }\n.kzb-eye { transform-box: fill-box; transform-origin: center; }\n.kzb-wing { transform-box: view-box; }\n[data-animated] .kzb-bird { animation: kzb-bob 3.6s ease-in-out infinite; }\n[data-animated] .kzb-blink { animation: kzb-blink 5.2s ease-in-out infinite; }\n[data-animated][data-mood=\"welcome\"] .kzb-wing-r { animation: kzb-wave 1.1s ease-in-out infinite alternate; }\n[data-animated][data-mood=\"thinking\"] .kzb-dot { animation: kzb-dot 1.5s ease-in-out infinite; }\n[data-animated][data-mood=\"thinking\"] .kzb-dot:nth-child(2) { animation-delay: .2s; }\n[data-animated][data-mood=\"thinking\"] .kzb-dot:nth-child(3) { animation-delay: .4s; }\n[data-animated][data-mood=\"success\"] .kzb-bird { animation: kzb-hop 1.6s cubic-bezier(.3,1.6,.5,1) 1, kzb-bob 3.6s ease-in-out 1.6s infinite; }\n[data-animated][data-mood=\"success\"] .kzb-badge { animation: kzb-pop .5s cubic-bezier(.3,1.6,.5,1) .3s both; }\n[data-animated][data-mood=\"success\"] .kzb-sparkle { animation: kzb-twinkle 2.4s ease-in-out infinite; }\n[data-animated][data-mood=\"error\"] .kzb-bird { animation: kzb-shake .5s ease-in-out .2s 2, kzb-bob 3.6s ease-in-out 1.2s infinite; }\n[data-animated][data-mood=\"empty\"] .kzb-bird { animation: kzb-sway 5s ease-in-out infinite; }\n.kzb-badge, .kzb-sparkle, .kzb-dot { transform-box: fill-box; transform-origin: center; }\n@keyframes kzb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }\n@keyframes kzb-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }\n@keyframes kzb-wave { from { transform: rotate(-8deg); } to { transform: rotate(-38deg); } }\n@keyframes kzb-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }\n@keyframes kzb-hop { 0% { transform: translateY(0); } 30% { transform: translateY(-9px); } 60% { transform: translateY(0); } 100% { transform: translateY(0); } }\n@keyframes kzb-pop { from { transform: scale(0); } to { transform: scale(1); } }\n@keyframes kzb-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }\n@keyframes kzb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }\n@keyframes kzb-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2deg); } }\n@media (prefers-reduced-motion: reduce) {\n  .kzb-bird, .kzb-blink, .kzb-wing-r, .kzb-dot, .kzb-badge, .kzb-sparkle { animation: none !important; }\n}\n`;\n\n/** The host's roles (`tone=\"brand\"`): the accent paints the bird, so it wears the product it is shown in. */\nconst BRAND: MascotPalette = {\n  from: \"var(--kz-accent-2, var(--kz-accent))\",\n  to: \"var(--kz-accent)\",\n  wing: \"var(--kz-accent)\",\n  detail: \"var(--kz-accent-2, var(--kz-accent))\",\n  beak: \"var(--kz-warning)\",\n  eye: \"var(--kz-text-primary)\",\n};\nconst OUTLINE = \"var(--kz-border-strong, color-mix(in srgb, currentColor 35%, transparent))\";\nconst SURFACE = \"var(--kz-surface-0)\";\n\nexport type MascotProps = Omit<React.ComponentProps<\"svg\">, \"children\"> & {\n  /** Which bird of the flock: `falcon` (watch, security), `owl` (reading, documents), `duck` (building, code), `flamingo` (answers, support), `pigeon` (delivery, notifications), `lovebird` (introductions, two people who meet), `crane` (listening, a calm moment). */\n  bird?: MascotBird;\n  /** What the moment is: `welcome` (onboarding), `thinking` (a long task running), `success` (it is done), `empty` (nothing here yet), `error` (it failed). */\n  mood?: MascotMood;\n  /** `brand` (default): the host's accent, so the bird wears the product it is in. `own`: the bird's signature colours of the Krizaka story. */\n  tone?: MascotTone;\n  /** Width and height in pixels. */\n  size?: number;\n  /** A light idle motion and the mood's gesture. Off with `false`; always off under `prefers-reduced-motion`. */\n  animated?: boolean;\n  /** An accessible name (the bird becomes an image); without it the mascot is decorative. */\n  title?: string;\n};\n\n/**\n * One of the seven Krizaka birds in one mood — for the moments a product speaks to a person: a welcome, a long wait,\n * a success, an empty list, an error. Drawn in the host's brand colours by default (`tone=\"own\"` for the story's).\n */\nexport function Mascot({ bird = \"owl\", mood = \"welcome\", tone = \"brand\", size = 96, animated = true, title, className, ...props }: MascotProps) {\n  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n  const g = BIRDS[bird];\n  const p = tone === \"own\" ? OWN_PALETTES[bird] : BRAND;\n  const body = `url(#kzb-${uid})`;\n  const line = { stroke: OUTLINE, strokeWidth: 1.4, strokeLinejoin: \"round\" as const };\n  const eyeR = g.eyes.white || g.eyes.pupil * 1.2;\n  const eyes = g.eyes.at.map((at, i) => {\n    const look = mood === \"thinking\" ? 1.4 : 0;\n    if (mood === \"success\") return <path key={i} d={archEye(at, eyeR * 0.85)} stroke={g.visor ? p.eye : OUTLINE} strokeWidth={2.2} strokeLinecap=\"round\" fill=\"none\" />;\n    if (mood === \"empty\" && g.eyes.white > 0)\n      return (\n        <g key={i}>\n          <circle cx={at[0]} cy={at[1]} r={g.eyes.white} fill={LIGHT} {...line} />\n          <circle cx={at[0]} cy={at[1] + g.eyes.pupil * 0.7} r={g.eyes.pupil} fill={SHADE} />\n          <path d={upperLid(at, g.eyes.white)} fill={p.detail} {...line} />\n        </g>\n      );\n    if (mood === \"empty\") return <path key={i} d={lidEye(at, eyeR * 0.8)} stroke={g.visor ? p.eye : OUTLINE} strokeWidth={2.2} strokeLinecap=\"round\" fill=\"none\" />;\n    return (\n      <g key={i} className=\"kzb-eye kzb-blink\">\n        {g.eyes.white > 0 && <circle cx={at[0]} cy={at[1]} r={g.eyes.white} fill={LIGHT} {...line} />}\n        <circle cx={at[0] + look} cy={at[1] - look} r={g.eyes.pupil} fill={g.visor ? p.eye : SHADE} />\n        {g.eyes.white > 0 && <circle cx={at[0] + look - g.eyes.pupil * 0.35} cy={at[1] - look - g.eyes.pupil * 0.35} r={g.eyes.pupil * 0.35} fill={LIGHT} />}\n      </g>\n    );\n  });\n  const [wl, wr] = g.wings;\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-bird={bird}\n      data-mood={mood}\n      data-animated={animated ? \"\" : undefined}\n      className={className}\n      {...(title ? { role: \"img\", \"aria-label\": title } : { \"aria-hidden\": true })}\n      {...props}\n    >\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={`kzb-${uid}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" style={{ stopColor: p.from }} />\n          <stop offset=\"100%\" style={{ stopColor: p.to }} />\n        </linearGradient>\n      </defs>\n      <ellipse cx={g.shadow[0]} cy={g.shadow[1]} rx={g.shadow[2]} ry={g.shadow[3]} fill={SHADE} opacity={0.14} />\n      {mood === \"empty\" && <path d={MOOD_PARTS.tray} stroke={OUTLINE} strokeWidth={1.6} strokeDasharray=\"3 3\" strokeLinejoin=\"round\" />}\n      <g className=\"kzb-bird\">\n        {g.legs.map((d) => (\n          <path key={d} d={d} stroke={p.beak} strokeWidth={2.6} strokeLinecap=\"round\" />\n        ))}\n        {g.back?.map((d) => (d.endsWith(\"Z\") ? <path key={d} d={d} fill={p.detail} {...line} /> : <path key={d} d={d} stroke={OUTLINE} strokeWidth={1.4} />))}\n        {g.parcel && (\n          <g {...line}>\n            {g.parcel.map((d, i) => (\n              <path key={d} d={d} fill={PARCEL[i]} />\n            ))}\n          </g>\n        )}\n        <path d={g.body} fill={body} {...line} />\n        <path d={g.belly} fill={LIGHT} opacity={0.28} />\n        {[wl, wr].map((w, i) => {\n          const turn = mood === \"success\" ? (i === 0 ? 28 : -28) : mood === \"welcome\" && i === 1 ? -20 : 0;\n          return (\n            <g key={i} className={i === 1 ? \"kzb-wing kzb-wing-r\" : \"kzb-wing\"} style={{ transformOrigin: `${w.pivot[0]}px ${w.pivot[1]}px`, transform: turn ? `rotate(${turn}deg)` : undefined }}>\n              <path d={w.d} fill={p.wing} {...line} />\n              <path d={w.d} fill={SHADE} opacity={0.16} />\n            </g>\n          );\n        })}\n        {g.neck && <path d={g.neck.d} stroke={body} strokeWidth={g.neck.width} strokeLinecap=\"round\" />}\n        {g.head.r > 0 && <circle cx={g.head.cx} cy={g.head.cy} r={g.head.r} fill={body} {...line} />}\n        {g.details.map((d) => (\n          <path key={d} d={d} fill={p.detail} {...line} />\n        ))}\n        {g.visor && <rect x={g.visor.x} y={g.visor.y} width={g.visor.w} height={g.visor.h} rx={4} fill={SURFACE} {...line} />}\n        {eyes}\n        {g.glasses && (\n          <g stroke={OUTLINE} strokeWidth={1.3}>\n            {g.eyes.at.map(([x, y]) => (\n              <circle key={x} cx={x} cy={y} r={6.5} fill={LIGHT} fillOpacity={0.12} />\n            ))}\n            <path d={`M${g.eyes.at[0][0] + 6.5} ${g.eyes.at[0][1]} L${g.eyes.at[1][0] - 6.5} ${g.eyes.at[1][1]}`} />\n          </g>\n        )}\n        {mood === \"error\" &&\n          g.eyes.at.map((at, i) => <path key={i} d={brow(at, eyeR, g.eyes.at.length === 1 ? 1 : i === 0 ? -1 : 1)} stroke={OUTLINE} strokeWidth={2} strokeLinecap=\"round\" />)}\n        <path d={g.beak} fill={p.beak} {...line} />\n      </g>\n      {mood === \"thinking\" && (\n        <g>\n          {MOOD_PARTS.dots.map(([cx, cy, r]) => (\n            <circle key={cx} className=\"kzb-dot\" cx={cx} cy={cy} r={r} fill=\"var(--kz-text-secondary)\" />\n          ))}\n        </g>\n      )}\n      {mood === \"success\" && (\n        <>\n          {MOOD_PARTS.sparkles.map((d) => (\n            <path key={d} className=\"kzb-sparkle\" d={d} fill={p.from} />\n          ))}\n          <g className=\"kzb-badge\">\n            <circle cx={MOOD_PARTS.badge.cx} cy={MOOD_PARTS.badge.cy} r={MOOD_PARTS.badge.r} fill=\"var(--kz-success)\" />\n            <path d={MOOD_PARTS.check} stroke={SURFACE} strokeWidth={2.6} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </g>\n        </>\n      )}\n      {mood === \"error\" && (\n        <g className=\"kzb-badge\">\n          <circle cx={MOOD_PARTS.badge.cx} cy={MOOD_PARTS.badge.cy} r={MOOD_PARTS.badge.r} fill=\"var(--kz-danger)\" />\n          <path d={MOOD_PARTS.bang.line} stroke={SURFACE} strokeWidth={2.8} strokeLinecap=\"round\" />\n          <circle cx={MOOD_PARTS.bang.dot[0]} cy={MOOD_PARTS.bang.dot[1]} r={1.6} fill={SURFACE} />\n        </g>\n      )}\n    </svg>\n  );\n}\n"
+      "content": "// The Krizaka flock on the web: one bird, one mood, drawn from ./geometry in the host's brand colours.\nimport type * as React from \"react\";\nimport { useId } from \"react\";\n\nimport { archEye, BIRDS, brow, lidEye, LIGHT, type MascotBird, type MascotMood, type MascotPalette, type MascotTone, MOOD_PARTS, OWN_PALETTES, PARCEL, SHADE, upperLid } from \"./geometry\";\n\nconst CSS = `\n.kzb-bird { transform-box: view-box; transform-origin: 60px 108px; }\n.kzb-eye { transform-box: fill-box; transform-origin: center; }\n.kzb-wing { transform-box: view-box; }\n[data-animated] .kzb-bird { animation: kzb-bob 3.6s ease-in-out infinite; }\n[data-animated] .kzb-blink { animation: kzb-blink 5.2s ease-in-out infinite; }\n[data-animated][data-mood=\"welcome\"] .kzb-wing-r { animation: kzb-wave 1.1s ease-in-out infinite alternate; }\n[data-animated][data-mood=\"thinking\"] .kzb-dot { animation: kzb-dot 1.5s ease-in-out infinite; }\n[data-animated][data-mood=\"thinking\"] .kzb-dot:nth-child(2) { animation-delay: .2s; }\n[data-animated][data-mood=\"thinking\"] .kzb-dot:nth-child(3) { animation-delay: .4s; }\n[data-animated][data-mood=\"success\"] .kzb-bird { animation: kzb-hop 1.6s cubic-bezier(.3,1.6,.5,1) 1, kzb-bob 3.6s ease-in-out 1.6s infinite; }\n[data-animated][data-mood=\"success\"] .kzb-badge { animation: kzb-pop .5s cubic-bezier(.3,1.6,.5,1) .3s both; }\n[data-animated][data-mood=\"success\"] .kzb-sparkle { animation: kzb-twinkle 2.4s ease-in-out infinite; }\n[data-animated][data-mood=\"error\"] .kzb-bird { animation: kzb-shake .5s ease-in-out .2s 2, kzb-bob 3.6s ease-in-out 1.2s infinite; }\n[data-animated][data-mood=\"empty\"] .kzb-bird { animation: kzb-sway 5s ease-in-out infinite; }\n.kzb-badge, .kzb-sparkle, .kzb-dot { transform-box: fill-box; transform-origin: center; }\n@keyframes kzb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }\n@keyframes kzb-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }\n@keyframes kzb-wave { from { transform: rotate(-8deg); } to { transform: rotate(-38deg); } }\n@keyframes kzb-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }\n@keyframes kzb-hop { 0% { transform: translateY(0); } 30% { transform: translateY(-9px); } 60% { transform: translateY(0); } 100% { transform: translateY(0); } }\n@keyframes kzb-pop { from { transform: scale(0); } to { transform: scale(1); } }\n@keyframes kzb-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }\n@keyframes kzb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }\n@keyframes kzb-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2deg); } }\n@media (prefers-reduced-motion: reduce) {\n  .kzb-bird, .kzb-blink, .kzb-wing-r, .kzb-dot, .kzb-badge, .kzb-sparkle { animation: none !important; }\n}\n`;\n\n/** The host's roles (`tone=\"brand\"`): the accent paints the bird, so it wears the product it is shown in. */\nconst BRAND: MascotPalette = {\n  from: \"var(--kz-accent-2, var(--kz-accent))\",\n  to: \"var(--kz-accent)\",\n  wing: \"var(--kz-accent)\",\n  detail: \"var(--kz-accent-2, var(--kz-accent))\",\n  beak: \"var(--kz-warning)\",\n  eye: \"var(--kz-text-primary)\",\n};\nconst OUTLINE = \"var(--kz-border-strong, color-mix(in srgb, currentColor 35%, transparent))\";\nconst SURFACE = \"var(--kz-surface-0)\";\n\nexport type MascotProps = Omit<React.ComponentProps<\"svg\">, \"children\"> & {\n  /** Which bird of the flock: `falcon` (watch, security), `owl` (reading, documents), `duck` (building, code), `flamingo` (answers, support), `pigeon` (delivery, notifications), `lovebird` (introductions, two people who meet), `crane` (listening, a calm moment), `magpie` (the score: points, standings, trophies), `beaver` (the shop: a small business at work). */\n  bird?: MascotBird;\n  /** What the moment is: `welcome` (onboarding), `thinking` (a long task running), `success` (it is done), `empty` (nothing here yet), `error` (it failed). */\n  mood?: MascotMood;\n  /** `brand` (default): the host's accent, so the bird wears the product it is in. `own`: the bird's signature colours of the Krizaka story. */\n  tone?: MascotTone;\n  /** Width and height in pixels. */\n  size?: number;\n  /** A light idle motion and the mood's gesture. Off with `false`; always off under `prefers-reduced-motion`. */\n  animated?: boolean;\n  /** An accessible name (the bird becomes an image); without it the mascot is decorative. */\n  title?: string;\n};\n\n/**\n * One of the nine Krizaka figures in one mood — for the moments a product speaks to a person: a welcome, a long wait,\n * a success, an empty list, an error. Drawn in the host's brand colours by default (`tone=\"own\"` for the story's).\n */\nexport function Mascot({ bird = \"owl\", mood = \"welcome\", tone = \"brand\", size = 96, animated = true, title, className, ...props }: MascotProps) {\n  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n  const g = BIRDS[bird];\n  const p = tone === \"own\" ? OWN_PALETTES[bird] : BRAND;\n  const body = `url(#kzb-${uid})`;\n  const line = { stroke: OUTLINE, strokeWidth: 1.4, strokeLinejoin: \"round\" as const };\n  const eyeR = g.eyes.white || g.eyes.pupil * 1.2;\n  const eyes = g.eyes.at.map((at, i) => {\n    const look = mood === \"thinking\" ? 1.4 : 0;\n    if (mood === \"success\") return <path key={i} d={archEye(at, eyeR * 0.85)} stroke={g.visor ? p.eye : OUTLINE} strokeWidth={2.2} strokeLinecap=\"round\" fill=\"none\" />;\n    if (mood === \"empty\" && g.eyes.white > 0)\n      return (\n        <g key={i}>\n          <circle cx={at[0]} cy={at[1]} r={g.eyes.white} fill={LIGHT} {...line} />\n          <circle cx={at[0]} cy={at[1] + g.eyes.pupil * 0.7} r={g.eyes.pupil} fill={SHADE} />\n          <path d={upperLid(at, g.eyes.white)} fill={p.detail} {...line} />\n        </g>\n      );\n    if (mood === \"empty\") return <path key={i} d={lidEye(at, eyeR * 0.8)} stroke={g.visor ? p.eye : OUTLINE} strokeWidth={2.2} strokeLinecap=\"round\" fill=\"none\" />;\n    return (\n      <g key={i} className=\"kzb-eye kzb-blink\">\n        {g.eyes.white > 0 && <circle cx={at[0]} cy={at[1]} r={g.eyes.white} fill={LIGHT} {...line} />}\n        <circle cx={at[0] + look} cy={at[1] - look} r={g.eyes.pupil} fill={g.visor ? p.eye : SHADE} />\n        {g.eyes.white > 0 && <circle cx={at[0] + look - g.eyes.pupil * 0.35} cy={at[1] - look - g.eyes.pupil * 0.35} r={g.eyes.pupil * 0.35} fill={LIGHT} />}\n      </g>\n    );\n  });\n  const [wl, wr] = g.wings;\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      data-bird={bird}\n      data-mood={mood}\n      data-animated={animated ? \"\" : undefined}\n      className={className}\n      {...(title ? { role: \"img\", \"aria-label\": title } : { \"aria-hidden\": true })}\n      {...props}\n    >\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={`kzb-${uid}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" style={{ stopColor: p.from }} />\n          <stop offset=\"100%\" style={{ stopColor: p.to }} />\n        </linearGradient>\n      </defs>\n      <ellipse cx={g.shadow[0]} cy={g.shadow[1]} rx={g.shadow[2]} ry={g.shadow[3]} fill={SHADE} opacity={0.14} />\n      {mood === \"empty\" && <path d={MOOD_PARTS.tray} stroke={OUTLINE} strokeWidth={1.6} strokeDasharray=\"3 3\" strokeLinejoin=\"round\" />}\n      <g className=\"kzb-bird\">\n        {g.legs.map((d) => (\n          <path key={d} d={d} stroke={p.beak} strokeWidth={2.6} strokeLinecap=\"round\" />\n        ))}\n        {g.back?.map((d) => (d.endsWith(\"Z\") ? <path key={d} d={d} fill={p.detail} {...line} /> : <path key={d} d={d} stroke={OUTLINE} strokeWidth={1.4} />))}\n        {g.parcel && (\n          <g {...line}>\n            {g.parcel.map((d, i) => (\n              <path key={d} d={d} fill={PARCEL[i]} />\n            ))}\n          </g>\n        )}\n        <path d={g.body} fill={body} {...line} />\n        <path d={g.belly} fill={LIGHT} opacity={0.28} />\n        {[wl, wr].map((w, i) => {\n          const turn = mood === \"success\" ? (i === 0 ? 28 : -28) : mood === \"welcome\" && i === 1 ? -20 : 0;\n          return (\n            <g key={i} className={i === 1 ? \"kzb-wing kzb-wing-r\" : \"kzb-wing\"} style={{ transformOrigin: `${w.pivot[0]}px ${w.pivot[1]}px`, transform: turn ? `rotate(${turn}deg)` : undefined }}>\n              <path d={w.d} fill={p.wing} {...line} />\n              <path d={w.d} fill={SHADE} opacity={0.16} />\n            </g>\n          );\n        })}\n        {g.neck && <path d={g.neck.d} stroke={body} strokeWidth={g.neck.width} strokeLinecap=\"round\" />}\n        {g.head.r > 0 && <circle cx={g.head.cx} cy={g.head.cy} r={g.head.r} fill={body} {...line} />}\n        {g.details.map((d) => (\n          <path key={d} d={d} fill={p.detail} {...line} />\n        ))}\n        {g.visor && <rect x={g.visor.x} y={g.visor.y} width={g.visor.w} height={g.visor.h} rx={4} fill={SURFACE} {...line} />}\n        {eyes}\n        {g.glasses && (\n          <g stroke={OUTLINE} strokeWidth={1.3}>\n            {g.eyes.at.map(([x, y]) => (\n              <circle key={x} cx={x} cy={y} r={6.5} fill={LIGHT} fillOpacity={0.12} />\n            ))}\n            <path d={`M${g.eyes.at[0][0] + 6.5} ${g.eyes.at[0][1]} L${g.eyes.at[1][0] - 6.5} ${g.eyes.at[1][1]}`} />\n          </g>\n        )}\n        {mood === \"error\" &&\n          g.eyes.at.map((at, i) => <path key={i} d={brow(at, eyeR, g.eyes.at.length === 1 ? 1 : i === 0 ? -1 : 1)} stroke={OUTLINE} strokeWidth={2} strokeLinecap=\"round\" />)}\n        <path d={g.beak} fill={p.beak} {...line} />\n      </g>\n      {mood === \"thinking\" && (\n        <g>\n          {MOOD_PARTS.dots.map(([cx, cy, r]) => (\n            <circle key={cx} className=\"kzb-dot\" cx={cx} cy={cy} r={r} fill=\"var(--kz-text-secondary)\" />\n          ))}\n        </g>\n      )}\n      {mood === \"success\" && (\n        <>\n          {MOOD_PARTS.sparkles.map((d) => (\n            <path key={d} className=\"kzb-sparkle\" d={d} fill={p.from} />\n          ))}\n          <g className=\"kzb-badge\">\n            <circle cx={MOOD_PARTS.badge.cx} cy={MOOD_PARTS.badge.cy} r={MOOD_PARTS.badge.r} fill=\"var(--kz-success)\" />\n            <path d={MOOD_PARTS.check} stroke={SURFACE} strokeWidth={2.6} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </g>\n        </>\n      )}\n      {mood === \"error\" && (\n        <g className=\"kzb-badge\">\n          <circle cx={MOOD_PARTS.badge.cx} cy={MOOD_PARTS.badge.cy} r={MOOD_PARTS.badge.r} fill=\"var(--kz-danger)\" />\n          <path d={MOOD_PARTS.bang.line} stroke={SURFACE} strokeWidth={2.8} strokeLinecap=\"round\" />\n          <circle cx={MOOD_PARTS.bang.dot[0]} cy={MOOD_PARTS.bang.dot[1]} r={1.6} fill={SURFACE} />\n        </g>\n      )}\n    </svg>\n  );\n}\n"
     },
     {
       "path": "mascots/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Mascots\",\n  summary: \"The Krizaka flock: seven birds (falcon, owl, duck, flamingo, pigeon, lovebird, crane) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.\",\n  status: \"beta\",\n  category: \"feedback\",\n  platforms: \"both\",\n  whenToUse: [\n    \"To welcome a person on a first screen or an onboarding step (`welcome`).\",\n    \"While a long task runs and the person waits for it (`thinking`), beside its progress.\",\n    \"When a long task has just finished well (`success`): a generation, an import, a verification.\",\n    \"In an empty state the person reaches for the first time (`empty`), above its title.\",\n    \"On a full-page or panel error, beside what went wrong and what to do (`error`).\",\n  ],\n  whenNotToUse: [\n    { when: \"In the middle of working content (a list row, a toolbar, a form): a mascot is for a moment, not decoration.\", use: \"badge\" },\n    { when: \"For a short wait of a second or two.\", use: \"spinner\" },\n    { when: \"To announce a result that needs no celebration.\", use: \"toast\" },\n  ],\n  bestPractices: [\n    \"One mascot per screen, and only at a moment that matters: a welcome, a wait, a success, an empty list, an error.\",\n    \"Keep the bird's role: the owl reads (documents), the falcon watches (security), the duck builds (code), the flamingo answers (support), the pigeon delivers (notifications, packages), the lovebird introduces (matches, two people who meet), the crane listens (a quiet moment, someone who takes their time).\",\n    \"The phoenix (`Phoenix`) does no job: keep it for a comeback — a relaunch, a recovered account, a second chance — never as one more helper.\",\n    \"Leave `tone=\\\"brand\\\"` in a product: the bird wears the product's accent; `own` is for the Krizaka story.\",\n    \"The words stay beside it (a title, a line, an action): the mascot never carries the message alone.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"Decorative by default (`aria-hidden`): the text next to it carries the meaning. With `title` it becomes an image with that name.\",\n      \"Every gesture (idle bob, blink, wave, dots, hop) stops under `prefers-reduced-motion`, and with `animated={false}`.\",\n      \"The success and error badges are not the only signal: say it in words beside the bird.\",\n    ],\n  },\n  related: [\"empty-state\", \"progress\", \"alert\", \"spinner\"],\n  web: {\n    imports: [\"Mascot\", \"MASCOT_BIRDS\", \"MASCOT_MOODS\", \"Phoenix\"],\n    examples: [\n      { name: \"moods\", title: \"Moods\", description: \"One bird in its five moods: welcome, thinking, success, empty, error.\" },\n      { name: \"flock\", title: \"The flock\", description: \"The seven birds in the brand colours of the host.\" },\n      { name: \"own-tone\", title: \"Signature colours\", description: \"`tone=\\\"own\\\"`: each bird in its colours of the Krizaka story.\" },\n      { name: \"empty-state\", title: \"In an empty state\", description: \"The owl above an empty list, the words and the action beside it.\" },\n      { name: \"long-task\", title: \"During a long task\", description: \"The pigeon thinking beside the progress of a job.\" },\n      { name: \"lovebird\", title: \"An introduction\", description: \"The lovebird celebrates a mutual interest: two people who chose each other meet.\" },\n      { name: \"phoenix\", title: \"The phoenix\", description: \"The sixth figure: a comeback — a relaunch, a recovered account — in its own colours or the brand's.\" },\n      { name: \"crane\", title: \"Listening\", description: \"The crane stands still and listens: a calm opening, the words and one action beside it.\" },\n    ],\n  },\n  native: {\n    imports: [\"Mascot\", \"Phoenix\"],\n    differences: [\"Only the idle bob and the badges: the wave, the dots and the hop are web gestures.\", \"Style with `style`, not `className`.\"],\n    examples: [\n      { name: \"default\", title: \"Default\", description: \"The owl welcoming, the falcon done, the duck with nothing yet.\" },\n      { name: \"lovebird\", title: \"The lovebird\", description: \"The lovebird welcoming, then celebrating a mutual interest.\" },\n      { name: \"phoenix\", title: \"The phoenix\", description: \"The comeback, in its own colours and in the app's accent.\" },\n      { name: \"crane\", title: \"The crane\", description: \"The crane welcoming, then listening — posed, unhurried.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Mascots\",\n  summary: \"The Krizaka flock: nine figures (falcon, owl, duck, flamingo, pigeon, lovebird, crane, magpie — and the beaver) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.\",\n  status: \"beta\",\n  category: \"feedback\",\n  platforms: \"both\",\n  whenToUse: [\n    \"To welcome a person on a first screen or an onboarding step (`welcome`).\",\n    \"While a long task runs and the person waits for it (`thinking`), beside its progress.\",\n    \"When a long task has just finished well (`success`): a generation, an import, a verification.\",\n    \"In an empty state the person reaches for the first time (`empty`), above its title.\",\n    \"On a full-page or panel error, beside what went wrong and what to do (`error`).\",\n  ],\n  whenNotToUse: [\n    { when: \"In the middle of working content (a list row, a toolbar, a form): a mascot is for a moment, not decoration.\", use: \"badge\" },\n    { when: \"For a short wait of a second or two.\", use: \"spinner\" },\n    { when: \"To announce a result that needs no celebration.\", use: \"toast\" },\n  ],\n  bestPractices: [\n    \"One mascot per screen, and only at a moment that matters: a welcome, a wait, a success, an empty list, an error.\",\n    \"Keep the bird's role: the owl reads (documents), the falcon watches (security), the duck builds (code), the flamingo answers (support), the pigeon delivers (notifications, packages), the lovebird introduces (matches, two people who meet), the crane listens (a quiet moment, someone who takes their time), the magpie keeps the score (points, standings, trophies), the beaver builds the shop (a small business at work: bookings, invoices, the till).\",\n    \"The phoenix (`Phoenix`) does no job: keep it for a comeback — a relaunch, a recovered account, a second chance — never as one more helper.\",\n    \"Leave `tone=\\\"brand\\\"` in a product: the bird wears the product's accent; `own` is for the Krizaka story.\",\n    \"The words stay beside it (a title, a line, an action): the mascot never carries the message alone.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"Decorative by default (`aria-hidden`): the text next to it carries the meaning. With `title` it becomes an image with that name.\",\n      \"Every gesture (idle bob, blink, wave, dots, hop) stops under `prefers-reduced-motion`, and with `animated={false}`.\",\n      \"The success and error badges are not the only signal: say it in words beside the bird.\",\n    ],\n  },\n  related: [\"empty-state\", \"progress\", \"alert\", \"spinner\"],\n  web: {\n    imports: [\"Mascot\", \"MASCOT_BIRDS\", \"MASCOT_MOODS\", \"Phoenix\"],\n    examples: [\n      { name: \"moods\", title: \"Moods\", description: \"One bird in its five moods: welcome, thinking, success, empty, error.\" },\n      { name: \"flock\", title: \"The flock\", description: \"The nine figures in the brand colours of the host.\" },\n      { name: \"own-tone\", title: \"Signature colours\", description: \"`tone=\\\"own\\\"`: each bird in its colours of the Krizaka story.\" },\n      { name: \"empty-state\", title: \"In an empty state\", description: \"The owl above an empty list, the words and the action beside it.\" },\n      { name: \"long-task\", title: \"During a long task\", description: \"The pigeon thinking beside the progress of a job.\" },\n      { name: \"lovebird\", title: \"An introduction\", description: \"The lovebird celebrates a mutual interest: two people who chose each other meet.\" },\n      { name: \"phoenix\", title: \"The phoenix\", description: \"The sixth figure: a comeback — a relaunch, a recovered account — in its own colours or the brand's.\" },\n      { name: \"crane\", title: \"Listening\", description: \"The crane stands still and listens: a calm opening, the words and one action beside it.\" },\n      { name: \"magpie\", title: \"Keeping the score\", description: \"The magpie celebrates a win: the points counted, the standings moved, the words beside it.\" },\n      { name: \"beaver\", title: \"At the shop\", description: \"The beaver at work: the day's bookings, the words and one action beside it.\" },\n    ],\n  },\n  native: {\n    imports: [\"Mascot\", \"Phoenix\"],\n    differences: [\"Only the idle bob and the badges: the wave, the dots and the hop are web gestures.\", \"Style with `style`, not `className`.\"],\n    examples: [\n      { name: \"default\", title: \"Default\", description: \"The owl welcoming, the falcon done, the duck with nothing yet.\" },\n      { name: \"lovebird\", title: \"The lovebird\", description: \"The lovebird welcoming, then celebrating a mutual interest.\" },\n      { name: \"phoenix\", title: \"The phoenix\", description: \"The comeback, in its own colours and in the app's accent.\" },\n      { name: \"crane\", title: \"The crane\", description: \"The crane welcoming, then listening — posed, unhurried.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "mascots/phoenix-geometry.ts",
@@ -363,12 +379,12 @@
   "props": [
     {
       "component": "MASCOT_BIRDS",
-      "description": "The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one\n(`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,\nthe owl that reads, the developer duck, the flamingo that answers, the carrier pigeon), the lovebird that\nintroduces (2026-10, with Yasakia: \"l'inséparable présente\") and the crane that listens (2026-10, with Yororis:\n\"la grue écoute\"), redrawn on one 120 × 120 grid so that any bird can wear any mood.\n\nColours are roles, never fixed: `brand` (the default) paints a bird in the host's accent (`--kz-accent`,\n`--kz-accent-2`), so the same falcon is blue on krizaka.com, orange in Orazaka and violet in Orochia; `own` gives\neach bird the signature palette it has in the Krizaka story (the brand layer's exception, like the marks). Shades\nand highlights are black and white at a low opacity over the role, so they hold in both themes.",
+      "description": "The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one\n(`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,\nthe owl that reads, the developer duck, the flamingo that answers, the carrier pigeon), the lovebird that\nintroduces (2026-10, with Yasakia: \"l'inséparable présente\") and the crane that listens (2026-10, with Yororis:\n\"la grue écoute\"), the magpie that keeps the score (2026-10, with Kachizaka: \"la pie compte les points\") and the\nbeaver that builds the shop (2026-10, with Akinaza: \"le castor artisan\" — the one figure of the flock without\nfeathers: its paws are drawn as wings, its paddle tail behind it), redrawn on one 120 × 120 grid so that any figure\ncan wear any mood.\n\nColours are roles, never fixed: `brand` (the default) paints a bird in the host's accent (`--kz-accent`,\n`--kz-accent-2`), so the same falcon is blue on krizaka.com, orange in Orazaka and violet in Orochia; `own` gives\neach bird the signature palette it has in the Krizaka story (the brand layer's exception, like the marks). Shades\nand highlights are black and white at a low opacity over the role, so they hold in both themes.",
       "props": []
     },
     {
       "component": "Mascot",
-      "description": "One of the seven Krizaka birds in one mood — for the moments a product speaks to a person: a welcome, a long wait,\na success, an empty list, an error. Drawn in the host's brand colours by default (`tone=\"own\"` for the story's).",
+      "description": "One of the nine Krizaka figures in one mood — for the moments a product speaks to a person: a welcome, a long wait,\na success, an empty list, an error. Drawn in the host's brand colours by default (`tone=\"own\"` for the story's).",
       "props": [
         {
           "name": "animated",
@@ -379,9 +395,9 @@
         },
         {
           "name": "bird",
-          "type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
+          "type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
           "default": "owl",
-          "description": "Which bird of the flock: `falcon` (watch, security), `owl` (reading, documents), `duck` (building, code), `flamingo` (answers, support), `pigeon` (delivery, notifications), `lovebird` (introductions, two people who meet), `crane` (listening, a calm moment).",
+          "description": "Which bird of the flock: `falcon` (watch, security), `owl` (reading, documents), `duck` (building, code), `flamingo` (answers, support), `pigeon` (delivery, notifications), `lovebird` (introductions, two people who meet), `crane` (listening, a calm moment), `magpie` (the score: points, standings, trophies), `beaver` (the shop: a small business at work).",
           "required": false
         },
         {

package/registry/nav-bar.json

@@ -400,6 +400,14 @@
       "path": "family-mark.tsx",
       "content": "// The mark of a site of the family (`@krizaka/ui/sites`): its brand's `ProductLogo`, still (a list of marks never\n// moves), or GitHub's, in the text colour. Shared by `NavBar.Family` and `SiteFooter` — not an entry of its own.\nimport type * as React from \"react\";\n\nimport { ProductLogo } from \"./marks/ProductLogo\";\nimport type { SiteMark } from \"./sites/sites\";\n\n/** GitHub's mark, in the text colour (both themes). */\nexport function GitHubGlyph({ size = 16, className }: { size?: number; className?: string }) {\n  return (\n    <svg viewBox=\"0 0 16 16\" width={size} height={size} fill=\"currentColor\" aria-hidden className={className}>\n      <path d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z\" />\n    </svg>\n  );\n}\n\n/** A site's mark, decorative (its name is always written beside it). */\nexport function FamilyMark({ mark, size }: { mark: SiteMark; size: number }): React.ReactElement {\n  if (mark === \"github\") return <GitHubGlyph size={Math.round(size * 0.8)} />;\n  return <ProductLogo id={mark} size={size} animated={false} />;\n}\n"
     },
+    {
+      "path": "marks/AkinazaLogo.tsx",
+      "content": "import { AKINAZA as G } from \"./akinaza-geometry\";\nimport { a11y, type MarkProps, neutral, useIds, withAlpha } from \"./shared\";\n\nconst CSS = `\n.akm-orbit { transform-origin: 200px 200px; animation: akm-orbit 32s linear infinite; }\n.akm-door { animation: akm-door 3.8s ease-in-out infinite; }\n@keyframes akm-orbit { to { transform: rotate(360deg); } }\n@keyframes akm-door {\n  0%, 100% { filter: drop-shadow(0 0 4px ${withAlpha(G.pulse.color, G.pulse.low)}); }\n  50% { filter: drop-shadow(0 0 14px ${withAlpha(G.pulse.color, G.pulse.high)}); }\n}\n@media (prefers-reduced-motion: reduce) { .akm-orbit, .akm-door { animation: none; } }\n`;\n\n/**\n * The Akinaza mark, \"the open shop\": a filled awning with the Krizaka cut at its corner, scalloped, its stripes in\n * light; under it the shop front, two windows and the open door — a warm light that breathes. In the Akinaza gradient\n * (forest → copper, the brand's mark gradient of @krizaka/tokens, the same in dark and light); one node, a coin, rides\n * the dashed orbit. The family's grammar (orbit, ring, bold emblem, bright core). Below 48 px it crops to the emblem.\n */\nexport function AkinazaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"akm\", [\"gradient\", \"core\", \"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        <linearGradient id={id.core} x1=\"50%\" y1=\"100%\" x2=\"50%\" y2=\"0%\">\n          {G.coreGradient.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={animated ? \"akm-orbit\" : undefined}>\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.awning} fill={fill} />\n      <path d={G.stripes} stroke={G.stripe.color} strokeOpacity={G.stripe.opacity} strokeWidth={G.stripe.width} strokeLinecap=\"round\" />\n      <path d={G.front} fill={fill} />\n      <path d={G.windows} fill={G.stripe.color} fillOpacity={G.stripe.opacity} />\n      <rect className={animated ? \"akm-door\" : undefined} x={G.door.x} y={G.door.y} width={G.door.w} height={G.door.h} rx={G.door.rx} fill={`url(#${id.core})`} />\n    </svg>\n  );\n}\n"
+    },
+    {
+      "path": "marks/KachizakaLogo.tsx",
+      "content": "import { KACHIZAKA as G } from \"./kachizaka-geometry\";\nimport { a11y, type MarkProps, neutral, useIds, withAlpha } from \"./shared\";\n\nconst CSS = `\n.kzm-orbit { transform-origin: 200px 200px; animation: kzm-orbit 28s linear infinite; }\n.kzm-seal { transform-box: fill-box; transform-origin: center; animation: kzm-seal 3.2s ease-in-out infinite; }\n@keyframes kzm-orbit { to { transform: rotate(360deg); } }\n@keyframes kzm-seal {\n  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px ${withAlpha(G.pulse.color, G.pulse.low)}); }\n  50% { transform: scale(1.06); filter: drop-shadow(0 0 12px ${withAlpha(G.pulse.color, G.pulse.high)}); }\n}\n@media (prefers-reduced-motion: reduce) { .kzm-orbit, .kzm-seal { animation: none; } }\n`;\n\n/**\n * The Kachizaka mark, \"the sealed cup\": a filled trophy whose rim wears the Krizaka cut, two handles, a stem and a\n * base, in the Kachizaka gradient (cobalt → gold, the brand's mark gradient of @krizaka/tokens, the same in dark and\n * light); on the bowl a star in light — the seal of the rules, locked at kick-off — breathes; one node, the ball, rides\n * the dashed orbit. The family's grammar (orbit, ring, bold emblem, bright core). Below 48 px it crops to the emblem.\n */\nexport function KachizakaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"kzm\", [\"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.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n      <g className={animated ? \"kzm-orbit\" : undefined}>\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.handles} stroke={fill} strokeWidth={G.handleWidth} strokeLinecap=\"round\" />\n      <path d={G.base} fill={fill} />\n      <path d={G.cup} fill={fill} />\n      <path className={animated ? \"kzm-seal\" : undefined} d={G.star} fill={G.starColor} />\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"
@@ -414,7 +422,7 @@
     },
     {
       "path": "marks/ProductLogo.tsx",
-      "content": "import { 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\";\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` or `yomizaka` (`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  return <OrochiaLogo {...props} />;\n}\n"
+      "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",
@@ -428,6 +436,14 @@
       "path": "marks/YororisLogo.tsx",
       "content": "import { a11y, type MarkProps, neutral, useIds, withAlpha } from \"./shared\";\nimport { YORORIS as G } from \"./yororis-geometry\";\n\nconst CSS = `\n.yrm-orbit { transform-origin: 200px 200px; animation: yrm-orbit 36s linear infinite; }\n.yrm-vein { animation: yrm-vein 4.8s linear infinite; }\n.yrm-core { transform-box: fill-box; transform-origin: center; animation: yrm-core 4.2s ease-in-out infinite; }\n@keyframes yrm-orbit { to { transform: rotate(360deg); } }\n@keyframes yrm-vein { to { stroke-dashoffset: 64; } }\n@keyframes yrm-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 16px ${withAlpha(G.pulse.color, G.pulse.high)}); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) { .yrm-orbit, .yrm-vein, .yrm-core { animation: none; } }\n`;\n\n/**\n * The Yororis mark, \"the hold\": a \"Y\" whose arms are two filled leaves — open hands — rising from one stem and cupping\n * a warm core that breathes: held, given room, listened to. Leaves in the Yororis gradient (sand → sage, the brand's\n * mark gradient of @krizaka/tokens, the same in dark and light), a vein of light along each, the core in a warm sand\n * light; the moment, one node on the dashed orbit, comes round slowly. The family's grammar (orbit, ring, bold emblem,\n * bright core) with the slowest breath of the family. Below 48 px it crops to the emblem.\n */\nexport function YororisLogo({ size = 32, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"yrm\", [\"gradient\", \"core\", \"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        <linearGradient id={id.core} x1=\"50%\" y1=\"100%\" x2=\"50%\" y2=\"0%\">\n          {G.coreGradient.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={animated ? \"yrm-orbit\" : undefined}>\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.moment.at[0]} cy={G.moment.at[1]} r={G.moment.r} fill={fill} />\n      </g>\n      <path d={G.stem} stroke={fill} strokeWidth={G.stroke} strokeLinecap=\"round\" />\n      {G.leaves.map((d) => (\n        <path key={d} d={d} fill={fill} />\n      ))}\n      <path className={animated ? \"yrm-vein\" : undefined} d={G.veins} stroke={G.vein.color} strokeOpacity={G.vein.opacity} strokeWidth={G.vein.width} strokeLinecap=\"round\" strokeDasharray={G.vein.dash} />\n      <g className={animated ? \"yrm-core\" : undefined}>\n        <circle cx={G.core.cx} cy={G.core.cy} r={G.core.r} fill={`url(#${id.core})`} />\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 filled emblem in the\n * brand gradient, a bright core; below 48 px the view box crops to the emblem.\n *\n * The emblem is **the open shop** (商い, *akinai*: trade): a filled awning whose upper-right corner wears the Krizaka\n * cut, scalloped below, its stripes in light; under it the shop front and its open door — the bright core, a warm\n * light that breathes (the shop is open). The gradient is the brand's mark gradient (`marks.akinaza` of\n * @krizaka/tokens): forest at the foot → copper at the awning, mid-tones that read ≥ 3:1 on the page surfaces of both\n * themes (tested in @krizaka/tokens). One node, a coin, rides the dashed orbit.\n */\n/** The copper end of the gradient: the halo. */\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  /** The awning: 124 → 276 at y 108, cut 28 at its upper-right corner, four scallops below (y 150, 19 deep). */\n  awning: \"M124 108 H248 L276 136 V150 A19 19 0 0 1 238 150 A19 19 0 0 1 200 150 A19 19 0 0 1 162 150 A19 19 0 0 1 124 150 Z\",\n  /** The awning's stripes, in light. */\n  stripes: \"M162 116 V146 M200 116 V146 M238 116 V140\",\n  stripe: { color: \"#fff7ed\", opacity: 0.55, width: 8 },\n  /** The shop front: walls 140 → 260 from y 178 to the ground, the door cut out (178 → 222, from y 222). */\n  front: \"M140 178 H260 V300 H222 V222 H178 V300 H140 Z\",\n  /** The open door: the bright core, a warm light. */\n  door: { x: 182, y: 226, w: 36, h: 74, rx: 4 },\n  coreGradient: { stops: [[\"0%\", \"#fde7c7\"], [\"100%\", \"#fffaf2\"]] as const },\n  /** A window each side, in light. */\n  windows: \"M154 196 H168 V212 H154 Z M232 196 H246 V212 H232 Z\",\n  gradient: { x1: 140, y1: 300, x2: 276, y2: 108, 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  /** The door's breathing light (web), in the copper. */\n  pulse: { color: copper, low: 0.3, high: 0.65 },\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 filled emblem in the\n * brand gradient, a bright core; below 48 px the view box crops to the emblem.\n *\n * The emblem is **the sealed cup**: a filled trophy whose rim wears the Krizaka cut at its upper-right corner, two\n * handles, a stem and a base; on the bowl a star in light — the seal, the rules locked at kick-off — breathes. The\n * gradient is the brand's mark gradient (`marks.kachizaka` of @krizaka/tokens): cobalt at the base → gold at the rim,\n * mid-tones that read ≥ 3:1 on the page surfaces of both themes (tested in @krizaka/tokens), so one mark serves dark\n * and light. One node, the ball, rides the dashed orbit.\n */\n/** The gold end of the gradient: the halo and the seal's 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  /** The bowl: a rim 136 → 264 at y 104, cut 32 at its upper-right corner (the Krizaka chamfer), rounding down to the stem. */\n  cup: \"M136 104 H232 L264 136 V164 C264 214 236 242 200 246 C164 242 136 214 136 164 Z\",\n  /** The stem and the base, one shape. */\n  base: \"M190 244 H210 V272 H240 C244 272 248 276 248 280 V300 H152 V280 C152 276 156 272 160 272 H190 Z\",\n  /** The two handles, stroked in the gradient. */\n  handles: \"M138 128 C100 124 100 196 150 202 M262 128 C300 124 300 196 250 202\",\n  handleWidth: 14,\n  /** The seal: a five-pointed star in light on the bowl, centred (200, 172), radii 30 / 13. */\n  star: \"M200 142 L207.6 161.5 L228.5 162.7 L212.4 176 L217.6 196.3 L200 185 L182.4 196.3 L187.6 176 L171.5 162.7 L192.4 161.5 Z\",\n  starColor: \"#fffbea\",\n  gradient: { x1: 136, y1: 300, x2: 264, y2: 104, stops: marks.kachizaka },\n  /** The ball: one node on the orbit, that turns with it. */\n  node: { r: 9, at: [200, 40] as const },\n  glow: { color: gold, opacity: 0.18 },\n  /** The seal's breathing shadow (web), in the gold. */\n  pulse: { color: gold, low: 0.35, high: 0.75 },\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"
@@ -470,7 +486,7 @@
     },
     {
       "path": "nav-bar/nav-bar.tsx",
-      "content": "// Client (scroll, a sliding indicator, menus). Radix NavigationMenu does the menus' semantics and keyboard (Enter, Space\n// and ↓ open; ↑ ↓ Home End walk; Escape closes and returns the focus; Tab out closes); this file draws the Krizaka bar:\n// a floating pill that tightens once the page scrolls, one light that glides to the item under the pointer or the\n// focus and rests on the current page, and a mobile panel that is a plain disclosure (no focus trap, Escape closes).\nimport { NavigationMenu as Nav, Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { FamilyMark, GitHubGlyph } from \"../family-mark\";\nimport { type FamilyLabels, familyLabels, type Site, type SiteId, sitesByGroup } from \"../sites/sites\";\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const navBar = tv({\n  slots: {\n    root:\n      \"group/nav relative z-40 mx-auto flex h-14 w-full items-center gap-2 border-border-subtle bg-surface-1/75 backdrop-blur-xl backdrop-saturate-150 \" +\n      \"transition-[height,background-color,border-color,box-shadow] duration-300 motion-reduce:transition-none \" +\n      \"data-compact:h-12 data-compact:border-border-default data-compact:bg-surface-1/90 data-compact:shadow-lg\",\n    brand:\n      \"mr-2 inline-flex shrink-0 items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg no-underline \" +\n      \"rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    items: \"relative hidden md:block\",\n    list:\n      \"group/list relative isolate flex items-center gap-0.5 \" +\n      // The light: under the item that is pointed at or focused, resting on the current page.\n      \"before:absolute before:left-0 before:top-0 before:-z-10 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n      \"before:rounded-full before:bg-surface-3 before:opacity-0 before:transition-[translate,width,opacity] before:duration-300 motion-reduce:before:transition-none \" +\n      \"data-[indicator=on]:before:opacity-100\",\n    item:\n      \"inline-flex h-9 select-none items-center gap-1 rounded-full px-3.5 text-sm font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:text-fg data-active:text-fg data-[state=open]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      // Before the light is ready (server render), the current page carries its own tint.\n      \"group-not-data-[indicator=on]/list:data-active:bg-surface-3\",\n    chevron: \"h-3.5 w-3.5 transition-transform duration-300 group-data-[state=open]/trigger:rotate-180 motion-reduce:transition-none\",\n    viewport:\n      \"kz-pop absolute left-0 top-full mt-2 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top-left overflow-hidden \" +\n      \"rounded-2xl border border-border-default bg-surface-1 shadow-lg transition-[width,height] duration-300 motion-reduce:transition-none\",\n    panel: \"grid w-max max-w-[min(92vw,30rem)] gap-1 p-2\",\n    menuLink:\n      \"group/link flex items-start gap-3 rounded-xl p-3 text-left no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring data-active:bg-accent-soft\",\n    menuIcon:\n      \"mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border-default bg-surface-2 text-fg-accent \" +\n      \"transition-[transform,border-color] duration-300 group-hover/link:-translate-y-0.5 group-hover/link:border-accent [&>svg]:h-4.5 [&>svg]:w-4.5 motion-reduce:transform-none\",\n    menuTitle: \"block text-sm font-semibold text-fg\",\n    menuText: \"mt-0.5 block text-xs leading-relaxed text-fg-secondary\",\n    actions: \"ml-auto flex items-center gap-2\",\n    toggle:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-full border border-border-subtle bg-surface-2/60 text-fg md:hidden \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    mobile: \"kz-pop absolute inset-x-0 top-full mt-2 grid gap-1 rounded-2xl border border-border-default bg-surface-1 p-2 shadow-lg md:hidden\",\n    mobileLink:\n      \"flex items-center justify-between rounded-xl px-3 py-3 text-[15px] font-medium text-fg no-underline hover:bg-surface-2 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg-accent\",\n    // The family switcher: a chevron attached to the brand, its panel aligned on the bar's left edge.\n    family: \"hidden md:block\",\n    familyTrigger:\n      \"group/trigger -ml-2 mr-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-fg-secondary transition-colors \" +\n      \"hover:bg-surface-3 hover:text-fg data-[state=open]:bg-surface-3 data-[state=open]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    familyViewport:\n      \"kz-pop absolute left-0 top-full mt-2 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top-left overflow-hidden \" +\n      \"rounded-2xl border border-border-default bg-surface-1 shadow-lg transition-[width,height] duration-300 motion-reduce:transition-none\",\n    familyPanel: \"grid w-[min(92vw,42rem)] gap-x-2 gap-y-3 p-3 sm:grid-cols-2\",\n    familyGroupTitle: \"px-3 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    familyLink:\n      \"group/link flex items-start gap-3 rounded-xl px-3 py-2.5 text-left no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring data-current:bg-accent-soft\",\n    familyMark: \"mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center text-fg\",\n    familyName: \"flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm font-semibold text-fg\",\n    familyText: \"mt-0.5 block text-xs leading-relaxed text-fg-secondary\",\n    familyTag: \"rounded-full px-1.5 py-px text-[10px] font-semibold uppercase tracking-wider\",\n    mobileFamily: \"mt-1 grid gap-2 border-t border-border-subtle px-1 pb-1 pt-3\",\n    mobileFamilyLink:\n      \"flex min-h-11 items-center gap-3 rounded-xl px-2 py-2 text-[15px] font-medium text-fg no-underline hover:bg-surface-2 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-current:bg-accent-soft\",\n    badge:\n      \"hidden h-6 shrink-0 items-center gap-1 rounded-full border border-border-subtle bg-surface-2 px-2 font-mono text-[11px] font-medium text-fg-secondary sm:inline-flex\",\n    repo:\n      \"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n  variants: {\n    floating: {\n      true: { root: \"max-w-5xl rounded-full border pl-5 pr-2 data-compact:max-w-4xl\" },\n      false: { root: \"border-b px-4 md:px-6\" },\n    },\n  },\n  defaultVariants: { floating: true },\n});\nconst s = navBar();\n\ninterface NavBarContext {\n  label: string;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  panelId: string;\n}\nconst Context = React.createContext<NavBarContext | null>(null);\n/** True inside `NavBar.Mobile`: the family renders as the panel's last group instead of a switcher. */\nconst MobileContext = React.createContext(false);\nconst useNavBar = () => {\n  const ctx = React.useContext(Context);\n  if (!ctx) throw new Error(\"NavBar parts must be inside <NavBar.Root>.\");\n  return ctx;\n};\n\nexport type NavBarRootProps = React.ComponentProps<\"header\"> & {\n  /** The accessible name of the navigation (“Main”) — passed translated. */\n  label: string;\n  /**\n   * Pixels of scroll after which the bar tightens (denser, lower, lifted). `false`: never.\n   * @default 24\n   */\n  compactAfter?: number | false;\n  /**\n   * A floating pill (the Krizaka bar) or a full-width bar with a hairline under it.\n   * @default true\n   */\n  floating?: boolean;\n};\n\n/** The bar. Place it in a `sticky top-3` (floating) or `sticky top-0` wrapper — or let it scroll. */\nexport function NavBarRoot({ label, compactAfter = 24, floating = true, className, children, ...props }: NavBarRootProps) {\n  const [compact, setCompact] = React.useState(false);\n  const [open, setOpen] = React.useState(false);\n  const panelId = React.useId();\n  React.useEffect(() => {\n    if (compactAfter === false) return;\n    const onScroll = () => setCompact(window.scrollY > compactAfter);\n    onScroll();\n    window.addEventListener(\"scroll\", onScroll, { passive: true });\n    return () => window.removeEventListener(\"scroll\", onScroll);\n  }, [compactAfter]);\n  const ctx = React.useMemo(() => ({ label, open, setOpen, panelId }), [label, open, panelId]);\n  return (\n    <Context.Provider value={ctx}>\n      <header data-compact={compact ? \"\" : undefined} data-floating={floating} className={navBar({ floating }).root({ className })} {...props}>\n        {children}\n      </header>\n    </Context.Provider>\n  );\n}\n\nexport type NavBarBrandProps = React.ComponentProps<\"a\"> & {\n  /** Renders your link (a router `<Link>`) with the brand's look. */\n  asChild?: boolean;\n};\n\n/** The brand: a mark and a name, linking home. */\nexport function NavBarBrand({ asChild, className, ...props }: NavBarBrandProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp className={s.brand({ className })} {...props} />;\n}\n\n/** The desktop navigation: links and menus, with the light that glides between them. Hidden below `md` (see `NavBar.Mobile`). */\nexport function NavBarItems({ className, children, ...props }: Omit<React.ComponentProps<typeof Nav.Root>, \"orientation\">) {\n  const { label } = useNavBar();\n  const { ref, handlers } = useSlidingIndicator<HTMLUListElement>({ item: \"[data-nav-item]\", active: \"[data-nav-item][data-active]\", follow: true });\n  return (\n    <Nav.Root aria-label={label} className={s.items({ className })} delayDuration={80} {...props}>\n      <Nav.List ref={ref} className={s.list()} {...handlers}>\n        {children}\n      </Nav.List>\n      <Nav.Viewport className={s.viewport()} />\n    </Nav.Root>\n  );\n}\n\nexport type NavBarLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"active\"> & {\n  /** The current page: `aria-current=\"page\"`, and the light rests on it. */\n  active?: boolean;\n};\n\n/** A link of the bar. `asChild` renders your router's `<Link>`. */\nexport function NavBarLink({ active, className, ...props }: NavBarLinkProps) {\n  return (\n    <Nav.Item>\n      <Nav.Link data-nav-item=\"\" data-active={active ? \"\" : undefined} active={active} aria-current={active ? \"page\" : undefined} className={s.item({ className })} {...props} />\n    </Nav.Item>\n  );\n}\n\nexport type NavBarMenuProps = Omit<React.ComponentProps<typeof Nav.Item>, \"children\"> & {\n  /** The trigger's words (“Products”) — passed translated. */\n  label: string;\n  /** The current page is inside this menu: the light rests on its trigger. */\n  active?: boolean;\n  /** The menu's links (`NavBar.MenuLink`), laid out in a panel; `columns` sets the grid. */\n  children: React.ReactNode;\n  /**\n   * Columns of the panel.\n   * @default 1\n   */\n  columns?: 1 | 2;\n};\n\n/** A menu of the bar: its trigger, and its links in a panel that opens under the bar. */\nexport function NavBarMenu({ label, active, columns = 1, children, className, ...props }: NavBarMenuProps) {\n  return (\n    <Nav.Item className={className} {...props}>\n      <Nav.Trigger data-nav-item=\"\" data-active={active ? \"\" : undefined} className={cn(s.item(), \"group/trigger\")}>\n        {label}\n        <svg viewBox=\"0 0 24 24\" className={s.chevron()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      </Nav.Trigger>\n      <Nav.Content className={cn(s.panel(), columns === 2 && \"md:grid-cols-2\")}>{children}</Nav.Content>\n    </Nav.Item>\n  );\n}\n\nexport type NavBarMenuLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"title\" | \"active\"> & {\n  /** The link's name — passed translated. */\n  title: string;\n  /** One line under it — passed translated. */\n  description?: string;\n  /** An icon (a signature icon of `@krizaka/icons`: its node lights up on hover). */\n  icon?: React.ReactNode;\n  /** The current page. */\n  active?: boolean;\n};\n\n/** A link inside a menu: an icon, a name and a line of text. */\nexport function NavBarMenuLink({ title, description, icon, active, href, className, asChild, children, ...props }: NavBarMenuLinkProps) {\n  const body = (\n    <>\n      {icon && <span className={s.menuIcon()}>{icon}</span>}\n      <span className=\"min-w-0\">\n        <span className={s.menuTitle()}>{title}</span>\n        {description && <span className={s.menuText()}>{description}</span>}\n      </span>\n    </>\n  );\n  return (\n    <Nav.Link asChild={asChild} href={asChild ? undefined : href} active={active} aria-current={active ? \"page\" : undefined} data-active={active ? \"\" : undefined} className={s.menuLink({ className })} {...props}>\n      {asChild && React.isValidElement<{ children?: React.ReactNode }>(children) ? React.cloneElement(children, undefined, body) : body}\n    </Nav.Link>\n  );\n}\n\n/** The right side: search, theme, language, the call to action. */\nexport function NavBarActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.actions({ className })} {...props} />;\n}\n\nexport type NavBarMobileProps = React.ComponentProps<\"nav\"> & {\n  /** The toggle's name when closed (“Open the menu”) — passed translated. */\n  openLabel: string;\n  /** The toggle's name when open (“Close the menu”) — passed translated. */\n  closeLabel: string;\n};\n\n/**\n * Below `md`: a toggle, and a panel under the bar with its links (`NavBar.MobileLink`). A disclosure: Escape and a click\n * on a link close it, the focus returns to the toggle.\n */\nexport function NavBarMobile({ openLabel, closeLabel, className, children, ...props }: NavBarMobileProps) {\n  const { label, open, setOpen, panelId } = useNavBar();\n  const toggle = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      setOpen(false);\n      toggle.current?.focus();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, setOpen]);\n  return (\n    <>\n      <button ref={toggle} type=\"button\" aria-expanded={open} aria-controls={panelId} aria-label={open ? closeLabel : openLabel} onClick={() => setOpen(!open)} className={s.toggle()}>\n        <svg viewBox=\"0 0 24 24\" className=\"h-4.5 w-4.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          {open ? <path d=\"M18 6 6 18M6 6l12 12\" /> : <path d=\"M4 7h16M4 12h16M4 17h10\" />}\n        </svg>\n      </button>\n      {open && (\n        <nav\n          id={panelId}\n          aria-label={label}\n          className={s.mobile({ className })}\n          onClick={(e) => {\n            if ((e.target as Element).closest(\"a\")) setOpen(false);\n          }}\n          {...props}\n        >\n          <MobileContext.Provider value>{children}</MobileContext.Provider>\n        </nav>\n      )}\n    </>\n  );\n}\n\nexport type NavBarMobileLinkProps = React.ComponentProps<\"a\"> & {\n  /** The current page. */\n  active?: boolean;\n  /** Renders your router's `<Link>`. */\n  asChild?: boolean;\n};\n\n/** A link of the mobile panel. */\nexport function NavBarMobileLink({ active, asChild, className, ...props }: NavBarMobileLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp aria-current={active ? \"page\" : undefined} className={s.mobileLink({ className })} {...props} />;\n}\n\n\nconst tagTone = {\n  upcoming: \"bg-accent-soft text-fg ring-1 ring-inset ring-accent/40\",\n  construction: \"bg-warning/15 text-fg ring-1 ring-inset ring-warning/40\",\n  current: \"bg-surface-3 text-fg-secondary\",\n};\n\n/** A site's name and its tags: status when not released, “You are here” on the current one. */\nfunction FamilyName({ site, current, labels }: { site: Site; current: boolean; labels: FamilyLabels }) {\n  return (\n    <span className={s.familyName()}>\n      {site.name}\n      {site.status !== \"released\" && <span className={cn(s.familyTag(), tagTone[site.status])}>{labels.status[site.status]}</span>}\n      {current && <span className={cn(s.familyTag(), tagTone.current)}>{labels.current}</span>}\n    </span>\n  );\n}\n\nexport type NavBarFamilyProps = {\n  /** The site this bar belongs to (`@krizaka/ui/sites`): marked in the family, `aria-current=\"true\"`. */\n  current: SiteId;\n  /**\n   * The family's words, passed translated: `familyLabels.fr` from `@krizaka/ui/sites`, or your own of the same shape.\n   * @default familyLabels.en\n   */\n  labels?: FamilyLabels;\n  /** Opens the panel at first render (a story, a screenshot). */\n  defaultOpen?: boolean;\n  /** Classes of the switcher (or, inside `NavBar.Mobile`, of the family's group). */\n  className?: string;\n};\n\n/**\n * The family switcher, attached to the brand (place it right after `NavBar.Brand`): a chevron that opens every site of\n * Krizaka grouped — Krizaka · Products · Open source · GitHub — the current one marked. It opens on click, Enter, Space\n * or ↓ (never on hover); ↑ ↓ walk the sites, Escape closes and returns the focus. Hidden below `md`: place a second\n * `NavBar.Family` as the last child of `NavBar.Mobile`, where it renders as the panel's last group.\n */\nexport function NavBarFamily({ current, labels = familyLabels.en, defaultOpen, className }: NavBarFamilyProps) {\n  const inMobile = React.useContext(MobileContext);\n  const id = React.useId();\n  const groups = sitesByGroup();\n  if (inMobile) {\n    return (\n      <div role=\"group\" aria-labelledby={`${id}-family`} className={s.mobileFamily({ className })}>\n        <p id={`${id}-family`} className={s.familyGroupTitle()}>\n          {labels.family}\n        </p>\n        {groups.map(({ group, sites }) => (\n          <div key={group}>\n            {/* The company's own group is named like the family itself: its heading would repeat the panel's. */}\n            {group !== \"krizaka\" && (\n              <p id={`${id}-${group}`} className={s.familyGroupTitle()}>\n                {labels.groups[group]}\n              </p>\n            )}\n            <ul aria-labelledby={group !== \"krizaka\" ? `${id}-${group}` : `${id}-family`} className=\"grid gap-0.5\">\n              {sites.map((site) => (\n                <li key={site.id}>\n                  <a href={site.url} data-current={site.id === current ? \"\" : undefined} aria-current={site.id === current ? \"true\" : undefined} className={s.mobileFamilyLink()}>\n                    <span className={s.familyMark()}>\n                      <FamilyMark mark={site.mark} size={24} />\n                    </span>\n                    <FamilyName site={site} current={site.id === current} labels={labels} />\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n    );\n  }\n  // Click only: a pointer passing over the brand never opens the family (Radix opens its menus on hover by default).\n  const noHover = (e: React.PointerEvent) => e.preventDefault();\n  const columns = [groups.filter((g) => g.group === \"krizaka\" || g.group === \"products\"), groups.filter((g) => g.group === \"open-source\" || g.group === \"github\")];\n  return (\n    <Nav.Root aria-label={labels.family} defaultValue={defaultOpen ? \"family\" : undefined} className={s.family({ className })}>\n      <Nav.List className=\"flex\">\n        <Nav.Item value=\"family\">\n          <Nav.Trigger aria-label={labels.family} onPointerMove={noHover} onPointerLeave={noHover} className={s.familyTrigger()}>\n            <svg viewBox=\"0 0 24 24\" className={s.chevron()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n              <path d=\"m6 9 6 6 6-6\" />\n            </svg>\n          </Nav.Trigger>\n          <Nav.Content onPointerLeave={noHover} className={s.familyPanel()}>\n            {columns.map((column, i) => (\n              <div key={i} className=\"grid content-start gap-3\">\n                {column.map(({ group, sites }) => (\n                  <div key={group}>\n                    <p id={`${id}-${group}`} className={s.familyGroupTitle()}>\n                      {labels.groups[group]}\n                    </p>\n                    <ul aria-labelledby={`${id}-${group}`} className=\"grid gap-0.5\">\n                      {sites.map((site) => (\n                        <li key={site.id}>\n                          <Nav.Link href={site.url} data-current={site.id === current ? \"\" : undefined} aria-current={site.id === current ? \"true\" : undefined} className={s.familyLink()}>\n                            <span className={s.familyMark()}>\n                              <FamilyMark mark={site.mark} size={28} />\n                            </span>\n                            <span className=\"min-w-0\">\n                              <FamilyName site={site} current={site.id === current} labels={labels} />\n                              <span className={s.familyText()}>{labels.descriptions[site.id]}</span>\n                            </span>\n                          </Nav.Link>\n                        </li>\n                      ))}\n                    </ul>\n                  </div>\n                ))}\n              </div>\n            ))}\n          </Nav.Content>\n        </Nav.Item>\n      </Nav.List>\n      <Nav.Viewport onPointerLeave={noHover} className={s.familyViewport()} />\n    </Nav.Root>\n  );\n}\n\nexport type NavBarBadgeProps = React.ComponentProps<\"span\"> & {\n  /** The environment, when it is not production (`DEV`). */\n  env?: string;\n  /** The version the site runs (`1.2.3`, shown `v1.2.3`). */\n  version?: string;\n};\n\n/** A small mono badge beside the brand: the environment and the version (`DEV · v1.2.3`). Hidden below `sm`. */\nexport function NavBarBadge({ env, version, className, children, ...props }: NavBarBadgeProps) {\n  const parts = [env, version && `v${version.replace(/^v/, \"\")}`].filter(Boolean);\n  return (\n    <span className={s.badge({ className })} {...props}>\n      {parts.join(\" · \")}\n      {children}\n    </span>\n  );\n}\n\nexport type NavBarRepoProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The repository the site is built from. */\n  href: string;\n  /** The link's accessible name (“Source on GitHub”) — passed translated. */\n  label: string;\n};\n\n/** The site's repository on GitHub, an icon link of `NavBar.Actions`. */\nexport function NavBarRepo({ label, className, ...props }: NavBarRepoProps) {\n  return (\n    <a aria-label={label} className={s.repo({ className })} {...props}>\n      <GitHubGlyph size={18} />\n    </a>\n  );\n}\n\n/**\n * `NavBar.Root/Brand/Family/Badge/Items/Link/Menu/MenuLink/Actions/Repo/Mobile/MobileLink` — the Krizaka navigation bar,\n * the same on every site of the family: floating, tightening on scroll, the family switcher on the brand, one light\n * gliding between its items, accessible menus, a mobile panel.\n */\nexport const NavBar = {\n  Root: NavBarRoot,\n  Brand: NavBarBrand,\n  Family: NavBarFamily,\n  Badge: NavBarBadge,\n  Items: NavBarItems,\n  Link: NavBarLink,\n  Menu: NavBarMenu,\n  MenuLink: NavBarMenuLink,\n  Actions: NavBarActions,\n  Repo: NavBarRepo,\n  Mobile: NavBarMobile,\n  MobileLink: NavBarMobileLink,\n};\n"
+      "content": "// Client (scroll, a sliding indicator, menus). Radix NavigationMenu does the menus' semantics and keyboard (Enter, Space\n// and ↓ open; ↑ ↓ Home End walk; Escape closes and returns the focus; Tab out closes); this file draws the Krizaka bar:\n// a floating pill that tightens once the page scrolls, one light that glides to the item under the pointer or the\n// focus and rests on the current page, and a mobile panel that is a plain disclosure (no focus trap, Escape closes).\nimport { NavigationMenu as Nav, Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { FamilyMark, GitHubGlyph } from \"../family-mark\";\nimport { type FamilyLabels, familyLabels, type Site, type SiteId, sitesByGroup } from \"../sites/sites\";\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const navBar = tv({\n  slots: {\n    root:\n      \"group/nav relative z-40 mx-auto flex h-14 w-full items-center gap-2 border-border-subtle bg-surface-1/75 backdrop-blur-xl backdrop-saturate-150 \" +\n      \"transition-[height,background-color,border-color,box-shadow] duration-300 motion-reduce:transition-none \" +\n      \"data-compact:h-12 data-compact:border-border-default data-compact:bg-surface-1/90 data-compact:shadow-lg\",\n    brand:\n      \"mr-2 inline-flex shrink-0 items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg no-underline \" +\n      \"rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    items: \"relative hidden md:block\",\n    list:\n      \"group/list relative isolate flex items-center gap-0.5 \" +\n      // The light: under the item that is pointed at or focused, resting on the current page.\n      \"before:absolute before:left-0 before:top-0 before:-z-10 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n      \"before:rounded-full before:bg-surface-3 before:opacity-0 before:transition-[translate,width,opacity] before:duration-300 motion-reduce:before:transition-none \" +\n      \"data-[indicator=on]:before:opacity-100\",\n    item:\n      \"inline-flex h-9 select-none items-center gap-1 rounded-full px-3.5 text-sm font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:text-fg data-active:text-fg data-[state=open]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      // Before the light is ready (server render), the current page carries its own tint.\n      \"group-not-data-[indicator=on]/list:data-active:bg-surface-3\",\n    chevron: \"h-3.5 w-3.5 transition-transform duration-300 group-data-[state=open]/trigger:rotate-180 motion-reduce:transition-none\",\n    viewport:\n      \"kz-pop absolute left-0 top-full mt-2 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top-left overflow-hidden \" +\n      \"rounded-2xl border border-border-default bg-surface-1 shadow-lg transition-[width,height] duration-300 motion-reduce:transition-none\",\n    panel: \"grid w-max max-w-[min(92vw,30rem)] gap-1 p-2\",\n    menuLink:\n      \"group/link flex items-start gap-3 rounded-xl p-3 text-left no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring data-active:bg-accent-soft\",\n    menuIcon:\n      \"mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border-default bg-surface-2 text-fg-accent \" +\n      \"transition-[transform,border-color] duration-300 group-hover/link:-translate-y-0.5 group-hover/link:border-accent [&>svg]:h-4.5 [&>svg]:w-4.5 motion-reduce:transform-none\",\n    menuTitle: \"block text-sm font-semibold text-fg\",\n    menuText: \"mt-0.5 block text-xs leading-relaxed text-fg-secondary\",\n    actions: \"ml-auto flex items-center gap-2\",\n    toggle:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-full border border-border-subtle bg-surface-2/60 text-fg md:hidden \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    mobile: \"kz-pop absolute inset-x-0 top-full mt-2 grid gap-1 rounded-2xl border border-border-default bg-surface-1 p-2 shadow-lg md:hidden\",\n    mobileLink:\n      \"flex items-center justify-between rounded-xl px-3 py-3 text-[15px] font-medium text-fg no-underline hover:bg-surface-2 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg-accent\",\n    // The family switcher: a chevron attached to the brand, its panel aligned on the bar's left edge.\n    family: \"hidden md:block\",\n    familyTrigger:\n      \"group/trigger -ml-2 mr-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-fg-secondary transition-colors \" +\n      \"hover:bg-surface-3 hover:text-fg data-[state=open]:bg-surface-3 data-[state=open]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    familyViewport:\n      \"kz-pop absolute left-0 top-full mt-2 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top-left overflow-hidden \" +\n      \"rounded-2xl border border-border-default bg-surface-1 shadow-lg transition-[width,height] duration-300 motion-reduce:transition-none\",\n    familyPanel: \"grid w-[min(92vw,42rem)] gap-x-2 gap-y-3 p-3 sm:grid-cols-2\",\n    familyGroupTitle: \"px-3 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    familyLink:\n      \"group/link flex items-start gap-3 rounded-xl px-3 py-2.5 text-left no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring data-current:bg-accent-soft\",\n    familyMark: \"mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center text-fg\",\n    familyName: \"flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm font-semibold text-fg\",\n    familyText: \"mt-0.5 block text-xs leading-relaxed text-fg-secondary\",\n    familyTag: \"rounded-full px-1.5 py-px text-[10px] font-semibold uppercase tracking-wider\",\n    mobileFamily: \"mt-1 grid gap-2 border-t border-border-subtle px-1 pb-1 pt-3\",\n    mobileFamilyLink:\n      \"flex min-h-11 items-center gap-3 rounded-xl px-2 py-2 text-[15px] font-medium text-fg no-underline hover:bg-surface-2 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-current:bg-accent-soft\",\n    badge:\n      \"hidden h-6 shrink-0 items-center gap-1 rounded-full border border-border-subtle bg-surface-2 px-2 font-mono text-[11px] font-medium text-fg-secondary sm:inline-flex\",\n    repo:\n      \"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n  variants: {\n    floating: {\n      true: { root: \"max-w-5xl rounded-full border pl-5 pr-2 data-compact:max-w-4xl\" },\n      false: { root: \"border-b px-4 md:px-6\" },\n    },\n  },\n  defaultVariants: { floating: true },\n});\nconst s = navBar();\n\ninterface NavBarContext {\n  label: string;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  panelId: string;\n}\nconst Context = React.createContext<NavBarContext | null>(null);\n/** True inside `NavBar.Mobile`: the family renders as the panel's last group instead of a switcher. */\nconst MobileContext = React.createContext(false);\nconst useNavBar = () => {\n  const ctx = React.useContext(Context);\n  if (!ctx) throw new Error(\"NavBar parts must be inside <NavBar.Root>.\");\n  return ctx;\n};\n\nexport type NavBarRootProps = React.ComponentProps<\"header\"> & {\n  /** The accessible name of the navigation (“Main”) — passed translated. */\n  label: string;\n  /**\n   * Pixels of scroll after which the bar tightens (denser, lower, lifted). `false`: never.\n   * @default 24\n   */\n  compactAfter?: number | false;\n  /**\n   * A floating pill (the Krizaka bar) or a full-width bar with a hairline under it.\n   * @default true\n   */\n  floating?: boolean;\n};\n\n/** The bar. Place it in a `sticky top-3` (floating) or `sticky top-0` wrapper — or let it scroll. */\nexport function NavBarRoot({ label, compactAfter = 24, floating = true, className, children, ...props }: NavBarRootProps) {\n  const [compact, setCompact] = React.useState(false);\n  const [open, setOpen] = React.useState(false);\n  const panelId = React.useId();\n  React.useEffect(() => {\n    if (compactAfter === false) return;\n    const onScroll = () => setCompact(window.scrollY > compactAfter);\n    onScroll();\n    window.addEventListener(\"scroll\", onScroll, { passive: true });\n    return () => window.removeEventListener(\"scroll\", onScroll);\n  }, [compactAfter]);\n  const ctx = React.useMemo(() => ({ label, open, setOpen, panelId }), [label, open, panelId]);\n  return (\n    <Context.Provider value={ctx}>\n      <header data-compact={compact ? \"\" : undefined} data-floating={floating} className={navBar({ floating }).root({ className })} {...props}>\n        {children}\n      </header>\n    </Context.Provider>\n  );\n}\n\nexport type NavBarBrandProps = React.ComponentProps<\"a\"> & {\n  /** Renders your link (a router `<Link>`) with the brand's look. */\n  asChild?: boolean;\n};\n\n/** The brand: a mark and a name, linking home. */\nexport function NavBarBrand({ asChild, className, ...props }: NavBarBrandProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp className={s.brand({ className })} {...props} />;\n}\n\n/** The desktop navigation: links and menus, with the light that glides between them. Hidden below `md` (see `NavBar.Mobile`). */\nexport function NavBarItems({ className, children, ...props }: Omit<React.ComponentProps<typeof Nav.Root>, \"orientation\">) {\n  const { label } = useNavBar();\n  const { ref, handlers } = useSlidingIndicator<HTMLUListElement>({ item: \"[data-nav-item]\", active: \"[data-nav-item][data-active]\", follow: true });\n  return (\n    <Nav.Root aria-label={label} className={s.items({ className })} delayDuration={80} {...props}>\n      <Nav.List ref={ref} className={s.list()} {...handlers}>\n        {children}\n      </Nav.List>\n      <Nav.Viewport className={s.viewport()} />\n    </Nav.Root>\n  );\n}\n\nexport type NavBarLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"active\"> & {\n  /** The current page: `aria-current=\"page\"`, and the light rests on it. */\n  active?: boolean;\n};\n\n/** A link of the bar. `asChild` renders your router's `<Link>`. */\nexport function NavBarLink({ active, className, ...props }: NavBarLinkProps) {\n  return (\n    <Nav.Item>\n      <Nav.Link data-nav-item=\"\" data-active={active ? \"\" : undefined} active={active} aria-current={active ? \"page\" : undefined} className={s.item({ className })} {...props} />\n    </Nav.Item>\n  );\n}\n\nexport type NavBarMenuProps = Omit<React.ComponentProps<typeof Nav.Item>, \"children\"> & {\n  /** The trigger's words (“Products”) — passed translated. */\n  label: string;\n  /** The current page is inside this menu: the light rests on its trigger. */\n  active?: boolean;\n  /** The menu's links (`NavBar.MenuLink`), laid out in a panel; `columns` sets the grid. */\n  children: React.ReactNode;\n  /**\n   * Columns of the panel.\n   * @default 1\n   */\n  columns?: 1 | 2;\n};\n\n/** A menu of the bar: its trigger, and its links in a panel that opens under the bar. */\nexport function NavBarMenu({ label, active, columns = 1, children, className, ...props }: NavBarMenuProps) {\n  return (\n    <Nav.Item className={className} {...props}>\n      <Nav.Trigger data-nav-item=\"\" data-active={active ? \"\" : undefined} className={cn(s.item(), \"group/trigger\")}>\n        {label}\n        <svg viewBox=\"0 0 24 24\" className={s.chevron()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      </Nav.Trigger>\n      <Nav.Content className={cn(s.panel(), columns === 2 && \"md:grid-cols-2\")}>{children}</Nav.Content>\n    </Nav.Item>\n  );\n}\n\nexport type NavBarMenuLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"title\" | \"active\"> & {\n  /** The link's name — passed translated. */\n  title: string;\n  /** One line under it — passed translated. */\n  description?: string;\n  /** An icon (a signature icon of `@krizaka/icons`: its node lights up on hover). */\n  icon?: React.ReactNode;\n  /** The current page. */\n  active?: boolean;\n};\n\n/** A link inside a menu: an icon, a name and a line of text. */\nexport function NavBarMenuLink({ title, description, icon, active, href, className, asChild, children, ...props }: NavBarMenuLinkProps) {\n  const body = (\n    <>\n      {icon && <span className={s.menuIcon()}>{icon}</span>}\n      <span className=\"min-w-0\">\n        <span className={s.menuTitle()}>{title}</span>\n        {description && <span className={s.menuText()}>{description}</span>}\n      </span>\n    </>\n  );\n  return (\n    <Nav.Link asChild={asChild} href={asChild ? undefined : href} active={active} aria-current={active ? \"page\" : undefined} data-active={active ? \"\" : undefined} className={s.menuLink({ className })} {...props}>\n      {asChild && React.isValidElement<{ children?: React.ReactNode }>(children) ? React.cloneElement(children, undefined, body) : body}\n    </Nav.Link>\n  );\n}\n\n/** The right side: search, theme, language, the call to action. */\nexport function NavBarActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.actions({ className })} {...props} />;\n}\n\nexport type NavBarMobileProps = React.ComponentProps<\"nav\"> & {\n  /** The toggle's name when closed (“Open the menu”) — passed translated. */\n  openLabel: string;\n  /** The toggle's name when open (“Close the menu”) — passed translated. */\n  closeLabel: string;\n};\n\n/**\n * Below `md`: a toggle, and a panel under the bar with its links (`NavBar.MobileLink`). A disclosure: Escape and a click\n * on a link close it, the focus returns to the toggle.\n */\nexport function NavBarMobile({ openLabel, closeLabel, className, children, ...props }: NavBarMobileProps) {\n  const { label, open, setOpen, panelId } = useNavBar();\n  const toggle = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      setOpen(false);\n      toggle.current?.focus();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, setOpen]);\n  return (\n    <>\n      <button ref={toggle} type=\"button\" aria-expanded={open} aria-controls={panelId} aria-label={open ? closeLabel : openLabel} onClick={() => setOpen(!open)} className={s.toggle()}>\n        <svg viewBox=\"0 0 24 24\" className=\"h-4.5 w-4.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          {open ? <path d=\"M18 6 6 18M6 6l12 12\" /> : <path d=\"M4 7h16M4 12h16M4 17h10\" />}\n        </svg>\n      </button>\n      {open && (\n        <nav\n          id={panelId}\n          aria-label={label}\n          className={s.mobile({ className })}\n          onClick={(e) => {\n            if ((e.target as Element).closest(\"a\")) setOpen(false);\n          }}\n          {...props}\n        >\n          <MobileContext.Provider value>{children}</MobileContext.Provider>\n        </nav>\n      )}\n    </>\n  );\n}\n\nexport type NavBarMobileLinkProps = React.ComponentProps<\"a\"> & {\n  /** The current page. */\n  active?: boolean;\n  /** Renders your router's `<Link>`. */\n  asChild?: boolean;\n};\n\n/** A link of the mobile panel. */\nexport function NavBarMobileLink({ active, asChild, className, ...props }: NavBarMobileLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp aria-current={active ? \"page\" : undefined} className={s.mobileLink({ className })} {...props} />;\n}\n\n\nconst tagTone = {\n  upcoming: \"bg-accent-soft text-fg ring-1 ring-inset ring-accent/40\",\n  construction: \"bg-warning/15 text-fg ring-1 ring-inset ring-warning/40\",\n  development: \"bg-surface-3 text-fg ring-1 ring-inset ring-border-strong\",\n  current: \"bg-surface-3 text-fg-secondary\",\n};\n\n/** A site's name and its tags: status when not released, “You are here” on the current one. */\nfunction FamilyName({ site, current, labels }: { site: Site; current: boolean; labels: FamilyLabels }) {\n  return (\n    <span className={s.familyName()}>\n      {site.name}\n      {site.status !== \"released\" && <span className={cn(s.familyTag(), tagTone[site.status])}>{labels.status[site.status]}</span>}\n      {current && <span className={cn(s.familyTag(), tagTone.current)}>{labels.current}</span>}\n    </span>\n  );\n}\n\nexport type NavBarFamilyProps = {\n  /** The site this bar belongs to (`@krizaka/ui/sites`): marked in the family, `aria-current=\"true\"`. */\n  current: SiteId;\n  /**\n   * The family's words, passed translated: `familyLabels.fr` from `@krizaka/ui/sites`, or your own of the same shape.\n   * @default familyLabels.en\n   */\n  labels?: FamilyLabels;\n  /** Opens the panel at first render (a story, a screenshot). */\n  defaultOpen?: boolean;\n  /** Classes of the switcher (or, inside `NavBar.Mobile`, of the family's group). */\n  className?: string;\n};\n\n/**\n * The family switcher, attached to the brand (place it right after `NavBar.Brand`): a chevron that opens every site of\n * Krizaka grouped — Krizaka · Products · Open source · GitHub — the current one marked. It opens on click, Enter, Space\n * or ↓ (never on hover); ↑ ↓ walk the sites, Escape closes and returns the focus. Hidden below `md`: place a second\n * `NavBar.Family` as the last child of `NavBar.Mobile`, where it renders as the panel's last group.\n */\nexport function NavBarFamily({ current, labels = familyLabels.en, defaultOpen, className }: NavBarFamilyProps) {\n  const inMobile = React.useContext(MobileContext);\n  const id = React.useId();\n  const groups = sitesByGroup();\n  if (inMobile) {\n    return (\n      <div role=\"group\" aria-labelledby={`${id}-family`} className={s.mobileFamily({ className })}>\n        <p id={`${id}-family`} className={s.familyGroupTitle()}>\n          {labels.family}\n        </p>\n        {groups.map(({ group, sites }) => (\n          <div key={group}>\n            {/* The company's own group is named like the family itself: its heading would repeat the panel's. */}\n            {group !== \"krizaka\" && (\n              <p id={`${id}-${group}`} className={s.familyGroupTitle()}>\n                {labels.groups[group]}\n              </p>\n            )}\n            <ul aria-labelledby={group !== \"krizaka\" ? `${id}-${group}` : `${id}-family`} className=\"grid gap-0.5\">\n              {sites.map((site) => (\n                <li key={site.id}>\n                  <a href={site.url} data-current={site.id === current ? \"\" : undefined} aria-current={site.id === current ? \"true\" : undefined} className={s.mobileFamilyLink()}>\n                    <span className={s.familyMark()}>\n                      <FamilyMark mark={site.mark} size={24} />\n                    </span>\n                    <FamilyName site={site} current={site.id === current} labels={labels} />\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n    );\n  }\n  // Click only: a pointer passing over the brand never opens the family (Radix opens its menus on hover by default).\n  const noHover = (e: React.PointerEvent) => e.preventDefault();\n  const columns = [groups.filter((g) => g.group === \"krizaka\" || g.group === \"products\"), groups.filter((g) => g.group === \"open-source\" || g.group === \"github\")];\n  return (\n    <Nav.Root aria-label={labels.family} defaultValue={defaultOpen ? \"family\" : undefined} className={s.family({ className })}>\n      <Nav.List className=\"flex\">\n        <Nav.Item value=\"family\">\n          <Nav.Trigger aria-label={labels.family} onPointerMove={noHover} onPointerLeave={noHover} className={s.familyTrigger()}>\n            <svg viewBox=\"0 0 24 24\" className={s.chevron()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n              <path d=\"m6 9 6 6 6-6\" />\n            </svg>\n          </Nav.Trigger>\n          <Nav.Content onPointerLeave={noHover} className={s.familyPanel()}>\n            {columns.map((column, i) => (\n              <div key={i} className=\"grid content-start gap-3\">\n                {column.map(({ group, sites }) => (\n                  <div key={group}>\n                    <p id={`${id}-${group}`} className={s.familyGroupTitle()}>\n                      {labels.groups[group]}\n                    </p>\n                    <ul aria-labelledby={`${id}-${group}`} className=\"grid gap-0.5\">\n                      {sites.map((site) => (\n                        <li key={site.id}>\n                          <Nav.Link href={site.url} data-current={site.id === current ? \"\" : undefined} aria-current={site.id === current ? \"true\" : undefined} className={s.familyLink()}>\n                            <span className={s.familyMark()}>\n                              <FamilyMark mark={site.mark} size={28} />\n                            </span>\n                            <span className=\"min-w-0\">\n                              <FamilyName site={site} current={site.id === current} labels={labels} />\n                              <span className={s.familyText()}>{labels.descriptions[site.id]}</span>\n                            </span>\n                          </Nav.Link>\n                        </li>\n                      ))}\n                    </ul>\n                  </div>\n                ))}\n              </div>\n            ))}\n          </Nav.Content>\n        </Nav.Item>\n      </Nav.List>\n      <Nav.Viewport onPointerLeave={noHover} className={s.familyViewport()} />\n    </Nav.Root>\n  );\n}\n\nexport type NavBarBadgeProps = React.ComponentProps<\"span\"> & {\n  /** The environment, when it is not production (`DEV`). */\n  env?: string;\n  /** The version the site runs (`1.2.3`, shown `v1.2.3`). */\n  version?: string;\n};\n\n/** A small mono badge beside the brand: the environment and the version (`DEV · v1.2.3`). Hidden below `sm`. */\nexport function NavBarBadge({ env, version, className, children, ...props }: NavBarBadgeProps) {\n  const parts = [env, version && `v${version.replace(/^v/, \"\")}`].filter(Boolean);\n  return (\n    <span className={s.badge({ className })} {...props}>\n      {parts.join(\" · \")}\n      {children}\n    </span>\n  );\n}\n\nexport type NavBarRepoProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The repository the site is built from. */\n  href: string;\n  /** The link's accessible name (“Source on GitHub”) — passed translated. */\n  label: string;\n};\n\n/** The site's repository on GitHub, an icon link of `NavBar.Actions`. */\nexport function NavBarRepo({ label, className, ...props }: NavBarRepoProps) {\n  return (\n    <a aria-label={label} className={s.repo({ className })} {...props}>\n      <GitHubGlyph size={18} />\n    </a>\n  );\n}\n\n/**\n * `NavBar.Root/Brand/Family/Badge/Items/Link/Menu/MenuLink/Actions/Repo/Mobile/MobileLink` — the Krizaka navigation bar,\n * the same on every site of the family: floating, tightening on scroll, the family switcher on the brand, one light\n * gliding between its items, accessible menus, a mobile panel.\n */\nexport const NavBar = {\n  Root: NavBarRoot,\n  Brand: NavBarBrand,\n  Family: NavBarFamily,\n  Badge: NavBarBadge,\n  Items: NavBarItems,\n  Link: NavBarLink,\n  Menu: NavBarMenu,\n  MenuLink: NavBarMenuLink,\n  Actions: NavBarActions,\n  Repo: NavBarRepo,\n  Mobile: NavBarMobile,\n  MobileLink: NavBarMobileLink,\n};\n"
     },
     {
       "path": "sliding-indicator.ts",
@@ -478,7 +494,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.14.0",
+    "@krizaka/tokens@^3.15.0",
     "radix-ui@^1.7.0",
     "tailwind-variants@^3.3.1"
   ],

package/registry/permission-prompt.json

@@ -102,7 +102,7 @@
           },
           {
             "name": "mascot",
-            "type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"",
+            "type": "\"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"",
             "default": "falcon",
             "description": "The bird above (decorative): the falcon watches (camera), the pigeon delivers (notifications). Default falcon.",
             "required": false

package/registry/product-page.json

@@ -134,7 +134,7 @@
           },
           {
             "name": "promise",
-            "type": "{ bird: \"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"; label: ReactNode; text: ReactNode; }",
+            "type": "{ bird: \"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"; label: ReactNode; text: ReactNode; }",
             "default": null,
             "description": "The promise a bird keeps, under the decisions.",
             "required": false
@@ -297,7 +297,7 @@
         },
         {
           "name": "promise",
-          "type": "{ bird: \"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\"; label: ReactNode; text: ReactNode; }",
+          "type": "{ bird: \"falcon\" | \"owl\" | \"duck\" | \"flamingo\" | \"pigeon\" | \"lovebird\" | \"crane\" | \"magpie\" | \"beaver\"; label: ReactNode; text: ReactNode; }",
           "default": null,
           "description": "The promise a bird keeps, under the decisions.",
           "required": false