@krizaka/ui 3.22.0 → 3.23.0

package/dist/argument-card.d.ts

@@ -1,6 +1,7 @@
 import { Fact } from './page.js';
 import * as React from 'react';
 import { L as LinkComponent } from './block-link-BAg4eoZk.js';
+import { CardHover } from './link-card.js';
 import './section-backdrop.js';
 import 'tailwind-variants';
 
@@ -56,12 +57,14 @@ type ArgumentCardProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
     level?: 2 | 3 | 4;
     /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */
     linkAs?: LinkComponent;
+    /** The hover of the card: `light` (the pointer's light, the default) or `quiet` (no glow, a lift, a ring on focus). */
+    hover?: CardHover;
 };
 /**
  * A card that argues, compact (about a third of a full card): who (icon, name, meta; the bird small in the corner) →
  * the problem in one line → compact facts → one short action. What it does, the bird's rule and the long version are
  * never on the face: they live on the detail page (`more`) or in the card unfolded in place (`panelLabel`).
  */
-declare function ArgumentCard({ id, title, icon, meta, mark, facts, hook, points, rule, details, panelLabel, more, actions, level, linkAs, className, ...props }: ArgumentCardProps): React.JSX.Element;
+declare function ArgumentCard({ id, title, icon, meta, mark, facts, hook, points, rule, details, panelLabel, more, actions, level, linkAs, hover, className, ...props }: ArgumentCardProps): React.JSX.Element;
 
 export { ArgumentCard, type ArgumentCardProps, Fact };

package/dist/argument-card.js

@@ -1,24 +1,27 @@
+import {
+  Facts
+} from "./chunk-LZNZLCOE.js";
+import {
+  cardHoverClass
+} from "./chunk-APNIVNIX.js";
 import {
   BlockLink
 } from "./chunk-2AGSO3WH.js";
-import {
-  Facts
-} from "./chunk-DGQMDJXK.js";
-import "./chunk-XVLWVTQA.js";
 import {
   ArrowGlyph,
   ChevronGlyph
 } from "./chunk-XCBVFMNV.js";
+import "./chunk-XVLWVTQA.js";
 import {
   cn
-} from "./chunk-4LOMIQVX.js";
+} from "./chunk-W675RFOA.js";
 
 // src/argument-card/argument-card.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function ArgumentCard({ id, title, icon, meta, mark, facts, hook, points, rule, details, panelLabel, more, actions, level = 3, linkAs, className, ...props }) {
