@krizaka/ui 2.9.0 → 3.0.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, Orochia and Yazakia, and the Krizaka motion signature — one easing, one way to enter, reveal, roll, shine
+of Krizaka, Orazaka, Orochia, Yazakia and Yororis, 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)
@@ -172,11 +172,12 @@ light or a product's — is a set of tokens.
 | `@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·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/mascots` | `Mascot` (`bird` falcon·owl·duck·flamingo·pigeon·lovebird·crane, `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 |
-| `@krizaka/ui/data-table` | `DataTable` (`rows`, `columns` with `header`, `cell`, `value`, `sortable`, `align`, `card` title·label·hidden; `caption`, `sort`/`defaultSort` + `onSortChange`, `manualSort`, `selectable` + `selected`, `loading`, `empty`, `error`, `layout` auto·table·cards, `density`, `virtualize`, `footer`) | client |
+| `@krizaka/ui/data-table` | **v2, on TanStack Table v9** (never imported by a product): `DataTable` (`rows`, `columns` with `header`, `cell`, `value`, `sortable`, `filter` text·facet·range + `options`, `groupable` + `aggregate`, `align`, `width`, `card`, `hideable`; `caption`, `sort`, `filters`, `selected` + `selectable`, `groupBy`, `columnVisibility`, `expanded` + `renderDetail` / `getSubRows`, `page` + `pageSize` / `pageSizeOptions`, each controlled or `default*`; `pinning`, `resizing`, `manual` sorting·filtering·pagination + `rowCount` + `onStateChange` (server mode), `virtualized`, `loading`, `empty`, `error`, `layout` auto·table·cards, `density`, `toolbar`, `footer`, `labels`), the toolbar `DataTableFilters` · `DataTableColumnsMenu` · `DataTableExport`, `useDataTable()` (the TanStack instance), `dataTableCsv` | client |
+| `@krizaka/ui/virtual` | On TanStack Virtual v3: `VirtualList` (own region or `scroll="window"`, measured items, `onEndReached`, `ref.scrollToIndex`), `VirtualGrid` (columns that fit the width), `useVirtualizer` / `useWindowVirtualizer` through the facade | client |
 | `@krizaka/ui/filter-bar` | `FilterBar` (`label`, the controls as children, `active` chips, `onClearAll`, `results` announced), `FilterMenu` (checkboxes or radios with counts), `readFilterParams` / `writeFilterParams` (the filters in the address) | client |
 | `@krizaka/ui/combobox` | `Combobox` (ARIA 1.2: `options` or `onSearch(query, signal)` debounced, `multiple` chips + `maxSelected`, `creatable` + `onCreate`, `separators`, `hint`, `error`, `labels`) | client |
 | `@krizaka/ui/tag-input` | `TagInput` (free words as chips: `suggestions`, `normalize`, `validate`, `max`, `separators`, paste split) | client |
@@ -208,7 +209,23 @@ light or a product's — is a set of tokens.
 | `@krizaka/ui/split-view` | `SplitView` (`listTitle`, `listActions`, `list`, `detailHead`, `detail`, `empty`, `showDetail`, `back`) | server |
 | `@krizaka/ui/marketing-layout` | `MarketingLayout` (`header`, `footer`, `skipLabel`) | server |
 | `@krizaka/ui/docs-layout` | `DocsLayout` (`sidebar`, `sidebarLabel`, `toc`) | server |
+| `@krizaka/ui/landing-page` | `LandingPage` — a page template, see [Page templates](#page-templates) | server |
+| `@krizaka/ui/product-page` | `ProductPage` — a page template, see [Page templates](#page-templates) | server |
+| `@krizaka/ui/how-it-works-page` | `HowItWorksPage` — a page template, see [Page templates](#page-templates) | server |
+| `@krizaka/ui/gallery-page` | `GalleryPage` — a page template, see [Page templates](#page-templates) | server |
+| `@krizaka/ui/docs-hub-page` | `DocsHubPage` — a page template, see [Page templates](#page-templates) | server |
+| `@krizaka/ui/docs-article-page` | `DocsArticlePage` — a page template, see [Page templates](#page-templates) | server |
+| `@krizaka/ui/component-page` | `ComponentPage` — a page template, see [Page templates](#page-templates) | server |
+| `@krizaka/ui/catalogue-page` | `CataloguePage` — a page template, see [Page templates](#page-templates) | server |
+| `@krizaka/ui/longform-page` | `LongformPage` — a page template, see [Page templates](#page-templates) | server |
+| `@krizaka/ui/changelog-page` | `ChangelogPage` — a page template, see [Page templates](#page-templates) | server |
+| `@krizaka/ui/contact-page` | `ContactPage` — a page template, see [Page templates](#page-templates) | server |
+| `@krizaka/ui/legal-page` | `LegalPage` — a page template, see [Page templates](#page-templates) | server |
+| `@krizaka/ui/status-page` | `StatusPage` — a page template, see [Page templates](#page-templates) | server |
+| `@krizaka/ui/error-page` | `ErrorPage` — a page template, see [Page templates](#page-templates) | server |
+| `@krizaka/ui/pricing-page` | `PricingPage` — a page template, see [Page templates](#page-templates) | server |
 | `@krizaka/ui/native/video-player` | React Native `VideoPlayer` on expo-video (optional peer) | native |
+| `@krizaka/ui/native/list` | React Native `List` on FlashList v2 and `useInfiniteList` on `useInfiniteQuery` of `@krizaka/query` (optional peers): separators, skeleton rows, empty/error, pull to refresh, the next page near the end | 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 |
@@ -260,7 +277,27 @@ import { LinkCard } from "@krizaka/ui/link-card";
 - **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.
 
-## Layouts and templates
+## Page templates
+
+> Category **templates** of krizaka.com/docs/ui: every page of a Krizaka site has its template.
+
+Fifteen templates, each a **distinct composition** of the blocks — not the same card grid everywhere: `LandingPage`
+(split hero with the product alive, a band of proofs, a bento), `ProductPage` (split hero in the product's brand,
+compact argument cards, decisions, the bird's promise), `HowItWorksPage` (a numbered timeline, the visuals
+alternating), `GalleryPage` (filters, staggered columns of media), `DocsHubPage` (search first, the collections in
+their brand with quick links, quick starts, most read, what is new), `DocsArticlePage` (pages · article · contents,
+pager), `ComponentPage` (preview, install, sections, related), `CataloguePage` (sticky filters beside the results),
+`LongformPage` (chapters with outlined numbers, pull quotes in the margin), `ChangelogPage` (a sticky date beside each
+entry, changes by kind), `ContactPage` (channels beside the form, what happens next), `LegalPage` (summary, sections,
+contents), `StatusPage` (the state in words, each service — or « under construction »), `ErrorPage` (the code drawn,
+the bird, a search, the ways back) and `PricingPage` (plans, comparison, credits, questions).
+
+Words and content are props or slots; `brand` puts a page under `.brand-<id>`; calls to action use the cut button;
+what rises does so with `[data-reveal]` (still under reduced motion); every one reads in one column on a phone, and
+each example has a phone story. The templates import the blocks through the package's own entries, so a block's client
+boundary stays where it is: a template is a Server Component.
+
+## Layouts and screens
 
 > Category **layouts** of krizaka.com/docs/ui, and **templates**: whole screens composed from the platform.
 
@@ -367,7 +404,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`, `YazakiaMark`, `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`, `YororisMark`, `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,
@@ -397,12 +434,13 @@ Testing Library (`src/native/*.test.tsx`); `scripts/native-dist.mjs` checks that
 ## The marks
 
 ```tsx
-import { KrizakaLogo, OrazakaLogo, OrochiaLogo, ProductLogo, YazakiaLogo } from "@krizaka/ui";
+import { KrizakaLogo, OrazakaLogo, OrochiaLogo, ProductLogo, YazakiaLogo, YororisLogo } 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 voices that meet
+<YororisLogo size={32} />                       // Yororis: sand → sage, the hold
 ```
 
 Neutral strokes follow the host's `--kz-*` tokens when they exist (`--kz-border-strong`, `--kz-text-muted`…) and the

package/dist/audio-player.js

@@ -4,7 +4,7 @@ import {
   formatClock,
   playSafely,
   useInView
-} from "./chunk-EUPTXKH7.js";
+} from "./chunk-BRKMQ6JV.js";
 import {
   PauseGlyph,
   PlayGlyph

package/dist/blocks.css

@@ -527,3 +527,250 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   .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; }
   .kz-quote-bird { animation: none !important; }
 }
+
+/* ═══ Page templates (@krizaka/ui/*-page): each one a distinct composition of the blocks ═══ */
+
+/* A split hero: the words on one side, the product live on the other (a demo, a recording, a schema). */
+.kz-tpl-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
+.kz-tpl-split[data-reverse] > :first-child { order: 2; }
+@media (max-width: 900px) { .kz-tpl-split { grid-template-columns: minmax(0, 1fr); } .kz-tpl-split[data-reverse] > :first-child { order: 0; } }
+.kz-tpl-stage {
+  position: relative; min-width: 0; overflow: hidden; border-radius: 20px; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1);
+  box-shadow: 0 40px 80px -48px color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 70%, transparent);
+}
+.kz-tpl-stage-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--kz-border-subtle); background: var(--kz-surface-2);
+  font-family: var(--kz-font-mono); font-size: 11px; color: var(--kz-text-secondary); }
+.kz-tpl-stage-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--kz-border-strong); }
+.kz-tpl-stage-bar span { margin-left: 8px; }
+.kz-tpl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
+
+/* A band of proofs: figures or facts across the frame, divided by hairlines. */
+.kz-tpl-band { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); border-block: 1px solid var(--kz-border-subtle); }
+.kz-tpl-band > div { padding: 20px 18px; border-left: 1px solid var(--kz-border-subtle); }
+.kz-tpl-band > div:first-child { border-left: 0; }
+.kz-tpl-band dt { font-family: var(--kz-font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--kz-text-primary); }
+.kz-tpl-band dd { margin: 4px 0 0; font-size: 13px; color: var(--kz-text-secondary); }
+@media (max-width: 560px) { .kz-tpl-band > div { border-left: 0; border-top: 1px solid var(--kz-border-subtle); } .kz-tpl-band > div:first-child { border-top: 0; } }
+
+/* A bento: features of different weights on a six-column grid (one column on a phone). */
+.kz-tpl-bento { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
+.kz-tpl-bento > li { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius: 18px;
+  background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
+.kz-tpl-bento > li[data-size="lg"] { grid-column: span 4; grid-row: span 2; background: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 7%, var(--kz-surface-1)); }
+.kz-tpl-bento > li[data-size="md"] { grid-column: span 3; }
+.kz-tpl-bento h3 { margin: 0; font-family: var(--kz-font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.012em; color: var(--kz-text-primary); }
+.kz-tpl-bento > li[data-size="lg"] h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
+.kz-tpl-bento p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--kz-text-secondary); }
+.kz-tpl-bento-visual { margin-top: auto; min-width: 0; }
+@media (max-width: 900px) { .kz-tpl-bento > li, .kz-tpl-bento > li[data-size] { grid-column: span 6; grid-row: auto; } }
+
+/* A timeline: numbered steps along a line, the visual alternating sides on a wide screen. */
+.kz-tpl-timeline { margin: 0; padding: 0; list-style: none; position: relative; display: grid; gap: clamp(28px, 5vw, 56px); }
+.kz-tpl-timeline::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px;
+  background: linear-gradient(var(--kz-hue, var(--kz-accent)), color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 10%, transparent)); }
+.kz-tpl-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
+.kz-tpl-step-n { grid-column: 1; grid-row: 1; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px;
+  font-family: var(--kz-font-display); font-size: 16px; font-weight: 800; color: var(--kz-text-primary); background: var(--kz-surface-1);
+  border: 2px solid var(--kz-hue, var(--kz-accent)); box-shadow: 0 0 0 6px var(--kz-surface-0); }
+.kz-tpl-step :is(h2, h3) { margin: 6px 0 8px; font-family: var(--kz-font-display); font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 800; color: var(--kz-text-primary); }
+.kz-tpl-step p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--kz-text-secondary); }
+.kz-tpl-step-visual { min-width: 0; }
+.kz-tpl-step:nth-child(even) .kz-tpl-step-visual { order: -1; grid-column: 2; }
+.kz-tpl-step:nth-child(even) .kz-tpl-step-text { grid-column: 3; grid-row: 1; }
+@media (max-width: 900px) {
+  .kz-tpl-step, .kz-tpl-step:nth-child(even) { grid-template-columns: 44px minmax(0, 1fr); }
+  .kz-tpl-step .kz-tpl-step-visual, .kz-tpl-step:nth-child(even) .kz-tpl-step-visual { order: 0; grid-column: 2; }
+  .kz-tpl-step:nth-child(even) .kz-tpl-step-text { grid-column: 2; grid-row: auto; }
+}
+
+/* A gallery: media in columns of different heights, the featured one wide. */
+.kz-tpl-gallery { margin: 0; padding: 0; list-style: none; columns: 3 280px; column-gap: 14px; }
+.kz-tpl-gallery > li { break-inside: avoid; margin-bottom: 14px; }
+.kz-tpl-figure { margin: 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+.kz-tpl-figure-media { overflow: hidden; background: var(--kz-media); }
+.kz-tpl-figure-media > :is(img, video) { display: block; width: 100%; height: auto; }
+.kz-tpl-figure figcaption { display: grid; gap: 4px; padding: 12px 14px; }
+.kz-tpl-figure strong { font-size: 14px; color: var(--kz-text-primary); }
+.kz-tpl-figure span { font-size: 13px; line-height: 1.5; color: var(--kz-text-secondary); }
+.kz-tpl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
+
+/* The documentation hub: the search in the middle, the collections as brand panels with their quick links. */
+.kz-tpl-hub-search { display: grid; justify-items: center; gap: 12px; margin: 24px auto 0; width: min(100%, 40rem); }
+.kz-tpl-hub-search > * { width: 100%; }
+.kz-tpl-hub-hints { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 13px; color: var(--kz-text-secondary); }
+.kz-tpl-collections { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
+.kz-tpl-collection { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px; border-radius: 18px;
+  background: linear-gradient(160deg, color-mix(in srgb, var(--kz-accent) 14%, var(--kz-surface-1)), var(--kz-surface-1) 55%);
+  border: 1px solid color-mix(in srgb, var(--kz-accent) 28%, var(--kz-border-default)); }
+.kz-tpl-collection-head { display: flex; align-items: center; gap: 10px; }
+.kz-tpl-collection-head a { font-family: var(--kz-font-display); font-size: 18px; font-weight: 800; color: var(--kz-text-primary); text-decoration: none; }
+.kz-tpl-collection-head a::after { content: ""; position: absolute; inset: 0; z-index: -1; }
+.kz-tpl-collection-head a:focus-visible { outline: none; }
+.kz-tpl-collection:has(.kz-tpl-collection-head a:focus-visible) { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
+.kz-tpl-collection p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--kz-text-secondary); }
+.kz-tpl-collection ul { position: relative; z-index: 1; margin: auto 0 0; padding: 10px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
+  border-top: 1px solid var(--kz-border-subtle); }
+.kz-tpl-collection ul a { display: inline-flex; min-height: 28px; align-items: center; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
+  text-decoration: none; color: var(--kz-text-primary); background: var(--kz-surface-2); border: 1px solid var(--kz-border-subtle); }
+.kz-tpl-collection ul a:hover { border-color: var(--kz-accent); }
+.kz-tpl-collection ul a:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .kz-tpl-collection { transition: transform 0.3s var(--kz-ease, ease), box-shadow 0.3s var(--kz-ease, ease); }
+  .kz-tpl-collection:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -30px var(--kz-accent); }
+}
+.kz-tpl-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; }
+@media (max-width: 900px) { .kz-tpl-two { grid-template-columns: minmax(0, 1fr); } }
+.kz-tpl-links { margin: 0; padding: 0; list-style: none; display: grid; }
+.kz-tpl-links li { border-top: 1px solid var(--kz-border-subtle); }
+.kz-tpl-links li:first-child { border-top: 0; }
+.kz-tpl-links a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 2px; text-decoration: none; color: var(--kz-text-primary); }
+.kz-tpl-links a:hover { color: var(--kz-accent-text); }
+.kz-tpl-links a:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; border-radius: 6px; }
+.kz-tpl-links strong { font-size: 14.5px; font-weight: 650; }
+.kz-tpl-links small { flex-shrink: 0; font-family: var(--kz-font-mono); font-size: 11.5px; color: var(--kz-text-secondary); }
+
+/* An article: breadcrumb, title, meta, then the reading column; previous / next at the foot. */
+.kz-tpl-crumbs { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--kz-text-secondary); }
+.kz-tpl-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--kz-border-strong); }
+.kz-tpl-crumbs a { color: inherit; text-decoration: none; }
+.kz-tpl-crumbs a:hover { color: var(--kz-text-primary); }
+.kz-tpl-article-title { margin: 0; font-family: var(--kz-font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--kz-text-primary); }
+.kz-tpl-article-lead { margin: 12px 0 0; max-width: 46rem; font-size: 17px; line-height: 1.65; color: var(--kz-text-secondary); }
+.kz-tpl-article-meta { margin-top: 14px; }
+.kz-tpl-prose { max-width: 46rem; font-size: 16px; line-height: 1.75; color: var(--kz-text-secondary); }
+.kz-tpl-prose :is(h2, h3) { color: var(--kz-text-primary); font-family: var(--kz-font-display); scroll-margin-top: var(--kz-anchor-offset, 96px); }
+.kz-tpl-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
+.kz-tpl-pager a { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1);
+  text-decoration: none; color: var(--kz-text-primary); }
+.kz-tpl-pager a:hover { border-color: var(--kz-accent); }
+.kz-tpl-pager a:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
+.kz-tpl-pager a[rel="next"] { grid-column: 2; text-align: right; }
+.kz-tpl-pager small { font-family: var(--kz-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kz-text-secondary); }
+
+/* A catalogue: the filters in a sticky column (folded above the results on a phone). */
+.kz-tpl-catalogue { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 32px; align-items: start; }
+.kz-tpl-catalogue-filters { position: sticky; top: var(--kz-anchor-offset, 96px); }
+.kz-tpl-catalogue-filters > summary { display: none; }
+.kz-tpl-catalogue-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
+.kz-tpl-count { margin: 0; font-family: var(--kz-font-mono); font-size: 12px; color: var(--kz-text-secondary); }
+@media (max-width: 900px) {
+  .kz-tpl-catalogue { grid-template-columns: minmax(0, 1fr); gap: 16px; }
+  .kz-tpl-catalogue-filters { position: static; border-radius: 14px; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+  .kz-tpl-catalogue-filters > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none;
+    font-size: 14px; font-weight: 650; color: var(--kz-text-primary); }
+  .kz-tpl-catalogue-filters > summary::-webkit-details-marker { display: none; }
+  .kz-tpl-catalogue-filters > div { padding: 0 14px 14px; }
+}
+
+/* A long read: chapters with their big numbers, pull quotes in the margin, figures that break out. */
+.kz-tpl-chapters { display: grid; gap: clamp(40px, 7vw, 88px); }
+.kz-tpl-chapter { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 42rem) minmax(0, 1fr); gap: 24px 32px; }
+.kz-tpl-chapter-n { font-family: var(--kz-font-display); font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em;
+  color: transparent; -webkit-text-stroke: 1.5px var(--kz-hue, var(--kz-accent)); }
+.kz-tpl-chapter h2 { margin: 0 0 14px; font-family: var(--kz-font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15;
+  color: var(--kz-text-primary); scroll-margin-top: var(--kz-anchor-offset, 96px); }
+.kz-tpl-chapter-body { font-size: 17px; line-height: 1.8; color: var(--kz-text-secondary); }
+.kz-tpl-chapter-body p { margin: 0 0 1em; }
+.kz-tpl-chapter-aside { align-self: start; padding-top: 8px; }
+.kz-tpl-pull { margin: 0; padding-left: 16px; border-left: 3px solid var(--kz-hue, var(--kz-accent)); font-family: var(--kz-font-display); font-size: 19px; font-weight: 700;
+  line-height: 1.4; color: var(--kz-text-primary); }
+.kz-tpl-chapter-figure { grid-column: 2 / -1; margin: 8px 0 0; }
+@media (max-width: 1023px) {
+  .kz-tpl-chapter { grid-template-columns: minmax(0, 1fr); gap: 12px; }
+  .kz-tpl-chapter-figure { grid-column: auto; }
+}
+
+/* A changelog: the date sticks beside its entries; each entry a version, a title, its kinds of change. */
+.kz-tpl-log { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
+.kz-tpl-log-entry { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--kz-border-subtle); }
+.kz-tpl-log-entry:first-child { border-top: 0; }
+.kz-tpl-log-when { position: sticky; top: var(--kz-anchor-offset, 96px); align-self: start; display: grid; gap: 6px; }
+.kz-tpl-log-when time { font-family: var(--kz-font-mono); font-size: 12.5px; color: var(--kz-text-secondary); }
+.kz-tpl-log-entry :is(h2, h3) { margin: 0 0 10px; font-family: var(--kz-font-display); font-size: 19px; font-weight: 800; color: var(--kz-text-primary); }
+.kz-tpl-log-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
+.kz-tpl-log-items li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--kz-text-secondary); }
+.kz-tpl-log-kind { font-family: var(--kz-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 3px; }
+.kz-tpl-log-kind[data-kind="added"] { color: var(--kz-success-text); }
+.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); }
+@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; }
+  .kz-tpl-log-items li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
+}
+
+/* Contact: the ways to reach us beside the form; what happens next under it. */
+.kz-tpl-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
+@media (max-width: 900px) { .kz-tpl-contact { grid-template-columns: minmax(0, 1fr); } }
+.kz-tpl-form { padding: clamp(18px, 3vw, 28px); border-radius: 20px; background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
+.kz-tpl-next { margin: 0; padding: 0; list-style: none; counter-reset: next; display: grid; gap: 12px; }
+.kz-tpl-next li { counter-increment: next; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.6; color: var(--kz-text-secondary); }
+.kz-tpl-next li::before { content: counter(next); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
+  font-family: var(--kz-font-mono); font-size: 12px; font-weight: 700; color: var(--kz-accent-text); background: var(--kz-accent-soft); }
+.kz-tpl-next strong { display: block; color: var(--kz-text-primary); }
+
+/* Status: one line per service, its state in words and a dot; an incident log under it. */
+.kz-tpl-state { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--kz-border-default);
+  background: var(--kz-surface-1); }
+.kz-tpl-state[data-state="operational"] { border-color: color-mix(in srgb, var(--kz-success) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-success) 7%, var(--kz-surface-1)); }
+.kz-tpl-state[data-state="degraded"] { border-color: color-mix(in srgb, var(--kz-warning) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-warning) 7%, var(--kz-surface-1)); }
+.kz-tpl-state[data-state="outage"] { border-color: color-mix(in srgb, var(--kz-danger) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-danger) 7%, var(--kz-surface-1)); }
+.kz-tpl-state strong { font-family: var(--kz-font-display); font-size: 19px; font-weight: 800; color: var(--kz-text-primary); }
+.kz-tpl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--kz-text-secondary); }
+[data-state="operational"] > .kz-tpl-dot, .kz-tpl-dot[data-state="operational"] { background: var(--kz-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kz-success) 22%, transparent); }
+[data-state="degraded"] > .kz-tpl-dot, .kz-tpl-dot[data-state="degraded"] { background: var(--kz-warning); }
+[data-state="outage"] > .kz-tpl-dot, .kz-tpl-dot[data-state="outage"] { background: var(--kz-danger); }
+[data-state="building"] > .kz-tpl-dot, .kz-tpl-dot[data-state="building"] { background: var(--kz-info); }
+.kz-tpl-services { margin: 16px 0 0; padding: 0; list-style: none; border-radius: 16px; border: 1px solid var(--kz-border-default); overflow: hidden; }
+.kz-tpl-services li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--kz-border-subtle);
+  font-size: 14.5px; color: var(--kz-text-primary); background: var(--kz-surface-1); }
+.kz-tpl-services li:first-child { border-top: 0; }
+.kz-tpl-services small { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--kz-text-secondary); }
+
+/* An error: the code, huge and drawn in outline, the bird beside it, the ways out under it. */
+.kz-tpl-error { display: grid; justify-items: center; gap: 16px; padding-block: calc(var(--kz-hero-top, 120px) - 16px) clamp(48px, 8vw, 96px); text-align: center; }
+.kz-tpl-error .kz-tpl-error-code { margin: 0; max-width: none; display: flex; align-items: center; gap: 8px; font-family: var(--kz-font-display); font-size: clamp(5rem, 18vw, 10rem); font-weight: 800;
+  line-height: 0.9; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px var(--kz-hue, var(--kz-accent)); }
+.kz-tpl-error h1 { margin: 0; font-family: var(--kz-font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -0.025em; color: var(--kz-text-primary); }
+.kz-tpl-error p:not(.kz-tpl-error-code) { margin: 0; max-width: 34rem; font-size: 16px; line-height: 1.65; color: var(--kz-text-secondary); }
+.kz-tpl-error-search { width: min(100%, 28rem); }
+
+/* Pricing: plans side by side, the featured one lifted; a comparison under them. */
+.kz-tpl-plans { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; align-items: stretch; }
+.kz-tpl-plan { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 24px; border-radius: 20px; background: var(--kz-surface-1);
+  border: 1px solid var(--kz-border-default); }
+.kz-tpl-plan[data-featured] { border-color: var(--kz-accent); background: linear-gradient(170deg, color-mix(in srgb, var(--kz-accent) 12%, var(--kz-surface-1)), var(--kz-surface-1) 60%);
+  box-shadow: 0 30px 60px -36px var(--kz-accent); }
+.kz-tpl-plan :is(h2, h3) { margin: 0; font-family: var(--kz-font-display); font-size: 18px; font-weight: 800; color: var(--kz-text-primary); }
+.kz-tpl-price { margin: 0; font-family: var(--kz-font-display); font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--kz-text-primary); }
+.kz-tpl-price small { display: block; margin-top: 6px; font-family: var(--kz-font-text, inherit); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--kz-text-secondary); }
+.kz-tpl-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--kz-text-secondary); }
+.kz-tpl-plan ul li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
+.kz-tpl-plan ul svg { margin-top: 3px; color: var(--kz-success-text); }
+.kz-tpl-plan > :last-child { margin-top: auto; }
+.kz-tpl-compare { width: 100%; border-collapse: collapse; font-size: 14px; }
+.kz-tpl-compare th, .kz-tpl-compare td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--kz-border-subtle); color: var(--kz-text-secondary); }
+.kz-tpl-compare thead th { font-family: var(--kz-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
+.kz-tpl-compare tbody th { color: var(--kz-text-primary); font-weight: 600; }
+.kz-tpl-scroll { overflow-x: auto; border-radius: 16px; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+.kz-tpl-faq { display: grid; gap: 8px; }
+.kz-tpl-faq details { border-radius: 14px; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+.kz-tpl-faq summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 650; color: var(--kz-text-primary); }
+.kz-tpl-faq summary::-webkit-details-marker { display: none; }
+.kz-tpl-faq summary:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; border-radius: 14px; }
+.kz-tpl-faq details > div { padding: 0 16px 16px; font-size: 14.5px; line-height: 1.65; color: var(--kz-text-secondary); }
+
+@media (prefers-reduced-motion: reduce) { .kz-tpl-collection { transition: none !important; transform: none !important; } }
+.kz-tpl-promise { margin-top: 32px; }
+.kz-hero[data-align="center"] .kz-hero-extra { justify-content: center; }
+.kz-tpl-stack { display: grid; gap: 14px; min-width: 0; align-content: start; }
+.kz-tpl-h2 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); max-width: none; }
+.kz-tpl-flush .kz-frame { --kz-gutter: 0px; }
+.kz-tpl-catalogue-frame { padding-block: 24px clamp(48px, 7vw, 88px); }
+.kz-tpl-longform { padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 96px); }
+.kz-tpl-summary { display: block; font-size: 15px; line-height: 1.65; color: var(--kz-text-primary); }
+.kz-tpl-caption { padding: 12px 14px 4px; text-align: left; caption-side: top; }
+.kz-tpl-plan .kz-tpl-collection-head { justify-content: space-between; }
+.kz-tpl-scroll:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
+.kz-tpl-prose > p, .kz-tpl-prose > ul, .kz-tpl-prose > ol { margin: 0 0 1em; }

