@krizaka/ui 3.53.0 → 3.55.0

package/registry/landscape.json

@@ -4,8 +4,12 @@
   "title": "Landscape",
   "summary": "The Krizaka valley at dusk — peaks, a phoenix over a river of two flames, trees of light and the flock at work: a decorative backdrop in its own colours or in the host brand's.",
   "description": "The Krizaka valley at dusk — peaks, a phoenix over a river of two flames, trees of light and the flock at work: a decorative backdrop in its own colours or in the host brand's.",
-  "status": "beta",
-  "deprecated": null,
+  "status": "deprecated",
+  "deprecated": {
+    "since": "3.55.0",
+    "removedIn": "4.0.0",
+    "reason": "No product or site imports it and no filed need names it (ADR-006 audit, 2026-10-25): there is no replacement."
+  },
   "category": "blocks",
   "platforms": "web",
   "parity": {
@@ -125,21 +129,25 @@
   },
   "native": null,
   "files": [
+    {
+      "path": "deprecated.ts",
+      "content": "// The development warning of a deprecated entry (ADR-006 §7, krizaka-ui#674). An entry is deprecated in a minor and\n// removed in the next major; until then it works exactly as before and says so once per page, in development only —\n// never in production, never twice. The same facts live in the entry's `meta.ts` (`status: \"deprecated\"`), which\n// ui.krizaka.com reads for its badge.\n\n/** The release that deprecated the batch. */\nexport const DEPRECATED_SINCE = \"3.55.0\";\n/** The major that removes it. */\nexport const REMOVED_IN = \"4.0.0\";\n\nconst warned = new Set<string>();\n\n/**\n * Warns once per page, in development, that `@krizaka/ui/<entry>` is deprecated. Call it at the top of the entry's\n * components; it costs a `Set` lookup and nothing in production.\n * @param entry the entry's name as imported: `tree-view` for `@krizaka/ui/tree-view`.\n * @param since the release that deprecated it, when it is not this batch's.\n */\nexport function warnDeprecated(entry: string, since: string = DEPRECATED_SINCE): void {\n  if (typeof process === \"undefined\" || process.env.NODE_ENV === \"production\" || warned.has(entry)) return;\n  warned.add(entry);\n  console.warn(\n    `@krizaka/ui/${entry} is deprecated since ${since} and is removed in ${REMOVED_IN} (ADR-006): no product uses it. ` +\n      `Keep it? Comment on krizaka-ui#674 with the issue that needs it. https://ui.krizaka.com/components/${entry.replace(/^native\\//, \"\")}`,\n  );\n}\n\n/** Forgets what was warned (tests only). */\nexport function resetDeprecationWarnings(): void {\n  warned.clear();\n}\n"
+    },
     {
       "path": "landscape/index.ts",
       "content": "/** @krizaka/ui/landscape — `Landscape`, the Krizaka valley at dusk (brand layer, decorative). Client: ids per instance. */\nexport { Landscape, type LandscapeProps } from \"./landscape\";\n"
     },
     {
       "path": "landscape/landscape.tsx",
-      "content": "// The Krizaka landscape — a valley at dusk under a constellation: three ranges of peaks, a phoenix over a river of\n// two flames, trees of light, a treehouse, and the flock at work (the falcon on watch, the owl, the duck at its\n// laptop, the flamingo). The brand layer's illustration, like the marks: drawn in code, ids unique per instance, its\n// own colours by default (`tone=\"own\"`) or the host brand's sky and peaks (`tone=\"brand\"`). Decorative.\nimport type * as React from \"react\";\nimport { useId } from \"react\";\n\nimport { cn } from \"../cn\";\n\n/** The sky and the peaks: the Krizaka dusk (`own`), or the host brand's accents (`brand`). Birds keep their colours. */\nconst TONES = {\n  own: {\n    \"--kzl-sun\": \"#f59e0b\",\n    \"--kzl-sun-2\": \"#ec4899\",\n    \"--kzl-sun-3\": \"#6366f1\",\n    \"--kzl-far\": \"#6366f1\",\n    \"--kzl-far-2\": \"#4f46e5\",\n    \"--kzl-far-line\": \"#818cf8\",\n    \"--kzl-mid\": \"#06b6d4\",\n    \"--kzl-mid-2\": \"#0891b2\",\n    \"--kzl-mid-line\": \"#22d3ee\",\n    \"--kzl-near\": \"#d946ef\",\n    \"--kzl-near-2\": \"#a855f7\",\n    \"--kzl-near-line\": \"#e879f9\",\n    \"--kzl-aurora-l\": \"#00f2fe\",\n    \"--kzl-aurora-r\": \"#ec4899\",\n  },\n  brand: {\n    \"--kzl-sun\": \"var(--kz-accent-2, var(--kz-accent))\",\n    \"--kzl-sun-2\": \"var(--kz-accent)\",\n    \"--kzl-sun-3\": \"var(--kz-accent)\",\n    \"--kzl-far\": \"var(--kz-accent-2, var(--kz-accent))\",\n    \"--kzl-far-2\": \"var(--kz-accent-2, var(--kz-accent))\",\n    \"--kzl-far-line\": \"var(--kz-accent-2, var(--kz-accent))\",\n    \"--kzl-mid\": \"color-mix(in srgb, var(--kz-accent) 55%, var(--kz-accent-2, var(--kz-accent)))\",\n    \"--kzl-mid-2\": \"color-mix(in srgb, var(--kz-accent) 55%, var(--kz-accent-2, var(--kz-accent)))\",\n    \"--kzl-mid-line\": \"color-mix(in srgb, var(--kz-accent) 55%, var(--kz-accent-2, var(--kz-accent)))\",\n    \"--kzl-near\": \"var(--kz-accent)\",\n    \"--kzl-near-2\": \"var(--kz-accent)\",\n    \"--kzl-near-line\": \"var(--kz-accent)\",\n    \"--kzl-aurora-l\": \"var(--kz-accent-2, var(--kz-accent))\",\n    \"--kzl-aurora-r\": \"var(--kz-accent)\",\n  },\n} as const;\n\nconst CSS = `\n.kzl { pointer-events: none; overflow: hidden; }\n.kzl-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; pointer-events: none; z-index: 3;\n  background: linear-gradient(to top, var(--kz-surface-0) 0%, transparent 100%); }\n        /* --- Cyber Phoenix & Flame Flow animations --- */\n        @keyframes kzl-phoenix-flow-purple {\n          from { stroke-dashoffset: 350; }\n          to   { stroke-dashoffset: 0; }\n        }\n        @keyframes kzl-phoenix-flow-gold {\n          from { stroke-dashoffset: 0; }\n          to   { stroke-dashoffset: 350; }\n        }\n        @keyframes kzl-phoenix-bob {\n          0%, 100% { transform: translateY(0) scale(1); }\n          50%      { transform: translateY(-8px) scale(1.02); }\n        }\n        @keyframes kzl-wing-flap-l-phoenix {\n          0%, 100% { transform: rotate(0deg); }\n          50%      { transform: rotate(-10deg) translateY(-2px); }\n        }\n        @keyframes kzl-wing-flap-r-phoenix {\n          0%, 100% { transform: rotate(0deg); }\n          50%      { transform: rotate(10deg) translateY(-2px); }\n        }\n        @keyframes kzl-core-glow {\n          0%, 100% { fill: #ffef5c; filter: drop-shadow(0 0 1px #ffef5c); }\n          50%      { fill: #ffffff; filter: drop-shadow(0 0 5px #ff3c00); }\n        }\n\n        .kzl-cyber-phoenix {\n          animation: kzl-phoenix-bob 4s ease-in-out infinite;\n          transform-origin: 600px 325px;\n          transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        }\n        .kzl-cyber-phoenix:hover {\n          transform: translateY(-4px) scale(1.08);\n        }\n        .kzl-phoenix-wing-l {\n          animation: kzl-wing-flap-l-phoenix 2.5s ease-in-out infinite;\n        }\n        .kzl-phoenix-wing-r {\n          animation: kzl-wing-flap-r-phoenix 2.5s ease-in-out infinite;\n        }\n        .kzl-cyber-phoenix:hover .kzl-phoenix-wing-l {\n          animation: kzl-wing-flap-l-phoenix 0.6s linear infinite;\n        }\n        .kzl-cyber-phoenix:hover .kzl-phoenix-wing-r {\n          animation: kzl-wing-flap-r-phoenix 0.6s linear infinite;\n        }\n        .kzl-phoenix-core {\n          animation: kzl-core-glow 1.5s ease-in-out infinite;\n        }\n\n        /* --- Pulse Animations --- */\n        @keyframes kzl-opacity-pulse {\n          0%, 100% { opacity: 0.35; }\n          50%      { opacity: 0.95; }\n        }\n        .kzl-pulse-slow {\n          animation: kzl-opacity-pulse 4s ease-in-out infinite;\n        }\n        @keyframes kzl-sun-pulse {\n          0%, 100% { opacity: 0.16; transform: scale(0.96); }\n          50%      { opacity: 0.32; transform: scale(1.04); }\n        }\n        .kzl-sun-pulsing {\n          animation: kzl-sun-pulse 6s ease-in-out infinite;\n          transform-origin: 600px 200px;\n        }\n\n        /* --- Rising local data pulses --- */\n        @keyframes kzl-rise-fade-1 {\n          0%   { transform: translateY(80px) scale(0.5); opacity: 0; }\n          40%  { opacity: 0.8; }\n          100% { transform: translateY(-30px) scale(1.3); opacity: 0; }\n        }\n        @keyframes kzl-rise-fade-2 {\n          0%   { transform: translateY(60px) scale(0.4); opacity: 0; }\n          50%  { opacity: 0.9; }\n          100% { transform: translateY(-50px) scale(1.2); opacity: 0; }\n        }\n        .kzl-rising-pulse-1 {\n          animation: kzl-rise-fade-1 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;\n          transform-origin: center;\n        }\n        .kzl-rising-pulse-2 {\n          animation: kzl-rise-fade-2 5s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 1.5s;\n          transform-origin: center;\n        }\n\n        /* --- Mascot Hover Animations (Stable Hitboxes) --- */\n        .kzl-bird-graphics {\n          transform-box: fill-box;\n          transform-origin: center;\n          transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        }\n        .kzl-bird-hitbox:hover .kzl-bird-graphics {\n          transform: scale(1.08) translateY(-4px);\n        }\n\n        /* --- Bird Eye Blinking/Glowing Animations --- */\n        .kzl-falcon-eye {\n          animation: kzl-falcon-eye-pulse 2.5s ease-in-out infinite;\n        }\n        .kzl-duck-eye {\n          transform-box: fill-box;\n          transform-origin: center;\n          animation: kzl-eye-blink 5s ease-in-out infinite 1s;\n        }\n        .kzl-flamingo-eye {\n          transform-box: fill-box;\n          transform-origin: center;\n          animation: kzl-eye-blink 6s ease-in-out infinite 2.5s;\n        }\n        .kzl-owl-eye {\n          transform-box: fill-box;\n          transform-origin: center;\n          animation: kzl-eye-blink 4s ease-in-out infinite 0.5s;\n        }\n\n        @keyframes kzl-eye-blink {\n          0%, 90%, 100% {\n            transform: scaleY(1);\n          }\n          95% {\n            transform: scaleY(0.15);\n          }\n        }\n\n        @keyframes kzl-falcon-eye-pulse {\n          0%, 100% { fill: #00f2fe; filter: drop-shadow(0 0 2px #00f2fe); }\n          50%      { fill: #00ff66; filter: drop-shadow(0 0 5px #00ff66); }\n        }\n\n        /* FalconBot constant loop animations */\n        .kzl-falcon-bot .kzl-head-group {\n          animation: kzl-head-bob 4s ease-in-out infinite;\n        }\n        .kzl-falcon-bot .kzl-wing-left {\n          animation: kzl-wing-flap-left 3s ease-in-out infinite;\n        }\n        .kzl-falcon-bot .kzl-wing-right {\n          animation: kzl-wing-flap-right 3s ease-in-out infinite;\n        }\n        .kzl-falcon-bot .kzl-sentry-laser {\n          animation: kzl-scan-flicker 5s ease-in-out infinite;\n        }\n\n        @keyframes kzl-scan-flicker {\n          0%, 100% { opacity: 0; }\n          10%, 90% { opacity: 0.15; }\n          50%      { opacity: 0.5; }\n        }\n        @keyframes kzl-head-bob {\n          0%, 100% { transform: translateY(0) rotate(0deg); }\n          50%      { transform: translateY(-2px) rotate(2deg); }\n        }\n        @keyframes kzl-wing-flap-left {\n          0%, 100% { transform: rotate(0deg); }\n          50%      { transform: rotate(-8deg) scaleX(1.05); }\n        }\n        @keyframes kzl-wing-flap-right {\n          0%, 100% { transform: rotate(0deg); }\n          50%      { transform: rotate(8deg) scaleX(1.05); }\n        }\n\n        /* Developer Duck constant loop animations */\n        .kzl-developer-duck .kzl-head-group {\n          animation: kzl-duck-look 6s ease-in-out infinite;\n        }\n        .kzl-developer-duck .kzl-wing-left-type {\n          animation: kzl-wing-type-l 0.5s ease-in-out infinite;\n        }\n        .kzl-developer-duck .kzl-wing-right-type {\n          animation: kzl-wing-type-r 0.5s ease-in-out infinite 0.25s;\n        }\n        .kzl-developer-duck .kzl-laptop-screen {\n          animation: kzl-screen-flicker-idle 3s ease-in-out infinite;\n        }\n        .kzl-developer-duck .kzl-holo-projection {\n          animation: kzl-holo-flicker 6s ease-in-out infinite;\n        }\n        .kzl-developer-duck .kzl-holo-elements {\n          animation: kzl-holo-elements-rise 6s ease-in-out infinite;\n        }\n\n        @keyframes kzl-screen-flicker-idle {\n          0%, 100% { opacity: 0.7; }\n          50%      { opacity: 0.95; filter: drop-shadow(0 0 3px var(--kz-accent)); }\n        }\n        @keyframes kzl-holo-flicker {\n          0%, 100% { opacity: 0; }\n          20%, 80% { opacity: 0.35; }\n          50%      { opacity: 0.65; }\n        }\n        @keyframes kzl-holo-elements-rise {\n          0%   { transform: translateY(10px); opacity: 0; }\n          50%  { opacity: 0.8; }\n          100% { transform: translateY(-15px); opacity: 0; }\n        }\n        @keyframes kzl-duck-look {\n          0%, 100% { transform: rotate(0deg); }\n          30%      { transform: rotate(-5deg); }\n          70%      { transform: rotate(5deg); }\n        }\n        @keyframes kzl-wing-type-l {\n          0%, 100% { transform: translateY(0) rotate(0deg); }\n          50%      { transform: translateY(-3px) rotate(-4deg); }\n        }\n        @keyframes kzl-wing-type-r {\n          0%, 100% { transform: translateY(0) rotate(0deg); }\n          50%      { transform: translateY(-3px) rotate(4deg); }\n        }\n\n        /* Flamingo Bot constant loop animations */\n        .kzl-flamingo-bot .kzl-head-group {\n          animation: kzl-flamingo-head-bob 5s ease-in-out infinite;\n        }\n        .kzl-flamingo-bot .kzl-flamingo-neck {\n          animation: kzl-flamingo-neck-sway 7s ease-in-out infinite;\n          transform-origin: 20px 74px;\n        }\n        .kzl-flamingo-bot .kzl-flamingo-wing {\n          animation: kzl-flamingo-wing-flap 4s ease-in-out infinite;\n        }\n\n        @keyframes kzl-flamingo-neck-sway {\n          0%, 100% { transform: rotate(0deg); }\n          50%      { transform: rotate(-3deg) scaleY(1.02); }\n        }\n        @keyframes kzl-flamingo-head-bob {\n          0%, 100% { transform: translate(8px, 12px) translateY(0) rotate(0deg); }\n          50%      { transform: translate(8px, 12px) translateY(-5px) rotate(-3deg); }\n        }\n        @keyframes kzl-flamingo-wing-flap {\n          0%, 100% { transform: translateY(0) rotate(0deg); }\n          50%      { transform: translateY(-2px) rotate(-6deg); }\n        }\n\n        /* Owl Bot constant loop animations */\n        .kzl-owl-bot {\n          animation: kzl-owl-sway 5s ease-in-out infinite;\n          transform-origin: center;\n        }\n        @keyframes kzl-owl-sway {\n          0%, 100% { transform: rotate(0deg) translateY(0); }\n          50%      { transform: rotate(-3deg) translateY(-2px); }\n        }\n\n        /* Treehouse hover glow */\n        .kzl-cyber-treehouse:hover .kzl-window-glow {\n          fill: #f59e0b;\n          filter: drop-shadow(0 0 10px #f59e0b);\n        }\n\n        /* Floating tech particles */\n        @keyframes kzl-float-up-down {\n          0%, 100% { transform: translateY(0); opacity: 0.4; }\n          50%      { transform: translateY(-24px); opacity: 0.95; }\n        }\n        .kzl-float-particle-1 { animation: kzl-float-up-down 4.2s ease-in-out infinite; }\n        .kzl-float-particle-2 { animation: kzl-float-up-down 5.2s ease-in-out infinite 1.2s; }\n        .kzl-float-particle-3 { animation: kzl-float-up-down 4.7s ease-in-out infinite 0.6s; }\n        .kzl-float-particle-4 { animation: kzl-float-up-down 6.2s ease-in-out infinite 2.2s; }\n\n        @media (max-width: 1024px) {\n          .kzl-mobile-hide {\n            display: none !important;\n          }\n        }\n/* Still: with animated={false}, off screen, and under reduced motion — every loop holds its first frame. */\n.kzl[data-still] *, .kzl[data-offscreen] * { animation-play-state: paused !important; }\n@media (prefers-reduced-motion: reduce) {\n  .kzl * { animation-play-state: paused !important; transition: none !important; }\n}\n`;\n\nexport type LandscapeProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> & {\n  /**\n   * `own`: the Krizaka dusk (indigo, cyan and magenta peaks). `brand`: the sky and the peaks in the host brand's\n   * accents (`.brand-<id>`). The birds and the phoenix keep their own colours.\n   * @default \"own\"\n   */\n  tone?: \"own\" | \"brand\";\n  /**\n   * The flock at work in the valley (hidden under 1024 px wide either way).\n   * @default true\n   */\n  flock?: boolean;\n  /**\n   * The phoenix and its river of two flames.\n   * @default true\n   */\n  phoenix?: boolean;\n  /**\n   * The slow loops (the sun, the stars, the flames, the birds). `false` holds the first frame; always held under\n   * `prefers-reduced-motion` and while off screen (with `MotionObserver`).\n   * @default true\n   */\n  animated?: boolean;\n  /**\n   * `absolute`: fills its positioned parent, anchored at the bottom (a backdrop). `relative`: a block in the flow — give\n   * it a height.\n   * @default \"absolute\"\n   */\n  position?: \"absolute\" | \"relative\";\n  /**\n   * Fades the bottom into the page's surface.\n   * @default true\n   */\n  fade?: boolean;\n};\n\n/** The Krizaka landscape: a decorative backdrop for a hero or a page's end (`aria-hidden`). */\nexport function Landscape({ tone = \"own\", flock = true, phoenix = true, animated = true, position = \"absolute\", fade = true, className, style, ...props }: LandscapeProps) {\n  const u = \"kzl\" + useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n  const box: React.CSSProperties =\n    position === \"absolute\" ? { position: \"absolute\", inset: \"auto 0 0 0\", height: \"100%\", width: \"100%\" } : { position: \"relative\", width: \"100%\", height: 440 };\n  return (\n    <div\n      aria-hidden\n      data-motion-scope=\"\"\n      data-still={animated ? undefined : \"\"}\n      className={cn(\"kzl\", className)}\n      style={{ ...box, ...(TONES[tone] as React.CSSProperties), ...style }}\n      {...props}\n    >\n      <style>{CSS}</style>\n      <svg width=\"100%\" height=\"100%\" viewBox=\"0 50 1200 520\" preserveAspectRatio=\"xMidYMax slice\" fill=\"none\" style={{ display: \"block\", pointerEvents: \"none\" }}>\n        <defs>\n          {/* Vibrant Cyber Sun Glow */}\n          <radialGradient id={`${u}-sun-glow`} cx=\"50%\" cy=\"50%\" r=\"50%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-sun)\" stopOpacity=\"0.45\" />\n            <stop offset=\"30%\" stopColor=\"var(--kzl-sun-2)\" stopOpacity=\"0.28\" />\n            <stop offset=\"70%\" stopColor=\"var(--kzl-sun-3)\" stopOpacity=\"0.16\" />\n            <stop offset=\"100%\" stopColor=\"transparent\" stopOpacity=\"0\" />\n          </radialGradient>\n\n          {/* Mountains Vibrant Gradients */}\n          <linearGradient id={`${u}-mtn-back`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-far)\" stopOpacity=\"0.75\" /> {/* indigo */}\n            <stop offset=\"50%\" stopColor=\"var(--kzl-far-2)\" stopOpacity=\"0.45\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-0)\" />\n          </linearGradient>\n          <linearGradient id={`${u}-mtn-mid`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-mid)\" stopOpacity=\"0.7\" /> {/* cyan */}\n            <stop offset=\"50%\" stopColor=\"var(--kzl-mid-2)\" stopOpacity=\"0.4\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-0)\" />\n          </linearGradient>\n          <linearGradient id={`${u}-mtn-front`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-near)\" stopOpacity=\"0.8\" /> {/* pink */}\n            <stop offset=\"50%\" stopColor=\"var(--kzl-near-2)\" stopOpacity=\"0.5\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-0)\" />\n          </linearGradient>\n\n          {/* Vibrant Mascot Gradients */}\n          <linearGradient id={`${u}-falcon-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#ff9f00\" />\n            <stop offset=\"100%\" stopColor=\"#ff2a00\" />\n          </linearGradient>\n          <linearGradient id={`${u}-duck-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#f43f5e\" />\n            <stop offset=\"100%\" stopColor=\"#be123c\" />\n          </linearGradient>\n          <linearGradient id={`${u}-flamingo-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#3e76a8\" />\n            <stop offset=\"100%\" stopColor=\"#1d4ed8\" />\n          </linearGradient>\n          <linearGradient id={`${u}-owl-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#a78bfa\" />\n            <stop offset=\"100%\" stopColor=\"#6d28d9\" />\n          </linearGradient>\n\n          {/* Hologram Projections */}\n          <linearGradient id={`${u}-holo-grad`} x1=\"0%\" y1=\"100%\" x2=\"0%\" y2=\"0%\">\n            <stop offset=\"0%\" stopColor=\"#10b981\" stopOpacity=\"0.5\" />\n            <stop offset=\"100%\" stopColor=\"#10b981\" stopOpacity=\"0\" />\n          </linearGradient>\n\n          {/* Rival flame gradients for the Cyber-Phoenix */}\n          <linearGradient id={`${u}-phoenix-gold-grad`} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#ffb000\" />\n            <stop offset=\"100%\" stopColor=\"#ff3c00\" />\n          </linearGradient>\n          <linearGradient id={`${u}-phoenix-purple-grad`} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#c084fc\" />\n            <stop offset=\"100%\" stopColor=\"#db2777\" />\n          </linearGradient>\n          <linearGradient id={`${u}-phoenix-body-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--kz-surface-3)\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-2)\" />\n          </linearGradient>\n\n          {/* Glowing stream gradients */}\n          <linearGradient id={`${u}-gold-glow`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#ff3c00\" stopOpacity=\"0.95\" />\n            <stop offset=\"50%\" stopColor=\"#ffb000\" stopOpacity=\"0.75\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-0)\" />\n          </linearGradient>\n          <linearGradient id={`${u}-purple-glow`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#db2777\" stopOpacity=\"0.95\" />\n            <stop offset=\"50%\" stopColor=\"#a78bfa\" stopOpacity=\"0.75\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-0)\" />\n          </linearGradient>\n\n          {/* River mask to fade out at the bottom */}\n          <linearGradient id={`${u}-river-mask-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"85%\" stopColor=\"white\" />\n            <stop offset=\"100%\" stopColor=\"black\" />\n          </linearGradient>\n          <mask id={`${u}-river-fade-mask`}>\n            <rect x=\"0\" y=\"0\" width=\"1200\" height=\"1000\" fill={`url(#${u}-river-mask-grad)`} />\n          </mask>\n\n          {/* Cyber trees gradient */}\n          <linearGradient id={`${u}-tree-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--kz-accent)\" stopOpacity=\"0.35\" />\n            <stop offset=\"100%\" stopColor=\"transparent\" />\n          </linearGradient>\n\n          {/* Cyber Bench Gradient */}\n          <linearGradient id={`${u}-bench-grad`} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n            <stop offset=\"0%\" stopColor=\"var(--kz-surface-3)\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-2)\" />\n          </linearGradient>\n\n          {/* Cyber Aurora Glows */}\n          <radialGradient id={`${u}-aurora-left`} cx=\"20%\" cy=\"30%\" r=\"50%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-aurora-l)\" stopOpacity=\"0.22\" />\n            <stop offset=\"100%\" stopColor=\"transparent\" stopOpacity=\"0\" />\n          </radialGradient>\n          <radialGradient id={`${u}-aurora-right`} cx=\"80%\" cy=\"25%\" r=\"50%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-aurora-r)\" stopOpacity=\"0.22\" />\n            <stop offset=\"100%\" stopColor=\"transparent\" stopOpacity=\"0\" />\n          </radialGradient>\n        </defs>\n\n        <g transform=\"translate(0, 60)\">\n        {/* ─── Cyber Aurora Backdrop ─── */}\n        <circle cx=\"200\" cy=\"180\" r=\"600\" fill={`url(#${u}-aurora-left)`} />\n        <circle cx=\"1000\" cy=\"150\" r=\"600\" fill={`url(#${u}-aurora-right)`} />\n\n        {/* ─── Ethereal Sun and Sky Network Nodes (Constellations) ─── */}\n        <circle cx=\"600\" cy=\"200\" r=\"380\" fill={`url(#${u}-sun-glow)`} />\n        <circle cx=\"600\" cy=\"200\" r=\"64\" fill=\"var(--kzl-sun)\" opacity=\"0.16\" className=\"kzl-sun-pulsing\" />\n\n        {/* Constellation grid lines in the sky */}\n        <g opacity=\"0.3\" stroke=\"var(--kz-accent)\" strokeWidth=\"1\">\n          <line x1=\"300\" y1=\"120\" x2=\"380\" y2=\"80\" />\n          <line x1=\"380\" y1=\"80\" x2=\"450\" y2=\"110\" />\n          <line x1=\"450\" y1=\"110\" x2=\"300\" y2=\"120\" />\n          <line x1=\"450\" y1=\"110\" x2=\"520\" y2=\"60\" />\n          <line x1=\"750\" y1=\"80\" x2=\"840\" y2=\"130\" />\n          <line x1=\"840\" y1=\"130\" x2=\"900\" y2=\"70\" />\n          <line x1=\"900\" y1=\"70\" x2=\"750\" y2=\"80\" />\n        </g>\n        {/* Constellation node points */}\n        <g fill=\"var(--kz-accent)\" opacity=\"0.65\">\n          <circle cx=\"300\" cy=\"120\" r=\"3.5\" />\n          <circle cx=\"380\" cy=\"80\" r=\"5\" className=\"kzl-pulse-slow\" />\n          <circle cx=\"450\" cy=\"110\" r=\"3\" />\n          <circle cx=\"520\" cy=\"60\" r=\"4.5\" />\n          <circle cx=\"750\" cy=\"80\" r=\"4.5\" />\n          <circle cx=\"840\" cy=\"130\" r=\"3.5\" />\n          <circle cx=\"900\" cy=\"70\" r=\"6\" className=\"kzl-pulse-slow\" />\n        </g>\n\n        {/* ─── Layered Mountains (with Digital Contours) ─── */}\n        {/* Far Peaks */}\n        <path d=\"M 150 480 L 420 280 L 680 480 Z\" fill={`url(#${u}-mtn-back)`} stroke=\"var(--kzl-far-line)\" strokeWidth=\"1.5\" />\n        <path d=\"M 520 480 L 780 230 L 1050 480 Z\" fill={`url(#${u}-mtn-back)`} stroke=\"var(--kzl-far-line)\" strokeWidth=\"1.5\" />\n\n        {/* Mid Peaks */}\n        <path d=\"M -50 500 L 220 320 L 500 500 Z\" fill={`url(#${u}-mtn-mid)`} stroke=\"var(--kzl-mid-line)\" strokeWidth=\"1.5\" />\n        <path d=\"M 700 500 L 980 300 L 1250 500 Z\" fill={`url(#${u}-mtn-mid)`} stroke=\"var(--kzl-mid-line)\" strokeWidth=\"1.5\" />\n\n        {/* Wireframe grids on mountains (Contour lines) */}\n        <g stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.18\">\n          {/* Mid peak left contours */}\n          <line x1=\"30\" y1=\"440\" x2=\"410\" y2=\"440\" />\n          <line x1=\"85\" y1=\"400\" x2=\"355\" y2=\"400\" />\n          <line x1=\"140\" y1=\"360\" x2=\"300\" y2=\"360\" />\n          {/* Mid peak right contours */}\n          <line x1=\"770\" y1=\"450\" x2=\"1180\" y2=\"450\" />\n          <line x1=\"825\" y1=\"410\" x2=\"1125\" y2=\"410\" />\n          <line x1=\"880\" y1=\"370\" x2=\"1070\" y2=\"370\" />\n        </g>\n\n        {/* Front Peaks */}\n        <path d=\"M 100 520 L 360 380 L 620 520 Z\" fill={`url(#${u}-mtn-front)`} stroke=\"var(--kzl-near-line)\" strokeWidth=\"1.8\" />\n        <path d=\"M 580 520 L 850 350 L 1100 520 Z\" fill={`url(#${u}-mtn-front)`} stroke=\"var(--kzl-near-line)\" strokeWidth=\"1.8\" />\n\n        {phoenix && (\n          <>\n        {/* ─── Cyber-Phoenix & Dual Glowing Flame Trails ─── */}\n        {/* Dual Cascading Flame Trails */}\n        {/* Left Purple Flame Trail */}\n        <path\n          d=\"M 590 340 C 570 370, 610 390, 590 410 C 570 430, 490 440, 510 480 C 530 520, 670 530, 700 560 C 720 580, 750 600, 730 630 C 710 660, 630 670, 650 710 C 660 730, 690 740, 700 760 C 710 780, 670 800, 650 830 C 630 860, 680 890, 690 920 C 695 935, 705 945, 710 1000\"\n          fill=\"none\"\n          stroke={`url(#${u}-purple-glow)`}\n          strokeWidth=\"6\"\n          strokeLinecap=\"round\"\n          opacity=\"0.6\"\n          mask={`url(#${u}-river-fade-mask)`}\n          style={{\n            filter: \"drop-shadow(0 0 6px rgba(219, 39, 119, 0.4))\",\n          }}\n        />\n        <path\n          d=\"M 590 340 C 570 370, 610 390, 590 410 C 570 430, 490 440, 510 480 C 530 520, 670 530, 700 560 C 720 580, 750 600, 730 630 C 710 660, 630 670, 650 710 C 660 730, 690 740, 700 760 C 710 780, 670 800, 650 830 C 630 860, 680 890, 690 920 C 695 935, 705 945, 710 1000\"\n          fill=\"none\"\n          stroke=\"#db2777\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          opacity=\"0.9\"\n          mask={`url(#${u}-river-fade-mask)`}\n          style={{\n            strokeDasharray: \"25, 20\",\n            animation: \"kzl-phoenix-flow-purple 8s linear infinite\",\n            pointerEvents: \"none\",\n            filter: \"drop-shadow(0 0 3px #db2777)\",\n          }}\n        />\n\n        {/* Right Gold Flame Trail */}\n        <path\n          d=\"M 610 340 C 590 370, 630 390, 610 410 C 590 430, 510 440, 530 480 C 550 520, 690 530, 720 560 C 740 580, 770 600, 750 630 C 730 660, 650 670, 670 710 C 680 730, 710 740, 720 760 C 730 780, 690 800, 670 830 C 650 860, 700 890, 710 920 C 715 935, 725 945, 730 1000\"\n          fill=\"none\"\n          stroke={`url(#${u}-gold-glow)`}\n          strokeWidth=\"6\"\n          strokeLinecap=\"round\"\n          opacity=\"0.6\"\n          mask={`url(#${u}-river-fade-mask)`}\n          style={{\n            filter: \"drop-shadow(0 0 6px rgba(251, 191, 36, 0.4))\",\n          }}\n        />\n        <path\n          d=\"M 610 340 C 590 370, 630 390, 610 410 C 590 430, 510 440, 530 480 C 550 520, 690 530, 720 560 C 740 580, 770 600, 750 630 C 730 660, 650 670, 670 710 C 680 730, 710 740, 720 760 C 730 780, 690 800, 670 830 C 650 860, 700 890, 710 920 C 715 935, 725 945, 730 1000\"\n          fill=\"none\"\n          stroke=\"#fbbf24\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          opacity=\"0.9\"\n          mask={`url(#${u}-river-fade-mask)`}\n          style={{\n            strokeDasharray: \"35, 15\",\n            animation: \"kzl-phoenix-flow-gold 6s linear infinite\",\n            pointerEvents: \"none\",\n            filter: \"drop-shadow(0 0 3px #fbbf24)\",\n          }}\n        />\n\n        {/* Hoverable Cyber-Phoenix Soaring in the Valley Center */}\n        <g className=\"kzl-cyber-phoenix\" style={{ cursor: \"pointer\", pointerEvents: \"auto\" }}>\n          {/* Main Body diamond capsule */}\n          <polygon\n            points=\"600,310 608,325 600,345 592,325\"\n            fill={`url(#${u}-phoenix-body-grad)`}\n            stroke=\"var(--kz-border-strong)\"\n            strokeWidth=\"1.2\"\n          />\n          {/* Glowing Phoenix Core */}\n          <circle cx=\"600\" cy=\"325\" r=\"3\" fill=\"#ffef5c\" className=\"kzl-phoenix-core\" />\n\n          {/* Head */}\n          <circle cx=\"600\" cy=\"302\" r=\"6\" fill={`url(#${u}-phoenix-body-grad)`} stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n          {/* Visor */}\n          <rect x=\"598\" y=\"300\" width=\"4\" height=\"2\" rx=\"0.5\" fill=\"#00f2fe\" />\n          {/* Head Crest */}\n          <polygon points=\"600,296 603,290 600,293 597,290\" fill=\"#ff3c00\" />\n\n          {/* Left Wing (Purple mechanical fire) */}\n          <path\n            d=\"M 592 322 C 555 310, 520 325, 498 348 C 525 348, 545 338, 568 340 C 582 341, 588 333, 592 322 Z\"\n            fill={`url(#${u}-phoenix-purple-grad)`}\n            stroke=\"var(--kz-border-strong)\"\n            strokeWidth=\"1\"\n            className=\"kzl-phoenix-wing-l\"\n            style={{ transformOrigin: \"592px 322px\" }}\n          />\n\n          {/* Right Wing (Gold mechanical fire) */}\n          <path\n            d=\"M 608 322 C 645 310, 680 325, 702 348 C 675 348, 655 338, 632 340 C 618 341, 612 333, 608 322 Z\"\n            fill={`url(#${u}-phoenix-gold-grad)`}\n            stroke=\"var(--kz-border-strong)\"\n            strokeWidth=\"1\"\n            className=\"kzl-phoenix-wing-r\"\n            style={{ transformOrigin: \"608px 322px\" }}\n          />\n        </g>\n\n          </>\n        )}\n        {/* ─── Cyber Trees & Hexagonal Foliage (Nature + Tech) ─── */}\n        {/* Left Tree */}\n        <g transform=\"translate(180, 360)\">\n          {/* Server trunk */}\n          <line x1=\"0\" y1=\"120\" x2=\"0\" y2=\"40\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"4\" />\n          <rect x=\"-8\" y=\"50\" width=\"16\" height=\"28\" rx=\"2\" fill=\"var(--kz-surface-2)\" stroke=\"var(--kz-border-subtle)\" />\n          {/* LED dots on trunk */}\n          <circle cx=\"0\" cy=\"58\" r=\"1.5\" fill=\"var(--kz-accent)\" />\n          <circle cx=\"0\" cy=\"66\" r=\"1.5\" fill=\"var(--kz-accent)\" opacity=\"0.6\" />\n          {/* Hexagonal foliage */}\n          <polygon points=\"0,-10 35,10 35,50 0,70 -35,50 -35,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.4\" />\n          <polygon points=\"0,-5 25,10 25,40 0,55 -25,40 -25,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.6\" />\n        </g>\n\n        {/* Treehouse Tree (Center-Left) */}\n        <g transform=\"translate(420, 320)\">\n          {/* Trunk */}\n          <line x1=\"0\" y1=\"180\" x2=\"0\" y2=\"60\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"5\" />\n          <line x1=\"0\" y1=\"110\" x2=\"35\" y2=\"90\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"3.5\" />\n          {/* Foliage */}\n          <polygon points=\"0,-20 52,10 52,70 0,100 -52,70 -52,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.35\" />\n          <polygon points=\"0,-10 38,10 38,55 0,75 -38,55 -38,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.5\" />\n\n          {/* Hexagonal Treehouse */}\n          <g transform=\"translate(0, 50)\" style={{ pointerEvents: \"auto\", cursor: \"pointer\" }} className=\"kzl-cyber-treehouse\">\n            <polygon points=\"0,-30 26,-15 26,15 0,30 -26,15 -26,-15\" fill=\"var(--kz-surface-3)\" stroke=\"var(--kz-accent)\" strokeWidth=\"1.5\" />\n            {/* Window */}\n            <circle cx=\"0\" cy=\"0\" r=\"8\" fill=\"var(--kz-surface-1)\" stroke=\"var(--kz-border-strong)\" />\n            <circle cx=\"0\" cy=\"0\" r=\"4\" fill=\"var(--kz-accent)\" className=\"kzl-window-glow\" />\n            {/* Ladder */}\n            <path d=\"M -6 30 L -6 95 M 6 30 L 6 95 M -6 42 L 6 42 M -6 54 L 6 54 M -6 66 L 6 66 M -6 78 L 6 78 M -6 90 L 6 90\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.5\" />\n            {/* Animated green local data pulses rising from treehouse */}\n            <circle cx=\"0\" cy=\"-45\" r=\"3\" fill=\"#10b981\" className=\"kzl-rising-pulse-1\" />\n            <circle cx=\"15\" cy=\"-35\" r=\"2\" fill=\"#10b981\" className=\"kzl-rising-pulse-2\" />\n          </g>\n        </g>\n\n        {/* Right Tree */}\n        <g transform=\"translate(1000, 340)\">\n          <line x1=\"0\" y1=\"160\" x2=\"0\" y2=\"60\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"4\" />\n          <polygon points=\"0,-15 42,10 42,60 0,85 -42,60 -42,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.4\" />\n          <polygon points=\"0,-5 28,10 28,42 0,60 -28,42 -28,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.6\" />\n        </g>\n\n        {/* ─── Cyber Tech Bench (Center-Right) ─── */}\n        <g transform=\"translate(740, 480)\">\n          {/* Bench support legs */}\n          <line x1=\"20\" y1=\"35\" x2=\"20\" y2=\"60\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"4\" />\n          <line x1=\"140\" y1=\"35\" x2=\"140\" y2=\"60\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"4\" />\n          {/* Bench seat */}\n          <rect x=\"0\" y=\"22\" width=\"160\" height=\"12\" rx=\"4\" fill={`url(#${u}-bench-grad)`} stroke=\"var(--kz-border-default)\" strokeWidth=\"1.2\" />\n          {/* Bench backrest */}\n          <rect x=\"0\" y=\"0\" width=\"160\" height=\"10\" rx=\"3\" fill={`url(#${u}-bench-grad)`} stroke=\"var(--kz-border-default)\" strokeWidth=\"1.2\" transform=\"rotate(-5, 80, 5)\" />\n          {/* Backrest brackets */}\n          <line x1=\"15\" y1=\"10\" x2=\"15\" y2=\"24\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"3\" />\n          <line x1=\"145\" y1=\"10\" x2=\"145\" y2=\"24\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"3\" />\n        </g>\n\n        {flock && (\n          <>\n        {/* ─── MASCOT BIRD 4: Cyber Owl (Teal/Indigo - Left Tree) ─── */}\n        <g transform=\"translate(180, 275) scale(1.4)\" className=\"kzl-bird-hitbox kzl-mobile-hide\">\n          <rect x=\"-20\" y=\"-15\" width=\"40\" height=\"70\" fill=\"transparent\" style={{ cursor: \"pointer\", pointerEvents: \"all\" }} />\n          <g className=\"kzl-bird-graphics kzl-owl-bot\">\n            {/* Shadow */}\n            <ellipse cx=\"0\" cy=\"50\" rx=\"16\" ry=\"4\" fill=\"rgba(0,0,0,0.15)\" />\n            {/* Body */}\n            <path\n              d=\"M -15,10 C -15,-10, 15,-10, 15,10 C 15,30, 10,45, 0,45 C -10,45, -15,30, -15,10 Z\"\n              fill={`url(#${u}-owl-grad)`}\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.2\"\n            />\n            {/* Belly plate */}\n            <path\n              d=\"M -8,15 C -8,5, 8,5, 8,15 C 8,28, 5,35, 0,35 C -5,35, -8,28, -8,15 Z\"\n              fill=\"#00f2fe\"\n              opacity=\"0.35\"\n            />\n            {/* Eyes */}\n            <circle cx=\"-6\" cy=\"2\" r=\"5\" fill=\"var(--kz-surface-0)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n            <circle cx=\"6\" cy=\"2\" r=\"5\" fill=\"var(--kz-surface-0)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n            <circle cx=\"-6\" cy=\"2\" r=\"2\" fill=\"#00ff66\" className=\"kzl-owl-eye\" />\n            <circle cx=\"6\" cy=\"2\" r=\"2\" fill=\"#00ff66\" className=\"kzl-owl-eye\" />\n            {/* Beak */}\n            <polygon points=\"-2,4 2,4 0,10\" fill=\"#fbbf24\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n            {/* Horns / Ears */}\n            <polygon points=\"-12,-8 -6,-4 -14,2\" fill=\"#7c3aed\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n            <polygon points=\"12,-8 6,-4 14,2\" fill=\"#7c3aed\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n          </g>\n        </g>\n\n        {/* ─── MASCOT BIRD 1: Cyber-Sentry Falcon (Orange - Left) ─── */}\n        <g transform=\"translate(120, 360) scale(1.65)\" className=\"kzl-bird-hitbox kzl-mobile-hide\">\n          <rect x=\"-10\" y=\"0\" width=\"70\" height=\"90\" fill=\"transparent\" style={{ cursor: \"pointer\", pointerEvents: \"all\" }} />\n          <g className=\"kzl-bird-graphics kzl-falcon-bot\">\n            {/* Shadow */}\n            <ellipse cx=\"25\" cy=\"85\" rx=\"30\" ry=\"6\" fill=\"rgba(0,0,0,0.15)\" />\n            \n            {/* Legs */}\n            <line x1=\"16\" y1=\"65\" x2=\"12\" y2=\"85\" stroke=\"#f97316\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n            <line x1=\"34\" y1=\"65\" x2=\"38\" y2=\"85\" stroke=\"#f97316\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n            {/* Feet claws */}\n            <path d=\"M 6 85 L 14 85 M 34 85 L 44 85\" stroke=\"#f97316\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n\n            {/* Body */}\n            <path\n              d=\"M 5 35 C 5 20, 45 20, 45 35 C 45 58, 38 68, 25 68 C 12 68, 5 58, 5 35 Z\"\n              fill={`url(#${u}-falcon-grad)`}\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.5\"\n            />\n            {/* Belly plate */}\n            <path\n              d=\"M 12 38 C 12 28, 38 28, 38 38 C 38 52, 32 58, 25 58 C 18 58, 12 52, 12 38 Z\"\n              fill=\"#ff9800\"\n              opacity=\"0.85\"\n            />\n\n            {/* Wings */}\n            <path\n              d=\"M 2 30 C -8 40, -4 60, 10 58 C 5 50, 4 38, 2 30 Z\"\n              fill=\"#d84315\"\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.2\"\n              className=\"kzl-wing-left\"\n              style={{ transformOrigin: \"2px 30px\" }}\n            />\n            <path\n              d=\"M 48 30 C 58 40, 54 60, 40 58 C 45 50, 46 38, 48 30 Z\"\n              fill=\"#d84315\"\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.2\"\n              className=\"kzl-wing-right\"\n              style={{ transformOrigin: \"48px 30px\" }}\n            />\n\n            {/* Tail feathers */}\n            <path d=\"M 20 66 L 15 80 L 25 76 L 35 80 L 30 66\" fill=\"#bf360c\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n\n            {/* Head */}\n            <g className=\"kzl-head-group\" style={{ transformOrigin: \"25px 28px\" }}>\n              <circle cx=\"25\" cy=\"22\" r=\"18\" fill={`url(#${u}-falcon-grad)`} stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.5\" />\n              \n              {/* Beak */}\n              <polygon points=\"21,24 29,24 25,36\" fill=\"#ffb300\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n\n              {/* Visor */}\n              <rect x=\"9\" y=\"10\" width=\"32\" height=\"10\" rx=\"3\" fill=\"var(--kz-surface-0)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n              {/* Lenses */}\n              <circle cx=\"17\" cy=\"15\" r=\"2.5\" fill=\"#00f2fe\" className=\"kzl-falcon-eye\" />\n              <circle cx=\"33\" cy=\"15\" r=\"2.5\" fill=\"#00f2fe\" className=\"kzl-falcon-eye\" />\n              {/* Wire */}\n              <path d=\"M 41 15 C 44 15, 43 25, 41 28\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" fill=\"none\" />\n            </g>\n\n            {/* Sentry Scan Laser Overlay */}\n            <polygon points=\"25,28 -60,180 110,180\" fill={`url(#${u}-holo-grad)`} className=\"kzl-sentry-laser\" opacity=\"0\" style={{ transformOrigin: \"25px 28px\", pointerEvents: \"none\" }} />\n          </g>\n        </g>\n\n        {/* ─── MASCOT BIRD 2: Developer Duck (Pink - Center Bench) ─── */}\n        <g transform=\"translate(750, 355) scale(1.75)\" className=\"kzl-bird-hitbox kzl-mobile-hide\">\n          <rect x=\"-10\" y=\"5\" width=\"70\" height=\"75\" fill=\"transparent\" style={{ cursor: \"pointer\", pointerEvents: \"all\" }} />\n          <g className=\"kzl-bird-graphics kzl-developer-duck\">\n            {/* Sitting body */}\n            <path\n              d=\"M 5 45 C 5 30, 45 30, 45 45 C 45 62, 38 72, 25 72 C 12 72, 5 62, 5 45 Z\"\n              fill={`url(#${u}-duck-grad)`}\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.5\"\n            />\n            {/* Belly light */}\n            <path\n              d=\"M 12 48 C 12 40, 38 40, 38 48 C 38 60, 32 64, 25 64 C 18 64, 12 60, 12 48 Z\"\n              fill=\"#f472b6\"\n              opacity=\"0.85\"\n            />\n\n            {/* Wings typing */}\n            <path\n              d=\"M -2 40 C -8 46, -4 55, 10 52\"\n              fill=\"none\"\n              stroke=\"#db2777\"\n              strokeWidth=\"8\"\n              strokeLinecap=\"round\"\n              className=\"kzl-wing-left-type\"\n            />\n            <path\n              d=\"M 52 40 C 58 46, 54 55, 40 52\"\n              fill=\"none\"\n              stroke=\"#db2777\"\n              strokeWidth=\"8\"\n              strokeLinecap=\"round\"\n              className=\"kzl-wing-right-type\"\n            />\n\n            {/* Head */}\n            <g className=\"kzl-head-group\" style={{ transformOrigin: \"25px 32px\" }}>\n              <circle cx=\"25\" cy=\"24\" r=\"16\" fill={`url(#${u}-duck-grad)`} stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.5\" />\n              {/* Duck Beak */}\n              <path\n                d=\"M 12 24 C 12 20, 22 18, 25 18 C 28 18, 38 20, 38 24 C 38 28, 28 32, 25 32 C 22 32, 12 28, 12 24 Z\"\n                fill=\"#fbbf24\"\n                stroke=\"var(--kz-border-strong)\"\n                strokeWidth=\"1.2\"\n              />\n              {/* Eyes */}\n              <circle cx=\"19\" cy=\"16\" r=\"2\" fill=\"var(--kz-text-primary)\" className=\"kzl-duck-eye\" />\n              <circle cx=\"31\" cy=\"16\" r=\"2\" fill=\"var(--kz-text-primary)\" className=\"kzl-duck-eye\" />\n              {/* Glasses */}\n              <circle cx=\"19\" cy=\"16\" r=\"4.5\" fill=\"none\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n              <circle cx=\"31\" cy=\"16\" r=\"4.5\" fill=\"none\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n              <line x1=\"23.5\" y1=\"16\" x2=\"26.5\" y2=\"16\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n            </g>\n\n            {/* Holographic Laptop */}\n            <g transform=\"translate(10, 52)\">\n              {/* Base */}\n              <polygon points=\"-8,16 38,16 30,22 -14,22\" fill=\"var(--kz-surface-3)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n              {/* Hologram screen */}\n              <polygon\n                points=\"-4,14 34,14 30,-2 -8,-2\"\n                fill=\"var(--kz-accent-soft)\"\n                stroke=\"var(--kz-accent)\"\n                strokeWidth=\"1\"\n                opacity=\"0.8\"\n                className=\"kzl-laptop-screen\"\n              />\n              {/* Glowing prompt line */}\n              <line x1=\"-2\" y1=\"4\" x2=\"24\" y2=\"4\" stroke=\"var(--kz-accent)\" strokeWidth=\"1.5\" opacity=\"0.9\" />\n              <line x1=\"-2\" y1=\"8\" x2=\"16\" y2=\"8\" stroke=\"var(--kz-accent)\" strokeWidth=\"1.5\" opacity=\"0.6\" />\n              \n              {/* Holographic Projection */}\n              <polygon points=\"12,-2 -40,-80 70,-80\" fill={`url(#${u}-holo-grad)`} opacity=\"0\" className=\"kzl-holo-projection\" style={{ pointerEvents: \"none\" }} />\n              {/* Tiny code elements inside hologram */}\n              <g className=\"kzl-holo-elements\" opacity=\"0\">\n                <rect x=\"-10\" y=\"-45\" width=\"22\" height=\"6\" rx=\"2\" fill=\"var(--kz-surface-3)\" stroke=\"#10b981\" strokeWidth=\"0.5\" />\n                <rect x=\"18\" y=\"-35\" width=\"18\" height=\"6\" rx=\"2\" fill=\"var(--kz-surface-3)\" stroke=\"#10b981\" strokeWidth=\"0.5\" />\n              </g>\n            </g>\n          </g>\n        </g>\n\n        {/* ─── MASCOT BIRD 3: High-Neck Flamingo-Bot (Blue - Right) ─── */}\n        <g transform=\"translate(1000, 270) scale(1.75)\" className=\"kzl-bird-hitbox kzl-mobile-hide\">\n          <rect x=\"-15\" y=\"0\" width=\"65\" height=\"165\" fill=\"transparent\" style={{ cursor: \"pointer\", pointerEvents: \"all\" }} />\n          <g className=\"kzl-bird-graphics kzl-flamingo-bot\">\n            {/* Shadow */}\n            <ellipse cx=\"20\" cy=\"160\" rx=\"22\" ry=\"5\" fill=\"rgba(0,0,0,0.15)\" />\n\n            {/* Long legs */}\n            <line x1=\"12\" y1=\"105\" x2=\"12\" y2=\"160\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"2.5\" />\n            <line x1=\"26\" y1=\"105\" x2=\"28\" y2=\"160\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"2.5\" />\n            {/* Joints */}\n            <circle cx=\"12\" cy=\"130\" r=\"2.5\" fill=\"#3e76a8\" />\n            <circle cx=\"27\" cy=\"130\" r=\"2.5\" fill=\"#3e76a8\" />\n\n            {/* Body */}\n            <path\n              d=\"M 2 80 C 2 68, 38 68, 38 80 C 38 108, 28 112, 20 112 C 12 112, 2 108, 2 80 Z\"\n              fill={`url(#${u}-flamingo-grad)`}\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.5\"\n            />\n\n            {/* Wing (Vibrant contrast) */}\n            <path\n              d=\"M 8 82 L 20 74 L 32 82 L 32 94 L 20 102 L 8 94 Z\"\n              fill=\"#ec4899\"\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1\"\n              opacity=\"0.95\"\n              className=\"kzl-flamingo-wing\"\n            />\n\n            {/* Curved neck */}\n            <path\n              d=\"M 20 74 C 20 60, -2 40, 8 18\"\n              fill=\"none\"\n              stroke={`url(#${u}-flamingo-grad)`}\n              strokeWidth=\"6\"\n              strokeLinecap=\"round\"\n              className=\"kzl-flamingo-neck\"\n            />\n\n            {/* Head */}\n            <g className=\"kzl-head-group\" transform=\"translate(8, 12)\" style={{ transformOrigin: \"0px 0px\" }}>\n              <circle cx=\"0\" cy=\"0\" r=\"10\" fill={`url(#${u}-flamingo-grad)`} stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n              \n              {/* Eye */}\n              <circle cx=\"-3\" cy=\"-2\" r=\"1.5\" fill=\"var(--kz-surface-0)\" />\n              <circle cx=\"-3\" cy=\"-2\" r=\"0.6\" fill=\"#f43f5e\" className=\"kzl-flamingo-eye\" />\n\n              {/* Beak */}\n              <path d=\"M -8 -2 C -18 2, -16 14, -22 18 C -14 10, -8 4, -8 -2 Z\" fill=\"#fbbf24\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n\n              {/* Hat */}\n              <path d=\"M -8 -8 L 8 -8 L 6 -14 L -6 -14 Z\" fill=\"var(--kz-surface-3)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n              <ellipse cx=\"0\" cy=\"-8\" rx=\"10\" ry=\"1.5\" fill=\"var(--kz-surface-3)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n            </g>\n          </g>\n        </g>\n\n          </>\n        )}\n        {/* ─── Floating Glowing Tech Particles ─── */}\n        <circle cx=\"340\" cy=\"300\" r=\"6\" fill=\"#00f2fe\" opacity=\"0.75\" className=\"kzl-float-particle-1\" />\n        <circle cx=\"520\" cy=\"220\" r=\"5\" fill=\"#a855f7\" opacity=\"0.65\" className=\"kzl-float-particle-2\" />\n        <circle cx=\"710\" cy=\"310\" r=\"6.5\" fill=\"#3e76a8\" opacity=\"0.7\" className=\"kzl-float-particle-3\" />\n        <circle cx=\"920\" cy=\"250\" r=\"5\" fill=\"#00f2fe\" opacity=\"0.8\" className=\"kzl-float-particle-4\" />\n        </g>\n      </svg>\n      {fade && <div className=\"kzl-fade\" />}\n    </div>\n  );\n}\n"
+      "content": "// The Krizaka landscape — a valley at dusk under a constellation: three ranges of peaks, a phoenix over a river of\n// two flames, trees of light, a treehouse, and the flock at work (the falcon on watch, the owl, the duck at its\n// laptop, the flamingo). The brand layer's illustration, like the marks: drawn in code, ids unique per instance, its\n// own colours by default (`tone=\"own\"`) or the host brand's sky and peaks (`tone=\"brand\"`). Decorative.\nimport type * as React from \"react\";\nimport { useId } from \"react\";\n\nimport { cn } from \"../cn\";\nimport { warnDeprecated } from \"../deprecated\";\n\n/** The sky and the peaks: the Krizaka dusk (`own`), or the host brand's accents (`brand`). Birds keep their colours. */\nconst TONES = {\n  own: {\n    \"--kzl-sun\": \"#f59e0b\",\n    \"--kzl-sun-2\": \"#ec4899\",\n    \"--kzl-sun-3\": \"#6366f1\",\n    \"--kzl-far\": \"#6366f1\",\n    \"--kzl-far-2\": \"#4f46e5\",\n    \"--kzl-far-line\": \"#818cf8\",\n    \"--kzl-mid\": \"#06b6d4\",\n    \"--kzl-mid-2\": \"#0891b2\",\n    \"--kzl-mid-line\": \"#22d3ee\",\n    \"--kzl-near\": \"#d946ef\",\n    \"--kzl-near-2\": \"#a855f7\",\n    \"--kzl-near-line\": \"#e879f9\",\n    \"--kzl-aurora-l\": \"#00f2fe\",\n    \"--kzl-aurora-r\": \"#ec4899\",\n  },\n  brand: {\n    \"--kzl-sun\": \"var(--kz-accent-2, var(--kz-accent))\",\n    \"--kzl-sun-2\": \"var(--kz-accent)\",\n    \"--kzl-sun-3\": \"var(--kz-accent)\",\n    \"--kzl-far\": \"var(--kz-accent-2, var(--kz-accent))\",\n    \"--kzl-far-2\": \"var(--kz-accent-2, var(--kz-accent))\",\n    \"--kzl-far-line\": \"var(--kz-accent-2, var(--kz-accent))\",\n    \"--kzl-mid\": \"color-mix(in srgb, var(--kz-accent) 55%, var(--kz-accent-2, var(--kz-accent)))\",\n    \"--kzl-mid-2\": \"color-mix(in srgb, var(--kz-accent) 55%, var(--kz-accent-2, var(--kz-accent)))\",\n    \"--kzl-mid-line\": \"color-mix(in srgb, var(--kz-accent) 55%, var(--kz-accent-2, var(--kz-accent)))\",\n    \"--kzl-near\": \"var(--kz-accent)\",\n    \"--kzl-near-2\": \"var(--kz-accent)\",\n    \"--kzl-near-line\": \"var(--kz-accent)\",\n    \"--kzl-aurora-l\": \"var(--kz-accent-2, var(--kz-accent))\",\n    \"--kzl-aurora-r\": \"var(--kz-accent)\",\n  },\n} as const;\n\nconst CSS = `\n.kzl { pointer-events: none; overflow: hidden; }\n.kzl-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; pointer-events: none; z-index: 3;\n  background: linear-gradient(to top, var(--kz-surface-0) 0%, transparent 100%); }\n        /* --- Cyber Phoenix & Flame Flow animations --- */\n        @keyframes kzl-phoenix-flow-purple {\n          from { stroke-dashoffset: 350; }\n          to   { stroke-dashoffset: 0; }\n        }\n        @keyframes kzl-phoenix-flow-gold {\n          from { stroke-dashoffset: 0; }\n          to   { stroke-dashoffset: 350; }\n        }\n        @keyframes kzl-phoenix-bob {\n          0%, 100% { transform: translateY(0) scale(1); }\n          50%      { transform: translateY(-8px) scale(1.02); }\n        }\n        @keyframes kzl-wing-flap-l-phoenix {\n          0%, 100% { transform: rotate(0deg); }\n          50%      { transform: rotate(-10deg) translateY(-2px); }\n        }\n        @keyframes kzl-wing-flap-r-phoenix {\n          0%, 100% { transform: rotate(0deg); }\n          50%      { transform: rotate(10deg) translateY(-2px); }\n        }\n        @keyframes kzl-core-glow {\n          0%, 100% { fill: #ffef5c; filter: drop-shadow(0 0 1px #ffef5c); }\n          50%      { fill: #ffffff; filter: drop-shadow(0 0 5px #ff3c00); }\n        }\n\n        .kzl-cyber-phoenix {\n          animation: kzl-phoenix-bob 4s ease-in-out infinite;\n          transform-origin: 600px 325px;\n          transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        }\n        .kzl-cyber-phoenix:hover {\n          transform: translateY(-4px) scale(1.08);\n        }\n        .kzl-phoenix-wing-l {\n          animation: kzl-wing-flap-l-phoenix 2.5s ease-in-out infinite;\n        }\n        .kzl-phoenix-wing-r {\n          animation: kzl-wing-flap-r-phoenix 2.5s ease-in-out infinite;\n        }\n        .kzl-cyber-phoenix:hover .kzl-phoenix-wing-l {\n          animation: kzl-wing-flap-l-phoenix 0.6s linear infinite;\n        }\n        .kzl-cyber-phoenix:hover .kzl-phoenix-wing-r {\n          animation: kzl-wing-flap-r-phoenix 0.6s linear infinite;\n        }\n        .kzl-phoenix-core {\n          animation: kzl-core-glow 1.5s ease-in-out infinite;\n        }\n\n        /* --- Pulse Animations --- */\n        @keyframes kzl-opacity-pulse {\n          0%, 100% { opacity: 0.35; }\n          50%      { opacity: 0.95; }\n        }\n        .kzl-pulse-slow {\n          animation: kzl-opacity-pulse 4s ease-in-out infinite;\n        }\n        @keyframes kzl-sun-pulse {\n          0%, 100% { opacity: 0.16; transform: scale(0.96); }\n          50%      { opacity: 0.32; transform: scale(1.04); }\n        }\n        .kzl-sun-pulsing {\n          animation: kzl-sun-pulse 6s ease-in-out infinite;\n          transform-origin: 600px 200px;\n        }\n\n        /* --- Rising local data pulses --- */\n        @keyframes kzl-rise-fade-1 {\n          0%   { transform: translateY(80px) scale(0.5); opacity: 0; }\n          40%  { opacity: 0.8; }\n          100% { transform: translateY(-30px) scale(1.3); opacity: 0; }\n        }\n        @keyframes kzl-rise-fade-2 {\n          0%   { transform: translateY(60px) scale(0.4); opacity: 0; }\n          50%  { opacity: 0.9; }\n          100% { transform: translateY(-50px) scale(1.2); opacity: 0; }\n        }\n        .kzl-rising-pulse-1 {\n          animation: kzl-rise-fade-1 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;\n          transform-origin: center;\n        }\n        .kzl-rising-pulse-2 {\n          animation: kzl-rise-fade-2 5s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 1.5s;\n          transform-origin: center;\n        }\n\n        /* --- Mascot Hover Animations (Stable Hitboxes) --- */\n        .kzl-bird-graphics {\n          transform-box: fill-box;\n          transform-origin: center;\n          transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        }\n        .kzl-bird-hitbox:hover .kzl-bird-graphics {\n          transform: scale(1.08) translateY(-4px);\n        }\n\n        /* --- Bird Eye Blinking/Glowing Animations --- */\n        .kzl-falcon-eye {\n          animation: kzl-falcon-eye-pulse 2.5s ease-in-out infinite;\n        }\n        .kzl-duck-eye {\n          transform-box: fill-box;\n          transform-origin: center;\n          animation: kzl-eye-blink 5s ease-in-out infinite 1s;\n        }\n        .kzl-flamingo-eye {\n          transform-box: fill-box;\n          transform-origin: center;\n          animation: kzl-eye-blink 6s ease-in-out infinite 2.5s;\n        }\n        .kzl-owl-eye {\n          transform-box: fill-box;\n          transform-origin: center;\n          animation: kzl-eye-blink 4s ease-in-out infinite 0.5s;\n        }\n\n        @keyframes kzl-eye-blink {\n          0%, 90%, 100% {\n            transform: scaleY(1);\n          }\n          95% {\n            transform: scaleY(0.15);\n          }\n        }\n\n        @keyframes kzl-falcon-eye-pulse {\n          0%, 100% { fill: #00f2fe; filter: drop-shadow(0 0 2px #00f2fe); }\n          50%      { fill: #00ff66; filter: drop-shadow(0 0 5px #00ff66); }\n        }\n\n        /* FalconBot constant loop animations */\n        .kzl-falcon-bot .kzl-head-group {\n          animation: kzl-head-bob 4s ease-in-out infinite;\n        }\n        .kzl-falcon-bot .kzl-wing-left {\n          animation: kzl-wing-flap-left 3s ease-in-out infinite;\n        }\n        .kzl-falcon-bot .kzl-wing-right {\n          animation: kzl-wing-flap-right 3s ease-in-out infinite;\n        }\n        .kzl-falcon-bot .kzl-sentry-laser {\n          animation: kzl-scan-flicker 5s ease-in-out infinite;\n        }\n\n        @keyframes kzl-scan-flicker {\n          0%, 100% { opacity: 0; }\n          10%, 90% { opacity: 0.15; }\n          50%      { opacity: 0.5; }\n        }\n        @keyframes kzl-head-bob {\n          0%, 100% { transform: translateY(0) rotate(0deg); }\n          50%      { transform: translateY(-2px) rotate(2deg); }\n        }\n        @keyframes kzl-wing-flap-left {\n          0%, 100% { transform: rotate(0deg); }\n          50%      { transform: rotate(-8deg) scaleX(1.05); }\n        }\n        @keyframes kzl-wing-flap-right {\n          0%, 100% { transform: rotate(0deg); }\n          50%      { transform: rotate(8deg) scaleX(1.05); }\n        }\n\n        /* Developer Duck constant loop animations */\n        .kzl-developer-duck .kzl-head-group {\n          animation: kzl-duck-look 6s ease-in-out infinite;\n        }\n        .kzl-developer-duck .kzl-wing-left-type {\n          animation: kzl-wing-type-l 0.5s ease-in-out infinite;\n        }\n        .kzl-developer-duck .kzl-wing-right-type {\n          animation: kzl-wing-type-r 0.5s ease-in-out infinite 0.25s;\n        }\n        .kzl-developer-duck .kzl-laptop-screen {\n          animation: kzl-screen-flicker-idle 3s ease-in-out infinite;\n        }\n        .kzl-developer-duck .kzl-holo-projection {\n          animation: kzl-holo-flicker 6s ease-in-out infinite;\n        }\n        .kzl-developer-duck .kzl-holo-elements {\n          animation: kzl-holo-elements-rise 6s ease-in-out infinite;\n        }\n\n        @keyframes kzl-screen-flicker-idle {\n          0%, 100% { opacity: 0.7; }\n          50%      { opacity: 0.95; filter: drop-shadow(0 0 3px var(--kz-accent)); }\n        }\n        @keyframes kzl-holo-flicker {\n          0%, 100% { opacity: 0; }\n          20%, 80% { opacity: 0.35; }\n          50%      { opacity: 0.65; }\n        }\n        @keyframes kzl-holo-elements-rise {\n          0%   { transform: translateY(10px); opacity: 0; }\n          50%  { opacity: 0.8; }\n          100% { transform: translateY(-15px); opacity: 0; }\n        }\n        @keyframes kzl-duck-look {\n          0%, 100% { transform: rotate(0deg); }\n          30%      { transform: rotate(-5deg); }\n          70%      { transform: rotate(5deg); }\n        }\n        @keyframes kzl-wing-type-l {\n          0%, 100% { transform: translateY(0) rotate(0deg); }\n          50%      { transform: translateY(-3px) rotate(-4deg); }\n        }\n        @keyframes kzl-wing-type-r {\n          0%, 100% { transform: translateY(0) rotate(0deg); }\n          50%      { transform: translateY(-3px) rotate(4deg); }\n        }\n\n        /* Flamingo Bot constant loop animations */\n        .kzl-flamingo-bot .kzl-head-group {\n          animation: kzl-flamingo-head-bob 5s ease-in-out infinite;\n        }\n        .kzl-flamingo-bot .kzl-flamingo-neck {\n          animation: kzl-flamingo-neck-sway 7s ease-in-out infinite;\n          transform-origin: 20px 74px;\n        }\n        .kzl-flamingo-bot .kzl-flamingo-wing {\n          animation: kzl-flamingo-wing-flap 4s ease-in-out infinite;\n        }\n\n        @keyframes kzl-flamingo-neck-sway {\n          0%, 100% { transform: rotate(0deg); }\n          50%      { transform: rotate(-3deg) scaleY(1.02); }\n        }\n        @keyframes kzl-flamingo-head-bob {\n          0%, 100% { transform: translate(8px, 12px) translateY(0) rotate(0deg); }\n          50%      { transform: translate(8px, 12px) translateY(-5px) rotate(-3deg); }\n        }\n        @keyframes kzl-flamingo-wing-flap {\n          0%, 100% { transform: translateY(0) rotate(0deg); }\n          50%      { transform: translateY(-2px) rotate(-6deg); }\n        }\n\n        /* Owl Bot constant loop animations */\n        .kzl-owl-bot {\n          animation: kzl-owl-sway 5s ease-in-out infinite;\n          transform-origin: center;\n        }\n        @keyframes kzl-owl-sway {\n          0%, 100% { transform: rotate(0deg) translateY(0); }\n          50%      { transform: rotate(-3deg) translateY(-2px); }\n        }\n\n        /* Treehouse hover glow */\n        .kzl-cyber-treehouse:hover .kzl-window-glow {\n          fill: #f59e0b;\n          filter: drop-shadow(0 0 10px #f59e0b);\n        }\n\n        /* Floating tech particles */\n        @keyframes kzl-float-up-down {\n          0%, 100% { transform: translateY(0); opacity: 0.4; }\n          50%      { transform: translateY(-24px); opacity: 0.95; }\n        }\n        .kzl-float-particle-1 { animation: kzl-float-up-down 4.2s ease-in-out infinite; }\n        .kzl-float-particle-2 { animation: kzl-float-up-down 5.2s ease-in-out infinite 1.2s; }\n        .kzl-float-particle-3 { animation: kzl-float-up-down 4.7s ease-in-out infinite 0.6s; }\n        .kzl-float-particle-4 { animation: kzl-float-up-down 6.2s ease-in-out infinite 2.2s; }\n\n        @media (max-width: 1024px) {\n          .kzl-mobile-hide {\n            display: none !important;\n          }\n        }\n/* Still: with animated={false}, off screen, and under reduced motion — every loop holds its first frame. */\n.kzl[data-still] *, .kzl[data-offscreen] * { animation-play-state: paused !important; }\n@media (prefers-reduced-motion: reduce) {\n  .kzl * { animation-play-state: paused !important; transition: none !important; }\n}\n`;\n\nexport type LandscapeProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> & {\n  /**\n   * `own`: the Krizaka dusk (indigo, cyan and magenta peaks). `brand`: the sky and the peaks in the host brand's\n   * accents (`.brand-<id>`). The birds and the phoenix keep their own colours.\n   * @default \"own\"\n   */\n  tone?: \"own\" | \"brand\";\n  /**\n   * The flock at work in the valley (hidden under 1024 px wide either way).\n   * @default true\n   */\n  flock?: boolean;\n  /**\n   * The phoenix and its river of two flames.\n   * @default true\n   */\n  phoenix?: boolean;\n  /**\n   * The slow loops (the sun, the stars, the flames, the birds). `false` holds the first frame; always held under\n   * `prefers-reduced-motion` and while off screen (with `MotionObserver`).\n   * @default true\n   */\n  animated?: boolean;\n  /**\n   * `absolute`: fills its positioned parent, anchored at the bottom (a backdrop). `relative`: a block in the flow — give\n   * it a height.\n   * @default \"absolute\"\n   */\n  position?: \"absolute\" | \"relative\";\n  /**\n   * Fades the bottom into the page's surface.\n   * @default true\n   */\n  fade?: boolean;\n};\n\n/**\n * The Krizaka landscape: a decorative backdrop for a hero or a page's end (`aria-hidden`).\n * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.\n */\nexport function Landscape({ tone = \"own\", flock = true, phoenix = true, animated = true, position = \"absolute\", fade = true, className, style, ...props }: LandscapeProps) {\n  warnDeprecated(\"landscape\");\n  const u = \"kzl\" + useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n  const box: React.CSSProperties =\n    position === \"absolute\" ? { position: \"absolute\", inset: \"auto 0 0 0\", height: \"100%\", width: \"100%\" } : { position: \"relative\", width: \"100%\", height: 440 };\n  return (\n    <div\n      aria-hidden\n      data-motion-scope=\"\"\n      data-still={animated ? undefined : \"\"}\n      className={cn(\"kzl\", className)}\n      style={{ ...box, ...(TONES[tone] as React.CSSProperties), ...style }}\n      {...props}\n    >\n      <style>{CSS}</style>\n      <svg width=\"100%\" height=\"100%\" viewBox=\"0 50 1200 520\" preserveAspectRatio=\"xMidYMax slice\" fill=\"none\" style={{ display: \"block\", pointerEvents: \"none\" }}>\n        <defs>\n          {/* Vibrant Cyber Sun Glow */}\n          <radialGradient id={`${u}-sun-glow`} cx=\"50%\" cy=\"50%\" r=\"50%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-sun)\" stopOpacity=\"0.45\" />\n            <stop offset=\"30%\" stopColor=\"var(--kzl-sun-2)\" stopOpacity=\"0.28\" />\n            <stop offset=\"70%\" stopColor=\"var(--kzl-sun-3)\" stopOpacity=\"0.16\" />\n            <stop offset=\"100%\" stopColor=\"transparent\" stopOpacity=\"0\" />\n          </radialGradient>\n\n          {/* Mountains Vibrant Gradients */}\n          <linearGradient id={`${u}-mtn-back`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-far)\" stopOpacity=\"0.75\" /> {/* indigo */}\n            <stop offset=\"50%\" stopColor=\"var(--kzl-far-2)\" stopOpacity=\"0.45\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-0)\" />\n          </linearGradient>\n          <linearGradient id={`${u}-mtn-mid`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-mid)\" stopOpacity=\"0.7\" /> {/* cyan */}\n            <stop offset=\"50%\" stopColor=\"var(--kzl-mid-2)\" stopOpacity=\"0.4\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-0)\" />\n          </linearGradient>\n          <linearGradient id={`${u}-mtn-front`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-near)\" stopOpacity=\"0.8\" /> {/* pink */}\n            <stop offset=\"50%\" stopColor=\"var(--kzl-near-2)\" stopOpacity=\"0.5\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-0)\" />\n          </linearGradient>\n\n          {/* Vibrant Mascot Gradients */}\n          <linearGradient id={`${u}-falcon-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#ff9f00\" />\n            <stop offset=\"100%\" stopColor=\"#ff2a00\" />\n          </linearGradient>\n          <linearGradient id={`${u}-duck-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#f43f5e\" />\n            <stop offset=\"100%\" stopColor=\"#be123c\" />\n          </linearGradient>\n          <linearGradient id={`${u}-flamingo-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#3e76a8\" />\n            <stop offset=\"100%\" stopColor=\"#1d4ed8\" />\n          </linearGradient>\n          <linearGradient id={`${u}-owl-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#a78bfa\" />\n            <stop offset=\"100%\" stopColor=\"#6d28d9\" />\n          </linearGradient>\n\n          {/* Hologram Projections */}\n          <linearGradient id={`${u}-holo-grad`} x1=\"0%\" y1=\"100%\" x2=\"0%\" y2=\"0%\">\n            <stop offset=\"0%\" stopColor=\"#10b981\" stopOpacity=\"0.5\" />\n            <stop offset=\"100%\" stopColor=\"#10b981\" stopOpacity=\"0\" />\n          </linearGradient>\n\n          {/* Rival flame gradients for the Cyber-Phoenix */}\n          <linearGradient id={`${u}-phoenix-gold-grad`} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#ffb000\" />\n            <stop offset=\"100%\" stopColor=\"#ff3c00\" />\n          </linearGradient>\n          <linearGradient id={`${u}-phoenix-purple-grad`} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#c084fc\" />\n            <stop offset=\"100%\" stopColor=\"#db2777\" />\n          </linearGradient>\n          <linearGradient id={`${u}-phoenix-body-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--kz-surface-3)\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-2)\" />\n          </linearGradient>\n\n          {/* Glowing stream gradients */}\n          <linearGradient id={`${u}-gold-glow`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#ff3c00\" stopOpacity=\"0.95\" />\n            <stop offset=\"50%\" stopColor=\"#ffb000\" stopOpacity=\"0.75\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-0)\" />\n          </linearGradient>\n          <linearGradient id={`${u}-purple-glow`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#db2777\" stopOpacity=\"0.95\" />\n            <stop offset=\"50%\" stopColor=\"#a78bfa\" stopOpacity=\"0.75\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-0)\" />\n          </linearGradient>\n\n          {/* River mask to fade out at the bottom */}\n          <linearGradient id={`${u}-river-mask-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"85%\" stopColor=\"white\" />\n            <stop offset=\"100%\" stopColor=\"black\" />\n          </linearGradient>\n          <mask id={`${u}-river-fade-mask`}>\n            <rect x=\"0\" y=\"0\" width=\"1200\" height=\"1000\" fill={`url(#${u}-river-mask-grad)`} />\n          </mask>\n\n          {/* Cyber trees gradient */}\n          <linearGradient id={`${u}-tree-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--kz-accent)\" stopOpacity=\"0.35\" />\n            <stop offset=\"100%\" stopColor=\"transparent\" />\n          </linearGradient>\n\n          {/* Cyber Bench Gradient */}\n          <linearGradient id={`${u}-bench-grad`} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n            <stop offset=\"0%\" stopColor=\"var(--kz-surface-3)\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-2)\" />\n          </linearGradient>\n\n          {/* Cyber Aurora Glows */}\n          <radialGradient id={`${u}-aurora-left`} cx=\"20%\" cy=\"30%\" r=\"50%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-aurora-l)\" stopOpacity=\"0.22\" />\n            <stop offset=\"100%\" stopColor=\"transparent\" stopOpacity=\"0\" />\n          </radialGradient>\n          <radialGradient id={`${u}-aurora-right`} cx=\"80%\" cy=\"25%\" r=\"50%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-aurora-r)\" stopOpacity=\"0.22\" />\n            <stop offset=\"100%\" stopColor=\"transparent\" stopOpacity=\"0\" />\n          </radialGradient>\n        </defs>\n\n        <g transform=\"translate(0, 60)\">\n        {/* ─── Cyber Aurora Backdrop ─── */}\n        <circle cx=\"200\" cy=\"180\" r=\"600\" fill={`url(#${u}-aurora-left)`} />\n        <circle cx=\"1000\" cy=\"150\" r=\"600\" fill={`url(#${u}-aurora-right)`} />\n\n        {/* ─── Ethereal Sun and Sky Network Nodes (Constellations) ─── */}\n        <circle cx=\"600\" cy=\"200\" r=\"380\" fill={`url(#${u}-sun-glow)`} />\n        <circle cx=\"600\" cy=\"200\" r=\"64\" fill=\"var(--kzl-sun)\" opacity=\"0.16\" className=\"kzl-sun-pulsing\" />\n\n        {/* Constellation grid lines in the sky */}\n        <g opacity=\"0.3\" stroke=\"var(--kz-accent)\" strokeWidth=\"1\">\n          <line x1=\"300\" y1=\"120\" x2=\"380\" y2=\"80\" />\n          <line x1=\"380\" y1=\"80\" x2=\"450\" y2=\"110\" />\n          <line x1=\"450\" y1=\"110\" x2=\"300\" y2=\"120\" />\n          <line x1=\"450\" y1=\"110\" x2=\"520\" y2=\"60\" />\n          <line x1=\"750\" y1=\"80\" x2=\"840\" y2=\"130\" />\n          <line x1=\"840\" y1=\"130\" x2=\"900\" y2=\"70\" />\n          <line x1=\"900\" y1=\"70\" x2=\"750\" y2=\"80\" />\n        </g>\n        {/* Constellation node points */}\n        <g fill=\"var(--kz-accent)\" opacity=\"0.65\">\n          <circle cx=\"300\" cy=\"120\" r=\"3.5\" />\n          <circle cx=\"380\" cy=\"80\" r=\"5\" className=\"kzl-pulse-slow\" />\n          <circle cx=\"450\" cy=\"110\" r=\"3\" />\n          <circle cx=\"520\" cy=\"60\" r=\"4.5\" />\n          <circle cx=\"750\" cy=\"80\" r=\"4.5\" />\n          <circle cx=\"840\" cy=\"130\" r=\"3.5\" />\n          <circle cx=\"900\" cy=\"70\" r=\"6\" className=\"kzl-pulse-slow\" />\n        </g>\n\n        {/* ─── Layered Mountains (with Digital Contours) ─── */}\n        {/* Far Peaks */}\n        <path d=\"M 150 480 L 420 280 L 680 480 Z\" fill={`url(#${u}-mtn-back)`} stroke=\"var(--kzl-far-line)\" strokeWidth=\"1.5\" />\n        <path d=\"M 520 480 L 780 230 L 1050 480 Z\" fill={`url(#${u}-mtn-back)`} stroke=\"var(--kzl-far-line)\" strokeWidth=\"1.5\" />\n\n        {/* Mid Peaks */}\n        <path d=\"M -50 500 L 220 320 L 500 500 Z\" fill={`url(#${u}-mtn-mid)`} stroke=\"var(--kzl-mid-line)\" strokeWidth=\"1.5\" />\n        <path d=\"M 700 500 L 980 300 L 1250 500 Z\" fill={`url(#${u}-mtn-mid)`} stroke=\"var(--kzl-mid-line)\" strokeWidth=\"1.5\" />\n\n        {/* Wireframe grids on mountains (Contour lines) */}\n        <g stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.18\">\n          {/* Mid peak left contours */}\n          <line x1=\"30\" y1=\"440\" x2=\"410\" y2=\"440\" />\n          <line x1=\"85\" y1=\"400\" x2=\"355\" y2=\"400\" />\n          <line x1=\"140\" y1=\"360\" x2=\"300\" y2=\"360\" />\n          {/* Mid peak right contours */}\n          <line x1=\"770\" y1=\"450\" x2=\"1180\" y2=\"450\" />\n          <line x1=\"825\" y1=\"410\" x2=\"1125\" y2=\"410\" />\n          <line x1=\"880\" y1=\"370\" x2=\"1070\" y2=\"370\" />\n        </g>\n\n        {/* Front Peaks */}\n        <path d=\"M 100 520 L 360 380 L 620 520 Z\" fill={`url(#${u}-mtn-front)`} stroke=\"var(--kzl-near-line)\" strokeWidth=\"1.8\" />\n        <path d=\"M 580 520 L 850 350 L 1100 520 Z\" fill={`url(#${u}-mtn-front)`} stroke=\"var(--kzl-near-line)\" strokeWidth=\"1.8\" />\n\n        {phoenix && (\n          <>\n        {/* ─── Cyber-Phoenix & Dual Glowing Flame Trails ─── */}\n        {/* Dual Cascading Flame Trails */}\n        {/* Left Purple Flame Trail */}\n        <path\n          d=\"M 590 340 C 570 370, 610 390, 590 410 C 570 430, 490 440, 510 480 C 530 520, 670 530, 700 560 C 720 580, 750 600, 730 630 C 710 660, 630 670, 650 710 C 660 730, 690 740, 700 760 C 710 780, 670 800, 650 830 C 630 860, 680 890, 690 920 C 695 935, 705 945, 710 1000\"\n          fill=\"none\"\n          stroke={`url(#${u}-purple-glow)`}\n          strokeWidth=\"6\"\n          strokeLinecap=\"round\"\n          opacity=\"0.6\"\n          mask={`url(#${u}-river-fade-mask)`}\n          style={{\n            filter: \"drop-shadow(0 0 6px rgba(219, 39, 119, 0.4))\",\n          }}\n        />\n        <path\n          d=\"M 590 340 C 570 370, 610 390, 590 410 C 570 430, 490 440, 510 480 C 530 520, 670 530, 700 560 C 720 580, 750 600, 730 630 C 710 660, 630 670, 650 710 C 660 730, 690 740, 700 760 C 710 780, 670 800, 650 830 C 630 860, 680 890, 690 920 C 695 935, 705 945, 710 1000\"\n          fill=\"none\"\n          stroke=\"#db2777\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          opacity=\"0.9\"\n          mask={`url(#${u}-river-fade-mask)`}\n          style={{\n            strokeDasharray: \"25, 20\",\n            animation: \"kzl-phoenix-flow-purple 8s linear infinite\",\n            pointerEvents: \"none\",\n            filter: \"drop-shadow(0 0 3px #db2777)\",\n          }}\n        />\n\n        {/* Right Gold Flame Trail */}\n        <path\n          d=\"M 610 340 C 590 370, 630 390, 610 410 C 590 430, 510 440, 530 480 C 550 520, 690 530, 720 560 C 740 580, 770 600, 750 630 C 730 660, 650 670, 670 710 C 680 730, 710 740, 720 760 C 730 780, 690 800, 670 830 C 650 860, 700 890, 710 920 C 715 935, 725 945, 730 1000\"\n          fill=\"none\"\n          stroke={`url(#${u}-gold-glow)`}\n          strokeWidth=\"6\"\n          strokeLinecap=\"round\"\n          opacity=\"0.6\"\n          mask={`url(#${u}-river-fade-mask)`}\n          style={{\n            filter: \"drop-shadow(0 0 6px rgba(251, 191, 36, 0.4))\",\n          }}\n        />\n        <path\n          d=\"M 610 340 C 590 370, 630 390, 610 410 C 590 430, 510 440, 530 480 C 550 520, 690 530, 720 560 C 740 580, 770 600, 750 630 C 730 660, 650 670, 670 710 C 680 730, 710 740, 720 760 C 730 780, 690 800, 670 830 C 650 860, 700 890, 710 920 C 715 935, 725 945, 730 1000\"\n          fill=\"none\"\n          stroke=\"#fbbf24\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          opacity=\"0.9\"\n          mask={`url(#${u}-river-fade-mask)`}\n          style={{\n            strokeDasharray: \"35, 15\",\n            animation: \"kzl-phoenix-flow-gold 6s linear infinite\",\n            pointerEvents: \"none\",\n            filter: \"drop-shadow(0 0 3px #fbbf24)\",\n          }}\n        />\n\n        {/* Hoverable Cyber-Phoenix Soaring in the Valley Center */}\n        <g className=\"kzl-cyber-phoenix\" style={{ cursor: \"pointer\", pointerEvents: \"auto\" }}>\n          {/* Main Body diamond capsule */}\n          <polygon\n            points=\"600,310 608,325 600,345 592,325\"\n            fill={`url(#${u}-phoenix-body-grad)`}\n            stroke=\"var(--kz-border-strong)\"\n            strokeWidth=\"1.2\"\n          />\n          {/* Glowing Phoenix Core */}\n          <circle cx=\"600\" cy=\"325\" r=\"3\" fill=\"#ffef5c\" className=\"kzl-phoenix-core\" />\n\n          {/* Head */}\n          <circle cx=\"600\" cy=\"302\" r=\"6\" fill={`url(#${u}-phoenix-body-grad)`} stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n          {/* Visor */}\n          <rect x=\"598\" y=\"300\" width=\"4\" height=\"2\" rx=\"0.5\" fill=\"#00f2fe\" />\n          {/* Head Crest */}\n          <polygon points=\"600,296 603,290 600,293 597,290\" fill=\"#ff3c00\" />\n\n          {/* Left Wing (Purple mechanical fire) */}\n          <path\n            d=\"M 592 322 C 555 310, 520 325, 498 348 C 525 348, 545 338, 568 340 C 582 341, 588 333, 592 322 Z\"\n            fill={`url(#${u}-phoenix-purple-grad)`}\n            stroke=\"var(--kz-border-strong)\"\n            strokeWidth=\"1\"\n            className=\"kzl-phoenix-wing-l\"\n            style={{ transformOrigin: \"592px 322px\" }}\n          />\n\n          {/* Right Wing (Gold mechanical fire) */}\n          <path\n            d=\"M 608 322 C 645 310, 680 325, 702 348 C 675 348, 655 338, 632 340 C 618 341, 612 333, 608 322 Z\"\n            fill={`url(#${u}-phoenix-gold-grad)`}\n            stroke=\"var(--kz-border-strong)\"\n            strokeWidth=\"1\"\n            className=\"kzl-phoenix-wing-r\"\n            style={{ transformOrigin: \"608px 322px\" }}\n          />\n        </g>\n\n          </>\n        )}\n        {/* ─── Cyber Trees & Hexagonal Foliage (Nature + Tech) ─── */}\n        {/* Left Tree */}\n        <g transform=\"translate(180, 360)\">\n          {/* Server trunk */}\n          <line x1=\"0\" y1=\"120\" x2=\"0\" y2=\"40\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"4\" />\n          <rect x=\"-8\" y=\"50\" width=\"16\" height=\"28\" rx=\"2\" fill=\"var(--kz-surface-2)\" stroke=\"var(--kz-border-subtle)\" />\n          {/* LED dots on trunk */}\n          <circle cx=\"0\" cy=\"58\" r=\"1.5\" fill=\"var(--kz-accent)\" />\n          <circle cx=\"0\" cy=\"66\" r=\"1.5\" fill=\"var(--kz-accent)\" opacity=\"0.6\" />\n          {/* Hexagonal foliage */}\n          <polygon points=\"0,-10 35,10 35,50 0,70 -35,50 -35,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.4\" />\n          <polygon points=\"0,-5 25,10 25,40 0,55 -25,40 -25,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.6\" />\n        </g>\n\n        {/* Treehouse Tree (Center-Left) */}\n        <g transform=\"translate(420, 320)\">\n          {/* Trunk */}\n          <line x1=\"0\" y1=\"180\" x2=\"0\" y2=\"60\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"5\" />\n          <line x1=\"0\" y1=\"110\" x2=\"35\" y2=\"90\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"3.5\" />\n          {/* Foliage */}\n          <polygon points=\"0,-20 52,10 52,70 0,100 -52,70 -52,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.35\" />\n          <polygon points=\"0,-10 38,10 38,55 0,75 -38,55 -38,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.5\" />\n\n          {/* Hexagonal Treehouse */}\n          <g transform=\"translate(0, 50)\" style={{ pointerEvents: \"auto\", cursor: \"pointer\" }} className=\"kzl-cyber-treehouse\">\n            <polygon points=\"0,-30 26,-15 26,15 0,30 -26,15 -26,-15\" fill=\"var(--kz-surface-3)\" stroke=\"var(--kz-accent)\" strokeWidth=\"1.5\" />\n            {/* Window */}\n            <circle cx=\"0\" cy=\"0\" r=\"8\" fill=\"var(--kz-surface-1)\" stroke=\"var(--kz-border-strong)\" />\n            <circle cx=\"0\" cy=\"0\" r=\"4\" fill=\"var(--kz-accent)\" className=\"kzl-window-glow\" />\n            {/* Ladder */}\n            <path d=\"M -6 30 L -6 95 M 6 30 L 6 95 M -6 42 L 6 42 M -6 54 L 6 54 M -6 66 L 6 66 M -6 78 L 6 78 M -6 90 L 6 90\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.5\" />\n            {/* Animated green local data pulses rising from treehouse */}\n            <circle cx=\"0\" cy=\"-45\" r=\"3\" fill=\"#10b981\" className=\"kzl-rising-pulse-1\" />\n            <circle cx=\"15\" cy=\"-35\" r=\"2\" fill=\"#10b981\" className=\"kzl-rising-pulse-2\" />\n          </g>\n        </g>\n\n        {/* Right Tree */}\n        <g transform=\"translate(1000, 340)\">\n          <line x1=\"0\" y1=\"160\" x2=\"0\" y2=\"60\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"4\" />\n          <polygon points=\"0,-15 42,10 42,60 0,85 -42,60 -42,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.4\" />\n          <polygon points=\"0,-5 28,10 28,42 0,60 -28,42 -28,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.6\" />\n        </g>\n\n        {/* ─── Cyber Tech Bench (Center-Right) ─── */}\n        <g transform=\"translate(740, 480)\">\n          {/* Bench support legs */}\n          <line x1=\"20\" y1=\"35\" x2=\"20\" y2=\"60\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"4\" />\n          <line x1=\"140\" y1=\"35\" x2=\"140\" y2=\"60\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"4\" />\n          {/* Bench seat */}\n          <rect x=\"0\" y=\"22\" width=\"160\" height=\"12\" rx=\"4\" fill={`url(#${u}-bench-grad)`} stroke=\"var(--kz-border-default)\" strokeWidth=\"1.2\" />\n          {/* Bench backrest */}\n          <rect x=\"0\" y=\"0\" width=\"160\" height=\"10\" rx=\"3\" fill={`url(#${u}-bench-grad)`} stroke=\"var(--kz-border-default)\" strokeWidth=\"1.2\" transform=\"rotate(-5, 80, 5)\" />\n          {/* Backrest brackets */}\n          <line x1=\"15\" y1=\"10\" x2=\"15\" y2=\"24\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"3\" />\n          <line x1=\"145\" y1=\"10\" x2=\"145\" y2=\"24\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"3\" />\n        </g>\n\n        {flock && (\n          <>\n        {/* ─── MASCOT BIRD 4: Cyber Owl (Teal/Indigo - Left Tree) ─── */}\n        <g transform=\"translate(180, 275) scale(1.4)\" className=\"kzl-bird-hitbox kzl-mobile-hide\">\n          <rect x=\"-20\" y=\"-15\" width=\"40\" height=\"70\" fill=\"transparent\" style={{ cursor: \"pointer\", pointerEvents: \"all\" }} />\n          <g className=\"kzl-bird-graphics kzl-owl-bot\">\n            {/* Shadow */}\n            <ellipse cx=\"0\" cy=\"50\" rx=\"16\" ry=\"4\" fill=\"rgba(0,0,0,0.15)\" />\n            {/* Body */}\n            <path\n              d=\"M -15,10 C -15,-10, 15,-10, 15,10 C 15,30, 10,45, 0,45 C -10,45, -15,30, -15,10 Z\"\n              fill={`url(#${u}-owl-grad)`}\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.2\"\n            />\n            {/* Belly plate */}\n            <path\n              d=\"M -8,15 C -8,5, 8,5, 8,15 C 8,28, 5,35, 0,35 C -5,35, -8,28, -8,15 Z\"\n              fill=\"#00f2fe\"\n              opacity=\"0.35\"\n            />\n            {/* Eyes */}\n            <circle cx=\"-6\" cy=\"2\" r=\"5\" fill=\"var(--kz-surface-0)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n            <circle cx=\"6\" cy=\"2\" r=\"5\" fill=\"var(--kz-surface-0)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n            <circle cx=\"-6\" cy=\"2\" r=\"2\" fill=\"#00ff66\" className=\"kzl-owl-eye\" />\n            <circle cx=\"6\" cy=\"2\" r=\"2\" fill=\"#00ff66\" className=\"kzl-owl-eye\" />\n            {/* Beak */}\n            <polygon points=\"-2,4 2,4 0,10\" fill=\"#fbbf24\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n            {/* Horns / Ears */}\n            <polygon points=\"-12,-8 -6,-4 -14,2\" fill=\"#7c3aed\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n            <polygon points=\"12,-8 6,-4 14,2\" fill=\"#7c3aed\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n          </g>\n        </g>\n\n        {/* ─── MASCOT BIRD 1: Cyber-Sentry Falcon (Orange - Left) ─── */}\n        <g transform=\"translate(120, 360) scale(1.65)\" className=\"kzl-bird-hitbox kzl-mobile-hide\">\n          <rect x=\"-10\" y=\"0\" width=\"70\" height=\"90\" fill=\"transparent\" style={{ cursor: \"pointer\", pointerEvents: \"all\" }} />\n          <g className=\"kzl-bird-graphics kzl-falcon-bot\">\n            {/* Shadow */}\n            <ellipse cx=\"25\" cy=\"85\" rx=\"30\" ry=\"6\" fill=\"rgba(0,0,0,0.15)\" />\n            \n            {/* Legs */}\n            <line x1=\"16\" y1=\"65\" x2=\"12\" y2=\"85\" stroke=\"#f97316\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n            <line x1=\"34\" y1=\"65\" x2=\"38\" y2=\"85\" stroke=\"#f97316\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n            {/* Feet claws */}\n            <path d=\"M 6 85 L 14 85 M 34 85 L 44 85\" stroke=\"#f97316\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n\n            {/* Body */}\n            <path\n              d=\"M 5 35 C 5 20, 45 20, 45 35 C 45 58, 38 68, 25 68 C 12 68, 5 58, 5 35 Z\"\n              fill={`url(#${u}-falcon-grad)`}\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.5\"\n            />\n            {/* Belly plate */}\n            <path\n              d=\"M 12 38 C 12 28, 38 28, 38 38 C 38 52, 32 58, 25 58 C 18 58, 12 52, 12 38 Z\"\n              fill=\"#ff9800\"\n              opacity=\"0.85\"\n            />\n\n            {/* Wings */}\n            <path\n              d=\"M 2 30 C -8 40, -4 60, 10 58 C 5 50, 4 38, 2 30 Z\"\n              fill=\"#d84315\"\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.2\"\n              className=\"kzl-wing-left\"\n              style={{ transformOrigin: \"2px 30px\" }}\n            />\n            <path\n              d=\"M 48 30 C 58 40, 54 60, 40 58 C 45 50, 46 38, 48 30 Z\"\n              fill=\"#d84315\"\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.2\"\n              className=\"kzl-wing-right\"\n              style={{ transformOrigin: \"48px 30px\" }}\n            />\n\n            {/* Tail feathers */}\n            <path d=\"M 20 66 L 15 80 L 25 76 L 35 80 L 30 66\" fill=\"#bf360c\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n\n            {/* Head */}\n            <g className=\"kzl-head-group\" style={{ transformOrigin: \"25px 28px\" }}>\n              <circle cx=\"25\" cy=\"22\" r=\"18\" fill={`url(#${u}-falcon-grad)`} stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.5\" />\n              \n              {/* Beak */}\n              <polygon points=\"21,24 29,24 25,36\" fill=\"#ffb300\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n\n              {/* Visor */}\n              <rect x=\"9\" y=\"10\" width=\"32\" height=\"10\" rx=\"3\" fill=\"var(--kz-surface-0)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n              {/* Lenses */}\n              <circle cx=\"17\" cy=\"15\" r=\"2.5\" fill=\"#00f2fe\" className=\"kzl-falcon-eye\" />\n              <circle cx=\"33\" cy=\"15\" r=\"2.5\" fill=\"#00f2fe\" className=\"kzl-falcon-eye\" />\n              {/* Wire */}\n              <path d=\"M 41 15 C 44 15, 43 25, 41 28\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" fill=\"none\" />\n            </g>\n\n            {/* Sentry Scan Laser Overlay */}\n            <polygon points=\"25,28 -60,180 110,180\" fill={`url(#${u}-holo-grad)`} className=\"kzl-sentry-laser\" opacity=\"0\" style={{ transformOrigin: \"25px 28px\", pointerEvents: \"none\" }} />\n          </g>\n        </g>\n\n        {/* ─── MASCOT BIRD 2: Developer Duck (Pink - Center Bench) ─── */}\n        <g transform=\"translate(750, 355) scale(1.75)\" className=\"kzl-bird-hitbox kzl-mobile-hide\">\n          <rect x=\"-10\" y=\"5\" width=\"70\" height=\"75\" fill=\"transparent\" style={{ cursor: \"pointer\", pointerEvents: \"all\" }} />\n          <g className=\"kzl-bird-graphics kzl-developer-duck\">\n            {/* Sitting body */}\n            <path\n              d=\"M 5 45 C 5 30, 45 30, 45 45 C 45 62, 38 72, 25 72 C 12 72, 5 62, 5 45 Z\"\n              fill={`url(#${u}-duck-grad)`}\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.5\"\n            />\n            {/* Belly light */}\n            <path\n              d=\"M 12 48 C 12 40, 38 40, 38 48 C 38 60, 32 64, 25 64 C 18 64, 12 60, 12 48 Z\"\n              fill=\"#f472b6\"\n              opacity=\"0.85\"\n            />\n\n            {/* Wings typing */}\n            <path\n              d=\"M -2 40 C -8 46, -4 55, 10 52\"\n              fill=\"none\"\n              stroke=\"#db2777\"\n              strokeWidth=\"8\"\n              strokeLinecap=\"round\"\n              className=\"kzl-wing-left-type\"\n            />\n            <path\n              d=\"M 52 40 C 58 46, 54 55, 40 52\"\n              fill=\"none\"\n              stroke=\"#db2777\"\n              strokeWidth=\"8\"\n              strokeLinecap=\"round\"\n              className=\"kzl-wing-right-type\"\n            />\n\n            {/* Head */}\n            <g className=\"kzl-head-group\" style={{ transformOrigin: \"25px 32px\" }}>\n              <circle cx=\"25\" cy=\"24\" r=\"16\" fill={`url(#${u}-duck-grad)`} stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.5\" />\n              {/* Duck Beak */}\n              <path\n                d=\"M 12 24 C 12 20, 22 18, 25 18 C 28 18, 38 20, 38 24 C 38 28, 28 32, 25 32 C 22 32, 12 28, 12 24 Z\"\n                fill=\"#fbbf24\"\n                stroke=\"var(--kz-border-strong)\"\n                strokeWidth=\"1.2\"\n              />\n              {/* Eyes */}\n              <circle cx=\"19\" cy=\"16\" r=\"2\" fill=\"var(--kz-text-primary)\" className=\"kzl-duck-eye\" />\n              <circle cx=\"31\" cy=\"16\" r=\"2\" fill=\"var(--kz-text-primary)\" className=\"kzl-duck-eye\" />\n              {/* Glasses */}\n              <circle cx=\"19\" cy=\"16\" r=\"4.5\" fill=\"none\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n              <circle cx=\"31\" cy=\"16\" r=\"4.5\" fill=\"none\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n              <line x1=\"23.5\" y1=\"16\" x2=\"26.5\" y2=\"16\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n            </g>\n\n            {/* Holographic Laptop */}\n            <g transform=\"translate(10, 52)\">\n              {/* Base */}\n              <polygon points=\"-8,16 38,16 30,22 -14,22\" fill=\"var(--kz-surface-3)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n              {/* Hologram screen */}\n              <polygon\n                points=\"-4,14 34,14 30,-2 -8,-2\"\n                fill=\"var(--kz-accent-soft)\"\n                stroke=\"var(--kz-accent)\"\n                strokeWidth=\"1\"\n                opacity=\"0.8\"\n                className=\"kzl-laptop-screen\"\n              />\n              {/* Glowing prompt line */}\n              <line x1=\"-2\" y1=\"4\" x2=\"24\" y2=\"4\" stroke=\"var(--kz-accent)\" strokeWidth=\"1.5\" opacity=\"0.9\" />\n              <line x1=\"-2\" y1=\"8\" x2=\"16\" y2=\"8\" stroke=\"var(--kz-accent)\" strokeWidth=\"1.5\" opacity=\"0.6\" />\n              \n              {/* Holographic Projection */}\n              <polygon points=\"12,-2 -40,-80 70,-80\" fill={`url(#${u}-holo-grad)`} opacity=\"0\" className=\"kzl-holo-projection\" style={{ pointerEvents: \"none\" }} />\n              {/* Tiny code elements inside hologram */}\n              <g className=\"kzl-holo-elements\" opacity=\"0\">\n                <rect x=\"-10\" y=\"-45\" width=\"22\" height=\"6\" rx=\"2\" fill=\"var(--kz-surface-3)\" stroke=\"#10b981\" strokeWidth=\"0.5\" />\n                <rect x=\"18\" y=\"-35\" width=\"18\" height=\"6\" rx=\"2\" fill=\"var(--kz-surface-3)\" stroke=\"#10b981\" strokeWidth=\"0.5\" />\n              </g>\n            </g>\n          </g>\n        </g>\n\n        {/* ─── MASCOT BIRD 3: High-Neck Flamingo-Bot (Blue - Right) ─── */}\n        <g transform=\"translate(1000, 270) scale(1.75)\" className=\"kzl-bird-hitbox kzl-mobile-hide\">\n          <rect x=\"-15\" y=\"0\" width=\"65\" height=\"165\" fill=\"transparent\" style={{ cursor: \"pointer\", pointerEvents: \"all\" }} />\n          <g className=\"kzl-bird-graphics kzl-flamingo-bot\">\n            {/* Shadow */}\n            <ellipse cx=\"20\" cy=\"160\" rx=\"22\" ry=\"5\" fill=\"rgba(0,0,0,0.15)\" />\n\n            {/* Long legs */}\n            <line x1=\"12\" y1=\"105\" x2=\"12\" y2=\"160\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"2.5\" />\n            <line x1=\"26\" y1=\"105\" x2=\"28\" y2=\"160\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"2.5\" />\n            {/* Joints */}\n            <circle cx=\"12\" cy=\"130\" r=\"2.5\" fill=\"#3e76a8\" />\n            <circle cx=\"27\" cy=\"130\" r=\"2.5\" fill=\"#3e76a8\" />\n\n            {/* Body */}\n            <path\n              d=\"M 2 80 C 2 68, 38 68, 38 80 C 38 108, 28 112, 20 112 C 12 112, 2 108, 2 80 Z\"\n              fill={`url(#${u}-flamingo-grad)`}\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.5\"\n            />\n\n            {/* Wing (Vibrant contrast) */}\n            <path\n              d=\"M 8 82 L 20 74 L 32 82 L 32 94 L 20 102 L 8 94 Z\"\n              fill=\"#ec4899\"\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1\"\n              opacity=\"0.95\"\n              className=\"kzl-flamingo-wing\"\n            />\n\n            {/* Curved neck */}\n            <path\n              d=\"M 20 74 C 20 60, -2 40, 8 18\"\n              fill=\"none\"\n              stroke={`url(#${u}-flamingo-grad)`}\n              strokeWidth=\"6\"\n              strokeLinecap=\"round\"\n              className=\"kzl-flamingo-neck\"\n            />\n\n            {/* Head */}\n            <g className=\"kzl-head-group\" transform=\"translate(8, 12)\" style={{ transformOrigin: \"0px 0px\" }}>\n              <circle cx=\"0\" cy=\"0\" r=\"10\" fill={`url(#${u}-flamingo-grad)`} stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n              \n              {/* Eye */}\n              <circle cx=\"-3\" cy=\"-2\" r=\"1.5\" fill=\"var(--kz-surface-0)\" />\n              <circle cx=\"-3\" cy=\"-2\" r=\"0.6\" fill=\"#f43f5e\" className=\"kzl-flamingo-eye\" />\n\n              {/* Beak */}\n              <path d=\"M -8 -2 C -18 2, -16 14, -22 18 C -14 10, -8 4, -8 -2 Z\" fill=\"#fbbf24\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n\n              {/* Hat */}\n              <path d=\"M -8 -8 L 8 -8 L 6 -14 L -6 -14 Z\" fill=\"var(--kz-surface-3)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n              <ellipse cx=\"0\" cy=\"-8\" rx=\"10\" ry=\"1.5\" fill=\"var(--kz-surface-3)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n            </g>\n          </g>\n        </g>\n\n          </>\n        )}\n        {/* ─── Floating Glowing Tech Particles ─── */}\n        <circle cx=\"340\" cy=\"300\" r=\"6\" fill=\"#00f2fe\" opacity=\"0.75\" className=\"kzl-float-particle-1\" />\n        <circle cx=\"520\" cy=\"220\" r=\"5\" fill=\"#a855f7\" opacity=\"0.65\" className=\"kzl-float-particle-2\" />\n        <circle cx=\"710\" cy=\"310\" r=\"6.5\" fill=\"#3e76a8\" opacity=\"0.7\" className=\"kzl-float-particle-3\" />\n        <circle cx=\"920\" cy=\"250\" r=\"5\" fill=\"#00f2fe\" opacity=\"0.8\" className=\"kzl-float-particle-4\" />\n        </g>\n      </svg>\n      {fade && <div className=\"kzl-fade\" />}\n    </div>\n  );\n}\n"
     },
     {
       "path": "landscape/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Landscape\",\n  summary:\n    \"The Krizaka valley at dusk — peaks, a phoenix over a river of two flames, trees of light and the flock at work: a decorative backdrop in its own colours or in the host brand's.\",\n  status: \"beta\",\n  category: \"blocks\",\n  platforms: \"web\",\n  parity: { native: { status: \"n/a\", reason: \"A block of a public site's page; an app screen on a phone is built from Screen, Header and Card.\" }, desktop: { status: \"n/a\", reason: \"A public site's page, not a window of the Mac app.\" } },\n  whenToUse: [\n    \"Behind the end of a told page or a home's first screen, under the last words.\",\n    \"A product's about page, in its own accents (`tone=\\\"brand\\\"`, `flock={false}` for a calmer one).\",\n  ],\n  whenNotToUse: [\n    { when: \"Behind a section's content: the brand's gradient and grid are the section backdrop.\", use: \"section-backdrop\" },\n    { when: \"In a working screen, or behind text that must be read.\" },\n  ],\n  bestPractices: [\n    \"Place it at the bottom of a positioned parent with room under the words; it fades into the surface.\",\n    \"Hold it still (`animated={false}`) on a page that already moves; it pauses off screen with `MotionObserver`.\",\n    \"The birds are hidden under 1024 px: on a phone the valley stays calm.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"Decorative (`aria-hidden`): it never carries information.\",\n      \"Every loop holds its first frame under `prefers-reduced-motion`, with `animated={false}`, and while off screen.\",\n    ],\n  },\n  related: [\"section-backdrop\", \"mascots\", \"page-hero\"],\n  web: {\n    imports: [\"Landscape\"],\n    examples: [\n      { name: \"backdrop\", title: \"A page's end\", description: \"The valley behind the last words, faded into the surface.\" },\n      { name: \"brand\", title: \"In the brand's colours\", description: \"`tone=\\\"brand\\\"` without the flock: the sky and the peaks in the host's accents.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Landscape\",\n  summary:\n    \"The Krizaka valley at dusk — peaks, a phoenix over a river of two flames, trees of light and the flock at work: a decorative backdrop in its own colours or in the host brand's.\",\n  status: \"deprecated\",\n  deprecated: {\n    since: \"3.55.0\",\n    removedIn: \"4.0.0\",\n    reason: \"No product or site imports it and no filed need names it (ADR-006 audit, 2026-10-25): there is no replacement.\",\n  },\n  category: \"blocks\",\n  platforms: \"web\",\n  parity: { native: { status: \"n/a\", reason: \"A block of a public site's page; an app screen on a phone is built from Screen, Header and Card.\" }, desktop: { status: \"n/a\", reason: \"A public site's page, not a window of the Mac app.\" } },\n  whenToUse: [\n    \"Behind the end of a told page or a home's first screen, under the last words.\",\n    \"A product's about page, in its own accents (`tone=\\\"brand\\\"`, `flock={false}` for a calmer one).\",\n  ],\n  whenNotToUse: [\n    { when: \"Behind a section's content: the brand's gradient and grid are the section backdrop.\", use: \"section-backdrop\" },\n    { when: \"In a working screen, or behind text that must be read.\" },\n  ],\n  bestPractices: [\n    \"Place it at the bottom of a positioned parent with room under the words; it fades into the surface.\",\n    \"Hold it still (`animated={false}`) on a page that already moves; it pauses off screen with `MotionObserver`.\",\n    \"The birds are hidden under 1024 px: on a phone the valley stays calm.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"Decorative (`aria-hidden`): it never carries information.\",\n      \"Every loop holds its first frame under `prefers-reduced-motion`, with `animated={false}`, and while off screen.\",\n    ],\n  },\n  related: [\"section-backdrop\", \"mascots\", \"page-hero\"],\n  web: {\n    imports: [\"Landscape\"],\n    examples: [\n      { name: \"backdrop\", title: \"A page's end\", description: \"The valley behind the last words, faded into the surface.\" },\n      { name: \"brand\", title: \"In the brand's colours\", description: \"`tone=\\\"brand\\\"` without the flock: the sky and the peaks in the host's accents.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "meta.ts",
-      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which ui.krizaka.com (apps/site) renders as\n// ui.krizaka.com/components/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"agenda\"\n  | \"account-settings\"\n  | \"drop-overlay\"\n  | \"upload-queue\"\n  | \"achievement\"\n  | \"anatomy-plate\"\n  | \"bird-plate\"\n  | \"taped-photo\"\n  | \"text-style\"\n  | \"flock\"\n  | \"elephant\"\n  | \"footnote\"\n  | \"page-index\"\n  | \"chapter\"\n  | \"specimen-tag\"\n  | \"action-bar\"\n  | \"action-sheet\"\n  | \"activity-feed\"\n  | \"alert\"\n  | \"app-header\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"captcha\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"chat\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"chip-row\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"comparison-table\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cover-hero\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"description-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"docs-nav\"\n  | \"document-viewer\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"engine-flow\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"force-update-screen\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"genui\"\n  | \"glossary\"\n  | \"glossary-term\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"kpi-explained\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"maintenance-screen\"\n  | \"map\"\n  | \"markdown\"\n  | \"meta-row\"\n  | \"waveform\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"match-dialog\"\n  | \"media-capture\"\n  | \"media-grid\"\n  | \"language-switch\"\n  | \"media-gallery\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"opening-hours\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"photo-grid\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\n  | \"radio-group\"\n  | \"router\"\n  | \"rail-nav\"\n  | \"recipes\"\n  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"service-card\"\n  | \"settings-layout\"\n  | \"account-menu\"\n  | \"showcase\"\n  | \"step-showcase\"\n  | \"site-footer\"\n  | \"sites\"\n  | \"skeleton\"\n  | \"skip-link\"\n  | \"slider\"\n  | \"slot-picker\"\n  | \"slot\"\n  | \"spinner\"\n  | \"sticky-action\"\n  | \"splash-handoff\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"step-progress\"\n  | \"stepper\"\n  | \"swipe-deck\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"tag-selector\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"update-prompt\"\n  | \"verified-badge\"\n  | \"vertical-video\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/**\n * Why a component is not on a platform — a decision, never a silence (the parity matrix of ui.krizaka.com/platforms):\n * - `gap` (✗): it belongs there and is not built yet; `issue` is the issue that tracks it (`krizaka/krizaka-ui#275`);\n * - `n/a`: it is not meant for that platform (a site's page block on a phone, a swipe on a desktop); `use` names the\n *   component that answers there, when one does.\n */\nexport type Absence =\n  | { readonly status: \"gap\"; readonly issue: string; readonly reason: string; readonly use?: undefined }\n  | { readonly status: \"n/a\"; readonly reason: string; readonly use?: ComponentName; readonly issue?: undefined };\n\n/**\n * Desktop is the Orazaka Mac app (Tauri 2: the system WebView renders the web components — ADR-002). `web`: the web\n * component runs there as it is; `desktop`: it also has a desktop form (a window's title bar, a denser layout…), said in\n * its documentation; otherwise the absence and why.\n */\nexport type DesktopSupport = \"web\" | \"desktop\" | Absence;\n\n/**\n * The three platforms of Krizaka UI — web · native (React Native, Expo) · desktop — for one component. The side a\n * component has is `platforms`; the side it lacks says why here: `native` is required for (and only for) a web-only\n * component, `web` for a native-only one; `desktop` always. `scripts/registry.test.mjs` fails on a missing decision.\n */\nexport interface Parity {\n  readonly web?: Absence;\n  readonly native?: Absence;\n  readonly desktop: DesktopSupport;\n}\n\n/**\n * `stable`: its API only changes in a major. `beta`: it may still change in a minor. `deprecated`: no product uses it and\n * no work plans to — it still works, says what replaces it, and goes in the major named by `deprecated.removedIn`.\n */\nexport type Status = \"stable\" | \"beta\" | \"deprecated\";\n\n/** What a deprecated component says (required when `status` is `deprecated`, absent otherwise). */\nexport interface Deprecation {\n  /** The version that deprecated it (`3.6.0`). */\n  readonly since: string;\n  /** The major that removes it (`4.0.0`). */\n  readonly removedIn: string;\n  /** What replaces it, when a component does. */\n  readonly use?: ComponentName;\n  /** Why it goes: no product uses it, no planned work needs it. */\n  readonly reason: string;\n}\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/** Why a reader needs a template: the seven intents the templates are grouped by (sidebar sub-headings, catalogue filter). */\nexport type TemplatePurpose = \"convince\" | \"explain\" | \"show\" | \"act\" | \"operate\" | \"converse\" | \"recover\";\n\n/** The groups of templates, in reading order: the title, and the one line that says when to come to that group. */\nexport const templatePurposes = {\n  convince: { title: \"Convince\", useWhen: \"You come here when a visitor must decide: a landing, a product, a price, a comparison, a proof.\" },\n  explain: { title: \"Explain\", useWhen: \"You come here when a reader must understand: how it works, a documentation hub or article, a changelog, a FAQ, a policy.\" },\n  show: { title: \"Show\", useWhen: \"You come here when the work itself is the argument: a gallery, a story, a case study, an object and its details.\" },\n  act: { title: \"Act\", useWhen: \"You come here when a person must do something once: reach the team, sign in or up, set up, pay.\" },\n  operate: { title: \"Operate\", useWhen: \"You come here when a person works every day: a dashboard, a console with a table, settings, an app shell.\" },\n  converse: { title: \"Converse\", useWhen: \"You come here when people talk: an inbox, a chat, comments, a notifications centre.\" },\n  recover: { title: \"Recover\", useWhen: \"You come here when the way is blocked: an empty list, an error, a missing page, maintenance, a product still being built.\" },\n} as const satisfies Record<TemplatePurpose, { readonly title: string; readonly useWhen: string }>;\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\ninterface ExampleBase {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** A plain example, or a template: a whole screen with its intent (`purpose`) and the user goal its layout serves (`why`). */\nexport type Example =\n  | (ExampleBase & { readonly template?: false; readonly purpose?: undefined; readonly why?: undefined })\n  | (ExampleBase & {\n      /**\n       * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its\n       * phone version thought out), copied as a starting point — at most 160 lines, listed on ui.krizaka.com/templates.\n       */\n      readonly template: true;\n      /** The intent that groups it: why you need this block. */\n      readonly purpose: TemplatePurpose;\n      /** Why this layout: the user goal it serves, in one sentence. */\n      readonly why: string;\n    });\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  /** Required for, and only for, a `deprecated` component. */\n  readonly deprecated?: Deprecation;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** The platforms it is not on, and why; and its desktop form (see `Parity`). */\n  readonly parity: Parity;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which ui.krizaka.com (apps/site) renders as\n// ui.krizaka.com/components/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"notification-preferences\"\n  | \"quota-meter\"\n  | \"agenda\"\n  | \"account-settings\"\n  | \"drop-overlay\"\n  | \"upload-queue\"\n  | \"achievement\"\n  | \"anatomy-plate\"\n  | \"bird-plate\"\n  | \"taped-photo\"\n  | \"stuck\"\n  | \"doodle\"\n  | \"signature\"\n  | \"text-style\"\n  | \"flock\"\n  | \"elephant\"\n  | \"footnote\"\n  | \"page-index\"\n  | \"chapter\"\n  | \"specimen-tag\"\n  | \"action-bar\"\n  | \"action-sheet\"\n  | \"activity-feed\"\n  | \"alert\"\n  | \"app-header\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"captcha\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"chat\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"chip-row\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"comparison-table\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cover-hero\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"description-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"docs-nav\"\n  | \"document-viewer\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"engine-flow\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"force-update-screen\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"genui\"\n  | \"glossary\"\n  | \"glossary-term\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"kpi-explained\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"maintenance-screen\"\n  | \"map\"\n  | \"markdown\"\n  | \"meta-row\"\n  | \"waveform\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"match-dialog\"\n  | \"media-capture\"\n  | \"media-grid\"\n  | \"language-switch\"\n  | \"media-gallery\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"opening-hours\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"photo-grid\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\n  | \"retro-tv\"\n  | \"radio-group\"\n  | \"router\"\n  | \"rail-nav\"\n  | \"recipes\"\n  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"service-card\"\n  | \"settings-layout\"\n  | \"account-menu\"\n  | \"showcase\"\n  | \"step-showcase\"\n  | \"site-footer\"\n  | \"sites\"\n  | \"skeleton\"\n  | \"skip-link\"\n  | \"slider\"\n  | \"slot-picker\"\n  | \"slot\"\n  | \"spinner\"\n  | \"sticky-action\"\n  | \"splash-handoff\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"step-progress\"\n  | \"stepper\"\n  | \"swipe-deck\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"tag-selector\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"update-prompt\"\n  | \"verified-badge\"\n  | \"vertical-video\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/**\n * Why a component is not on a platform — a decision, never a silence (the parity matrix of ui.krizaka.com/platforms):\n * - `gap` (✗): it belongs there and is not built yet; `issue` is the issue that tracks it (`krizaka/krizaka-ui#275`);\n * - `n/a`: it is not meant for that platform (a site's page block on a phone, a swipe on a desktop); `use` names the\n *   component that answers there, when one does.\n */\nexport type Absence =\n  | { readonly status: \"gap\"; readonly issue: string; readonly reason: string; readonly use?: undefined }\n  | { readonly status: \"n/a\"; readonly reason: string; readonly use?: ComponentName; readonly issue?: undefined };\n\n/**\n * Desktop is the Orazaka Mac app (Tauri 2: the system WebView renders the web components — ADR-002). `web`: the web\n * component runs there as it is; `desktop`: it also has a desktop form (a window's title bar, a denser layout…), said in\n * its documentation; otherwise the absence and why.\n */\nexport type DesktopSupport = \"web\" | \"desktop\" | Absence;\n\n/**\n * The three platforms of Krizaka UI — web · native (React Native, Expo) · desktop — for one component. The side a\n * component has is `platforms`; the side it lacks says why here: `native` is required for (and only for) a web-only\n * component, `web` for a native-only one; `desktop` always. `scripts/registry.test.mjs` fails on a missing decision.\n */\nexport interface Parity {\n  readonly web?: Absence;\n  readonly native?: Absence;\n  readonly desktop: DesktopSupport;\n}\n\n/**\n * `stable`: its API only changes in a major. `beta`: it may still change in a minor. `deprecated`: no product uses it and\n * no work plans to — it still works, says what replaces it, and goes in the major named by `deprecated.removedIn`.\n */\nexport type Status = \"stable\" | \"beta\" | \"deprecated\";\n\n/** What a deprecated component says (required when `status` is `deprecated`, absent otherwise). */\nexport interface Deprecation {\n  /** The version that deprecated it (`3.6.0`). */\n  readonly since: string;\n  /** The major that removes it (`4.0.0`). */\n  readonly removedIn: string;\n  /** What replaces it, when a component does. */\n  readonly use?: ComponentName;\n  /** Why it goes: no product uses it, no planned work needs it. */\n  readonly reason: string;\n}\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/** Why a reader needs a template: the seven intents the templates are grouped by (sidebar sub-headings, catalogue filter). */\nexport type TemplatePurpose = \"convince\" | \"explain\" | \"show\" | \"act\" | \"operate\" | \"converse\" | \"recover\";\n\n/** The groups of templates, in reading order: the title, and the one line that says when to come to that group. */\nexport const templatePurposes = {\n  convince: { title: \"Convince\", useWhen: \"You come here when a visitor must decide: a landing, a product, a price, a comparison, a proof.\" },\n  explain: { title: \"Explain\", useWhen: \"You come here when a reader must understand: how it works, a documentation hub or article, a changelog, a FAQ, a policy.\" },\n  show: { title: \"Show\", useWhen: \"You come here when the work itself is the argument: a gallery, a story, a case study, an object and its details.\" },\n  act: { title: \"Act\", useWhen: \"You come here when a person must do something once: reach the team, sign in or up, set up, pay.\" },\n  operate: { title: \"Operate\", useWhen: \"You come here when a person works every day: a dashboard, a console with a table, settings, an app shell.\" },\n  converse: { title: \"Converse\", useWhen: \"You come here when people talk: an inbox, a chat, comments, a notifications centre.\" },\n  recover: { title: \"Recover\", useWhen: \"You come here when the way is blocked: an empty list, an error, a missing page, maintenance, a product still being built.\" },\n} as const satisfies Record<TemplatePurpose, { readonly title: string; readonly useWhen: string }>;\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\ninterface ExampleBase {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** A plain example, or a template: a whole screen with its intent (`purpose`) and the user goal its layout serves (`why`). */\nexport type Example =\n  | (ExampleBase & { readonly template?: false; readonly purpose?: undefined; readonly why?: undefined })\n  | (ExampleBase & {\n      /**\n       * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its\n       * phone version thought out), copied as a starting point — at most 160 lines, listed on ui.krizaka.com/templates.\n       */\n      readonly template: true;\n      /** The intent that groups it: why you need this block. */\n      readonly purpose: TemplatePurpose;\n      /** Why this layout: the user goal it serves, in one sentence. */\n      readonly why: string;\n    });\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n  /** The React Native entry alone is deprecated while the web one stays (ADR-006 §7); a deprecated component says it once, above. */\n  readonly deprecated?: Deprecation;\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  /** Required for, and only for, a `deprecated` component. */\n  readonly deprecated?: Deprecation;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** The platforms it is not on, and why; and its desktop form (see `Parity`). */\n  readonly parity: Parity;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
     }
   ],
   "dependencies": [],

