@krizaka/ui 2.9.0 → 3.0.0

package/dist/docs-hub-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs-hub-page/docs-hub-page.tsx"],"sourcesContent":["// Server-safe. The entry of a documentation (blocks.css `.kz-tpl-hub-*`, `.kz-tpl-collections`): the search in the\n// middle of the hero, the collections each in its product's brand with its quick links, the quick starts beside the\n// most read pages, what is new from the registries, and the owl's promise. One column on a phone, the search first.\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport { Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport * as React from \"react\";\n\nexport interface DocsCollection {\n  /** A stable key. */\n  id: string;\n  /** The product's brand (`orazaka`…): the panel wears `.brand-<id>`. */\n  brand?: string;\n  /** The product's mark. */\n  mark?: React.ReactNode;\n  /** The collection's name: a link to its home. */\n  title: string;\n  /** Where it starts. */\n  href: string;\n  /** What it covers, in one sentence. */\n  description?: React.ReactNode;\n  /** Its most useful pages (three or four). */\n  links?: readonly { href: string; label: string }[];\n}\n\nexport interface DocsHubLink {\n  /** Where it leads. */\n  href: string;\n  /** The page's title. */\n  title: React.ReactNode;\n  /** On the right, in mono: a collection, a version, a date. */\n  meta?: React.ReactNode;\n}\n\nexport type DocsHubPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\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  /** The search, front and centre (a SearchField, a button that opens the command palette). */\n  search?: React.ReactNode;\n  /** Under the search: what people look for (a few links or keys). */\n  searchHints?: React.ReactNode;\n  /** The collections' heading. */\n  collectionsTitle: React.ReactNode;\n  /** The collections, each in its brand. */\n  collections: readonly DocsCollection[];\n  /** The quick starts: a title and their samples (CodeBlocks, CodeTabs). */\n  quickstarts?: { title: React.ReactNode; children: React.ReactNode };\n  /** The most read pages. */\n  popular?: { title: React.ReactNode; items: readonly DocsHubLink[] };\n  /** What is new (releases from the registries, published pages). */\n  whatsNew?: { title: React.ReactNode; items: readonly DocsHubLink[] };\n  /** The owl's promise at the foot: what this documentation guarantees. */\n  promise?: { label: React.ReactNode; text: React.ReactNode };\n  /** The app's link component (Next's `Link`) for internal addresses. */\n  linkAs?: LinkComponent;\n};\n\nfunction List({ items, linkAs: Link = \"a\" }: { items: readonly DocsHubLink[]; linkAs?: LinkComponent }) {\n  const L = Link as React.ElementType;\n  return (\n    <ul className=\"kz-tpl-links\">\n      {items.map((item, i) => (\n        <li key={`${i}:${item.href}`}>\n          <L href={item.href}>\n            <strong>{item.title}</strong>\n            {item.meta && <small>{item.meta}</small>}\n          </L>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n/** A documentation hub: search first, the collections in their brand, quick starts, popular and new pages. */\nexport function DocsHubPage({ eyebrow, title, lead, search, searchHints, collectionsTitle, collections, quickstarts, popular, whatsNew, promise, linkAs, ...props }: DocsHubPageProps) {\n  const L = (linkAs ?? \"a\") as React.ElementType;\n  return (\n    <div {...props}>\n      <PageHero eyebrow={eyebrow} title={title} lead={lead} align=\"center\" backdrop=\"grid\">\n        {(search || searchHints) && (\n          <div className=\"kz-tpl-hub-search\">\n            {search}\n            {searchHints && <div className=\"kz-tpl-hub-hints\">{searchHints}</div>}\n          </div>\n        )}\n      </PageHero>\n      <Section id=\"collections\" title={collectionsTitle} headingSize=\"sm\" spacing=\"sm\">\n        <ul className=\"kz-tpl-collections\">\n          {collections.map((c) => (\n            <li key={c.id} className={c.brand ? \"brand-\" + c.brand : undefined}>\n              <div className=\"kz-tpl-collection\">\n                <div className=\"kz-tpl-collection-head\">\n                  {c.mark && <span aria-hidden>{c.mark}</span>}\n                  <L href={c.href}>{c.title}</L>\n                </div>\n                {c.description && <p>{c.description}</p>}\n                {c.links && c.links.length > 0 && (\n                  <ul aria-label={c.title}>\n                    {c.links.map((l) => (\n                      <li key={l.href}>\n                        <L href={l.href}>{l.label}</L>\n                      </li>\n                    ))}\n                  </ul>\n                )}\n              </div>\n            </li>\n          ))}\n        </ul>\n      </Section>\n      {(quickstarts || popular) && (\n        <Section spacing=\"sm\" divider aria-label={typeof quickstarts?.title === \"string\" ? quickstarts.title : undefined}>\n          <div className=\"kz-tpl-two\">\n            {quickstarts && (\n              <div className=\"kz-tpl-stack\">\n                <h2 className=\"kz-heading-title kz-tpl-h2\">{quickstarts.title}</h2>\n                {quickstarts.children}\n              </div>\n            )}\n            {popular && (\n              <div className=\"kz-tpl-stack\">\n                <h2 className=\"kz-heading-title kz-tpl-h2\">{popular.title}</h2>\n                <List items={popular.items} linkAs={linkAs} />\n              </div>\n            )}\n          </div>\n        </Section>\n      )}\n      {whatsNew && (\n        <Section id=\"whats-new\" title={whatsNew.title} headingSize=\"sm\" spacing=\"sm\" divider>\n          <List items={whatsNew.items} linkAs={linkAs} />\n        </Section>\n      )}\n      {promise && (\n        <Section spacing=\"sm\" aria-label={typeof promise.label === \"string\" ? promise.label : undefined}>\n          <MascotQuote variant=\"callout\" bird=\"owl\" mood=\"welcome\" label={promise.label}>\n            {promise.text}\n          </MascotQuote>\n        </Section>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAGA,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAExB,SAAS,gBAAgB;AA8Df,SACE,KADF;AANV,SAAS,KAAK,EAAE,OAAO,QAAQ,OAAO,IAAI,GAA8D;AACtG,QAAM,IAAI;AACV,SACE,oBAAC,QAAG,WAAU,gBACX,gBAAM,IAAI,CAAC,MAAM,MAChB,oBAAC,QACC,+BAAC,KAAE,MAAM,KAAK,MACZ;AAAA,wBAAC,YAAQ,eAAK,OAAM;AAAA,IACnB,KAAK,QAAQ,oBAAC,WAAO,eAAK,MAAK;AAAA,KAClC,KAJO,GAAG,CAAC,IAAI,KAAK,IAAI,EAK1B,CACD,GACH;AAEJ;AAGO,SAAS,YAAY,EAAE,SAAS,OAAO,MAAM,QAAQ,aAAa,kBAAkB,aAAa,aAAa,SAAS,UAAU,SAAS,QAAQ,GAAG,MAAM,GAAqB;AACrL,QAAM,IAAK,UAAU;AACrB,SACE,qBAAC,SAAK,GAAG,OACP;AAAA,wBAAC,YAAS,SAAkB,OAAc,MAAY,OAAM,UAAS,UAAS,QAC1E,qBAAU,gBACV,qBAAC,SAAI,WAAU,qBACZ;AAAA;AAAA,MACA,eAAe,oBAAC,SAAI,WAAU,oBAAoB,uBAAY;AAAA,OACjE,GAEJ;AAAA,IACA,oBAAC,WAAQ,IAAG,eAAc,OAAO,kBAAkB,aAAY,MAAK,SAAQ,MAC1E,8BAAC,QAAG,WAAU,sBACX,sBAAY,IAAI,CAAC,MAChB,oBAAC,QAAc,WAAW,EAAE,QAAQ,WAAW,EAAE,QAAQ,QACvD,+BAAC,SAAI,WAAU,qBACb;AAAA,2BAAC,SAAI,WAAU,0BACZ;AAAA,UAAE,QAAQ,oBAAC,UAAK,eAAW,MAAE,YAAE,MAAK;AAAA,QACrC,oBAAC,KAAE,MAAM,EAAE,MAAO,YAAE,OAAM;AAAA,SAC5B;AAAA,MACC,EAAE,eAAe,oBAAC,OAAG,YAAE,aAAY;AAAA,MACnC,EAAE,SAAS,EAAE,MAAM,SAAS,KAC3B,oBAAC,QAAG,cAAY,EAAE,OACf,YAAE,MAAM,IAAI,CAAC,MACZ,oBAAC,QACC,8BAAC,KAAE,MAAM,EAAE,MAAO,YAAE,OAAM,KADnB,EAAE,IAEX,CACD,GACH;AAAA,OAEJ,KAhBO,EAAE,EAiBX,CACD,GACH,GACF;AAAA,KACE,eAAe,YACf,oBAAC,WAAQ,SAAQ,MAAK,SAAO,MAAC,cAAY,OAAO,aAAa,UAAU,WAAW,YAAY,QAAQ,QACrG,+BAAC,SAAI,WAAU,cACZ;AAAA,qBACC,qBAAC,SAAI,WAAU,gBACb;AAAA,4BAAC,QAAG,WAAU,8BAA8B,sBAAY,OAAM;AAAA,QAC7D,YAAY;AAAA,SACf;AAAA,MAED,WACC,qBAAC,SAAI,WAAU,gBACb;AAAA,4BAAC,QAAG,WAAU,8BAA8B,kBAAQ,OAAM;AAAA,QAC1D,oBAAC,QAAK,OAAO,QAAQ,OAAO,QAAgB;AAAA,SAC9C;AAAA,OAEJ,GACF;AAAA,IAED,YACC,oBAAC,WAAQ,IAAG,aAAY,OAAO,SAAS,OAAO,aAAY,MAAK,SAAQ,MAAK,SAAO,MAClF,8BAAC,QAAK,OAAO,SAAS,OAAO,QAAgB,GAC/C;AAAA,IAED,WACC,oBAAC,WAAQ,SAAQ,MAAK,cAAY,OAAO,QAAQ,UAAU,WAAW,QAAQ,QAAQ,QACpF,8BAAC,eAAY,SAAQ,WAAU,MAAK,OAAM,MAAK,WAAU,OAAO,QAAQ,OACrE,kBAAQ,MACX,GACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/error-page.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+type ErrorPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The code (`404`, `500`): drawn, not read — the title says it in words. */
+    code: string;
+    /** The bird beside the code (a Mascot in its `empty` or `error` mood). */
+    mascot?: React.ReactNode;
+    /** The page's `h1` (`This page took another road`). */
+    title: React.ReactNode;
+    /** What happened and what to do, in one or two sentences. */
+    text?: React.ReactNode;
+    /** A search, to find what was meant. */
+    search?: React.ReactNode;
+    /** The ways back (an ActionBar: home, the docs, contact). */
+    actions?: React.ReactNode;
+    /** Under the actions: the most visited pages. */
+    children?: React.ReactNode;
+};
+/** An error page: the code drawn, the bird, a sentence, a search and the ways back. */
+declare function ErrorPage({ code, mascot, title, text, search, actions, className, children, ...props }: ErrorPageProps): React.JSX.Element;
+
+export { ErrorPage, type ErrorPageProps };

