@krizaka/ui 2.8.0 → 2.10.0

package/dist/detail-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/detail-layout/detail-layout.tsx"],"sourcesContent":["// Server-safe. The page of one object, read from the products' detail screens (a video, a job, an account, a pack):\n// its header — the way back, a media or an avatar, the name, its facts and status, the actions — then its tabs, the\n// content, and a side panel (details, related, activity) that goes under the content on a phone.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const detailLayout = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-6\",\n    back: \"inline-flex w-fit items-center gap-1.5 rounded-md text-sm font-medium text-fg-secondary no-underline hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    header: \"flex flex-col gap-4 border-b border-border-subtle pb-5 sm:flex-row sm:items-start\",\n    media: \"shrink-0 overflow-hidden rounded-xl [&>img]:block [&>img]:h-full [&>img]:w-full [&>img]:object-cover\",\n    text: \"flex min-w-0 flex-1 flex-col gap-2\",\n    eyebrow: \"font-mono text-[11px] font-semibold uppercase tracking-[0.16em] text-fg-accent\",\n    titleRow: \"flex flex-wrap items-center gap-2\",\n    title: \"min-w-0 font-display text-2xl font-extrabold tracking-tight text-fg break-words\",\n    meta: \"flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-fg-secondary\",\n    actions: \"flex shrink-0 flex-wrap items-center gap-2\",\n    columns: \"grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_20rem] lg:gap-8\",\n    main: \"flex min-w-0 flex-col gap-5\",\n    aside: \"flex min-w-0 flex-col gap-4 lg:sticky lg:top-20 lg:self-start\",\n  },\n});\nconst s = detailLayout();\n\nexport type DetailLayoutProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The way back to the list: your router's link (`<Link href=\"/videos\">Videos</Link>`), drawn with its arrow. */\n  back?: React.ReactNode;\n  /** A thumbnail, a cover or an avatar beside the name. */\n  media?: React.ReactNode;\n  /** A mono line above the name (the object's kind, its id). */\n  eyebrow?: React.ReactNode;\n  /** The object's name: the `h1`. */\n  title: React.ReactNode;\n  /** Beside the name: its status (a Badge). */\n  status?: React.ReactNode;\n  /** Under the name: its facts (the author, a date, a count — `Facts` or plain text). */\n  meta?: React.ReactNode;\n  /** The object's actions (edit, publish, a DropdownMenu). */\n  actions?: React.ReactNode;\n  /** Under the header: the object's tabs (`Tabs.List` of @krizaka/ui/tabs, inside your `Tabs.Root` around the layout). */\n  tabs?: React.ReactNode;\n  /** The side panel: details, related objects, activity (under the content on a phone). */\n  aside?: React.ReactNode;\n  /** The content (the current tab). */\n  children: React.ReactNode;\n};\n\n/** One object's page: header (back, media, name, status, facts, actions), tabs, content and a side panel. */\nexport function DetailLayout({ back, media, eyebrow, title, status, meta, actions, tabs, aside, className, children, ...props }: DetailLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      {back && <div className={s.back()}>{back}</div>}\n      <div className={s.header()}>\n        {media && <div className={s.media()}>{media}</div>}\n        <div className={s.text()}>\n          {eyebrow && <p className={s.eyebrow()}>{eyebrow}</p>}\n          <div className={s.titleRow()}>\n            <h1 className={s.title()}>{title}</h1>\n            {status}\n          </div>\n          {meta && <div className={s.meta()}>{meta}</div>}\n        </div>\n        {actions && <div className={s.actions()}>{actions}</div>}\n      </div>\n      {tabs}\n      <div className={aside ? s.columns() : undefined}>\n        <div className={s.main()}>{children}</div>\n        {aside && <aside className={s.aside()}>{aside}</aside>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAAU;AAgDJ,cAKL,YALK;AA9CR,IAAM,eAAe,GAAG;AAAA,EAC7B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF,CAAC;AACD,IAAM,IAAI,aAAa;AA0BhB,SAAS,aAAa,EAAE,MAAM,OAAO,SAAS,OAAO,QAAQ,MAAM,SAAS,MAAM,OAAO,WAAW,UAAU,GAAG,MAAM,GAAsB;AAClJ,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACxC;AAAA,YAAQ,oBAAC,SAAI,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,IACzC,qBAAC,SAAI,WAAW,EAAE,OAAO,GACtB;AAAA,eAAS,oBAAC,SAAI,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,MAC5C,qBAAC,SAAI,WAAW,EAAE,KAAK,GACpB;AAAA,mBAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,QAChD,qBAAC,SAAI,WAAW,EAAE,SAAS,GACzB;AAAA,8BAAC,QAAG,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,UAChC;AAAA,WACH;AAAA,QACC,QAAQ,oBAAC,SAAI,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,SAC3C;AAAA,MACC,WAAW,oBAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,OACpD;AAAA,IACC;AAAA,IACD,qBAAC,SAAI,WAAW,QAAQ,EAAE,QAAQ,IAAI,QACpC;AAAA,0BAAC,SAAI,WAAW,EAAE,KAAK,GAAI,UAAS;AAAA,MACnC,SAAS,oBAAC,WAAM,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,OAChD;AAAA,KACF;AAEJ;","names":[]}

