@krizaka/ui 3.51.0 → 3.53.0

package/dist/action-bar.js

@@ -1,7 +1,7 @@
 import {
   BlockLink,
   isExternal
-} from "./chunk-2AGSO3WH.js";
+} from "./chunk-FVGFPB73.js";
 import {
   ExternalGlyph
 } from "./chunk-XCBVFMNV.js";

package/dist/argument-card.js

@@ -1,12 +1,12 @@
+import {
+  cardHoverClass
+} from "./chunk-7JG3VR4C.js";
 import {
   Facts
 } from "./chunk-YKEIOYJ5.js";
-import {
-  cardHoverClass
-} from "./chunk-IBDTAMPF.js";
 import {
   BlockLink
-} from "./chunk-2AGSO3WH.js";
+} from "./chunk-FVGFPB73.js";
 import {
   ArrowGlyph,
   ChevronGlyph

package/dist/blocks.css

@@ -54,6 +54,7 @@
 }
 .kz-frame[data-margin] { --kz-margin-x: max(8px, calc(var(--kz-gutter) - 12px)); }
 .kz-heading-number,
+.kz-chapter-no,
 .kz-margin-note {
   font-family: var(--kz-font-mono);
   font-size: 13px;
@@ -140,6 +141,191 @@
   .kz-heading-actions { grid-column: 1; grid-row: auto; }
 }
 