+function ArgumentCard({ id, title, icon, meta, mark, facts, hook, points, rule, details, panelLabel, more, actions, level = 3, linkAs, hover, className, ...props }) {
   const H = `h${level}`;
   const fold = !more && panelLabel && (points || rule || details && details.length > 0);
-  return /* @__PURE__ */ jsxs("article", { className: cn("kz-block-card kz-arg", className), "data-kz-light": "", "aria-labelledby": id, ...props, children: [
+  return /* @__PURE__ */ jsxs("article", { className: cn("kz-block-card kz-arg", cardHoverClass(hover), className), "data-kz-light": "", "aria-labelledby": id, ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: "kz-arg-head", children: [
       icon && /* @__PURE__ */ jsx("span", { className: "kz-block-icon", "aria-hidden": true, children: icon }),
       /* @__PURE__ */ jsxs("div", { className: "kz-arg-id", children: [

package/dist/argument-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/argument-card/argument-card.tsx"],"sourcesContent":["// Server-safe. A card that argues (blocks.css), compact: who (icon, name, facts) → the trap in one line → the way in.\n// The long version — what it does, the rule a bird stands for, the reasons — waits in a panel the reader opens (a\n// native <details>: keyboard, screen readers, no script). Cards of a row share their height; the panel and the foot\n// sit at the bottom, at the same place on every card.\nimport type * as React from \"react\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\nimport { ArrowGlyph, ChevronGlyph } from \"../glyphs\";\nimport { type Fact, Facts } from \"../page/page\";\n\nexport type ArgumentCardProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The id of the title: the card's accessible name. */\n  id: string;\n  /** The title: the subject (a building block, a feature, a plan). */\n  title: React.ReactNode;\n  /** The icon tile (a signature icon): decorative. */\n  icon?: React.ReactNode;\n  /** A mono line under the title (a repository, a package). */\n  meta?: React.ReactNode;\n  /** Small, in the top corner: the bird whose rule it is (a `Mascot` of 40 px, still). Decorative. */\n  mark?: React.ReactNode;\n  /** Compact facts under the line: registry and version, a status said honestly. */\n  facts?: readonly Fact[];\n  /**\n   * The problem in ONE line (≤ 90 characters): what a reader keeps if they read nothing else. `label` (`The trap`) is\n   * read by assistive technology before it, not shown.\n   */\n  hook: { label: React.ReactNode; text: React.ReactNode };\n  /** Unfolded only: what it does, as a few short points, with their label (`What it does`). */\n  points?: { label: React.ReactNode; items: readonly React.ReactNode[] };\n  /** Unfolded only: the rule told by a bird (a `MascotQuote`, `variant=\"inline\"`). */\n  rule?: React.ReactNode;\n  /** Unfolded only: the long version, as labelled paragraphs. */\n  details?: readonly { label: React.ReactNode; text: React.ReactNode }[];\n  /**\n   * Without a detail page: the words that unfold the card in place (`Details`) — a native `<details>` holding the\n   * points, the rule and the long version. Ignored with `more`: the detail page holds them.\n   */\n  panelLabel?: React.ReactNode;\n  /** The way in: a detail page — one short action at the foot (`Details`). With it, the card is only its face. */\n  more?: { href: string; label: React.ReactNode };\n  /** Discreet secondary actions at the foot, on the right (an `ActionBar` with `variant=\"icons\"`). */\n  actions?: React.ReactNode;\n  /**\n   * The title's level.\n   * @default 3\n   */\n  level?: 2 | 3 | 4;\n  /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: LinkComponent;\n};\n\n/**\n * A card that argues, compact (about a third of a full card): who (icon, name, meta; the bird small in the corner) →\n * the problem in one line → compact facts → one short action. What it does, the bird's rule and the long version are\n * never on the face: they live on the detail page (`more`) or in the card unfolded in place (`panelLabel`).\n */\nexport function ArgumentCard({ id, title, icon, meta, mark, facts, hook, points, rule, details, panelLabel, more, actions, level = 3, linkAs, className, ...props }: ArgumentCardProps) {\n  const H = `h${level}` as \"h2\" | \"h3\" | \"h4\";\n  const fold = !more && panelLabel && (points || rule || (details && details.length > 0));\n  return (\n    <article className={cn(\"kz-block-card kz-arg\", className)} data-kz-light=\"\" aria-labelledby={id} {...props}>\n      <div className=\"kz-arg-head\">\n        {icon && (\n          <span className=\"kz-block-icon\" aria-hidden>\n            {icon}\n          </span>\n        )}\n        <div className=\"kz-arg-id\">\n          <H id={id} className=\"kz-arg-title\">\n            {title}\n          </H>\n          {meta && <p className=\"kz-arg-meta\">{meta}</p>}\n        </div>\n        {mark && (\n          <span className=\"kz-arg-mark\" aria-hidden>\n            {mark}\n          </span>\n        )}\n      </div>\n      <p className=\"kz-arg-line\">\n        <span className=\"kz-sr-only\">{hook.label} — </span>\n        {hook.text}\n      </p>\n      {facts && facts.length > 0 && <Facts items={facts} />}\n      {fold && (\n        <details className=\"kz-arg-panel\">\n          <summary>\n            {panelLabel} <ChevronGlyph className=\"h-3.5 w-3.5\" />\n          </summary>\n          <div className=\"kz-arg-panel-body\">\n            {points && (\n              <div>\n                <p className=\"kz-label\">{points.label}</p>\n                <ul className=\"kz-list\">\n                  {points.items.map((item, i) => (\n                    <li key={i}>{item}</li>\n                  ))}\n                </ul>\n              </div>\n            )}\n            {details && details.length > 0 && (\n              <dl>\n                {details.map((d, i) => (\n                  <div key={i}>\n                    <dt className=\"kz-label\">{d.label}</dt>\n                    <dd>{d.text}</dd>\n                  </div>\n                ))}\n              </dl>\n            )}\n            {rule}\n          </div>\n        </details>\n      )}\n      {(more || actions) && (\n        <div className=\"kz-arg-foot\">\n          {more ? (\n            <BlockLink href={more.href} linkAs={linkAs} className=\"kz-arg-more\" aria-describedby={id}>\n              {more.label} <ArrowGlyph className=\"h-3.5 w-3.5\" />\n            </BlockLink>\n          ) : (\n            <span />\n          )}\n          {actions}\n        </div>\n      )}\n    </article>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiEU,cAIF,YAJE;AAPH,SAAS,aAAa,EAAE,IAAI,OAAO,MAAM,MAAM,MAAM,OAAO,MAAM,QAAQ,MAAM,SAAS,YAAY,MAAM,SAAS,QAAQ,GAAG,QAAQ,WAAW,GAAG,MAAM,GAAsB;AACtL,QAAM,IAAI,IAAI,KAAK;AACnB,QAAM,OAAO,CAAC,QAAQ,eAAe,UAAU,QAAS,WAAW,QAAQ,SAAS;AACpF,SACE,qBAAC,aAAQ,WAAW,GAAG,wBAAwB,SAAS,GAAG,iBAAc,IAAG,mBAAiB,IAAK,GAAG,OACnG;AAAA,yBAAC,SAAI,WAAU,eACZ;AAAA,cACC,oBAAC,UAAK,WAAU,iBAAgB,eAAW,MACxC,gBACH;AAAA,MAEF,qBAAC,SAAI,WAAU,aACb;AAAA,4BAAC,KAAE,IAAQ,WAAU,gBAClB,iBACH;AAAA,QACC,QAAQ,oBAAC,OAAE,WAAU,eAAe,gBAAK;AAAA,SAC5C;AAAA,MACC,QACC,oBAAC,UAAK,WAAU,eAAc,eAAW,MACtC,gBACH;AAAA,OAEJ;AAAA,IACA,qBAAC,OAAE,WAAU,eACX;AAAA,2BAAC,UAAK,WAAU,cAAc;AAAA,aAAK;AAAA,QAAM;AAAA,SAAG;AAAA,MAC3C,KAAK;AAAA,OACR;AAAA,IACC,SAAS,MAAM,SAAS,KAAK,oBAAC,SAAM,OAAO,OAAO;AAAA,IAClD,QACC,qBAAC,aAAQ,WAAU,gBACjB;AAAA,2BAAC,aACE;AAAA;AAAA,QAAW;AAAA,QAAC,oBAAC,gBAAa,WAAU,eAAc;AAAA,SACrD;AAAA,MACA,qBAAC,SAAI,WAAU,qBACZ;AAAA,kBACC,qBAAC,SACC;AAAA,8BAAC,OAAE,WAAU,YAAY,iBAAO,OAAM;AAAA,UACtC,oBAAC,QAAG,WAAU,WACX,iBAAO,MAAM,IAAI,CAAC,MAAM,MACvB,oBAAC,QAAY,kBAAJ,CAAS,CACnB,GACH;AAAA,WACF;AAAA,QAED,WAAW,QAAQ,SAAS,KAC3B,oBAAC,QACE,kBAAQ,IAAI,CAAC,GAAG,MACf,qBAAC,SACC;AAAA,8BAAC,QAAG,WAAU,YAAY,YAAE,OAAM;AAAA,UAClC,oBAAC,QAAI,YAAE,MAAK;AAAA,aAFJ,CAGV,CACD,GACH;AAAA,QAED;AAAA,SACH;AAAA,OACF;AAAA,KAEA,QAAQ,YACR,qBAAC,SAAI,WAAU,eACZ;AAAA,aACC,qBAAC,aAAU,MAAM,KAAK,MAAM,QAAgB,WAAU,eAAc,oBAAkB,IACnF;AAAA,aAAK;AAAA,QAAM;AAAA,QAAC,oBAAC,cAAW,WAAU,eAAc;AAAA,SACnD,IAEA,oBAAC,UAAK;AAAA,MAEP;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../src/argument-card/argument-card.tsx"],"sourcesContent":["// Server-safe. A card that argues (blocks.css), compact: who (icon, name, facts) → the trap in one line → the way in.\n// The long version — what it does, the rule a bird stands for, the reasons — waits in a panel the reader opens (a\n// native <details>: keyboard, screen readers, no script). Cards of a row share their height; the panel and the foot\n// sit at the bottom, at the same place on every card.\nimport type * as React from \"react\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\nimport { ArrowGlyph, ChevronGlyph } from \"../glyphs\";\nimport { type CardHover, cardHoverClass } from \"../link-card/link-card\";\nimport { type Fact, Facts } from \"../page/page\";\n\nexport type ArgumentCardProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The id of the title: the card's accessible name. */\n  id: string;\n  /** The title: the subject (a building block, a feature, a plan). */\n  title: React.ReactNode;\n  /** The icon tile (a signature icon): decorative. */\n  icon?: React.ReactNode;\n  /** A mono line under the title (a repository, a package). */\n  meta?: React.ReactNode;\n  /** Small, in the top corner: the bird whose rule it is (a `Mascot` of 40 px, still). Decorative. */\n  mark?: React.ReactNode;\n  /** Compact facts under the line: registry and version, a status said honestly. */\n  facts?: readonly Fact[];\n  /**\n   * The problem in ONE line (≤ 90 characters): what a reader keeps if they read nothing else. `label` (`The trap`) is\n   * read by assistive technology before it, not shown.\n   */\n  hook: { label: React.ReactNode; text: React.ReactNode };\n  /** Unfolded only: what it does, as a few short points, with their label (`What it does`). */\n  points?: { label: React.ReactNode; items: readonly React.ReactNode[] };\n  /** Unfolded only: the rule told by a bird (a `MascotQuote`, `variant=\"inline\"`). */\n  rule?: React.ReactNode;\n  /** Unfolded only: the long version, as labelled paragraphs. */\n  details?: readonly { label: React.ReactNode; text: React.ReactNode }[];\n  /**\n   * Without a detail page: the words that unfold the card in place (`Details`) — a native `<details>` holding the\n   * points, the rule and the long version. Ignored with `more`: the detail page holds them.\n   */\n  panelLabel?: React.ReactNode;\n  /** The way in: a detail page — one short action at the foot (`Details`). With it, the card is only its face. */\n  more?: { href: string; label: React.ReactNode };\n  /** Discreet secondary actions at the foot, on the right (an `ActionBar` with `variant=\"icons\"`). */\n  actions?: React.ReactNode;\n  /**\n   * The title's level.\n   * @default 3\n   */\n  level?: 2 | 3 | 4;\n  /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: LinkComponent;\n  /** The hover of the card: `light` (the pointer's light, the default) or `quiet` (no glow, a lift, a ring on focus). */\n  hover?: CardHover;\n};\n\n/**\n * A card that argues, compact (about a third of a full card): who (icon, name, meta; the bird small in the corner) →\n * the problem in one line → compact facts → one short action. What it does, the bird's rule and the long version are\n * never on the face: they live on the detail page (`more`) or in the card unfolded in place (`panelLabel`).\n */\nexport function ArgumentCard({ id, title, icon, meta, mark, facts, hook, points, rule, details, panelLabel, more, actions, level = 3, linkAs, hover, className, ...props }: ArgumentCardProps) {\n  const H = `h${level}` as \"h2\" | \"h3\" | \"h4\";\n  const fold = !more && panelLabel && (points || rule || (details && details.length > 0));\n  return (\n    <article className={cn(\"kz-block-card kz-arg\", cardHoverClass(hover), className)} data-kz-light=\"\" aria-labelledby={id} {...props}>\n      <div className=\"kz-arg-head\">\n        {icon && (\n          <span className=\"kz-block-icon\" aria-hidden>\n            {icon}\n          </span>\n        )}\n        <div className=\"kz-arg-id\">\n          <H id={id} className=\"kz-arg-title\">\n            {title}\n          </H>\n          {meta && <p className=\"kz-arg-meta\">{meta}</p>}\n        </div>\n        {mark && (\n          <span className=\"kz-arg-mark\" aria-hidden>\n            {mark}\n          </span>\n        )}\n      </div>\n      <p className=\"kz-arg-line\">\n        <span className=\"kz-sr-only\">{hook.label} — </span>\n        {hook.text}\n      </p>\n      {facts && facts.length > 0 && <Facts items={facts} />}\n      {fold && (\n        <details className=\"kz-arg-panel\">\n          <summary>\n            {panelLabel} <ChevronGlyph className=\"h-3.5 w-3.5\" />\n          </summary>\n          <div className=\"kz-arg-panel-body\">\n            {points && (\n              <div>\n                <p className=\"kz-label\">{points.label}</p>\n                <ul className=\"kz-list\">\n                  {points.items.map((item, i) => (\n                    <li key={i}>{item}</li>\n                  ))}\n                </ul>\n              </div>\n            )}\n            {details && details.length > 0 && (\n              <dl>\n                {details.map((d, i) => (\n                  <div key={i}>\n                    <dt className=\"kz-label\">{d.label}</dt>\n                    <dd>{d.text}</dd>\n                  </div>\n                ))}\n              </dl>\n            )}\n            {rule}\n          </div>\n        </details>\n      )}\n      {(more || actions) && (\n        <div className=\"kz-arg-foot\">\n          {more ? (\n            <BlockLink href={more.href} linkAs={linkAs} className=\"kz-arg-more\" aria-describedby={id}>\n              {more.label} <ArrowGlyph className=\"h-3.5 w-3.5\" />\n            </BlockLink>\n          ) : (\n            <span />\n          )}\n          {actions}\n        </div>\n      )}\n    </article>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoEU,cAIF,YAJE;AAPH,SAAS,aAAa,EAAE,IAAI,OAAO,MAAM,MAAM,MAAM,OAAO,MAAM,QAAQ,MAAM,SAAS,YAAY,MAAM,SAAS,QAAQ,GAAG,QAAQ,OAAO,WAAW,GAAG,MAAM,GAAsB;AAC7L,QAAM,IAAI,IAAI,KAAK;AACnB,QAAM,OAAO,CAAC,QAAQ,eAAe,UAAU,QAAS,WAAW,QAAQ,SAAS;AACpF,SACE,qBAAC,aAAQ,WAAW,GAAG,wBAAwB,eAAe,KAAK,GAAG,SAAS,GAAG,iBAAc,IAAG,mBAAiB,IAAK,GAAG,OAC1H;AAAA,yBAAC,SAAI,WAAU,eACZ;AAAA,cACC,oBAAC,UAAK,WAAU,iBAAgB,eAAW,MACxC,gBACH;AAAA,MAEF,qBAAC,SAAI,WAAU,aACb;AAAA,4BAAC,KAAE,IAAQ,WAAU,gBAClB,iBACH;AAAA,QACC,QAAQ,oBAAC,OAAE,WAAU,eAAe,gBAAK;AAAA,SAC5C;AAAA,MACC,QACC,oBAAC,UAAK,WAAU,eAAc,eAAW,MACtC,gBACH;AAAA,OAEJ;AAAA,IACA,qBAAC,OAAE,WAAU,eACX;AAAA,2BAAC,UAAK,WAAU,cAAc;AAAA,aAAK;AAAA,QAAM;AAAA,SAAG;AAAA,MAC3C,KAAK;AAAA,OACR;AAAA,IACC,SAAS,MAAM,SAAS,KAAK,oBAAC,SAAM,OAAO,OAAO;AAAA,IAClD,QACC,qBAAC,aAAQ,WAAU,gBACjB;AAAA,2BAAC,aACE;AAAA;AAAA,QAAW;AAAA,QAAC,oBAAC,gBAAa,WAAU,eAAc;AAAA,SACrD;AAAA,MACA,qBAAC,SAAI,WAAU,qBACZ;AAAA,kBACC,qBAAC,SACC;AAAA,8BAAC,OAAE,WAAU,YAAY,iBAAO,OAAM;AAAA,UACtC,oBAAC,QAAG,WAAU,WACX,iBAAO,MAAM,IAAI,CAAC,MAAM,MACvB,oBAAC,QAAY,kBAAJ,CAAS,CACnB,GACH;AAAA,WACF;AAAA,QAED,WAAW,QAAQ,SAAS,KAC3B,oBAAC,QACE,kBAAQ,IAAI,CAAC,GAAG,MACf,qBAAC,SACC;AAAA,8BAAC,QAAG,WAAU,YAAY,YAAE,OAAM;AAAA,UAClC,oBAAC,QAAI,YAAE,MAAK;AAAA,aAFJ,CAGV,CACD,GACH;AAAA,QAED;AAAA,SACH;AAAA,OACF;AAAA,KAEA,QAAQ,YACR,qBAAC,SAAI,WAAU,eACZ;AAAA,aACC,qBAAC,aAAU,MAAM,KAAK,MAAM,QAAgB,WAAU,eAAc,oBAAkB,IACnF;AAAA,aAAK;AAAA,QAAM;AAAA,QAAC,oBAAC,cAAW,WAAU,eAAc;AAAA,SACnD,IAEA,oBAAC,UAAK;AAAA,MAEP;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/audio-player.d.ts

@@ -1,6 +1,9 @@
 import * as tailwind_variants from 'tailwind-variants';
 import * as React from 'react';
 
+/** Resamples peaks to `count` bars (the maximum of each slice), normalised to the loudest. No peaks: a flat line at 15 %. */
+declare function resamplePeaks(peaks: readonly number[], count: number): number[];
+
 declare const audioPlayer: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
@@ -103,8 +106,6 @@ type AudioPlayerProps = {
     /** Classes merged on the root. */
     className?: string;
 };
-/** Resamples peaks to `count` bars (the maximum of each slice), normalised to the loudest. */
-declare function resamplePeaks(peaks: readonly number[], count: number): number[];
 /** The peaks of a sound file, computed with Web Audio (`count` of them). */
 declare function computeAudioPeaks(src: string, count?: number, signal?: AbortSignal): Promise<number[]>;
 /** A sound with a seekable waveform: play / pause, time, speed — a voice note, a podcast clip, a track. */

package/dist/audio-player.js

@@ -13,6 +13,20 @@ import {
 // src/audio-player/audio-player.tsx
 import * as React from "react";
 import { tv } from "tailwind-variants";
+
+// src/waveform/bars.ts
+function resamplePeaks(peaks, count) {
+  if (peaks.length === 0) return Array.from({ length: count }, () => 0.15);
+  const out = Array.from({ length: count }, (_, i) => {
+    const from = Math.floor(i / count * peaks.length);
+    const to = Math.max(from + 1, Math.floor((i + 1) / count * peaks.length));
+    return Math.max(...peaks.slice(from, to).map(Math.abs));
+  });
+  const loudest = Math.max(...out, 1e-4);
+  return out.map((v) => Math.max(0.08, v / loudest));
+}
+
+// src/audio-player/audio-player.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var audioPlayer = tv({
   slots: {
@@ -33,16 +47,6 @@ var audioPlayerLabels = {
   speed: (rate) => `Speed ${rate}\xD7`,
   time: (time, duration) => `${time} of ${duration}`
 };
-function resamplePeaks(peaks, count) {
-  if (peaks.length === 0) return Array.from({ length: count }, () => 0.15);
-  const out = Array.from({ length: count }, (_, i) => {
-    const from = Math.floor(i / count * peaks.length);
-    const to = Math.max(from + 1, Math.floor((i + 1) / count * peaks.length));
-    return Math.max(...peaks.slice(from, to).map(Math.abs));
-  });
-  const loudest = Math.max(...out, 1e-4);
-  return out.map((v) => Math.max(0.08, v / loudest));
-}
 async function computeAudioPeaks(src, count = 200, signal) {
   const response = await fetch(src, { signal });
   const data = await response.arrayBuffer();

package/dist/audio-player.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/audio-player/audio-player.tsx"],"sourcesContent":["// Client. An `<audio>` with a waveform you can seek on: the bars are the sound's peaks (given by the server, or\n// computed here from the file with Web Audio when `computePeaks` — once, on demand), the played part in the accent.\n// The waveform is a `slider` (arrows ± 5 s, Page keys ± 30 s, Home / End) whose value is read as a time; the play\n// button and the speed are named by props. No animation but the played part's colour, and it pauses off screen.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { PauseGlyph, PlayGlyph } from \"../glyphs\";\nimport { clamp, formatClock, playSafely, useInView } from \"../media\";\n\nexport const audioPlayer = tv({\n  slots: {\n    root: \"flex w-full items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-3\",\n    play:\n      \"inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-accent text-on-accent transition-colors hover:bg-accent-hover \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1\",\n    body: \"flex min-w-0 flex-1 flex-col gap-1\",\n    title: \"truncate text-sm font-semibold text-fg\",\n    wave:\n      \"relative flex h-10 w-full cursor-pointer touch-none items-center gap-[2px] rounded-md \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    bar: \"min-w-[2px] flex-1 rounded-full bg-border-strong data-[played]:bg-accent\",\n    meta: \"flex items-center justify-between font-mono text-[11px] tabular-nums text-fg-secondary\",\n    speed:\n      \"shrink-0 rounded-md px-2 py-1 text-xs font-semibold tabular-nums text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n});\n\nexport type AudioPlayerLabels = {\n  play: string;\n  pause: string;\n  /** The waveform slider (\"Seek\"). */\n  seek: string;\n  /** The speed button: `(rate) => \"Speed \" + rate + \"×\"`. */\n  speed: (rate: number) => string;\n  /** The slider's value: `(time, duration) => \"0:42 of 3:10\"`. */\n  time: (time: string, duration: string) => string;\n};\n\nexport const audioPlayerLabels: AudioPlayerLabels = {\n  play: \"Play\",\n  pause: \"Pause\",\n  seek: \"Seek\",\n  speed: (rate) => `Speed ${rate}×`,\n  time: (time, duration) => `${time} of ${duration}`,\n};\n\nexport type AudioPlayerProps = {\n  /** The address of the sound. */\n  src: string;\n  /** What it is (\"Voice note — Eric, 0:42\"): shown, and the accessible name of the player. */\n  title: string;\n  /** The peaks, between 0 and 1, as many as you like (they are resampled to `bars`). */\n  peaks?: readonly number[];\n  /** Without `peaks`: fetches the file and computes them with Web Audio at the first play (same-origin or CORS). */\n  computePeaks?: boolean;\n  /** How many bars. Default 48. */\n  bars?: number;\n  /** The speeds of the speed button. Default `[1, 1.5, 2]`; `[]` hides it. */\n  playbackRates?: readonly number[];\n  /** Pauses when it leaves the screen. Default `true`. */\n  pauseWhenHidden?: boolean;\n  /** The length, in seconds, before the metadata is loaded (from the server). */\n  duration?: number;\n  /** Called when playback starts, pauses, ends. */\n  onPlayingChange?: (playing: boolean) => void;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<AudioPlayerLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** Resamples peaks to `count` bars (the maximum of each slice), normalised to the loudest. */\nexport function resamplePeaks(peaks: readonly number[], count: number): number[] {\n  if (peaks.length === 0) return Array.from({ length: count }, () => 0.15);\n  const out = Array.from({ length: count }, (_, i) => {\n    const from = Math.floor((i / count) * peaks.length);\n    const to = Math.max(from + 1, Math.floor(((i + 1) / count) * peaks.length));\n    return Math.max(...peaks.slice(from, to).map(Math.abs));\n  });\n  const loudest = Math.max(...out, 0.0001);\n  return out.map((v) => Math.max(0.08, v / loudest));\n}\n\n/** The peaks of a sound file, computed with Web Audio (`count` of them). */\nexport async function computeAudioPeaks(src: string, count = 200, signal?: AbortSignal): Promise<number[]> {\n  const response = await fetch(src, { signal });\n  const data = await response.arrayBuffer();\n  const Context = window.AudioContext ?? (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;\n  const context = new Context();\n  try {\n    const buffer = await context.decodeAudioData(data);\n    const channel = buffer.getChannelData(0);\n    const size = Math.max(1, Math.floor(channel.length / count));\n    return Array.from({ length: count }, (_, i) => {\n      let peak = 0;\n      for (let j = i * size; j < Math.min(channel.length, (i + 1) * size); j += 1) peak = Math.max(peak, Math.abs(channel[j]!));\n      return peak;\n    });\n  } finally {\n    void context.close();\n  }\n}\n\n/** A sound with a seekable waveform: play / pause, time, speed — a voice note, a podcast clip, a track. */\nexport function AudioPlayer({\n  src,\n  title,\n  peaks: given,\n  computePeaks,\n  bars = 48,\n  playbackRates = [1, 1.5, 2],\n  pauseWhenHidden = true,\n  duration: knownDuration = 0,\n  onPlayingChange,\n  labels: words,\n  className,\n}: AudioPlayerProps) {\n  const labels = { ...audioPlayerLabels, ...words };\n  const s = audioPlayer();\n  const audio = React.useRef<HTMLAudioElement>(null);\n  const root = React.useRef<HTMLDivElement>(null);\n  const wave = React.useRef<HTMLDivElement>(null);\n  const dragging = React.useRef(false);\n  const [playing, setPlaying] = React.useState(false);\n  const [time, setTime] = React.useState(0);\n  const [duration, setDuration] = React.useState(knownDuration);\n  const [rate, setRate] = React.useState(playbackRates[0] ?? 1);\n  const [computed, setComputed] = React.useState<number[] | null>(null);\n  const [wantPeaks, setWantPeaks] = React.useState(false);\n\n  React.useEffect(() => {\n    if (given || !computePeaks || !wantPeaks) return;\n    const controller = new AbortController();\n    computeAudioPeaks(src, 200, controller.signal).then(setComputed, () => undefined);\n    return () => controller.abort();\n  }, [given, computePeaks, wantPeaks, src]);\n\n  useInView(root, (visible) => !visible && audio.current && !audio.current.paused && audio.current.pause(), pauseWhenHidden);\n\n  const shape = React.useMemo(() => resamplePeaks(given ?? computed ?? [], bars), [given, computed, bars]);\n  const progress = duration > 0 ? time / duration : 0;\n\n  const seek = (to: number) => {\n    if (!audio.current) return;\n    const next = clamp(to, 0, duration || audio.current.duration || 0);\n    audio.current.currentTime = next;\n    setTime(next);\n  };\n  const at = (clientX: number) => {\n    const box = wave.current?.getBoundingClientRect();\n    return box && box.width ? ((clientX - box.left) / box.width) * duration : 0;\n  };\n  const toggle = () => {\n    setWantPeaks(true);\n    if (!audio.current) return;\n    if (audio.current.paused) playSafely(audio.current);\n    else audio.current.pause();\n  };\n\n  return (\n    <div ref={root} role=\"group\" aria-label={title} className={s.root({ className })}>\n      <audio\n        ref={audio}\n        src={src}\n        preload=\"metadata\"\n        onPlay={() => {\n          setPlaying(true);\n          onPlayingChange?.(true);\n        }}\n        onPause={() => {\n          setPlaying(false);\n          onPlayingChange?.(false);\n        }}\n        onTimeUpdate={(event) => setTime(event.currentTarget.currentTime)}\n        onDurationChange={(event) => Number.isFinite(event.currentTarget.duration) && setDuration(event.currentTarget.duration)}\n      />\n      <button type=\"button\" className={s.play()} aria-label={playing ? labels.pause : labels.play} onClick={toggle}>\n        {playing ? <PauseGlyph className=\"h-5 w-5\" /> : <PlayGlyph className=\"ml-0.5 h-5 w-5\" />}\n      </button>\n      <div className={s.body()}>\n        <p className={s.title()} aria-hidden>\n          {title}\n        </p>\n        <div\n          ref={wave}\n          role=\"slider\"\n          tabIndex={0}\n          aria-label={labels.seek}\n          aria-valuemin={0}\n          aria-valuemax={Math.round(duration)}\n          aria-valuenow={Math.round(time)}\n          aria-valuetext={labels.time(formatClock(time), formatClock(duration))}\n          className={s.wave()}\n          onPointerDown={(event) => {\n            dragging.current = true;\n            wave.current?.setPointerCapture?.(event.pointerId);\n            seek(at(event.clientX));\n          }}\n          onPointerMove={(event) => dragging.current && seek(at(event.clientX))}\n          onPointerUp={() => {\n            dragging.current = false;\n          }}\n          onKeyDown={(event) => {\n            const moves: Record<string, number> = {\n              ArrowLeft: time - 5,\n              ArrowDown: time - 5,\n              ArrowRight: time + 5,\n              ArrowUp: time + 5,\n              PageDown: time - 30,\n              PageUp: time + 30,\n              Home: 0,\n              End: duration,\n            };\n            const to = moves[event.key];\n            if (to === undefined) return;\n            event.preventDefault();\n            seek(to);\n          }}\n        >\n          {shape.map((peak, i) => (\n            <span key={i} aria-hidden data-played={(i + 0.5) / bars <= progress ? \"\" : undefined} className={s.bar()} style={{ height: `${Math.round(peak * 100)}%` }} />\n          ))}\n        </div>\n        <div className={s.meta()} aria-hidden>\n          <span>{formatClock(time)}</span>\n          <span>{formatClock(duration)}</span>\n        </div>\n      </div>\n      {playbackRates.length > 1 && (\n        <button\n          type=\"button\"\n          className={s.speed()}\n          aria-label={labels.speed(rate)}\n          onClick={() => {\n            const next = playbackRates[(playbackRates.indexOf(rate) + 1) % playbackRates.length] ?? 1;\n            if (audio.current) audio.current.playbackRate = next;\n            setRate(next);\n          }}\n        >\n          {rate}×\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/audio-player/audio-player.tsx","../src/waveform/bars.ts"],"sourcesContent":["// Client. An `<audio>` with a waveform you can seek on: the bars are the sound's peaks (given by the server, or\n// computed here from the file with Web Audio when `computePeaks` — once, on demand), the played part in the accent.\n// The waveform is a `slider` (arrows ± 5 s, Page keys ± 30 s, Home / End) whose value is read as a time; the play\n// button and the speed are named by props. No animation but the played part's colour, and it pauses off screen.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { PauseGlyph, PlayGlyph } from \"../glyphs\";\nimport { clamp, formatClock, playSafely, useInView } from \"../media\";\nimport { resamplePeaks } from \"../waveform/bars\";\n\nexport { resamplePeaks };\n\nexport const audioPlayer = tv({\n  slots: {\n    root: \"flex w-full items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-3\",\n    play:\n      \"inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-accent text-on-accent transition-colors hover:bg-accent-hover \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1\",\n    body: \"flex min-w-0 flex-1 flex-col gap-1\",\n    title: \"truncate text-sm font-semibold text-fg\",\n    wave:\n      \"relative flex h-10 w-full cursor-pointer touch-none items-center gap-[2px] rounded-md \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    bar: \"min-w-[2px] flex-1 rounded-full bg-border-strong data-[played]:bg-accent\",\n    meta: \"flex items-center justify-between font-mono text-[11px] tabular-nums text-fg-secondary\",\n    speed:\n      \"shrink-0 rounded-md px-2 py-1 text-xs font-semibold tabular-nums text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n});\n\nexport type AudioPlayerLabels = {\n  play: string;\n  pause: string;\n  /** The waveform slider (\"Seek\"). */\n  seek: string;\n  /** The speed button: `(rate) => \"Speed \" + rate + \"×\"`. */\n  speed: (rate: number) => string;\n  /** The slider's value: `(time, duration) => \"0:42 of 3:10\"`. */\n  time: (time: string, duration: string) => string;\n};\n\nexport const audioPlayerLabels: AudioPlayerLabels = {\n  play: \"Play\",\n  pause: \"Pause\",\n  seek: \"Seek\",\n  speed: (rate) => `Speed ${rate}×`,\n  time: (time, duration) => `${time} of ${duration}`,\n};\n\nexport type AudioPlayerProps = {\n  /** The address of the sound. */\n  src: string;\n  /** What it is (\"Voice note — Eric, 0:42\"): shown, and the accessible name of the player. */\n  title: string;\n  /** The peaks, between 0 and 1, as many as you like (they are resampled to `bars`). */\n  peaks?: readonly number[];\n  /** Without `peaks`: fetches the file and computes them with Web Audio at the first play (same-origin or CORS). */\n  computePeaks?: boolean;\n  /** How many bars. Default 48. */\n  bars?: number;\n  /** The speeds of the speed button. Default `[1, 1.5, 2]`; `[]` hides it. */\n  playbackRates?: readonly number[];\n  /** Pauses when it leaves the screen. Default `true`. */\n  pauseWhenHidden?: boolean;\n  /** The length, in seconds, before the metadata is loaded (from the server). */\n  duration?: number;\n  /** Called when playback starts, pauses, ends. */\n  onPlayingChange?: (playing: boolean) => void;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<AudioPlayerLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** The peaks of a sound file, computed with Web Audio (`count` of them). */\nexport async function computeAudioPeaks(src: string, count = 200, signal?: AbortSignal): Promise<number[]> {\n  const response = await fetch(src, { signal });\n  const data = await response.arrayBuffer();\n  const Context = window.AudioContext ?? (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;\n  const context = new Context();\n  try {\n    const buffer = await context.decodeAudioData(data);\n    const channel = buffer.getChannelData(0);\n    const size = Math.max(1, Math.floor(channel.length / count));\n    return Array.from({ length: count }, (_, i) => {\n      let peak = 0;\n      for (let j = i * size; j < Math.min(channel.length, (i + 1) * size); j += 1) peak = Math.max(peak, Math.abs(channel[j]!));\n      return peak;\n    });\n  } finally {\n    void context.close();\n  }\n}\n\n/** A sound with a seekable waveform: play / pause, time, speed — a voice note, a podcast clip, a track. */\nexport function AudioPlayer({\n  src,\n  title,\n  peaks: given,\n  computePeaks,\n  bars = 48,\n  playbackRates = [1, 1.5, 2],\n  pauseWhenHidden = true,\n  duration: knownDuration = 0,\n  onPlayingChange,\n  labels: words,\n  className,\n}: AudioPlayerProps) {\n  const labels = { ...audioPlayerLabels, ...words };\n  const s = audioPlayer();\n  const audio = React.useRef<HTMLAudioElement>(null);\n  const root = React.useRef<HTMLDivElement>(null);\n  const wave = React.useRef<HTMLDivElement>(null);\n  const dragging = React.useRef(false);\n  const [playing, setPlaying] = React.useState(false);\n  const [time, setTime] = React.useState(0);\n  const [duration, setDuration] = React.useState(knownDuration);\n  const [rate, setRate] = React.useState(playbackRates[0] ?? 1);\n  const [computed, setComputed] = React.useState<number[] | null>(null);\n  const [wantPeaks, setWantPeaks] = React.useState(false);\n\n  React.useEffect(() => {\n    if (given || !computePeaks || !wantPeaks) return;\n    const controller = new AbortController();\n    computeAudioPeaks(src, 200, controller.signal).then(setComputed, () => undefined);\n    return () => controller.abort();\n  }, [given, computePeaks, wantPeaks, src]);\n\n  useInView(root, (visible) => !visible && audio.current && !audio.current.paused && audio.current.pause(), pauseWhenHidden);\n\n  const shape = React.useMemo(() => resamplePeaks(given ?? computed ?? [], bars), [given, computed, bars]);\n  const progress = duration > 0 ? time / duration : 0;\n\n  const seek = (to: number) => {\n    if (!audio.current) return;\n    const next = clamp(to, 0, duration || audio.current.duration || 0);\n    audio.current.currentTime = next;\n    setTime(next);\n  };\n  const at = (clientX: number) => {\n    const box = wave.current?.getBoundingClientRect();\n    return box && box.width ? ((clientX - box.left) / box.width) * duration : 0;\n  };\n  const toggle = () => {\n    setWantPeaks(true);\n    if (!audio.current) return;\n    if (audio.current.paused) playSafely(audio.current);\n    else audio.current.pause();\n  };\n\n  return (\n    <div ref={root} role=\"group\" aria-label={title} className={s.root({ className })}>\n      <audio\n        ref={audio}\n        src={src}\n        preload=\"metadata\"\n        onPlay={() => {\n          setPlaying(true);\n          onPlayingChange?.(true);\n        }}\n        onPause={() => {\n          setPlaying(false);\n          onPlayingChange?.(false);\n        }}\n        onTimeUpdate={(event) => setTime(event.currentTarget.currentTime)}\n        onDurationChange={(event) => Number.isFinite(event.currentTarget.duration) && setDuration(event.currentTarget.duration)}\n      />\n      <button type=\"button\" className={s.play()} aria-label={playing ? labels.pause : labels.play} onClick={toggle}>\n        {playing ? <PauseGlyph className=\"h-5 w-5\" /> : <PlayGlyph className=\"ml-0.5 h-5 w-5\" />}\n      </button>\n      <div className={s.body()}>\n        <p className={s.title()} aria-hidden>\n          {title}\n        </p>\n        <div\n          ref={wave}\n          role=\"slider\"\n          tabIndex={0}\n          aria-label={labels.seek}\n          aria-valuemin={0}\n          aria-valuemax={Math.round(duration)}\n          aria-valuenow={Math.round(time)}\n          aria-valuetext={labels.time(formatClock(time), formatClock(duration))}\n          className={s.wave()}\n          onPointerDown={(event) => {\n            dragging.current = true;\n            wave.current?.setPointerCapture?.(event.pointerId);\n            seek(at(event.clientX));\n          }}\n          onPointerMove={(event) => dragging.current && seek(at(event.clientX))}\n          onPointerUp={() => {\n            dragging.current = false;\n          }}\n          onKeyDown={(event) => {\n            const moves: Record<string, number> = {\n              ArrowLeft: time - 5,\n              ArrowDown: time - 5,\n              ArrowRight: time + 5,\n              ArrowUp: time + 5,\n              PageDown: time - 30,\n              PageUp: time + 30,\n              Home: 0,\n              End: duration,\n            };\n            const to = moves[event.key];\n            if (to === undefined) return;\n            event.preventDefault();\n            seek(to);\n          }}\n        >\n          {shape.map((peak, i) => (\n            <span key={i} aria-hidden data-played={(i + 0.5) / bars <= progress ? \"\" : undefined} className={s.bar()} style={{ height: `${Math.round(peak * 100)}%` }} />\n          ))}\n        </div>\n        <div className={s.meta()} aria-hidden>\n          <span>{formatClock(time)}</span>\n          <span>{formatClock(duration)}</span>\n        </div>\n      </div>\n      {playbackRates.length > 1 && (\n        <button\n          type=\"button\"\n          className={s.speed()}\n          aria-label={labels.speed(rate)}\n          onClick={() => {\n            const next = playbackRates[(playbackRates.indexOf(rate) + 1) % playbackRates.length] ?? 1;\n            if (audio.current) audio.current.playbackRate = next;\n            setRate(next);\n          }}\n        >\n          {rate}×\n        </button>\n      )}\n    </div>\n  );\n}\n","// The bars of a waveform, shared by AudioPlayer (the seekable one) and Waveform (the decorative one). Pure: no React.\n\n/** Resamples peaks to `count` bars (the maximum of each slice), normalised to the loudest. No peaks: a flat line at 15 %. */\nexport function resamplePeaks(peaks: readonly number[], count: number): number[] {\n  if (peaks.length === 0) return Array.from({ length: count }, () => 0.15);\n  const out = Array.from({ length: count }, (_, i) => {\n    const from = Math.floor((i / count) * peaks.length);\n    const to = Math.max(from + 1, Math.floor(((i + 1) / count) * peaks.length));\n    return Math.max(...peaks.slice(from, to).map(Math.abs));\n  });\n  const loudest = Math.max(...out, 0.0001);\n  return out.map((v) => Math.max(0.08, v / loudest));\n}\n"],"mappings":"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","names":[]}

package/dist/blocks.css

@@ -248,6 +248,31 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   .kz-block-card:hover .kz-block-icon { transform: translateY(-2px) rotate(-3deg); box-shadow: 0 10px 22px -12px var(--kz-hue, var(--kz-accent)); }
 }
 
+/* The quiet hover (`hover="quiet"` on a card, or on CardGrid for the whole grid; a card's own `hover="light"` wins over
+   its grid): no glow, no halo, no accent border or title. The card lifts 2 px, its surface and hairline go one step up,
+   the title leans towards the accent text, and the focus is a ring on the whole card. Reduced motion: no lift. */
+:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light))::after { display: none; }
+:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)) {
+  transition: transform 0.3s var(--kz-ease, ease), background-color 0.3s var(--kz-ease, ease), border-color 0.3s var(--kz-ease, ease);
+}
+:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):is(:hover, :focus-within, :focus-visible) .kz-block-icon svg [data-node] { transform: none; filter: none; }
+@media (hover: hover) {
+  :is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):hover {
+    transform: translateY(-2px);
+    background: var(--kz-surface-2);
+    border-color: var(--kz-border-strong);
+    box-shadow: none;
+  }
+  :is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):hover .kz-block-icon { transform: none; box-shadow: none; }
+  :is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):hover :is(.kz-link-card-title, .kz-arg-title) { color: color-mix(in srgb, var(--kz-text-primary) 72%, var(--kz-hue-text, var(--kz-accent-text))); }
+}
+:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):is(:focus-within, :focus-visible) :is(.kz-link-card-title, .kz-arg-title) { color: color-mix(in srgb, var(--kz-text-primary) 72%, var(--kz-hue-text, var(--kz-accent-text))); }
+:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):is(:focus-visible, :has(:focus-visible)) {
+  outline: 2px solid var(--kz-ring, var(--kz-accent));
+  outline-offset: 2px;
+}
+:is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):is(:focus-within, :focus-visible) { border-color: var(--kz-border-strong); }
+
 /* ─── LinkCard: the whole card is the link — icon, title, one sentence, the way in ─── */
 .kz-link-card {
   display: grid;
@@ -595,6 +620,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 @media (prefers-reduced-motion: reduce) {
   .kz-block-card, .kz-block-card::after, .kz-block-icon, .kz-block-icon svg [data-node], .kz-link-card-cta svg, .kz-arg-more svg, .kz-arg-panel > summary svg, .kz-actions [data-tip]::after { transition: none !important; }
   .kz-block-card:hover, .kz-block-card:hover .kz-block-icon, .kz-link-card:hover .kz-link-card-cta svg, .kz-arg-more:hover svg { transform: none !important; }
+  :is(.kz-block-card.kz-hover-quiet, .kz-cards.kz-hover-quiet .kz-block-card:not(.kz-hover-light)):hover { transform: none !important; }
   .kz-quote-bird { animation: none !important; }
 }
 
@@ -772,6 +798,8 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-log-kind[data-kind="changed"] { color: var(--kz-accent-text); }
 .kz-tpl-log-kind[data-kind="fixed"] { color: var(--kz-warning-text); }
 .kz-tpl-log-kind[data-kind="removed"] { color: var(--kz-danger-text); }
+.kz-tpl-log-kind[data-kind="breaking"] { color: var(--kz-danger-text); }
+.kz-tpl-log-kind[data-kind="security"] { color: var(--kz-warning-text); }
 @media (max-width: 720px) {
   .kz-tpl-log-entry { grid-template-columns: minmax(0, 1fr); gap: 10px; }
   .kz-tpl-log-when { position: static; grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; }

package/dist/button.js

@@ -3,9 +3,10 @@ import {
   Button,
   IconButton,
   buttonVariants
-} from "./chunk-3IN6TOPM.js";
+} from "./chunk-6ZYRUOTA.js";
 import "./chunk-43PTCDTL.js";
 import "./chunk-2VNYHG4E.js";
+import "./chunk-W675RFOA.js";
 export {
   Button,
   IconButton,

package/dist/captcha.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+
+/** The words of `Captcha` and `CaptchaDisclosure`, English and French. Pass `labels` to say them otherwise. */
+interface CaptchaLabels {
+    /** The accessible name of the check (the group around the widget). */
+    readonly group: string;
+    /** Said when Cloudflare could not run the check. */
+    readonly error: string;
+    /** The retry button. */
+    readonly retry: string;
+    /** « Protected by Cloudflare Turnstile ». */
+    readonly protectedBy: string;
+    readonly privacy: string;
+    readonly terms: string;
+}
+declare const captchaMessages: {
+    readonly en: {
+        readonly group: "Security check";
+        readonly error: "The security check could not run. Check your connection and try again.";
+        readonly retry: "Try again";
+        readonly protectedBy: "Protected by Cloudflare Turnstile";
+        readonly privacy: "Privacy";
+        readonly terms: "Terms";
+    };
+    readonly fr: {
+        readonly group: "Vérification de sécurité";
+        readonly error: "La vérification de sécurité n'a pas pu s'exécuter. Vérifiez votre connexion et réessayez.";
+        readonly retry: "Réessayer";
+        readonly protectedBy: "Protégé par Cloudflare Turnstile";
+        readonly privacy: "Confidentialité";
+        readonly terms: "Conditions";
+    };
+};
+type CaptchaLocale = keyof typeof captchaMessages;
+
+type CaptchaProps = {
+    /** The widget's public site key. Empty → nothing is rendered and no token is asked (local dev, tests). */
+    siteKey: string;
+    /** The token once the check passes; `null` when it expires, fails or the theme redraws the widget. */
+    onToken: (token: string | null) => void;
+    /**
+     * The language of the widget and of the words: `"en"`, `"fr"`…
+     * @default "en"
+     */
+    locale?: string;
+    /**
+     * `auto` follows the page (`html.light` / `data-theme`, redrawn when it flips).
+     * @default "auto"
+     */
+    theme?: "auto" | "light" | "dark";
+    /** Words to say otherwise; the rest comes from the locale. */
+    labels?: Partial<CaptchaLabels>;
+    /** Classes added to the root. */
+    className?: string;
+};
+/**
+ * The bot check of a public form, Cloudflare Turnstile that stays out of the way: managed mode with
+ * `appearance: "interaction-only"`, so a normal visitor sees nothing — the check runs in the background and `onToken`
+ * fires. Only when Cloudflare needs the visitor does a framed box appear, on the tokens (radius, border, theme).
+ * If the check cannot run, an alert with a retry button replaces it. Pair it with `CaptchaDisclosure` under the submit.
+ */
+declare function Captcha({ siteKey, onToken, locale, theme, labels, className }: CaptchaProps): React.JSX.Element | null;
+type CaptchaDisclosureProps = {
+    /**
+     * The language of the line: `"en"`, `"fr"`…
+     * @default "en"
+     */
+    locale?: string;
+    /** Words to say otherwise; the rest comes from the locale. */
+    labels?: Partial<CaptchaLabels>;
+    /** The privacy link; Cloudflare's privacy policy by default. */
+    privacyHref?: string;
+    /** The terms link; Cloudflare's website terms by default. */
+    termsHref?: string;
+    /** Classes added to the root. */
+    className?: string;
+};
+/** « Protected by Cloudflare Turnstile · Privacy · Terms »: the line Cloudflare's terms ask for under the submit button. */
+declare function CaptchaDisclosure({ locale, labels, privacyHref, termsHref, className }: CaptchaDisclosureProps): React.JSX.Element;
+
+export { Captcha, CaptchaDisclosure, type CaptchaDisclosureProps, type CaptchaLabels, type CaptchaLocale, type CaptchaProps, captchaMessages };

package/dist/captcha.js

@@ -0,0 +1,162 @@
+"use client";
+import {
+  Button
+} from "./chunk-CHOJUCVE.js";
+import "./chunk-D3T54RSL.js";
+import "./chunk-WEVYKZIF.js";
+import "./chunk-NSLXEDIS.js";
+
+// src/captcha/captcha.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { tv } from "tailwind-variants";
+
+// src/captcha/messages.ts
+var captchaMessages = {
+  en: {
+    group: "Security check",
+    error: "The security check could not run. Check your connection and try again.",
+    retry: "Try again",
+    protectedBy: "Protected by Cloudflare Turnstile",
+    privacy: "Privacy",
+    terms: "Terms"
+  },
+  fr: {
+    group: "V\xE9rification de s\xE9curit\xE9",
+    error: "La v\xE9rification de s\xE9curit\xE9 n'a pas pu s'ex\xE9cuter. V\xE9rifiez votre connexion et r\xE9essayez.",
+    retry: "R\xE9essayer",
+    protectedBy: "Prot\xE9g\xE9 par Cloudflare Turnstile",
+    privacy: "Confidentialit\xE9",
+    terms: "Conditions"
+  }
+};
+var labelsFor = (locale, labels) => ({
+  ...captchaMessages[locale?.toLowerCase().startsWith("fr") ? "fr" : "en"],
+  ...labels
+});
+
+// src/captcha/turnstile.ts
+var TURNSTILE_SCRIPT = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+var TURNSTILE_PRIVACY = "https://www.cloudflare.com/privacypolicy/";
+var TURNSTILE_TERMS = "https://www.cloudflare.com/website-terms/";
+var loading = null;
+function loadTurnstile() {
+  if (window.turnstile) return Promise.resolve(window.turnstile);
+  loading ??= new Promise((resolve, reject) => {
+    const s = document.createElement("script");
+    s.src = TURNSTILE_SCRIPT;
+    s.async = true;
+    s.onload = () => window.turnstile ? resolve(window.turnstile) : reject(new Error("turnstile"));
+    s.onerror = () => {
+      loading = null;
+      reject(new Error("turnstile"));
+    };
+    try {
+      document.head.appendChild(s);
+    } catch {
+      loading = null;
+      reject(new Error("turnstile"));
+    }
+  });
+  return loading;
+}
+function pageTheme() {
+  const root = document.documentElement;
+  return root.classList.contains("light") || root.dataset.theme === "light" ? "light" : "dark";
+}
+
+// src/captcha/captcha.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var captcha = tv({
+  slots: {
+    root: "w-full",
+    frame: "overflow-hidden rounded-lg border border-border-default bg-surface-2 p-2",
+    error: "flex flex-wrap items-center gap-3 rounded-lg border border-border-default bg-surface-2 p-3 text-sm text-fg-danger",
+    disclosure: "text-xs text-fg-muted",
+    link: "underline underline-offset-2 hover:text-fg-secondary focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2"
+  }
+});
+function Captcha({ siteKey, onToken, locale = "en", theme = "auto", labels, className }) {
+  const host = useRef(null);
+  const widget = useRef(null);
+  const onTokenRef = useRef(onToken);
+  useEffect(() => {
+    onTokenRef.current = onToken;
+  });
+  const [interactive, setInteractive] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [attempt, setAttempt] = useState(0);
+  const words = labelsFor(locale, labels);
+  const { root, frame, error } = captcha();
+  useEffect(() => {
+    if (!siteKey || !host.current) return;
+    const el = host.current;
+    let cancelled = false;
+    const fail = () => {
+      onTokenRef.current(null);
+      setInteractive(false);
+      setFailed(true);
+    };
+    const mount = () => {
+      loadTurnstile().then((api) => {
+        if (cancelled) return;
+        if (widget.current) api.remove(widget.current);
+        widget.current = api.render(el, {
+          sitekey: siteKey,
+          appearance: "interaction-only",
+          size: "flexible",
+          theme: theme === "auto" ? pageTheme() : theme,
+          language: locale,
+          callback: (token) => {
+            setFailed(false);
+            onTokenRef.current(token);
+          },
+          "expired-callback": () => onTokenRef.current(null),
+          "before-interactive-callback": () => setInteractive(true),
+          "after-interactive-callback": () => setInteractive(false),
+          "error-callback": fail,
+          "unsupported-callback": fail
+        });
+      }, fail);
+    };
+    setFailed(false);
+    mount();
+    const watcher = theme === "auto" ? new MutationObserver(() => {
+      onTokenRef.current(null);
+      mount();
+    }) : null;
+    watcher?.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"] });
+    return () => {
+      cancelled = true;
+      watcher?.disconnect();
+      if (widget.current && window.turnstile) window.turnstile.remove(widget.current);
+      widget.current = null;
+    };
+  }, [siteKey, locale, theme, attempt]);
+  const retry = useCallback(() => setAttempt((n) => n + 1), []);
+  if (!siteKey) return null;
+  return /* @__PURE__ */ jsxs("div", { className: root({ className }), role: "group", "aria-label": words.group, "data-captcha": failed ? "error" : interactive ? "interactive" : "idle", children: [
+    failed ? /* @__PURE__ */ jsxs("div", { role: "alert", className: error(), children: [
+      /* @__PURE__ */ jsx("span", { children: words.error }),
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "secondary", onClick: retry, children: words.retry })
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: interactive && !failed ? frame() : void 0, hidden: failed, style: interactive ? void 0 : { height: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { ref: host }) })
+  ] });
+}
+function CaptchaDisclosure({ locale = "en", labels, privacyHref = TURNSTILE_PRIVACY, termsHref = TURNSTILE_TERMS, className }) {
+  const words = labelsFor(locale, labels);
+  const { disclosure, link } = captcha();
+  return /* @__PURE__ */ jsxs("p", { className: disclosure({ className }), children: [
+    words.protectedBy,
+    " \xB7 ",
+    /* @__PURE__ */ jsx("a", { className: link(), href: privacyHref, target: "_blank", rel: "noopener noreferrer", children: words.privacy }),
+    " \xB7",
+    " ",
+    /* @__PURE__ */ jsx("a", { className: link(), href: termsHref, target: "_blank", rel: "noopener noreferrer", children: words.terms })
+  ] });
+}
+export {
+  Captcha,
+  CaptchaDisclosure,
+  captchaMessages
+};
+//# sourceMappingURL=captcha.js.map