package/dist/docs-article-page.d.ts

@@ -0,0 +1,54 @@
+import { Fact } from '@krizaka/ui/page';
+import { LinkComponent } from '@krizaka/ui/page-hero';
+import * as React from 'react';
+
+type DocsArticlePageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The documentation's pages (a nav of links). */
+    sidebar: React.ReactNode;
+    /** On a phone, the words that open the pages. */
+    sidebarLabel: string;
+    /** Where the page sits: `{ href, label }` from the hub down. */
+    breadcrumb?: readonly {
+        href: string;
+        label: string;
+    }[];
+    /** The breadcrumb's accessible name (`Breadcrumb`). */
+    breadcrumbLabel?: string;
+    /** The page's `h1`. */
+    title: React.ReactNode;
+    /** One or two sentences under it. */
+    lead?: React.ReactNode;
+    /** Facts under the lead: updated on, reading time, the version it documents. */
+    facts?: readonly Fact[];
+    /** The contents (its `h2`s): `{ id, label }`, and its label (`On this page`). */
+    toc?: {
+        label: string;
+        items: readonly {
+            id: string;
+            label: string;
+        }[];
+    };
+    /** The previous and next pages, and their labels. */
+    pager?: {
+        previous?: {
+            href: string;
+            title: string;
+        };
+        next?: {
+            href: string;
+            title: string;
+        };
+        labels: {
+            previous: string;
+            next: string;
+        };
+    };
+    /** The article's body (prose, code blocks, diagrams). */
+    children: React.ReactNode;
+    /** The app's link component (Next's `Link`). */
+    linkAs?: LinkComponent;
+};
+/** A documentation article: pages · breadcrumb, title, lead, facts, the reading column · contents; previous and next. */
+declare function DocsArticlePage({ sidebar, sidebarLabel, breadcrumb, breadcrumbLabel, title, lead, facts, toc, pager, linkAs, children, ...props }: DocsArticlePageProps): React.JSX.Element;
+
+export { DocsArticlePage, type DocsArticlePageProps };

package/dist/docs-article-page.js

