@krizaka/ui 3.29.0 → 3.31.0

package/registry/glow-card.json

@@ -2,8 +2,8 @@
   "name": "glow-card",
   "type": "primitive",
   "title": "Glow card",
-  "summary": "A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.",
-  "description": "A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.",
+  "summary": "A card ringed by the brand: its border is a still hairline of the brand gradient, a step brighter under the pointer or the focus, fuller on a featured card. Nothing follows the pointer, nothing turns (krizaka-ui#393).",
+  "description": "A card ringed by the brand: its border is a still hairline of the brand gradient, a step brighter under the pointer or the focus, fuller on a featured card. Nothing follows the pointer, nothing turns (krizaka-ui#393).",
   "status": "beta",
   "deprecated": null,
   "category": "layout",
@@ -32,24 +32,24 @@
       "use": "card"
     },
     {
-      "when": "Around content the reader studies (a form, a table): light that moves distracts."
+      "when": "Around content the reader studies (a form, a table): a coloured ring competes with it."
     }
   ],
   "bestPractices": [
     "One grid of glowing cards per page; `alive` on one card at most.",
-    "Make the whole card the link with `asChild` when it leads somewhere — the focus lights it like the pointer.",
+    "Make the whole card the link with `asChild` when it leads somewhere — the focus brightens its ring like the pointer.",
     "Colours come from the brand (`.brand-<id>`): never pass one."
   ],
   "accessibility": {
     "keyboard": [
       {
         "keys": "Tab",
-        "action": "Focusing the card (or a control inside it) lights its ring, as the pointer does."
+        "action": "Focusing the card (or a control inside it) brightens its ring, as the pointer does."
       }
     ],
     "notes": [
-      "Decorative light only (pseudo-elements): nothing is added to the accessibility tree; the card's semantics are yours.",
-      "Under `prefers-reduced-motion` the ring rests at a fixed angle — still lit on hover and focus, never turning.",
+      "A decorative ring only (a pseudo-element): nothing is added to the accessibility tree; the card's semantics are yours.",
+      "Nothing moves or turns, with or without `prefers-reduced-motion`; only the ring's opacity changes, in 150 ms.",
       "Its loops pause off screen and while the page settles (MotionObserver)."
     ]
   },