package/dist/error-page.js

@@ -0,0 +1,23 @@
+import {
+  cn
+} from "./chunk-KNBYZGSQ.js";
+
+// src/error-page/error-page.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ErrorPage({ code, mascot, title, text, search, actions, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("kz-frame kz-tpl-error", className), ...props, children: [
+    /* @__PURE__ */ jsxs("p", { className: "kz-tpl-error-code", "aria-hidden": true, children: [
+      code,
+      mascot
+    ] }),
+    /* @__PURE__ */ jsx("h1", { children: title }),
+    text && /* @__PURE__ */ jsx("p", { children: text }),
+    search && /* @__PURE__ */ jsx("div", { className: "kz-tpl-error-search", children: search }),
+    actions,
+    children
+  ] });
+}
+export {
+  ErrorPage
+};
+//# sourceMappingURL=error-page.js.map

package/dist/error-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/error-page/error-page.tsx"],"sourcesContent":["// Server-safe. When a page is not there (blocks.css `.kz-tpl-error`): the code drawn huge in outline, the bird that\n// lost its way beside it, one sentence, a search, and the ways back — never a dead end. The same frame as every page.\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type ErrorPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The code (`404`, `500`): drawn, not read — the title says it in words. */\n  code: string;\n  /** The bird beside the code (a Mascot in its `empty` or `error` mood). */\n  mascot?: React.ReactNode;\n  /** The page's `h1` (`This page took another road`). */\n  title: React.ReactNode;\n  /** What happened and what to do, in one or two sentences. */\n  text?: React.ReactNode;\n  /** A search, to find what was meant. */\n  search?: React.ReactNode;\n  /** The ways back (an ActionBar: home, the docs, contact). */\n  actions?: React.ReactNode;\n  /** Under the actions: the most visited pages. */\n  children?: React.ReactNode;\n};\n\n/** An error page: the code drawn, the bird, a sentence, a search and the ways back. */\nexport function ErrorPage({ code, mascot, title, text, search, actions, className, children, ...props }: ErrorPageProps) {\n  return (\n    <div className={cn(\"kz-frame kz-tpl-error\", className)} {...props}>\n      <p className=\"kz-tpl-error-code\" aria-hidden>\n        {code}\n        {mascot}\n      </p>\n      <h1>{title}</h1>\n      {text && <p>{text}</p>}\n      {search && <div className=\"kz-tpl-error-search\">{search}</div>}\n      {actions}\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;AA2BM,SAIA,KAJA;AAHC,SAAS,UAAU,EAAE,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS,WAAW,UAAU,GAAG,MAAM,GAAmB;AACvH,SACE,qBAAC,SAAI,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,OAC1D;AAAA,yBAAC,OAAE,WAAU,qBAAoB,eAAW,MACzC;AAAA;AAAA,MACA;AAAA,OACH;AAAA,IACA,oBAAC,QAAI,iBAAM;AAAA,IACV,QAAQ,oBAAC,OAAG,gBAAK;AAAA,IACjB,UAAU,oBAAC,SAAI,WAAU,uBAAuB,kBAAO;AAAA,IACvD;AAAA,IACA;AAAA,KACH;AAEJ;","names":[]}