@@ -0,0 +1,29 @@
+// src/docs-article-page/docs-article-page.tsx
+import { DocsLayout } from "@krizaka/ui/docs-layout";
+import { Facts } from "@krizaka/ui/page";
+import { Toc } from "@krizaka/ui/toc";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DocsArticlePage({ sidebar, sidebarLabel, breadcrumb, breadcrumbLabel = "Breadcrumb", title, lead, facts, toc, pager, linkAs, children, ...props }) {
+  const L = linkAs ?? "a";
+  return /* @__PURE__ */ jsxs(DocsLayout, { sidebar, sidebarLabel, toc: toc && /* @__PURE__ */ jsx(Toc, { label: toc.label, items: toc.items }), ...props, children: [
+    breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": breadcrumbLabel, children: /* @__PURE__ */ jsx("ol", { className: "kz-tpl-crumbs", children: breadcrumb.map((c) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(L, { href: c.href, children: c.label }) }, c.href)) }) }),
+    /* @__PURE__ */ jsx("h1", { className: "kz-tpl-article-title", children: title }),
+    lead && /* @__PURE__ */ jsx("p", { className: "kz-tpl-article-lead", children: lead }),
+    facts && facts.length > 0 && /* @__PURE__ */ jsx(Facts, { className: "kz-tpl-article-meta", items: facts }),
+    /* @__PURE__ */ jsx("div", { className: "kz-tpl-prose", children }),
+    pager && (pager.previous || pager.next) && /* @__PURE__ */ jsxs("nav", { className: "kz-tpl-pager", "aria-label": `${pager.labels.previous} \xB7 ${pager.labels.next}`, children: [
+      pager.previous && /* @__PURE__ */ jsxs(L, { href: pager.previous.href, rel: "prev", children: [
+        /* @__PURE__ */ jsx("small", { children: pager.labels.previous }),
+        pager.previous.title
+      ] }),
+      pager.next && /* @__PURE__ */ jsxs(L, { href: pager.next.href, rel: "next", children: [
+        /* @__PURE__ */ jsx("small", { children: pager.labels.next }),
+        pager.next.title
+      ] })
+    ] })
+  ] });
+}
+export {
+  DocsArticlePage
+};
+//# sourceMappingURL=docs-article-page.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs-article-page/docs-article-page.tsx"],"sourcesContent":["// Server-safe. A documentation article in the docs frame (DocsLayout): the pages on the left, the breadcrumb, the\n// title, its lead and facts (updated, reading time), the reading column, the contents on the right, the previous and\n// next pages at the foot. On a phone the pages fold above the article and the contents become chips.\nimport { DocsLayout } from \"@krizaka/ui/docs-layout\";\nimport { type Fact, Facts } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { Toc } from \"@krizaka/ui/toc\";\nimport type * as React from \"react\";\n\nexport type DocsArticlePageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The documentation's pages (a nav of links). */\n  sidebar: React.ReactNode;\n  /** On a phone, the words that open the pages. */\n  sidebarLabel: string;\n  /** Where the page sits: `{ href, label }` from the hub down. */\n  breadcrumb?: readonly { href: string; label: string }[];\n  /** The breadcrumb's accessible name (`Breadcrumb`). */\n  breadcrumbLabel?: string;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** One or two sentences under it. */\n  lead?: React.ReactNode;\n  /** Facts under the lead: updated on, reading time, the version it documents. */\n  facts?: readonly Fact[];\n  /** The contents (its `h2`s): `{ id, label }`, and its label (`On this page`). */\n  toc?: { label: string; items: readonly { id: string; label: string }[] };\n  /** The previous and next pages, and their labels. */\n  pager?: { previous?: { href: string; title: string }; next?: { href: string; title: string }; labels: { previous: string; next: string } };\n  /** The article's body (prose, code blocks, diagrams). */\n  children: React.ReactNode;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A documentation article: pages · breadcrumb, title, lead, facts, the reading column · contents; previous and next. */\nexport function DocsArticlePage({ sidebar, sidebarLabel, breadcrumb, breadcrumbLabel = \"Breadcrumb\", title, lead, facts, toc, pager, linkAs, children, ...props }: DocsArticlePageProps) {\n  const L = (linkAs ?? \"a\") as React.ElementType;\n  return (\n    <DocsLayout sidebar={sidebar} sidebarLabel={sidebarLabel} toc={toc && <Toc label={toc.label} items={toc.items} />} {...props}>\n      {breadcrumb && breadcrumb.length > 0 && (\n        <nav aria-label={breadcrumbLabel}>\n          <ol className=\"kz-tpl-crumbs\">\n            {breadcrumb.map((c) => (\n              <li key={c.href}>\n                <L href={c.href}>{c.label}</L>\n              </li>\n            ))}\n          </ol>\n        </nav>\n      )}\n      <h1 className=\"kz-tpl-article-title\">{title}</h1>\n      {lead && <p className=\"kz-tpl-article-lead\">{lead}</p>}\n      {facts && facts.length > 0 && <Facts className=\"kz-tpl-article-meta\" items={facts} />}\n      <div className=\"kz-tpl-prose\">{children}</div>\n      {pager && (pager.previous || pager.next) && (\n        <nav className=\"kz-tpl-pager\" aria-label={`${pager.labels.previous} · ${pager.labels.next}`}>\n          {pager.previous && (\n            <L href={pager.previous.href} rel=\"prev\">\n              <small>{pager.labels.previous}</small>\n              {pager.previous.title}\n            </L>\n          )}\n          {pager.next && (\n            <L href={pager.next.href} rel=\"next\">\n              <small>{pager.labels.next}</small>\n              {pager.next.title}\n            </L>\n          )}\n        </nav>\n      )}\n    </DocsLayout>\n  );\n}\n"],"mappings":";AAGA,SAAS,kBAAkB;AAC3B,SAAoB,aAAa;AAEjC,SAAS,WAAW;AAgCsD,cAmB9D,YAnB8D;AAHnE,SAAS,gBAAgB,EAAE,SAAS,cAAc,YAAY,kBAAkB,cAAc,OAAO,MAAM,OAAO,KAAK,OAAO,QAAQ,UAAU,GAAG,MAAM,GAAyB;AACvL,QAAM,IAAK,UAAU;AACrB,SACE,qBAAC,cAAW,SAAkB,cAA4B,KAAK,OAAO,oBAAC,OAAI,OAAO,IAAI,OAAO,OAAO,IAAI,OAAO,GAAK,GAAG,OACpH;AAAA,kBAAc,WAAW,SAAS,KACjC,oBAAC,SAAI,cAAY,iBACf,8BAAC,QAAG,WAAU,iBACX,qBAAW,IAAI,CAAC,MACf,oBAAC,QACC,8BAAC,KAAE,MAAM,EAAE,MAAO,YAAE,OAAM,KADnB,EAAE,IAEX,CACD,GACH,GACF;AAAA,IAEF,oBAAC,QAAG,WAAU,wBAAwB,iBAAM;AAAA,IAC3C,QAAQ,oBAAC,OAAE,WAAU,uBAAuB,gBAAK;AAAA,IACjD,SAAS,MAAM,SAAS,KAAK,oBAAC,SAAM,WAAU,uBAAsB,OAAO,OAAO;AAAA,IACnF,oBAAC,SAAI,WAAU,gBAAgB,UAAS;AAAA,IACvC,UAAU,MAAM,YAAY,MAAM,SACjC,qBAAC,SAAI,WAAU,gBAAe,cAAY,GAAG,MAAM,OAAO,QAAQ,SAAM,MAAM,OAAO,IAAI,IACtF;AAAA,YAAM,YACL,qBAAC,KAAE,MAAM,MAAM,SAAS,MAAM,KAAI,QAChC;AAAA,4BAAC,WAAO,gBAAM,OAAO,UAAS;AAAA,QAC7B,MAAM,SAAS;AAAA,SAClB;AAAA,MAED,MAAM,QACL,qBAAC,KAAE,MAAM,MAAM,KAAK,MAAM,KAAI,QAC5B;AAAA,4BAAC,WAAO,gBAAM,OAAO,MAAK;AAAA,QACzB,MAAM,KAAK;AAAA,SACd;AAAA,OAEJ;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/docs-hub-page.d.ts

