@krizaka/ui 2.5.0 → 2.8.0

package/README.md

@@ -9,7 +9,7 @@
 
 **The Krizaka front-end platform's components, shared by every product.**
 The primitives (button, badge, avatar, field, theme, countdown…) on the semantic `--kz-*` tokens, the animated marks
-of Krizaka, Orazaka and Orochia, and the Krizaka motion signature — one easing, one way to enter, reveal, roll, shine
+of Krizaka, Orazaka, Orochia and Yazakia, and the Krizaka motion signature — one easing, one way to enter, reveal, roll, shine
 and open.
 
 [![npm](https://img.shields.io/npm/v/@krizaka/ui?color=196df5&label=npm)](https://www.npmjs.com/package/@krizaka/ui)
@@ -159,10 +159,11 @@ light or a product's — is a set of tokens.
 | `@krizaka/ui/meter` | `Meter` (`label`, `value`/`min`/`max`, `valueText`, `thresholds`, `optimum` low·high, `parts` with their legend, `variant` bar·ring, `size`, `showLabel`), `MeterValue` | server |
 | `@krizaka/ui/stepper` | `Stepper` (`steps`: `title`, `description`, `status`, `value`, `content`; `current`, `labels` of the states, `orientation`) | server |
 | `@krizaka/ui/number-ticker` | `NumberTicker` (`value`, `locale`, `format`, `trigger` view·change, `duration`, `announce`, `align`) | client |
+| `@krizaka/ui/terminal-replay` | `TerminalReplay` (`steps` command + output lines with a tone, `label`, `title`, `prompt`, `playLabel`/`pauseLabel`/`replayLabel`, `copyLabel`/`copiedLabel`, `typingSpeed`, `lineDelay`, `stepDelay`, `rows`, `autoPlay`) | client |
 | `@krizaka/ui/glow-card` | `GlowCard` (`glow` border·spotlight·both, `alive`, `asChild`) | client |
 | `@krizaka/ui/marquee` | `Marquee` (`label`, `pauseLabel`, `playLabel`, `speed` px/s, `direction`, `fade`, `defaultPaused`) | client |
 | `@krizaka/ui/section-backdrop` | `SectionBackdrop` (`as`, `direction` down·up, `dome`, `grid`, `media` blurred for depth of field, `animated`): a page section on the brand's section gradient — see `@krizaka/tokens` BRAND.md, "Visual language" | server |
-| `@krizaka/ui/mascots` | `Mascot` (`bird` falcon·owl·duck·flamingo·pigeon, `mood` welcome·thinking·success·empty·error, `tone` brand·own, `size`, `animated`, `title`), `MASCOT_BIRDS`, `MASCOT_MOODS`: the Krizaka flock, in the host brand's accent — one bird at a moment that matters (onboarding, a long wait, a success, an empty list, an error); native `Mascot` in `/native` | client |
+| `@krizaka/ui/mascots` | `Mascot` (`bird` falcon·owl·duck·flamingo·pigeon·lovebird, `mood` welcome·thinking·success·empty·error, `tone` brand·own, `size`, `animated`, `title`), `MASCOT_BIRDS`, `MASCOT_MOODS`: the Krizaka flock, in the host brand's accent — one bird at a moment that matters (onboarding, a long wait, a success, an empty list, an error); native `Mascot` in `/native` | client |
 | `@krizaka/ui/iso` | the isometric kit: `IsoHub` (a hero driven by data: `layers`, `dome`, `satellites`, `highlight`), `IsoScene`, `IsoPrism`, `IsoStack`, `IsoDome`, `IsoTile`, `IsoLink`, `IsoNode`, `IsoLabel`, the projection helpers — static SVG animated by motion.css | server |
 | `@krizaka/ui/motion` | `MotionObserver` (reveal, off-screen pause, settle, spotlight, magnetism) and `RotatingWord` (no layout shift) | client |
 | `@krizaka/ui/pagination` | `Pagination` (pages: `page`, `pageCount`, `onPageChange` or `getHref` for links; cursor: `hasPrevious`/`hasNext`, `onPrevious`/`onNext`; `status`, `pageSize` + `pageSizeOptions`, `siblings`, `boundaries`, `labels`; folds into "Page 3 of 12" in a narrow container), `pageRange` | server |
@@ -178,11 +179,23 @@ light or a product's — is a set of tokens.
 | `@krizaka/ui/video-trimmer` | `VideoTrimmer` (`duration`, `value` [start, end], `minLength`, `step`/`largeStep`, `frames` or children, `time` + `onSeek`, `classNames` per part, `renderHandle`) | client |
 | `@krizaka/ui/audio-player` | `AudioPlayer` (a seekable waveform: `peaks` or `computePeaks`, `bars`, `playbackRates`, `duration`), `resamplePeaks`, `computeAudioPeaks` | client |
 | `@krizaka/ui/image-cropper` | `ImageCropper` (`aspect`, `round`, an image or a `<video>`, a focus point + zoom out, keyboard and zoom slider), `cropRect` | client |
+| `@krizaka/ui/page` | the page frame: `Page` (`size` narrow·default·wide·full, `as`), `Section` (`id`, `eyebrow`, `title`, `lead`, `actions`, `divider`, `spacing` sm·md·lg, `backdrop`, `size`, `reveal`), `SectionHeading`, `Facts` (`items`: `label`, `tone` ok·wip·neutral, `href`), `Ticks` (backticks read as code) — see [Page blocks](#page-blocks) | server |
+| `@krizaka/ui/page-hero` | `PageHero` (`title` → the h1, `eyebrow`, `lead`, `back`, `aside`, `backdrop` grid·plain·none, `align`, `size`, `linkAs`; facts or actions as children) | server |
+| `@krizaka/ui/card-grid` | `CardGrid` (`min`, `fit` fill·fit, `align`, `reveal` staggered by `columns`, `light`, `as` div·ul·ol) | client |
+| `@krizaka/ui/pointer-light` | `PointerLight` (`target`), `usePointerLight(ref, target)`: the light that follows the pointer over `[data-kz-light]` cards | client |
+| `@krizaka/ui/link-card` | `LinkCard` (the whole card one link: `href`, `icon`, `meta`, `title`, `titleAs`, `description`, `extra`, `cta`, `layout` row·stack, `linkAs`) | server |
+| `@krizaka/ui/argument-card` | `ArgumentCard` (compact: `icon`, `title`, `meta`, `facts`, `hook` — the trap in one line —, `more`, `actions`; in a panel: `points`, `rule`, `details`, `panelLabel`) | server |
+| `@krizaka/ui/mascot-quote` | `MascotQuote` (`bird`, `mood`, `label`, the sentence as children, `variant` inline·callout, `animated`) | client |
+| `@krizaka/ui/decision-list` | `DecisionList` (`decisions`: `chose`, `refused`, `because`, `cost`; `labels`, `reveal`) | server |
+| `@krizaka/ui/code-block` | `CodeBlock` (`code`, `language`, `file`, `copyLabel`, `copiedLabel`, `highlight`), `CodeTabs` (`label`, `tabs`), `highlight` | client |
+| `@krizaka/ui/action-bar` | `ActionBar` (`actions`: `href`, `label`, `icon`; `variant` buttons·icons — the words in a CSS tooltip —, `primaryFirst`, `size`, `label`, `linkAs`) | server |
+| `@krizaka/ui/cta-panel` | `CtaPanel` (`id`, `title`, `body`, the actions as children, `level`, `reveal`) | server |
+| `@krizaka/ui/toc` | `Toc` (`label`, `items`; the section being read marked), `TocLayout` (`toc`, the sections as children) | client |
 | `@krizaka/ui/native/video-player` | React Native `VideoPlayer` on expo-video (optional peer) | native |
 | `@krizaka/ui/native/media-capture` | React Native `MediaCapture` on expo-camera (optional peer) | native |
 | `@krizaka/ui` | the marks, `MotionObserver`, `RotatingWord`, `cx` (unchanged) | client |
 | `@krizaka/ui/native` | React Native: `ThemeProvider`/`useTheme`, `Txt`, `Button`, `IconButton`, `Card.*`, `Badge`, `Chip` (+ `Group`), `Avatar` (+ `Group`), `Skeleton`, `EmptyState`, `Spinner`, `Countdown`, `Segmented`, `Progress`, `Toaster`/`toast`, `Pagination`, `SearchField`, the marks — see [React Native](#react-native) | native |
-| `@krizaka/ui/motion.css`, `@krizaka/ui/tailwind.css` | the motion signature; the `@source` of the primitives' classes | CSS |
+| `@krizaka/ui/motion.css`, `@krizaka/ui/blocks.css`, `@krizaka/ui/tailwind.css` | the motion signature; the page blocks' styles (imported once by the app); the `@source` of the primitives' classes | CSS |
 | `@krizaka/ui/registry/<name>`, `@krizaka/ui/registry/examples/<name>/<example>` | the registry (JSON) and the examples — see [Registry](#registry--the-code-drives-the-documentation) | data · client |
 
 The theme is one mechanism for every product: dark by default, `html.light` for light, `html.theme-<name>` for a named
@@ -200,6 +213,36 @@ applies it before the first paint (no flash), the provider reports it. A persist
 <ThemeToggle label={(mode) => t(`theme.${mode}`)} />
 ```
 
+## Page blocks
+
+> Category **blocks** of krizaka.com/docs/ui. The pieces every page of a Krizaka site is made of — one frame, one hero,
+> sections on one rhythm, cards that lead or argue, decisions, code, calls to act — so every page reads the same.
+
+```tsx
+import { Page, Section, Facts, Ticks } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+
+<PageHero eyebrow={t("docs.kicker")} title={t("docs.title")} lead={t("docs.lead")} linkAs={Link} />
+<Section id="start" eyebrow={t("docs.start")} title={t("docs.startTitle")}>
+  <CardGrid min={280}>
+    {entries.map((e) => <LinkCard key={e.id} href={e.href} linkAs={Link} icon={e.icon} title={e.title} description={e.text} cta={t("open")} />)}
+  </CardGrid>
+</Section>
+```
+
+- **One frame.** `Page` (and every `Section`, every `PageHero`) is at most `--kz-page-max` wide (72rem; `narrow` 48rem,
+  `wide` 88rem) with the gutters of `--kz-page-gutter` (16 → 32 px). Give the site's navigation the same width: the bar,
+  the hero and the sections share their edges at every width.
+- **Styles.** `@krizaka/ui/blocks.css` (plain CSS on the `--kz-*` tokens, `kz-*` classes), imported once by the app —
+  `import "@krizaka/ui/blocks.css"` in its root layout (or `@import` by package path in its global stylesheet). `--kz-hero-top` clears a fixed bar; `--kz-anchor-offset` places anchors.
+- **A subject's colour.** Blocks read `--kz-hue` (rails, tiles, lights), `--kz-hue-2` and `--kz-hue-text` (small text,
+  ≥ 4.5:1), falling back to the brand's accent: set them on a card or a wrapper; `.brand-<id>` sets the accent.
+- **Links.** Blocks that link take `linkAs` (Next's `Link`) for internal addresses; an absolute URL opens in a new tab.
+- **Motion.** `reveal` uses `[data-reveal]` (MotionObserver): never on the first screen. The pointer's light, the lifts
+  and the hops stop under `prefers-reduced-motion`; nothing loops.
+
 ## Registry — the code drives the documentation
 
 Every component is also published as data: **[krizaka.com/docs/ui](https://www.krizaka.com/docs/ui)** is generated
@@ -292,7 +335,7 @@ const { theme, scheme, mode, setMode, radius } = useTheme(); // theme.surface1,
 | `Segmented` | `options` (`value`, `label`, `disabled`), `value`, `onValueChange`, `size` | The web `Tabs variant="segmented"` (a tab list). To filter, `Chip.Group`. |
 | `Progress` | `variant` bar·ring, `size`, `value`/`max`, `label`, `valueText`, a ring's centre as children | The fill is the `accent` → `accent2` gradient (react-native-svg); it animates to each new value. |
 | `Toaster`, `toast` | `toast(title, { description, tone, icon, action, onPress, id, duration, onDismiss })`, `toast.success/warning/error/info`, `toast.dismiss(id?)`; `Toaster closeLabel position offset duration max` | No sonner: a light queue of its own. `offset` takes the safe-area inset (no safe-area dependency). |
-| `KrizakaMark`, `OrazakaMark`, `OrochiaMark`, `ProductMark` (`id`) | `size`, `animated`, `title`, `neutral` (default `theme.textMuted`) | The brand marks, drawn with react-native-svg from the web marks' geometry. |
+| `KrizakaMark`, `OrazakaMark`, `OrochiaMark`, `YazakiaMark`, `ProductMark` (`id`) | `size`, `animated`, `title`, `neutral` (default `theme.textMuted`) | The brand marks, drawn with react-native-svg from the web marks' geometry. |
 
 Every animation (skeleton, badge dot, urgent countdown, progress, toast entrance, the marks) stops when the system
 asks to reduce motion (`useReducedMotion()`). Accessibility goes through `role` and `aria-*` (RN ≥ 0.71): headings,
@@ -322,11 +365,12 @@ Testing Library (`src/native/*.test.tsx`); `scripts/native-dist.mjs` checks that
 ## The marks
 
 ```tsx
-import { KrizakaLogo, OrazakaLogo, OrochiaLogo, ProductLogo } from "@krizaka/ui";
+import { KrizakaLogo, OrazakaLogo, OrochiaLogo, ProductLogo, YazakiaLogo } from "@krizaka/ui";
 
 <OrochiaLogo size={36} />                       // decorative (aria-hidden)
 <KrizakaLogo size={48} title="Krizaka" />       // an image with an accessible name
 <ProductLogo id="orazaka" animated={false} />   // by id, still
+<YazakiaLogo size={32} />                       // Yazakia: emerald → turquoise, two who meet
 ```
 
 Neutral strokes follow the host's `--kz-*` tokens when they exist (`--kz-border-strong`, `--kz-text-muted`…) and the

package/dist/action-bar.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { L as LinkComponent } from './block-link-BAg4eoZk.js';
+
+interface Action {
+    /** Where it leads. An absolute URL opens in a new tab, with the external mark. */
+    href: string;
+    /** Its words (the accessible name, and the tooltip of an icon action). */
+    label: string;
+    /** Its icon (a signature icon): decorative. Required by `variant="icons"`. */
+    icon?: React.ReactNode;
+}
+type ActionBarProps = React.HTMLAttributes<HTMLUListElement> & {
+    /** The actions, in order of importance. */
+    actions: readonly Action[];
+    /**
+     * `buttons` (with their words) or `icons` (icon buttons, the words in a tooltip).
+     * @default "buttons"
+     */
+    variant?: "buttons" | "icons";
+    /**
+     * The first action as the primary button (the one action a block is about); the others stay secondary.
+     * @default false
+     */
+    primaryFirst?: boolean;
+    /**
+     * The buttons' size: `sm` in a card, `md` in a section, `lg` on a hero or a closing call.
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /** What the actions are about (`Talk about Krizaka Java`): the list's accessible name. */
+    label?: string;
+    /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */
+    linkAs?: LinkComponent;
+};
+/** A row of link actions: buttons with their words, or icon buttons with a tooltip. */
+declare function ActionBar({ actions, variant, primaryFirst, size, label, linkAs, className, ...props }: ActionBarProps): React.JSX.Element;
+
+export { type Action, ActionBar, type ActionBarProps };

package/dist/action-bar.js

@@ -0,0 +1,52 @@
+import {
+  BlockLink,
+  isExternal
+} from "./chunk-2AGSO3WH.js";
+import {
+  ExternalGlyph
+} from "./chunk-XCBVFMNV.js";
+import {
+  buttonVariants
+} from "./chunk-Z6FUPB3Q.js";
+import {
+  cn
+} from "./chunk-FJDSLNXK.js";
+import "./chunk-43PTCDTL.js";
+
+// src/action-bar/action-bar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ActionBar({ actions, variant = "buttons", primaryFirst = false, size = "md", label, linkAs, className, ...props }) {
+  const icons = variant === "icons";
+  return /* @__PURE__ */ jsx("ul", { className: cn("kz-actions", className), "data-variant": icons ? "icons" : void 0, "aria-label": label, ...props, children: actions.map((a, i) => {
+    const external = isExternal(a.href);
+    return /* @__PURE__ */ jsx("li", { children: icons ? /* @__PURE__ */ jsx(
+      BlockLink,
+      {
+        href: a.href,
+        linkAs,
+        external,
+        "aria-label": a.label,
+        "data-tip": a.label,
+        className: buttonVariants({ variant: "ghost", size: "icon", shape: "cut", className: size === "sm" ? "h-9 w-9" : void 0 }),
+        children: a.icon
+      }
+    ) : /* @__PURE__ */ jsxs(
+      BlockLink,
+      {
+        href: a.href,
+        linkAs,
+        external,
+        className: buttonVariants({ variant: primaryFirst && i === 0 ? "primary" : "secondary", size, shape: "cut", className: "gap-2" }),
+        children: [
+          a.icon,
+          a.label,
+          external && /* @__PURE__ */ jsx(ExternalGlyph, { className: "h-3 w-3 opacity-70" })
+        ]
+      }
+    ) }, a.href);
+  }) });
+}
+export {
+  ActionBar
+};
+//# sourceMappingURL=action-bar.js.map

package/dist/action-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/action-bar/action-bar.tsx"],"sourcesContent":["// Server-safe. A row of actions that leave or move on (blocks.css): discuss · propose · report, read the docs, see the\n// code. `buttons`: buttons with their words — the end of a page or a section. `icons`: icon buttons whose words are the\n// accessible name and a tooltip on hover and focus (CSS only: no script, no portal) — the foot of a card.\nimport type * as React from \"react\";\n\nimport { BlockLink, isExternal, type LinkComponent } from \"../block-link\";\nimport { buttonVariants } from \"../button/button\";\nimport { cn } from \"../cn\";\nimport { ExternalGlyph } from \"../glyphs\";\n\nexport interface Action {\n  /** Where it leads. An absolute URL opens in a new tab, with the external mark. */\n  href: string;\n  /** Its words (the accessible name, and the tooltip of an icon action). */\n  label: string;\n  /** Its icon (a signature icon): decorative. Required by `variant=\"icons\"`. */\n  icon?: React.ReactNode;\n}\n\nexport type ActionBarProps = React.HTMLAttributes<HTMLUListElement> & {\n  /** The actions, in order of importance. */\n  actions: readonly Action[];\n  /**\n   * `buttons` (with their words) or `icons` (icon buttons, the words in a tooltip).\n   * @default \"buttons\"\n   */\n  variant?: \"buttons\" | \"icons\";\n  /**\n   * The first action as the primary button (the one action a block is about); the others stay secondary.\n   * @default false\n   */\n  primaryFirst?: boolean;\n  /**\n   * The buttons' size: `sm` in a card, `md` in a section, `lg` on a hero or a closing call.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** What the actions are about (`Talk about Krizaka Java`): the list's accessible name. */\n  label?: string;\n  /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: LinkComponent;\n};\n\n/** A row of link actions: buttons with their words, or icon buttons with a tooltip. */\nexport function ActionBar({ actions, variant = \"buttons\", primaryFirst = false, size = \"md\", label, linkAs, className, ...props }: ActionBarProps) {\n  const icons = variant === \"icons\";\n  return (\n    <ul className={cn(\"kz-actions\", className)} data-variant={icons ? \"icons\" : undefined} aria-label={label} {...props}>\n      {actions.map((a, i) => {\n        const external = isExternal(a.href);\n        return (\n          <li key={a.href}>\n            {icons ? (\n              <BlockLink\n                href={a.href}\n                linkAs={linkAs}\n                external={external}\n                aria-label={a.label}\n                data-tip={a.label}\n                className={buttonVariants({ variant: \"ghost\", size: \"icon\", shape: \"cut\", className: size === \"sm\" ? \"h-9 w-9\" : undefined })}\n              >\n                {a.icon}\n              </BlockLink>\n            ) : (\n              <BlockLink\n                href={a.href}\n                linkAs={linkAs}\n                external={external}\n                className={buttonVariants({ variant: primaryFirst && i === 0 ? \"primary\" : \"secondary\", size, shape: \"cut\", className: \"gap-2\" })}\n              >\n                {a.icon}\n                {a.label}\n                {external && <ExternalGlyph className=\"h-3 w-3 opacity-70\" />}\n              </BlockLink>\n            )}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAqDc,cAWA,YAXA;AATP,SAAS,UAAU,EAAE,SAAS,UAAU,WAAW,eAAe,OAAO,OAAO,MAAM,OAAO,QAAQ,WAAW,GAAG,MAAM,GAAmB;AACjJ,QAAM,QAAQ,YAAY;AAC1B,SACE,oBAAC,QAAG,WAAW,GAAG,cAAc,SAAS,GAAG,gBAAc,QAAQ,UAAU,QAAW,cAAY,OAAQ,GAAG,OAC3G,kBAAQ,IAAI,CAAC,GAAG,MAAM;AACrB,UAAM,WAAW,WAAW,EAAE,IAAI;AAClC,WACE,oBAAC,QACE,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,EAAE;AAAA,QACR;AAAA,QACA;AAAA,QACA,cAAY,EAAE;AAAA,QACd,YAAU,EAAE;AAAA,QACZ,WAAW,eAAe,EAAE,SAAS,SAAS,MAAM,QAAQ,OAAO,OAAO,WAAW,SAAS,OAAO,YAAY,OAAU,CAAC;AAAA,QAE3H,YAAE;AAAA;AAAA,IACL,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,EAAE;AAAA,QACR;AAAA,QACA;AAAA,QACA,WAAW,eAAe,EAAE,SAAS,gBAAgB,MAAM,IAAI,YAAY,aAAa,MAAM,OAAO,OAAO,WAAW,QAAQ,CAAC;AAAA,QAE/H;AAAA,YAAE;AAAA,UACF,EAAE;AAAA,UACF,YAAY,oBAAC,iBAAc,WAAU,sBAAqB;AAAA;AAAA;AAAA,IAC7D,KAtBK,EAAE,IAwBX;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/argument-card.d.ts

@@ -0,0 +1,67 @@
+import { Fact } from './page.js';
+import * as React from 'react';
+import { L as LinkComponent } from './block-link-BAg4eoZk.js';
+import './section-backdrop.js';
+import 'tailwind-variants';
+
+type ArgumentCardProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The id of the title: the card's accessible name. */
+    id: string;
+    /** The title: the subject (a building block, a feature, a plan). */
+    title: React.ReactNode;
+    /** The icon tile (a signature icon): decorative. */
+    icon?: React.ReactNode;
+    /** A mono line under the title (a repository, a package). */
+    meta?: React.ReactNode;
+    /** Small, in the top corner: the bird whose rule it is (a `Mascot` of 40 px, still). Decorative. */
+    mark?: React.ReactNode;
+    /** Compact facts under the line: registry and version, a status said honestly. */
+    facts?: readonly Fact[];
+    /**
+     * The problem in ONE line (≤ 90 characters): what a reader keeps if they read nothing else. `label` (`The trap`) is
+     * read by assistive technology before it, not shown.
+     */
+    hook: {
+        label: React.ReactNode;
+        text: React.ReactNode;
+    };
+    /** Unfolded only: what it does, as a few short points, with their label (`What it does`). */
+    points?: {
+        label: React.ReactNode;
+        items: readonly React.ReactNode[];
+    };
+    /** Unfolded only: the rule told by a bird (a `MascotQuote`, `variant="inline"`). */
+    rule?: React.ReactNode;
+    /** Unfolded only: the long version, as labelled paragraphs. */
+    details?: readonly {
+        label: React.ReactNode;
+        text: React.ReactNode;
+    }[];
+    /**
+     * Without a detail page: the words that unfold the card in place (`Details`) — a native `<details>` holding the
+     * points, the rule and the long version. Ignored with `more`: the detail page holds them.
+     */
+    panelLabel?: React.ReactNode;
+    /** The way in: a detail page — one short action at the foot (`Details`). With it, the card is only its face. */
+    more?: {
+        href: string;
+        label: React.ReactNode;
+    };
+    /** Discreet secondary actions at the foot, on the right (an `ActionBar` with `variant="icons"`). */
+    actions?: React.ReactNode;
+    /**
+     * The title's level.
+     * @default 3
+     */
+    level?: 2 | 3 | 4;
+    /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */
+    linkAs?: LinkComponent;
+};
+/**
+ * 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;
+
+export { ArgumentCard, type ArgumentCardProps, Fact };

package/dist/argument-card.js

@@ -0,0 +1,69 @@
+import {
+  Facts
+} from "./chunk-K3SWZXYT.js";
+import {
+  BlockLink
+} from "./chunk-2AGSO3WH.js";
+import {
+  ArrowGlyph,
+  ChevronGlyph
+} from "./chunk-XCBVFMNV.js";
+import "./chunk-XVLWVTQA.js";
+import {
+  cn
+} from "./chunk-FJDSLNXK.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 }) {
+  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: [
+    /* @__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: [
+        /* @__PURE__ */ jsx(H, { id, className: "kz-arg-title", children: title }),
+        meta && /* @__PURE__ */ jsx("p", { className: "kz-arg-meta", children: meta })
+      ] }),
+      mark && /* @__PURE__ */ jsx("span", { className: "kz-arg-mark", "aria-hidden": true, children: mark })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "kz-arg-line", children: [
+      /* @__PURE__ */ jsxs("span", { className: "kz-sr-only", children: [
+        hook.label,
+        " \u2014 "
+      ] }),
+      hook.text
+    ] }),
+    facts && facts.length > 0 && /* @__PURE__ */ jsx(Facts, { items: facts }),
+    fold && /* @__PURE__ */ jsxs("details", { className: "kz-arg-panel", children: [
+      /* @__PURE__ */ jsxs("summary", { children: [
+        panelLabel,
+        " ",
+        /* @__PURE__ */ jsx(ChevronGlyph, { className: "h-3.5 w-3.5" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "kz-arg-panel-body", children: [
+        points && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "kz-label", children: points.label }),
+          /* @__PURE__ */ jsx("ul", { className: "kz-list", children: points.items.map((item, i) => /* @__PURE__ */ jsx("li", { children: item }, i)) })
+        ] }),
+        details && details.length > 0 && /* @__PURE__ */ jsx("dl", { children: details.map((d, i) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("dt", { className: "kz-label", children: d.label }),
+          /* @__PURE__ */ jsx("dd", { children: d.text })
+        ] }, i)) }),
+        rule
+      ] })
+    ] }),
+    (more || actions) && /* @__PURE__ */ jsxs("div", { className: "kz-arg-foot", children: [
+      more ? /* @__PURE__ */ jsxs(BlockLink, { href: more.href, linkAs, className: "kz-arg-more", "aria-describedby": id, children: [
+        more.label,
+        " ",
+        /* @__PURE__ */ jsx(ArrowGlyph, { className: "h-3.5 w-3.5" })
+      ] }) : /* @__PURE__ */ jsx("span", {}),
+      actions
+    ] })
+  ] });
+}
+export {
+  ArgumentCard
+};
+//# sourceMappingURL=argument-card.js.map

package/dist/argument-card.js.map

@@ -0,0 +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":[]}

package/dist/audio-player.js

@@ -8,7 +8,7 @@ import {
 import {
   PauseGlyph,
   PlayGlyph
-} from "./chunk-YX6CNVJA.js";
+} from "./chunk-CPA5CF35.js";
 
 // src/audio-player/audio-player.tsx
 import * as React from "react";

package/dist/block-link-BAg4eoZk.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+/** The app's link component (Next's `Link`, React Router's `Link`…): receives `href`, `className` and the children. */
+type LinkComponent = React.ElementType<{
+    href: string;
+    className?: string;
+    children?: React.ReactNode;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+}>;
+
+export type { LinkComponent as L };