package/dist/filter-bar.d.ts

@@ -4,12 +4,12 @@ import * as React from 'react';
 declare const filterBar: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
-            results?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
-            controls?: tailwind_variants.ClassValue;
-            active?: tailwind_variants.ClassValue;
-            clear?: tailwind_variants.ClassValue;
+            results?: tailwind_variants.ClassValue;
             count?: tailwind_variants.ClassValue;
+            clear?: tailwind_variants.ClassValue;
+            active?: tailwind_variants.ClassValue;
+            controls?: tailwind_variants.ClassValue;
             optionCount?: tailwind_variants.ClassValue;
             trigger?: tailwind_variants.ClassValue;
         };
@@ -17,12 +17,12 @@ declare const filterBar: tailwind_variants.TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: tailwind_variants.ClassValue | {
-            results?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
-            controls?: tailwind_variants.ClassValue;
-            active?: tailwind_variants.ClassValue;
-            clear?: tailwind_variants.ClassValue;
+            results?: tailwind_variants.ClassValue;
             count?: tailwind_variants.ClassValue;
+            clear?: tailwind_variants.ClassValue;
+            active?: tailwind_variants.ClassValue;
+            controls?: tailwind_variants.ClassValue;
             optionCount?: tailwind_variants.ClassValue;
             trigger?: tailwind_variants.ClassValue;
         };
@@ -39,12 +39,12 @@ declare const filterBar: tailwind_variants.TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
-            results?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
-            controls?: tailwind_variants.ClassValue;
-            active?: tailwind_variants.ClassValue;
-            clear?: tailwind_variants.ClassValue;
+            results?: tailwind_variants.ClassValue;
             count?: tailwind_variants.ClassValue;
+            clear?: tailwind_variants.ClassValue;
+            active?: tailwind_variants.ClassValue;
+            controls?: tailwind_variants.ClassValue;
             optionCount?: tailwind_variants.ClassValue;
             trigger?: tailwind_variants.ClassValue;
         };

package/dist/filter-bar.js