@@ -0,0 +1,72 @@
+import { LinkComponent } from '@krizaka/ui/page-hero';
+import * as React from 'react';
+
+interface DocsCollection {
+    /** A stable key. */
+    id: string;
+    /** The product's brand (`orazaka`…): the panel wears `.brand-<id>`. */
+    brand?: string;
+    /** The product's mark. */
+    mark?: React.ReactNode;
+    /** The collection's name: a link to its home. */
+    title: string;
+    /** Where it starts. */
+    href: string;
+    /** What it covers, in one sentence. */
+    description?: React.ReactNode;
+    /** Its most useful pages (three or four). */
+    links?: readonly {
+        href: string;
+        label: string;
+    }[];
+}
+interface DocsHubLink {
+    /** Where it leads. */
+    href: string;
+    /** The page's title. */
+    title: React.ReactNode;
+    /** On the right, in mono: a collection, a version, a date. */
+    meta?: React.ReactNode;
+}
+type DocsHubPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** A mono line above the title. */
+    eyebrow?: React.ReactNode;
+    /** The page's `h1`. */
+    title: React.ReactNode;
+    /** One sentence under it. */
+    lead?: React.ReactNode;
+    /** The search, front and centre (a SearchField, a button that opens the command palette). */
+    search?: React.ReactNode;
+    /** Under the search: what people look for (a few links or keys). */
+    searchHints?: React.ReactNode;
+    /** The collections' heading. */
+    collectionsTitle: React.ReactNode;
+    /** The collections, each in its brand. */
+    collections: readonly DocsCollection[];
+    /** The quick starts: a title and their samples (CodeBlocks, CodeTabs). */
+    quickstarts?: {
+        title: React.ReactNode;
+        children: React.ReactNode;
+    };
+    /** The most read pages. */
+    popular?: {
+        title: React.ReactNode;
+        items: readonly DocsHubLink[];
+    };
+    /** What is new (releases from the registries, published pages). */
+    whatsNew?: {
+        title: React.ReactNode;
+        items: readonly DocsHubLink[];
+    };
+    /** The owl's promise at the foot: what this documentation guarantees. */
+    promise?: {
+        label: React.ReactNode;
+        text: React.ReactNode;
+    };
+    /** The app's link component (Next's `Link`) for internal addresses. */
+    linkAs?: LinkComponent;
+};
+/** A documentation hub: search first, the collections in their brand, quick starts, popular and new pages. */
+declare function DocsHubPage({ eyebrow, title, lead, search, searchHints, collectionsTitle, collections, quickstarts, popular, whatsNew, promise, linkAs, ...props }: DocsHubPageProps): React.JSX.Element;
+
+export { type DocsCollection, type DocsHubLink, DocsHubPage, type DocsHubPageProps };