+/* ─── Explained figures, next actions and the host's glossary ─── */
+.kz-kpi,
+.kz-next-actions,
+.kz-glossary {
+  min-width: 0;
+  color: var(--kz-text-primary);
+}
+.kz-kpi {
+  display: grid;
+  gap: 12px;
+  padding: clamp(16px, 3vw, 24px);
+  border: 1px solid var(--kz-border-default);
+  border-radius: 8px;
+  background: var(--kz-surface-1);
+}
+.kz-kpi-head,
+.kz-next-action-heading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 12px;
+}
+.kz-kpi-label,
+.kz-next-actions-title,
+.kz-glossary-title,
+.kz-next-action-heading h3 {
+  margin: 0;
+  color: var(--kz-text-primary);
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.35;
+}
+.kz-kpi-state,
+.kz-kpi-stale,
+.kz-next-action-urgency {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 2px 8px;
+  border: 1px solid var(--kz-border-default);
+  border-radius: 999px;
+  color: var(--kz-text-primary);
+  background: var(--kz-surface-2);
+  font-size: 0.75rem;
+  font-weight: 650;
+  line-height: 1.3;
+}
+.kz-kpi-state[data-state="watch"],
+.kz-kpi-stale,
+.kz-next-action-urgency[data-urgency="medium"] {
+  border-color: color-mix(in srgb, var(--kz-warning) 38%, var(--kz-border-default));
+  background: color-mix(in srgb, var(--kz-warning) 10%, var(--kz-surface-1));
+}
+.kz-kpi-state[data-state="act"],
+.kz-next-action-urgency[data-urgency="high"] {
+  border-color: color-mix(in srgb, var(--kz-danger) 38%, var(--kz-border-default));
+  background: color-mix(in srgb, var(--kz-danger) 10%, var(--kz-surface-1));
+}
+.kz-next-action-urgency[data-urgency="low"] {
+  border-color: color-mix(in srgb, var(--kz-success) 38%, var(--kz-border-default));
+  background: color-mix(in srgb, var(--kz-success) 10%, var(--kz-surface-1));
+}
+.kz-kpi-value {
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--kz-text-primary);
+  font-family: var(--kz-font-display);
+  font-size: clamp(1.75rem, 5vw, 2.5rem);
+  font-variant-numeric: var(--kz-figures, tabular-nums);
+  font-weight: 700;
+  line-height: 1.15;
+}
+.kz-kpi-meaning,
+.kz-next-action-copy p {
+  margin: 0;
+  color: var(--kz-text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.55;
+}
+.kz-kpi-details {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+  gap: 12px 20px;
+  margin: 0;
+}
+.kz-kpi-details > div { min-width: 0; }
+.kz-kpi-details dt {
+  margin-bottom: 3px;
+  color: var(--kz-text-secondary);
+  font-size: 0.75rem;
+  font-weight: 650;
+}
+.kz-kpi-details dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--kz-text-primary);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.kz-kpi-verify { display: inline-flex; margin-inline-start: 10px; }
+.kz-kpi-freshness {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 10px;
+  margin: 0;
+  color: var(--kz-text-secondary);
+  font-size: 0.75rem;
+}
+.kz-kpi-sparkline { min-width: 0; }
+.kz-next-actions,
+.kz-glossary {
+  display: grid;
+  gap: 16px;
+}
+.kz-next-actions-list {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.kz-next-action {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: 12px;
+  min-width: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--kz-border-default);
+  border-radius: 8px;
+  background: var(--kz-surface-1);
+}
+.kz-next-action-rank { color: var(--kz-text-secondary); font-weight: 650; font-variant-numeric: var(--kz-figures, lining-nums tabular-nums); }
+.kz-next-action-content {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px 20px;
+  min-width: 0;
+}
+.kz-next-action-copy { display: grid; min-width: 0; gap: 5px; }
+.kz-next-action-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.kz-glossary-list { display: grid; gap: 12px; margin: 0; }
+.kz-glossary-entry {
+  display: grid;
+  grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr);
+  gap: 8px 20px;
+  padding-block: 12px;
+  border-bottom: 1px solid var(--kz-border-subtle);
+}
+.kz-glossary-entry dt { color: var(--kz-text-primary); font-weight: 650; }
+.kz-glossary-entry dd { margin: 0; color: var(--kz-text-secondary); line-height: 1.55; }
+.kz-glossary-term {
+  border-radius: 2px;
+  color: inherit;
+  font-style: inherit;
+  text-decoration-line: underline;
+  text-decoration-color: var(--kz-accent);
+  text-decoration-style: dotted;
+  text-underline-offset: 0.2em;
+  cursor: help;
+}
+.kz-glossary-term:focus-visible {
+  outline: 2px solid var(--kz-ring, var(--kz-accent));
+  outline-offset: 3px;
+}
+@media (max-width: 520px) {
+  .kz-next-action-content { grid-template-columns: minmax(0, 1fr); }
+  .kz-glossary-entry { grid-template-columns: minmax(0, 1fr); gap: 4px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kz-kpi, .kz-next-action, .kz-glossary-entry, .kz-glossary-term { animation: none; scroll-behavior: auto; transition: none; }
+}
+@media print {
+  .kz-kpi, .kz-next-actions, .kz-glossary, .kz-next-action, .kz-glossary-entry {
+    break-inside: avoid;
+    box-shadow: none;
+    background: transparent;
+  }
+  .kz-kpi, .kz-next-action, .kz-glossary-entry { border-color: currentColor; }
+  .kz-kpi-stale, .kz-kpi-state, .kz-next-action-urgency { border-color: currentColor; }
+}
+
 /* Ticks: a word between backticks in a sentence reads as code. */
 .kz-ic {
   padding: 0.08em 0.38em;
@@ -1075,6 +1261,113 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-footnotes li::marker { font-family: var(--kz-font-mono); color: var(--kz-paper-rule-margin); }
 .kz-fn-back { color: var(--kz-accent-text); text-decoration: none; }
 
+/* ChapterIndex, ChapterHead, ChapterFoot (#617) — the chapters of a story on the notebook's lines, never boxes. Every row is
+   one ruled line (--kz-chapter-line = the paper's module, 32 px): the number hangs in the margin left of the red rule
+   (`[data-margin]`, moved to --kz-margin-x), the serif title is the link and its hit area is the whole row, the period is
+   quiet on the right (under the title in a narrow column). The ruling is `[data-paper="lines"]`, shifted so a major line
+   runs under the titles' baseline (--kz-chapter-baseline, in em of the title). No border per row, nothing moves. */
+.kz-chapters {
+  --kz-chapter-line: var(--kz-paper-module, 32px);
+  --kz-chapter-pad: var(--kz-paper-line, 8px);
+  --kz-chapter-baseline: calc(var(--kz-chapter-line) / 2 + 0.36em);
+  --kz-chapter-gap: 16px;
+  container-type: inline-size;
+  box-sizing: border-box;
+  max-width: var(--kz-chapters-max, 46rem); /* the period stays within reach of its title */
+  margin: 0;
+  padding: var(--kz-chapter-pad) 0;
+  list-style: none;
+  font-size: 1.1875rem;
+}
+.kz-chapters[data-margin], .kz-chapter-head[data-margin] { --kz-margin-x: 3rem; }
+.kz-chapters[data-paper] { background-position: 0 calc(var(--kz-chapter-pad) + var(--kz-chapter-baseline)); }
+.kz-chapters ul { margin: 0; padding: 0; list-style: none; }
+.kz-chapter-row {
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--kz-margin-x) minmax(0, 1fr) auto;
+  align-items: baseline;
+  min-height: var(--kz-chapter-line);
+  line-height: var(--kz-chapter-line);
+}
+.kz-chapter-row .kz-chapter-no { grid-column: 1; padding-right: 12px; text-align: right; white-space: nowrap; }
+.kz-chapter-link {
+  grid-column: 2;
+  min-width: 0;
+  padding-left: var(--kz-chapter-gap);
+  font-family: var(--kz-font-display);
+  font-weight: 400;
+  line-height: var(--kz-chapter-line);
+  color: var(--kz-text-primary);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+.kz-chapter-link::after { content: ""; position: absolute; inset: 0; }
+.kz-chapter-link:focus-visible { outline: none; }
+.kz-chapter-link:focus-visible::after { outline: var(--kz-ring-width, 2px) solid var(--kz-ring); outline-offset: 0; }
+.kz-chapter-title { text-decoration-line: none; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
+.kz-chapter-link:is(:hover, :focus-visible) .kz-chapter-title { text-decoration-line: underline; text-decoration-color: var(--kz-hue, var(--kz-accent)); }
+.kz-chapter-link[aria-current="page"] .kz-chapter-title { text-decoration-line: underline; text-decoration-color: var(--kz-paper-rule-margin); }
+.kz-chapter-new,
+.kz-chapter-period,
+.kz-chapter-meta {
+  font-family: var(--kz-font-mono);
+  font-size: 12.5px;
+  line-height: 16px;
+  font-variant-numeric: var(--kz-figures, lining-nums tabular-nums);
+}
+.kz-chapter-new { margin-left: 4px; white-space: nowrap; color: var(--kz-hue-text, var(--kz-accent-text)); }
+.kz-chapter-period { grid-column: 3; padding-left: var(--kz-chapter-gap); white-space: nowrap; color: var(--kz-text-secondary); }
+.kz-chapter-detail { grid-column: 2 / -1; padding-left: var(--kz-chapter-gap); font-size: 14.5px; color: var(--kz-text-secondary); }
+/* A narrow column: the row flows as text with a hanging indent — the number still in the margin (inline, so it shares the
+   title's baseline), the title wraps from line to line, the period runs on after its last word: two ruled lines at most. */
+@container (max-width: 34rem) {
+  .kz-chapter-row { display: block; padding-left: calc(var(--kz-margin-x) + var(--kz-chapter-gap)); }
+  .kz-chapter-row .kz-chapter-no {
+    display: inline-block;
+    box-sizing: border-box;
+    width: var(--kz-margin-x);
+    margin-left: calc(-1 * (var(--kz-margin-x) + var(--kz-chapter-gap)));
+    margin-right: var(--kz-chapter-gap);
+  }
+  .kz-chapter-link { display: inline; padding-left: 0; }
+  .kz-chapter-period { display: inline-block; padding-left: 0; }
+  .kz-chapter-detail { display: block; padding-left: 0; }
+}
+
+/* The foot: the previous and the next as two rows of the index, then one quiet line back to the story. */
+.kz-chapter-row[data-dir] .kz-chapter-period { color: var(--kz-text-secondary); }
+.kz-chapter-back { margin: 0; padding-left: calc(var(--kz-margin-x) + var(--kz-chapter-gap)); font-size: 14.5px; line-height: var(--kz-chapter-line); }
+.kz-chapter-back-link { color: var(--kz-text-secondary); text-decoration: none; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
+.kz-chapter-back-link:is(:hover, :focus-visible) { color: var(--kz-text-primary); text-decoration-line: underline; text-decoration-color: var(--kz-hue, var(--kz-accent)); }
+.kz-chapter-back-link:focus-visible { outline: var(--kz-ring-width, 2px) solid var(--kz-ring); outline-offset: 2px; }
+
+/* The head: the number in the margin beside the title's first line, one quiet meta line, the standfirst once. */
+.kz-chapter-head {
+  display: grid;
+  grid-template-columns: var(--kz-margin-x) minmax(0, 1fr);
+  align-items: baseline;
+  row-gap: 12px;
+  padding-block: 8px;
+}
+.kz-chapter-head > * { grid-column: 2; margin: 0; padding-left: var(--kz-chapter-gap, 16px); min-width: 0; }
+.kz-chapter-head > .kz-chapter-no { grid-column: 1; grid-row: 1; padding: 0 12px 0 0; text-align: right; white-space: nowrap; }
+.kz-chapter-head-title {
+  grid-row: 1;
+  max-width: 22ch;
+  font-family: var(--kz-font-display);
+  font-size: clamp(1.85rem, 5.2vw, 2.75rem);
+  font-weight: 400;
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+  color: var(--kz-text-primary);
+  text-wrap: balance;
+  overflow-wrap: anywhere;
+}
+.kz-chapter-meta { color: var(--kz-text-secondary); }
+.kz-chapter-standfirst { max-width: 60ch; font-size: 1.125rem; line-height: 1.6; color: var(--kz-text-secondary); text-wrap: pretty; }
+.kz-chapter-arrow { color: var(--kz-hue-text, var(--kz-paper-rule-margin)); }
+
 /* Mascot life — the Flock's birds at ease, in character (Mascot `life`). */
 /* mascot-life:begin — generated by scripts/gen-mascot-life.mjs from src/mascots/life.ts; do not edit */
 @keyframes kzb-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(.996,1.018)}}

package/dist/chapter.d.ts

@@ -0,0 +1,89 @@
+import { L as LinkComponent } from './block-link-BAg4eoZk.js';
+import * as React from 'react';
+
+/** The notebook under the rows: `lines` (the ruling of `Page`, aligned on the rows) or `false` (the page's own paper). */
+type ChapterPaper = "lines" | false;
+interface ChapterEntry {
+    /** Its number, hung in the margin: `01`, `§ 1`. */
+    number: React.ReactNode;
+    /** The title, in the serif: the link. */
+    title: React.ReactNode;
+    /** Where it leads. */
+    href: string;
+    /** When it happened, quiet on the right (under the title on a phone): `janv. – mars 2026`, or a `<time>`. */
+    period?: React.ReactNode;
+    /** One more line under the title (what was faced → what was built). Off unless given: the chapter's page says it. */
+    detail?: React.ReactNode;
+    /** The latest chapter: a small mark after the title, in the hue (`newLabel`). */
+    isNew?: boolean;
+    /** The page the reader is on. */
+    current?: boolean;
+}
+type ChapterIndexProps = Omit<React.OlHTMLAttributes<HTMLOListElement>, "children"> & {
+    /** The chapters, in reading order. */
+    chapters: readonly ChapterEntry[];
+    /** The word of the latest chapter's mark. @default "New" */
+    newLabel?: React.ReactNode;
+    /** The accessible name of the list, when no heading names it (`aria-labelledby`). */
+    label?: string;
+    /** The ruling under the rows. `false` when the page is ruled already and the list starts on its module. @default "lines" */
+    paper?: ChapterPaper;
+    /** The app's router link (Next's `Link`), so internal chapters prefetch. */
+    linkAs?: LinkComponent;
+};
+/** The chapters of a story as a sober timeline: one ruled line each, the number in the margin, the title the link. */
+declare function ChapterIndex({ chapters, newLabel, label, paper, linkAs, className, ...props }: ChapterIndexProps): React.JSX.Element;
+type ChapterHeadProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The chapter's number, hung in the margin: `01`, `Chapitre 1`. */
+    number: React.ReactNode;
+    /** The title: the page's `h1`. */
+    title: React.ReactNode;
+    /** When it happened: `janv. – mars 2026`. */
+    period?: React.ReactNode;
+    /** How long it reads: `8 min`. */
+    readingTime?: React.ReactNode;
+    /** What was faced: the first half of the standfirst. */
+    faced?: React.ReactNode;
+    /** What was built: its second half, after the arrow. */
+    built?: React.ReactNode;
+    /** The words a screen reader says before each half (the arrow is drawn, not read): `["What I faced", "What we built"]`. */
+    versusLabels?: readonly [string, string];
+    /** The level of the title. @default 1 */
+    level?: 1 | 2;
+};
+/** The head of a chapter: the number in the margin, the title, the period and the reading time, the standfirst once. */
+declare function ChapterHead({ number, title, period, readingTime, faced, built, versusLabels, level, className, children, ...props }: ChapterHeadProps): React.JSX.Element;
+interface ChapterLink {
+    /** Its number, in the margin: `02`. */
+    number?: React.ReactNode;
+    /** Its title, the link. */
+    title: React.ReactNode;
+    /** Where it leads. */
+    href: string;
+}
+type ChapterFootProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+    /** The chapter before this one (none on the first). */
+    previous?: ChapterLink;
+    /** The chapter after this one (none on the latest). */
+    next?: ChapterLink;
+    /** The line back to the story: `{ href: "/", label: "Back to the story" }`. */
+    back?: {
+        href: string;
+        label: React.ReactNode;
+    };
+    /** The quiet words beside each link. @default { previous: "Previous", next: "Next" } */
+    labels?: {
+        previous: React.ReactNode;
+        next: React.ReactNode;
+    };
+    /** The accessible name of the navigation. @default "Chapters" */
+    label?: string;
+    /** The ruling under the links. @default "lines" */
+    paper?: ChapterPaper;
+    /** The app's router link (Next's `Link`). */
+    linkAs?: LinkComponent;
+};
+/** The foot of a chapter: the previous and the next on the ruled lines, then one line back to the story. */
+declare function ChapterFoot({ previous, next, back, labels, label, paper, linkAs, className, ...props }: ChapterFootProps): React.JSX.Element;
+
+export { type ChapterEntry, ChapterFoot, type ChapterFootProps, ChapterHead, type ChapterHeadProps, ChapterIndex, type ChapterIndexProps, type ChapterLink, LinkComponent };