@@ -1,150 +1,14 @@
 "use client";
 import {
-  Chip
-} from "./chunk-YH4LMWRU.js";
-import {
-  cn,
-  floating
-} from "./chunk-2USC2YT6.js";
-import {
-  ChevronGlyph
-} from "./chunk-CPA5CF35.js";
-
-// src/filter-bar/filter-bar.tsx
-import { DropdownMenu as MenuPrimitive2 } from "radix-ui";
-import { tv as tv2 } from "tailwind-variants";
-
-// src/dropdown-menu/dropdown-menu.tsx
-import { DropdownMenu as MenuPrimitive } from "radix-ui";
-import { tv } from "tailwind-variants";
-import { jsx, jsxs } from "react/jsx-runtime";
-var menu = tv({
-  slots: {
-    content: cn(floating, "min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1 origin-(--radix-dropdown-menu-content-transform-origin)"),
-    item: "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 [&>svg]:text-fg-secondary",
-    indicator: "ml-auto flex h-4 w-4 items-center justify-center text-fg-accent",
-    label: "px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary",
-    separator: "-mx-1 my-1 h-px bg-border-subtle"
-  },
-  variants: {
-    // The label reads in the danger text role (≥ 4.5:1 on the menu surface, both themes); the icon and the highlight
-    // carry the danger fill.
-    tone: { default: {}, danger: { item: "text-fg-danger data-highlighted:bg-danger/15 [&>svg]:text-danger" } }
-  },
-  defaultVariants: { tone: "default" }
-});
-var s = menu();
-function DropdownMenuContent({ sideOffset = 6, align = "end", collisionPadding = 8, container, className, ...props }) {
-  return /* @__PURE__ */ jsx(MenuPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(MenuPrimitive.Content, { sideOffset, align, collisionPadding, className: s.content({ className }), ...props }) });
-}
-function DropdownMenuItem({ tone, className, ...props }) {
-  return /* @__PURE__ */ jsx(MenuPrimitive.Item, { "data-tone": tone ?? "default", className: menu({ tone }).item({ className }), ...props });
-}
-function DropdownMenuCheckboxItem({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxs(MenuPrimitive.CheckboxItem, { className: s.item({ className }), ...props, children: [
-    children,
-    /* @__PURE__ */ jsx(MenuPrimitive.ItemIndicator, { className: s.indicator(), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) })
-  ] });
-}
-function DropdownMenuLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx(MenuPrimitive.Label, { className: s.label({ className }), ...props });
-}
-function DropdownMenuSeparator({ className, ...props }) {
-  return /* @__PURE__ */ jsx(MenuPrimitive.Separator, { className: s.separator({ className }), ...props });
-}
-var DropdownMenu = {
-  Root: MenuPrimitive.Root,
-  Trigger: MenuPrimitive.Trigger,
-  Content: DropdownMenuContent,
-  Item: DropdownMenuItem,
-  CheckboxItem: DropdownMenuCheckboxItem,
-  Label: DropdownMenuLabel,
-  Separator: DropdownMenuSeparator,
-  Group: MenuPrimitive.Group
-};
-
-// src/filter-bar/filter-bar.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var filterBar = tv2({
-  slots: {
-    root: "flex w-full flex-col gap-3",
-    controls: "flex w-full flex-wrap items-center gap-2 [&>*]:min-w-0",
-    active: "flex flex-wrap items-center gap-2",
-    clear: "rounded-md px-2 py-1 text-xs font-semibold text-fg-accent hover:bg-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
-    results: "ml-auto text-xs text-fg-secondary tabular-nums",
-    trigger: "inline-flex h-11 shrink-0 items-center gap-2 rounded-lg border border-border-default bg-surface-1 px-3.5 text-sm font-semibold text-fg-secondary transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[active]:border-accent data-[active]:bg-accent-soft data-[active]:text-fg data-[state=open]:border-border-strong",
-    count: "inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-bold tabular-nums text-on-accent",
-    optionCount: "ml-auto pl-4 text-xs tabular-nums text-fg-secondary"
-  }
-});
-function FilterBar({
-  label,
-  children,
-  active = [],
-  onClearAll,
-  clearLabel = "Clear filters",
-  removeLabel = (text) => `Remove ${text}`,
-  results,
-  className,
-  ...props
-}) {
-  const s2 = filterBar();
-  return /* @__PURE__ */ jsxs2("div", { role: "group", "aria-label": label, className: s2.root({ className }), ...props, children: [
-    children ? /* @__PURE__ */ jsx2("div", { className: s2.controls(), children }) : null,
-    active.length > 0 || results !== void 0 ? /* @__PURE__ */ jsxs2("div", { className: s2.active(), children: [
-      active.map((filter) => /* @__PURE__ */ jsx2(Chip, { size: "sm", removable: true, removeLabel: removeLabel(filter.label), onRemove: filter.onRemove, children: filter.label }, filter.id)),
-      active.length > 0 && onClearAll ? /* @__PURE__ */ jsx2("button", { type: "button", className: s2.clear(), onClick: onClearAll, children: clearLabel }) : null,
-      /* @__PURE__ */ jsx2("p", { className: s2.results(), "aria-live": "polite", "aria-atomic": true, children: results })
-    ] }) : null
-  ] });
-}
-function FilterMenu(props) {
-  const { label, options, defaultOpen, className } = props;
-  const s2 = filterBar();
-  const m = menu();
-  const chosen = props.multiple === false ? props.value ? [props.value] : [] : props.value;
-  const single = props.multiple === false ? options.find((o) => o.value === props.value) : void 0;
-  const content = (option) => /* @__PURE__ */ jsxs2(Fragment, { children: [
-    option.label,
-    option.count !== void 0 ? /* @__PURE__ */ jsx2("span", { className: s2.optionCount(), children: option.count }) : null
-  ] });
-  return /* @__PURE__ */ jsxs2(DropdownMenu.Root, { defaultOpen, modal: false, children: [
-    /* @__PURE__ */ jsxs2(DropdownMenu.Trigger, { className: s2.trigger({ className }), "data-active": chosen.length > 0 ? "" : void 0, children: [
-      single ? `${label}: ${single.label}` : label,
-      props.multiple !== false && chosen.length > 0 ? /* @__PURE__ */ jsx2("span", { className: s2.count(), children: chosen.length }) : null,
-      /* @__PURE__ */ jsx2(ChevronGlyph, { className: "h-4 w-4" })
-    ] }),
-    /* @__PURE__ */ jsx2(DropdownMenu.Content, { align: "start", "aria-label": label, children: props.multiple === false ? /* @__PURE__ */ jsx2(MenuPrimitive2.RadioGroup, { value: props.value, onValueChange: props.onValueChange, children: options.map((option) => /* @__PURE__ */ jsxs2(MenuPrimitive2.RadioItem, { value: option.value, disabled: option.disabled, className: m.item(), children: [
-      /* @__PURE__ */ jsx2("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border-strong", children: /* @__PURE__ */ jsx2(MenuPrimitive2.ItemIndicator, { className: "h-2 w-2 rounded-full bg-accent" }) }),
-      content(option)
-    ] }, option.value)) }) : options.map((option) => /* @__PURE__ */ jsx2(
-      DropdownMenu.CheckboxItem,
-      {
-        disabled: option.disabled,
-        checked: props.value.includes(option.value),
-        onSelect: (event) => event.preventDefault(),
-        onCheckedChange: (checked) => props.onValueChange(checked ? [...props.value, option.value] : props.value.filter((v) => v !== option.value)),
-        children: content(option)
-      },
-      option.value
-    )) })
-  ] });
-}
-function readFilterParams(params, keys) {
-  return Object.fromEntries(
-    keys.map((key) => [key, params.getAll(key).flatMap((v) => v.split(",")).map((v) => v.trim()).filter(Boolean)])
-  );
-}
-function writeFilterParams(base, filters, resetKey = "page") {
-  const next = new URLSearchParams(base);
-  for (const [key, value] of Object.entries(filters)) {
-    const list = value == null ? [] : typeof value === "string" ? [value] : [...value];
-    if (list.filter(Boolean).length === 0) next.delete(key);
-    else next.set(key, list.filter(Boolean).join(","));
-  }
-  if (resetKey) next.delete(resetKey);
-  return next;
-}
+  FilterBar,
+  FilterMenu,
+  filterBar,
+  readFilterParams,
+  writeFilterParams
+} from "./chunk-OGJI5X4W.js";
+import "./chunk-YH4LMWRU.js";
+import "./chunk-2USC2YT6.js";
+import "./chunk-CPA5CF35.js";
 export {
   FilterBar,
   FilterMenu,

package/dist/filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/filter-bar/filter-bar.tsx","../src/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["// Client (menus in a portal). The bar above a list: the controls that narrow it (a SearchField, FilterMenus, a\n// DateRangePicker — any child), the filters in force as removable chips, \"Clear all\", and the count of results in a\n// polite live region. It holds no state: the app keeps the filters — in the address, ideally — and the\n// `readFilterParams` / `writeFilterParams` helpers move them between a `URLSearchParams` and an object.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Chip } from \"../chip\";\nimport { DropdownMenu, menu } from \"../dropdown-menu\";\nimport { ChevronGlyph } from \"../glyphs\";\n\nexport const filterBar = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-3\",\n    controls: \"flex w-full flex-wrap items-center gap-2 [&>*]:min-w-0\",\n    active: \"flex flex-wrap items-center gap-2\",\n    clear:\n      \"rounded-md px-2 py-1 text-xs font-semibold text-fg-accent hover:bg-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    results: \"ml-auto text-xs text-fg-secondary tabular-nums\",\n    trigger:\n      \"inline-flex h-11 shrink-0 items-center gap-2 rounded-lg border border-border-default bg-surface-1 px-3.5 text-sm font-semibold text-fg-secondary \" +\n      \"transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"data-[active]:border-accent data-[active]:bg-accent-soft data-[active]:text-fg data-[state=open]:border-border-strong\",\n    count: \"inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-bold tabular-nums text-on-accent\",\n    optionCount: \"ml-auto pl-4 text-xs tabular-nums text-fg-secondary\",\n  },\n});\n\nexport type ActiveFilter = {\n  /** A stable key (`\"status:failed\"`). */\n  id: string;\n  /** What the chip says, passed translated (\"Status: Failed\"). */\n  label: string;\n  /** Removes this filter. */\n  onRemove: () => void;\n};\n\nexport type FilterBarProps = Omit<React.ComponentProps<\"div\">, \"children\" | \"results\"> & {\n  /** The accessible name of the bar (\"Filter jobs\"), passed translated. */\n  label: string;\n  /** The controls: `SearchField`, `FilterMenu`, `DateRangePicker`, a `Chip.Group`… */\n  children?: React.ReactNode;\n  /** The filters in force, each a removable chip. */\n  active?: readonly ActiveFilter[];\n  /** Clears every filter; the \"Clear all\" button shows when there is at least one. */\n  onClearAll?: () => void;\n  /** The \"Clear all\" button (\"Clear filters\"), passed translated. */\n  clearLabel?: string;\n  /** A chip's remove button: `(label) => \"Remove \" + label`, passed translated. */\n  removeLabel?: (label: string) => string;\n  /** The count of results (\"42 jobs\"), announced politely when it changes. */\n  results?: string;\n};\n\n/** The bar of filters above a list: controls, active filters as chips, clear all, the count of results. */\nexport function FilterBar({\n  label,\n  children,\n  active = [],\n  onClearAll,\n  clearLabel = \"Clear filters\",\n  removeLabel = (text) => `Remove ${text}`,\n  results,\n  className,\n  ...props\n}: FilterBarProps) {\n  const s = filterBar();\n  return (\n    <div role=\"group\" aria-label={label} className={s.root({ className })} {...props}>\n      {children ? <div className={s.controls()}>{children}</div> : null}\n      {active.length > 0 || results !== undefined ? (\n        <div className={s.active()}>\n          {active.map((filter) => (\n            <Chip key={filter.id} size=\"sm\" removable removeLabel={removeLabel(filter.label)} onRemove={filter.onRemove}>\n              {filter.label}\n            </Chip>\n          ))}\n          {active.length > 0 && onClearAll ? (\n            <button type=\"button\" className={s.clear()} onClick={onClearAll}>\n              {clearLabel}\n            </button>\n          ) : null}\n          <p className={s.results()} aria-live=\"polite\" aria-atomic>\n            {results}\n          </p>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport type FilterOption = {\n  /** What the app stores (and puts in the address). */\n  value: string;\n  /** What the person reads, passed translated. */\n  label: string;\n  /** How many results it would give: shown on the right. */\n  count?: number;\n  /** Shown but not choosable. */\n  disabled?: boolean;\n};\n\ntype FilterMenuBase = {\n  /** The name of the filter on its button (\"Status\"), passed translated. */\n  label: string;\n  /** The choices. */\n  options: readonly FilterOption[];\n  /** Opens the menu at first (a story, a test). */\n  defaultOpen?: boolean;\n  /** Classes merged on the button. */\n  className?: string;\n};\n\nexport type FilterMenuProps =\n  | (FilterMenuBase & {\n      /** Several values (checkboxes, default) or one (radios). */\n      multiple?: true;\n      /** The values chosen. */\n      value: readonly string[];\n      /** Called with the values chosen. */\n      onValueChange: (value: string[]) => void;\n    })\n  | (FilterMenuBase & {\n      /** One value: the options are radios. */\n      multiple: false;\n      /** The value chosen, `\"\"` for none. */\n      value: string;\n      /** Called with the value chosen. */\n      onValueChange: (value: string) => void;\n    });\n\n/** A filter's button and its menu of options — checkboxes (several values) or radios (one) — with a count of chosen ones. */\nexport function FilterMenu(props: FilterMenuProps) {\n  const { label, options, defaultOpen, className } = props;\n  const s = filterBar();\n  const m = menu();\n  const chosen = props.multiple === false ? (props.value ? [props.value] : []) : props.value;\n  const single = props.multiple === false ? options.find((o) => o.value === props.value) : undefined;\n  const content = (option: FilterOption) => (\n    <>\n      {option.label}\n      {option.count !== undefined ? <span className={s.optionCount()}>{option.count}</span> : null}\n    </>\n  );\n  return (\n    <DropdownMenu.Root defaultOpen={defaultOpen} modal={false}>\n      <DropdownMenu.Trigger className={s.trigger({ className })} data-active={chosen.length > 0 ? \"\" : undefined}>\n        {single ? `${label}: ${single.label}` : label}\n        {props.multiple !== false && chosen.length > 0 ? <span className={s.count()}>{chosen.length}</span> : null}\n        <ChevronGlyph className=\"h-4 w-4\" />\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content align=\"start\" aria-label={label}>\n        {props.multiple === false ? (\n          <MenuPrimitive.RadioGroup value={props.value} onValueChange={props.onValueChange}>\n            {options.map((option) => (\n              <MenuPrimitive.RadioItem key={option.value} value={option.value} disabled={option.disabled} className={m.item()}>\n                <span className=\"flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border-strong\">\n                  <MenuPrimitive.ItemIndicator className=\"h-2 w-2 rounded-full bg-accent\" />\n                </span>\n                {content(option)}\n              </MenuPrimitive.RadioItem>\n            ))}\n          </MenuPrimitive.RadioGroup>\n        ) : (\n          options.map((option) => (\n            <DropdownMenu.CheckboxItem\n              key={option.value}\n              disabled={option.disabled}\n              checked={props.value.includes(option.value)}\n              onSelect={(event) => event.preventDefault()}\n              onCheckedChange={(checked) =>\n                props.onValueChange(checked ? [...props.value, option.value] : props.value.filter((v) => v !== option.value))\n              }\n            >\n              {content(option)}\n            </DropdownMenu.CheckboxItem>\n          ))\n        )}\n      </DropdownMenu.Content>\n    </DropdownMenu.Root>\n  );\n}\n\n/** Filters read from an address: `{ status: [\"failed\", \"running\"], q: [\"cat\"] }` for the keys asked (repeated or comma-separated values). */\nexport function readFilterParams(params: URLSearchParams, keys: readonly string[]): Record<string, string[]> {\n  return Object.fromEntries(\n    keys.map((key) => [key, params.getAll(key).flatMap((v) => v.split(\",\")).map((v) => v.trim()).filter(Boolean)]),\n  );\n}\n\n/** Filters written into an address (a copy of `base`): empty filters removed, several values comma-separated, the page reset. */\nexport function writeFilterParams(base: URLSearchParams, filters: Record<string, string | readonly string[] | null | undefined>, resetKey = \"page\") {\n  const next = new URLSearchParams(base);\n  for (const [key, value] of Object.entries(filters)) {\n    const list = value == null ? [] : typeof value === \"string\" ? [value] : [...value];\n    if (list.filter(Boolean).length === 0) next.delete(key);\n    else next.set(key, list.filter(Boolean).join(\",\"));\n  }\n  if (resetKey) next.delete(resetKey);\n  return next;\n}\n","// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-fg-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The label reads in the danger text role (≥ 4.5:1 on the menu surface, both themes); the icon and the highlight\n    // carry the danger fill.\n    tone: { default: {}, danger: { item: \"text-fg-danger data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n};\n"],"mappings":"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","names":["MenuPrimitive","tv","jsx","jsxs","tv","s","MenuPrimitive"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/gallery-page.d.ts

@@ -0,0 +1,50 @@
+import { LinkComponent } from '@krizaka/ui/page-hero';
+import * as React from 'react';
+
+interface GalleryItem {
+    /** A stable key. */
+    id: string;
+    /** The media: an `<img>` with its `alt`, a `<video>` with its label, a VideoPlayer. */
+    media: React.ReactNode;
+    /** Its title. */
+    title: React.ReactNode;
+    /** One line: what it shows, how it was made (a prompt, a seed). */
+    caption?: React.ReactNode;
+}
+type GalleryPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The brand the page wears (`.brand-<id>`). */
+    brand?: string;
+    /** 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 or two sentences under it. */
+    lead?: React.ReactNode;
+    /** The hero's actions. */
+    actions?: React.ReactNode;
+    /** Above the pieces: the filters (ChipLink, a Chip group) — the address says which one is on. */
+    filters?: React.ReactNode;
+    /** The gallery's accessible name. */
+    galleryLabel: string;
+    /** The pieces, featured first. */
+    items: readonly GalleryItem[];
+    /** After the gallery: how it was made, the facts. */
+    children?: React.ReactNode;
+    /** The closing call. */
+    closing?: {
+        title: React.ReactNode;
+        body?: React.ReactNode;
+        actions: React.ReactNode;
+    };
+    /** The app's link component (Next's `Link`). */
+    linkAs?: LinkComponent;
+};
+/** A demo or a gallery: hero, filters, media in staggered columns, closing call. */
+declare function GalleryPage({ brand, back, eyebrow, title, lead, actions, filters, galleryLabel, items, closing, linkAs, className, children, ...props }: GalleryPageProps): React.JSX.Element;
+
+export { type GalleryItem, GalleryPage, type GalleryPageProps };

package/dist/gallery-page.js

@@ -0,0 +1,30 @@
+import {
+  cn
+} from "./chunk-KNBYZGSQ.js";
+
+// src/gallery-page/gallery-page.tsx
+import { CtaPanel } from "@krizaka/ui/cta-panel";
+import { Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+function GalleryPage({ brand, back, eyebrow, title, lead, actions, filters, galleryLabel, items, closing, linkAs, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(brand && "brand-" + brand, className), ...props, children: [
+    /* @__PURE__ */ jsx(PageHero, { back, linkAs, eyebrow, title, lead, align: "center", backdrop: "plain", children: actions }),
+    /* @__PURE__ */ jsxs(Section, { "aria-label": galleryLabel, spacing: "sm", children: [
+      filters && /* @__PURE__ */ jsx("div", { className: "kz-tpl-filters", children: filters }),
+      /* @__PURE__ */ jsx("ul", { className: "kz-tpl-gallery", children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("figure", { className: "kz-tpl-figure", children: [
+        /* @__PURE__ */ jsx("div", { className: "kz-tpl-figure-media", children: item.media }),
+        /* @__PURE__ */ jsxs("figcaption", { children: [
+          /* @__PURE__ */ jsx("strong", { children: item.title }),
+          item.caption && /* @__PURE__ */ jsx("span", { children: item.caption })
+        ] })
+      ] }) }, item.id)) })
+    ] }),
+    children,
+    closing && /* @__PURE__ */ jsx(Section, { spacing: "sm", "aria-labelledby": "gallery-closing", children: /* @__PURE__ */ jsx(CtaPanel, { id: "gallery-closing", title: closing.title, body: closing.body, reveal: true, children: closing.actions }) })
+  ] });
+}
+export {
+  GalleryPage
+};
+//# sourceMappingURL=gallery-page.js.map