package/dist/docs-hub-page.js

@@ -0,0 +1,45 @@
+// src/docs-hub-page/docs-hub-page.tsx
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+import { Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+function List({ items, linkAs: Link = "a" }) {
+  const L = Link;
+  return /* @__PURE__ */ jsx("ul", { className: "kz-tpl-links", children: items.map((item, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(L, { href: item.href, children: [
+    /* @__PURE__ */ jsx("strong", { children: item.title }),
+    item.meta && /* @__PURE__ */ jsx("small", { children: item.meta })
+  ] }) }, `${i}:${item.href}`)) });
+}
+function DocsHubPage({ eyebrow, title, lead, search, searchHints, collectionsTitle, collections, quickstarts, popular, whatsNew, promise, linkAs, ...props }) {
+  const L = linkAs ?? "a";
+  return /* @__PURE__ */ jsxs("div", { ...props, children: [
+    /* @__PURE__ */ jsx(PageHero, { eyebrow, title, lead, align: "center", backdrop: "grid", children: (search || searchHints) && /* @__PURE__ */ jsxs("div", { className: "kz-tpl-hub-search", children: [
+      search,
+      searchHints && /* @__PURE__ */ jsx("div", { className: "kz-tpl-hub-hints", children: searchHints })
+    ] }) }),
+    /* @__PURE__ */ jsx(Section, { id: "collections", title: collectionsTitle, headingSize: "sm", spacing: "sm", children: /* @__PURE__ */ jsx("ul", { className: "kz-tpl-collections", children: collections.map((c) => /* @__PURE__ */ jsx("li", { className: c.brand ? "brand-" + c.brand : void 0, children: /* @__PURE__ */ jsxs("div", { className: "kz-tpl-collection", children: [
+      /* @__PURE__ */ jsxs("div", { className: "kz-tpl-collection-head", children: [
+        c.mark && /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: c.mark }),
+        /* @__PURE__ */ jsx(L, { href: c.href, children: c.title })
+      ] }),
+      c.description && /* @__PURE__ */ jsx("p", { children: c.description }),
+      c.links && c.links.length > 0 && /* @__PURE__ */ jsx("ul", { "aria-label": c.title, children: c.links.map((l) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(L, { href: l.href, children: l.label }) }, l.href)) })
+    ] }) }, c.id)) }) }),
+    (quickstarts || popular) && /* @__PURE__ */ jsx(Section, { spacing: "sm", divider: true, "aria-label": typeof quickstarts?.title === "string" ? quickstarts.title : void 0, children: /* @__PURE__ */ jsxs("div", { className: "kz-tpl-two", children: [
+      quickstarts && /* @__PURE__ */ jsxs("div", { className: "kz-tpl-stack", children: [
+        /* @__PURE__ */ jsx("h2", { className: "kz-heading-title kz-tpl-h2", children: quickstarts.title }),
+        quickstarts.children
+      ] }),
+      popular && /* @__PURE__ */ jsxs("div", { className: "kz-tpl-stack", children: [
+        /* @__PURE__ */ jsx("h2", { className: "kz-heading-title kz-tpl-h2", children: popular.title }),
+        /* @__PURE__ */ jsx(List, { items: popular.items, linkAs })
+      ] })
+    ] }) }),
+    whatsNew && /* @__PURE__ */ jsx(Section, { id: "whats-new", title: whatsNew.title, headingSize: "sm", spacing: "sm", divider: true, children: /* @__PURE__ */ jsx(List, { items: whatsNew.items, linkAs }) }),
+    promise && /* @__PURE__ */ jsx(Section, { spacing: "sm", "aria-label": typeof promise.label === "string" ? promise.label : void 0, children: /* @__PURE__ */ jsx(MascotQuote, { variant: "callout", bird: "owl", mood: "welcome", label: promise.label, children: promise.text }) })
+  ] });
+}
+export {
+  DocsHubPage
+};
+//# sourceMappingURL=docs-hub-page.js.map

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/docs-layout.d.ts