@@ -63,13 +63,13 @@
     "props": [
       {
         "component": "GlowCard",
-        "description": "A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours.",
+        "description": "A card ringed by the brand: a still hairline of its gradient, a step brighter under the pointer. Content is yours.",
         "props": [
           {
             "name": "alive",
             "type": "boolean",
             "default": "false",
-            "description": "The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.",
+            "description": "A featured card: the ring is fuller at rest. It never turns.",
             "required": false
           },
           {
@@ -83,7 +83,7 @@
             "name": "glow",
             "type": "\"both\" | \"border\" | \"spotlight\"",
             "default": "both",
-            "description": "What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.",
+            "description": "`border` (a still hairline ring of the brand gradient) or `both`. `spotlight` (the bloom under the pointer) is\ndeprecated since 3.31 (krizaka-ui#393) and draws nothing.",
             "required": false
           }
         ]
@@ -93,7 +93,7 @@
       {
         "name": "plans",
         "title": "Plans",
-        "description": "Three plans: the light follows the pointer across them; the featured one's ring turns at rest.",
+        "description": "Three plans: each ring brightens under the pointer; the featured one's ring is fuller at rest.",
         "path": "examples/glow-card/plans.tsx",
         "module": "@krizaka/ui/registry/examples/glow-card/plans",
         "code": "import { Button } from \"@krizaka/ui/button\";\nimport { GlowCard } from \"@krizaka/ui/glow-card\";\n\nconst plans = [\n  { name: \"Community\", price: \"Free\", line: \"Self-hosted, every feature.\", action: \"Start free\" },\n  { name: \"Team\", price: \"€19\", line: \"Shared workspaces and roles.\", action: \"Choose Team\", featured: true },\n  { name: \"Sovereign\", price: \"Custom\", line: \"Your servers, our support.\", action: \"Talk to us\" },\n];\n\n// Plans: move the pointer across them — the light follows, the ring brightens. The featured plan's ring turns at rest.\n// The columns follow the box they are in (a container query), not the screen: three side by side only when each has room\n// for its price and its button; the buttons span their card and stand on one line at the bottom.\nexport default function GlowCardPlans() {\n  return (\n    <div className=\"@container w-full max-w-3xl\">\n      <div className=\"grid gap-3 @lg:grid-cols-3\">\n        {plans.map((p) => (\n          <GlowCard key={p.name} alive={p.featured} className=\"flex min-w-0 flex-col gap-2 p-5\">\n            <h3 className=\"font-display text-base font-semibold text-fg\">{p.name}</h3>\n            <p className=\"font-display text-3xl font-bold tracking-tight text-fg\">{p.price}</p>\n            <p className=\"mb-3 text-sm text-fg-secondary\">{p.line}</p>\n            <Button variant={p.featured ? \"gradient\" : \"outline\"} size=\"sm\" className=\"mt-auto w-full\">\n              {p.action}\n            </Button>\n          </GlowCard>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
@@ -101,7 +101,7 @@
       {
         "name": "link-card",
         "title": "A card that is a link",
-        "description": "`asChild` on an `<a>`, `glow=\"border\"`: the focus lights the ring.",
+        "description": "`asChild` on an `<a>`, `glow=\"border\"`: the focus brightens the ring.",
         "path": "examples/glow-card/link-card.tsx",
         "module": "@krizaka/ui/registry/examples/glow-card/link-card",
         "code": "import { GlowCard } from \"@krizaka/ui/glow-card\";\n\n// `asChild`: the card is the link. The focus lights the ring as the pointer does — keyboard readers get the same answer.\nexport default function GlowCardLink() {\n  return (\n    <GlowCard asChild glow=\"border\" className=\"block max-w-sm no-underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\">\n      <a href=\"#docs\">\n        <span className=\"block font-display text-lg font-semibold text-fg\">Read the documentation</span>\n        <span className=\"mt-1 block text-sm text-fg-secondary\">Every component, its examples and its props — generated from the code.</span>\n      </a>\n    </GlowCard>\n  );\n}\n"
@@ -109,10 +109,10 @@
       {
         "name": "spotlight",
         "title": "Spotlight only",
-        "description": "`glow=\"spotlight\"`: the bloom alone, for a dense grid.",
+        "description": "`glow=\"spotlight\"` is deprecated (krizaka-ui#393): the bloom is retired, the card draws no ring.",
         "path": "examples/glow-card/spotlight.tsx",
         "module": "@krizaka/ui/registry/examples/glow-card/spotlight",
-        "code": "import { GlowCard } from \"@krizaka/ui/glow-card\";\n\n// `glow=\"spotlight\"`: only the bloom under the pointer, for a dense grid where rings would be too much.\nexport default function GlowCardSpotlight() {\n  return (\n    <div className=\"grid w-full max-w-lg grid-cols-2 gap-3\">\n      {[\"Tips\", \"Unlocks\", \"Auctions\", \"Challenges\"].map((name) => (\n        <GlowCard key={name} glow=\"spotlight\" className=\"p-4\">\n          <p className=\"font-semibold text-fg\">{name}</p>\n          <p className=\"text-xs text-fg-secondary\">90 % to the creator</p>\n        </GlowCard>\n      ))}\n    </div>\n  );\n}\n"
+        "code": "import { GlowCard } from \"@krizaka/ui/glow-card\";\n\n// `glow=\"spotlight\"` is deprecated (krizaka-ui#393): the bloom under the pointer is retired, so these cards draw no ring.\nexport default function GlowCardSpotlight() {\n  return (\n    <div className=\"grid w-full max-w-lg grid-cols-2 gap-3\">\n      {[\"Tips\", \"Unlocks\", \"Auctions\", \"Challenges\"].map((name) => (\n        <GlowCard key={name} glow=\"spotlight\" className=\"p-4\">\n          <p className=\"font-semibold text-fg\">{name}</p>\n          <p className=\"text-xs text-fg-secondary\">90 % to the creator</p>\n        </GlowCard>\n      ))}\n    </div>\n  );\n}\n"
       }
     ]
   },
@@ -120,7 +120,7 @@
   "files": [
     {
       "path": "glow-card/glow-card.tsx",
-      "content": "// Client (the pointer). A card that answers light: a soft bloom of the brand accent follows the pointer across it, and\n// its border is a ring of the brand gradient that turns slowly and brightens under the pointer or the focus. Composited\n// properties only (CSS variables, opacity); no animation frame — the pointer writes two variables. Under reduced motion\n// the ring rests at a fixed angle and the light stays where it is: a designed still frame, not a switched-off one.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type GlowCardProps = React.ComponentProps<\"div\"> & {\n  /**\n   * What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.\n   * @default \"both\"\n   */\n  glow?: \"border\" | \"spotlight\" | \"both\";\n  /** Renders your element (a link, an article) with the card's look and behaviour. */\n  asChild?: boolean;\n  /**\n   * The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.\n   * @default false\n   */\n  alive?: boolean;\n};\n\n/** A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours. */\nexport function GlowCard({ glow = \"both\", asChild, alive, className, onPointerMove, ...props }: GlowCardProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return (\n    <Comp\n      data-glow={glow}\n      data-alive={alive ? \"\" : undefined}\n      className={cn(\"kz-glow kz-loop relative isolate rounded-2xl border border-border-default bg-surface-1 p-6\", className)}\n      onPointerMove={(e: React.PointerEvent<HTMLDivElement>) => {\n        const box = e.currentTarget.getBoundingClientRect();\n        e.currentTarget.style.setProperty(\"--kz-glow-x\", `${e.clientX - box.left}px`);\n        e.currentTarget.style.setProperty(\"--kz-glow-y\", `${e.clientY - box.top}px`);\n        onPointerMove?.(e);\n      }}\n      {...props}\n    />\n  );\n}\n"
+      "content": "// Client (the pointer). A card that answers light: a soft bloom of the brand accent follows the pointer across it, and\n// its border is a ring of the brand gradient that turns slowly and brightens under the pointer or the focus. Composited\n// properties only (CSS variables, opacity); no animation frame — the pointer writes two variables. Under reduced motion\n// the ring rests at a fixed angle and the light stays where it is: a designed still frame, not a switched-off one.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type GlowCardProps = React.ComponentProps<\"div\"> & {\n  /**\n   * `border` (a still hairline ring of the brand gradient) or `both`. `spotlight` (the bloom under the pointer) is\n   * deprecated since 3.31 (krizaka-ui#393) and draws nothing.\n   * @default \"both\"\n   */\n  glow?: \"border\" | \"spotlight\" | \"both\";\n  /** Renders your element (a link, an article) with the card's look and behaviour. */\n  asChild?: boolean;\n  /**\n   * A featured card: the ring is fuller at rest. It never turns.\n   * @default false\n   */\n  alive?: boolean;\n};\n\n/** A card ringed by the brand: a still hairline of its gradient, a step brighter under the pointer. Content is yours. */\nexport function GlowCard({ glow = \"both\", asChild, alive, className, ...props }: GlowCardProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return (\n    <Comp\n      data-glow={glow}\n      data-alive={alive ? \"\" : undefined}\n      className={cn(\"kz-glow relative isolate rounded-2xl border border-border-default bg-surface-1 p-6\", className)}\n      {...props}\n    />\n  );\n}\n"
     },
     {
       "path": "glow-card/index.ts",
@@ -128,7 +128,7 @@
     },
     {
       "path": "glow-card/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Glow card\",\n  summary:\n    \"A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.\",\n  status: \"beta\",\n  category: \"layout\",\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.\", use: \"card\" }, desktop: { status: \"n/a\", reason: \"A public site's page, not a window of the Mac app.\" } },\n  whenToUse: [\n    \"Cards that invite a choice: plans, products, the entry points of a landing page.\",\n    \"One featured card among others (`alive`): its ring turns at rest.\",\n  ],\n  whenNotToUse: [\n    { when: \"For the cards of an app's lists and feeds: a calm card reads better there.\", use: \"card\" },\n    { when: \"Around content the reader studies (a form, a table): light that moves distracts.\" },\n  ],\n  bestPractices: [\n    \"One grid of glowing cards per page; `alive` on one card at most.\",\n    \"Make the whole card the link with `asChild` when it leads somewhere — the focus lights it like the pointer.\",\n    \"Colours come from the brand (`.brand-<id>`): never pass one.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Tab\", action: \"Focusing the card (or a control inside it) lights its ring, as the pointer does.\" }],\n    notes: [\n      \"Decorative light only (pseudo-elements): nothing is added to the accessibility tree; the card's semantics are yours.\",\n      \"Under `prefers-reduced-motion` the ring rests at a fixed angle — still lit on hover and focus, never turning.\",\n      \"Its loops pause off screen and while the page settles (MotionObserver).\",\n    ],\n  },\n  related: [\"card\", \"button\"],\n  web: {\n    imports: [\"GlowCard\"],\n    examples: [\n      { name: \"plans\", title: \"Plans\", description: \"Three plans: the light follows the pointer across them; the featured one's ring turns at rest.\" },\n      { name: \"link-card\", title: \"A card that is a link\", description: \"`asChild` on an `<a>`, `glow=\\\"border\\\"`: the focus lights the ring.\" },\n      { name: \"spotlight\", title: \"Spotlight only\", description: \"`glow=\\\"spotlight\\\"`: the bloom alone, for a dense grid.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Glow card\",\n  summary:\n    \"A card ringed by the brand: its border is a still hairline of the brand gradient, a step brighter under the pointer or the focus, fuller on a featured card. Nothing follows the pointer, nothing turns (krizaka-ui#393).\",\n  status: \"beta\",\n  category: \"layout\",\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.\", use: \"card\" }, desktop: { status: \"n/a\", reason: \"A public site's page, not a window of the Mac app.\" } },\n  whenToUse: [\n    \"Cards that invite a choice: plans, products, the entry points of a landing page.\",\n    \"One featured card among others (`alive`): its ring turns at rest.\",\n  ],\n  whenNotToUse: [\n    { when: \"For the cards of an app's lists and feeds: a calm card reads better there.\", use: \"card\" },\n    { when: \"Around content the reader studies (a form, a table): a coloured ring competes with it.\" },\n  ],\n  bestPractices: [\n    \"One grid of glowing cards per page; `alive` on one card at most.\",\n    \"Make the whole card the link with `asChild` when it leads somewhere — the focus brightens its ring like the pointer.\",\n    \"Colours come from the brand (`.brand-<id>`): never pass one.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Tab\", action: \"Focusing the card (or a control inside it) brightens its ring, as the pointer does.\" }],\n    notes: [\n      \"A decorative ring only (a pseudo-element): nothing is added to the accessibility tree; the card's semantics are yours.\",\n      \"Nothing moves or turns, with or without `prefers-reduced-motion`; only the ring's opacity changes, in 150 ms.\",\n      \"Its loops pause off screen and while the page settles (MotionObserver).\",\n    ],\n  },\n  related: [\"card\", \"button\"],\n  web: {\n    imports: [\"GlowCard\"],\n    examples: [\n      { name: \"plans\", title: \"Plans\", description: \"Three plans: each ring brightens under the pointer; the featured one's ring is fuller at rest.\" },\n      { name: \"link-card\", title: \"A card that is a link\", description: \"`asChild` on an `<a>`, `glow=\\\"border\\\"`: the focus brightens the ring.\" },\n      { name: \"spotlight\", title: \"Spotlight only\", description: \"`glow=\\\"spotlight\\\"` is deprecated (krizaka-ui#393): the bloom is retired, the card draws no ring.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "meta.ts",
@@ -148,13 +148,13 @@
   "props": [
     {
       "component": "GlowCard",
-      "description": "A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours.",
+      "description": "A card ringed by the brand: a still hairline of its gradient, a step brighter under the pointer. Content is yours.",
       "props": [
         {
           "name": "alive",
           "type": "boolean",
           "default": "false",
-          "description": "The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.",
+          "description": "A featured card: the ring is fuller at rest. It never turns.",
           "required": false
         },
         {
@@ -168,7 +168,7 @@
           "name": "glow",
           "type": "\"both\" | \"border\" | \"spotlight\"",
           "default": "both",
-          "description": "What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.",
+          "description": "`border` (a still hairline ring of the brand gradient) or `both`. `spotlight` (the bloom under the pointer) is\ndeprecated since 3.31 (krizaka-ui#393) and draws nothing.",
           "required": false
         }
       ]

package/registry/index.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.29.0",
+  "version": "3.31.0",
   "templatePurposes": {
     "convince": {
       "title": "Convince",
@@ -719,7 +719,7 @@
         }
       },
       "examples": {
-        "web": 5,
+        "web": 4,
         "native": 0
       },
       "dependencies": [],
@@ -860,8 +860,8 @@
       "name": "button",
       "type": "primitive",
       "title": "Button",
-      "summary": "The action: six looks, three sizes, three shapes (rounded, pill, the Krizaka cut corners) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.",
-      "description": "The action: six looks, three sizes, three shapes (rounded, pill, the Krizaka cut corners) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.",
+      "summary": "The action: six looks, three sizes, two shapes (an 8 px radius, the pill) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.",
+      "description": "The action: six looks, three sizes, two shapes (an 8 px radius, the pill) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.",
       "status": "stable",
       "category": "actions",
       "platforms": "both",
@@ -959,8 +959,8 @@
       "name": "card-grid",
       "type": "primitive",
       "title": "Card grid",
-      "summary": "A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal and the light that follows the pointer.",
-      "description": "A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal and the light that follows the pointer.",
+      "summary": "A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal; each card keeps its own quiet hover.",
+      "description": "A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal; each card keeps its own quiet hover.",
       "status": "beta",
       "category": "blocks",
       "platforms": "web",
@@ -985,8 +985,7 @@
       "dependencies": [],
       "registryDependencies": [
         "cn",
-        "link-card",
-        "pointer-light"
+        "link-card"
       ]
     },
     {
@@ -2429,8 +2428,8 @@
       "name": "glow-card",
       "type": "primitive",
       "title": "Glow card",
-      "summary": "A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.",
-      "description": "A card lit by the brand: a bloom of the accent follows the pointer across it, and its border is a ring of the brand gradient that turns and brightens under the pointer or the focus.",
+      "summary": "A card ringed by the brand: its border is a still hairline of the brand gradient, a step brighter under the pointer or the focus, fuller on a featured card. Nothing follows the pointer, nothing turns (krizaka-ui#393).",
+      "description": "A card ringed by the brand: its border is a still hairline of the brand gradient, a step brighter under the pointer or the focus, fuller on a featured card. Nothing follows the pointer, nothing turns (krizaka-ui#393).",
       "status": "beta",
       "category": "layout",
       "platforms": "web",
@@ -2839,8 +2838,8 @@
       "name": "link-card",
       "type": "primitive",
       "title": "Link card",
-      "summary": "An entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page, lifting and lighting under the pointer or the focus.",
-      "description": "An entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page, lifting and lighting under the pointer or the focus.",
+      "summary": "An entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page; under the pointer its surface and hairline go one step up, nothing moves.",
+      "description": "An entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page; under the pointer its surface and hairline go one step up, nothing moves.",
       "status": "beta",
       "category": "blocks",
       "platforms": "web",
@@ -2859,7 +2858,7 @@
         }
       },
       "examples": {
-        "web": 5,
+        "web": 4,
         "native": 0
       },
       "dependencies": [],
@@ -3014,11 +3013,11 @@
         }
       },
       "examples": {
-        "web": 4,
+        "web": 5,
         "native": 2
       },
       "dependencies": [
-        "@krizaka/tokens@^3.29.0",
+        "@krizaka/tokens@^3.31.0",
         "@protomaps/basemaps@5.7.2",
         "tailwind-variants@^3.3.1"
       ],
@@ -3457,7 +3456,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.29.0",
+        "@krizaka/tokens@^3.31.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],
@@ -3778,9 +3777,9 @@
       "name": "pointer-light",
       "type": "primitive",
       "title": "Pointer light",
-      "summary": "The light that follows the pointer over a group of cards: one passive listener writes the pointer's position into the card it is over, the card's CSS draws the light.",
-      "description": "The light that follows the pointer over a group of cards: one passive listener writes the pointer's position into the card it is over, the card's CSS draws the light.",
-      "status": "beta",
+      "summary": "Deprecated (krizaka-ui#393): it drew a light that followed the pointer over cards. It now does nothing — the cards have one quiet hover of their own.",
+      "description": "Deprecated (krizaka-ui#393): it drew a light that followed the pointer over cards. It now does nothing — the cards have one quiet hover of their own.",
+      "status": "deprecated",
       "category": "blocks",
       "platforms": "web",
       "parity": {
@@ -4089,7 +4088,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.29.0",
+        "@krizaka/tokens@^3.31.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],
@@ -4432,7 +4431,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.29.0",
+        "@krizaka/tokens@^3.31.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],

package/registry/iso.json

@@ -49,7 +49,7 @@
     "keyboard": [
       {
         "keys": "Tab",
-        "action": "Visits each named object of the scene: it lifts and shows its label, as under the pointer."
+        "action": "Visits each named object of the scene: it brightens and shows its label, as under the pointer."
       }
     ],
     "notes": [
@@ -434,7 +434,7 @@
             "name": "label",
             "type": "string",
             "default": null,
-            "description": "The name shown when the pointer (or the focus) lifts the object — passed translated. It also makes it focusable.",
+            "description": "The name shown when the pointer (or the focus) is on the object — passed translated. It also makes it focusable.",
             "required": false
           },
           {
@@ -655,7 +655,7 @@
             "name": "label",
             "type": "string",
             "default": null,
-            "description": "The name shown when the pointer (or the focus) lifts the object — passed translated. It also makes it focusable.",
+            "description": "The name shown when the pointer (or the focus) is on the object — passed translated. It also makes it focusable.",
             "required": false
           },
           {
@@ -733,11 +733,11 @@
     },
     {
       "path": "iso/iso.tsx",
-      "content": "// Server-safe: no state, no effect, no context — static SVG computed at render time, animated by motion.css (`kz-iso-*`,\n// shipped by the preset), so a hero costs no client JavaScript. `useId` only (allowed in Server Components): every scene\n// owns its gradient and mask ids. Classes are joined with `cx`: no tailwind-variants in this entry.\nimport * as React from \"react\";\n\nimport { cx as cn } from \"../cx\";\nimport { cutRect, depthOf, type Face, hexagon, isoCircle, onCircle, pathOf, prism, project, pts, type Vec2, viewBoxOf } from \"./geometry\";\n\n/** How a solid is lit: the page's surfaces (`base`), the brand accent, accent → accent-2, or frosted glass. */\nexport type IsoMaterial = \"base\" | \"accent\" | \"accent2\" | \"glass\";\n/** The footprint of a prism: a hexagon (the marks), a rectangle with 45° cut corners (the icons) or a plain one. */\nexport type IsoShape = \"hex\" | \"cut\" | \"rect\";\n/** A pictogram drawn on the top of a tile. */\nexport type IsoGlyph = \"dots\" | \"lines\" | \"play\" | \"coin\" | \"lock\" | \"arrow\" | \"flag\" | \"heart\" | \"node\" | \"none\";\n\ntype Style = React.CSSProperties & Record<`--${string}`, string | number>;\n\nconst uid = (raw: string) => raw.replace(/[^a-zA-Z0-9_-]/g, \"\");\nconst footprint = (shape: IsoShape, [x, y]: Vec2, size: number | Vec2, cut?: number): Vec2[] => {\n  const [w, d] = typeof size === \"number\" ? [size, size] : size;\n  if (shape === \"hex\") return hexagon(x, y, w / 2);\n  return cutRect(x, y, w, d, shape === \"rect\" ? 0 : (cut ?? Math.min(w, d) / 6));\n};\n\nexport interface IsoSceneProps extends Omit<React.ComponentProps<\"svg\">, \"children\"> {\n  /** The accessible name of the scene (\"A server stack under a dome\") — passed translated. Without it the scene is decorative. */\n  label?: string;\n  /** A longer text version of what the scene shows, read by assistive technology. */\n  description?: string;\n  /**\n   * Half the size of the floor, in world units: what the camera frames.\n   * @default 240\n   */\n  extent?: number;\n  /**\n   * Height above the floor the camera keeps in view, in world units.\n   * @default 260\n   */\n  top?: number;\n  /**\n   * The perspective grid on the floor, fading into the page.\n   * @default true\n   */\n  grid?: boolean;\n  /**\n   * The spacing of the grid's lines.\n   * @default 40\n   */\n  step?: number;\n  /**\n   * Motion (entrance, breathing, flow, float). `false` draws the still frame — the one prefers-reduced-motion shows.\n   * @default true\n   */\n  animated?: boolean;\n  /** The objects, painted in order: put the farthest first (or use `IsoHub`, which sorts them). */\n  children?: React.ReactNode;\n}\n\n/**\n * The stage: an isometric camera over a perspective grid that fades into the page. Its animations pause off screen and\n * wait for the page to settle (MotionObserver); everything stops under prefers-reduced-motion.\n */\nexport function IsoScene({ label, description, extent = 240, top = 260, grid = true, step = 40, animated = true, viewBox, className, children, ...props }: IsoSceneProps) {\n  const id = uid(React.useId());\n  const lines: string[] = [];\n  for (let v = -extent; v <= extent; v += step) {\n    lines.push(pathOf([project([v, -extent, 0]), project([v, extent, 0])]), pathOf([project([-extent, v, 0]), project([extent, v, 0])]));\n  }\n  const fade = isoCircle(0, 0, 0, extent * 0.9);\n  const named = label ? { role: \"group\" as const, \"aria-label\": label } : { \"aria-hidden\": true as const };\n  return (\n    <svg\n      viewBox={viewBox ?? viewBoxOf(extent, top)}\n      focusable=\"false\"\n      data-motion-scope=\"\"\n      data-animated={animated}\n      className={cn(\"kz-iso\", className)}\n      {...named}\n      {...props}\n    >\n      {description && <desc>{description}</desc>}\n      {grid && (\n        <>\n          <defs>\n            <radialGradient id={`${id}-fade`}>\n              <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"1\" />\n              <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"0\" />\n            </radialGradient>\n            <mask id={`${id}-floor`}>\n              <ellipse cx={fade.cx} cy={fade.cy} rx={fade.rx} ry={fade.ry} fill={`url(#${id}-fade)`} />\n            </mask>\n          </defs>\n          <path d={lines.join(\"\")} className=\"kz-iso-floor\" mask={`url(#${id}-floor)`} />\n        </>\n      )}\n      {children}\n    </svg>\n  );\n}\n\n/** A loop only when the scene moves: `animated={false}` on the item keeps it still. */\nconst loop = (animated: boolean | undefined) => (animated === false ? undefined : \"kz-loop\");\n\ninterface ItemProps {\n  /** The name shown when the pointer (or the focus) lifts the object — passed translated. It also makes it focusable. */\n  label?: string;\n  /**\n   * Its rank in the entrance: objects rise into place one after the other.\n   * @default 0\n   */\n  index?: number;\n  /**\n   * Motion: entrance and loops. `false` keeps this object still.\n   * @default true\n   */\n  animated?: boolean;\n  /** Extra classes on the object's group. */\n  className?: string;\n}\n\n/** An object of the scene: rises at the entrance, lifts under the pointer or the focus and shows its label. */\nfunction Item({ label, index = 0, animated, anchor, align = \"center\", className, children }: ItemProps & { anchor: Vec2; align?: \"center\" | \"start\"; children: React.ReactNode }) {\n  const named = label ? { role: \"img\" as const, \"aria-label\": label, tabIndex: 0 } : {};\n  return (\n    <g className={cn(\"kz-iso-item\", className)} style={{ \"--kz-iso-i\": index } as Style} {...named}>\n      <g className={cn(\"kz-iso-lift\", animated !== false && \"kz-iso-rise\")}>{children}</g>\n      {label && <Tip at={anchor} text={label} align={align} />}\n    </g>\n  );\n}\n\n/**\n * A label in a pill (decorative: the object carries the name). `center`: above the point (a floating tile). `start`:\n * beside it, to the right, with a leader — for a stage of a stack, whose upper stages would cover a label above it.\n */\nfunction Tip({ at: [x, y], text, align }: { at: Vec2; text: string; align: \"center\" | \"start\" }) {\n  const w = Math.max(40, text.length * 6.6 + 20);\n  if (align === \"start\") {\n    return (\n      <g className=\"kz-iso-tip\" aria-hidden>\n        <path d={`M${Math.round(x + 3)} ${Math.round(y)}h18`} className=\"kz-iso-leader\" />\n        <rect x={x + 21} y={y - 11} width={w} height={22} rx={7} strokeWidth={1} />\n        <text x={x + 21 + w / 2} y={y + 4} textAnchor=\"middle\">\n          {text}\n        </text>\n      </g>\n    );\n  }\n  return (\n    <g className=\"kz-iso-tip\" aria-hidden>\n      <rect x={x - w / 2} y={y - 34} width={w} height={22} rx={7} strokeWidth={1} />\n      <text x={x} y={y - 19} textAnchor=\"middle\">\n        {text}\n      </text>\n    </g>\n  );\n}\n\nfunction Solid({ faces, material }: { faces: Face[]; material: IsoMaterial }) {\n  return (\n    <g className={\"kz-iso-\" + material}>\n      {faces.map((face, i) => (\n        <polygon key={i} points={face.points} className={\"kz-iso-face kz-iso-\" + face.kind} />\n      ))}\n    </g>\n  );\n}\n\nexport interface IsoPrismProps extends ItemProps {\n  /**\n   * The centre of its footprint on the floor plan (x, y).\n   * @default [0, 0]\n   */\n  at?: Vec2;\n  /**\n   * The height of its base above the floor.\n   * @default 0\n   */\n  z?: number;\n  /** Its height. */\n  height: number;\n  /**\n   * hex · cut (45° cut corners) · rect.\n   * @default \"cut\"\n   */\n  shape?: IsoShape;\n  /**\n   * Its width (a number: square or hexagon's diameter) or width × depth.\n   * @default 120\n   */\n  size?: number | Vec2;\n  /** The size of the 45° cut (`shape=\"cut\"`); a sixth of the smaller side by default. */\n  cut?: number;\n  /**\n   * How it is lit.\n   * @default \"base\"\n   */\n  material?: IsoMaterial;\n  /** A dotted light strip around its front (the LEDs of a server), blinking slowly. */\n  strip?: boolean;\n}\n\n/** A vertical prism — hexagonal, cut-corner or rectangular — that stacks with others on `z`. */\nexport function IsoPrism({ at = [0, 0], z = 0, height, shape = \"cut\", size = 120, cut, material = \"base\", strip, animated, ...item }: IsoPrismProps) {\n  const foot = footprint(shape, at, size, cut);\n  const [w, d] = typeof size === \"number\" ? [size, size] : size;\n  return (\n    <Item {...item} animated={animated} anchor={project(shape === \"hex\" ? [at[0] + w / 4, at[1] - w * 0.433, z + height / 2] : [at[0] + w / 2, at[1] - d / 2, z + height / 2])} align=\"start\">\n      <Solid faces={prism(foot, z, height)} material={material} />\n      {strip && <Strip at={at} w={w} d={d} c={shape === \"rect\" ? 0 : (cut ?? Math.min(w, d) / 6)} z={z + height / 2 + 1} animated={animated} hex={shape === \"hex\"} />}\n    </Item>\n  );\n}\n\nfunction Strip({ at: [cx, cy], w, d, c, z, hex, animated }: { at: Vec2; w: number; d: number; c: number; z: number; hex: boolean; animated?: boolean }) {\n  const front: Vec2[] = hex\n    ? [0, 1, 2].map((k) => onCircle(w / 2, k * 60 - 60, [cx, cy]))\n    : [[cx + w / 2, cy - d / 2 + c], [cx + w / 2, cy + d / 2 - c], [cx + w / 2 - c, cy + d / 2], [cx - w / 2 + c, cy + d / 2]];\n  return <polyline points={pts(front.map(([x, y]) => project([x, y, z])))} className={cn(\"kz-iso-strip\", loop(animated))} />;\n}\n\n/** One stage of an `IsoStack`. */\nexport interface IsoLayer {\n  /** The stage's name, shown when it is lifted — passed translated. */\n  label?: string;\n  /**\n   * Its height.\n   * @default 22\n   */\n  height?: number;\n  /**\n   * How it is lit.\n   * @default \"base\"\n   */\n  material?: IsoMaterial;\n}\n\nexport interface IsoStackProps {\n  /** The stages, bottom first; they stack one after the other at the entrance. */\n  layers: readonly IsoLayer[];\n  /**\n   * The centre of the stack on the floor plan.\n   * @default [0, 0]\n   */\n  at?: Vec2;\n  /**\n   * The footprint of the stages.\n   * @default \"cut\"\n   */\n  shape?: IsoShape;\n  /**\n   * The width of the stages.\n   * @default 120\n   */\n  size?: number;\n  /**\n   * The space between two stages.\n   * @default 4\n   */\n  gap?: number;\n  /**\n   * A hexagonal plinth under the stack.\n   * @default true\n   */\n  plinth?: boolean;\n  /**\n   * A lit hexagonal core on top, its node glowing; a string names it.\n   * @default true\n   */\n  core?: boolean | string;\n  /**\n   * The rank of the first stage in the scene's entrance.\n   * @default 0\n   */\n  index?: number;\n  /**\n   * Motion: entrance and loops. `false` keeps the stack still.\n   * @default true\n   */\n  animated?: boolean;\n}\n\n/** A stack of stages on a plinth with a lit core on top — a server, a model, a pile of layers — driven by data. */\nexport function IsoStack({ layers, at = [0, 0], shape = \"cut\", size = 120, gap = 4, plinth = true, core = true, index = 0, animated }: IsoStackProps) {\n  const base = plinth ? 12 + gap : 0;\n  const heights = layers.map((layer) => layer.height ?? 22);\n  const stages = layers.map((layer, k) => ({ ...layer, k, height: heights[k]!, z: base + heights.slice(0, k).reduce((sum, h) => sum + h + gap, 0) }));\n  const top = base + heights.reduce((sum, h) => sum + h + gap, 0);\n  return (\n    <g>\n      {plinth && <IsoPrism at={at} height={12} shape=\"hex\" size={size * 1.86} index={index} animated={animated} />}\n      {stages.map((s) => (\n        <IsoPrism\n          key={s.k}\n          at={at}\n          z={s.z}\n          height={s.height}\n          shape={shape}\n          size={size}\n          material={s.material ?? \"base\"}\n          strip={(s.material ?? \"base\") === \"base\"}\n          label={s.label}\n          index={index + 1 + s.k}\n          animated={animated}\n        />\n      ))}\n      {core && (\n        <>\n          <IsoPrism at={at} z={top} height={16} shape=\"hex\" size={size / 2} material=\"accent\" index={index + 1 + stages.length} animated={animated} label={typeof core === \"string\" ? core : undefined} />\n          <IsoNode at={at} z={top + 22} index={index + 2 + stages.length} animated={animated} />\n        </>\n      )}\n    </g>\n  );\n}\n\nexport interface IsoNodeProps {\n  /**\n   * Where, on the floor plan.\n   * @default [0, 0]\n   */\n  at?: Vec2;\n  /**\n   * Its height.\n   * @default 0\n   */\n  z?: number;\n  /**\n   * The radius of the node.\n   * @default 7\n   */\n  r?: number;\n  /**\n   * The radius of its glow (0: none).\n   * @default 70\n   */\n  glow?: number;\n  /**\n   * Its rank in the entrance.\n   * @default 0\n   */\n  index?: number;\n  /**\n   * Motion: the glow breathes. `false` keeps it still.\n   * @default true\n   */\n  animated?: boolean;\n}\n\n/** The Krizaka node: a point of light in the accent, breathing in its glow. */\nexport function IsoNode({ at = [0, 0], z = 0, r = 7, glow = 70, index = 0, animated }: IsoNodeProps) {\n  const id = uid(React.useId());\n  const [x, y] = project([at[0], at[1], z]);\n  return (\n    <g className={cn(animated !== false && \"kz-iso-rise\")} style={{ \"--kz-iso-i\": index } as Style}>\n      {glow > 0 && (\n        <>\n          <defs>\n            <radialGradient id={`${id}-glow`}>\n              <stop offset=\"0%\" className=\"kz-iso-glow-stop\" stopOpacity=\"0.55\" />\n              <stop offset=\"100%\" className=\"kz-iso-glow-stop\" stopOpacity=\"0\" />\n            </radialGradient>\n          </defs>\n          <circle cx={x} cy={y} r={glow} fill={`url(#${id}-glow)`} className={cn(\"kz-iso-breathe\", loop(animated))} />\n        </>\n      )}\n      <circle cx={x} cy={y} r={r} className={cn(\"kz-iso-node kz-iso-breathe\", loop(animated))} />\n    </g>\n  );\n}\n\nexport interface IsoDomeProps {\n  /**\n   * Its centre on the floor plan.\n   * @default [0, 0]\n   */\n  at?: Vec2;\n  /**\n   * The radius of its rim on the floor.\n   * @default 158\n   */\n  radius?: number;\n  /**\n   * Its height.\n   * @default 250\n   */\n  height?: number;\n  /** Its name (\"Your infrastructure\") — passed translated; shown at the top of the dome, always. */\n  label?: string;\n  /**\n   * Motion: a sheen travels along the dome. `false` keeps it still.\n   * @default true\n   */\n  animated?: boolean;\n}\n\n/**\n * A dome of light over what it protects: a rim on the floor, a glass arc, a sheen that travels along it. Draw its rim\n * before the objects it covers and the dome after them (`part=\"rim\"`, `part=\"arc\"`), or let `IsoHub` do it.\n */\nexport function IsoDome({ at = [0, 0], radius = 158, height = 250, label, animated, part = \"both\" }: IsoDomeProps & {\n  /**\n   * `rim` (the floor ellipse, drawn first), `arc` (the glass, drawn last) or `both`.\n   * @default \"both\"\n   */\n  part?: \"rim\" | \"arc\" | \"both\";\n}) {\n  const e = isoCircle(at[0], at[1], 0, radius);\n  const arc = `M${e.cx - e.rx} ${e.cy} A ${e.rx} ${height} 0 0 1 ${e.cx + e.rx} ${e.cy}`;\n  return (\n    <>\n      {part !== \"arc\" && <ellipse cx={e.cx} cy={e.cy} rx={e.rx} ry={e.ry} className=\"kz-iso-rim\" />}\n      {part !== \"rim\" && (\n        <g>\n          <path d={arc} className=\"kz-iso-dome\" />\n          <path d={arc} className={cn(\"kz-iso-dome-sheen\", loop(animated))} pathLength={440} />\n          {label && <IsoLabel at={at} z={height + 10} text={label} />}\n        </g>\n      )}\n    </>\n  );\n}\n\nexport interface IsoTileProps extends ItemProps {\n  /** Its centre on the floor plan. */\n  at: Vec2;\n  /**\n   * The height it floats at.\n   * @default 90\n   */\n  z?: number;\n  /**\n   * Width × depth.\n   * @default [76, 52]\n   */\n  size?: Vec2;\n  /**\n   * The pictogram on its top.\n   * @default \"none\"\n   */\n  glyph?: IsoGlyph;\n  /**\n   * How it is lit.\n   * @default \"accent\"\n   */\n  material?: IsoMaterial;\n  /**\n   * It floats gently.\n   * @default true\n   */\n  float?: boolean;\n}\n\n/** A satellite: a thin cut-corner tile that floats beside the hero object, a pictogram on its top. */\nexport function IsoTile({ at, z = 90, size = [76, 52], glyph = \"none\", material = \"accent\", float = true, animated, ...item }: IsoTileProps) {\n  const [w, d] = size;\n  const top = z + 9;\n  const shadow = isoCircle(at[0], at[1], 0, Math.min(w, d) * 0.55);\n  const foot = project([at[0], at[1], 0]);\n  return (\n    <Item {...item} animated={animated} anchor={project([at[0], at[1], top])}>\n      {z > 0 && (\n        <>\n          <ellipse cx={shadow.cx} cy={shadow.cy} rx={shadow.rx} ry={shadow.ry} className=\"kz-iso-shadow\" />\n          <path d={pathOf([foot, project([at[0], at[1], z])])} className=\"kz-iso-tether\" />\n        </>\n      )}\n      <g className={cn(float && \"kz-iso-float\", float && loop(animated))}>\n        <Solid faces={prism(cutRect(at[0], at[1], w, d, Math.min(w, d) / 4), z, 9)} material={material} />\n        <Glyph glyph={glyph} at={at} z={top} s={Math.min(w, d) * 0.3} />\n      </g>\n    </Item>\n  );\n}\n\nfunction Glyph({ glyph, at: [cx, cy], z, s }: { glyph: IsoGlyph; at: Vec2; z: number; s: number }) {\n  const p = (u: number, v: number) => project([cx + u * s, cy + v * s, z]);\n  const line = (points: [number, number][], close = false) => <path d={pathOf(points.map(([u, v]) => p(u, v)), close)} className=\"kz-iso-glyph\" />;\n  switch (glyph) {\n    case \"dots\":\n      return <>{[-0.8, 0, 0.8].map((u) => <circle key={u} cx={p(u, 0)[0]} cy={p(u, 0)[1]} r={s * 0.16} className=\"kz-iso-glyph-fill\" />)}</>;\n    case \"lines\":\n      return <>{[-0.6, 0, 0.6].map((v) => <React.Fragment key={v}>{line([[-0.9, v], [0.7, v]])}</React.Fragment>)}</>;\n    case \"play\":\n      return line([[-0.5, -0.7], [0.8, 0], [-0.5, 0.7]], true);\n    case \"coin\":\n      return (\n        <>\n          <path d={pathOf(hexagon(0, 0, 0.9).map(([u, v]) => p(u, v)), true)} className=\"kz-iso-glyph\" />\n          <circle cx={p(0, 0)[0]} cy={p(0, 0)[1]} r={s * 0.18} className=\"kz-iso-glyph-fill\" />\n        </>\n      );\n    case \"lock\":\n      return (\n        <>\n          {line([[-0.6, -0.1], [0.6, -0.1], [0.6, 0.8], [-0.6, 0.8]], true)}\n          {line([[-0.35, -0.1], [-0.35, -0.5], [-0.15, -0.75], [0.15, -0.75], [0.35, -0.5], [0.35, -0.1]])}\n        </>\n      );\n    case \"arrow\":\n      return (\n        <>\n          {line([[0.8, 0.8], [-0.6, -0.6]])}\n          {line([[-0.6, 0.1], [-0.6, -0.6], [0.1, -0.6]])}\n        </>\n      );\n    case \"flag\":\n      return (\n        <>\n          {line([[-0.7, 0.9], [-0.7, -0.9]])}\n          {line([[-0.7, -0.9], [0.8, -0.55], [-0.7, -0.1]], true)}\n        </>\n      );\n    case \"heart\":\n      return line([[0, 0.85], [-0.85, 0], [-0.85, -0.45], [-0.45, -0.8], [0, -0.45], [0.45, -0.8], [0.85, -0.45], [0.85, 0]], true);\n    case \"node\":\n      return <circle cx={p(0, 0)[0]} cy={p(0, 0)[1]} r={s * 0.3} className=\"kz-iso-glyph-fill\" />;\n    default:\n      return null;\n  }\n}\n\nexport interface IsoLinkProps {\n  /** Where it starts, on the floor plan. */\n  from: Vec2;\n  /** Where it ends, on the floor plan. */\n  to: Vec2;\n  /**\n   * The height it runs at.\n   * @default 0\n   */\n  z?: number;\n  /**\n   * `elbow` follows the floor's axes, like a circuit; `straight` goes directly.\n   * @default \"elbow\"\n   */\n  route?: \"elbow\" | \"straight\";\n  /**\n   * Which way the light flows: `out` from `from` to `to`, `in` back.\n   * @default \"out\"\n   */\n  direction?: \"out\" | \"in\";\n  /**\n   * Particles of light travelling along it (0: only the dashes flow).\n   * @default 2\n   */\n  particles?: number;\n  /**\n   * Seconds a particle takes to cross it.\n   * @default 3.6\n   */\n  duration?: number;\n  /** A value written on it (\"90 %\", \"Tips\") — passed translated. */\n  label?: string;\n  /**\n   * Motion: the flow and the particles. `false` draws them still, resting along the link.\n   * @default true\n   */\n  animated?: boolean;\n}\n\n/** A dotted link on the floor, light flowing along it and particles crossing it — a flow between two objects. */\nexport function IsoLink({ from, to, z = 0, route = \"elbow\", direction = \"out\", particles = 2, duration = 3.6, label, animated }: IsoLinkProps) {\n  const corner: Vec2 = [to[0], from[1]];\n  const plan = route === \"elbow\" && from[0] !== to[0] && from[1] !== to[1] ? [from, corner, to] : [from, to];\n  const ordered = direction === \"in\" ? [...plan].reverse() : plan;\n  const d = pathOf(ordered.map(([x, y]) => project([x, y, z])));\n  const mid = plan.length === 3 ? corner : ([(from[0] + to[0]) / 2, (from[1] + to[1]) / 2] as Vec2);\n  return (\n    <g>\n      <path d={d} className={cn(\"kz-iso-link\", loop(animated))} />\n      {Array.from({ length: particles }, (_, k) => (\n        <circle\n          key={k}\n          r={3.2}\n          className={cn(\"kz-iso-particle\", loop(animated))}\n          style={\n            {\n              offsetPath: `path(\"${d}\")`,\n              \"--kz-iso-at\": `${Math.round(((k + 0.5) / particles) * 100)}%`,\n              \"--kz-iso-dur\": `${duration}s`,\n              \"--kz-iso-delay\": `${(-duration * k) / particles}s`,\n            } as Style\n          }\n        />\n      ))}\n      {label && <IsoLabel at={mid} z={z} text={label} />}\n    </g>\n  );\n}\n\nexport interface IsoLabelProps {\n  /** Where, on the floor plan. */\n  at: Vec2;\n  /**\n   * Its height.\n   * @default 0\n   */\n  z?: number;\n  /** The text — passed translated. */\n  text: string;\n  /** A first part in the accent, bolder (\"90 %\" before \" to the creator\"). */\n  strong?: string;\n}\n\n/** A label in a pill, always visible, pinned to a point of the scene (a share, a name). */\nexport function IsoLabel({ at, z = 0, text, strong }: IsoLabelProps) {\n  const [x, y] = project([at[0], at[1], z]);\n  const chars = text.length + (strong ? strong.length + 1 : 0);\n  const w = chars * 6.8 + 22;\n  return (\n    <g className=\"kz-iso-link-label\" aria-hidden>\n      <rect x={x - w / 2} y={y - 12} width={w} height={24} rx={8} strokeWidth={1} />\n      <text x={x} y={y + 4} textAnchor=\"middle\">\n        {strong && <tspan className=\"kz-iso-strong\">{strong} </tspan>}\n        {text}\n      </text>\n    </g>\n  );\n}\n\n/** A satellite of an `IsoHub`. */\nexport interface IsoSatellite {\n  /** Its name, shown when lifted — passed translated. */\n  label: string;\n  /**\n   * Its pictogram.\n   * @default \"none\"\n   */\n  glyph?: IsoGlyph;\n  /**\n   * The flow on its link: `in` toward the centre, `out` from it, `none` without a link.\n   * @default \"in\"\n   */\n  flow?: \"in\" | \"out\" | \"none\";\n  /** A value written on its link (\"+ €5\") — passed translated. */\n  value?: string;\n  /**\n   * How it is lit.\n   * @default \"accent\"\n   */\n  material?: IsoMaterial;\n}\n\nexport interface IsoHubProps extends Omit<IsoSceneProps, \"children\"> {\n  /** The hero object in the centre: its stages, bottom first. */\n  layers: readonly IsoLayer[];\n  /**\n   * The footprint of the stages.\n   * @default \"cut\"\n   */\n  shape?: IsoShape;\n  /**\n   * The width of the stages.\n   * @default 120\n   */\n  size?: number;\n  /**\n   * A lit core on top of the stack; a string names it.\n   * @default true\n   */\n  core?: boolean | string;\n  /** A dome over the centre: `true`, or its name (\"Your servers\"). */\n  dome?: boolean | string;\n  /**\n   * The objects around the centre, joined to it by flows of light. The first half stands on the left, the rest on the\n   * right, top to bottom: never in front of the hero, never hidden behind it.\n   */\n  satellites?: readonly IsoSatellite[];\n  /**\n   * The distance of the satellites from the centre.\n   * @default 210\n   */\n  radius?: number;\n  /** The angle of each satellite, in degrees (0: lower right, 90: lower left, 180: upper left, 270: upper right), to place them by hand. */\n  angles?: readonly number[];\n  /** A label pinned above the centre, its first part in the accent: `{ strong: \"90 %\", text: \"to the creator\" }`. */\n  highlight?: { readonly strong?: string; readonly text: string };\n}\n\n/** Left side (centred on 135°) then right side (centred on −45°), top to bottom, 64° apart. */\nfunction sideAngles(n: number): number[] {\n  const left = Math.ceil(n / 2);\n  const right = n - left;\n  const spread = (m: number, centre: number, sign: 1 | -1) => Array.from({ length: m }, (_, i) => centre + sign * ((m - 1) / 2 - i) * 64);\n  return [...spread(left, 135, 1), ...spread(right, -45, -1)];\n}\n\n/**\n * The hero, driven by data: a stack under an optional dome, satellites on both sides, a flow of light between each\n * satellite and the centre. Objects are painted back to front and the camera frames exactly what is drawn.\n */\nexport function IsoHub({ layers, shape, size = 120, core, dome, satellites = [], radius = 210, angles, highlight, animated, viewBox, extent, ...scene }: IsoHubProps) {\n  const auto = sideAngles(satellites.length);\n  const placed = satellites.map((s, k) => {\n    const angle = angles?.[k] ?? auto[k] ?? 0;\n    const at = onCircle(radius, angle);\n    // The farther back, the higher it floats: two tiles of a side never cover each other.\n    return { ...s, angle, at, z: Math.round(78 - (depthOf(at) / radius) * 26), k };\n  });\n  const back = placed.filter((s) => depthOf(s.at) < 0);\n  const front = placed.filter((s) => depthOf(s.at) >= 0);\n  const stackHeight = layers.reduce((h, l) => h + (l.height ?? 22) + 4, 16) + (core === false ? 0 : 38);\n  const domeR = size * 1.32;\n  const domeH = Math.max(stackHeight + 80, 200);\n  const crown = dome ? domeH + 24 : stackHeight + (highlight ? 62 : 12);\n  // The frame: every object's screen extent (tiles with room for their label, the plinth, the dome or the crown).\n  const points: Vec2[] = [\n    ...placed.flatMap(({ at: [x, y], z }) => [project([x - 46, y - 46, z + 52]), project([x + 46, y + 46, z]), project([x + 46, y - 46, z]), project([x - 46, y + 46, z])]),\n    ...hexagon(0, 0, size * (dome ? 1.4 : 0.95)).map(([x, y]) => project([x, y, 0])),\n    project([0, 0, crown + 20]),\n  ];\n  const xs = points.map(([x]) => x);\n  const ys = points.map(([, y]) => y);\n  const half = Math.max(...xs.map(Math.abs)) + 20;\n  const box = [-half, Math.min(...ys) - 12, half * 2, Math.max(...ys) - Math.min(...ys) + 40].map((n) => Math.round(n)).join(\" \");\n  const tile = (s: (typeof placed)[number]) => (\n    <IsoTile key={s.k} at={s.at} z={s.z} glyph={s.glyph} material={s.material} label={s.label} index={layers.length + 3 + s.k} animated={animated} />\n  );\n  const link = (s: (typeof placed)[number]) =>\n    s.flow === \"none\" ? null : (\n      <IsoLink\n        key={`l${s.k}`}\n        from={s.at}\n        to={onCircle(size * (dome ? 1.32 : 0.8), s.angle)}\n        route=\"straight\"\n        direction={s.flow === \"out\" ? \"in\" : \"out\"}\n        label={s.value}\n        animated={animated}\n      />\n    );\n  return (\n    <IsoScene animated={animated} extent={extent ?? Math.round(radius * 1.45 + 60)} viewBox={viewBox ?? box} {...scene}>\n      {placed.map(link)}\n      {dome && <IsoDome radius={domeR} part=\"rim\" animated={animated} />}\n      {back.map(tile)}\n      <IsoStack layers={layers} shape={shape} size={size} core={core} animated={animated} />\n      {dome && <IsoDome radius={domeR} height={domeH} part=\"arc\" animated={animated} label={typeof dome === \"string\" ? dome : undefined} />}\n      {highlight && <IsoLabel at={[0, 0]} z={stackHeight + (dome ? 24 : 46)} strong={highlight.strong} text={highlight.text} />}\n      {front.map(tile)}\n    </IsoScene>\n  );\n}\n"
+      "content": "// Server-safe: no state, no effect, no context — static SVG computed at render time, animated by motion.css (`kz-iso-*`,\n// shipped by the preset), so a hero costs no client JavaScript. `useId` only (allowed in Server Components): every scene\n// owns its gradient and mask ids. Classes are joined with `cx`: no tailwind-variants in this entry.\nimport * as React from \"react\";\n\nimport { cx as cn } from \"../cx\";\nimport { cutRect, depthOf, type Face, hexagon, isoCircle, onCircle, pathOf, prism, project, pts, type Vec2, viewBoxOf } from \"./geometry\";\n\n/** How a solid is lit: the page's surfaces (`base`), the brand accent, accent → accent-2, or frosted glass. */\nexport type IsoMaterial = \"base\" | \"accent\" | \"accent2\" | \"glass\";\n/** The footprint of a prism: a hexagon (the marks), a rectangle with 45° cut corners (the icons) or a plain one. */\nexport type IsoShape = \"hex\" | \"cut\" | \"rect\";\n/** A pictogram drawn on the top of a tile. */\nexport type IsoGlyph = \"dots\" | \"lines\" | \"play\" | \"coin\" | \"lock\" | \"arrow\" | \"flag\" | \"heart\" | \"node\" | \"none\";\n\ntype Style = React.CSSProperties & Record<`--${string}`, string | number>;\n\nconst uid = (raw: string) => raw.replace(/[^a-zA-Z0-9_-]/g, \"\");\nconst footprint = (shape: IsoShape, [x, y]: Vec2, size: number | Vec2, cut?: number): Vec2[] => {\n  const [w, d] = typeof size === \"number\" ? [size, size] : size;\n  if (shape === \"hex\") return hexagon(x, y, w / 2);\n  return cutRect(x, y, w, d, shape === \"rect\" ? 0 : (cut ?? Math.min(w, d) / 6));\n};\n\nexport interface IsoSceneProps extends Omit<React.ComponentProps<\"svg\">, \"children\"> {\n  /** The accessible name of the scene (\"A server stack under a dome\") — passed translated. Without it the scene is decorative. */\n  label?: string;\n  /** A longer text version of what the scene shows, read by assistive technology. */\n  description?: string;\n  /**\n   * Half the size of the floor, in world units: what the camera frames.\n   * @default 240\n   */\n  extent?: number;\n  /**\n   * Height above the floor the camera keeps in view, in world units.\n   * @default 260\n   */\n  top?: number;\n  /**\n   * The perspective grid on the floor, fading into the page.\n   * @default true\n   */\n  grid?: boolean;\n  /**\n   * The spacing of the grid's lines.\n   * @default 40\n   */\n  step?: number;\n  /**\n   * Motion (entrance, breathing, flow, float). `false` draws the still frame — the one prefers-reduced-motion shows.\n   * @default true\n   */\n  animated?: boolean;\n  /** The objects, painted in order: put the farthest first (or use `IsoHub`, which sorts them). */\n  children?: React.ReactNode;\n}\n\n/**\n * The stage: an isometric camera over a perspective grid that fades into the page. Its animations pause off screen and\n * wait for the page to settle (MotionObserver); everything stops under prefers-reduced-motion.\n */\nexport function IsoScene({ label, description, extent = 240, top = 260, grid = true, step = 40, animated = true, viewBox, className, children, ...props }: IsoSceneProps) {\n  const id = uid(React.useId());\n  const lines: string[] = [];\n  for (let v = -extent; v <= extent; v += step) {\n    lines.push(pathOf([project([v, -extent, 0]), project([v, extent, 0])]), pathOf([project([-extent, v, 0]), project([extent, v, 0])]));\n  }\n  const fade = isoCircle(0, 0, 0, extent * 0.9);\n  const named = label ? { role: \"group\" as const, \"aria-label\": label } : { \"aria-hidden\": true as const };\n  return (\n    <svg\n      viewBox={viewBox ?? viewBoxOf(extent, top)}\n      focusable=\"false\"\n      data-motion-scope=\"\"\n      data-animated={animated}\n      className={cn(\"kz-iso\", className)}\n      {...named}\n      {...props}\n    >\n      {description && <desc>{description}</desc>}\n      {grid && (\n        <>\n          <defs>\n            <radialGradient id={`${id}-fade`}>\n              <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"1\" />\n              <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"0\" />\n            </radialGradient>\n            <mask id={`${id}-floor`}>\n              <ellipse cx={fade.cx} cy={fade.cy} rx={fade.rx} ry={fade.ry} fill={`url(#${id}-fade)`} />\n            </mask>\n          </defs>\n          <path d={lines.join(\"\")} className=\"kz-iso-floor\" mask={`url(#${id}-floor)`} />\n        </>\n      )}\n      {children}\n    </svg>\n  );\n}\n\n/** A loop only when the scene moves: `animated={false}` on the item keeps it still. */\nconst loop = (animated: boolean | undefined) => (animated === false ? undefined : \"kz-loop\");\n\ninterface ItemProps {\n  /** The name shown when the pointer (or the focus) is on the object — passed translated. It also makes it focusable. */\n  label?: string;\n  /**\n   * Its rank in the entrance: objects rise into place one after the other.\n   * @default 0\n   */\n  index?: number;\n  /**\n   * Motion: entrance and loops. `false` keeps this object still.\n   * @default true\n   */\n  animated?: boolean;\n  /** Extra classes on the object's group. */\n  className?: string;\n}\n\n/** An object of the scene: rises at the entrance, brightens under the pointer or the focus and shows its label. */\nfunction Item({ label, index = 0, animated, anchor, align = \"center\", className, children }: ItemProps & { anchor: Vec2; align?: \"center\" | \"start\"; children: React.ReactNode }) {\n  const named = label ? { role: \"img\" as const, \"aria-label\": label, tabIndex: 0 } : {};\n  return (\n    <g className={cn(\"kz-iso-item\", className)} style={{ \"--kz-iso-i\": index } as Style} {...named}>\n      <g className={cn(\"kz-iso-lift\", animated !== false && \"kz-iso-rise\")}>{children}</g>\n      {label && <Tip at={anchor} text={label} align={align} />}\n    </g>\n  );\n}\n\n/**\n * A label in a pill (decorative: the object carries the name). `center`: above the point (a floating tile). `start`:\n * beside it, to the right, with a leader — for a stage of a stack, whose upper stages would cover a label above it.\n */\nfunction Tip({ at: [x, y], text, align }: { at: Vec2; text: string; align: \"center\" | \"start\" }) {\n  const w = Math.max(40, text.length * 6.6 + 20);\n  if (align === \"start\") {\n    return (\n      <g className=\"kz-iso-tip\" aria-hidden>\n        <path d={`M${Math.round(x + 3)} ${Math.round(y)}h18`} className=\"kz-iso-leader\" />\n        <rect x={x + 21} y={y - 11} width={w} height={22} rx={7} strokeWidth={1} />\n        <text x={x + 21 + w / 2} y={y + 4} textAnchor=\"middle\">\n          {text}\n        </text>\n      </g>\n    );\n  }\n  return (\n    <g className=\"kz-iso-tip\" aria-hidden>\n      <rect x={x - w / 2} y={y - 34} width={w} height={22} rx={7} strokeWidth={1} />\n      <text x={x} y={y - 19} textAnchor=\"middle\">\n        {text}\n      </text>\n    </g>\n  );\n}\n\nfunction Solid({ faces, material }: { faces: Face[]; material: IsoMaterial }) {\n  return (\n    <g className={\"kz-iso-\" + material}>\n      {faces.map((face, i) => (\n        <polygon key={i} points={face.points} className={\"kz-iso-face kz-iso-\" + face.kind} />\n      ))}\n    </g>\n  );\n}\n\nexport interface IsoPrismProps extends ItemProps {\n  /**\n   * The centre of its footprint on the floor plan (x, y).\n   * @default [0, 0]\n   */\n  at?: Vec2;\n  /**\n   * The height of its base above the floor.\n   * @default 0\n   */\n  z?: number;\n  /** Its height. */\n  height: number;\n  /**\n   * hex · cut (45° cut corners) · rect.\n   * @default \"cut\"\n   */\n  shape?: IsoShape;\n  /**\n   * Its width (a number: square or hexagon's diameter) or width × depth.\n   * @default 120\n   */\n  size?: number | Vec2;\n  /** The size of the 45° cut (`shape=\"cut\"`); a sixth of the smaller side by default. */\n  cut?: number;\n  /**\n   * How it is lit.\n   * @default \"base\"\n   */\n  material?: IsoMaterial;\n  /** A dotted light strip around its front (the LEDs of a server), blinking slowly. */\n  strip?: boolean;\n}\n\n/** A vertical prism — hexagonal, cut-corner or rectangular — that stacks with others on `z`. */\nexport function IsoPrism({ at = [0, 0], z = 0, height, shape = \"cut\", size = 120, cut, material = \"base\", strip, animated, ...item }: IsoPrismProps) {\n  const foot = footprint(shape, at, size, cut);\n  const [w, d] = typeof size === \"number\" ? [size, size] : size;\n  return (\n    <Item {...item} animated={animated} anchor={project(shape === \"hex\" ? [at[0] + w / 4, at[1] - w * 0.433, z + height / 2] : [at[0] + w / 2, at[1] - d / 2, z + height / 2])} align=\"start\">\n      <Solid faces={prism(foot, z, height)} material={material} />\n      {strip && <Strip at={at} w={w} d={d} c={shape === \"rect\" ? 0 : (cut ?? Math.min(w, d) / 6)} z={z + height / 2 + 1} animated={animated} hex={shape === \"hex\"} />}\n    </Item>\n  );\n}\n\nfunction Strip({ at: [cx, cy], w, d, c, z, hex, animated }: { at: Vec2; w: number; d: number; c: number; z: number; hex: boolean; animated?: boolean }) {\n  const front: Vec2[] = hex\n    ? [0, 1, 2].map((k) => onCircle(w / 2, k * 60 - 60, [cx, cy]))\n    : [[cx + w / 2, cy - d / 2 + c], [cx + w / 2, cy + d / 2 - c], [cx + w / 2 - c, cy + d / 2], [cx - w / 2 + c, cy + d / 2]];\n  return <polyline points={pts(front.map(([x, y]) => project([x, y, z])))} className={cn(\"kz-iso-strip\", loop(animated))} />;\n}\n\n/** One stage of an `IsoStack`. */\nexport interface IsoLayer {\n  /** The stage's name, shown when it is lifted — passed translated. */\n  label?: string;\n  /**\n   * Its height.\n   * @default 22\n   */\n  height?: number;\n  /**\n   * How it is lit.\n   * @default \"base\"\n   */\n  material?: IsoMaterial;\n}\n\nexport interface IsoStackProps {\n  /** The stages, bottom first; they stack one after the other at the entrance. */\n  layers: readonly IsoLayer[];\n  /**\n   * The centre of the stack on the floor plan.\n   * @default [0, 0]\n   */\n  at?: Vec2;\n  /**\n   * The footprint of the stages.\n   * @default \"cut\"\n   */\n  shape?: IsoShape;\n  /**\n   * The width of the stages.\n   * @default 120\n   */\n  size?: number;\n  /**\n   * The space between two stages.\n   * @default 4\n   */\n  gap?: number;\n  /**\n   * A hexagonal plinth under the stack.\n   * @default true\n   */\n  plinth?: boolean;\n  /**\n   * A lit hexagonal core on top, its node glowing; a string names it.\n   * @default true\n   */\n  core?: boolean | string;\n  /**\n   * The rank of the first stage in the scene's entrance.\n   * @default 0\n   */\n  index?: number;\n  /**\n   * Motion: entrance and loops. `false` keeps the stack still.\n   * @default true\n   */\n  animated?: boolean;\n}\n\n/** A stack of stages on a plinth with a lit core on top — a server, a model, a pile of layers — driven by data. */\nexport function IsoStack({ layers, at = [0, 0], shape = \"cut\", size = 120, gap = 4, plinth = true, core = true, index = 0, animated }: IsoStackProps) {\n  const base = plinth ? 12 + gap : 0;\n  const heights = layers.map((layer) => layer.height ?? 22);\n  const stages = layers.map((layer, k) => ({ ...layer, k, height: heights[k]!, z: base + heights.slice(0, k).reduce((sum, h) => sum + h + gap, 0) }));\n  const top = base + heights.reduce((sum, h) => sum + h + gap, 0);\n  return (\n    <g>\n      {plinth && <IsoPrism at={at} height={12} shape=\"hex\" size={size * 1.86} index={index} animated={animated} />}\n      {stages.map((s) => (\n        <IsoPrism\n          key={s.k}\n          at={at}\n          z={s.z}\n          height={s.height}\n          shape={shape}\n          size={size}\n          material={s.material ?? \"base\"}\n          strip={(s.material ?? \"base\") === \"base\"}\n          label={s.label}\n          index={index + 1 + s.k}\n          animated={animated}\n        />\n      ))}\n      {core && (\n        <>\n          <IsoPrism at={at} z={top} height={16} shape=\"hex\" size={size / 2} material=\"accent\" index={index + 1 + stages.length} animated={animated} label={typeof core === \"string\" ? core : undefined} />\n          <IsoNode at={at} z={top + 22} index={index + 2 + stages.length} animated={animated} />\n        </>\n      )}\n    </g>\n  );\n}\n\nexport interface IsoNodeProps {\n  /**\n   * Where, on the floor plan.\n   * @default [0, 0]\n   */\n  at?: Vec2;\n  /**\n   * Its height.\n   * @default 0\n   */\n  z?: number;\n  /**\n   * The radius of the node.\n   * @default 7\n   */\n  r?: number;\n  /**\n   * The radius of its glow (0: none).\n   * @default 70\n   */\n  glow?: number;\n  /**\n   * Its rank in the entrance.\n   * @default 0\n   */\n  index?: number;\n  /**\n   * Motion: the glow breathes. `false` keeps it still.\n   * @default true\n   */\n  animated?: boolean;\n}\n\n/** The Krizaka node: a point of light in the accent, breathing in its glow. */\nexport function IsoNode({ at = [0, 0], z = 0, r = 7, glow = 70, index = 0, animated }: IsoNodeProps) {\n  const id = uid(React.useId());\n  const [x, y] = project([at[0], at[1], z]);\n  return (\n    <g className={cn(animated !== false && \"kz-iso-rise\")} style={{ \"--kz-iso-i\": index } as Style}>\n      {glow > 0 && (\n        <>\n          <defs>\n            <radialGradient id={`${id}-glow`}>\n              <stop offset=\"0%\" className=\"kz-iso-glow-stop\" stopOpacity=\"0.55\" />\n              <stop offset=\"100%\" className=\"kz-iso-glow-stop\" stopOpacity=\"0\" />\n            </radialGradient>\n          </defs>\n          <circle cx={x} cy={y} r={glow} fill={`url(#${id}-glow)`} className={cn(\"kz-iso-breathe\", loop(animated))} />\n        </>\n      )}\n      <circle cx={x} cy={y} r={r} className={cn(\"kz-iso-node kz-iso-breathe\", loop(animated))} />\n    </g>\n  );\n}\n\nexport interface IsoDomeProps {\n  /**\n   * Its centre on the floor plan.\n   * @default [0, 0]\n   */\n  at?: Vec2;\n  /**\n   * The radius of its rim on the floor.\n   * @default 158\n   */\n  radius?: number;\n  /**\n   * Its height.\n   * @default 250\n   */\n  height?: number;\n  /** Its name (\"Your infrastructure\") — passed translated; shown at the top of the dome, always. */\n  label?: string;\n  /**\n   * Motion: a sheen travels along the dome. `false` keeps it still.\n   * @default true\n   */\n  animated?: boolean;\n}\n\n/**\n * A dome of light over what it protects: a rim on the floor, a glass arc, a sheen that travels along it. Draw its rim\n * before the objects it covers and the dome after them (`part=\"rim\"`, `part=\"arc\"`), or let `IsoHub` do it.\n */\nexport function IsoDome({ at = [0, 0], radius = 158, height = 250, label, animated, part = \"both\" }: IsoDomeProps & {\n  /**\n   * `rim` (the floor ellipse, drawn first), `arc` (the glass, drawn last) or `both`.\n   * @default \"both\"\n   */\n  part?: \"rim\" | \"arc\" | \"both\";\n}) {\n  const e = isoCircle(at[0], at[1], 0, radius);\n  const arc = `M${e.cx - e.rx} ${e.cy} A ${e.rx} ${height} 0 0 1 ${e.cx + e.rx} ${e.cy}`;\n  return (\n    <>\n      {part !== \"arc\" && <ellipse cx={e.cx} cy={e.cy} rx={e.rx} ry={e.ry} className=\"kz-iso-rim\" />}\n      {part !== \"rim\" && (\n        <g>\n          <path d={arc} className=\"kz-iso-dome\" />\n          <path d={arc} className={cn(\"kz-iso-dome-sheen\", loop(animated))} pathLength={440} />\n          {label && <IsoLabel at={at} z={height + 10} text={label} />}\n        </g>\n      )}\n    </>\n  );\n}\n\nexport interface IsoTileProps extends ItemProps {\n  /** Its centre on the floor plan. */\n  at: Vec2;\n  /**\n   * The height it floats at.\n   * @default 90\n   */\n  z?: number;\n  /**\n   * Width × depth.\n   * @default [76, 52]\n   */\n  size?: Vec2;\n  /**\n   * The pictogram on its top.\n   * @default \"none\"\n   */\n  glyph?: IsoGlyph;\n  /**\n   * How it is lit.\n   * @default \"accent\"\n   */\n  material?: IsoMaterial;\n  /**\n   * It floats gently.\n   * @default true\n   */\n  float?: boolean;\n}\n\n/** A satellite: a thin cut-corner tile that floats beside the hero object, a pictogram on its top. */\nexport function IsoTile({ at, z = 90, size = [76, 52], glyph = \"none\", material = \"accent\", float = true, animated, ...item }: IsoTileProps) {\n  const [w, d] = size;\n  const top = z + 9;\n  const shadow = isoCircle(at[0], at[1], 0, Math.min(w, d) * 0.55);\n  const foot = project([at[0], at[1], 0]);\n  return (\n    <Item {...item} animated={animated} anchor={project([at[0], at[1], top])}>\n      {z > 0 && (\n        <>\n          <ellipse cx={shadow.cx} cy={shadow.cy} rx={shadow.rx} ry={shadow.ry} className=\"kz-iso-shadow\" />\n          <path d={pathOf([foot, project([at[0], at[1], z])])} className=\"kz-iso-tether\" />\n        </>\n      )}\n      <g className={cn(float && \"kz-iso-float\", float && loop(animated))}>\n        <Solid faces={prism(cutRect(at[0], at[1], w, d, Math.min(w, d) / 4), z, 9)} material={material} />\n        <Glyph glyph={glyph} at={at} z={top} s={Math.min(w, d) * 0.3} />\n      </g>\n    </Item>\n  );\n}\n\nfunction Glyph({ glyph, at: [cx, cy], z, s }: { glyph: IsoGlyph; at: Vec2; z: number; s: number }) {\n  const p = (u: number, v: number) => project([cx + u * s, cy + v * s, z]);\n  const line = (points: [number, number][], close = false) => <path d={pathOf(points.map(([u, v]) => p(u, v)), close)} className=\"kz-iso-glyph\" />;\n  switch (glyph) {\n    case \"dots\":\n      return <>{[-0.8, 0, 0.8].map((u) => <circle key={u} cx={p(u, 0)[0]} cy={p(u, 0)[1]} r={s * 0.16} className=\"kz-iso-glyph-fill\" />)}</>;\n    case \"lines\":\n      return <>{[-0.6, 0, 0.6].map((v) => <React.Fragment key={v}>{line([[-0.9, v], [0.7, v]])}</React.Fragment>)}</>;\n    case \"play\":\n      return line([[-0.5, -0.7], [0.8, 0], [-0.5, 0.7]], true);\n    case \"coin\":\n      return (\n        <>\n          <path d={pathOf(hexagon(0, 0, 0.9).map(([u, v]) => p(u, v)), true)} className=\"kz-iso-glyph\" />\n          <circle cx={p(0, 0)[0]} cy={p(0, 0)[1]} r={s * 0.18} className=\"kz-iso-glyph-fill\" />\n        </>\n      );\n    case \"lock\":\n      return (\n        <>\n          {line([[-0.6, -0.1], [0.6, -0.1], [0.6, 0.8], [-0.6, 0.8]], true)}\n          {line([[-0.35, -0.1], [-0.35, -0.5], [-0.15, -0.75], [0.15, -0.75], [0.35, -0.5], [0.35, -0.1]])}\n        </>\n      );\n    case \"arrow\":\n      return (\n        <>\n          {line([[0.8, 0.8], [-0.6, -0.6]])}\n          {line([[-0.6, 0.1], [-0.6, -0.6], [0.1, -0.6]])}\n        </>\n      );\n    case \"flag\":\n      return (\n        <>\n          {line([[-0.7, 0.9], [-0.7, -0.9]])}\n          {line([[-0.7, -0.9], [0.8, -0.55], [-0.7, -0.1]], true)}\n        </>\n      );\n    case \"heart\":\n      return line([[0, 0.85], [-0.85, 0], [-0.85, -0.45], [-0.45, -0.8], [0, -0.45], [0.45, -0.8], [0.85, -0.45], [0.85, 0]], true);\n    case \"node\":\n      return <circle cx={p(0, 0)[0]} cy={p(0, 0)[1]} r={s * 0.3} className=\"kz-iso-glyph-fill\" />;\n    default:\n      return null;\n  }\n}\n\nexport interface IsoLinkProps {\n  /** Where it starts, on the floor plan. */\n  from: Vec2;\n  /** Where it ends, on the floor plan. */\n  to: Vec2;\n  /**\n   * The height it runs at.\n   * @default 0\n   */\n  z?: number;\n  /**\n   * `elbow` follows the floor's axes, like a circuit; `straight` goes directly.\n   * @default \"elbow\"\n   */\n  route?: \"elbow\" | \"straight\";\n  /**\n   * Which way the light flows: `out` from `from` to `to`, `in` back.\n   * @default \"out\"\n   */\n  direction?: \"out\" | \"in\";\n  /**\n   * Particles of light travelling along it (0: only the dashes flow).\n   * @default 2\n   */\n  particles?: number;\n  /**\n   * Seconds a particle takes to cross it.\n   * @default 3.6\n   */\n  duration?: number;\n  /** A value written on it (\"90 %\", \"Tips\") — passed translated. */\n  label?: string;\n  /**\n   * Motion: the flow and the particles. `false` draws them still, resting along the link.\n   * @default true\n   */\n  animated?: boolean;\n}\n\n/** A dotted link on the floor, light flowing along it and particles crossing it — a flow between two objects. */\nexport function IsoLink({ from, to, z = 0, route = \"elbow\", direction = \"out\", particles = 2, duration = 3.6, label, animated }: IsoLinkProps) {\n  const corner: Vec2 = [to[0], from[1]];\n  const plan = route === \"elbow\" && from[0] !== to[0] && from[1] !== to[1] ? [from, corner, to] : [from, to];\n  const ordered = direction === \"in\" ? [...plan].reverse() : plan;\n  const d = pathOf(ordered.map(([x, y]) => project([x, y, z])));\n  const mid = plan.length === 3 ? corner : ([(from[0] + to[0]) / 2, (from[1] + to[1]) / 2] as Vec2);\n  return (\n    <g>\n      <path d={d} className={cn(\"kz-iso-link\", loop(animated))} />\n      {Array.from({ length: particles }, (_, k) => (\n        <circle\n          key={k}\n          r={3.2}\n          className={cn(\"kz-iso-particle\", loop(animated))}\n          style={\n            {\n              offsetPath: `path(\"${d}\")`,\n              \"--kz-iso-at\": `${Math.round(((k + 0.5) / particles) * 100)}%`,\n              \"--kz-iso-dur\": `${duration}s`,\n              \"--kz-iso-delay\": `${(-duration * k) / particles}s`,\n            } as Style\n          }\n        />\n      ))}\n      {label && <IsoLabel at={mid} z={z} text={label} />}\n    </g>\n  );\n}\n\nexport interface IsoLabelProps {\n  /** Where, on the floor plan. */\n  at: Vec2;\n  /**\n   * Its height.\n   * @default 0\n   */\n  z?: number;\n  /** The text — passed translated. */\n  text: string;\n  /** A first part in the accent, bolder (\"90 %\" before \" to the creator\"). */\n  strong?: string;\n}\n\n/** A label in a pill, always visible, pinned to a point of the scene (a share, a name). */\nexport function IsoLabel({ at, z = 0, text, strong }: IsoLabelProps) {\n  const [x, y] = project([at[0], at[1], z]);\n  const chars = text.length + (strong ? strong.length + 1 : 0);\n  const w = chars * 6.8 + 22;\n  return (\n    <g className=\"kz-iso-link-label\" aria-hidden>\n      <rect x={x - w / 2} y={y - 12} width={w} height={24} rx={8} strokeWidth={1} />\n      <text x={x} y={y + 4} textAnchor=\"middle\">\n        {strong && <tspan className=\"kz-iso-strong\">{strong} </tspan>}\n        {text}\n      </text>\n    </g>\n  );\n}\n\n/** A satellite of an `IsoHub`. */\nexport interface IsoSatellite {\n  /** Its name, shown when lifted — passed translated. */\n  label: string;\n  /**\n   * Its pictogram.\n   * @default \"none\"\n   */\n  glyph?: IsoGlyph;\n  /**\n   * The flow on its link: `in` toward the centre, `out` from it, `none` without a link.\n   * @default \"in\"\n   */\n  flow?: \"in\" | \"out\" | \"none\";\n  /** A value written on its link (\"+ €5\") — passed translated. */\n  value?: string;\n  /**\n   * How it is lit.\n   * @default \"accent\"\n   */\n  material?: IsoMaterial;\n}\n\nexport interface IsoHubProps extends Omit<IsoSceneProps, \"children\"> {\n  /** The hero object in the centre: its stages, bottom first. */\n  layers: readonly IsoLayer[];\n  /**\n   * The footprint of the stages.\n   * @default \"cut\"\n   */\n  shape?: IsoShape;\n  /**\n   * The width of the stages.\n   * @default 120\n   */\n  size?: number;\n  /**\n   * A lit core on top of the stack; a string names it.\n   * @default true\n   */\n  core?: boolean | string;\n  /** A dome over the centre: `true`, or its name (\"Your servers\"). */\n  dome?: boolean | string;\n  /**\n   * The objects around the centre, joined to it by flows of light. The first half stands on the left, the rest on the\n   * right, top to bottom: never in front of the hero, never hidden behind it.\n   */\n  satellites?: readonly IsoSatellite[];\n  /**\n   * The distance of the satellites from the centre.\n   * @default 210\n   */\n  radius?: number;\n  /** The angle of each satellite, in degrees (0: lower right, 90: lower left, 180: upper left, 270: upper right), to place them by hand. */\n  angles?: readonly number[];\n  /** A label pinned above the centre, its first part in the accent: `{ strong: \"90 %\", text: \"to the creator\" }`. */\n  highlight?: { readonly strong?: string; readonly text: string };\n}\n\n/** Left side (centred on 135°) then right side (centred on −45°), top to bottom, 64° apart. */\nfunction sideAngles(n: number): number[] {\n  const left = Math.ceil(n / 2);\n  const right = n - left;\n  const spread = (m: number, centre: number, sign: 1 | -1) => Array.from({ length: m }, (_, i) => centre + sign * ((m - 1) / 2 - i) * 64);\n  return [...spread(left, 135, 1), ...spread(right, -45, -1)];\n}\n\n/**\n * The hero, driven by data: a stack under an optional dome, satellites on both sides, a flow of light between each\n * satellite and the centre. Objects are painted back to front and the camera frames exactly what is drawn.\n */\nexport function IsoHub({ layers, shape, size = 120, core, dome, satellites = [], radius = 210, angles, highlight, animated, viewBox, extent, ...scene }: IsoHubProps) {\n  const auto = sideAngles(satellites.length);\n  const placed = satellites.map((s, k) => {\n    const angle = angles?.[k] ?? auto[k] ?? 0;\n    const at = onCircle(radius, angle);\n    // The farther back, the higher it floats: two tiles of a side never cover each other.\n    return { ...s, angle, at, z: Math.round(78 - (depthOf(at) / radius) * 26), k };\n  });\n  const back = placed.filter((s) => depthOf(s.at) < 0);\n  const front = placed.filter((s) => depthOf(s.at) >= 0);\n  const stackHeight = layers.reduce((h, l) => h + (l.height ?? 22) + 4, 16) + (core === false ? 0 : 38);\n  const domeR = size * 1.32;\n  const domeH = Math.max(stackHeight + 80, 200);\n  const crown = dome ? domeH + 24 : stackHeight + (highlight ? 62 : 12);\n  // The frame: every object's screen extent (tiles with room for their label, the plinth, the dome or the crown).\n  const points: Vec2[] = [\n    ...placed.flatMap(({ at: [x, y], z }) => [project([x - 46, y - 46, z + 52]), project([x + 46, y + 46, z]), project([x + 46, y - 46, z]), project([x - 46, y + 46, z])]),\n    ...hexagon(0, 0, size * (dome ? 1.4 : 0.95)).map(([x, y]) => project([x, y, 0])),\n    project([0, 0, crown + 20]),\n  ];\n  const xs = points.map(([x]) => x);\n  const ys = points.map(([, y]) => y);\n  const half = Math.max(...xs.map(Math.abs)) + 20;\n  const box = [-half, Math.min(...ys) - 12, half * 2, Math.max(...ys) - Math.min(...ys) + 40].map((n) => Math.round(n)).join(\" \");\n  const tile = (s: (typeof placed)[number]) => (\n    <IsoTile key={s.k} at={s.at} z={s.z} glyph={s.glyph} material={s.material} label={s.label} index={layers.length + 3 + s.k} animated={animated} />\n  );\n  const link = (s: (typeof placed)[number]) =>\n    s.flow === \"none\" ? null : (\n      <IsoLink\n        key={`l${s.k}`}\n        from={s.at}\n        to={onCircle(size * (dome ? 1.32 : 0.8), s.angle)}\n        route=\"straight\"\n        direction={s.flow === \"out\" ? \"in\" : \"out\"}\n        label={s.value}\n        animated={animated}\n      />\n    );\n  return (\n    <IsoScene animated={animated} extent={extent ?? Math.round(radius * 1.45 + 60)} viewBox={viewBox ?? box} {...scene}>\n      {placed.map(link)}\n      {dome && <IsoDome radius={domeR} part=\"rim\" animated={animated} />}\n      {back.map(tile)}\n      <IsoStack layers={layers} shape={shape} size={size} core={core} animated={animated} />\n      {dome && <IsoDome radius={domeR} height={domeH} part=\"arc\" animated={animated} label={typeof dome === \"string\" ? dome : undefined} />}\n      {highlight && <IsoLabel at={[0, 0]} z={stackHeight + (dome ? 24 : 46)} strong={highlight.strong} text={highlight.text} />}\n      {front.map(tile)}\n    </IsoScene>\n  );\n}\n"
     },
     {
       "path": "iso/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Iso\",\n  summary:\n    \"The isometric kit: luminous objects built from the Krizaka vocabulary (hexagons, cut corners, the node) on a perspective grid — a hero driven by data (`IsoHub`) or composed from primitives.\",\n  status: \"beta\",\n  category: \"layout\",\n  platforms: \"web\",\n  parity: { native: { status: \"n/a\", reason: \"An isometric drawing of a site's hero.\" }, desktop: { status: \"n/a\", reason: \"A public site's page, not a window of the Mac app.\" } },\n  whenToUse: [\n    \"The hero illustration of a product or marketing page: what the product is, drawn as one object with two to four satellites.\",\n    \"To show a flow toward or out of something (requests into a server, support toward a creator) with values written on it.\",\n    \"An architecture teaser where a diagram would be too much: one object per layer, named on hover and focus.\",\n  ],\n  whenNotToUse: [\n    { when: \"For a real architecture or data flow the reader must study: draw a schema with a text version.\" },\n    { when: \"As the background of a section: the light, the dome and the grid of a backdrop are lighter.\", use: \"section-backdrop\" },\n    { when: \"More than one per screen: the hero object is unique, the rest of the page stays calm.\" },\n  ],\n  bestPractices: [\n    \"Start with `IsoHub`: stages, satellites and a highlight are data; the hub places satellites on both sides (never in front of the hero, never hidden behind it) and frames exactly what it draws.\",\n    \"Name the scene (`label`) and say in `description` what it shows; name the objects (`label`) to make them explorable with the pointer and the keyboard — leave everything unnamed for a purely decorative scene.\",\n    \"Put the scene in a brand (`.brand-<id>`): the light, the core and the flows follow the accent, in both themes.\",\n    \"Composing by hand: paint back to front, and number the entrance with `index` so objects rise in a meaningful order.\",\n    \"Pass words translated: labels, values on links, the highlight.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Tab\", action: \"Visits each named object of the scene: it lifts and shows its label, as under the pointer.\" }],\n    notes: [\n      \"A named scene is a `group` with its `label` and its `description` (`<desc>`); an unnamed one is decorative (`aria-hidden`).\",\n      \"Each named object is an image (`role=\\\"img\\\"`) named by its label and focusable; the drawn labels are decorative copies.\",\n      \"Under `prefers-reduced-motion` (and with `animated={false}`) the scene is a composed still frame: objects in place, light resting along the links — not an animation cut halfway.\",\n      \"Server-rendered static SVG, no client JavaScript; with `MotionObserver` mounted its loops pause off screen and wait for the page to settle.\",\n    ],\n  },\n  related: [\"section-backdrop\", \"number-ticker\"],\n  web: {\n    imports: [\"IsoHub\", \"IsoScene\", \"IsoPrism\", \"IsoStack\", \"IsoDome\", \"IsoTile\", \"IsoLink\", \"IsoNode\", \"IsoLabel\"],\n    examples: [\n      {\n        name: \"orazaka-hero\",\n        title: \"Sovereign servers (Orazaka)\",\n        description: \"Three named stages under a dome, a lit core; chats and documents flow in, answers flow out. Hover or tab to explore.\",\n      },\n      {\n        name: \"orochia-hero\",\n        title: \"Support toward a creator (Orochia)\",\n        description: \"The creator in the centre, tips, unlocks, auctions and challenges flowing toward them, their amounts on the links, 90 % pinned above.\",\n      },\n      { name: \"compose\", title: \"Composed by hand\", description: \"The primitives — scene, links, dome, prisms, node, tiles — painted back to front with an entrance order.\" },\n      { name: \"still\", title: \"Still frame\", description: \"`animated={false}`: the composed picture prefers-reduced-motion shows.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Iso\",\n  summary:\n    \"The isometric kit: luminous objects built from the Krizaka vocabulary (hexagons, cut corners, the node) on a perspective grid — a hero driven by data (`IsoHub`) or composed from primitives.\",\n  status: \"beta\",\n  category: \"layout\",\n  platforms: \"web\",\n  parity: { native: { status: \"n/a\", reason: \"An isometric drawing of a site's hero.\" }, desktop: { status: \"n/a\", reason: \"A public site's page, not a window of the Mac app.\" } },\n  whenToUse: [\n    \"The hero illustration of a product or marketing page: what the product is, drawn as one object with two to four satellites.\",\n    \"To show a flow toward or out of something (requests into a server, support toward a creator) with values written on it.\",\n    \"An architecture teaser where a diagram would be too much: one object per layer, named on hover and focus.\",\n  ],\n  whenNotToUse: [\n    { when: \"For a real architecture or data flow the reader must study: draw a schema with a text version.\" },\n    { when: \"As the background of a section: the light, the dome and the grid of a backdrop are lighter.\", use: \"section-backdrop\" },\n    { when: \"More than one per screen: the hero object is unique, the rest of the page stays calm.\" },\n  ],\n  bestPractices: [\n    \"Start with `IsoHub`: stages, satellites and a highlight are data; the hub places satellites on both sides (never in front of the hero, never hidden behind it) and frames exactly what it draws.\",\n    \"Name the scene (`label`) and say in `description` what it shows; name the objects (`label`) to make them explorable with the pointer and the keyboard — leave everything unnamed for a purely decorative scene.\",\n    \"Put the scene in a brand (`.brand-<id>`): the light, the core and the flows follow the accent, in both themes.\",\n    \"Composing by hand: paint back to front, and number the entrance with `index` so objects rise in a meaningful order.\",\n    \"Pass words translated: labels, values on links, the highlight.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Tab\", action: \"Visits each named object of the scene: it brightens and shows its label, as under the pointer.\" }],\n    notes: [\n      \"A named scene is a `group` with its `label` and its `description` (`<desc>`); an unnamed one is decorative (`aria-hidden`).\",\n      \"Each named object is an image (`role=\\\"img\\\"`) named by its label and focusable; the drawn labels are decorative copies.\",\n      \"Under `prefers-reduced-motion` (and with `animated={false}`) the scene is a composed still frame: objects in place, light resting along the links — not an animation cut halfway.\",\n      \"Server-rendered static SVG, no client JavaScript; with `MotionObserver` mounted its loops pause off screen and wait for the page to settle.\",\n    ],\n  },\n  related: [\"section-backdrop\", \"number-ticker\"],\n  web: {\n    imports: [\"IsoHub\", \"IsoScene\", \"IsoPrism\", \"IsoStack\", \"IsoDome\", \"IsoTile\", \"IsoLink\", \"IsoNode\", \"IsoLabel\"],\n    examples: [\n      {\n        name: \"orazaka-hero\",\n        title: \"Sovereign servers (Orazaka)\",\n        description: \"Three named stages under a dome, a lit core; chats and documents flow in, answers flow out. Hover or tab to explore.\",\n      },\n      {\n        name: \"orochia-hero\",\n        title: \"Support toward a creator (Orochia)\",\n        description: \"The creator in the centre, tips, unlocks, auctions and challenges flowing toward them, their amounts on the links, 90 % pinned above.\",\n      },\n      { name: \"compose\", title: \"Composed by hand\", description: \"The primitives — scene, links, dome, prisms, node, tiles — painted back to front with an entrance order.\" },\n      { name: \"still\", title: \"Still frame\", description: \"`animated={false}`: the composed picture prefers-reduced-motion shows.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "meta.ts",
@@ -1118,7 +1118,7 @@
           "name": "label",
           "type": "string",
           "default": null,
-          "description": "The name shown when the pointer (or the focus) lifts the object — passed translated. It also makes it focusable.",
+          "description": "The name shown when the pointer (or the focus) is on the object — passed translated. It also makes it focusable.",
           "required": false
         },
         {
@@ -1339,7 +1339,7 @@
           "name": "label",
           "type": "string",
           "default": null,
-          "description": "The name shown when the pointer (or the focus) lifts the object — passed translated. It also makes it focusable.",
+          "description": "The name shown when the pointer (or the focus) is on the object — passed translated. It also makes it focusable.",
           "required": false
         },
         {

package/registry/landing-page.json

@@ -144,7 +144,7 @@
         "why": "A visitor gets the promise in one screen, the product alive, the proofs and one call to act.",
         "path": "examples/landing-page/krizaka.tsx",
         "module": "@krizaka/ui/registry/examples/landing-page/krizaka",
-        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { LandingPage } from \"@krizaka/ui/landing-page\";\nimport { Meter } from \"@krizaka/ui/meter\";\n\n// TEMPLATE — a company's landing (krizaka.com): the promise beside the product alive, a band of proofs, the features\n// as a bento where the main one takes the room, the closing call. On a phone the window follows the words, the bento\n// is one column, the proofs stack.\nexport default function LandingPageKrizaka() {\n  return (\n    <LandingPage\n      eyebrow=\"Software studio · Montréal\"\n      title=\"Products that keep what is yours\"\n      lead=\"Krizaka builds sovereign AI and a platform where creators are paid — open source, on your servers or ours.\"\n      actions={\n        <>\n          <Button variant=\"primary\" size=\"lg\" shape=\"cut\" shimmer>See the products</Button>\n          <Button variant=\"secondary\" size=\"lg\" shape=\"cut\">Read the docs</Button>\n        </>\n      }\n      visualLabel=\"orazaka.local — console\"\n      visual={\n        <div className=\"grid gap-3 p-5\">\n          <p className=\"font-mono text-xs text-fg-secondary\">$ npx orazaka install</p>\n          <p className=\"font-mono text-xs text-fg-success\">✓ 1,284 answers this week, none left the server</p>\n          <Meter label=\"Credits\" value={3800} max={12000} valueText=\"3,800 of 12,000\" showLabel />\n        </div>\n      }\n      proofs={[\n        { value: \"34\", label: \"public repositories\" },\n        { value: \"Apache-2.0\", label: \"every line\" },\n        { value: \"0\", label: \"telemetry calls\" },\n      ]}\n      featuresHeading={{ eyebrow: \"What we build\", title: \"Three products, one way of building\" }}\n      features={[\n        { id: \"orazaka\", size: \"lg\", title: \"Orazaka — the AI that never leaves home\", text: \"Chat, image, voice and video on your own server, one governed pipeline.\" },\n        { id: \"orochia\", title: \"Orochia\", text: \"Creators paid 90 % of what fans spend.\" },\n        { id: \"yasakia\", title: \"Yasakia\", text: \"Meet by talking first — coming.\" },\n        { id: \"blocks\", size: \"md\", title: \"Open building blocks\", text: \"Users, billing, notifications — on Maven Central and npm.\" },\n        { id: \"ui\", size: \"md\", title: \"One design system\", text: \"Krizaka UI, web and mobile, documented from its code.\" },\n      ]}\n      closing={{ title: \"Something to build together?\", body: \"Tell us what you need; a person answers within two days.\", actions: <Button variant=\"primary\" size=\"lg\" shape=\"cut\">Contact us</Button> }}\n    />\n  );\n}\n"
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { LandingPage } from \"@krizaka/ui/landing-page\";\nimport { Meter } from \"@krizaka/ui/meter\";\n\n// TEMPLATE — a company's landing (krizaka.com): the promise beside the product alive, a band of proofs, the features\n// as a bento where the main one takes the room, the closing call. On a phone the window follows the words, the bento\n// is one column, the proofs stack.\nexport default function LandingPageKrizaka() {\n  return (\n    <LandingPage\n      eyebrow=\"Software studio · Montréal\"\n      title=\"Products that keep what is yours\"\n      lead=\"Krizaka builds sovereign AI and a platform where creators are paid — open source, on your servers or ours.\"\n      actions={\n        <>\n          <Button variant=\"primary\" size=\"lg\">See the products</Button>\n          <Button variant=\"secondary\" size=\"lg\">Read the docs</Button>\n        </>\n      }\n      visualLabel=\"orazaka.local — console\"\n      visual={\n        <div className=\"grid gap-3 p-5\">\n          <p className=\"font-mono text-xs text-fg-secondary\">$ npx orazaka install</p>\n          <p className=\"font-mono text-xs text-fg-success\">✓ 1,284 answers this week, none left the server</p>\n          <Meter label=\"Credits\" value={3800} max={12000} valueText=\"3,800 of 12,000\" showLabel />\n        </div>\n      }\n      proofs={[\n        { value: \"34\", label: \"public repositories\" },\n        { value: \"Apache-2.0\", label: \"every line\" },\n        { value: \"0\", label: \"telemetry calls\" },\n      ]}\n      featuresHeading={{ eyebrow: \"What we build\", title: \"Three products, one way of building\" }}\n      features={[\n        { id: \"orazaka\", size: \"lg\", title: \"Orazaka — the AI that never leaves home\", text: \"Chat, image, voice and video on your own server, one governed pipeline.\" },\n        { id: \"orochia\", title: \"Orochia\", text: \"Creators paid 90 % of what fans spend.\" },\n        { id: \"yasakia\", title: \"Yasakia\", text: \"Meet by talking first — coming.\" },\n        { id: \"blocks\", size: \"md\", title: \"Open building blocks\", text: \"Users, billing, notifications — on Maven Central and npm.\" },\n        { id: \"ui\", size: \"md\", title: \"One design system\", text: \"Krizaka UI, web and mobile, documented from its code.\" },\n      ]}\n      closing={{ title: \"Something to build together?\", body: \"Tell us what you need; a person answers within two days.\", actions: <Button variant=\"primary\" size=\"lg\">Contact us</Button> }}\n    />\n  );\n}\n"
       }
     ]
   },
@@ -175,7 +175,7 @@
   ],
   "demo": {
     "path": "examples/landing-page/krizaka.tsx",
-    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { LandingPage } from \"@krizaka/ui/landing-page\";\nimport { Meter } from \"@krizaka/ui/meter\";\n\n// TEMPLATE — a company's landing (krizaka.com): the promise beside the product alive, a band of proofs, the features\n// as a bento where the main one takes the room, the closing call. On a phone the window follows the words, the bento\n// is one column, the proofs stack.\nexport default function LandingPageKrizaka() {\n  return (\n    <LandingPage\n      eyebrow=\"Software studio · Montréal\"\n      title=\"Products that keep what is yours\"\n      lead=\"Krizaka builds sovereign AI and a platform where creators are paid — open source, on your servers or ours.\"\n      actions={\n        <>\n          <Button variant=\"primary\" size=\"lg\" shape=\"cut\" shimmer>See the products</Button>\n          <Button variant=\"secondary\" size=\"lg\" shape=\"cut\">Read the docs</Button>\n        </>\n      }\n      visualLabel=\"orazaka.local — console\"\n      visual={\n        <div className=\"grid gap-3 p-5\">\n          <p className=\"font-mono text-xs text-fg-secondary\">$ npx orazaka install</p>\n          <p className=\"font-mono text-xs text-fg-success\">✓ 1,284 answers this week, none left the server</p>\n          <Meter label=\"Credits\" value={3800} max={12000} valueText=\"3,800 of 12,000\" showLabel />\n        </div>\n      }\n      proofs={[\n        { value: \"34\", label: \"public repositories\" },\n        { value: \"Apache-2.0\", label: \"every line\" },\n        { value: \"0\", label: \"telemetry calls\" },\n      ]}\n      featuresHeading={{ eyebrow: \"What we build\", title: \"Three products, one way of building\" }}\n      features={[\n        { id: \"orazaka\", size: \"lg\", title: \"Orazaka — the AI that never leaves home\", text: \"Chat, image, voice and video on your own server, one governed pipeline.\" },\n        { id: \"orochia\", title: \"Orochia\", text: \"Creators paid 90 % of what fans spend.\" },\n        { id: \"yasakia\", title: \"Yasakia\", text: \"Meet by talking first — coming.\" },\n        { id: \"blocks\", size: \"md\", title: \"Open building blocks\", text: \"Users, billing, notifications — on Maven Central and npm.\" },\n        { id: \"ui\", size: \"md\", title: \"One design system\", text: \"Krizaka UI, web and mobile, documented from its code.\" },\n      ]}\n      closing={{ title: \"Something to build together?\", body: \"Tell us what you need; a person answers within two days.\", actions: <Button variant=\"primary\" size=\"lg\" shape=\"cut\">Contact us</Button> }}\n    />\n  );\n}\n"
+    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { LandingPage } from \"@krizaka/ui/landing-page\";\nimport { Meter } from \"@krizaka/ui/meter\";\n\n// TEMPLATE — a company's landing (krizaka.com): the promise beside the product alive, a band of proofs, the features\n// as a bento where the main one takes the room, the closing call. On a phone the window follows the words, the bento\n// is one column, the proofs stack.\nexport default function LandingPageKrizaka() {\n  return (\n    <LandingPage\n      eyebrow=\"Software studio · Montréal\"\n      title=\"Products that keep what is yours\"\n      lead=\"Krizaka builds sovereign AI and a platform where creators are paid — open source, on your servers or ours.\"\n      actions={\n        <>\n          <Button variant=\"primary\" size=\"lg\">See the products</Button>\n          <Button variant=\"secondary\" size=\"lg\">Read the docs</Button>\n        </>\n      }\n      visualLabel=\"orazaka.local — console\"\n      visual={\n        <div className=\"grid gap-3 p-5\">\n          <p className=\"font-mono text-xs text-fg-secondary\">$ npx orazaka install</p>\n          <p className=\"font-mono text-xs text-fg-success\">✓ 1,284 answers this week, none left the server</p>\n          <Meter label=\"Credits\" value={3800} max={12000} valueText=\"3,800 of 12,000\" showLabel />\n        </div>\n      }\n      proofs={[\n        { value: \"34\", label: \"public repositories\" },\n        { value: \"Apache-2.0\", label: \"every line\" },\n        { value: \"0\", label: \"telemetry calls\" },\n      ]}\n      featuresHeading={{ eyebrow: \"What we build\", title: \"Three products, one way of building\" }}\n      features={[\n        { id: \"orazaka\", size: \"lg\", title: \"Orazaka — the AI that never leaves home\", text: \"Chat, image, voice and video on your own server, one governed pipeline.\" },\n        { id: \"orochia\", title: \"Orochia\", text: \"Creators paid 90 % of what fans spend.\" },\n        { id: \"yasakia\", title: \"Yasakia\", text: \"Meet by talking first — coming.\" },\n        { id: \"blocks\", size: \"md\", title: \"Open building blocks\", text: \"Users, billing, notifications — on Maven Central and npm.\" },\n        { id: \"ui\", size: \"md\", title: \"One design system\", text: \"Krizaka UI, web and mobile, documented from its code.\" },\n      ]}\n      closing={{ title: \"Something to build together?\", body: \"Tell us what you need; a person answers within two days.\", actions: <Button variant=\"primary\" size=\"lg\">Contact us</Button> }}\n    />\n  );\n}\n"
   },
   "props": [
     {