package/dist/gallery-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/gallery-page/gallery-page.tsx"],"sourcesContent":["// Server-safe. A demo or a gallery (blocks.css `.kz-tpl-gallery`): the hero, the filters as chips, then the pieces in\n// columns of different heights — each a framed media with its title and caption (a recording of the real product, an\n// image it generated, with its prompt) — and the closing call.\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { Section } 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\nimport { cn } from \"../cn\";\n\nexport interface GalleryItem {\n  /** A stable key. */\n  id: string;\n  /** The media: an `<img>` with its `alt`, a `<video>` with its label, a VideoPlayer. */\n  media: React.ReactNode;\n  /** Its title. */\n  title: React.ReactNode;\n  /** One line: what it shows, how it was made (a prompt, a seed). */\n  caption?: React.ReactNode;\n}\n\nexport type GalleryPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The brand the page wears (`.brand-<id>`). */\n  brand?: string;\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 or two sentences under it. */\n  lead?: React.ReactNode;\n  /** The hero's actions. */\n  actions?: React.ReactNode;\n  /** Above the pieces: the filters (ChipLink, a Chip group) — the address says which one is on. */\n  filters?: React.ReactNode;\n  /** The gallery's accessible name. */\n  galleryLabel: string;\n  /** The pieces, featured first. */\n  items: readonly GalleryItem[];\n  /** After the gallery: how it was made, the facts. */\n  children?: React.ReactNode;\n  /** The closing call. */\n  closing?: { title: React.ReactNode; body?: React.ReactNode; actions: React.ReactNode };\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A demo or a gallery: hero, filters, media in staggered columns, closing call. */\nexport function GalleryPage({ brand, back, eyebrow, title, lead, actions, filters, galleryLabel, items, closing, linkAs, className, children, ...props }: GalleryPageProps) {\n  return (\n    <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} align=\"center\" backdrop=\"plain\">\n        {actions}\n      </PageHero>\n      <Section aria-label={galleryLabel} spacing=\"sm\">\n        {filters && <div className=\"kz-tpl-filters\">{filters}</div>}\n        <ul className=\"kz-tpl-gallery\">\n          {items.map((item) => (\n            <li key={item.id}>\n              <figure className=\"kz-tpl-figure\">\n                <div className=\"kz-tpl-figure-media\">{item.media}</div>\n                <figcaption>\n                  <strong>{item.title}</strong>\n                  {item.caption && <span>{item.caption}</span>}\n                </figcaption>\n              </figure>\n            </li>\n          ))}\n        </ul>\n      </Section>\n      {children}\n      {closing && (\n        <Section spacing=\"sm\" aria-labelledby=\"gallery-closing\">\n          <CtaPanel id=\"gallery-closing\" title={closing.title} body={closing.body} reveal>\n            {closing.actions}\n          </CtaPanel>\n        </Section>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAGA,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAExB,SAAS,gBAAgB;AA+CnB,cAUU,YAVV;AAHC,SAAS,YAAY,EAAE,OAAO,MAAM,SAAS,OAAO,MAAM,SAAS,SAAS,cAAc,OAAO,SAAS,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC1K,SACE,qBAAC,SAAI,WAAW,GAAG,SAAS,WAAW,OAAO,SAAS,GAAI,GAAG,OAC5D;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,OAAM,UAAS,UAAS,SACvG,mBACH;AAAA,IACA,qBAAC,WAAQ,cAAY,cAAc,SAAQ,MACxC;AAAA,iBAAW,oBAAC,SAAI,WAAU,kBAAkB,mBAAQ;AAAA,MACrD,oBAAC,QAAG,WAAU,kBACX,gBAAM,IAAI,CAAC,SACV,oBAAC,QACC,+BAAC,YAAO,WAAU,iBAChB;AAAA,4BAAC,SAAI,WAAU,uBAAuB,eAAK,OAAM;AAAA,QACjD,qBAAC,gBACC;AAAA,8BAAC,YAAQ,eAAK,OAAM;AAAA,UACnB,KAAK,WAAW,oBAAC,UAAM,eAAK,SAAQ;AAAA,WACvC;AAAA,SACF,KAPO,KAAK,EAQd,CACD,GACH;AAAA,OACF;AAAA,IACC;AAAA,IACA,WACC,oBAAC,WAAQ,SAAQ,MAAK,mBAAgB,mBACpC,8BAAC,YAAS,IAAG,mBAAkB,OAAO,QAAQ,OAAO,MAAM,QAAQ,MAAM,QAAM,MAC5E,kBAAQ,SACX,GACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/{geometry-CXrAW34x.d.ts → geometry-CbOU4rtL.d.ts}

