@krizaka/ui 2.2.0 → 2.4.0

package/registry/iso.json

@@ -0,0 +1,1355 @@
+{
+  "name": "iso",
+  "type": "primitive",
+  "title": "Iso",
+  "summary": "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.",
+  "description": "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.",
+  "status": "beta",
+  "category": "layout",
+  "platforms": "web",
+  "whenToUse": [
+    "The hero illustration of a product or marketing page: what the product is, drawn as one object with two to four satellites.",
+    "To show a flow toward or out of something (requests into a server, support toward a creator) with values written on it.",
+    "An architecture teaser where a diagram would be too much: one object per layer, named on hover and focus."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For a real architecture or data flow the reader must study: draw a schema with a text version."
+    },
+    {
+      "when": "As the background of a section: the light, the dome and the grid of a backdrop are lighter.",
+      "use": "section-backdrop"
+    },
+    {
+      "when": "More than one per screen: the hero object is unique, the rest of the page stays calm."
+    }
+  ],
+  "bestPractices": [
+    "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.",
+    "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.",
+    "Put the scene in a brand (`.brand-<id>`): the light, the core and the flows follow the accent, in both themes.",
+    "Composing by hand: paint back to front, and number the entrance with `index` so objects rise in a meaningful order.",
+    "Pass words translated: labels, values on links, the highlight."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Tab",
+        "action": "Visits each named object of the scene: it lifts and shows its label, as under the pointer."
+      }
+    ],
+    "notes": [
+      "A named scene is a `group` with its `label` and its `description` (`<desc>`); an unnamed one is decorative (`aria-hidden`).",
+      "Each named object is an image (`role=\"img\"`) named by its label and focusable; the drawn labels are decorative copies.",
+      "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.",
+      "Server-rendered static SVG, no client JavaScript; with `MotionObserver` mounted its loops pause off screen and wait for the page to settle."
+    ]
+  },
+  "related": [
+    "section-backdrop",
+    "number-ticker"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/iso",
+    "import": "import { IsoHub, IsoScene, IsoPrism, IsoStack, IsoDome, IsoTile, IsoLink, IsoNode, IsoLabel } from \"@krizaka/ui/iso\";",
+    "props": [
+      {
+        "component": "IsoDome",
+        "description": "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\nbefore the objects it covers and the dome after them (`part=\"rim\"`, `part=\"arc\"`), or let `IsoHub` do it.",
+        "props": [
+          {
+            "name": "animated",
+            "type": "boolean",
+            "default": "true",
+            "description": "Motion: a sheen travels along the dome. `false` keeps it still.",
+            "required": false
+          },
+          {
+            "name": "at",
+            "type": "Vec2",
+            "default": "[0, 0]",
+            "description": "Its centre on the floor plan.",
+            "required": false
+          },
+          {
+            "name": "height",
+            "type": "number",
+            "default": "250",
+            "description": "Its height.",
+            "required": false
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "Its name (\"Your infrastructure\") — passed translated; shown at the top of the dome, always.",
+            "required": false
+          },
+          {
+            "name": "part",
+            "type": "\"both\" | \"rim\" | \"arc\"",
+            "default": "both",
+            "description": "`rim` (the floor ellipse, drawn first), `arc` (the glass, drawn last) or `both`.",
+            "required": false
+          },
+          {
+            "name": "radius",
+            "type": "number",
+            "default": "158",
+            "description": "The radius of its rim on the floor.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "IsoHub",
+        "description": "The hero, driven by data: a stack under an optional dome, satellites on both sides, a flow of light between each\nsatellite and the centre. Objects are painted back to front and the camera frames exactly what is drawn.",
+        "props": [
+          {
+            "name": "layers",
+            "type": "readonly IsoLayer[]",
+            "default": null,
+            "description": "The hero object in the centre: its stages, bottom first.",
+            "required": true
+          },
+          {
+            "name": "angles",
+            "type": "readonly number[]",
+            "default": null,
+            "description": "The angle of each satellite, in degrees (0: lower right, 90: lower left, 180: upper left, 270: upper right), to place them by hand.",
+            "required": false
+          },
+          {
+            "name": "animated",
+            "type": "boolean",
+            "default": "true",
+            "description": "Motion (entrance, breathing, flow, float). `false` draws the still frame — the one prefers-reduced-motion shows.",
+            "required": false
+          },
+          {
+            "name": "core",
+            "type": "string | boolean",
+            "default": "true",
+            "description": "A lit core on top of the stack; a string names it.",
+            "required": false
+          },
+          {
+            "name": "description",
+            "type": "string",
+            "default": null,
+            "description": "A longer text version of what the scene shows, read by assistive technology.",
+            "required": false
+          },
+          {
+            "name": "dome",
+            "type": "string | boolean",
+            "default": null,
+            "description": "A dome over the centre: `true`, or its name (\"Your servers\").",
+            "required": false
+          },
+          {
+            "name": "extent",
+            "type": "number",
+            "default": "240",
+            "description": "Half the size of the floor, in world units: what the camera frames.",
+            "required": false
+          },
+          {
+            "name": "grid",
+            "type": "boolean",
+            "default": "true",
+            "description": "The perspective grid on the floor, fading into the page.",
+            "required": false
+          },
+          {
+            "name": "highlight",
+            "type": "{ readonly strong?: string; readonly text: string; }",
+            "default": null,
+            "description": "A label pinned above the centre, its first part in the accent: `{ strong: \"90 %\", text: \"to the creator\" }`.",
+            "required": false
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The accessible name of the scene (\"A server stack under a dome\") — passed translated. Without it the scene is decorative.",
+            "required": false
+          },
+          {
+            "name": "radius",
+            "type": "number",
+            "default": "210",
+            "description": "The distance of the satellites from the centre.",
+            "required": false
+          },
+          {
+            "name": "satellites",
+            "type": "readonly IsoSatellite[]",
+            "default": "[]",
+            "description": "The objects around the centre, joined to it by flows of light. The first half stands on the left, the rest on the\nright, top to bottom: never in front of the hero, never hidden behind it.",
+            "required": false
+          },
+          {
+            "name": "shape",
+            "type": "IsoShape",
+            "default": "cut",
+            "description": "The footprint of the stages.",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "number",
+            "default": "120",
+            "description": "The width of the stages.",
+            "required": false
+          },
+          {
+            "name": "step",
+            "type": "number",
+            "default": "40",
+            "description": "The spacing of the grid's lines.",
+            "required": false
+          },
+          {
+            "name": "top",
+            "type": "number",
+            "default": "260",
+            "description": "Height above the floor the camera keeps in view, in world units.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "IsoLabel",
+        "description": "A label in a pill, always visible, pinned to a point of the scene (a share, a name).",
+        "props": [
+          {
+            "name": "at",
+            "type": "Vec2",
+            "default": null,
+            "description": "Where, on the floor plan.",
+            "required": true
+          },
+          {
+            "name": "text",
+            "type": "string",
+            "default": null,
+            "description": "The text — passed translated.",
+            "required": true
+          },
+          {
+            "name": "strong",
+            "type": "string",
+            "default": null,
+            "description": "A first part in the accent, bolder (\"90 %\" before \" to the creator\").",
+            "required": false
+          },
+          {
+            "name": "z",
+            "type": "number",
+            "default": "0",
+            "description": "Its height.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "IsoLink",
+        "description": "A dotted link on the floor, light flowing along it and particles crossing it — a flow between two objects.",
+        "props": [
+          {
+            "name": "from",
+            "type": "Vec2",
+            "default": null,
+            "description": "Where it starts, on the floor plan.",
+            "required": true
+          },
+          {
+            "name": "to",
+            "type": "Vec2",
+            "default": null,
+            "description": "Where it ends, on the floor plan.",
+            "required": true
+          },
+          {
+            "name": "animated",
+            "type": "boolean",
+            "default": "true",
+            "description": "Motion: the flow and the particles. `false` draws them still, resting along the link.",
+            "required": false
+          },
+          {
+            "name": "direction",
+            "type": "\"in\" | \"out\"",
+            "default": "out",
+            "description": "Which way the light flows: `out` from `from` to `to`, `in` back.",
+            "required": false
+          },
+          {
+            "name": "duration",
+            "type": "number",
+            "default": "3.6",
+            "description": "Seconds a particle takes to cross it.",
+            "required": false
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "A value written on it (\"90 %\", \"Tips\") — passed translated.",
+            "required": false
+          },
+          {
+            "name": "particles",
+            "type": "number",
+            "default": "2",
+            "description": "Particles of light travelling along it (0: only the dashes flow).",
+            "required": false
+          },
+          {
+            "name": "route",
+            "type": "\"elbow\" | \"straight\"",
+            "default": "elbow",
+            "description": "`elbow` follows the floor's axes, like a circuit; `straight` goes directly.",
+            "required": false
+          },
+          {
+            "name": "z",
+            "type": "number",
+            "default": "0",
+            "description": "The height it runs at.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "IsoNode",
+        "description": "The Krizaka node: a point of light in the accent, breathing in its glow.",
+        "props": [
+          {
+            "name": "animated",
+            "type": "boolean",
+            "default": "true",
+            "description": "Motion: the glow breathes. `false` keeps it still.",
+            "required": false
+          },
+          {
+            "name": "at",
+            "type": "Vec2",
+            "default": "[0, 0]",
+            "description": "Where, on the floor plan.",
+            "required": false
+          },
+          {
+            "name": "glow",
+            "type": "number",
+            "default": "70",
+            "description": "The radius of its glow (0: none).",
+            "required": false
+          },
+          {
+            "name": "index",
+            "type": "number",
+            "default": "0",
+            "description": "Its rank in the entrance.",
+            "required": false
+          },
+          {
+            "name": "r",
+            "type": "number",
+            "default": "7",
+            "description": "The radius of the node.",
+            "required": false
+          },
+          {
+            "name": "z",
+            "type": "number",
+            "default": "0",
+            "description": "Its height.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "IsoPrism",
+        "description": "A vertical prism — hexagonal, cut-corner or rectangular — that stacks with others on `z`.",
+        "props": [
+          {
+            "name": "height",
+            "type": "number",
+            "default": null,
+            "description": "Its height.",
+            "required": true
+          },
+          {
+            "name": "animated",
+            "type": "boolean",
+            "default": "true",
+            "description": "Motion: entrance and loops. `false` keeps this object still.",
+            "required": false
+          },
+          {
+            "name": "at",
+            "type": "Vec2",
+            "default": "[0, 0]",
+            "description": "The centre of its footprint on the floor plan (x, y).",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Extra classes on the object's group.",
+            "required": false
+          },
+          {
+            "name": "cut",
+            "type": "number",
+            "default": null,
+            "description": "The size of the 45° cut (`shape=\"cut\"`); a sixth of the smaller side by default.",
+            "required": false
+          },
+          {
+            "name": "index",
+            "type": "number",
+            "default": "0",
+            "description": "Its rank in the entrance: objects rise into place one after the other.",
+            "required": false
+          },
+          {
+            "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.",
+            "required": false
+          },
+          {
+            "name": "material",
+            "type": "IsoMaterial",
+            "default": "base",
+            "description": "How it is lit.",
+            "required": false
+          },
+          {
+            "name": "shape",
+            "type": "IsoShape",
+            "default": "cut",
+            "description": "hex · cut (45° cut corners) · rect.",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "number | Vec2",
+            "default": "120",
+            "description": "Its width (a number: square or hexagon's diameter) or width × depth.",
+            "required": false
+          },
+          {
+            "name": "strip",
+            "type": "boolean",
+            "default": null,
+            "description": "A dotted light strip around its front (the LEDs of a server), blinking slowly.",
+            "required": false
+          },
+          {
+            "name": "z",
+            "type": "number",
+            "default": "0",
+            "description": "The height of its base above the floor.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "IsoScene",
+        "description": "The stage: an isometric camera over a perspective grid that fades into the page. Its animations pause off screen and\nwait for the page to settle (MotionObserver); everything stops under prefers-reduced-motion.",
+        "props": [
+          {
+            "name": "animated",
+            "type": "boolean",
+            "default": "true",
+            "description": "Motion (entrance, breathing, flow, float). `false` draws the still frame — the one prefers-reduced-motion shows.",
+            "required": false
+          },
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The objects, painted in order: put the farthest first (or use `IsoHub`, which sorts them).",
+            "required": false
+          },
+          {
+            "name": "description",
+            "type": "string",
+            "default": null,
+            "description": "A longer text version of what the scene shows, read by assistive technology.",
+            "required": false
+          },
+          {
+            "name": "extent",
+            "type": "number",
+            "default": "240",
+            "description": "Half the size of the floor, in world units: what the camera frames.",
+            "required": false
+          },
+          {
+            "name": "grid",
+            "type": "boolean",
+            "default": "true",
+            "description": "The perspective grid on the floor, fading into the page.",
+            "required": false
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The accessible name of the scene (\"A server stack under a dome\") — passed translated. Without it the scene is decorative.",
+            "required": false
+          },
+          {
+            "name": "step",
+            "type": "number",
+            "default": "40",
+            "description": "The spacing of the grid's lines.",
+            "required": false
+          },
+          {
+            "name": "top",
+            "type": "number",
+            "default": "260",
+            "description": "Height above the floor the camera keeps in view, in world units.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "IsoStack",
+        "description": "A stack of stages on a plinth with a lit core on top — a server, a model, a pile of layers — driven by data.",
+        "props": [
+          {
+            "name": "layers",
+            "type": "readonly IsoLayer[]",
+            "default": null,
+            "description": "The stages, bottom first; they stack one after the other at the entrance.",
+            "required": true
+          },
+          {
+            "name": "animated",
+            "type": "boolean",
+            "default": "true",
+            "description": "Motion: entrance and loops. `false` keeps the stack still.",
+            "required": false
+          },
+          {
+            "name": "at",
+            "type": "Vec2",
+            "default": "[0, 0]",
+            "description": "The centre of the stack on the floor plan.",
+            "required": false
+          },
+          {
+            "name": "core",
+            "type": "string | boolean",
+            "default": "true",
+            "description": "A lit hexagonal core on top, its node glowing; a string names it.",
+            "required": false
+          },
+          {
+            "name": "gap",
+            "type": "number",
+            "default": "4",
+            "description": "The space between two stages.",
+            "required": false
+          },
+          {
+            "name": "index",
+            "type": "number",
+            "default": "0",
+            "description": "The rank of the first stage in the scene's entrance.",
+            "required": false
+          },
+          {
+            "name": "plinth",
+            "type": "boolean",
+            "default": "true",
+            "description": "A hexagonal plinth under the stack.",
+            "required": false
+          },
+          {
+            "name": "shape",
+            "type": "IsoShape",
+            "default": "cut",
+            "description": "The footprint of the stages.",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "number",
+            "default": "120",
+            "description": "The width of the stages.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "IsoTile",
+        "description": "A satellite: a thin cut-corner tile that floats beside the hero object, a pictogram on its top.",
+        "props": [
+          {
+            "name": "at",
+            "type": "Vec2",
+            "default": null,
+            "description": "Its centre on the floor plan.",
+            "required": true
+          },
+          {
+            "name": "animated",
+            "type": "boolean",
+            "default": "true",
+            "description": "Motion: entrance and loops. `false` keeps this object still.",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Extra classes on the object's group.",
+            "required": false
+          },
+          {
+            "name": "float",
+            "type": "boolean",
+            "default": "true",
+            "description": "It floats gently.",
+            "required": false
+          },
+          {
+            "name": "glyph",
+            "type": "IsoGlyph",
+            "default": "none",
+            "description": "The pictogram on its top.",
+            "required": false
+          },
+          {
+            "name": "index",
+            "type": "number",
+            "default": "0",
+            "description": "Its rank in the entrance: objects rise into place one after the other.",
+            "required": false
+          },
+          {
+            "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.",
+            "required": false
+          },
+          {
+            "name": "material",
+            "type": "IsoMaterial",
+            "default": "accent",
+            "description": "How it is lit.",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "Vec2",
+            "default": "[76, 52]",
+            "description": "Width × depth.",
+            "required": false
+          },
+          {
+            "name": "z",
+            "type": "number",
+            "default": "90",
+            "description": "The height it floats at.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "orazaka-hero",
+        "title": "Sovereign servers (Orazaka)",
+        "description": "Three named stages under a dome, a lit core; chats and documents flow in, answers flow out. Hover or tab to explore.",
+        "path": "examples/iso/orazaka-hero.tsx",
+        "module": "@krizaka/ui/registry/examples/iso/orazaka-hero",
+        "code": "import { IsoHub } from \"@krizaka/ui/iso\";\n\n// Sovereign servers under a dome: three stages, a lit core, requests and documents flowing in, answers flowing out.\n// Wrap it in `.brand-orazaka` (or any brand) and the light follows the brand's accent.\nexport default function IsoOrazakaHero() {\n  return (\n    <IsoHub\n      label=\"Your AI runs on your own servers\"\n      description=\"A stack of three servers — gateway, models, data — under a dome; chats and documents flow in, answers flow out.\"\n      className=\"w-full max-w-xl\"\n      dome=\"Your infrastructure\"\n      layers={[{ label: \"Data\" }, { label: \"Models\" }, { label: \"Gateway\" }]}\n      core=\"Orchestrator\"\n      satellites={[\n        { label: \"Chats\", glyph: \"dots\", flow: \"in\" },\n        { label: \"Documents\", glyph: \"lines\", flow: \"in\", material: \"glass\" },\n        { label: \"Answers\", glyph: \"arrow\", flow: \"out\" },\n      ]}\n    />\n  );\n}\n"
+      },
+      {
+        "name": "orochia-hero",
+        "title": "Support toward a creator (Orochia)",
+        "description": "The creator in the centre, tips, unlocks, auctions and challenges flowing toward them, their amounts on the links, 90 % pinned above.",
+        "path": "examples/iso/orochia-hero.tsx",
+        "module": "@krizaka/ui/registry/examples/iso/orochia-hero",
+        "code": "import { IsoHub } from \"@krizaka/ui/iso\";\n\n// The creator at the centre; tips, unlocks, auctions and challenges flow toward them — and 90 % stays theirs.\nexport default function IsoOrochiaHero() {\n  return (\n    <IsoHub\n      label=\"Every support flows to the creator\"\n      description=\"A creator at the centre receives tips, unlocks, auction bids and challenge pledges; 90 % of each goes to them.\"\n      className=\"w-full max-w-xl\"\n      shape=\"hex\"\n      size={110}\n      layers={[{ label: \"Community\", height: 16 }, { label: \"Creator\", height: 44, material: \"accent2\" }]}\n      core=\"Payouts\"\n      highlight={{ strong: \"90 %\", text: \"to the creator\" }}\n      satellites={[\n        { label: \"Tips\", glyph: \"coin\", value: \"+ €5\" },\n        { label: \"Unlocks\", glyph: \"lock\", value: \"+ €3\" },\n        { label: \"Auctions\", glyph: \"arrow\", value: \"€120\" },\n        { label: \"Challenges\", glyph: \"flag\", value: \"€40\" },\n      ]}\n    />\n  );\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.",
+        "path": "examples/iso/compose.tsx",
+        "module": "@krizaka/ui/registry/examples/iso/compose",
+        "code": "import { IsoDome, IsoLink, IsoNode, IsoPrism, IsoScene, IsoTile } from \"@krizaka/ui/iso\";\n\n// The primitives, composed by hand: painted back to front, each object rising in turn (`index`).\nexport default function IsoCompose() {\n  return (\n    <IsoScene label=\"A model served from one node\" className=\"w-full max-w-md\" extent={230} top={190} viewBox=\"-260 -250 520 360\">\n      <IsoLink from={[-40, -190]} to={[-40, -60]} label=\"Prompt\" />\n      <IsoLink from={[60, 0]} to={[190, 0]} direction=\"out\" label=\"Answer\" />\n      <IsoDome radius={110} part=\"rim\" />\n      <IsoTile at={[-40, -190]} z={70} glyph=\"dots\" label=\"Chat\" index={0} />\n      <IsoPrism shape=\"hex\" size={170} height={12} index={1} />\n      <IsoPrism size={92} z={16} height={34} strip label=\"Model\" index={2} />\n      <IsoPrism shape=\"hex\" size={44} z={54} height={14} material=\"accent\" index={3} />\n      <IsoNode z={78} index={4} />\n      <IsoDome radius={110} height={170} part=\"arc\" />\n      <IsoTile at={[190, 0]} z={56} glyph=\"lines\" material=\"glass\" label=\"Document\" index={5} />\n    </IsoScene>\n  );\n}\n"
+      },
+      {
+        "name": "still",
+        "title": "Still frame",
+        "description": "`animated={false}`: the composed picture prefers-reduced-motion shows.",
+        "path": "examples/iso/still.tsx",
+        "module": "@krizaka/ui/registry/examples/iso/still",
+        "code": "import { IsoHub } from \"@krizaka/ui/iso\";\n\n// `animated={false}`: the still frame — the picture prefers-reduced-motion shows, composed, never cut mid-way.\nexport default function IsoStill() {\n  return (\n    <IsoHub\n      label=\"A server under a dome\"\n      className=\"w-full max-w-sm\"\n      animated={false}\n      dome\n      layers={[{}, {}]}\n      satellites={[{ label: \"Requests\", glyph: \"dots\" }, { label: \"Files\", glyph: \"lines\", material: \"glass\" }]}\n    />\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [
+    {
+      "path": "cx.ts",
+      "content": "/** Joins class names, skipping the falsy ones. */\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n  return parts.filter(Boolean).join(\" \");\n}\n"
+    },
+    {
+      "path": "iso/geometry.ts",
+      "content": "// Isometric projection, pure geometry (no React): the iso components compute their faces at render time — on the\n// server, as static markup. World: x to the lower right, y to the lower left, z up.\n// Screen: X = (x − y)·cos 30°, Y = (x + y)·sin 30° − z.\n\n/** A point in plan (x, y) or on screen (X, Y). */\nexport type Vec2 = readonly [number, number];\n/** A point in the world: x, y on the floor, z up. */\nexport type Vec3 = readonly [number, number, number];\n\nconst COS = Math.cos(Math.PI / 6);\nconst SIN = 0.5;\nconst f = (n: number) => (Math.round(n * 10) / 10).toString();\n\n/** The screen point of a world point. */\nexport function project([x, y, z]: Vec3): Vec2 {\n  return [(x - y) * COS, (x + y) * SIN - z];\n}\n\n/** SVG `points` of screen points. */\nexport const pts = (points: readonly Vec2[]) => points.map(([x, y]) => `${f(x)},${f(y)}`).join(\" \");\n\n/** An SVG path through screen points. */\nexport const pathOf = (points: readonly Vec2[], close = false) =>\n  points.map(([x, y], i) => `${i ? \"L\" : \"M\"}${f(x)} ${f(y)}`).join(\"\") + (close ? \"Z\" : \"\");\n\n/** A regular hexagon footprint (flat top in plan), centre (cx, cy), radius r. */\nexport function hexagon(cx: number, cy: number, r: number): Vec2[] {\n  return Array.from({ length: 6 }, (_, k) => {\n    const a = (Math.PI / 3) * k;\n    return [cx + r * Math.cos(a), cy + r * Math.sin(a)] as const;\n  });\n}\n\n/** A rectangle with 45° cut corners (the Krizaka chamfer), centre (cx, cy), size w × d, cut c (0: a plain rectangle). */\nexport function cutRect(cx: number, cy: number, w: number, d: number, c: number): Vec2[] {\n  const x0 = cx - w / 2;\n  const x1 = cx + w / 2;\n  const y0 = cy - d / 2;\n  const y1 = cy + d / 2;\n  if (c <= 0) return [[x0, y0], [x1, y0], [x1, y1], [x0, y1]];\n  return [[x0 + c, y0], [x1 - c, y0], [x1, y0 + c], [x1, y1 - c], [x1 - c, y1], [x0 + c, y1], [x0, y1 - c], [x0, y0 + c]];\n}\n\nexport interface Face {\n  /** SVG `points`. */\n  readonly points: string;\n  /** The top, or a side facing the left or the right light. */\n  readonly kind: \"top\" | \"left\" | \"right\";\n}\n\n/** The visible faces of a vertical prism over a footprint, painted back to front. */\nexport function prism(footprint: readonly Vec2[], z0: number, h: number): Face[] {\n  const n = footprint.length;\n  // The winding (shoelace) gives the outward normals whatever the order of the points.\n  const area = footprint.reduce((s, [x, y], i) => {\n    const [x2, y2] = footprint[(i + 1) % n]!;\n    return s + (x * y2 - x2 * y);\n  }, 0);\n  const sign = area > 0 ? 1 : -1;\n  const sides: { depth: number; face: Face }[] = [];\n  for (let i = 0; i < n; i++) {\n    const [ax, ay] = footprint[i]!;\n    const [bx, by] = footprint[(i + 1) % n]!;\n    const nx = sign * (by - ay);\n    const ny = sign * -(bx - ax);\n    if (nx + ny <= 1e-6) continue; // faces away from the viewer\n    const quad: Vec2[] = [project([ax, ay, z0]), project([bx, by, z0]), project([bx, by, z0 + h]), project([ax, ay, z0 + h])];\n    sides.push({ depth: ax + ay + bx + by, face: { points: pts(quad), kind: nx >= ny ? \"right\" : \"left\" } });\n  }\n  sides.sort((a, b) => a.depth - b.depth);\n  const top: Face = { points: pts(footprint.map(([x, y]) => project([x, y, z0 + h]))), kind: \"top\" };\n  return [...sides.map((s) => s.face), top];\n}\n\n/** The screen ellipse of a horizontal circle of radius r at height z: centre and radii. */\nexport function isoCircle(cx: number, cy: number, z: number, r: number) {\n  const [x, y] = project([cx, cy, z]);\n  return { cx: x, cy: y, rx: r * COS * Math.SQRT2, ry: r * SIN * Math.SQRT2 };\n}\n\n/** A point on a circle of the floor plan: angle in degrees, 0 toward the lower right (+x), clockwise on screen. */\nexport function onCircle(r: number, deg: number, [cx, cy]: Vec2 = [0, 0]): Vec2 {\n  const a = (deg * Math.PI) / 180;\n  return [cx + r * Math.cos(a), cy + r * Math.sin(a)];\n}\n\n/** Depth for the painter: larger is nearer the viewer. */\nexport const depthOf = ([x, y]: Vec2) => x + y;\n\n/** The view box that frames a floor of half-size `extent` and `top` units of height above it. */\nexport function viewBoxOf(extent: number, top: number, margin = 24): string {\n  const w = 2 * extent * COS + margin * 2;\n  return [-w / 2, -extent * SIN * 1.2 - top, w, extent * SIN * 2.4 + top].map(f).join(\" \");\n}\n"
+    },
+    {
+      "path": "iso/index.ts",
+      "content": "/**\n * @krizaka/ui/iso — the isometric kit: `IsoScene`, `IsoPrism`, `IsoStack`, `IsoDome`, `IsoTile`, `IsoLink`, `IsoNode`,\n * `IsoLabel`, and `IsoHub` (a hero driven by data). Server-safe: static SVG animated by motion.css.\n */\nexport { cutRect, hexagon, isoCircle, onCircle, project, type Vec2, type Vec3 } from \"./geometry\";\nexport {\n  IsoDome,\n  type IsoDomeProps,\n  type IsoGlyph,\n  IsoHub,\n  type IsoHubProps,\n  IsoLabel,\n  type IsoLabelProps,\n  type IsoLayer,\n  IsoLink,\n  type IsoLinkProps,\n  type IsoMaterial,\n  IsoNode,\n  type IsoNodeProps,\n  IsoPrism,\n  type IsoPrismProps,\n  type IsoSatellite,\n  IsoScene,\n  type IsoSceneProps,\n  type IsoShape,\n  IsoStack,\n  type IsoStackProps,\n  IsoTile,\n  type IsoTileProps,\n} from \"./iso\";\n"
+    },
+    {
+      "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"
+    },
+    {
+      "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  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"
+    },
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"alert\"\n  | \"audio-player\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"cn\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"loader\"\n  | \"marquee\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page-header\"\n  | \"pagination\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"theme\"\n  | \"toast\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/** The group of the catalogue. `media`: video, sound, camera, files, cropping. */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+    }
+  ],
+  "dependencies": [],
+  "registryDependencies": [],
+  "demo": {
+    "path": "examples/iso/orazaka-hero.tsx",
+    "content": "import { IsoHub } from \"@krizaka/ui/iso\";\n\n// Sovereign servers under a dome: three stages, a lit core, requests and documents flowing in, answers flowing out.\n// Wrap it in `.brand-orazaka` (or any brand) and the light follows the brand's accent.\nexport default function IsoOrazakaHero() {\n  return (\n    <IsoHub\n      label=\"Your AI runs on your own servers\"\n      description=\"A stack of three servers — gateway, models, data — under a dome; chats and documents flow in, answers flow out.\"\n      className=\"w-full max-w-xl\"\n      dome=\"Your infrastructure\"\n      layers={[{ label: \"Data\" }, { label: \"Models\" }, { label: \"Gateway\" }]}\n      core=\"Orchestrator\"\n      satellites={[\n        { label: \"Chats\", glyph: \"dots\", flow: \"in\" },\n        { label: \"Documents\", glyph: \"lines\", flow: \"in\", material: \"glass\" },\n        { label: \"Answers\", glyph: \"arrow\", flow: \"out\" },\n      ]}\n    />\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "IsoDome",
+      "description": "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\nbefore the objects it covers and the dome after them (`part=\"rim\"`, `part=\"arc\"`), or let `IsoHub` do it.",
+      "props": [
+        {
+          "name": "animated",
+          "type": "boolean",
+          "default": "true",
+          "description": "Motion: a sheen travels along the dome. `false` keeps it still.",
+          "required": false
+        },
+        {
+          "name": "at",
+          "type": "Vec2",
+          "default": "[0, 0]",
+          "description": "Its centre on the floor plan.",
+          "required": false
+        },
+        {
+          "name": "height",
+          "type": "number",
+          "default": "250",
+          "description": "Its height.",
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "Its name (\"Your infrastructure\") — passed translated; shown at the top of the dome, always.",
+          "required": false
+        },
+        {
+          "name": "part",
+          "type": "\"both\" | \"rim\" | \"arc\"",
+          "default": "both",
+          "description": "`rim` (the floor ellipse, drawn first), `arc` (the glass, drawn last) or `both`.",
+          "required": false
+        },
+        {
+          "name": "radius",
+          "type": "number",
+          "default": "158",
+          "description": "The radius of its rim on the floor.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "IsoHub",
+      "description": "The hero, driven by data: a stack under an optional dome, satellites on both sides, a flow of light between each\nsatellite and the centre. Objects are painted back to front and the camera frames exactly what is drawn.",
+      "props": [
+        {
+          "name": "layers",
+          "type": "readonly IsoLayer[]",
+          "default": null,
+          "description": "The hero object in the centre: its stages, bottom first.",
+          "required": true
+        },
+        {
+          "name": "angles",
+          "type": "readonly number[]",
+          "default": null,
+          "description": "The angle of each satellite, in degrees (0: lower right, 90: lower left, 180: upper left, 270: upper right), to place them by hand.",
+          "required": false
+        },
+        {
+          "name": "animated",
+          "type": "boolean",
+          "default": "true",
+          "description": "Motion (entrance, breathing, flow, float). `false` draws the still frame — the one prefers-reduced-motion shows.",
+          "required": false
+        },
+        {
+          "name": "core",
+          "type": "string | boolean",
+          "default": "true",
+          "description": "A lit core on top of the stack; a string names it.",
+          "required": false
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "default": null,
+          "description": "A longer text version of what the scene shows, read by assistive technology.",
+          "required": false
+        },
+        {
+          "name": "dome",
+          "type": "string | boolean",
+          "default": null,
+          "description": "A dome over the centre: `true`, or its name (\"Your servers\").",
+          "required": false
+        },
+        {
+          "name": "extent",
+          "type": "number",
+          "default": "240",
+          "description": "Half the size of the floor, in world units: what the camera frames.",
+          "required": false
+        },
+        {
+          "name": "grid",
+          "type": "boolean",
+          "default": "true",
+          "description": "The perspective grid on the floor, fading into the page.",
+          "required": false
+        },
+        {
+          "name": "highlight",
+          "type": "{ readonly strong?: string; readonly text: string; }",
+          "default": null,
+          "description": "A label pinned above the centre, its first part in the accent: `{ strong: \"90 %\", text: \"to the creator\" }`.",
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The accessible name of the scene (\"A server stack under a dome\") — passed translated. Without it the scene is decorative.",
+          "required": false
+        },
+        {
+          "name": "radius",
+          "type": "number",
+          "default": "210",
+          "description": "The distance of the satellites from the centre.",
+          "required": false
+        },
+        {
+          "name": "satellites",
+          "type": "readonly IsoSatellite[]",
+          "default": "[]",
+          "description": "The objects around the centre, joined to it by flows of light. The first half stands on the left, the rest on the\nright, top to bottom: never in front of the hero, never hidden behind it.",
+          "required": false
+        },
+        {
+          "name": "shape",
+          "type": "IsoShape",
+          "default": "cut",
+          "description": "The footprint of the stages.",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "default": "120",
+          "description": "The width of the stages.",
+          "required": false
+        },
+        {
+          "name": "step",
+          "type": "number",
+          "default": "40",
+          "description": "The spacing of the grid's lines.",
+          "required": false
+        },
+        {
+          "name": "top",
+          "type": "number",
+          "default": "260",
+          "description": "Height above the floor the camera keeps in view, in world units.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "IsoLabel",
+      "description": "A label in a pill, always visible, pinned to a point of the scene (a share, a name).",
+      "props": [
+        {
+          "name": "at",
+          "type": "Vec2",
+          "default": null,
+          "description": "Where, on the floor plan.",
+          "required": true
+        },
+        {
+          "name": "text",
+          "type": "string",
+          "default": null,
+          "description": "The text — passed translated.",
+          "required": true
+        },
+        {
+          "name": "strong",
+          "type": "string",
+          "default": null,
+          "description": "A first part in the accent, bolder (\"90 %\" before \" to the creator\").",
+          "required": false
+        },
+        {
+          "name": "z",
+          "type": "number",
+          "default": "0",
+          "description": "Its height.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "IsoLink",
+      "description": "A dotted link on the floor, light flowing along it and particles crossing it — a flow between two objects.",
+      "props": [
+        {
+          "name": "from",
+          "type": "Vec2",
+          "default": null,
+          "description": "Where it starts, on the floor plan.",
+          "required": true
+        },
+        {
+          "name": "to",
+          "type": "Vec2",
+          "default": null,
+          "description": "Where it ends, on the floor plan.",
+          "required": true
+        },
+        {
+          "name": "animated",
+          "type": "boolean",
+          "default": "true",
+          "description": "Motion: the flow and the particles. `false` draws them still, resting along the link.",
+          "required": false
+        },
+        {
+          "name": "direction",
+          "type": "\"in\" | \"out\"",
+          "default": "out",
+          "description": "Which way the light flows: `out` from `from` to `to`, `in` back.",
+          "required": false
+        },
+        {
+          "name": "duration",
+          "type": "number",
+          "default": "3.6",
+          "description": "Seconds a particle takes to cross it.",
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "A value written on it (\"90 %\", \"Tips\") — passed translated.",
+          "required": false
+        },
+        {
+          "name": "particles",
+          "type": "number",
+          "default": "2",
+          "description": "Particles of light travelling along it (0: only the dashes flow).",
+          "required": false
+        },
+        {
+          "name": "route",
+          "type": "\"elbow\" | \"straight\"",
+          "default": "elbow",
+          "description": "`elbow` follows the floor's axes, like a circuit; `straight` goes directly.",
+          "required": false
+        },
+        {
+          "name": "z",
+          "type": "number",
+          "default": "0",
+          "description": "The height it runs at.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "IsoNode",
+      "description": "The Krizaka node: a point of light in the accent, breathing in its glow.",
+      "props": [
+        {
+          "name": "animated",
+          "type": "boolean",
+          "default": "true",
+          "description": "Motion: the glow breathes. `false` keeps it still.",
+          "required": false
+        },
+        {
+          "name": "at",
+          "type": "Vec2",
+          "default": "[0, 0]",
+          "description": "Where, on the floor plan.",
+          "required": false
+        },
+        {
+          "name": "glow",
+          "type": "number",
+          "default": "70",
+          "description": "The radius of its glow (0: none).",
+          "required": false
+        },
+        {
+          "name": "index",
+          "type": "number",
+          "default": "0",
+          "description": "Its rank in the entrance.",
+          "required": false
+        },
+        {
+          "name": "r",
+          "type": "number",
+          "default": "7",
+          "description": "The radius of the node.",
+          "required": false
+        },
+        {
+          "name": "z",
+          "type": "number",
+          "default": "0",
+          "description": "Its height.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "IsoPrism",
+      "description": "A vertical prism — hexagonal, cut-corner or rectangular — that stacks with others on `z`.",
+      "props": [
+        {
+          "name": "height",
+          "type": "number",
+          "default": null,
+          "description": "Its height.",
+          "required": true
+        },
+        {
+          "name": "animated",
+          "type": "boolean",
+          "default": "true",
+          "description": "Motion: entrance and loops. `false` keeps this object still.",
+          "required": false
+        },
+        {
+          "name": "at",
+          "type": "Vec2",
+          "default": "[0, 0]",
+          "description": "The centre of its footprint on the floor plan (x, y).",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Extra classes on the object's group.",
+          "required": false
+        },
+        {
+          "name": "cut",
+          "type": "number",
+          "default": null,
+          "description": "The size of the 45° cut (`shape=\"cut\"`); a sixth of the smaller side by default.",
+          "required": false
+        },
+        {
+          "name": "index",
+          "type": "number",
+          "default": "0",
+          "description": "Its rank in the entrance: objects rise into place one after the other.",
+          "required": false
+        },
+        {
+          "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.",
+          "required": false
+        },
+        {
+          "name": "material",
+          "type": "IsoMaterial",
+          "default": "base",
+          "description": "How it is lit.",
+          "required": false
+        },
+        {
+          "name": "shape",
+          "type": "IsoShape",
+          "default": "cut",
+          "description": "hex · cut (45° cut corners) · rect.",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "number | Vec2",
+          "default": "120",
+          "description": "Its width (a number: square or hexagon's diameter) or width × depth.",
+          "required": false
+        },
+        {
+          "name": "strip",
+          "type": "boolean",
+          "default": null,
+          "description": "A dotted light strip around its front (the LEDs of a server), blinking slowly.",
+          "required": false
+        },
+        {
+          "name": "z",
+          "type": "number",
+          "default": "0",
+          "description": "The height of its base above the floor.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "IsoScene",
+      "description": "The stage: an isometric camera over a perspective grid that fades into the page. Its animations pause off screen and\nwait for the page to settle (MotionObserver); everything stops under prefers-reduced-motion.",
+      "props": [
+        {
+          "name": "animated",
+          "type": "boolean",
+          "default": "true",
+          "description": "Motion (entrance, breathing, flow, float). `false` draws the still frame — the one prefers-reduced-motion shows.",
+          "required": false
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The objects, painted in order: put the farthest first (or use `IsoHub`, which sorts them).",
+          "required": false
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "default": null,
+          "description": "A longer text version of what the scene shows, read by assistive technology.",
+          "required": false
+        },
+        {
+          "name": "extent",
+          "type": "number",
+          "default": "240",
+          "description": "Half the size of the floor, in world units: what the camera frames.",
+          "required": false
+        },
+        {
+          "name": "grid",
+          "type": "boolean",
+          "default": "true",
+          "description": "The perspective grid on the floor, fading into the page.",
+          "required": false
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The accessible name of the scene (\"A server stack under a dome\") — passed translated. Without it the scene is decorative.",
+          "required": false
+        },
+        {
+          "name": "step",
+          "type": "number",
+          "default": "40",
+          "description": "The spacing of the grid's lines.",
+          "required": false
+        },
+        {
+          "name": "top",
+          "type": "number",
+          "default": "260",
+          "description": "Height above the floor the camera keeps in view, in world units.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "IsoStack",
+      "description": "A stack of stages on a plinth with a lit core on top — a server, a model, a pile of layers — driven by data.",
+      "props": [
+        {
+          "name": "layers",
+          "type": "readonly IsoLayer[]",
+          "default": null,
+          "description": "The stages, bottom first; they stack one after the other at the entrance.",
+          "required": true
+        },
+        {
+          "name": "animated",
+          "type": "boolean",
+          "default": "true",
+          "description": "Motion: entrance and loops. `false` keeps the stack still.",
+          "required": false
+        },
+        {
+          "name": "at",
+          "type": "Vec2",
+          "default": "[0, 0]",
+          "description": "The centre of the stack on the floor plan.",
+          "required": false
+        },
+        {
+          "name": "core",
+          "type": "string | boolean",
+          "default": "true",
+          "description": "A lit hexagonal core on top, its node glowing; a string names it.",
+          "required": false
+        },
+        {
+          "name": "gap",
+          "type": "number",
+          "default": "4",
+          "description": "The space between two stages.",
+          "required": false
+        },
+        {
+          "name": "index",
+          "type": "number",
+          "default": "0",
+          "description": "The rank of the first stage in the scene's entrance.",
+          "required": false
+        },
+        {
+          "name": "plinth",
+          "type": "boolean",
+          "default": "true",
+          "description": "A hexagonal plinth under the stack.",
+          "required": false
+        },
+        {
+          "name": "shape",
+          "type": "IsoShape",
+          "default": "cut",
+          "description": "The footprint of the stages.",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "default": "120",
+          "description": "The width of the stages.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "IsoTile",
+      "description": "A satellite: a thin cut-corner tile that floats beside the hero object, a pictogram on its top.",
+      "props": [
+        {
+          "name": "at",
+          "type": "Vec2",
+          "default": null,
+          "description": "Its centre on the floor plan.",
+          "required": true
+        },
+        {
+          "name": "animated",
+          "type": "boolean",
+          "default": "true",
+          "description": "Motion: entrance and loops. `false` keeps this object still.",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Extra classes on the object's group.",
+          "required": false
+        },
+        {
+          "name": "float",
+          "type": "boolean",
+          "default": "true",
+          "description": "It floats gently.",
+          "required": false
+        },
+        {
+          "name": "glyph",
+          "type": "IsoGlyph",
+          "default": "none",
+          "description": "The pictogram on its top.",
+          "required": false
+        },
+        {
+          "name": "index",
+          "type": "number",
+          "default": "0",
+          "description": "Its rank in the entrance: objects rise into place one after the other.",
+          "required": false
+        },
+        {
+          "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.",
+          "required": false
+        },
+        {
+          "name": "material",
+          "type": "IsoMaterial",
+          "default": "accent",
+          "description": "How it is lit.",
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "Vec2",
+          "default": "[76, 52]",
+          "description": "Width × depth.",
+          "required": false
+        },
+        {
+          "name": "z",
+          "type": "number",
+          "default": "90",
+          "description": "The height it floats at.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}