package/dist/catalogue-page.d.ts

@@ -0,0 +1,34 @@
+import { LinkComponent } from '@krizaka/ui/page-hero';
+import * as React from 'react';
+
+type CataloguePageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The way back. */
+    back?: {
+        href: string;
+        label: string;
+    };
+    /** A mono line above the title. */
+    eyebrow?: React.ReactNode;
+    /** The page's `h1`. */
+    title: React.ReactNode;
+    /** One sentence under it. */
+    lead?: React.ReactNode;
+    /** In the hero: a search field. */
+    search?: React.ReactNode;
+    /** The filters (groups of ChipLinks, a FilterBar): sticky on a desktop. */
+    filters: React.ReactNode;
+    /** On a phone, the words that open the filters (`Filters`). */
+    filtersLabel: string;
+    /** What matches, in words (`24 components`). */
+    count?: React.ReactNode;
+    /** On the right of the count: the sort, a view switch. */
+    toolbar?: React.ReactNode;
+    /** The results: a CardGrid, a list, an empty state. */
+    children: React.ReactNode;
+    /** The app's link component (Next's `Link`). */
+    linkAs?: LinkComponent;
+};
+/** A catalogue: hero, sticky filters beside the results (folded on a phone), the count, the results. */
+declare function CataloguePage({ back, eyebrow, title, lead, search, filters, filtersLabel, count, toolbar, linkAs, children, ...props }: CataloguePageProps): React.JSX.Element;
+
+export { CataloguePage, type CataloguePageProps };