@@ -1,16 +1,16 @@
 /**
  * The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one
  * (`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,
- * the owl that reads, the developer duck, the flamingo that answers, the carrier pigeon) and the lovebird that
- * introduces (2026-10, with Yazakia: "l'inséparable présente"), redrawn on one 120 × 120 grid so that any bird can
- * wear any mood.
+ * the owl that reads, the developer duck, the flamingo that answers, the carrier pigeon), the lovebird that
+ * introduces (2026-10, with Yazakia: "l'inséparable présente") and the crane that listens (2026-10, with Yororis:
+ * "la grue écoute"), redrawn on one 120 × 120 grid so that any bird can wear any mood.
  *
  * Colours are roles, never fixed: `brand` (the default) paints a bird in the host's accent (`--kz-accent`,
  * `--kz-accent-2`), so the same falcon is blue on krizaka.com, orange in Orazaka and violet in Orochia; `own` gives
  * each bird the signature palette it has in the Krizaka story (the brand layer's exception, like the marks). Shades
  * and highlights are black and white at a low opacity over the role, so they hold in both themes.
  */
-declare const MASCOT_BIRDS: readonly ["falcon", "owl", "duck", "flamingo", "pigeon", "lovebird"];
+declare const MASCOT_BIRDS: readonly ["falcon", "owl", "duck", "flamingo", "pigeon", "lovebird", "crane"];
 type MascotBird = (typeof MASCOT_BIRDS)[number];
 declare const MASCOT_MOODS: readonly ["welcome", "thinking", "success", "empty", "error"];
 type MascotMood = (typeof MASCOT_MOODS)[number];