package/dist/captcha.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/captcha/captcha.tsx","../src/captcha/messages.ts","../src/captcha/turnstile.ts"],"sourcesContent":["// Client: loads the Cloudflare script and draws the widget in an effect.\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Button } from \"../button\";\nimport { type CaptchaLabels, labelsFor } from \"./messages\";\nimport { loadTurnstile, pageTheme, TURNSTILE_PRIVACY, TURNSTILE_TERMS } from \"./turnstile\";\n\nconst captcha = tv({\n  slots: {\n    root: \"w-full\",\n    frame: \"overflow-hidden rounded-lg border border-border-default bg-surface-2 p-2\",\n    error: \"flex flex-wrap items-center gap-3 rounded-lg border border-border-default bg-surface-2 p-3 text-sm text-fg-danger\",\n    disclosure: \"text-xs text-fg-muted\",\n    link: \"underline underline-offset-2 hover:text-fg-secondary focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2\",\n  },\n});\n\nexport type CaptchaProps = {\n  /** The widget's public site key. Empty → nothing is rendered and no token is asked (local dev, tests). */\n  siteKey: string;\n  /** The token once the check passes; `null` when it expires, fails or the theme redraws the widget. */\n  onToken: (token: string | null) => void;\n  /**\n   * The language of the widget and of the words: `\"en\"`, `\"fr\"`…\n   * @default \"en\"\n   */\n  locale?: string;\n  /**\n   * `auto` follows the page (`html.light` / `data-theme`, redrawn when it flips).\n   * @default \"auto\"\n   */\n  theme?: \"auto\" | \"light\" | \"dark\";\n  /** Words to say otherwise; the rest comes from the locale. */\n  labels?: Partial<CaptchaLabels>;\n  /** Classes added to the root. */\n  className?: string;\n};\n\n/**\n * The bot check of a public form, Cloudflare Turnstile that stays out of the way: managed mode with\n * `appearance: \"interaction-only\"`, so a normal visitor sees nothing — the check runs in the background and `onToken`\n * fires. Only when Cloudflare needs the visitor does a framed box appear, on the tokens (radius, border, theme).\n * If the check cannot run, an alert with a retry button replaces it. Pair it with `CaptchaDisclosure` under the submit.\n */\nexport function Captcha({ siteKey, onToken, locale = \"en\", theme = \"auto\", labels, className }: CaptchaProps) {\n  const host = useRef<HTMLDivElement>(null);\n  const widget = useRef<string | null>(null);\n  const onTokenRef = useRef(onToken);\n  useEffect(() => {\n    onTokenRef.current = onToken;\n  });\n  const [interactive, setInteractive] = useState(false);\n  const [failed, setFailed] = useState(false);\n  const [attempt, setAttempt] = useState(0);\n  const words = labelsFor(locale, labels);\n  const { root, frame, error } = captcha();\n\n  useEffect(() => {\n    if (!siteKey || !host.current) return;\n    const el = host.current;\n    let cancelled = false;\n    const fail = () => {\n      onTokenRef.current(null);\n      setInteractive(false);\n      setFailed(true);\n    };\n    const mount = () => {\n      loadTurnstile().then((api) => {\n        if (cancelled) return;\n        if (widget.current) api.remove(widget.current);\n        widget.current = api.render(el, {\n          sitekey: siteKey,\n          appearance: \"interaction-only\",\n          size: \"flexible\",\n          theme: theme === \"auto\" ? pageTheme() : theme,\n          language: locale,\n          callback: (token: string) => {\n            setFailed(false);\n            onTokenRef.current(token);\n          },\n          \"expired-callback\": () => onTokenRef.current(null),\n          \"before-interactive-callback\": () => setInteractive(true),\n          \"after-interactive-callback\": () => setInteractive(false),\n          \"error-callback\": fail,\n          \"unsupported-callback\": fail,\n        });\n      }, fail);\n    };\n    setFailed(false);\n    mount();\n    const watcher = theme === \"auto\" ? new MutationObserver(() => { onTokenRef.current(null); mount(); }) : null;\n    watcher?.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\", \"data-theme\"] });\n    return () => {\n      cancelled = true;\n      watcher?.disconnect();\n      if (widget.current && window.turnstile) window.turnstile.remove(widget.current);\n      widget.current = null;\n    };\n  }, [siteKey, locale, theme, attempt]);\n\n  const retry = useCallback(() => setAttempt((n) => n + 1), []);\n\n  if (!siteKey) return null;\n  return (\n    <div className={root({ className })} role=\"group\" aria-label={words.group} data-captcha={failed ? \"error\" : interactive ? \"interactive\" : \"idle\"}>\n      {failed ? (\n        <div role=\"alert\" className={error()}>\n          <span>{words.error}</span>\n          <Button type=\"button\" size=\"sm\" variant=\"secondary\" onClick={retry}>\n            {words.retry}\n          </Button>\n        </div>\n      ) : null}\n      {/* Always mounted (Cloudflare draws into it); framed and visible only when a challenge needs the visitor. */}\n      <div className={interactive && !failed ? frame() : undefined} hidden={failed} style={interactive ? undefined : { height: 0, overflow: \"hidden\" }}>\n        <div ref={host} />\n      </div>\n    </div>\n  );\n}\n\nexport type CaptchaDisclosureProps = {\n  /**\n   * The language of the line: `\"en\"`, `\"fr\"`…\n   * @default \"en\"\n   */\n  locale?: string;\n  /** Words to say otherwise; the rest comes from the locale. */\n  labels?: Partial<CaptchaLabels>;\n  /** The privacy link; Cloudflare's privacy policy by default. */\n  privacyHref?: string;\n  /** The terms link; Cloudflare's website terms by default. */\n  termsHref?: string;\n  /** Classes added to the root. */\n  className?: string;\n};\n\n/** « Protected by Cloudflare Turnstile · Privacy · Terms »: the line Cloudflare's terms ask for under the submit button. */\nexport function CaptchaDisclosure({ locale = \"en\", labels, privacyHref = TURNSTILE_PRIVACY, termsHref = TURNSTILE_TERMS, className }: CaptchaDisclosureProps) {\n  const words = labelsFor(locale, labels);\n  const { disclosure, link } = captcha();\n  return (\n    <p className={disclosure({ className })}>\n      {words.protectedBy} · <a className={link()} href={privacyHref} target=\"_blank\" rel=\"noopener noreferrer\">{words.privacy}</a> ·{\" \"}\n      <a className={link()} href={termsHref} target=\"_blank\" rel=\"noopener noreferrer\">{words.terms}</a>\n    </p>\n  );\n}\n","/** The words of `Captcha` and `CaptchaDisclosure`, English and French. Pass `labels` to say them otherwise. */\nexport interface CaptchaLabels {\n  /** The accessible name of the check (the group around the widget). */\n  readonly group: string;\n  /** Said when Cloudflare could not run the check. */\n  readonly error: string;\n  /** The retry button. */\n  readonly retry: string;\n  /** « Protected by Cloudflare Turnstile ». */\n  readonly protectedBy: string;\n  readonly privacy: string;\n  readonly terms: string;\n}\n\nexport const captchaMessages = {\n  en: {\n    group: \"Security check\",\n    error: \"The security check could not run. Check your connection and try again.\",\n    retry: \"Try again\",\n    protectedBy: \"Protected by Cloudflare Turnstile\",\n    privacy: \"Privacy\",\n    terms: \"Terms\",\n  },\n  fr: {\n    group: \"Vérification de sécurité\",\n    error: \"La vérification de sécurité n'a pas pu s'exécuter. Vérifiez votre connexion et réessayez.\",\n    retry: \"Réessayer\",\n    protectedBy: \"Protégé par Cloudflare Turnstile\",\n    privacy: \"Confidentialité\",\n    terms: \"Conditions\",\n  },\n} as const satisfies Record<string, CaptchaLabels>;\n\nexport type CaptchaLocale = keyof typeof captchaMessages;\n\nexport const labelsFor = (locale: string | undefined, labels?: Partial<CaptchaLabels>): CaptchaLabels => ({\n  ...captchaMessages[locale?.toLowerCase().startsWith(\"fr\") ? \"fr\" : \"en\"],\n  ...labels,\n});\n","/** The Cloudflare Turnstile browser API, loaded once, on demand. */\nexport interface TurnstileApi {\n  render(el: HTMLElement, options: Record<string, unknown>): string;\n  remove(id: string): void;\n  reset(id: string): void;\n}\ndeclare global {\n  interface Window {\n    turnstile?: TurnstileApi;\n  }\n}\n\nexport const TURNSTILE_SCRIPT = \"https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit\";\nexport const TURNSTILE_PRIVACY = \"https://www.cloudflare.com/privacypolicy/\";\nexport const TURNSTILE_TERMS = \"https://www.cloudflare.com/website-terms/\";\n\nlet loading: Promise<TurnstileApi> | null = null;\n\nexport function loadTurnstile(): Promise<TurnstileApi> {\n  if (window.turnstile) return Promise.resolve(window.turnstile);\n  loading ??= new Promise<TurnstileApi>((resolve, reject) => {\n    const s = document.createElement(\"script\");\n    s.src = TURNSTILE_SCRIPT;\n    s.async = true;\n    s.onload = () => (window.turnstile ? resolve(window.turnstile) : reject(new Error(\"turnstile\")));\n    s.onerror = () => {\n      loading = null;\n      reject(new Error(\"turnstile\"));\n    };\n    try {\n      document.head.appendChild(s);\n    } catch {\n      loading = null;\n      reject(new Error(\"turnstile\"));\n    }\n  });\n  return loading;\n}\n\n/** The page's theme: `html.light` or `data-theme=\"light\"` is light, anything else dark. */\nexport function pageTheme(): \"light\" | \"dark\" {\n  const root = document.documentElement;\n  return root.classList.contains(\"light\") || root.dataset.theme === \"light\" ? \"light\" : \"dark\";\n}\n"],"mappings":"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","names":[]}