package/dist/chapter.js

@@ -0,0 +1,123 @@
+import {
+  BlockLink
+} from "./chunk-FVGFPB73.js";
+import {
+  cn
+} from "./chunk-W675RFOA.js";
+
+// src/chapter/chapter.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ChapterRow({
+  number,
+  title,
+  href,
+  aside,
+  mark,
+  detail,
+  current,
+  rel,
+  linkAs
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "kz-chapter-no", children: number }),
+    /* @__PURE__ */ jsxs(BlockLink, { href, linkAs, rel, className: "kz-chapter-link", "aria-current": current ? "page" : void 0, children: [
+      /* @__PURE__ */ jsx("span", { className: "kz-chapter-title", children: title }),
+      mark && /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "kz-chapter-new", children: mark })
+      ] })
+    ] }),
+    aside && /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "kz-chapter-period", children: aside })
+    ] }),
+    detail && /* @__PURE__ */ jsx("span", { className: "kz-chapter-detail", children: detail })
+  ] });
+}
+function ChapterIndex({ chapters, newLabel = "New", label, paper = "lines", linkAs, className, ...props }) {
+  return (
+    // `role="list"`: a list without bullets is still a list to VoiceOver.
+    /* @__PURE__ */ jsx("ol", { role: "list", "aria-label": label, "data-paper": paper || void 0, "data-margin": "", className: cn("kz-chapters", className), ...props, children: chapters.map((c, i) => /* @__PURE__ */ jsx("li", { className: "kz-chapter-row", "data-new": c.isNew ? "" : void 0, "data-detail": c.detail ? "" : void 0, children: /* @__PURE__ */ jsx(ChapterRow, { number: c.number, title: c.title, href: c.href, aside: c.period, mark: c.isNew ? newLabel : void 0, detail: c.detail, current: c.current, linkAs }) }, i)) })
+  );
+}
+function ChapterHead({ number, title, period, readingTime, faced, built, versusLabels, level = 1, className, children, ...props }) {
+  const H = level === 1 ? "h1" : "h2";
+  const meta = [period, readingTime].filter((m) => m !== void 0 && m !== null && m !== "");
+  return /* @__PURE__ */ jsxs("header", { "data-margin": "", className: cn("kz-chapter-head", className), ...props, children: [
+    /* @__PURE__ */ jsx("p", { className: "kz-chapter-no", children: number }),
+    /* @__PURE__ */ jsx(H, { className: "kz-chapter-head-title", children: title }),
+    meta.length > 0 && /* @__PURE__ */ jsx("p", { className: "kz-chapter-meta", children: meta.map((m, i) => /* @__PURE__ */ jsxs("span", { children: [
+      i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: " \xB7 " }),
+      m
+    ] }, i)) }),
+    faced && built && /* @__PURE__ */ jsxs("p", { className: "kz-chapter-standfirst", children: [
+      versusLabels && /* @__PURE__ */ jsxs("span", { className: "kz-sr-only", children: [
+        versusLabels[0],
+        ", "
+      ] }),
+      faced,
+      /* @__PURE__ */ jsx("span", { className: "kz-chapter-arrow", "aria-hidden": true, children: " \u2192 " }),
+      versusLabels && /* @__PURE__ */ jsxs("span", { className: "kz-sr-only", children: [
+        "; ",
+        versusLabels[1],
+        ", "
+      ] }),
+      built
+    ] }),
+    children
+  ] });
+}
+function ChapterFoot({
+  previous,
+  next,
+  back,
+  labels = { previous: "Previous", next: "Next" },
+  label = "Chapters",
+  paper = "lines",
+  linkAs,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": label, "data-paper": paper || void 0, "data-margin": "", className: cn("kz-chapters kz-chapter-foot", className), ...props, children: [
+    /* @__PURE__ */ jsxs("ul", { role: "list", children: [
+      previous && /* @__PURE__ */ jsx("li", { className: "kz-chapter-row", "data-dir": "previous", children: /* @__PURE__ */ jsx(
+        ChapterRow,
+        {
+          number: previous.number,
+          title: previous.title,
+          href: previous.href,
+          rel: "prev",
+          linkAs,
+          aside: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2190 " }),
+            labels.previous
+          ] })
+        }
+      ) }),
+      next && /* @__PURE__ */ jsx("li", { className: "kz-chapter-row", "data-dir": "next", children: /* @__PURE__ */ jsx(
+        ChapterRow,
+        {
+          number: next.number,
+          title: next.title,
+          href: next.href,
+          rel: "next",
+          linkAs,
+          aside: /* @__PURE__ */ jsxs(Fragment, { children: [
+            labels.next,
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: " \u2192" })
+          ] })
+        }
+      ) })
+    ] }),
+    back && /* @__PURE__ */ jsx("p", { className: "kz-chapter-back", children: /* @__PURE__ */ jsxs(BlockLink, { href: back.href, linkAs, className: "kz-chapter-back-link", children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u21A9 " }),
+      back.label
+    ] }) })
+  ] });
+}
+export {
+  ChapterFoot,
+  ChapterHead,
+  ChapterIndex
+};
+//# sourceMappingURL=chapter.js.map