package/registry/language-switch.json

@@ -179,7 +179,7 @@
     },
     {
       "path": "meta.ts",
-      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which ui.krizaka.com (apps/site) renders as\n// ui.krizaka.com/components/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"agenda\"\n  | \"account-settings\"\n  | \"drop-overlay\"\n  | \"upload-queue\"\n  | \"achievement\"\n  | \"anatomy-plate\"\n  | \"bird-plate\"\n  | \"taped-photo\"\n  | \"text-style\"\n  | \"flock\"\n  | \"elephant\"\n  | \"footnote\"\n  | \"page-index\"\n  | \"chapter\"\n  | \"specimen-tag\"\n  | \"action-bar\"\n  | \"action-sheet\"\n  | \"activity-feed\"\n  | \"alert\"\n  | \"app-header\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"captcha\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"chat\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"chip-row\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"comparison-table\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cover-hero\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"description-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"docs-nav\"\n  | \"document-viewer\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"engine-flow\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"force-update-screen\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"genui\"\n  | \"glossary\"\n  | \"glossary-term\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"kpi-explained\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"maintenance-screen\"\n  | \"map\"\n  | \"markdown\"\n  | \"meta-row\"\n  | \"waveform\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"match-dialog\"\n  | \"media-capture\"\n  | \"media-grid\"\n  | \"language-switch\"\n  | \"media-gallery\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"opening-hours\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"photo-grid\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\n  | \"radio-group\"\n  | \"router\"\n  | \"rail-nav\"\n  | \"recipes\"\n  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"service-card\"\n  | \"settings-layout\"\n  | \"account-menu\"\n  | \"showcase\"\n  | \"step-showcase\"\n  | \"site-footer\"\n  | \"sites\"\n  | \"skeleton\"\n  | \"skip-link\"\n  | \"slider\"\n  | \"slot-picker\"\n  | \"slot\"\n  | \"spinner\"\n  | \"sticky-action\"\n  | \"splash-handoff\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"step-progress\"\n  | \"stepper\"\n  | \"swipe-deck\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"tag-selector\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"update-prompt\"\n  | \"verified-badge\"\n  | \"vertical-video\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/**\n * Why a component is not on a platform — a decision, never a silence (the parity matrix of ui.krizaka.com/platforms):\n * - `gap` (✗): it belongs there and is not built yet; `issue` is the issue that tracks it (`krizaka/krizaka-ui#275`);\n * - `n/a`: it is not meant for that platform (a site's page block on a phone, a swipe on a desktop); `use` names the\n *   component that answers there, when one does.\n */\nexport type Absence =\n  | { readonly status: \"gap\"; readonly issue: string; readonly reason: string; readonly use?: undefined }\n  | { readonly status: \"n/a\"; readonly reason: string; readonly use?: ComponentName; readonly issue?: undefined };\n\n/**\n * Desktop is the Orazaka Mac app (Tauri 2: the system WebView renders the web components — ADR-002). `web`: the web\n * component runs there as it is; `desktop`: it also has a desktop form (a window's title bar, a denser layout…), said in\n * its documentation; otherwise the absence and why.\n */\nexport type DesktopSupport = \"web\" | \"desktop\" | Absence;\n\n/**\n * The three platforms of Krizaka UI — web · native (React Native, Expo) · desktop — for one component. The side a\n * component has is `platforms`; the side it lacks says why here: `native` is required for (and only for) a web-only\n * component, `web` for a native-only one; `desktop` always. `scripts/registry.test.mjs` fails on a missing decision.\n */\nexport interface Parity {\n  readonly web?: Absence;\n  readonly native?: Absence;\n  readonly desktop: DesktopSupport;\n}\n\n/**\n * `stable`: its API only changes in a major. `beta`: it may still change in a minor. `deprecated`: no product uses it and\n * no work plans to — it still works, says what replaces it, and goes in the major named by `deprecated.removedIn`.\n */\nexport type Status = \"stable\" | \"beta\" | \"deprecated\";\n\n/** What a deprecated component says (required when `status` is `deprecated`, absent otherwise). */\nexport interface Deprecation {\n  /** The version that deprecated it (`3.6.0`). */\n  readonly since: string;\n  /** The major that removes it (`4.0.0`). */\n  readonly removedIn: string;\n  /** What replaces it, when a component does. */\n  readonly use?: ComponentName;\n  /** Why it goes: no product uses it, no planned work needs it. */\n  readonly reason: string;\n}\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/** Why a reader needs a template: the seven intents the templates are grouped by (sidebar sub-headings, catalogue filter). */\nexport type TemplatePurpose = \"convince\" | \"explain\" | \"show\" | \"act\" | \"operate\" | \"converse\" | \"recover\";\n\n/** The groups of templates, in reading order: the title, and the one line that says when to come to that group. */\nexport const templatePurposes = {\n  convince: { title: \"Convince\", useWhen: \"You come here when a visitor must decide: a landing, a product, a price, a comparison, a proof.\" },\n  explain: { title: \"Explain\", useWhen: \"You come here when a reader must understand: how it works, a documentation hub or article, a changelog, a FAQ, a policy.\" },\n  show: { title: \"Show\", useWhen: \"You come here when the work itself is the argument: a gallery, a story, a case study, an object and its details.\" },\n  act: { title: \"Act\", useWhen: \"You come here when a person must do something once: reach the team, sign in or up, set up, pay.\" },\n  operate: { title: \"Operate\", useWhen: \"You come here when a person works every day: a dashboard, a console with a table, settings, an app shell.\" },\n  converse: { title: \"Converse\", useWhen: \"You come here when people talk: an inbox, a chat, comments, a notifications centre.\" },\n  recover: { title: \"Recover\", useWhen: \"You come here when the way is blocked: an empty list, an error, a missing page, maintenance, a product still being built.\" },\n} as const satisfies Record<TemplatePurpose, { readonly title: string; readonly useWhen: string }>;\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\ninterface ExampleBase {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** A plain example, or a template: a whole screen with its intent (`purpose`) and the user goal its layout serves (`why`). */\nexport type Example =\n  | (ExampleBase & { readonly template?: false; readonly purpose?: undefined; readonly why?: undefined })\n  | (ExampleBase & {\n      /**\n       * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its\n       * phone version thought out), copied as a starting point — at most 160 lines, listed on ui.krizaka.com/templates.\n       */\n      readonly template: true;\n      /** The intent that groups it: why you need this block. */\n      readonly purpose: TemplatePurpose;\n      /** Why this layout: the user goal it serves, in one sentence. */\n      readonly why: string;\n    });\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  /** Required for, and only for, a `deprecated` component. */\n  readonly deprecated?: Deprecation;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** The platforms it is not on, and why; and its desktop form (see `Parity`). */\n  readonly parity: Parity;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which ui.krizaka.com (apps/site) renders as\n// ui.krizaka.com/components/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"notification-preferences\"\n  | \"quota-meter\"\n  | \"agenda\"\n  | \"account-settings\"\n  | \"drop-overlay\"\n  | \"upload-queue\"\n  | \"achievement\"\n  | \"anatomy-plate\"\n  | \"bird-plate\"\n  | \"taped-photo\"\n  | \"stuck\"\n  | \"doodle\"\n  | \"signature\"\n  | \"text-style\"\n  | \"flock\"\n  | \"elephant\"\n  | \"footnote\"\n  | \"page-index\"\n  | \"chapter\"\n  | \"specimen-tag\"\n  | \"action-bar\"\n  | \"action-sheet\"\n  | \"activity-feed\"\n  | \"alert\"\n  | \"app-header\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"captcha\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"chat\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"chip-row\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"comparison-table\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cover-hero\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"description-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"docs-nav\"\n  | \"document-viewer\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"engine-flow\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"force-update-screen\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"genui\"\n  | \"glossary\"\n  | \"glossary-term\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"kpi-explained\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"maintenance-screen\"\n  | \"map\"\n  | \"markdown\"\n  | \"meta-row\"\n  | \"waveform\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"match-dialog\"\n  | \"media-capture\"\n  | \"media-grid\"\n  | \"language-switch\"\n  | \"media-gallery\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"opening-hours\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"photo-grid\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\n  | \"retro-tv\"\n  | \"radio-group\"\n  | \"router\"\n  | \"rail-nav\"\n  | \"recipes\"\n  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"service-card\"\n  | \"settings-layout\"\n  | \"account-menu\"\n  | \"showcase\"\n  | \"step-showcase\"\n  | \"site-footer\"\n  | \"sites\"\n  | \"skeleton\"\n  | \"skip-link\"\n  | \"slider\"\n  | \"slot-picker\"\n  | \"slot\"\n  | \"spinner\"\n  | \"sticky-action\"\n  | \"splash-handoff\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"step-progress\"\n  | \"stepper\"\n  | \"swipe-deck\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"tag-selector\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"update-prompt\"\n  | \"verified-badge\"\n  | \"vertical-video\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/**\n * Why a component is not on a platform — a decision, never a silence (the parity matrix of ui.krizaka.com/platforms):\n * - `gap` (✗): it belongs there and is not built yet; `issue` is the issue that tracks it (`krizaka/krizaka-ui#275`);\n * - `n/a`: it is not meant for that platform (a site's page block on a phone, a swipe on a desktop); `use` names the\n *   component that answers there, when one does.\n */\nexport type Absence =\n  | { readonly status: \"gap\"; readonly issue: string; readonly reason: string; readonly use?: undefined }\n  | { readonly status: \"n/a\"; readonly reason: string; readonly use?: ComponentName; readonly issue?: undefined };\n\n/**\n * Desktop is the Orazaka Mac app (Tauri 2: the system WebView renders the web components — ADR-002). `web`: the web\n * component runs there as it is; `desktop`: it also has a desktop form (a window's title bar, a denser layout…), said in\n * its documentation; otherwise the absence and why.\n */\nexport type DesktopSupport = \"web\" | \"desktop\" | Absence;\n\n/**\n * The three platforms of Krizaka UI — web · native (React Native, Expo) · desktop — for one component. The side a\n * component has is `platforms`; the side it lacks says why here: `native` is required for (and only for) a web-only\n * component, `web` for a native-only one; `desktop` always. `scripts/registry.test.mjs` fails on a missing decision.\n */\nexport interface Parity {\n  readonly web?: Absence;\n  readonly native?: Absence;\n  readonly desktop: DesktopSupport;\n}\n\n/**\n * `stable`: its API only changes in a major. `beta`: it may still change in a minor. `deprecated`: no product uses it and\n * no work plans to — it still works, says what replaces it, and goes in the major named by `deprecated.removedIn`.\n */\nexport type Status = \"stable\" | \"beta\" | \"deprecated\";\n\n/** What a deprecated component says (required when `status` is `deprecated`, absent otherwise). */\nexport interface Deprecation {\n  /** The version that deprecated it (`3.6.0`). */\n  readonly since: string;\n  /** The major that removes it (`4.0.0`). */\n  readonly removedIn: string;\n  /** What replaces it, when a component does. */\n  readonly use?: ComponentName;\n  /** Why it goes: no product uses it, no planned work needs it. */\n  readonly reason: string;\n}\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/** Why a reader needs a template: the seven intents the templates are grouped by (sidebar sub-headings, catalogue filter). */\nexport type TemplatePurpose = \"convince\" | \"explain\" | \"show\" | \"act\" | \"operate\" | \"converse\" | \"recover\";\n\n/** The groups of templates, in reading order: the title, and the one line that says when to come to that group. */\nexport const templatePurposes = {\n  convince: { title: \"Convince\", useWhen: \"You come here when a visitor must decide: a landing, a product, a price, a comparison, a proof.\" },\n  explain: { title: \"Explain\", useWhen: \"You come here when a reader must understand: how it works, a documentation hub or article, a changelog, a FAQ, a policy.\" },\n  show: { title: \"Show\", useWhen: \"You come here when the work itself is the argument: a gallery, a story, a case study, an object and its details.\" },\n  act: { title: \"Act\", useWhen: \"You come here when a person must do something once: reach the team, sign in or up, set up, pay.\" },\n  operate: { title: \"Operate\", useWhen: \"You come here when a person works every day: a dashboard, a console with a table, settings, an app shell.\" },\n  converse: { title: \"Converse\", useWhen: \"You come here when people talk: an inbox, a chat, comments, a notifications centre.\" },\n  recover: { title: \"Recover\", useWhen: \"You come here when the way is blocked: an empty list, an error, a missing page, maintenance, a product still being built.\" },\n} as const satisfies Record<TemplatePurpose, { readonly title: string; readonly useWhen: string }>;\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\ninterface ExampleBase {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** A plain example, or a template: a whole screen with its intent (`purpose`) and the user goal its layout serves (`why`). */\nexport type Example =\n  | (ExampleBase & { readonly template?: false; readonly purpose?: undefined; readonly why?: undefined })\n  | (ExampleBase & {\n      /**\n       * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its\n       * phone version thought out), copied as a starting point — at most 160 lines, listed on ui.krizaka.com/templates.\n       */\n      readonly template: true;\n      /** The intent that groups it: why you need this block. */\n      readonly purpose: TemplatePurpose;\n      /** Why this layout: the user goal it serves, in one sentence. */\n      readonly why: string;\n    });\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n  /** The React Native entry alone is deprecated while the web one stays (ADR-006 §7); a deprecated component says it once, above. */\n  readonly deprecated?: Deprecation;\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  /** Required for, and only for, a `deprecated` component. */\n  readonly deprecated?: Deprecation;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** The platforms it is not on, and why; and its desktop form (see `Parity`). */\n  readonly parity: Parity;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
     }
   ],
   "dependencies": [

package/registry/legal-page.json

@@ -142,7 +142,7 @@
     },
     {
       "path": "meta.ts",
-      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which ui.krizaka.com (apps/site) renders as\n// ui.krizaka.com/components/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"agenda\"\n  | \"account-settings\"\n  | \"drop-overlay\"\n  | \"upload-queue\"\n  | \"achievement\"\n  | \"anatomy-plate\"\n  | \"bird-plate\"\n  | \"taped-photo\"\n  | \"text-style\"\n  | \"flock\"\n  | \"elephant\"\n  | \"footnote\"\n  | \"page-index\"\n  | \"chapter\"\n  | \"specimen-tag\"\n  | \"action-bar\"\n  | \"action-sheet\"\n  | \"activity-feed\"\n  | \"alert\"\n  | \"app-header\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"captcha\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"chat\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"chip-row\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"comparison-table\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cover-hero\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"description-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"docs-nav\"\n  | \"document-viewer\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"engine-flow\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"force-update-screen\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"genui\"\n  | \"glossary\"\n  | \"glossary-term\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"kpi-explained\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"maintenance-screen\"\n  | \"map\"\n  | \"markdown\"\n  | \"meta-row\"\n  | \"waveform\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"match-dialog\"\n  | \"media-capture\"\n  | \"media-grid\"\n  | \"language-switch\"\n  | \"media-gallery\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"opening-hours\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"photo-grid\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\n  | \"radio-group\"\n  | \"router\"\n  | \"rail-nav\"\n  | \"recipes\"\n  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"service-card\"\n  | \"settings-layout\"\n  | \"account-menu\"\n  | \"showcase\"\n  | \"step-showcase\"\n  | \"site-footer\"\n  | \"sites\"\n  | \"skeleton\"\n  | \"skip-link\"\n  | \"slider\"\n  | \"slot-picker\"\n  | \"slot\"\n  | \"spinner\"\n  | \"sticky-action\"\n  | \"splash-handoff\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"step-progress\"\n  | \"stepper\"\n  | \"swipe-deck\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"tag-selector\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"update-prompt\"\n  | \"verified-badge\"\n  | \"vertical-video\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/**\n * Why a component is not on a platform — a decision, never a silence (the parity matrix of ui.krizaka.com/platforms):\n * - `gap` (✗): it belongs there and is not built yet; `issue` is the issue that tracks it (`krizaka/krizaka-ui#275`);\n * - `n/a`: it is not meant for that platform (a site's page block on a phone, a swipe on a desktop); `use` names the\n *   component that answers there, when one does.\n */\nexport type Absence =\n  | { readonly status: \"gap\"; readonly issue: string; readonly reason: string; readonly use?: undefined }\n  | { readonly status: \"n/a\"; readonly reason: string; readonly use?: ComponentName; readonly issue?: undefined };\n\n/**\n * Desktop is the Orazaka Mac app (Tauri 2: the system WebView renders the web components — ADR-002). `web`: the web\n * component runs there as it is; `desktop`: it also has a desktop form (a window's title bar, a denser layout…), said in\n * its documentation; otherwise the absence and why.\n */\nexport type DesktopSupport = \"web\" | \"desktop\" | Absence;\n\n/**\n * The three platforms of Krizaka UI — web · native (React Native, Expo) · desktop — for one component. The side a\n * component has is `platforms`; the side it lacks says why here: `native` is required for (and only for) a web-only\n * component, `web` for a native-only one; `desktop` always. `scripts/registry.test.mjs` fails on a missing decision.\n */\nexport interface Parity {\n  readonly web?: Absence;\n  readonly native?: Absence;\n  readonly desktop: DesktopSupport;\n}\n\n/**\n * `stable`: its API only changes in a major. `beta`: it may still change in a minor. `deprecated`: no product uses it and\n * no work plans to — it still works, says what replaces it, and goes in the major named by `deprecated.removedIn`.\n */\nexport type Status = \"stable\" | \"beta\" | \"deprecated\";\n\n/** What a deprecated component says (required when `status` is `deprecated`, absent otherwise). */\nexport interface Deprecation {\n  /** The version that deprecated it (`3.6.0`). */\n  readonly since: string;\n  /** The major that removes it (`4.0.0`). */\n  readonly removedIn: string;\n  /** What replaces it, when a component does. */\n  readonly use?: ComponentName;\n  /** Why it goes: no product uses it, no planned work needs it. */\n  readonly reason: string;\n}\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/** Why a reader needs a template: the seven intents the templates are grouped by (sidebar sub-headings, catalogue filter). */\nexport type TemplatePurpose = \"convince\" | \"explain\" | \"show\" | \"act\" | \"operate\" | \"converse\" | \"recover\";\n\n/** The groups of templates, in reading order: the title, and the one line that says when to come to that group. */\nexport const templatePurposes = {\n  convince: { title: \"Convince\", useWhen: \"You come here when a visitor must decide: a landing, a product, a price, a comparison, a proof.\" },\n  explain: { title: \"Explain\", useWhen: \"You come here when a reader must understand: how it works, a documentation hub or article, a changelog, a FAQ, a policy.\" },\n  show: { title: \"Show\", useWhen: \"You come here when the work itself is the argument: a gallery, a story, a case study, an object and its details.\" },\n  act: { title: \"Act\", useWhen: \"You come here when a person must do something once: reach the team, sign in or up, set up, pay.\" },\n  operate: { title: \"Operate\", useWhen: \"You come here when a person works every day: a dashboard, a console with a table, settings, an app shell.\" },\n  converse: { title: \"Converse\", useWhen: \"You come here when people talk: an inbox, a chat, comments, a notifications centre.\" },\n  recover: { title: \"Recover\", useWhen: \"You come here when the way is blocked: an empty list, an error, a missing page, maintenance, a product still being built.\" },\n} as const satisfies Record<TemplatePurpose, { readonly title: string; readonly useWhen: string }>;\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\ninterface ExampleBase {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** A plain example, or a template: a whole screen with its intent (`purpose`) and the user goal its layout serves (`why`). */\nexport type Example =\n  | (ExampleBase & { readonly template?: false; readonly purpose?: undefined; readonly why?: undefined })\n  | (ExampleBase & {\n      /**\n       * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its\n       * phone version thought out), copied as a starting point — at most 160 lines, listed on ui.krizaka.com/templates.\n       */\n      readonly template: true;\n      /** The intent that groups it: why you need this block. */\n      readonly purpose: TemplatePurpose;\n      /** Why this layout: the user goal it serves, in one sentence. */\n      readonly why: string;\n    });\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  /** Required for, and only for, a `deprecated` component. */\n  readonly deprecated?: Deprecation;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** The platforms it is not on, and why; and its desktop form (see `Parity`). */\n  readonly parity: Parity;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which ui.krizaka.com (apps/site) renders as\n// ui.krizaka.com/components/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"notification-preferences\"\n  | \"quota-meter\"\n  | \"agenda\"\n  | \"account-settings\"\n  | \"drop-overlay\"\n  | \"upload-queue\"\n  | \"achievement\"\n  | \"anatomy-plate\"\n  | \"bird-plate\"\n  | \"taped-photo\"\n  | \"stuck\"\n  | \"doodle\"\n  | \"signature\"\n  | \"text-style\"\n  | \"flock\"\n  | \"elephant\"\n  | \"footnote\"\n  | \"page-index\"\n  | \"chapter\"\n  | \"specimen-tag\"\n  | \"action-bar\"\n  | \"action-sheet\"\n  | \"activity-feed\"\n  | \"alert\"\n  | \"app-header\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"captcha\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"chat\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"chip-row\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"comparison-table\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cover-hero\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"description-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"docs-nav\"\n  | \"document-viewer\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"engine-flow\"\n  | \"error-page\"\n  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"force-update-screen\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"genui\"\n  | \"glossary\"\n  | \"glossary-term\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"kpi-explained\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"maintenance-screen\"\n  | \"map\"\n  | \"markdown\"\n  | \"meta-row\"\n  | \"waveform\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"match-dialog\"\n  | \"media-capture\"\n  | \"media-grid\"\n  | \"language-switch\"\n  | \"media-gallery\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"opening-hours\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"photo-grid\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\n  | \"retro-tv\"\n  | \"radio-group\"\n  | \"router\"\n  | \"rail-nav\"\n  | \"recipes\"\n  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"service-card\"\n  | \"settings-layout\"\n  | \"account-menu\"\n  | \"showcase\"\n  | \"step-showcase\"\n  | \"site-footer\"\n  | \"sites\"\n  | \"skeleton\"\n  | \"skip-link\"\n  | \"slider\"\n  | \"slot-picker\"\n  | \"slot\"\n  | \"spinner\"\n  | \"sticky-action\"\n  | \"splash-handoff\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"step-progress\"\n  | \"stepper\"\n  | \"swipe-deck\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"tag-selector\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"update-prompt\"\n  | \"verified-badge\"\n  | \"vertical-video\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/**\n * Why a component is not on a platform — a decision, never a silence (the parity matrix of ui.krizaka.com/platforms):\n * - `gap` (✗): it belongs there and is not built yet; `issue` is the issue that tracks it (`krizaka/krizaka-ui#275`);\n * - `n/a`: it is not meant for that platform (a site's page block on a phone, a swipe on a desktop); `use` names the\n *   component that answers there, when one does.\n */\nexport type Absence =\n  | { readonly status: \"gap\"; readonly issue: string; readonly reason: string; readonly use?: undefined }\n  | { readonly status: \"n/a\"; readonly reason: string; readonly use?: ComponentName; readonly issue?: undefined };\n\n/**\n * Desktop is the Orazaka Mac app (Tauri 2: the system WebView renders the web components — ADR-002). `web`: the web\n * component runs there as it is; `desktop`: it also has a desktop form (a window's title bar, a denser layout…), said in\n * its documentation; otherwise the absence and why.\n */\nexport type DesktopSupport = \"web\" | \"desktop\" | Absence;\n\n/**\n * The three platforms of Krizaka UI — web · native (React Native, Expo) · desktop — for one component. The side a\n * component has is `platforms`; the side it lacks says why here: `native` is required for (and only for) a web-only\n * component, `web` for a native-only one; `desktop` always. `scripts/registry.test.mjs` fails on a missing decision.\n */\nexport interface Parity {\n  readonly web?: Absence;\n  readonly native?: Absence;\n  readonly desktop: DesktopSupport;\n}\n\n/**\n * `stable`: its API only changes in a major. `beta`: it may still change in a minor. `deprecated`: no product uses it and\n * no work plans to — it still works, says what replaces it, and goes in the major named by `deprecated.removedIn`.\n */\nexport type Status = \"stable\" | \"beta\" | \"deprecated\";\n\n/** What a deprecated component says (required when `status` is `deprecated`, absent otherwise). */\nexport interface Deprecation {\n  /** The version that deprecated it (`3.6.0`). */\n  readonly since: string;\n  /** The major that removes it (`4.0.0`). */\n  readonly removedIn: string;\n  /** What replaces it, when a component does. */\n  readonly use?: ComponentName;\n  /** Why it goes: no product uses it, no planned work needs it. */\n  readonly reason: string;\n}\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/** Why a reader needs a template: the seven intents the templates are grouped by (sidebar sub-headings, catalogue filter). */\nexport type TemplatePurpose = \"convince\" | \"explain\" | \"show\" | \"act\" | \"operate\" | \"converse\" | \"recover\";\n\n/** The groups of templates, in reading order: the title, and the one line that says when to come to that group. */\nexport const templatePurposes = {\n  convince: { title: \"Convince\", useWhen: \"You come here when a visitor must decide: a landing, a product, a price, a comparison, a proof.\" },\n  explain: { title: \"Explain\", useWhen: \"You come here when a reader must understand: how it works, a documentation hub or article, a changelog, a FAQ, a policy.\" },\n  show: { title: \"Show\", useWhen: \"You come here when the work itself is the argument: a gallery, a story, a case study, an object and its details.\" },\n  act: { title: \"Act\", useWhen: \"You come here when a person must do something once: reach the team, sign in or up, set up, pay.\" },\n  operate: { title: \"Operate\", useWhen: \"You come here when a person works every day: a dashboard, a console with a table, settings, an app shell.\" },\n  converse: { title: \"Converse\", useWhen: \"You come here when people talk: an inbox, a chat, comments, a notifications centre.\" },\n  recover: { title: \"Recover\", useWhen: \"You come here when the way is blocked: an empty list, an error, a missing page, maintenance, a product still being built.\" },\n} as const satisfies Record<TemplatePurpose, { readonly title: string; readonly useWhen: string }>;\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\ninterface ExampleBase {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** A plain example, or a template: a whole screen with its intent (`purpose`) and the user goal its layout serves (`why`). */\nexport type Example =\n  | (ExampleBase & { readonly template?: false; readonly purpose?: undefined; readonly why?: undefined })\n  | (ExampleBase & {\n      /**\n       * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its\n       * phone version thought out), copied as a starting point — at most 160 lines, listed on ui.krizaka.com/templates.\n       */\n      readonly template: true;\n      /** The intent that groups it: why you need this block. */\n      readonly purpose: TemplatePurpose;\n      /** Why this layout: the user goal it serves, in one sentence. */\n      readonly why: string;\n    });\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n  /** The React Native entry alone is deprecated while the web one stays (ADR-006 §7); a deprecated component says it once, above. */\n  readonly deprecated?: Deprecation;\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  /** Required for, and only for, a `deprecated` component. */\n  readonly deprecated?: Deprecation;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** The platforms it is not on, and why; and its desktop form (see `Parity`). */\n  readonly parity: Parity;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
     }
   ],
   "dependencies": [],