package/dist/card-grid.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
 
+/** The hover of a card (blocks.css): the pointer's light (`light`) or the quiet hover (`quiet`). */
+type CardHover = "light" | "quiet";
+
 type CardGridProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
     /** The cards: one cell each. */
     children: React.ReactNode;
@@ -48,8 +51,14 @@ type CardGridProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
     foundationPosition?: "start" | "end";
     /** A short mono label on the frame's edge, naming the relation (`Powered by Orazaka`). Only with `foundation`. */
     foundationLabel?: React.ReactNode;
+    /**
+     * The hover of every card of the grid: `light` (the pointer's light, the default) or `quiet` (no glow, a 2 px lift, a
+     * ring on focus). A card that sets its own `hover` keeps it.
+     * @default "light"
+     */
+    hover?: CardHover;
 };
 /** A responsive grid of cards: equal rows, a staggered reveal, the pointer's light. */
-declare function CardGrid({ children, min, fit, align, reveal, columns, light, as: Tag, foundation, foundationPosition, foundationLabel, className, style, ...props }: CardGridProps): React.JSX.Element;
+declare function CardGrid({ children, min, fit, align, reveal, columns, light, as: Tag, foundation, foundationPosition, foundationLabel, hover, className, style, ...props }: CardGridProps): React.JSX.Element;
 
 export { CardGrid, type CardGridProps };

package/dist/card-grid.js

@@ -5,7 +5,7 @@ import {
 } from "./chunk-AB5D3KBG.js";
 import {
   cn
-} from "./chunk-G3ETON2A.js";
+} from "./chunk-WU4VLSEA.js";
 
 // src/card-grid/card-grid.tsx
 import * as React from "react";
@@ -23,6 +23,7 @@ function CardGrid({
   foundation,
   foundationPosition = "start",
   foundationLabel,
+  hover = "light",
   className,
   style,
   ...props
@@ -34,7 +35,7 @@ function CardGrid({
     Tag,
     {
       ref: foundation ? void 0 : ref,
-      className: cn("kz-cards", !foundation && className),
+      className: cn("kz-cards", hover === "quiet" && "kz-hover-quiet", !foundation && className),
       "data-fit": fit === "fit" ? "" : void 0,
       "data-align": align === "start" ? "start" : void 0,
       style: { "--kz-cards-min": `${min}px`, ...foundation ? null : style },