@@ -0,0 +1,78 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const docsLayout: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            sidebar?: tailwind_variants.ClassValue;
+            mobileNav?: tailwind_variants.ClassValue;
+            mobileBody?: tailwind_variants.ClassValue;
+            article?: tailwind_variants.ClassValue;
+            toc?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            mobileSummary?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            sidebar?: tailwind_variants.ClassValue;
+            mobileNav?: tailwind_variants.ClassValue;
+            mobileBody?: tailwind_variants.ClassValue;
+            article?: tailwind_variants.ClassValue;
+            toc?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            mobileSummary?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    sidebar: string;
+    mobileNav: string;
+    mobileSummary: string;
+    mobileBody: string;
+    article: string;
+    toc: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            sidebar?: tailwind_variants.ClassValue;
+            mobileNav?: tailwind_variants.ClassValue;
+            mobileBody?: tailwind_variants.ClassValue;
+            article?: tailwind_variants.ClassValue;
+            toc?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            mobileSummary?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    sidebar: string;
+    mobileNav: string;
+    mobileSummary: string;
+    mobileBody: string;
+    article: string;
+    toc: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    sidebar: string;
+    mobileNav: string;
+    mobileSummary: string;
+    mobileBody: string;
+    article: string;
+    toc: string;
+}>>;
+type DocsLayoutProps = React.ComponentProps<"div"> & {
+    /** The pages of the documentation (a nav of links, grouped). */
+    sidebar: React.ReactNode;
+    /** On a phone the sidebar is folded: the words that open it (`Pages of the documentation`). */
+    sidebarLabel: string;
+    /** The page's table of contents (a `Toc` of @krizaka/ui/toc): beside the article from `xl`. */
+    toc?: React.ReactNode;
+    /** The article: its title, its body. */
+    children: React.ReactNode;
+};
+/** A documentation page: pages · article · contents, in the site's frame. */
+declare function DocsLayout({ sidebar, sidebarLabel, toc, className, children, ...props }: DocsLayoutProps): React.JSX.Element;
+
+export { DocsLayout, type DocsLayoutProps, docsLayout };

package/dist/docs-layout.js

