@krizaka/ui 3.29.0 → 3.31.0

package/registry/card-grid.json

@@ -2,8 +2,8 @@
   "name": "card-grid",
   "type": "primitive",
   "title": "Card grid",
-  "summary": "A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal and the light that follows the pointer.",
-  "description": "A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal and the light that follows the pointer.",
+  "summary": "A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal; each card keeps its own quiet hover.",
+  "description": "A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal; each card keeps its own quiet hover.",
   "status": "beta",
   "deprecated": null,
   "category": "blocks",
@@ -42,21 +42,19 @@
     "Keep `reveal` on below the first screen, off on it; `columns` makes the stagger restart on each row.",
     "The default `align=\"stretch\"` gives a row one height; the cards pin their foot to the bottom (`LinkCard` facts + way in, `ArgumentCard` actions) so the footers line up. `align=\"start\"` for cards that unfold.",
     "`as=\"ul\"` when the cards are a list of links.",
-    "`hover=\"quiet\"` quiets every card of the grid (no glow, a 2 px lift, a ring on focus); a card may still say `hover=\"light\"`.",
     "`foundation` when one thing (an engine, a platform) carries all the others: it takes its own card, wide, above (`foundationPosition=\"end\"` for under), and the cards sit in a hairline frame joined to it. Say the relation with `foundationLabel`; set the hue on `className`."
   ],
   "accessibility": {
     "keyboard": [],
     "notes": [
       "The grid adds no role; `as=\"ul\"` makes it a list (each cell an `li`).",
-      "The pointer's light is decorative and never runs on touch screens or under `prefers-reduced-motion`.",
+      "Nothing follows the pointer: `light` and `hover` are deprecated since 3.31 (krizaka-ui#393) and do nothing.",
       "Revealed cells are only hidden visually until they enter the viewport; under reduced motion they never move."
     ]
   },
   "related": [
     "link-card",
-    "argument-card",
-    "pointer-light"
+    "argument-card"
   ],
   "web": {
     "entry": "@krizaka/ui/card-grid",
@@ -64,7 +62,7 @@
     "props": [
       {
         "component": "CardGrid",
-        "description": "A responsive grid of cards: equal rows, a staggered reveal, the pointer's light.",
+        "description": "A responsive grid of cards: equal rows, a staggered reveal.",
         "props": [
           {
             "name": "children",
@@ -125,15 +123,15 @@
           {
             "name": "hover",
             "type": "CardHover",
-            "default": "light",
-            "description": "The hover of every card of the grid: `light` (the pointer's light, the default) or `quiet` (no glow, a 2 px lift, a\nring on focus). A card that sets its own `hover` keeps it.",
+            "default": null,
+            "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — every card has the one quiet hover. Removed in 4.0.",
             "required": false
           },
           {
             "name": "light",
             "type": "boolean",
-            "default": "true",
-            "description": "The light that follows the pointer over the cards (`[data-kz-light]`).",
+            "default": null,
+            "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — no light follows the pointer. Removed in 4.0.",
             "required": false
           },
           {
@@ -188,11 +186,11 @@
       },
       {
         "name": "hover-quiet",
-        "title": "A quiet grid",
-        "description": "`hover=\"quiet\"` on the grid: its cards lift without glow, with a ring on focus.",
+        "title": "The hover",
+        "description": "The grid adds no hover: each card's surface and hairline go one step up, a ring on focus.",
         "path": "examples/card-grid/hover-quiet.tsx",
         "module": "@krizaka/ui/registry/examples/card-grid/hover-quiet",
-        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { LinkCard } from \"@krizaka/ui/link-card\";\n\nconst shortcuts = [\n  { id: \"cli\", logo: \"orazaka\", title: \"The CLI\", text: \"npx orazaka install, start, dev — then every command and option.\" },\n  { id: \"packs\", logo: \"orazaka\", title: \"Packs & Studios\", text: \"The business offers Orazaka installs without code.\" },\n  { id: \"admin\", logo: \"orochia\", title: \"Orochia admin console\", text: \"Verification, moderation, payouts — behind four gates.\" },\n] as const;\n\n// A whole grid quiet: `hover=\"quiet\"` on the grid, the cards inherit it (a card can still say `hover=\"light\"`).\nexport default function CardGridHoverQuiet() {\n  return (\n    <CardGrid className=\"w-full max-w-4xl\" min={260} reveal={false} hover=\"quiet\">\n      {shortcuts.map((s) => (\n        <LinkCard key={s.id} href={`#${s.id}`} icon={<ProductLogo id={s.logo} size={24} animated={false} />} title={s.title} description={s.text} cta=\"Open\" />\n      ))}\n    </CardGrid>\n  );\n}\n"
+        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { LinkCard } from \"@krizaka/ui/link-card\";\n\nconst shortcuts = [\n  { id: \"cli\", logo: \"orazaka\", title: \"The CLI\", text: \"npx orazaka install, start, dev — then every command and option.\" },\n  { id: \"packs\", logo: \"orazaka\", title: \"Packs & Studios\", text: \"The business offers Orazaka installs without code.\" },\n  { id: \"admin\", logo: \"orochia\", title: \"Orochia admin console\", text: \"Verification, moderation, payouts — behind four gates.\" },\n] as const;\n\n// A whole grid quiet: `hover=\"quiet\"` on the grid, the cards inherit it (a card can still say `hover=\"light\"`).\nexport default function CardGridHoverQuiet() {\n  return (\n    <CardGrid className=\"w-full max-w-4xl\" min={260} reveal={false}>\n      {shortcuts.map((s) => (\n        <LinkCard key={s.id} href={`#${s.id}`} icon={<ProductLogo id={s.logo} size={24} animated={false} />} title={s.title} description={s.text} cta=\"Open\" />\n      ))}\n    </CardGrid>\n  );\n}\n"
       }
     ]
   },
@@ -200,15 +198,15 @@
   "files": [
     {
       "path": "card-grid/card-grid.tsx",
-      "content": "// Client (the pointer's light). A responsive grid of cards (blocks.css): one column on a phone, the cells of a row\n// share their height, each card rises once as it enters the viewport — staggered by column — and the pointer carries a\n// light over the card it is on.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport type { CardHover } from \"../link-card/link-card\";\nimport { POINTER_LIGHT_TARGET, usePointerLight } from \"../pointer-light/pointer-light\";\n\nconst STEP_MS = 70;\n\nexport type CardGridProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The cards: one cell each. */\n  children: React.ReactNode;\n  /**\n   * The narrowest a column may be, in pixels: the grid fits as many columns as the width allows.\n   * @default 300\n   */\n  min?: number;\n  /**\n   * `fill` keeps empty tracks (a lone card keeps its width); `fit` stretches the cards of a short row across the width.\n   * @default \"fill\"\n   */\n  fit?: \"fill\" | \"fit\";\n  /**\n   * `stretch` gives the cells of a row one height; `start` lets each card keep its own (cards that open a panel).\n   * @default \"stretch\"\n   */\n  align?: \"stretch\" | \"start\";\n  /**\n   * The cards rise once into place (`[data-reveal]`, MotionObserver), staggered by column. `false` on the first screen.\n   * @default true\n   */\n  reveal?: boolean;\n  /**\n   * The columns the stagger counts (the delay restarts on every row).\n   * @default 3\n   */\n  columns?: number;\n  /**\n   * The light that follows the pointer over the cards (`[data-kz-light]`).\n   * @default true\n   */\n  light?: boolean;\n  /** `ul` when the cards are a list (each cell an `li`). */\n  as?: \"div\" | \"ul\" | \"ol\";\n  /**\n   * A foundation: one wide card that the cards of the grid stand on (an engine, a platform, a shared service). It spans\n   * the full width beside the grid, and a hairline joins it to a frame around the cards — \"everything inside runs on it\".\n   * The frame takes the hue of `className` (a `data-hue` or a brand class on the grid sets it for the whole block).\n   */\n  foundation?: React.ReactNode;\n  /**\n   * Where the foundation sits: above the cards, or under them.\n   * @default \"start\"\n   */\n  foundationPosition?: \"start\" | \"end\";\n  /** A short mono label on the frame's edge, naming the relation (`Powered by Orazaka`). Only with `foundation`. */\n  foundationLabel?: React.ReactNode;\n  /**\n   * The hover of every card of the grid: `light` (the pointer's light, the default) or `quiet` (no glow, a 2 px lift, a\n   * ring on focus). A card that sets its own `hover` keeps it.\n   * @default \"light\"\n   */\n  hover?: CardHover;\n};\n\n/** A responsive grid of cards: equal rows, a staggered reveal, the pointer's light. */\nexport function CardGrid({\n  children,\n  min = 300,\n  fit = \"fill\",\n  align = \"stretch\",\n  reveal = true,\n  columns = 3,\n  light = true,\n  as: Tag = \"div\",\n  foundation,\n  foundationPosition = \"start\",\n  foundationLabel,\n  hover = \"light\",\n  className,\n  style,\n  ...props\n}: CardGridProps) {\n  const ref = React.useRef<HTMLElement>(null);\n  usePointerLight(light ? ref : NO_REF, POINTER_LIGHT_TARGET);\n  const Cell = Tag === \"div\" ? \"div\" : \"li\";\n  const grid = (\n    <Tag\n      ref={foundation ? undefined : (ref as React.Ref<never>)}\n      className={cn(\"kz-cards\", hover === \"quiet\" && \"kz-hover-quiet\", !foundation && className)}\n      data-fit={fit === \"fit\" ? \"\" : undefined}\n      data-align={align === \"start\" ? \"start\" : undefined}\n      style={{ \"--kz-cards-min\": `${min}px`, ...(foundation ? null : style) } as React.CSSProperties}\n      {...props}\n    >\n      {React.Children.toArray(children).map((child, i) => {\n        const step = Math.min(i % Math.max(columns, 1), 5);\n        return (\n          <Cell\n            key={React.isValidElement(child) && child.key != null ? child.key : i}\n            className=\"kz-cards-cell\"\n            data-reveal={reveal ? \"\" : undefined}\n            style={reveal && step ? ({ \"--kz-delay\": `${step * STEP_MS}ms` } as React.CSSProperties) : undefined}\n          >\n            {child}\n          </Cell>\n        );\n      })}\n    </Tag>\n  );\n  if (!foundation) return grid;\n  return (\n    <div ref={ref as React.Ref<HTMLDivElement>} className={cn(\"kz-foundation\", className)} data-position={foundationPosition} style={style}>\n      <div className=\"kz-foundation-base\" data-reveal={reveal ? \"\" : undefined}>\n        {foundation}\n      </div>\n      <div className=\"kz-foundation-group\">\n        {foundationLabel && <span className=\"kz-foundation-label\">{foundationLabel}</span>}\n        {grid}\n      </div>\n    </div>\n  );\n}\n\nconst NO_REF: React.RefObject<HTMLElement | null> = { current: null };\n"
+      "content": "// A responsive grid of cards (blocks.css): one column on a phone, the cells of a row share their height, each card rises\n// once as it enters the viewport — staggered by column. The hover is the cards' own quiet one (krizaka-ui#393).\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport type { CardHover } from \"../link-card/link-card\";\n\nconst STEP_MS = 70;\n\nexport type CardGridProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The cards: one cell each. */\n  children: React.ReactNode;\n  /**\n   * The narrowest a column may be, in pixels: the grid fits as many columns as the width allows.\n   * @default 300\n   */\n  min?: number;\n  /**\n   * `fill` keeps empty tracks (a lone card keeps its width); `fit` stretches the cards of a short row across the width.\n   * @default \"fill\"\n   */\n  fit?: \"fill\" | \"fit\";\n  /**\n   * `stretch` gives the cells of a row one height; `start` lets each card keep its own (cards that open a panel).\n   * @default \"stretch\"\n   */\n  align?: \"stretch\" | \"start\";\n  /**\n   * The cards rise once into place (`[data-reveal]`, MotionObserver), staggered by column. `false` on the first screen.\n   * @default true\n   */\n  reveal?: boolean;\n  /**\n   * The columns the stagger counts (the delay restarts on every row).\n   * @default 3\n   */\n  columns?: number;\n  /** @deprecated Since 3.31 (krizaka-ui#393): does nothing — no light follows the pointer. Removed in 4.0. */\n  light?: boolean;\n  /** `ul` when the cards are a list (each cell an `li`). */\n  as?: \"div\" | \"ul\" | \"ol\";\n  /**\n   * A foundation: one wide card that the cards of the grid stand on (an engine, a platform, a shared service). It spans\n   * the full width beside the grid, and a hairline joins it to a frame around the cards — \"everything inside runs on it\".\n   * The frame takes the hue of `className` (a `data-hue` or a brand class on the grid sets it for the whole block).\n   */\n  foundation?: React.ReactNode;\n  /**\n   * Where the foundation sits: above the cards, or under them.\n   * @default \"start\"\n   */\n  foundationPosition?: \"start\" | \"end\";\n  /** A short mono label on the frame's edge, naming the relation (`Powered by Orazaka`). Only with `foundation`. */\n  foundationLabel?: React.ReactNode;\n  /** @deprecated Since 3.31 (krizaka-ui#393): does nothing — every card has the one quiet hover. Removed in 4.0. */\n  hover?: CardHover;\n};\n\n/** A responsive grid of cards: equal rows, a staggered reveal. */\nexport function CardGrid({\n  children,\n  min = 300,\n  fit = \"fill\",\n  align = \"stretch\",\n  reveal = true,\n  columns = 3,\n  light: _light,\n  as: Tag = \"div\",\n  foundation,\n  foundationPosition = \"start\",\n  foundationLabel,\n  hover: _hover,\n  className,\n  style,\n  ...props\n}: CardGridProps) {\n  const Cell = Tag === \"div\" ? \"div\" : \"li\";\n  const grid = (\n    <Tag\n      className={cn(\"kz-cards\", !foundation && className)}\n      data-fit={fit === \"fit\" ? \"\" : undefined}\n      data-align={align === \"start\" ? \"start\" : undefined}\n      style={{ \"--kz-cards-min\": `${min}px`, ...(foundation ? null : style) } as React.CSSProperties}\n      {...props}\n    >\n      {React.Children.toArray(children).map((child, i) => {\n        const step = Math.min(i % Math.max(columns, 1), 5);\n        return (\n          <Cell\n            key={React.isValidElement(child) && child.key != null ? child.key : i}\n            className=\"kz-cards-cell\"\n            data-reveal={reveal ? \"\" : undefined}\n            style={reveal && step ? ({ \"--kz-delay\": `${step * STEP_MS}ms` } as React.CSSProperties) : undefined}\n          >\n            {child}\n          </Cell>\n        );\n      })}\n    </Tag>\n  );\n  if (!foundation) return grid;\n  return (\n    <div className={cn(\"kz-foundation\", className)} data-position={foundationPosition} style={style}>\n      <div className=\"kz-foundation-base\" data-reveal={reveal ? \"\" : undefined}>\n        {foundation}\n      </div>\n      <div className=\"kz-foundation-group\">\n        {foundationLabel && <span className=\"kz-foundation-label\">{foundationLabel}</span>}\n        {grid}\n      </div>\n    </div>\n  );\n}\n\n"
     },
     {
       "path": "card-grid/index.ts",
-      "content": "/** @krizaka/ui/card-grid — `CardGrid`: a responsive grid of cards, a staggered reveal, the pointer's light. Client. */\nexport { CardGrid, type CardGridProps } from \"./card-grid\";\n"
+      "content": "/** @krizaka/ui/card-grid — `CardGrid`: a responsive grid of cards, a staggered reveal, the cards' quiet hover. Client. */\nexport { CardGrid, type CardGridProps } from \"./card-grid\";\n"
     },
     {
       "path": "card-grid/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Card grid\",\n  summary:\n    \"A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal and the light that follows the pointer.\",\n  status: \"beta\",\n  category: \"blocks\",\n  platforms: \"web\",\n  parity: { native: { status: \"n/a\", reason: \"A block of a public site's page; an app screen on a phone is built from Screen, Header and Card.\", use: \"card\" }, desktop: { status: \"n/a\", reason: \"A public site's page, not a window of the Mac app.\" } },\n  whenToUse: [\n    \"Entry points of a hub (`LinkCard`), the reasons of a product page (`ArgumentCard`), plans, products.\",\n    \"Any set of peer cards that should read as one group with one rhythm.\",\n  ],\n  whenNotToUse: [\n    { when: \"For a sequence the reader follows in order.\", use: \"stepper\" },\n    { when: \"For rows of data to compare or sort.\", use: \"data-table\" },\n  ],\n  bestPractices: [\n    \"Set `min` to the narrowest a card still reads well; the grid does the rest at every width.\",\n    \"`fit=\\\"fit\\\"` for two or three cards that should share the whole width; `fill` keeps a lone card at its size.\",\n    \"Keep `reveal` on below the first screen, off on it; `columns` makes the stagger restart on each row.\",\n    \"The default `align=\\\"stretch\\\"` gives a row one height; the cards pin their foot to the bottom (`LinkCard` facts + way in, `ArgumentCard` actions) so the footers line up. `align=\\\"start\\\"` for cards that unfold.\",\n    \"`as=\\\"ul\\\"` when the cards are a list of links.\",\n    \"`hover=\\\"quiet\\\"` quiets every card of the grid (no glow, a 2 px lift, a ring on focus); a card may still say `hover=\\\"light\\\"`.\",\n    \"`foundation` when one thing (an engine, a platform) carries all the others: it takes its own card, wide, above (`foundationPosition=\\\"end\\\"` for under), and the cards sit in a hairline frame joined to it. Say the relation with `foundationLabel`; set the hue on `className`.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"The grid adds no role; `as=\\\"ul\\\"` makes it a list (each cell an `li`).\",\n      \"The pointer's light is decorative and never runs on touch screens or under `prefers-reduced-motion`.\",\n      \"Revealed cells are only hidden visually until they enter the viewport; under reduced motion they never move.\",\n    ],\n  },\n  related: [\"link-card\", \"argument-card\", \"pointer-light\"],\n  web: {\n    imports: [\"CardGrid\"],\n    examples: [\n      { name: \"products\", title: \"Two halves\", description: \"`fit=\\\"fit\\\"`: two cards share the whole width.\" },\n      { name: \"aligned\", title: \"An aligned row\", description: \"Cards with sentences of different lengths: one height, and the facts and the way in of every card on the same line.\" },\n      { name: \"foundation\", title: \"A foundation\", description: \"`foundation`: one wide card the others stand on, a hairline to a frame around them.\" },\n      { name: \"reveal\", title: \"A list of sections\", description: \"`as=\\\"ul\\\"`, six links that rise staggered by column on a real page.\" },\n      { name: \"hover-quiet\", title: \"A quiet grid\", description: \"`hover=\\\"quiet\\\"` on the grid: its cards lift without glow, with a ring on focus.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Card grid\",\n  summary:\n    \"A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal; each card keeps its own quiet hover.\",\n  status: \"beta\",\n  category: \"blocks\",\n  platforms: \"web\",\n  parity: { native: { status: \"n/a\", reason: \"A block of a public site's page; an app screen on a phone is built from Screen, Header and Card.\", use: \"card\" }, desktop: { status: \"n/a\", reason: \"A public site's page, not a window of the Mac app.\" } },\n  whenToUse: [\n    \"Entry points of a hub (`LinkCard`), the reasons of a product page (`ArgumentCard`), plans, products.\",\n    \"Any set of peer cards that should read as one group with one rhythm.\",\n  ],\n  whenNotToUse: [\n    { when: \"For a sequence the reader follows in order.\", use: \"stepper\" },\n    { when: \"For rows of data to compare or sort.\", use: \"data-table\" },\n  ],\n  bestPractices: [\n    \"Set `min` to the narrowest a card still reads well; the grid does the rest at every width.\",\n    \"`fit=\\\"fit\\\"` for two or three cards that should share the whole width; `fill` keeps a lone card at its size.\",\n    \"Keep `reveal` on below the first screen, off on it; `columns` makes the stagger restart on each row.\",\n    \"The default `align=\\\"stretch\\\"` gives a row one height; the cards pin their foot to the bottom (`LinkCard` facts + way in, `ArgumentCard` actions) so the footers line up. `align=\\\"start\\\"` for cards that unfold.\",\n    \"`as=\\\"ul\\\"` when the cards are a list of links.\",\n    \"`foundation` when one thing (an engine, a platform) carries all the others: it takes its own card, wide, above (`foundationPosition=\\\"end\\\"` for under), and the cards sit in a hairline frame joined to it. Say the relation with `foundationLabel`; set the hue on `className`.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"The grid adds no role; `as=\\\"ul\\\"` makes it a list (each cell an `li`).\",\n      \"Nothing follows the pointer: `light` and `hover` are deprecated since 3.31 (krizaka-ui#393) and do nothing.\",\n      \"Revealed cells are only hidden visually until they enter the viewport; under reduced motion they never move.\",\n    ],\n  },\n  related: [\"link-card\", \"argument-card\"],\n  web: {\n    imports: [\"CardGrid\"],\n    examples: [\n      { name: \"products\", title: \"Two halves\", description: \"`fit=\\\"fit\\\"`: two cards share the whole width.\" },\n      { name: \"aligned\", title: \"An aligned row\", description: \"Cards with sentences of different lengths: one height, and the facts and the way in of every card on the same line.\" },\n      { name: \"foundation\", title: \"A foundation\", description: \"`foundation`: one wide card the others stand on, a hairline to a frame around them.\" },\n      { name: \"reveal\", title: \"A list of sections\", description: \"`as=\\\"ul\\\"`, six links that rise staggered by column on a real page.\" },\n      { name: \"hover-quiet\", title: \"The hover\", description: \"The grid adds no hover: each card's surface and hairline go one step up, a ring on focus.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "meta.ts",
@@ -218,8 +216,7 @@
   "dependencies": [],
   "registryDependencies": [
     "cn",
-    "link-card",
-    "pointer-light"
+    "link-card"
   ],
   "demo": {
     "path": "examples/card-grid/products.tsx",
@@ -228,7 +225,7 @@
   "props": [
     {
       "component": "CardGrid",
-      "description": "A responsive grid of cards: equal rows, a staggered reveal, the pointer's light.",
+      "description": "A responsive grid of cards: equal rows, a staggered reveal.",
       "props": [
         {
           "name": "children",
@@ -289,15 +286,15 @@
         {
           "name": "hover",
           "type": "CardHover",
-          "default": "light",
-          "description": "The hover of every card of the grid: `light` (the pointer's light, the default) or `quiet` (no glow, a 2 px lift, a\nring on focus). A card that sets its own `hover` keeps it.",
+          "default": null,
+          "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — every card has the one quiet hover. Removed in 4.0.",
           "required": false
         },
         {
           "name": "light",
           "type": "boolean",
-          "default": "true",
-          "description": "The light that follows the pointer over the cards (`[data-kz-light]`).",
+          "default": null,
+          "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — no light follows the pointer. Removed in 4.0.",
           "required": false
         },
         {

package/registry/card.json

@@ -82,7 +82,7 @@
             "name": "interactive",
             "type": "boolean",
             "default": null,
-            "description": "The spotlight that follows the pointer and the lift on hover: for a card that is a link.",
+            "description": "The quiet hover — the hairline and the surface one step up, nothing moves (krizaka-ui#393): for a card that is a link.",
             "required": false
           },
           {
@@ -221,10 +221,10 @@
       {
         "name": "interactive-link",
         "title": "Interactive link",
-        "description": "`asChild` + `<a>`: the whole card is a link, with the spotlight and the lift.",
+        "description": "`asChild` + `<a>`: the whole card is a link; its hairline and surface go one step up under the pointer.",
         "path": "examples/card/interactive-link.tsx",
         "module": "@krizaka/ui/registry/examples/card/interactive-link",
-        "code": "import { Card } from \"@krizaka/ui/card\";\n\n// `asChild` + `<a>`: the whole card is one link; `interactive` adds the spotlight and the lift.\nexport default function CardInteractiveLink() {\n  return (\n    <Card.Root asChild interactive>\n      <a href=\"#guide\">\n        <Card.Body>\n          <Card.Title as=\"h2\">Getting started</Card.Title>\n          <Card.Description>Install the preset, import the primitives, ship both themes.</Card.Description>\n          <Card.Footer>Read the guide →</Card.Footer>\n        </Card.Body>\n      </a>\n    </Card.Root>\n  );\n}\n"
+        "code": "import { Card } from \"@krizaka/ui/card\";\n\n// `asChild` + `<a>`: the whole card is one link; `interactive` adds the quiet hover (a hairline and surface step).\nexport default function CardInteractiveLink() {\n  return (\n    <Card.Root asChild interactive>\n      <a href=\"#guide\">\n        <Card.Body>\n          <Card.Title as=\"h2\">Getting started</Card.Title>\n          <Card.Description>Install the preset, import the primitives, ship both themes.</Card.Description>\n          <Card.Footer>Read the guide →</Card.Footer>\n        </Card.Body>\n      </a>\n    </Card.Root>\n  );\n}\n"
       },
       {
         "name": "stat-card",
@@ -425,7 +425,7 @@
   "files": [
     {
       "path": "card/card.tsx",
-      "content": "// Server-safe: no hook, no context. One `tv` definition with slots: each part takes its slot, and a product overrides\n// any part through `className` (merged last by tailwind-merge).\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { cardRecipe } from \"./recipe\";\n\nexport const card = tv(cardRecipe);\n\ntype CardVariants = VariantProps<typeof card>;\n/** The parts without a variant read the default slots: no context, so server-safe. */\nconst slots = card();\n\nexport type CardRootProps = React.ComponentProps<\"div\"> &\n  Pick<CardVariants, \"radius\" | \"tone\" | \"interactive\"> & {\n    /**\n     * md · lg · xl.\n     * @default \"xl\"\n     */\n    radius?: CardVariants[\"radius\"];\n    /**\n     * default (the base surface) · elevated (raised, a shadow) · glass (translucent, blurred).\n     * @default \"default\"\n     */\n    tone?: CardVariants[\"tone\"];\n    /** The spotlight that follows the pointer and the lift on hover: for a card that is a link. */\n    interactive?: CardVariants[\"interactive\"];\n    /** Renders the child (a link, an article) instead of the <div>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /** Enters on scroll (MotionObserver): the index in the grid becomes the delay (50 ms a step, 8 steps at most). */\n    reveal?: number;\n  };\n\nexport function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }: CardRootProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  const revealStyle =\n    reveal === undefined ? style : ({ ...style, \"--kz-delay\": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` } as React.CSSProperties);\n  return (\n    <Comp\n      data-reveal={reveal === undefined ? undefined : \"\"}\n      data-interactive={interactive ? \"\" : undefined}\n      style={revealStyle}\n      className={card({ radius, tone, interactive }).root({ className })}\n      {...props}\n    />\n  );\n}\n\nconst ASPECT = { video: \"aspect-video\", square: \"aspect-square\", portrait: \"aspect-[3/4]\", auto: \"\" } as const;\nexport type CardMediaProps = React.ComponentProps<\"div\"> & {\n  /** The ratio of the media: video (16:9) · square · portrait (3:4) · auto (the content's). */\n  aspect?: keyof typeof ASPECT;\n};\n\nexport function CardMedia({ aspect = \"video\", className, ...props }: CardMediaProps) {\n  return <div data-aspect={aspect} className={slots.media({ className: cn(ASPECT[aspect], className) })} {...props} />;\n}\n\nexport type CardImageProps = Omit<React.ComponentProps<\"img\">, \"src\"> & {\n  /** The image's URL; `null` or nothing shows the `fallback`. */\n  src?: string | null;\n  /** Shown when there is no image: an icon, an illustration (decorative). */\n  fallback?: React.ReactNode;\n  /**\n   * When the browser loads it: `lazy` (default, a card in a list or below the fold) or `eager` for the first cards\n   * of a page — the image that is the largest contentful paint must not wait (add `fetchPriority=\"high\"`).\n   * @default \"lazy\"\n   */\n  loading?: \"lazy\" | \"eager\";\n};\n\n/** The image of a media, or its `fallback` when there is none. `alt` is empty by default: the title names the card. */\nexport function CardImage({ src, alt = \"\", fallback, loading = \"lazy\", className, ...props }: CardImageProps) {\n  if (!src) {\n    return (\n      <div data-fallback=\"\" aria-hidden className={slots.fallback({ className })}>\n        {fallback}\n      </div>\n    );\n  }\n  return <img src={src} alt={alt} loading={loading} decoding=\"async\" className={slots.image({ className })} {...props} />;\n}\n\nconst CORNER = {\n  \"top-left\": \"left-2.5 top-2.5\",\n  \"top-right\": \"right-2.5 top-2.5\",\n  \"bottom-left\": \"bottom-2.5 left-2.5\",\n  \"bottom-right\": \"bottom-2.5 right-2.5\",\n} as const;\nexport type CardOverlayProps = React.ComponentProps<\"div\"> & {\n  /** The corner of the media it sits in. */\n  corner?: keyof typeof CORNER;\n};\n\n/** What sits on the media (badges, a caption). `scrim` and `fg-on-media` are invariant: nothing to do for light. */\nexport function CardOverlay({ corner = \"top-left\", className, ...props }: CardOverlayProps) {\n  return <div data-corner={corner} className={slots.overlay({ className: cn(CORNER[corner], className) })} {...props} />;\n}\n\nexport type CardBodyProps = React.ComponentProps<\"div\"> & {\n  /**\n   * none · sm · md · lg.\n   * @default \"md\"\n   */\n  padding?: CardVariants[\"padding\"];\n};\n\nexport function CardBody({ padding, className, ...props }: CardBodyProps) {\n  return <div className={card({ padding }).body({ className })} {...props} />;\n}\n\nexport type CardTitleProps = React.ComponentProps<\"h3\"> & {\n  /** The heading level, to fit the page's outline. */\n  as?: \"h2\" | \"h3\" | \"h4\";\n};\n\nexport function CardTitle({ as: Tag = \"h3\", className, ...props }: CardTitleProps) {\n  return <Tag className={slots.title({ className })} {...props} />;\n}\n\nexport function CardDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return <p className={slots.description({ className })} {...props} />;\n}\n\nexport type CardStatProps = React.ComponentProps<\"div\"> & {\n  /** What the figure is, in small capitals above it (the figure is the children). */\n  label: React.ReactNode;\n};\n\n/** A figure put forward: the label in capitals, the value in tabular digits. */\nexport function CardStat({ label, className, children, ...props }: CardStatProps) {\n  return (\n    <div className={slots.stat({ className })} {...props}>\n      <p className={slots.statLabel()}>{label}</p>\n      <p className={slots.statValue()}>{children}</p>\n    </div>\n  );\n}\n\nexport function CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={slots.footer({ className })} {...props} />;\n}\n\n/** `Card.Root/Media/Image/Overlay/Body/Title/Description/Stat/Footer`. */\nexport const Card = {\n  Root: CardRoot,\n  Media: CardMedia,\n  Image: CardImage,\n  Overlay: CardOverlay,\n  Body: CardBody,\n  Title: CardTitle,\n  Description: CardDescription,\n  Stat: CardStat,\n  Footer: CardFooter,\n};\n"
+      "content": "// Server-safe: no hook, no context. One `tv` definition with slots: each part takes its slot, and a product overrides\n// any part through `className` (merged last by tailwind-merge).\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { cardRecipe } from \"./recipe\";\n\nexport const card = tv(cardRecipe);\n\ntype CardVariants = VariantProps<typeof card>;\n/** The parts without a variant read the default slots: no context, so server-safe. */\nconst slots = card();\n\nexport type CardRootProps = React.ComponentProps<\"div\"> &\n  Pick<CardVariants, \"radius\" | \"tone\" | \"interactive\"> & {\n    /**\n     * md · lg · xl.\n     * @default \"xl\"\n     */\n    radius?: CardVariants[\"radius\"];\n    /**\n     * default (the base surface) · elevated (raised, a shadow) · glass (translucent, blurred).\n     * @default \"default\"\n     */\n    tone?: CardVariants[\"tone\"];\n    /** The quiet hover — the hairline and the surface one step up, nothing moves (krizaka-ui#393): for a card that is a link. */\n    interactive?: CardVariants[\"interactive\"];\n    /** Renders the child (a link, an article) instead of the <div>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /** Enters on scroll (MotionObserver): the index in the grid becomes the delay (50 ms a step, 8 steps at most). */\n    reveal?: number;\n  };\n\nexport function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }: CardRootProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  const revealStyle =\n    reveal === undefined ? style : ({ ...style, \"--kz-delay\": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` } as React.CSSProperties);\n  return (\n    <Comp\n      data-reveal={reveal === undefined ? undefined : \"\"}\n      data-interactive={interactive ? \"\" : undefined}\n      style={revealStyle}\n      className={card({ radius, tone, interactive }).root({ className })}\n      {...props}\n    />\n  );\n}\n\nconst ASPECT = { video: \"aspect-video\", square: \"aspect-square\", portrait: \"aspect-[3/4]\", auto: \"\" } as const;\nexport type CardMediaProps = React.ComponentProps<\"div\"> & {\n  /** The ratio of the media: video (16:9) · square · portrait (3:4) · auto (the content's). */\n  aspect?: keyof typeof ASPECT;\n};\n\nexport function CardMedia({ aspect = \"video\", className, ...props }: CardMediaProps) {\n  return <div data-aspect={aspect} className={slots.media({ className: cn(ASPECT[aspect], className) })} {...props} />;\n}\n\nexport type CardImageProps = Omit<React.ComponentProps<\"img\">, \"src\"> & {\n  /** The image's URL; `null` or nothing shows the `fallback`. */\n  src?: string | null;\n  /** Shown when there is no image: an icon, an illustration (decorative). */\n  fallback?: React.ReactNode;\n  /**\n   * When the browser loads it: `lazy` (default, a card in a list or below the fold) or `eager` for the first cards\n   * of a page — the image that is the largest contentful paint must not wait (add `fetchPriority=\"high\"`).\n   * @default \"lazy\"\n   */\n  loading?: \"lazy\" | \"eager\";\n};\n\n/** The image of a media, or its `fallback` when there is none. `alt` is empty by default: the title names the card. */\nexport function CardImage({ src, alt = \"\", fallback, loading = \"lazy\", className, ...props }: CardImageProps) {\n  if (!src) {\n    return (\n      <div data-fallback=\"\" aria-hidden className={slots.fallback({ className })}>\n        {fallback}\n      </div>\n    );\n  }\n  return <img src={src} alt={alt} loading={loading} decoding=\"async\" className={slots.image({ className })} {...props} />;\n}\n\nconst CORNER = {\n  \"top-left\": \"left-2.5 top-2.5\",\n  \"top-right\": \"right-2.5 top-2.5\",\n  \"bottom-left\": \"bottom-2.5 left-2.5\",\n  \"bottom-right\": \"bottom-2.5 right-2.5\",\n} as const;\nexport type CardOverlayProps = React.ComponentProps<\"div\"> & {\n  /** The corner of the media it sits in. */\n  corner?: keyof typeof CORNER;\n};\n\n/** What sits on the media (badges, a caption). `scrim` and `fg-on-media` are invariant: nothing to do for light. */\nexport function CardOverlay({ corner = \"top-left\", className, ...props }: CardOverlayProps) {\n  return <div data-corner={corner} className={slots.overlay({ className: cn(CORNER[corner], className) })} {...props} />;\n}\n\nexport type CardBodyProps = React.ComponentProps<\"div\"> & {\n  /**\n   * none · sm · md · lg.\n   * @default \"md\"\n   */\n  padding?: CardVariants[\"padding\"];\n};\n\nexport function CardBody({ padding, className, ...props }: CardBodyProps) {\n  return <div className={card({ padding }).body({ className })} {...props} />;\n}\n\nexport type CardTitleProps = React.ComponentProps<\"h3\"> & {\n  /** The heading level, to fit the page's outline. */\n  as?: \"h2\" | \"h3\" | \"h4\";\n};\n\nexport function CardTitle({ as: Tag = \"h3\", className, ...props }: CardTitleProps) {\n  return <Tag className={slots.title({ className })} {...props} />;\n}\n\nexport function CardDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return <p className={slots.description({ className })} {...props} />;\n}\n\nexport type CardStatProps = React.ComponentProps<\"div\"> & {\n  /** What the figure is, in small capitals above it (the figure is the children). */\n  label: React.ReactNode;\n};\n\n/** A figure put forward: the label in capitals, the value in tabular digits. */\nexport function CardStat({ label, className, children, ...props }: CardStatProps) {\n  return (\n    <div className={slots.stat({ className })} {...props}>\n      <p className={slots.statLabel()}>{label}</p>\n      <p className={slots.statValue()}>{children}</p>\n    </div>\n  );\n}\n\nexport function CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={slots.footer({ className })} {...props} />;\n}\n\n/** `Card.Root/Media/Image/Overlay/Body/Title/Description/Stat/Footer`. */\nexport const Card = {\n  Root: CardRoot,\n  Media: CardMedia,\n  Image: CardImage,\n  Overlay: CardOverlay,\n  Body: CardBody,\n  Title: CardTitle,\n  Description: CardDescription,\n  Stat: CardStat,\n  Footer: CardFooter,\n};\n"
     },
     {
       "path": "card/index.ts",
@@ -433,11 +433,11 @@
     },
     {
       "path": "card/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Card\",\n  summary: \"The composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.\",\n  status: \"stable\",\n  category: \"layout\",\n  platforms: \"both\",\n  parity: { desktop: \"web\" },\n  whenToUse: [\n    \"To present one item of a collection: a video, a creator, a guide, a plan.\",\n    \"As a link to the item (`asChild` + `interactive`): the whole card is one target.\",\n    \"To group a few figures under a title (`Card.Stat`).\",\n  ],\n  whenNotToUse: [\n    { when: \"To frame a whole page section: use the page layout, not a card around everything.\" },\n    { when: \"For a single key figure without a frame.\", use: \"stat\" },\n    { when: \"For a message about the page.\", use: \"alert\" },\n  ],\n  bestPractices: [\n    \"Build product cards from these parts and override any of them with `className` — never fork the card.\",\n    \"Keep one primary target per card: either the whole card is a link, or it holds buttons — not both.\",\n    \"Give `Card.Media` a fixed `aspect` so a grid stays aligned while images load.\",\n    \"`Card.Image` loads lazily; pass `loading=\\\"eager\\\"` (and `fetchPriority=\\\"high\\\"`) to the first cards of a page, above the fold.\",\n    \"`reveal={index}` with one `MotionObserver` per page for the entrance; it is shown at once under reduced motion.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Tab / Enter\", action: \"An `asChild` link card is one focusable link that Enter follows.\" }],\n    notes: [\n      \"`Card.Title` is a heading (`h3` by default, `as` to change the level) so cards are reachable by heading.\",\n      \"A card that is a link is named by its content: keep the title first.\",\n      \"The image fallback is decorative and hidden from assistive technology.\",\n    ],\n  },\n  related: [\"badge\", \"stat\", \"avatar\", \"skeleton\"],\n  web: {\n    imports: [\"Card\"],\n    examples: [\n      { name: \"media-card\", title: \"Media card\", description: \"An image, badges on the media, a title, a description and a footer.\" },\n      { name: \"media-fallback\", title: \"Media fallback\", description: \"No image: the `fallback` on the accent gradient.\" },\n      { name: \"interactive-link\", title: \"Interactive link\", description: \"`asChild` + `<a>`: the whole card is a link, with the spotlight and the lift.\" },\n      { name: \"stat-card\", title: \"Stat card\", description: \"Figures put forward with `Card.Stat`, `tone=\\\"elevated\\\"`.\" },\n      { name: \"reveal-grid\", title: \"Reveal grid\", description: \"Cards entering in cascade with `reveal` and `MotionObserver`.\" },\n    ],\n  },\n  native: {\n    imports: [\"Card\"],\n    differences: [\n      \"`onPress` on `Card.Root` makes the whole card a button (no `asChild`, no `interactive`).\",\n      \"Built on `View`, `Image` and `Text`: style with `style`, not `className`.\",\n      \"No `Card.Stat` and no `reveal`.\",\n    ],\n    examples: [\n      { name: \"default\", title: \"Default\", description: \"A media, a body and a footer.\" },\n      { name: \"elevated\", title: \"Elevated\", description: \"`tone=\\\"elevated\\\"`: one step higher, with a shadow.\" },\n      { name: \"pressable\", title: \"Pressable\", description: \"`onPress`: the whole card is a button.\" },\n      { name: \"body\", title: \"Text and an action\", description: \"A body only, with a button.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Card\",\n  summary: \"The composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.\",\n  status: \"stable\",\n  category: \"layout\",\n  platforms: \"both\",\n  parity: { desktop: \"web\" },\n  whenToUse: [\n    \"To present one item of a collection: a video, a creator, a guide, a plan.\",\n    \"As a link to the item (`asChild` + `interactive`): the whole card is one target.\",\n    \"To group a few figures under a title (`Card.Stat`).\",\n  ],\n  whenNotToUse: [\n    { when: \"To frame a whole page section: use the page layout, not a card around everything.\" },\n    { when: \"For a single key figure without a frame.\", use: \"stat\" },\n    { when: \"For a message about the page.\", use: \"alert\" },\n  ],\n  bestPractices: [\n    \"Build product cards from these parts and override any of them with `className` — never fork the card.\",\n    \"Keep one primary target per card: either the whole card is a link, or it holds buttons — not both.\",\n    \"Give `Card.Media` a fixed `aspect` so a grid stays aligned while images load.\",\n    \"`Card.Image` loads lazily; pass `loading=\\\"eager\\\"` (and `fetchPriority=\\\"high\\\"`) to the first cards of a page, above the fold.\",\n    \"`reveal={index}` with one `MotionObserver` per page for the entrance; it is shown at once under reduced motion.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Tab / Enter\", action: \"An `asChild` link card is one focusable link that Enter follows.\" }],\n    notes: [\n      \"`Card.Title` is a heading (`h3` by default, `as` to change the level) so cards are reachable by heading.\",\n      \"A card that is a link is named by its content: keep the title first.\",\n      \"The image fallback is decorative and hidden from assistive technology.\",\n    ],\n  },\n  related: [\"badge\", \"stat\", \"avatar\", \"skeleton\"],\n  web: {\n    imports: [\"Card\"],\n    examples: [\n      { name: \"media-card\", title: \"Media card\", description: \"An image, badges on the media, a title, a description and a footer.\" },\n      { name: \"media-fallback\", title: \"Media fallback\", description: \"No image: the `fallback` on the accent gradient.\" },\n      { name: \"interactive-link\", title: \"Interactive link\", description: \"`asChild` + `<a>`: the whole card is a link; its hairline and surface go one step up under the pointer.\" },\n      { name: \"stat-card\", title: \"Stat card\", description: \"Figures put forward with `Card.Stat`, `tone=\\\"elevated\\\"`.\" },\n      { name: \"reveal-grid\", title: \"Reveal grid\", description: \"Cards entering in cascade with `reveal` and `MotionObserver`.\" },\n    ],\n  },\n  native: {\n    imports: [\"Card\"],\n    differences: [\n      \"`onPress` on `Card.Root` makes the whole card a button (no `asChild`, no `interactive`).\",\n      \"Built on `View`, `Image` and `Text`: style with `style`, not `className`.\",\n      \"No `Card.Stat` and no `reveal`.\",\n    ],\n    examples: [\n      { name: \"default\", title: \"Default\", description: \"A media, a body and a footer.\" },\n      { name: \"elevated\", title: \"Elevated\", description: \"`tone=\\\"elevated\\\"`: one step higher, with a shadow.\" },\n      { name: \"pressable\", title: \"Pressable\", description: \"`onPress`: the whole card is a button.\" },\n      { name: \"body\", title: \"Text and an action\", description: \"A body only, with a button.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "card/recipe.ts",
-      "content": "// The card's parts, radii, tones and paddings, written once as classes of the Krizaka tokens: the web wears them with\n// `tv(cardRecipe)`, React Native reads the same classes into styles (native/card.tsx): a part of the card that exists only\n// on the web (the media's zoom, the spotlight) is simply ignored there.\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const cardRecipe = defineRecipe({\n  slots: {\n    root:\n      \"group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    media: \"relative overflow-hidden bg-media\",\n    image: \"h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105\",\n    fallback: \"flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60\",\n    overlay: \"absolute z-10 flex items-center gap-1.5\",\n    body: \"relative flex flex-1 flex-col gap-3\",\n    title: \"line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent\",\n    description: \"line-clamp-2 text-xs text-fg-secondary\",\n    stat: \"min-w-0\",\n    statLabel: \"text-[10px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    statValue: \"font-display text-xl font-black tabular-nums text-fg\",\n    footer: \"relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary\",\n  },\n  variants: {\n    radius: { md: { root: \"rounded-md\" }, lg: { root: \"rounded-lg\" }, xl: { root: \"rounded-xl\" } },\n    tone: { default: {}, elevated: { root: \"bg-surface-2 shadow-md\" }, glass: { root: \"bg-surface-1/70 backdrop-blur-md\" } },\n    interactive: { true: { root: \"kz-spotlight kz-lift hover:border-accent/50\" } },\n    padding: { none: { body: \"p-0\" }, sm: { body: \"p-3\" }, md: { body: \"p-4\" }, lg: { body: \"p-6\" } },\n  },\n  defaultVariants: { radius: \"xl\", tone: \"default\", padding: \"md\" },\n});\n"
+      "content": "// The card's parts, radii, tones and paddings, written once as classes of the Krizaka tokens: the web wears them with\n// `tv(cardRecipe)`, React Native reads the same classes into styles (native/card.tsx): a part of the card that exists only\n// on the web (the hover's tint) is simply ignored there.\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const cardRecipe = defineRecipe({\n  slots: {\n    root:\n      \"group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    media: \"relative overflow-hidden bg-media\",\n    image: \"h-full w-full object-cover\",\n    fallback: \"flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60\",\n    overlay: \"absolute z-10 flex items-center gap-1.5\",\n    body: \"relative flex flex-1 flex-col gap-3\",\n    title: \"line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent\",\n    description: \"line-clamp-2 text-xs text-fg-secondary\",\n    stat: \"min-w-0\",\n    statLabel: \"text-[10px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    statValue: \"font-display text-xl font-black tabular-nums text-fg\",\n    footer: \"relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary\",\n  },\n  variants: {\n    radius: { md: { root: \"rounded-md\" }, lg: { root: \"rounded-lg\" }, xl: { root: \"rounded-xl\" } },\n    tone: { default: {}, elevated: { root: \"bg-surface-2 shadow-md\" }, glass: { root: \"bg-surface-1/70 backdrop-blur-md\" } },\n    interactive: { true: { root: \"duration-150 hover:border-border-strong hover:bg-surface-2\" } },\n    padding: { none: { body: \"p-0\" }, sm: { body: \"p-3\" }, md: { body: \"p-4\" }, lg: { body: \"p-6\" } },\n  },\n  defaultVariants: { radius: \"xl\", tone: \"default\", padding: \"md\" },\n});\n"
     },
     {
       "path": "meta.ts",
@@ -472,7 +472,7 @@
           "name": "interactive",
           "type": "boolean",
           "default": null,
-          "description": "The spotlight that follows the pointer and the lift on hover: for a card that is a link.",
+          "description": "The quiet hover — the hairline and the surface one step up, nothing moves (krizaka-ui#393): for a card that is a link.",
           "required": false
         },
         {

package/registry/component-page.json

@@ -136,7 +136,7 @@
         "why": "A builder decides whether a component fits, sees it live and copies it, all on one page.",
         "path": "examples/component-page/button.tsx",
         "module": "@krizaka/ui/registry/examples/component-page/button",
-        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { ComponentPage } from \"@krizaka/ui/component-page\";\nimport { LinkCard } from \"@krizaka/ui/link-card\";\n\n// TEMPLATE — a component's page (what ui.krizaka.com generates from the registry): name, summary, status and\n// platforms, the live preview, the import line, its sections; related components aside (under it on a phone).\nexport default function ComponentPageButton() {\n  return (\n    <ComponentPage\n      className=\"w-full\"\n      back={<a href=\"#catalogue\">← Components</a>}\n      eyebrow=\"Actions\"\n      title=\"Button\"\n      summary=\"The action: six looks, three sizes, the Krizaka cut, and the whole life of an action built in.\"\n      facts={[{ label: \"Web + Mobile\", tone: \"ok\" }, { label: \"Stable\" }]}\n      preview={\n        <div className=\"flex flex-wrap items-center justify-center gap-3 p-8\">\n          <Button variant=\"primary\" shape=\"cut\" shimmer>Publish</Button>\n          <Button variant=\"secondary\" shape=\"cut\">Save a draft</Button>\n        </div>\n      }\n      install={{ code: 'import { Button } from \"@krizaka/ui/button\";', language: \"ts\", copyLabel: \"Copy\", copiedLabel: \"Copied\" }}\n      sections={[\n        { id: \"when\", title: \"When to use\", children: <p className=\"text-sm text-fg-secondary\">For the action a block is about; links that look like actions use `asChild`.</p> },\n        { id: \"a11y\", title: \"Accessibility\", children: <p className=\"text-sm text-fg-secondary\">A real button; while loading it says so in a live region.</p> },\n      ]}\n      aside={<LinkCard href=\"#confirm-button\" title=\"Confirm button\" description=\"A destructive action in two presses.\" titleAs=\"span\" />}\n    />\n  );\n}\n"
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { ComponentPage } from \"@krizaka/ui/component-page\";\nimport { LinkCard } from \"@krizaka/ui/link-card\";\n\n// TEMPLATE — a component's page (what ui.krizaka.com generates from the registry): name, summary, status and\n// platforms, the live preview, the import line, its sections; related components aside (under it on a phone).\nexport default function ComponentPageButton() {\n  return (\n    <ComponentPage\n      className=\"w-full\"\n      back={<a href=\"#catalogue\">← Components</a>}\n      eyebrow=\"Actions\"\n      title=\"Button\"\n      summary=\"The action: six looks, three sizes, the Krizaka cut, and the whole life of an action built in.\"\n      facts={[{ label: \"Web + Mobile\", tone: \"ok\" }, { label: \"Stable\" }]}\n      preview={\n        <div className=\"flex flex-wrap items-center justify-center gap-3 p-8\">\n          <Button variant=\"primary\">Publish</Button>\n          <Button variant=\"secondary\">Save a draft</Button>\n        </div>\n      }\n      install={{ code: 'import { Button } from \"@krizaka/ui/button\";', language: \"ts\", copyLabel: \"Copy\", copiedLabel: \"Copied\" }}\n      sections={[\n        { id: \"when\", title: \"When to use\", children: <p className=\"text-sm text-fg-secondary\">For the action a block is about; links that look like actions use `asChild`.</p> },\n        { id: \"a11y\", title: \"Accessibility\", children: <p className=\"text-sm text-fg-secondary\">A real button; while loading it says so in a live region.</p> },\n      ]}\n      aside={<LinkCard href=\"#confirm-button\" title=\"Confirm button\" description=\"A destructive action in two presses.\" titleAs=\"span\" />}\n    />\n  );\n}\n"
       }
     ]
   },
@@ -167,7 +167,7 @@
   ],
   "demo": {
     "path": "examples/component-page/button.tsx",
-    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { ComponentPage } from \"@krizaka/ui/component-page\";\nimport { LinkCard } from \"@krizaka/ui/link-card\";\n\n// TEMPLATE — a component's page (what ui.krizaka.com generates from the registry): name, summary, status and\n// platforms, the live preview, the import line, its sections; related components aside (under it on a phone).\nexport default function ComponentPageButton() {\n  return (\n    <ComponentPage\n      className=\"w-full\"\n      back={<a href=\"#catalogue\">← Components</a>}\n      eyebrow=\"Actions\"\n      title=\"Button\"\n      summary=\"The action: six looks, three sizes, the Krizaka cut, and the whole life of an action built in.\"\n      facts={[{ label: \"Web + Mobile\", tone: \"ok\" }, { label: \"Stable\" }]}\n      preview={\n        <div className=\"flex flex-wrap items-center justify-center gap-3 p-8\">\n          <Button variant=\"primary\" shape=\"cut\" shimmer>Publish</Button>\n          <Button variant=\"secondary\" shape=\"cut\">Save a draft</Button>\n        </div>\n      }\n      install={{ code: 'import { Button } from \"@krizaka/ui/button\";', language: \"ts\", copyLabel: \"Copy\", copiedLabel: \"Copied\" }}\n      sections={[\n        { id: \"when\", title: \"When to use\", children: <p className=\"text-sm text-fg-secondary\">For the action a block is about; links that look like actions use `asChild`.</p> },\n        { id: \"a11y\", title: \"Accessibility\", children: <p className=\"text-sm text-fg-secondary\">A real button; while loading it says so in a live region.</p> },\n      ]}\n      aside={<LinkCard href=\"#confirm-button\" title=\"Confirm button\" description=\"A destructive action in two presses.\" titleAs=\"span\" />}\n    />\n  );\n}\n"
+    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { ComponentPage } from \"@krizaka/ui/component-page\";\nimport { LinkCard } from \"@krizaka/ui/link-card\";\n\n// TEMPLATE — a component's page (what ui.krizaka.com generates from the registry): name, summary, status and\n// platforms, the live preview, the import line, its sections; related components aside (under it on a phone).\nexport default function ComponentPageButton() {\n  return (\n    <ComponentPage\n      className=\"w-full\"\n      back={<a href=\"#catalogue\">← Components</a>}\n      eyebrow=\"Actions\"\n      title=\"Button\"\n      summary=\"The action: six looks, three sizes, the Krizaka cut, and the whole life of an action built in.\"\n      facts={[{ label: \"Web + Mobile\", tone: \"ok\" }, { label: \"Stable\" }]}\n      preview={\n        <div className=\"flex flex-wrap items-center justify-center gap-3 p-8\">\n          <Button variant=\"primary\">Publish</Button>\n          <Button variant=\"secondary\">Save a draft</Button>\n        </div>\n      }\n      install={{ code: 'import { Button } from \"@krizaka/ui/button\";', language: \"ts\", copyLabel: \"Copy\", copiedLabel: \"Copied\" }}\n      sections={[\n        { id: \"when\", title: \"When to use\", children: <p className=\"text-sm text-fg-secondary\">For the action a block is about; links that look like actions use `asChild`.</p> },\n        { id: \"a11y\", title: \"Accessibility\", children: <p className=\"text-sm text-fg-secondary\">A real button; while loading it says so in a live region.</p> },\n      ]}\n      aside={<LinkCard href=\"#confirm-button\" title=\"Confirm button\" description=\"A destructive action in two presses.\" titleAs=\"span\" />}\n    />\n  );\n}\n"
   },
   "props": [
     {

package/registry/confirm-button.json

@@ -127,7 +127,7 @@
             "name": "magnetic",
             "type": "boolean",
             "default": null,
-            "description": "The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch).",
+            "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — a button never moves under the pointer. Removed in 4.0.",
             "required": false
           },
           {
@@ -148,14 +148,14 @@
             "name": "shape",
             "type": "\"rounded\" | \"pill\" | \"cut\"",
             "default": "rounded",
-            "description": "rounded · pill · cut (45° corners, the Krizaka chamfer).",
+            "description": "`rounded` (an 8 px radius, the radius of a field) · `pill`. `cut` is deprecated (krizaka-ui#393: the chamfer is\nretired) — it draws `rounded` and warns in development; it will be removed in 4.0.",
             "required": false
           },
           {
             "name": "shimmer",
             "type": "boolean",
             "default": null,
-            "description": "A sheen of light crosses the button on hover — for the one action a page is about.",
+            "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — the hover is quiet. Removed in 4.0.",
             "required": false
           },
           {
@@ -304,7 +304,7 @@
           "name": "magnetic",
           "type": "boolean",
           "default": null,
-          "description": "The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch).",
+          "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — a button never moves under the pointer. Removed in 4.0.",
           "required": false
         },
         {
@@ -325,14 +325,14 @@
           "name": "shape",
           "type": "\"rounded\" | \"pill\" | \"cut\"",
           "default": "rounded",
-          "description": "rounded · pill · cut (45° corners, the Krizaka chamfer).",
+          "description": "`rounded` (an 8 px radius, the radius of a field) · `pill`. `cut` is deprecated (krizaka-ui#393: the chamfer is\nretired) — it draws `rounded` and warns in development; it will be removed in 4.0.",
           "required": false
         },
         {
           "name": "shimmer",
           "type": "boolean",
           "default": null,
-          "description": "A sheen of light crosses the button on hover — for the one action a page is about.",
+          "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — the hover is quiet. Removed in 4.0.",
           "required": false
         },
         {

package/registry/contact-page.json

@@ -129,7 +129,7 @@
         "why": "A visitor reaches a human by the channel they prefer and learns what happens after they write.",
         "path": "examples/contact-page/team.tsx",
         "module": "@krizaka/ui/registry/examples/contact-page/team",
-        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { ContactPage } from \"@krizaka/ui/contact-page\";\nimport { Field, Input, Textarea } from \"@krizaka/ui/field\";\nimport { LinkCard } from \"@krizaka/ui/link-card\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\n\n// TEMPLATE — reaching the team: the public channels as cards beside the private form, then what happens after sending.\n// On a phone the form comes after the channels, its fields at full width.\nexport default function ContactPageTeam() {\n  return (\n    <ContactPage\n      eyebrow=\"Contact\"\n      title=\"Talk to the people who build it\"\n      lead=\"A person answers within two working days, in English or in French.\"\n      aside={<Mascot bird=\"flamingo\" mood=\"welcome\" size={112} />}\n      channels={\n        <>\n          <LinkCard href=\"https://github.com/orgs/krizaka/discussions\" title=\"Discussions\" description=\"Questions and ideas, in public.\" titleAs=\"span\" />\n          <LinkCard href=\"https://github.com/krizaka\" title=\"Report a problem\" description=\"An issue on the repository.\" titleAs=\"span\" />\n        </>\n      }\n      form={\n        <form className=\"flex flex-col gap-4\">\n          <Field.Root>\n            <Field.Label htmlFor=\"contact-email\">Email</Field.Label>\n            <Input id=\"contact-email\" type=\"email\" autoComplete=\"email\" />\n          </Field.Root>\n          <Field.Root>\n            <Field.Label htmlFor=\"contact-message\">Message</Field.Label>\n            <Textarea id=\"contact-message\" rows={4} />\n          </Field.Root>\n          <Button type=\"submit\" variant=\"primary\" size=\"lg\" shape=\"cut\" shimmer>Send</Button>\n        </form>\n      }\n      next={{ title: \"What happens next\", steps: [{ title: \"We read it\", text: \"The same day, on working days.\" }, { title: \"We answer\", text: \"Within two working days.\" }] }}\n    />\n  );\n}\n"
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { ContactPage } from \"@krizaka/ui/contact-page\";\nimport { Field, Input, Textarea } from \"@krizaka/ui/field\";\nimport { LinkCard } from \"@krizaka/ui/link-card\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\n\n// TEMPLATE — reaching the team: the public channels as cards beside the private form, then what happens after sending.\n// On a phone the form comes after the channels, its fields at full width.\nexport default function ContactPageTeam() {\n  return (\n    <ContactPage\n      eyebrow=\"Contact\"\n      title=\"Talk to the people who build it\"\n      lead=\"A person answers within two working days, in English or in French.\"\n      aside={<Mascot bird=\"flamingo\" mood=\"welcome\" size={112} />}\n      channels={\n        <>\n          <LinkCard href=\"https://github.com/orgs/krizaka/discussions\" title=\"Discussions\" description=\"Questions and ideas, in public.\" titleAs=\"span\" />\n          <LinkCard href=\"https://github.com/krizaka\" title=\"Report a problem\" description=\"An issue on the repository.\" titleAs=\"span\" />\n        </>\n      }\n      form={\n        <form className=\"flex flex-col gap-4\">\n          <Field.Root>\n            <Field.Label htmlFor=\"contact-email\">Email</Field.Label>\n            <Input id=\"contact-email\" type=\"email\" autoComplete=\"email\" />\n          </Field.Root>\n          <Field.Root>\n            <Field.Label htmlFor=\"contact-message\">Message</Field.Label>\n            <Textarea id=\"contact-message\" rows={4} />\n          </Field.Root>\n          <Button type=\"submit\" variant=\"primary\" size=\"lg\">Send</Button>\n        </form>\n      }\n      next={{ title: \"What happens next\", steps: [{ title: \"We read it\", text: \"The same day, on working days.\" }, { title: \"We answer\", text: \"Within two working days.\" }] }}\n    />\n  );\n}\n"
       }
     ]
   },
@@ -159,7 +159,7 @@
   ],
   "demo": {
     "path": "examples/contact-page/team.tsx",
-    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { ContactPage } from \"@krizaka/ui/contact-page\";\nimport { Field, Input, Textarea } from \"@krizaka/ui/field\";\nimport { LinkCard } from \"@krizaka/ui/link-card\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\n\n// TEMPLATE — reaching the team: the public channels as cards beside the private form, then what happens after sending.\n// On a phone the form comes after the channels, its fields at full width.\nexport default function ContactPageTeam() {\n  return (\n    <ContactPage\n      eyebrow=\"Contact\"\n      title=\"Talk to the people who build it\"\n      lead=\"A person answers within two working days, in English or in French.\"\n      aside={<Mascot bird=\"flamingo\" mood=\"welcome\" size={112} />}\n      channels={\n        <>\n          <LinkCard href=\"https://github.com/orgs/krizaka/discussions\" title=\"Discussions\" description=\"Questions and ideas, in public.\" titleAs=\"span\" />\n          <LinkCard href=\"https://github.com/krizaka\" title=\"Report a problem\" description=\"An issue on the repository.\" titleAs=\"span\" />\n        </>\n      }\n      form={\n        <form className=\"flex flex-col gap-4\">\n          <Field.Root>\n            <Field.Label htmlFor=\"contact-email\">Email</Field.Label>\n            <Input id=\"contact-email\" type=\"email\" autoComplete=\"email\" />\n          </Field.Root>\n          <Field.Root>\n            <Field.Label htmlFor=\"contact-message\">Message</Field.Label>\n            <Textarea id=\"contact-message\" rows={4} />\n          </Field.Root>\n          <Button type=\"submit\" variant=\"primary\" size=\"lg\" shape=\"cut\" shimmer>Send</Button>\n        </form>\n      }\n      next={{ title: \"What happens next\", steps: [{ title: \"We read it\", text: \"The same day, on working days.\" }, { title: \"We answer\", text: \"Within two working days.\" }] }}\n    />\n  );\n}\n"
+    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { ContactPage } from \"@krizaka/ui/contact-page\";\nimport { Field, Input, Textarea } from \"@krizaka/ui/field\";\nimport { LinkCard } from \"@krizaka/ui/link-card\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\n\n// TEMPLATE — reaching the team: the public channels as cards beside the private form, then what happens after sending.\n// On a phone the form comes after the channels, its fields at full width.\nexport default function ContactPageTeam() {\n  return (\n    <ContactPage\n      eyebrow=\"Contact\"\n      title=\"Talk to the people who build it\"\n      lead=\"A person answers within two working days, in English or in French.\"\n      aside={<Mascot bird=\"flamingo\" mood=\"welcome\" size={112} />}\n      channels={\n        <>\n          <LinkCard href=\"https://github.com/orgs/krizaka/discussions\" title=\"Discussions\" description=\"Questions and ideas, in public.\" titleAs=\"span\" />\n          <LinkCard href=\"https://github.com/krizaka\" title=\"Report a problem\" description=\"An issue on the repository.\" titleAs=\"span\" />\n        </>\n      }\n      form={\n        <form className=\"flex flex-col gap-4\">\n          <Field.Root>\n            <Field.Label htmlFor=\"contact-email\">Email</Field.Label>\n            <Input id=\"contact-email\" type=\"email\" autoComplete=\"email\" />\n          </Field.Root>\n          <Field.Root>\n            <Field.Label htmlFor=\"contact-message\">Message</Field.Label>\n            <Textarea id=\"contact-message\" rows={4} />\n          </Field.Root>\n          <Button type=\"submit\" variant=\"primary\" size=\"lg\">Send</Button>\n        </form>\n      }\n      next={{ title: \"What happens next\", steps: [{ title: \"We read it\", text: \"The same day, on working days.\" }, { title: \"We answer\", text: \"Within two working days.\" }] }}\n    />\n  );\n}\n"
   },
   "props": [
     {

package/registry/cover-hero.json

@@ -130,7 +130,7 @@
         "description": "A cover photo, the name, the promise, open-now and the neighbourhood, and the main action.",
         "path": "examples/cover-hero/shop.tsx",
         "module": "@krizaka/ui/registry/examples/cover-hero/shop",
-        "code": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { CoverHero } from \"@krizaka/ui/cover-hero\";\n\n// A drawn sky (a data URI, so the example needs no network); a shop passes its own photo.\nconst COVER = \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230f3d2e'/%3E%3Cstop offset='1' stop-color='%23b5651d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23g)'/%3E%3Ccircle cx='560' cy='190' r='90' fill='%23f2c48d' opacity='.55'/%3E%3Cpath d='M0 470 Q200 380 400 450 T800 420 V600 H0Z' fill='%23f2c48d' opacity='.35'/%3E%3C/svg%3E\";\n\n// A shop's first screen: its cover, the name, one line of promise, the facts that are true, the main action.\nexport default function CoverHeroShop() {\n  return (\n    <CoverHero\n      cover={{ src: COVER, alt: \"\" }}\n      eyebrow=\"Saint-Henri · Montréal\"\n      title=\"Pattes de Saint-Henri\"\n      lead=\"Neighbourhood dog walks, with a photo and a note after each one.\"\n      facts={<><Badge tone=\"success\" dot size=\"md\">Open now · closes at 5 pm</Badge><Badge tone=\"scrim\" size=\"md\">Saint-Henri</Badge></>}\n      actions={<Button size=\"lg\" shape=\"cut\" variant=\"primary\">Book a walk</Button>}\n    />\n  );\n}\n"
+        "code": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { CoverHero } from \"@krizaka/ui/cover-hero\";\n\n// A drawn sky (a data URI, so the example needs no network); a shop passes its own photo.\nconst COVER = \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230f3d2e'/%3E%3Cstop offset='1' stop-color='%23b5651d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23g)'/%3E%3Ccircle cx='560' cy='190' r='90' fill='%23f2c48d' opacity='.55'/%3E%3Cpath d='M0 470 Q200 380 400 450 T800 420 V600 H0Z' fill='%23f2c48d' opacity='.35'/%3E%3C/svg%3E\";\n\n// A shop's first screen: its cover, the name, one line of promise, the facts that are true, the main action.\nexport default function CoverHeroShop() {\n  return (\n    <CoverHero\n      cover={{ src: COVER, alt: \"\" }}\n      eyebrow=\"Saint-Henri · Montréal\"\n      title=\"Pattes de Saint-Henri\"\n      lead=\"Neighbourhood dog walks, with a photo and a note after each one.\"\n      facts={<><Badge tone=\"success\" dot size=\"md\">Open now · closes at 5 pm</Badge><Badge tone=\"scrim\" size=\"md\">Saint-Henri</Badge></>}\n      actions={<Button size=\"lg\" variant=\"primary\">Book a walk</Button>}\n    />\n  );\n}\n"
       },
       {
         "name": "plain",
@@ -138,7 +138,7 @@
         "description": "The brand's colours stand in for the photo.",
         "path": "examples/cover-hero/plain.tsx",
         "module": "@krizaka/ui/registry/examples/cover-hero/plain",
-        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { CoverHero } from \"@krizaka/ui/cover-hero\";\n\n// Without a cover the hero wears the brand's colours: a new shop still opens on a designed screen.\nexport default function CoverHeroPlain() {\n  return <CoverHero eyebrow=\"Plateau · Montréal\" title=\"Atelier Sève\" lead=\"Ceramics classes for beginners, in small groups.\" actions={<Button size=\"lg\" shape=\"cut\" variant=\"primary\">Book a class</Button>} />;\n}\n"
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { CoverHero } from \"@krizaka/ui/cover-hero\";\n\n// Without a cover the hero wears the brand's colours: a new shop still opens on a designed screen.\nexport default function CoverHeroPlain() {\n  return <CoverHero eyebrow=\"Plateau · Montréal\" title=\"Atelier Sève\" lead=\"Ceramics classes for beginners, in small groups.\" actions={<Button size=\"lg\" variant=\"primary\">Book a class</Button>} />;\n}\n"
       }
     ]
   },
@@ -177,7 +177,7 @@
   ],
   "demo": {
     "path": "examples/cover-hero/shop.tsx",
-    "content": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { CoverHero } from \"@krizaka/ui/cover-hero\";\n\n// A drawn sky (a data URI, so the example needs no network); a shop passes its own photo.\nconst COVER = \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230f3d2e'/%3E%3Cstop offset='1' stop-color='%23b5651d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23g)'/%3E%3Ccircle cx='560' cy='190' r='90' fill='%23f2c48d' opacity='.55'/%3E%3Cpath d='M0 470 Q200 380 400 450 T800 420 V600 H0Z' fill='%23f2c48d' opacity='.35'/%3E%3C/svg%3E\";\n\n// A shop's first screen: its cover, the name, one line of promise, the facts that are true, the main action.\nexport default function CoverHeroShop() {\n  return (\n    <CoverHero\n      cover={{ src: COVER, alt: \"\" }}\n      eyebrow=\"Saint-Henri · Montréal\"\n      title=\"Pattes de Saint-Henri\"\n      lead=\"Neighbourhood dog walks, with a photo and a note after each one.\"\n      facts={<><Badge tone=\"success\" dot size=\"md\">Open now · closes at 5 pm</Badge><Badge tone=\"scrim\" size=\"md\">Saint-Henri</Badge></>}\n      actions={<Button size=\"lg\" shape=\"cut\" variant=\"primary\">Book a walk</Button>}\n    />\n  );\n}\n"
+    "content": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { CoverHero } from \"@krizaka/ui/cover-hero\";\n\n// A drawn sky (a data URI, so the example needs no network); a shop passes its own photo.\nconst COVER = \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230f3d2e'/%3E%3Cstop offset='1' stop-color='%23b5651d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23g)'/%3E%3Ccircle cx='560' cy='190' r='90' fill='%23f2c48d' opacity='.55'/%3E%3Cpath d='M0 470 Q200 380 400 450 T800 420 V600 H0Z' fill='%23f2c48d' opacity='.35'/%3E%3C/svg%3E\";\n\n// A shop's first screen: its cover, the name, one line of promise, the facts that are true, the main action.\nexport default function CoverHeroShop() {\n  return (\n    <CoverHero\n      cover={{ src: COVER, alt: \"\" }}\n      eyebrow=\"Saint-Henri · Montréal\"\n      title=\"Pattes de Saint-Henri\"\n      lead=\"Neighbourhood dog walks, with a photo and a note after each one.\"\n      facts={<><Badge tone=\"success\" dot size=\"md\">Open now · closes at 5 pm</Badge><Badge tone=\"scrim\" size=\"md\">Saint-Henri</Badge></>}\n      actions={<Button size=\"lg\" variant=\"primary\">Book a walk</Button>}\n    />\n  );\n}\n"
   },
   "props": [
     {

package/registry/dashboard-layout.json

@@ -156,7 +156,7 @@
         "why": "An operator reads the key figures at a glance and acts on what runs, for the period they chose.",
         "path": "examples/dashboard-layout/orazaka-eric.tsx",
         "module": "@krizaka/ui/registry/examples/dashboard-layout/orazaka-eric",
-        "code": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Chip } from \"@krizaka/ui/chip\";\nimport { DashboardLayout, Widget } from \"@krizaka/ui/dashboard-layout\";\nimport { Meter } from \"@krizaka/ui/meter\";\nimport { Progress } from \"@krizaka/ui/progress\";\nimport { Stat } from \"@krizaka/ui/stat\";\n\nconst JOBS = [\n  { name: \"Catalogue summaries\", studio: \"Writing studio\", value: 72, eta: \"about 2 min\" },\n  { name: \"Product shots, autumn\", studio: \"Image studio\", value: 35, eta: \"about 6 min\" },\n];\nconst PACKS = [\n  { name: \"Customer support\", runs: \"412 answers this week\" },\n  { name: \"Law 25 review\", runs: \"38 documents checked\" },\n];\n\n// TEMPLATE — Orazaka's console, Eric's morning (an accountant who runs his firm's AI on its own server): what the\n// engine did, what is running now, the credits left, the packs at work. The period is a single-choice chip group above the grid;\n// on a phone everything stacks in reading order, the running jobs first after the figures.\nexport default function DashboardLayoutOrazakaEric() {\n  return (\n    <div className=\"brand-orazaka w-full\">\n      <DashboardLayout\n        eyebrow=\"Tremblay & associés · on-premise\"\n        title=\"Good morning, Eric\"\n        description=\"Nothing left your server this week: 1,284 requests, all answered locally.\"\n        actions={\n          <>\n            <Button size=\"sm\" variant=\"secondary\" shape=\"cut\">Add a pack</Button>\n            <Button size=\"sm\" variant=\"primary\" shape=\"cut\">New job</Button>\n          </>\n        }\n        toolbar={\n          <Chip.Group type=\"single\" label=\"Period\" defaultValue=\"7d\" required>\n            <Chip value=\"today\">Today</Chip>\n            <Chip value=\"7d\">7 days</Chip>\n            <Chip value=\"30d\">30 days</Chip>\n          </Chip.Group>\n        }\n      >\n        <Widget title=\"Requests\">\n          <Stat label=\"7 days\" value=\"1,284\" trend=\"up\" trendLabel=\"+6 %\" />\n        </Widget>\n        <Widget title=\"Answered locally\">\n          <Stat label=\"No cloud call\" value=\"100 %\" hint=\"sovereign mode\" />\n        </Widget>\n        <Widget title=\"Median answer\">\n          <Stat label=\"Chat\" value=\"1.8 s\" trend=\"down\" trendLabel=\"−0.3 s\" />\n        </Widget>\n        <Widget title=\"Credits\" description=\"Workspace plan\">\n          <Meter label=\"Credits used\" value={3800} max={12000} valueText=\"3,800 of 12,000\" showLabel />\n        </Widget>\n        <Widget title=\"Running now\" span={2} action={<Badge tone=\"accent\" dot>2 jobs</Badge>}>\n          <ul className=\"flex flex-col gap-4\">\n            {JOBS.map((j) => (\n              <li key={j.name} className=\"flex flex-col gap-1.5\">\n                <span className=\"flex items-baseline justify-between gap-2 text-sm\">\n                  <span className=\"font-medium text-fg\">{j.name}</span>\n                  <span className=\"text-xs text-fg-secondary\">{j.studio}</span>\n                </span>\n                <Progress value={j.value} label={j.name} eta={j.eta} size=\"sm\" />\n              </li>\n            ))}\n          </ul>\n        </Widget>\n        <Widget title=\"Packs at work\" span={2} action={<Button size=\"sm\" variant=\"ghost\">All packs</Button>}>\n          <ul className=\"divide-y divide-border-subtle\">\n            {PACKS.map((p) => (\n              <li key={p.name} className=\"flex items-center justify-between gap-3 py-2.5 text-sm\">\n                <span className=\"font-medium text-fg\">{p.name}</span>\n                <span className=\"text-fg-secondary\">{p.runs}</span>\n              </li>\n            ))}\n          </ul>\n        </Widget>\n      </DashboardLayout>\n    </div>\n  );\n}\n"
+        "code": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Chip } from \"@krizaka/ui/chip\";\nimport { DashboardLayout, Widget } from \"@krizaka/ui/dashboard-layout\";\nimport { Meter } from \"@krizaka/ui/meter\";\nimport { Progress } from \"@krizaka/ui/progress\";\nimport { Stat } from \"@krizaka/ui/stat\";\n\nconst JOBS = [\n  { name: \"Catalogue summaries\", studio: \"Writing studio\", value: 72, eta: \"about 2 min\" },\n  { name: \"Product shots, autumn\", studio: \"Image studio\", value: 35, eta: \"about 6 min\" },\n];\nconst PACKS = [\n  { name: \"Customer support\", runs: \"412 answers this week\" },\n  { name: \"Law 25 review\", runs: \"38 documents checked\" },\n];\n\n// TEMPLATE — Orazaka's console, Eric's morning (an accountant who runs his firm's AI on its own server): what the\n// engine did, what is running now, the credits left, the packs at work. The period is a single-choice chip group above the grid;\n// on a phone everything stacks in reading order, the running jobs first after the figures.\nexport default function DashboardLayoutOrazakaEric() {\n  return (\n    <div className=\"brand-orazaka w-full\">\n      <DashboardLayout\n        eyebrow=\"Tremblay & associés · on-premise\"\n        title=\"Good morning, Eric\"\n        description=\"Nothing left your server this week: 1,284 requests, all answered locally.\"\n        actions={\n          <>\n            <Button size=\"sm\" variant=\"secondary\">Add a pack</Button>\n            <Button size=\"sm\" variant=\"primary\">New job</Button>\n          </>\n        }\n        toolbar={\n          <Chip.Group type=\"single\" label=\"Period\" defaultValue=\"7d\" required>\n            <Chip value=\"today\">Today</Chip>\n            <Chip value=\"7d\">7 days</Chip>\n            <Chip value=\"30d\">30 days</Chip>\n          </Chip.Group>\n        }\n      >\n        <Widget title=\"Requests\">\n          <Stat label=\"7 days\" value=\"1,284\" trend=\"up\" trendLabel=\"+6 %\" />\n        </Widget>\n        <Widget title=\"Answered locally\">\n          <Stat label=\"No cloud call\" value=\"100 %\" hint=\"sovereign mode\" />\n        </Widget>\n        <Widget title=\"Median answer\">\n          <Stat label=\"Chat\" value=\"1.8 s\" trend=\"down\" trendLabel=\"−0.3 s\" />\n        </Widget>\n        <Widget title=\"Credits\" description=\"Workspace plan\">\n          <Meter label=\"Credits used\" value={3800} max={12000} valueText=\"3,800 of 12,000\" showLabel />\n        </Widget>\n        <Widget title=\"Running now\" span={2} action={<Badge tone=\"accent\" dot>2 jobs</Badge>}>\n          <ul className=\"flex flex-col gap-4\">\n            {JOBS.map((j) => (\n              <li key={j.name} className=\"flex flex-col gap-1.5\">\n                <span className=\"flex items-baseline justify-between gap-2 text-sm\">\n                  <span className=\"font-medium text-fg\">{j.name}</span>\n                  <span className=\"text-xs text-fg-secondary\">{j.studio}</span>\n                </span>\n                <Progress value={j.value} label={j.name} eta={j.eta} size=\"sm\" />\n              </li>\n            ))}\n          </ul>\n        </Widget>\n        <Widget title=\"Packs at work\" span={2} action={<Button size=\"sm\" variant=\"ghost\">All packs</Button>}>\n          <ul className=\"divide-y divide-border-subtle\">\n            {PACKS.map((p) => (\n              <li key={p.name} className=\"flex items-center justify-between gap-3 py-2.5 text-sm\">\n                <span className=\"font-medium text-fg\">{p.name}</span>\n                <span className=\"text-fg-secondary\">{p.runs}</span>\n              </li>\n            ))}\n          </ul>\n        </Widget>\n      </DashboardLayout>\n    </div>\n  );\n}\n"
       },
       {
         "name": "widgets",
@@ -193,7 +193,7 @@
   "registryDependencies": [],
   "demo": {
     "path": "examples/dashboard-layout/orazaka-eric.tsx",
-    "content": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Chip } from \"@krizaka/ui/chip\";\nimport { DashboardLayout, Widget } from \"@krizaka/ui/dashboard-layout\";\nimport { Meter } from \"@krizaka/ui/meter\";\nimport { Progress } from \"@krizaka/ui/progress\";\nimport { Stat } from \"@krizaka/ui/stat\";\n\nconst JOBS = [\n  { name: \"Catalogue summaries\", studio: \"Writing studio\", value: 72, eta: \"about 2 min\" },\n  { name: \"Product shots, autumn\", studio: \"Image studio\", value: 35, eta: \"about 6 min\" },\n];\nconst PACKS = [\n  { name: \"Customer support\", runs: \"412 answers this week\" },\n  { name: \"Law 25 review\", runs: \"38 documents checked\" },\n];\n\n// TEMPLATE — Orazaka's console, Eric's morning (an accountant who runs his firm's AI on its own server): what the\n// engine did, what is running now, the credits left, the packs at work. The period is a single-choice chip group above the grid;\n// on a phone everything stacks in reading order, the running jobs first after the figures.\nexport default function DashboardLayoutOrazakaEric() {\n  return (\n    <div className=\"brand-orazaka w-full\">\n      <DashboardLayout\n        eyebrow=\"Tremblay & associés · on-premise\"\n        title=\"Good morning, Eric\"\n        description=\"Nothing left your server this week: 1,284 requests, all answered locally.\"\n        actions={\n          <>\n            <Button size=\"sm\" variant=\"secondary\" shape=\"cut\">Add a pack</Button>\n            <Button size=\"sm\" variant=\"primary\" shape=\"cut\">New job</Button>\n          </>\n        }\n        toolbar={\n          <Chip.Group type=\"single\" label=\"Period\" defaultValue=\"7d\" required>\n            <Chip value=\"today\">Today</Chip>\n            <Chip value=\"7d\">7 days</Chip>\n            <Chip value=\"30d\">30 days</Chip>\n          </Chip.Group>\n        }\n      >\n        <Widget title=\"Requests\">\n          <Stat label=\"7 days\" value=\"1,284\" trend=\"up\" trendLabel=\"+6 %\" />\n        </Widget>\n        <Widget title=\"Answered locally\">\n          <Stat label=\"No cloud call\" value=\"100 %\" hint=\"sovereign mode\" />\n        </Widget>\n        <Widget title=\"Median answer\">\n          <Stat label=\"Chat\" value=\"1.8 s\" trend=\"down\" trendLabel=\"−0.3 s\" />\n        </Widget>\n        <Widget title=\"Credits\" description=\"Workspace plan\">\n          <Meter label=\"Credits used\" value={3800} max={12000} valueText=\"3,800 of 12,000\" showLabel />\n        </Widget>\n        <Widget title=\"Running now\" span={2} action={<Badge tone=\"accent\" dot>2 jobs</Badge>}>\n          <ul className=\"flex flex-col gap-4\">\n            {JOBS.map((j) => (\n              <li key={j.name} className=\"flex flex-col gap-1.5\">\n                <span className=\"flex items-baseline justify-between gap-2 text-sm\">\n                  <span className=\"font-medium text-fg\">{j.name}</span>\n                  <span className=\"text-xs text-fg-secondary\">{j.studio}</span>\n                </span>\n                <Progress value={j.value} label={j.name} eta={j.eta} size=\"sm\" />\n              </li>\n            ))}\n          </ul>\n        </Widget>\n        <Widget title=\"Packs at work\" span={2} action={<Button size=\"sm\" variant=\"ghost\">All packs</Button>}>\n          <ul className=\"divide-y divide-border-subtle\">\n            {PACKS.map((p) => (\n              <li key={p.name} className=\"flex items-center justify-between gap-3 py-2.5 text-sm\">\n                <span className=\"font-medium text-fg\">{p.name}</span>\n                <span className=\"text-fg-secondary\">{p.runs}</span>\n              </li>\n            ))}\n          </ul>\n        </Widget>\n      </DashboardLayout>\n    </div>\n  );\n}\n"
+    "content": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Chip } from \"@krizaka/ui/chip\";\nimport { DashboardLayout, Widget } from \"@krizaka/ui/dashboard-layout\";\nimport { Meter } from \"@krizaka/ui/meter\";\nimport { Progress } from \"@krizaka/ui/progress\";\nimport { Stat } from \"@krizaka/ui/stat\";\n\nconst JOBS = [\n  { name: \"Catalogue summaries\", studio: \"Writing studio\", value: 72, eta: \"about 2 min\" },\n  { name: \"Product shots, autumn\", studio: \"Image studio\", value: 35, eta: \"about 6 min\" },\n];\nconst PACKS = [\n  { name: \"Customer support\", runs: \"412 answers this week\" },\n  { name: \"Law 25 review\", runs: \"38 documents checked\" },\n];\n\n// TEMPLATE — Orazaka's console, Eric's morning (an accountant who runs his firm's AI on its own server): what the\n// engine did, what is running now, the credits left, the packs at work. The period is a single-choice chip group above the grid;\n// on a phone everything stacks in reading order, the running jobs first after the figures.\nexport default function DashboardLayoutOrazakaEric() {\n  return (\n    <div className=\"brand-orazaka w-full\">\n      <DashboardLayout\n        eyebrow=\"Tremblay & associés · on-premise\"\n        title=\"Good morning, Eric\"\n        description=\"Nothing left your server this week: 1,284 requests, all answered locally.\"\n        actions={\n          <>\n            <Button size=\"sm\" variant=\"secondary\">Add a pack</Button>\n            <Button size=\"sm\" variant=\"primary\">New job</Button>\n          </>\n        }\n        toolbar={\n          <Chip.Group type=\"single\" label=\"Period\" defaultValue=\"7d\" required>\n            <Chip value=\"today\">Today</Chip>\n            <Chip value=\"7d\">7 days</Chip>\n            <Chip value=\"30d\">30 days</Chip>\n          </Chip.Group>\n        }\n      >\n        <Widget title=\"Requests\">\n          <Stat label=\"7 days\" value=\"1,284\" trend=\"up\" trendLabel=\"+6 %\" />\n        </Widget>\n        <Widget title=\"Answered locally\">\n          <Stat label=\"No cloud call\" value=\"100 %\" hint=\"sovereign mode\" />\n        </Widget>\n        <Widget title=\"Median answer\">\n          <Stat label=\"Chat\" value=\"1.8 s\" trend=\"down\" trendLabel=\"−0.3 s\" />\n        </Widget>\n        <Widget title=\"Credits\" description=\"Workspace plan\">\n          <Meter label=\"Credits used\" value={3800} max={12000} valueText=\"3,800 of 12,000\" showLabel />\n        </Widget>\n        <Widget title=\"Running now\" span={2} action={<Badge tone=\"accent\" dot>2 jobs</Badge>}>\n          <ul className=\"flex flex-col gap-4\">\n            {JOBS.map((j) => (\n              <li key={j.name} className=\"flex flex-col gap-1.5\">\n                <span className=\"flex items-baseline justify-between gap-2 text-sm\">\n                  <span className=\"font-medium text-fg\">{j.name}</span>\n                  <span className=\"text-xs text-fg-secondary\">{j.studio}</span>\n                </span>\n                <Progress value={j.value} label={j.name} eta={j.eta} size=\"sm\" />\n              </li>\n            ))}\n          </ul>\n        </Widget>\n        <Widget title=\"Packs at work\" span={2} action={<Button size=\"sm\" variant=\"ghost\">All packs</Button>}>\n          <ul className=\"divide-y divide-border-subtle\">\n            {PACKS.map((p) => (\n              <li key={p.name} className=\"flex items-center justify-between gap-3 py-2.5 text-sm\">\n                <span className=\"font-medium text-fg\">{p.name}</span>\n                <span className=\"text-fg-secondary\">{p.runs}</span>\n              </li>\n            ))}\n          </ul>\n        </Widget>\n      </DashboardLayout>\n    </div>\n  );\n}\n"
   },
   "props": [
     {