package/dist/how-it-works-page.d.ts

@@ -0,0 +1,48 @@
+import { LinkComponent } from '@krizaka/ui/page-hero';
+import * as React from 'react';
+
+interface HowStep {
+    /** A stable key (the step's anchor). */
+    id: string;
+    /** What happens, in a few words. */
+    title: React.ReactNode;
+    /** How, in two or three sentences. */
+    text: React.ReactNode;
+    /** Beside the words: a code block, a schema, a screen. */
+    visual?: React.ReactNode;
+}
+type HowItWorksPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The brand the page wears (`.brand-<id>`). */
+    brand?: string;
+    /** The way back to the product. */
+    back?: {
+        href: string;
+        label: string;
+    };
+    /** A mono line above the title. */
+    eyebrow?: React.ReactNode;
+    /** The page's `h1`. */
+    title: React.ReactNode;
+    /** One or two sentences under it. */
+    lead?: React.ReactNode;
+    /** Beside the hero: the page's bird or an illustration. */
+    aside?: React.ReactNode;
+    /** The steps' accessible name (`The steps`). */
+    stepsLabel: string;
+    /** The steps, in order. */
+    steps: readonly HowStep[];
+    /** After the steps: architecture, guarantees, a module map. */
+    children?: React.ReactNode;
+    /** The closing call. */
+    closing?: {
+        title: React.ReactNode;
+        body?: React.ReactNode;
+        actions: React.ReactNode;
+    };
+    /** The app's link component (Next's `Link`). */
+    linkAs?: LinkComponent;
+};
+/** How a product works: the hero, a numbered timeline of steps with their visuals, then the details. */
+declare function HowItWorksPage({ brand, back, eyebrow, title, lead, aside, stepsLabel, steps, closing, linkAs, className, children, ...props }: HowItWorksPageProps): React.JSX.Element;
+
+export { HowItWorksPage, type HowItWorksPageProps, type HowStep };

package/dist/how-it-works-page.js

@@ -0,0 +1,28 @@
+import {
+  cn
+} from "./chunk-KNBYZGSQ.js";
+
+// src/how-it-works-page/how-it-works-page.tsx
+import { CtaPanel } from "@krizaka/ui/cta-panel";
+import { Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+function HowItWorksPage({ brand, back, eyebrow, title, lead, aside, stepsLabel, steps, closing, linkAs, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(brand && "brand-" + brand, className), ...props, children: [
+    /* @__PURE__ */ jsx(PageHero, { back, linkAs, eyebrow, title, lead, aside }),
+    /* @__PURE__ */ jsx(Section, { "aria-label": stepsLabel, children: /* @__PURE__ */ jsx("ol", { className: "kz-tpl-timeline", children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", { id: step.id, className: "kz-tpl-step", "data-reveal": "", children: [
+      /* @__PURE__ */ jsx("span", { className: "kz-tpl-step-n", "aria-hidden": true, children: i + 1 }),
+      /* @__PURE__ */ jsxs("div", { className: "kz-tpl-step-text", children: [
+        /* @__PURE__ */ jsx("h2", { children: step.title }),
+        /* @__PURE__ */ jsx("p", { children: step.text })
+      ] }),
+      step.visual && /* @__PURE__ */ jsx("div", { className: "kz-tpl-step-visual", children: step.visual })
+    ] }, step.id)) }) }),
+    children,
+    closing && /* @__PURE__ */ jsx(Section, { spacing: "sm", "aria-labelledby": "how-closing", children: /* @__PURE__ */ jsx(CtaPanel, { id: "how-closing", title: closing.title, body: closing.body, reveal: true, children: closing.actions }) })
+  ] });
+}
+export {
+  HowItWorksPage
+};
+//# sourceMappingURL=how-it-works-page.js.map