@@ -0,0 +1,60 @@
+// src/docs-layout/docs-layout.tsx
+import { tv } from "tailwind-variants";
+
+// src/glyphs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Glyph({ className = "h-4 w-4", fill, children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className,
+      fill: fill ? "currentColor" : "none",
+      stroke: fill ? "none" : "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      focusable: "false",
+      children
+    }
+  );
+}
+var ChevronGlyph = ({ direction = "down", ...p }) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: { left: "m15 6-6 6 6 6", right: "m9 6 6 6-6 6", up: "m6 15 6-6 6 6", down: "m6 9 6 6 6-6" }[direction] }) });
+
+// src/docs-layout/docs-layout.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var docsLayout = tv({
+  slots: {
+    root: "mx-auto grid w-full max-w-[calc(var(--kz-page-max-docs,88rem)+2*var(--kz-page-gutter,24px))] grid-cols-1 gap-8 px-(--kz-page-gutter,16px) pt-(--kz-hero-top,6rem) pb-16 lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_13rem]",
+    sidebar: "hidden lg:block lg:sticky lg:top-24 lg:max-h-[calc(100dvh-7rem)] lg:self-start lg:overflow-y-auto",
+    mobileNav: "rounded-xl border border-border-default bg-surface-1 lg:hidden",
+    mobileSummary: "flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 px-4 text-sm font-semibold text-fg [&::-webkit-details-marker]:hidden rounded-xl focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[open]>&>svg]:rotate-180",
+    mobileBody: "border-t border-border-subtle px-2 py-2",
+    article: "min-w-0 max-w-3xl",
+    toc: "hidden xl:block xl:sticky xl:top-24 xl:self-start"
+  }
+});
+var s = docsLayout();
+function DocsLayout({ sidebar, sidebarLabel, toc, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs2("div", { className: s.root({ className }), ...props, children: [
+    /* @__PURE__ */ jsx2("div", { className: s.sidebar(), children: sidebar }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col gap-6", children: [
+      /* @__PURE__ */ jsxs2("details", { className: s.mobileNav(), children: [
+        /* @__PURE__ */ jsxs2("summary", { className: s.mobileSummary(), children: [
+          sidebarLabel,
+          " ",
+          /* @__PURE__ */ jsx2(ChevronGlyph, { className: "h-4 w-4 transition-transform motion-reduce:transition-none" })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: s.mobileBody(), children: sidebar })
+      ] }),
+      /* @__PURE__ */ jsx2("article", { className: s.article(), children })
+    ] }),
+    toc && /* @__PURE__ */ jsx2("div", { className: s.toc(), children: toc })
+  ] });
+}
+export {
+  DocsLayout,
+  docsLayout
+};
+//# sourceMappingURL=docs-layout.js.map