package/dist/catalogue-page.js

@@ -0,0 +1,26 @@
+// src/catalogue-page/catalogue-page.tsx
+import { Page } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CataloguePage({ back, eyebrow, title, lead, search, filters, filtersLabel, count, toolbar, linkAs, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { ...props, children: [
+    /* @__PURE__ */ jsx(PageHero, { back, linkAs, eyebrow, title, lead, backdrop: "plain", children: search }),
+    /* @__PURE__ */ jsx(Page, { className: "kz-tpl-catalogue-frame", children: /* @__PURE__ */ jsxs("div", { className: "kz-tpl-catalogue", children: [
+      /* @__PURE__ */ jsxs("details", { className: "kz-tpl-catalogue-filters", open: true, children: [
+        /* @__PURE__ */ jsx("summary", { children: filtersLabel }),
+        /* @__PURE__ */ jsx("div", { children: filters })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        (count || toolbar) && /* @__PURE__ */ jsxs("div", { className: "kz-tpl-catalogue-head", children: [
+          count && /* @__PURE__ */ jsx("p", { className: "kz-tpl-count", "aria-live": "polite", children: count }),
+          toolbar
+        ] }),
+        children
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  CataloguePage
+};
+//# sourceMappingURL=catalogue-page.js.map

package/dist/catalogue-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/catalogue-page/catalogue-page.tsx"],"sourcesContent":["// Server-safe. A catalogue or an index (blocks.css `.kz-tpl-catalogue`): the hero, then the filters in a sticky column\n// beside the results — folded into a disclosure above them on a phone — the count of what matches and the sort, and\n// the results (a CardGrid of LinkCards, a list). The filters live in the address: a link per choice, no client state.\nimport { Page } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nexport type CataloguePageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The way back. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** One sentence under it. */\n  lead?: React.ReactNode;\n  /** In the hero: a search field. */\n  search?: React.ReactNode;\n  /** The filters (groups of ChipLinks, a FilterBar): sticky on a desktop. */\n  filters: React.ReactNode;\n  /** On a phone, the words that open the filters (`Filters`). */\n  filtersLabel: string;\n  /** What matches, in words (`24 components`). */\n  count?: React.ReactNode;\n  /** On the right of the count: the sort, a view switch. */\n  toolbar?: React.ReactNode;\n  /** The results: a CardGrid, a list, an empty state. */\n  children: React.ReactNode;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A catalogue: hero, sticky filters beside the results (folded on a phone), the count, the results. */\nexport function CataloguePage({ back, eyebrow, title, lead, search, filters, filtersLabel, count, toolbar, linkAs, children, ...props }: CataloguePageProps) {\n  return (\n    <div {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} backdrop=\"plain\">\n        {search}\n      </PageHero>\n      <Page className=\"kz-tpl-catalogue-frame\">\n        <div className=\"kz-tpl-catalogue\">\n          <details className=\"kz-tpl-catalogue-filters\" open>\n            <summary>{filtersLabel}</summary>\n            <div>{filters}</div>\n          </details>\n          <div className=\"min-w-0\">\n            {(count || toolbar) && (\n              <div className=\"kz-tpl-catalogue-head\">\n                {count && (\n                  <p className=\"kz-tpl-count\" aria-live=\"polite\">\n                    {count}\n                  </p>\n                )}\n                {toolbar}\n              </div>\n            )}\n            {children}\n          </div>\n        </div>\n      </Page>\n    </div>\n  );\n}\n"],"mappings":";AAGA,SAAS,YAAY;AAErB,SAAS,gBAAgB;AAgCnB,cAKI,YALJ;AAHC,SAAS,cAAc,EAAE,MAAM,SAAS,OAAO,MAAM,QAAQ,SAAS,cAAc,OAAO,SAAS,QAAQ,UAAU,GAAG,MAAM,GAAuB;AAC3J,SACE,qBAAC,SAAK,GAAG,OACP;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,UAAS,SACxF,kBACH;AAAA,IACA,oBAAC,QAAK,WAAU,0BACd,+BAAC,SAAI,WAAU,oBACb;AAAA,2BAAC,aAAQ,WAAU,4BAA2B,MAAI,MAChD;AAAA,4BAAC,aAAS,wBAAa;AAAA,QACvB,oBAAC,SAAK,mBAAQ;AAAA,SAChB;AAAA,MACA,qBAAC,SAAI,WAAU,WACX;AAAA,kBAAS,YACT,qBAAC,SAAI,WAAU,yBACZ;AAAA,mBACC,oBAAC,OAAE,WAAU,gBAAe,aAAU,UACnC,iBACH;AAAA,UAED;AAAA,WACH;AAAA,QAED;AAAA,SACH;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/changelog-page.d.ts

@@ -0,0 +1,50 @@
+import { LinkComponent } from '@krizaka/ui/page-hero';
+import * as React from 'react';
+
+type ChangeKind = "added" | "changed" | "fixed" | "removed";
+interface ChangelogEntry {
+    /** A stable key (the entry's anchor). */
+    id: string;
+    /** Its date, ISO (`2026-10-11`): shown as `dateLabel`. */
+    date: string;
+    /** The date as the reader reads it (`11 October 2026`). */
+    dateLabel: React.ReactNode;
+    /** The version or the release (`@krizaka/ui 2.6.0`): a fact beside the date. */
+    version?: React.ReactNode;
+    /** The entry's title. */
+    title: React.ReactNode;
+    /** The changes, each with its kind. */
+    changes: readonly {
+        kind: ChangeKind;
+        text: React.ReactNode;
+    }[];
+    /** Under the changes: why (a DecisionList, a quote), a link to the pull request. */
+    children?: React.ReactNode;
+}
+type ChangelogPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The way back. */
+    back?: {
+        href: string;
+        label: string;
+    };
+    /** A mono line above the title. */
+    eyebrow?: React.ReactNode;
+    /** The page's `h1`. */
+    title: React.ReactNode;
+    /** One sentence under it. */
+    lead?: React.ReactNode;
+    /** In the hero: a subscribe action, the feed. */
+    actions?: React.ReactNode;
+    /** The words of the kinds: `{ added: "Added", … }`. */
+    kindLabels: Record<ChangeKind, string>;
+    /** The log's accessible name (`Changes`). */
+    logLabel: string;
+    /** The entries, newest first. */
+    entries: readonly ChangelogEntry[];
+    /** The app's link component (Next's `Link`). */
+    linkAs?: LinkComponent;
+};
+/** A changelog: entries with a sticky date and version, changes by kind, the reasons under them. */
+declare function ChangelogPage({ back, eyebrow, title, lead, actions, kindLabels, logLabel, entries, linkAs, ...props }: ChangelogPageProps): React.JSX.Element;
+
+export { type ChangeKind, type ChangelogEntry, ChangelogPage, type ChangelogPageProps };

package/dist/changelog-page.js

@@ -0,0 +1,27 @@
+// src/changelog-page/changelog-page.tsx
+import { Page } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChangelogPage({ back, eyebrow, title, lead, actions, kindLabels, logLabel, entries, linkAs, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { ...props, children: [
+    /* @__PURE__ */ jsx(PageHero, { back, linkAs, eyebrow, title, lead, backdrop: "plain", children: actions }),
+    /* @__PURE__ */ jsx(Page, { className: "kz-tpl-longform", children: /* @__PURE__ */ jsx("ol", { className: "kz-tpl-log", "aria-label": logLabel, children: entries.map((e) => /* @__PURE__ */ jsxs("li", { id: e.id, className: "kz-tpl-log-entry", children: [
+      /* @__PURE__ */ jsxs("div", { className: "kz-tpl-log-when", children: [
+        /* @__PURE__ */ jsx("time", { dateTime: e.date, children: e.dateLabel }),
+        e.version && /* @__PURE__ */ jsx("span", { className: "kz-fact", children: e.version })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { children: e.title }),
+        /* @__PURE__ */ jsx("ul", { className: "kz-tpl-log-items", children: e.changes.map((c, i) => /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsx("span", { className: "kz-tpl-log-kind", "data-kind": c.kind, children: kindLabels[c.kind] }),
+          /* @__PURE__ */ jsx("span", { children: c.text })
+        ] }, i)) }),
+        e.children
+      ] })
+    ] }, e.id)) }) })
+  ] });
+}
+export {
+  ChangelogPage
+};
+//# sourceMappingURL=changelog-page.js.map

package/dist/changelog-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/changelog-page/changelog-page.tsx"],"sourcesContent":["// Server-safe. What changed and why (blocks.css `.kz-tpl-log`): the hero, then the entries — the date and version\n// sticking beside them while they scroll, a title, the changes by kind (added · changed · fixed · removed, in words and\n// colour) — and, when a change was a decision, its reasons (a DecisionList) under it.\nimport { Page } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nexport type ChangeKind = \"added\" | \"changed\" | \"fixed\" | \"removed\";\n\nexport interface ChangelogEntry {\n  /** A stable key (the entry's anchor). */\n  id: string;\n  /** Its date, ISO (`2026-10-11`): shown as `dateLabel`. */\n  date: string;\n  /** The date as the reader reads it (`11 October 2026`). */\n  dateLabel: React.ReactNode;\n  /** The version or the release (`@krizaka/ui 2.6.0`): a fact beside the date. */\n  version?: React.ReactNode;\n  /** The entry's title. */\n  title: React.ReactNode;\n  /** The changes, each with its kind. */\n  changes: readonly { kind: ChangeKind; text: React.ReactNode }[];\n  /** Under the changes: why (a DecisionList, a quote), a link to the pull request. */\n  children?: React.ReactNode;\n}\n\nexport type ChangelogPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The way back. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** One sentence under it. */\n  lead?: React.ReactNode;\n  /** In the hero: a subscribe action, the feed. */\n  actions?: React.ReactNode;\n  /** The words of the kinds: `{ added: \"Added\", … }`. */\n  kindLabels: Record<ChangeKind, string>;\n  /** The log's accessible name (`Changes`). */\n  logLabel: string;\n  /** The entries, newest first. */\n  entries: readonly ChangelogEntry[];\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A changelog: entries with a sticky date and version, changes by kind, the reasons under them. */\nexport function ChangelogPage({ back, eyebrow, title, lead, actions, kindLabels, logLabel, entries, linkAs, ...props }: ChangelogPageProps) {\n  return (\n    <div {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} backdrop=\"plain\">\n        {actions}\n      </PageHero>\n      <Page className=\"kz-tpl-longform\">\n        <ol className=\"kz-tpl-log\" aria-label={logLabel}>\n          {entries.map((e) => (\n            <li key={e.id} id={e.id} className=\"kz-tpl-log-entry\">\n              <div className=\"kz-tpl-log-when\">\n                <time dateTime={e.date}>{e.dateLabel}</time>\n                {e.version && <span className=\"kz-fact\">{e.version}</span>}\n              </div>\n              <div>\n                <h2>{e.title}</h2>\n                <ul className=\"kz-tpl-log-items\">\n                  {e.changes.map((c, i) => (\n                    <li key={i}>\n                      <span className=\"kz-tpl-log-kind\" data-kind={c.kind}>\n                        {kindLabels[c.kind]}\n                      </span>\n                      <span>{c.text}</span>\n                    </li>\n                  ))}\n                </ul>\n                {e.children}\n              </div>\n            </li>\n          ))}\n        </ol>\n      </Page>\n    </div>\n  );\n}\n"],"mappings":";AAGA,SAAS,YAAY;AAErB,SAAS,gBAAgB;AA+CnB,cAOQ,YAPR;AAHC,SAAS,cAAc,EAAE,MAAM,SAAS,OAAO,MAAM,SAAS,YAAY,UAAU,SAAS,QAAQ,GAAG,MAAM,GAAuB;AAC1I,SACE,qBAAC,SAAK,GAAG,OACP;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,UAAS,SACxF,mBACH;AAAA,IACA,oBAAC,QAAK,WAAU,mBACd,8BAAC,QAAG,WAAU,cAAa,cAAY,UACpC,kBAAQ,IAAI,CAAC,MACZ,qBAAC,QAAc,IAAI,EAAE,IAAI,WAAU,oBACjC;AAAA,2BAAC,SAAI,WAAU,mBACb;AAAA,4BAAC,UAAK,UAAU,EAAE,MAAO,YAAE,WAAU;AAAA,QACpC,EAAE,WAAW,oBAAC,UAAK,WAAU,WAAW,YAAE,SAAQ;AAAA,SACrD;AAAA,MACA,qBAAC,SACC;AAAA,4BAAC,QAAI,YAAE,OAAM;AAAA,QACb,oBAAC,QAAG,WAAU,oBACX,YAAE,QAAQ,IAAI,CAAC,GAAG,MACjB,qBAAC,QACC;AAAA,8BAAC,UAAK,WAAU,mBAAkB,aAAW,EAAE,MAC5C,qBAAW,EAAE,IAAI,GACpB;AAAA,UACA,oBAAC,UAAM,YAAE,MAAK;AAAA,aAJP,CAKT,CACD,GACH;AAAA,QACC,EAAE;AAAA,SACL;AAAA,SAlBO,EAAE,EAmBX,CACD,GACH,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/{chunk-EUPTXKH7.js → chunk-BRKMQ6JV.js}

@@ -87,9 +87,10 @@ export {
   formatClock,
   clamp,
   usePrefersReducedMotion,
+  useLatest,
   useInView,
   useDebouncedCallback,
   useControllable,
   playSafely
 };
-//# sourceMappingURL=chunk-EUPTXKH7.js.map
+//# sourceMappingURL=chunk-BRKMQ6JV.js.map