package/dist/how-it-works-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/how-it-works-page/how-it-works-page.tsx"],"sourcesContent":["// Server-safe. How a product works, told in steps (blocks.css `.kz-tpl-timeline`): the hero, then a numbered line\n// down the page — each step its words beside its visual (a command, a schema, a screen), the sides alternating on a\n// wide screen, one column on a phone — then what is under the hood and the closing call.\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { Section } 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\nimport { cn } from \"../cn\";\n\nexport interface HowStep {\n  /** A stable key (the step's anchor). */\n  id: string;\n  /** What happens, in a few words. */\n  title: React.ReactNode;\n  /** How, in two or three sentences. */\n  text: React.ReactNode;\n  /** Beside the words: a code block, a schema, a screen. */\n  visual?: React.ReactNode;\n}\n\nexport type HowItWorksPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The brand the page wears (`.brand-<id>`). */\n  brand?: string;\n  /** The way back to the product. */\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 or two sentences under it. */\n  lead?: React.ReactNode;\n  /** Beside the hero: the page's bird or an illustration. */\n  aside?: React.ReactNode;\n  /** The steps' accessible name (`The steps`). */\n  stepsLabel: string;\n  /** The steps, in order. */\n  steps: readonly HowStep[];\n  /** After the steps: architecture, guarantees, a module map. */\n  children?: React.ReactNode;\n  /** The closing call. */\n  closing?: { title: React.ReactNode; body?: React.ReactNode; actions: React.ReactNode };\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** How a product works: the hero, a numbered timeline of steps with their visuals, then the details. */\nexport function HowItWorksPage({ brand, back, eyebrow, title, lead, aside, stepsLabel, steps, closing, linkAs, className, children, ...props }: HowItWorksPageProps) {\n  return (\n    <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} aside={aside} />\n      <Section aria-label={stepsLabel}>\n        <ol className=\"kz-tpl-timeline\">\n          {steps.map((step, i) => (\n            <li key={step.id} id={step.id} className=\"kz-tpl-step\" data-reveal=\"\">\n              <span className=\"kz-tpl-step-n\" aria-hidden>\n                {i + 1}\n              </span>\n              <div className=\"kz-tpl-step-text\">\n                <h2>{step.title}</h2>\n                <p>{step.text}</p>\n              </div>\n              {step.visual && <div className=\"kz-tpl-step-visual\">{step.visual}</div>}\n            </li>\n          ))}\n        </ol>\n      </Section>\n      {children}\n      {closing && (\n        <Section spacing=\"sm\" aria-labelledby=\"how-closing\">\n          <CtaPanel id=\"how-closing\" title={closing.title} body={closing.body} reveal>\n            {closing.actions}\n          </CtaPanel>\n        </Section>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAGA,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAExB,SAAS,gBAAgB;AA6CnB,cAQQ,YARR;AAHC,SAAS,eAAe,EAAE,OAAO,MAAM,SAAS,OAAO,MAAM,OAAO,YAAY,OAAO,SAAS,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAwB;AACnK,SACE,qBAAC,SAAI,WAAW,GAAG,SAAS,WAAW,OAAO,SAAS,GAAI,GAAG,OAC5D;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,OAAc;AAAA,IAChG,oBAAC,WAAQ,cAAY,YACnB,8BAAC,QAAG,WAAU,mBACX,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,QAAiB,IAAI,KAAK,IAAI,WAAU,eAAc,eAAY,IACjE;AAAA,0BAAC,UAAK,WAAU,iBAAgB,eAAW,MACxC,cAAI,GACP;AAAA,MACA,qBAAC,SAAI,WAAU,oBACb;AAAA,4BAAC,QAAI,eAAK,OAAM;AAAA,QAChB,oBAAC,OAAG,eAAK,MAAK;AAAA,SAChB;AAAA,MACC,KAAK,UAAU,oBAAC,SAAI,WAAU,sBAAsB,eAAK,QAAO;AAAA,SAR1D,KAAK,EASd,CACD,GACH,GACF;AAAA,IACC;AAAA,IACA,WACC,oBAAC,WAAQ,SAAQ,MAAK,mBAAgB,eACpC,8BAAC,YAAS,IAAG,eAAc,OAAO,QAAQ,OAAO,MAAM,QAAQ,MAAM,QAAM,MACxE,kBAAQ,SACX,GACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/image-cropper.js

@@ -4,7 +4,7 @@ import {
 } from "./chunk-RUPRYJ45.js";
 import {
   clamp
-} from "./chunk-EUPTXKH7.js";
+} from "./chunk-BRKMQ6JV.js";
 
 // src/image-cropper/image-cropper.tsx
 import * as React from "react";

package/dist/index.d.ts

@@ -34,7 +34,7 @@ declare function OrazakaLogo({ size, animated, title, className }: MarkProps): R
  */
 declare function OrochiaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
-type BrandId = "krizaka" | "orazaka" | "orochia" | "yazakia";
+type BrandId = "krizaka" | "orazaka" | "orochia" | "yazakia" | "yororis";
 /** The mark of a Krizaka brand by id — for navigation, cards and lists driven by data. */
 declare function ProductLogo({ id, ...props }: MarkProps & {
     id: BrandId;
@@ -49,4 +49,13 @@ declare function ProductLogo({ id, ...props }: MarkProps & {
  */
 declare function YazakiaLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
 
-export { type BrandId, KrizakaLogo, type MarkProps, OrazakaLogo, OrochiaLogo, ProductLogo, YazakiaLogo, cx };
+/**
+ * The Yororis mark, "the hold": a "Y" whose arms are two filled leaves — open hands — rising from one stem and cupping
+ * a warm core that breathes: held, given room, listened to. Leaves in the Yororis gradient (sand → sage, the brand's
+ * mark gradient of @krizaka/tokens, the same in dark and light), a vein of light along each, the core in a warm sand
+ * light; the moment, one node on the dashed orbit, comes round slowly. The family's grammar (orbit, ring, bold emblem,
+ * bright core) with the slowest breath of the family. Below 48 px it crops to the emblem.
+ */
+declare function YororisLogo({ size, animated, title, className }: MarkProps): React.JSX.Element;
+
+export { type BrandId, KrizakaLogo, type MarkProps, OrazakaLogo, OrochiaLogo, ProductLogo, YazakiaLogo, YororisLogo, cx };