package/dist/docs-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/docs-layout/docs-layout.tsx","../src/glyphs.tsx"],"sourcesContent":["// Server-safe. A documentation page in the site's frame (--kz-page-max-docs): the sidebar of pages, the article, the\n// table of contents — the three columns of the frame on a wide screen, the sidebar folded into a disclosure above the\n// article on a phone, the contents under the title as chips (a `Toc`). Its edges are the bar's: no column runs to the\n// window's edge.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronGlyph } from \"../glyphs\";\n\nexport const docsLayout = tv({\n  slots: {\n    root:\n      \"mx-auto grid w-full max-w-[calc(var(--kz-page-max-docs,88rem)+2*var(--kz-page-gutter,24px))] grid-cols-1 gap-8 px-(--kz-page-gutter,16px) \" +\n      \"pt-(--kz-hero-top,6rem) pb-16 lg:grid-cols-[15rem_minmax(0,1fr)] xl:grid-cols-[15rem_minmax(0,1fr)_13rem]\",\n    sidebar: \"hidden lg:block lg:sticky lg:top-24 lg:max-h-[calc(100dvh-7rem)] lg:self-start lg:overflow-y-auto\",\n    mobileNav: \"rounded-xl border border-border-default bg-surface-1 lg:hidden\",\n    mobileSummary:\n      \"flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 px-4 text-sm font-semibold text-fg [&::-webkit-details-marker]:hidden \" +\n      \"rounded-xl focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[open]>&>svg]:rotate-180\",\n    mobileBody: \"border-t border-border-subtle px-2 py-2\",\n    article: \"min-w-0 max-w-3xl\",\n    toc: \"hidden xl:block xl:sticky xl:top-24 xl:self-start\",\n  },\n});\nconst s = docsLayout();\n\nexport type DocsLayoutProps = React.ComponentProps<\"div\"> & {\n  /** The pages of the documentation (a nav of links, grouped). */\n  sidebar: React.ReactNode;\n  /** On a phone the sidebar is folded: the words that open it (`Pages of the documentation`). */\n  sidebarLabel: string;\n  /** The page's table of contents (a `Toc` of @krizaka/ui/toc): beside the article from `xl`. */\n  toc?: React.ReactNode;\n  /** The article: its title, its body. */\n  children: React.ReactNode;\n};\n\n/** A documentation page: pages · article · contents, in the site's frame. */\nexport function DocsLayout({ sidebar, sidebarLabel, toc, className, children, ...props }: DocsLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <div className={s.sidebar()}>{sidebar}</div>\n      <div className=\"flex min-w-0 flex-col gap-6\">\n        <details className={s.mobileNav()}>\n          <summary className={s.mobileSummary()}>\n            {sidebarLabel} <ChevronGlyph className=\"h-4 w-4 transition-transform motion-reduce:transition-none\" />\n          </summary>\n          <div className={s.mobileBody()}>{sidebar}</div>\n        </details>\n        <article className={s.article()}>{children}</article>\n      </div>\n      {toc && <div className={s.toc()}>{toc}</div>}\n    </div>\n  );\n}\n","// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill={fill ? \"currentColor\" : \"none\"}\n      stroke={fill ? \"none\" : \"currentColor\"}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n  </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n  </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n  <Glyph {...p}>\n    <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n    {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n  </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n  <Glyph {...p}>\n    {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n  </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n  </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n  </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n  <Glyph {...p}>\n    <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n  </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 5v14M5 12h14\" />\n  </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n    <path d=\"M3 10h18M8 3v4M16 3v4\" />\n  </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n    <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n  </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n    <path d=\"M14 3v5h5\" />\n  </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n    <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n  </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n    <path d=\"M18 3v4h-4M6 21v-4h4\" />\n  </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n    <path d=\"M4 4v4.5h4.5\" />\n  </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n  <Glyph {...p}>\n    {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n  </Glyph>\n);\nexport const ArrowGlyph = ({ direction = \"right\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" }) => (\n  <Glyph {...p}>\n    <path d={direction === \"left\" ? \"M19 12H5m0 0 6-6m-6 6 6 6\" : \"M5 12h14m0 0-6-6m6 6-6 6\"} />\n  </Glyph>\n);\nexport const ExternalGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 4h6v6M20 4l-9 9\" />\n    <path d=\"M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4\" />\n  </Glyph>\n);\nexport const WarningGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 4 2.5 20h19L12 4Z\" />\n    <path d=\"M12 10v4M12 17.2v.1\" />\n  </Glyph>\n);\nexport const CopyGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n    <path d=\"M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3\" />\n  </Glyph>\n);\n"],"mappings":";AAKA,SAAS,UAAU;;;ACIf,cAsBF,YAtBE;AAFJ,SAAS,MAAM,EAAE,YAAY,WAAW,MAAM,SAAS,GAA+D;AACpH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA,MAAM,OAAO,iBAAiB;AAAA,MAC9B,QAAQ,OAAO,SAAS;AAAA,MACxB,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MACX,WAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;AA+CO,IAAM,eAAe,CAAC,EAAE,YAAY,QAAQ,GAAG,EAAE,MACtD,oBAAC,SAAO,GAAG,GACT,8BAAC,UAAK,GAAG,EAAE,MAAM,iBAAiB,OAAO,gBAAgB,IAAI,iBAAiB,MAAM,eAAe,EAAE,SAAS,GAAG,GACnH;;;ADhCI,gBAAAA,MAGI,QAAAC,aAHJ;AAhCC,IAAM,aAAa,GAAG;AAAA,EAC3B,OAAO;AAAA,IACL,MACE;AAAA,IAEF,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eACE;AAAA,IAEF,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,KAAK;AAAA,EACP;AACF,CAAC;AACD,IAAM,IAAI,WAAW;AAcd,SAAS,WAAW,EAAE,SAAS,cAAc,KAAK,WAAW,UAAU,GAAG,MAAM,GAAoB;AACzG,SACE,gBAAAA,MAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,oBAAAD,KAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IACtC,gBAAAC,MAAC,SAAI,WAAU,+BACb;AAAA,sBAAAA,MAAC,aAAQ,WAAW,EAAE,UAAU,GAC9B;AAAA,wBAAAA,MAAC,aAAQ,WAAW,EAAE,cAAc,GACjC;AAAA;AAAA,UAAa;AAAA,UAAC,gBAAAD,KAAC,gBAAa,WAAU,8DAA6D;AAAA,WACtG;AAAA,QACA,gBAAAA,KAAC,SAAI,WAAW,EAAE,WAAW,GAAI,mBAAQ;AAAA,SAC3C;AAAA,MACA,gBAAAA,KAAC,aAAQ,WAAW,EAAE,QAAQ,GAAI,UAAS;AAAA,OAC7C;AAAA,IACC,OAAO,gBAAAA,KAAC,SAAI,WAAW,EAAE,IAAI,GAAI,eAAI;AAAA,KACxC;AAEJ;","names":["jsx","jsxs"]}

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/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];