package/dist/chapter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chapter/chapter.tsx"],"sourcesContent":["// Server-safe. The chapters of a story on the Cahier (ADR-004, blocks.css, krizaka-ui#617): a sober timeline, never a\n// stack of boxes. The rows sit on the notebook's ruled lines (`data-paper=\"lines\"`, the ruling of `Page`), the number\n// hangs in the margin beside its red rule (`data-margin`), the serif title is the link, the period is quiet.\n// - `ChapterIndex` — the chapters in reading order, one ruled line each (two at most), the latest marked « New »;\n// - `ChapterHead` — the head of a chapter's page: number in the margin, title, one quiet meta line, the standfirst;\n// - `ChapterFoot` — its foot: the previous and next chapters on the lines, then one line back to the story.\n// No border per row, no card, no button: the paper carries the rhythm. Every word arrives as a prop.\nimport type * as React from \"react\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\n\n/** The notebook under the rows: `lines` (the ruling of `Page`, aligned on the rows) or `false` (the page's own paper). */\ntype ChapterPaper = \"lines\" | false;\n\nexport interface ChapterEntry {\n  /** Its number, hung in the margin: `01`, `§ 1`. */\n  number: React.ReactNode;\n  /** The title, in the serif: the link. */\n  title: React.ReactNode;\n  /** Where it leads. */\n  href: string;\n  /** When it happened, quiet on the right (under the title on a phone): `janv. – mars 2026`, or a `<time>`. */\n  period?: React.ReactNode;\n  /** One more line under the title (what was faced → what was built). Off unless given: the chapter's page says it. */\n  detail?: React.ReactNode;\n  /** The latest chapter: a small mark after the title, in the hue (`newLabel`). */\n  isNew?: boolean;\n  /** The page the reader is on. */\n  current?: boolean;\n}\n\n/** One ruled row: number in the margin, the title as the link (its hit area the whole row), an aside on the right. */\nfunction ChapterRow({\n  number,\n  title,\n  href,\n  aside,\n  mark,\n  detail,\n  current,\n  rel,\n  linkAs,\n}: {\n  number?: React.ReactNode;\n  title: React.ReactNode;\n  href: string;\n  aside?: React.ReactNode;\n  mark?: React.ReactNode;\n  detail?: React.ReactNode;\n  current?: boolean;\n  rel?: string;\n  linkAs?: LinkComponent;\n}) {\n  return (\n    <>\n      <span className=\"kz-chapter-no\">{number}</span>\n      <BlockLink href={href} linkAs={linkAs} rel={rel} className=\"kz-chapter-link\" aria-current={current ? \"page\" : undefined}>\n        <span className=\"kz-chapter-title\">{title}</span>\n        {mark && (\n          <>\n            {\" \"}\n            <span className=\"kz-chapter-new\">{mark}</span>\n          </>\n        )}\n      </BlockLink>\n      {aside && (\n        <>\n          {/* A space, not a margin: in a narrow column the period runs on after the title, and starts flush when it wraps. */}{\" \"}\n          <span className=\"kz-chapter-period\">{aside}</span>\n        </>\n      )}\n      {detail && <span className=\"kz-chapter-detail\">{detail}</span>}\n    </>\n  );\n}\n\nexport type ChapterIndexProps = Omit<React.OlHTMLAttributes<HTMLOListElement>, \"children\"> & {\n  /** The chapters, in reading order. */\n  chapters: readonly ChapterEntry[];\n  /** The word of the latest chapter's mark. @default \"New\" */\n  newLabel?: React.ReactNode;\n  /** The accessible name of the list, when no heading names it (`aria-labelledby`). */\n  label?: string;\n  /** The ruling under the rows. `false` when the page is ruled already and the list starts on its module. @default \"lines\" */\n  paper?: ChapterPaper;\n  /** The app's router link (Next's `Link`), so internal chapters prefetch. */\n  linkAs?: LinkComponent;\n};\n\n/** The chapters of a story as a sober timeline: one ruled line each, the number in the margin, the title the link. */\nexport function ChapterIndex({ chapters, newLabel = \"New\", label, paper = \"lines\", linkAs, className, ...props }: ChapterIndexProps) {\n  return (\n    // `role=\"list\"`: a list without bullets is still a list to VoiceOver.\n    <ol role=\"list\" aria-label={label} data-paper={paper || undefined} data-margin=\"\" className={cn(\"kz-chapters\", className)} {...props}>\n      {chapters.map((c, i) => (\n        <li key={i} className=\"kz-chapter-row\" data-new={c.isNew ? \"\" : undefined} data-detail={c.detail ? \"\" : undefined}>\n          <ChapterRow number={c.number} title={c.title} href={c.href} aside={c.period} mark={c.isNew ? newLabel : undefined} detail={c.detail} current={c.current} linkAs={linkAs} />\n        </li>\n      ))}\n    </ol>\n  );\n}\n\nexport type ChapterHeadProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The chapter's number, hung in the margin: `01`, `Chapitre 1`. */\n  number: React.ReactNode;\n  /** The title: the page's `h1`. */\n  title: React.ReactNode;\n  /** When it happened: `janv. – mars 2026`. */\n  period?: React.ReactNode;\n  /** How long it reads: `8 min`. */\n  readingTime?: React.ReactNode;\n  /** What was faced: the first half of the standfirst. */\n  faced?: React.ReactNode;\n  /** What was built: its second half, after the arrow. */\n  built?: React.ReactNode;\n  /** The words a screen reader says before each half (the arrow is drawn, not read): `[\"What I faced\", \"What we built\"]`. */\n  versusLabels?: readonly [string, string];\n  /** The level of the title. @default 1 */\n  level?: 1 | 2;\n};\n\n/** The head of a chapter: the number in the margin, the title, the period and the reading time, the standfirst once. */\nexport function ChapterHead({ number, title, period, readingTime, faced, built, versusLabels, level = 1, className, children, ...props }: ChapterHeadProps) {\n  const H = level === 1 ? \"h1\" : \"h2\";\n  const meta = [period, readingTime].filter((m) => m !== undefined && m !== null && m !== \"\");\n  return (\n    <header data-margin=\"\" className={cn(\"kz-chapter-head\", className)} {...props}>\n      <p className=\"kz-chapter-no\">{number}</p>\n      <H className=\"kz-chapter-head-title\">{title}</H>\n      {meta.length > 0 && (\n        <p className=\"kz-chapter-meta\">\n          {meta.map((m, i) => (\n            <span key={i}>\n              {i > 0 && <span aria-hidden> · </span>}\n              {m}\n            </span>\n          ))}\n        </p>\n      )}\n      {faced && built && (\n        <p className=\"kz-chapter-standfirst\">\n          {versusLabels && <span className=\"kz-sr-only\">{versusLabels[0]}, </span>}\n          {faced}\n          <span className=\"kz-chapter-arrow\" aria-hidden>\n            {\" → \"}\n          </span>\n          {versusLabels && <span className=\"kz-sr-only\">; {versusLabels[1]}, </span>}\n          {built}\n        </p>\n      )}\n      {children}\n    </header>\n  );\n}\n\nexport interface ChapterLink {\n  /** Its number, in the margin: `02`. */\n  number?: React.ReactNode;\n  /** Its title, the link. */\n  title: React.ReactNode;\n  /** Where it leads. */\n  href: string;\n}\n\nexport type ChapterFootProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The chapter before this one (none on the first). */\n  previous?: ChapterLink;\n  /** The chapter after this one (none on the latest). */\n  next?: ChapterLink;\n  /** The line back to the story: `{ href: \"/\", label: \"Back to the story\" }`. */\n  back?: { href: string; label: React.ReactNode };\n  /** The quiet words beside each link. @default { previous: \"Previous\", next: \"Next\" } */\n  labels?: { previous: React.ReactNode; next: React.ReactNode };\n  /** The accessible name of the navigation. @default \"Chapters\" */\n  label?: string;\n  /** The ruling under the links. @default \"lines\" */\n  paper?: ChapterPaper;\n  /** The app's router link (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** The foot of a chapter: the previous and the next on the ruled lines, then one line back to the story. */\nexport function ChapterFoot({\n  previous,\n  next,\n  back,\n  labels = { previous: \"Previous\", next: \"Next\" },\n  label = \"Chapters\",\n  paper = \"lines\",\n  linkAs,\n  className,\n  ...props\n}: ChapterFootProps) {\n  return (\n    <nav aria-label={label} data-paper={paper || undefined} data-margin=\"\" className={cn(\"kz-chapters kz-chapter-foot\", className)} {...props}>\n      <ul role=\"list\">\n        {previous && (\n          <li className=\"kz-chapter-row\" data-dir=\"previous\">\n            <ChapterRow\n              number={previous.number}\n              title={previous.title}\n              href={previous.href}\n              rel=\"prev\"\n              linkAs={linkAs}\n              aside={\n                <>\n                  <span aria-hidden>← </span>\n                  {labels.previous}\n                </>\n              }\n            />\n          </li>\n        )}\n        {next && (\n          <li className=\"kz-chapter-row\" data-dir=\"next\">\n            <ChapterRow\n              number={next.number}\n              title={next.title}\n              href={next.href}\n              rel=\"next\"\n              linkAs={linkAs}\n              aside={\n                <>\n                  {labels.next}\n                  <span aria-hidden> →</span>\n                </>\n              }\n            />\n          </li>\n        )}\n      </ul>\n      {back && (\n        <p className=\"kz-chapter-back\">\n          <BlockLink href={back.href} linkAs={linkAs} className=\"kz-chapter-back-link\">\n            <span aria-hidden>↩ </span>\n            {back.label}\n          </BlockLink>\n        </p>\n      )}\n    </nav>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/choice-grid.js

@@ -22,7 +22,7 @@ function BlockLink({
 }) {
   if (external) return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: rel ?? "noopener noreferrer", ...props });
   const Comp = Link;
-  return /* @__PURE__ */ jsx(Comp, { href, ...props });
+  return /* @__PURE__ */ jsx(Comp, { href, rel, ...props });
 }
 
 // src/router/route-state.tsx