@krizaka/ui 2.9.0 → 3.0.0

package/registry/examples/data-table/filters.js

@@ -0,0 +1,40 @@
+"use client";
+
+// registry/examples/data-table/filters.tsx
+import { DataTable, DataTableColumnsMenu, DataTableExport, DataTableFilters } from "@krizaka/ui/data-table";
+import { jsx, jsxs } from "react/jsx-runtime";
+var videos = Array.from({ length: 36 }, (_, i) => ({
+  id: `v${i + 1}`,
+  title: ["Sunset over Montr\xE9al", "Behind the scenes", "Studio tour", "Live Q&A replay"][i % 4] + ` #${i + 1}`,
+  creator: ["Elena Varga", "Noah Petit", "Maya Chen"][i % 3],
+  status: ["Public", "Followers", "Draft"][i % 3 === 2 ? 2 : i % 2],
+  views: i * 7919 % 2e4
+}));
+var columns = [
+  { id: "title", header: "Title", sortable: true, card: "title", filter: "text" },
+  { id: "creator", header: "Creator", filter: "facet" },
+  { id: "status", header: "Visibility", filter: "facet" },
+  { id: "views", header: "Views", sortable: true, align: "end", filter: "range", cell: (v) => v.views.toLocaleString("en") }
+];
+function DataTableFiltersExample() {
+  return /* @__PURE__ */ jsx(
+    DataTable,
+    {
+      caption: "Videos",
+      rows: videos,
+      columns,
+      getRowId: (v) => v.id,
+      defaultPageSize: 8,
+      toolbar: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx(DataTableFilters, {}),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(DataTableColumnsMenu, {}),
+          /* @__PURE__ */ jsx(DataTableExport, { filename: "videos.csv" })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  DataTableFiltersExample as default
+};

package/registry/examples/data-table/filters.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { DataTable, type DataTableColumn, DataTableColumnsMenu, DataTableExport, DataTableFilters } from "@krizaka/ui/data-table";
+
+type Video = { id: string; title: string; creator: string; status: string; views: number };
+const videos: Video[] = Array.from({ length: 36 }, (_, i) => ({
+  id: `v${i + 1}`,
+  title: ["Sunset over Montréal", "Behind the scenes", "Studio tour", "Live Q&A replay"][i % 4]! + ` #${i + 1}`,
+  creator: ["Elena Varga", "Noah Petit", "Maya Chen"][i % 3]!,
+  status: ["Public", "Followers", "Draft"][i % 3 === 2 ? 2 : i % 2]!,
+  views: (i * 7919) % 20_000,
+}));
+const columns: DataTableColumn<Video>[] = [
+  { id: "title", header: "Title", sortable: true, card: "title", filter: "text" },
+  { id: "creator", header: "Creator", filter: "facet" },
+  { id: "status", header: "Visibility", filter: "facet" },
+  { id: "views", header: "Views", sortable: true, align: "end", filter: "range", cell: (v) => v.views.toLocaleString("en") },
+];
+
+// A search, facets with their counts, a range, the filters as chips; hide columns, export what is shown.
+export default function DataTableFiltersExample() {
+  return (
+    <DataTable
+      caption="Videos"
+      rows={videos}
+      columns={columns}
+      getRowId={(v) => v.id}
+      defaultPageSize={8}
+      toolbar={
+        <div className="flex flex-col gap-3">
+          <DataTableFilters />
+          <div className="flex justify-end gap-2">
+            <DataTableColumnsMenu />
+            <DataTableExport filename="videos.csv" />
+          </div>
+        </div>
+      }
+    />
+  );
+}

package/registry/examples/data-table/grouped.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/data-table/grouped.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/data-table/grouped.tsx
+import { DataTable } from "@krizaka/ui/data-table";
+import { jsx } from "react/jsx-runtime";
+var tips = [
+  { id: "t1", creator: "Elena Varga", fan: "marco_v", cents: 500 },
+  { id: "t2", creator: "Elena Varga", fan: "ana.lu", cents: 1500 },
+  { id: "t3", creator: "Noah Petit", fan: "kenji", cents: 300 },
+  { id: "t4", creator: "Maya Chen", fan: "marco_v", cents: 2e3 },
+  { id: "t5", creator: "Noah Petit", fan: "zoe", cents: 700 }
+];
+var money = (cents) => (cents / 100).toLocaleString("en", { style: "currency", currency: "USD" });
+var columns = [
+  { id: "creator", header: "Creator", groupable: true, card: "title" },
+  { id: "fan", header: "From" },
+  { id: "cents", header: "Amount", align: "end", cell: (t) => money(t.cents), aggregate: (rows) => money(rows.reduce((sum, t) => sum + t.cents, 0)) }
+];
+function DataTableGrouped() {
+  return /* @__PURE__ */ jsx(DataTable, { caption: "Tips this week", rows: tips, columns, getRowId: (t) => t.id, defaultGroupBy: ["creator"], defaultExpanded: { "creator:Elena Varga": true } });
+}
+export {
+  DataTableGrouped as default
+};

package/registry/examples/data-table/grouped.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { DataTable, type DataTableColumn } from "@krizaka/ui/data-table";
+
+type Tip = { id: string; creator: string; fan: string; cents: number };
+const tips: Tip[] = [
+  { id: "t1", creator: "Elena Varga", fan: "marco_v", cents: 500 },
+  { id: "t2", creator: "Elena Varga", fan: "ana.lu", cents: 1500 },
+  { id: "t3", creator: "Noah Petit", fan: "kenji", cents: 300 },
+  { id: "t4", creator: "Maya Chen", fan: "marco_v", cents: 2000 },
+  { id: "t5", creator: "Noah Petit", fan: "zoe", cents: 700 },
+];
+const money = (cents: number) => (cents / 100).toLocaleString("en", { style: "currency", currency: "USD" });
+const columns: DataTableColumn<Tip>[] = [
+  { id: "creator", header: "Creator", groupable: true, card: "title" },
+  { id: "fan", header: "From" },
+  { id: "cents", header: "Amount", align: "end", cell: (t) => money(t.cents), aggregate: (rows) => money(rows.reduce((sum, t) => sum + t.cents, 0)) },
+];
+
+// Grouped by creator: a row per group with its count and its total, opened to see the tips.
+export default function DataTableGrouped() {
+  return <DataTable caption="Tips this week" rows={tips} columns={columns} getRowId={(t) => t.id} defaultGroupBy={["creator"]} defaultExpanded={{ "creator:Elena Varga": true }} />;
+}

package/registry/examples/data-table/paginated.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/data-table/paginated.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/data-table/paginated.tsx
+import { DataTable } from "@krizaka/ui/data-table";
+import { jsx } from "react/jsx-runtime";
+var invoices = Array.from({ length: 87 }, (_, i) => ({
+  id: `INV-2026-${String(i + 1).padStart(4, "0")}`,
+  customer: ["Atelier Lumen", "Northwind Studio", "Caf\xE9 Br\xFBl\xE9", "Kite & Co"][i % 4],
+  issued: `2026-${String(1 + i % 9).padStart(2, "0")}-${String(1 + i % 27).padStart(2, "0")}`,
+  total: i * 4111 % 12e4 / 100
+}));
+var columns = [
+  { id: "id", header: "Invoice", sortable: true, card: "title" },
+  { id: "customer", header: "Customer", sortable: true },
+  { id: "issued", header: "Issued", sortable: true },
+  { id: "total", header: "Total", sortable: true, align: "end", cell: (r) => `\u20AC${r.total.toFixed(2)}` }
+];
+function DataTablePaginated() {
+  return /* @__PURE__ */ jsx(DataTable, { caption: "Invoices", rows: invoices, columns, getRowId: (r) => r.id, defaultPageSize: 10, pageSizeOptions: [10, 25, 50] });
+}
+export {
+  DataTablePaginated as default
+};

package/registry/examples/data-table/paginated.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { DataTable, type DataTableColumn } from "@krizaka/ui/data-table";
+
+type Invoice = { id: string; customer: string; issued: string; total: number };
+const invoices: Invoice[] = Array.from({ length: 87 }, (_, i) => ({
+  id: `INV-2026-${String(i + 1).padStart(4, "0")}`,
+  customer: ["Atelier Lumen", "Northwind Studio", "Café Brûlé", "Kite & Co"][i % 4]!,
+  issued: `2026-${String(1 + (i % 9)).padStart(2, "0")}-${String(1 + (i % 27)).padStart(2, "0")}`,
+  total: ((i * 4111) % 120_000) / 100,
+}));
+const columns: DataTableColumn<Invoice>[] = [
+  { id: "id", header: "Invoice", sortable: true, card: "title" },
+  { id: "customer", header: "Customer", sortable: true },
+  { id: "issued", header: "Issued", sortable: true },
+  { id: "total", header: "Total", sortable: true, align: "end", cell: (r) => `€${r.total.toFixed(2)}` },
+];
+
+// Pages in the browser: the pagination under the table, the rows per page to choose; a sort goes back to page 1.
+export default function DataTablePaginated() {
+  return <DataTable caption="Invoices" rows={invoices} columns={columns} getRowId={(r) => r.id} defaultPageSize={10} pageSizeOptions={[10, 25, 50]} />;
+}

package/registry/examples/data-table/pinned.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/data-table/pinned.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/data-table/pinned.tsx
+import { DataTable } from "@krizaka/ui/data-table";
+import { jsx } from "react/jsx-runtime";
+var models = [
+  { id: "m1", name: "Llama 3.3 70B", provider: "Self-hosted", input: 0.23, output: 0.4, context: 128, latency: 420, region: "eu-west" },
+  { id: "m2", name: "Mistral Large", provider: "Mistral", input: 2, output: 6, context: 128, latency: 380, region: "eu-west" },
+  { id: "m3", name: "Qwen 2.5 Coder", provider: "Self-hosted", input: 0.12, output: 0.2, context: 32, latency: 210, region: "eu-central" }
+];
+var usd = (n) => `$${n.toFixed(2)}`;
+var columns = [
+  { id: "name", header: "Model", width: 180, card: "title" },
+  { id: "provider", header: "Provider", width: 140 },
+  { id: "input", header: "Input / 1M", width: 130, align: "end", cell: (m) => usd(m.input) },
+  { id: "output", header: "Output / 1M", width: 130, align: "end", cell: (m) => usd(m.output) },
+  { id: "context", header: "Context", width: 110, align: "end", cell: (m) => `${m.context}k` },
+  { id: "latency", header: "Latency", width: 110, align: "end", cell: (m) => `${m.latency} ms` },
+  { id: "region", header: "Region", width: 130 }
+];
+function DataTablePinned() {
+  return /* @__PURE__ */ jsx(DataTable, { caption: "Model pricing", rows: models, columns, getRowId: (m) => m.id, pinning: { start: ["name"] }, resizing: true, layout: "table" });
+}
+export {
+  DataTablePinned as default
+};

package/registry/examples/data-table/pinned.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { DataTable, type DataTableColumn } from "@krizaka/ui/data-table";
+
+type Model = { id: string; name: string; provider: string; input: number; output: number; context: number; latency: number; region: string };
+const models: Model[] = [
+  { id: "m1", name: "Llama 3.3 70B", provider: "Self-hosted", input: 0.23, output: 0.4, context: 128, latency: 420, region: "eu-west" },
+  { id: "m2", name: "Mistral Large", provider: "Mistral", input: 2, output: 6, context: 128, latency: 380, region: "eu-west" },
+  { id: "m3", name: "Qwen 2.5 Coder", provider: "Self-hosted", input: 0.12, output: 0.2, context: 32, latency: 210, region: "eu-central" },
+];
+const usd = (n: number) => `$${n.toFixed(2)}`;
+const columns: DataTableColumn<Model>[] = [
+  { id: "name", header: "Model", width: 180, card: "title" },
+  { id: "provider", header: "Provider", width: 140 },
+  { id: "input", header: "Input / 1M", width: 130, align: "end", cell: (m) => usd(m.input) },
+  { id: "output", header: "Output / 1M", width: 130, align: "end", cell: (m) => usd(m.output) },
+  { id: "context", header: "Context", width: 110, align: "end", cell: (m) => `${m.context}k` },
+  { id: "latency", header: "Latency", width: 110, align: "end", cell: (m) => `${m.latency} ms` },
+  { id: "region", header: "Region", width: 130 },
+];
+
+// A wide table: the name stays at the start while it scrolls sideways; drag (or ← →) a header's edge to resize.
+export default function DataTablePinned() {
+  return <DataTable caption="Model pricing" rows={models} columns={columns} getRowId={(m) => m.id} pinning={{ start: ["name"] }} resizing layout="table" />;
+}

package/registry/examples/data-table/server.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/data-table/server.js

@@ -0,0 +1,40 @@
+"use client";
+
+// registry/examples/data-table/server.tsx
+import { configureKrizakaFetch, defineKeys, keepPreviousData, krizakaFetch, KrizakaQueryProvider, useQuery } from "@krizaka/query";
+import { DataTable, DataTableFilters } from "@krizaka/ui/data-table";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var ALL = Array.from({ length: 240 }, (_, i) => ({ id: `po-${1e3 + i}`, creator: ["Elena Varga", "Noah Petit", "Maya Chen"][i % 3], status: ["paid", "pending", "failed"][i % 4 % 3], amount: i * 7919 % 9e4 / 100 }));
+async function fakeApi(input) {
+  const q = new URL(String(input), "https://api.example").searchParams;
+  const [by, dir] = (q.get("sort") ?? "id:ascending").split(":");
+  const rows = ALL.filter((p) => !q.get("status") || q.get("status").split(",").includes(p.status)).sort((a, b) => (a[by] > b[by] ? 1 : -1) * (dir === "descending" ? -1 : 1));
+  const [page, size] = [Number(q.get("page")), Number(q.get("size"))];
+  return Response.json({ rows: rows.slice((page - 1) * size, page * size), total: rows.length });
+}
+var payoutKeys = defineKeys("payouts", { list: (query) => [query] });
+var columns = [
+  { id: "id", header: "Payout", sortable: true, card: "title" },
+  { id: "creator", header: "Creator", sortable: true },
+  { id: "status", header: "Status", filter: "facet", options: [{ value: "paid", label: "Paid" }, { value: "pending", label: "Pending" }, { value: "failed", label: "Failed" }] },
+  { id: "amount", header: "Amount", sortable: true, align: "end", cell: (p) => `$${p.amount.toFixed(2)}` }
+];
+var NONE = [];
+function Payouts() {
+  const [query, setQuery] = useState({ sort: null, filters: {}, page: 1, pageSize: 10 });
+  const { data, isPending, error } = useQuery({
+    queryKey: payoutKeys.list(query),
+    queryFn: ({ signal }) => krizakaFetch("/api/payouts", { signal, query: { sort: query.sort && `${query.sort.column}:${query.sort.direction}`, status: query.filters.status, page: query.page, size: query.pageSize } }),
+    placeholderData: keepPreviousData,
+    meta: { list: true }
+  });
+  return /* @__PURE__ */ jsx(DataTable, { caption: "Payouts", rows: data?.rows ?? NONE, columns, getRowId: (p) => p.id, manual: { sorting: true, filtering: true, pagination: true }, rowCount: data?.total, defaultPageSize: 10, onStateChange: setQuery, loading: isPending, error: error?.message, toolbar: /* @__PURE__ */ jsx(DataTableFilters, {}) });
+}
+function DataTableServer() {
+  useState(() => configureKrizakaFetch({ fetch: fakeApi }));
+  return /* @__PURE__ */ jsx(KrizakaQueryProvider, { children: /* @__PURE__ */ jsx(Payouts, {}) });
+}
+export {
+  DataTableServer as default
+};

package/registry/examples/data-table/server.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { configureKrizakaFetch, defineKeys, keepPreviousData, krizakaFetch, KrizakaQueryProvider, useQuery } from "@krizaka/query";
+import { DataTable, type DataTableColumn, DataTableFilters, type DataTableQuery } from "@krizaka/ui/data-table";
+import { useState } from "react";
+
+type Payout = { id: string; creator: string; status: string; amount: number };
+const ALL: Payout[] = Array.from({ length: 240 }, (_, i) => ({ id: `po-${1000 + i}`, creator: ["Elena Varga", "Noah Petit", "Maya Chen"][i % 3]!, status: ["paid", "pending", "failed"][i % 4 % 3]!, amount: ((i * 7919) % 90_000) / 100 }));
+// The API, faked in the page: it sorts, filters and pages — the table shows what it answers.
+async function fakeApi(input: RequestInfo | URL) {
+  const q = new URL(String(input), "https://api.example").searchParams;
+  const [by, dir] = (q.get("sort") ?? "id:ascending").split(":") as [keyof Payout, string];
+  const rows = ALL.filter((p) => !q.get("status") || q.get("status")!.split(",").includes(p.status)).sort((a, b) => (a[by] > b[by] ? 1 : -1) * (dir === "descending" ? -1 : 1));
+  const [page, size] = [Number(q.get("page")), Number(q.get("size"))];
+  return Response.json({ rows: rows.slice((page - 1) * size, page * size), total: rows.length });
+}
+const payoutKeys = defineKeys("payouts", { list: (query: DataTableQuery) => [query] });
+const columns: DataTableColumn<Payout>[] = [
+  { id: "id", header: "Payout", sortable: true, card: "title" },
+  { id: "creator", header: "Creator", sortable: true },
+  { id: "status", header: "Status", filter: "facet", options: [{ value: "paid", label: "Paid" }, { value: "pending", label: "Pending" }, { value: "failed", label: "Failed" }] },
+  { id: "amount", header: "Amount", sortable: true, align: "end", cell: (p) => `$${p.amount.toFixed(2)}` },
+];
+const NONE: Payout[] = [];
+function Payouts() {
+  const [query, setQuery] = useState<DataTableQuery>({ sort: null, filters: {}, page: 1, pageSize: 10 });
+  const { data, isPending, error } = useQuery({
+    queryKey: payoutKeys.list(query),
+    queryFn: ({ signal }) => krizakaFetch("/api/payouts", { signal, query: { sort: query.sort && `${query.sort.column}:${query.sort.direction}`, status: query.filters.status as string[] | undefined, page: query.page, size: query.pageSize } }) as Promise<{ rows: Payout[]; total: number }>,
+    placeholderData: keepPreviousData,
+    meta: { list: true },
+  });
+  return <DataTable caption="Payouts" rows={data?.rows ?? NONE} columns={columns} getRowId={(p) => p.id} manual={{ sorting: true, filtering: true, pagination: true }} rowCount={data?.total} defaultPageSize={10} onStateChange={setQuery} loading={isPending} error={error?.message} toolbar={<DataTableFilters />} />;
+}
+
+// Server mode: sort, filters and page go to the API (krizakaFetch, keys from defineKeys); the previous page stays while the next loads.
+export default function DataTableServer() {
+  useState(() => configureKrizakaFetch({ fetch: fakeApi as typeof fetch }));
+  return <KrizakaQueryProvider><Payouts /></KrizakaQueryProvider>;
+}

package/registry/examples/data-table/virtualized.js

@@ -3,7 +3,7 @@
 // registry/examples/data-table/virtualized.tsx
 import { DataTable } from "@krizaka/ui/data-table";
 import { jsx } from "react/jsx-runtime";
-var events = Array.from({ length: 5e3 }, (_, i) => ({
+var events = Array.from({ length: 5e4 }, (_, i) => ({
   id: `evt-${i + 1}`,
   kind: ["view", "tip", "follow", "comment"][i % 4],
   at: `2026-10-${String(1 + i % 11).padStart(2, "0")} ${String(i % 24).padStart(2, "0")}:00`
@@ -14,7 +14,7 @@ var columns = [
   { id: "at", header: "At", align: "end" }
 ];
 function DataTableVirtualized() {
-  return /* @__PURE__ */ jsx(DataTable, { caption: "Events", rows: events, columns, getRowId: (e) => e.id, virtualize: { rowHeight: 44, height: 320 }, density: "compact" });
+  return /* @__PURE__ */ jsx(DataTable, { caption: "Events", rows: events, columns, getRowId: (e) => e.id, virtualized: { height: 320, estimateRowHeight: 37 }, density: "compact" });
 }
 export {
   DataTableVirtualized as default

package/registry/examples/data-table/virtualized.tsx

@@ -3,7 +3,7 @@
 import { DataTable, type DataTableColumn } from "@krizaka/ui/data-table";
 
 type Event = { id: string; kind: string; at: string };
-const events: Event[] = Array.from({ length: 5000 }, (_, i) => ({
+const events: Event[] = Array.from({ length: 50_000 }, (_, i) => ({
   id: `evt-${i + 1}`,
   kind: ["view", "tip", "follow", "comment"][i % 4]!,
   at: `2026-10-${String(1 + (i % 11)).padStart(2, "0")} ${String(i % 24).padStart(2, "0")}:00`,
@@ -14,7 +14,7 @@ const columns: DataTableColumn<Event>[] = [
   { id: "at", header: "At", align: "end" },
 ];
 
-// 5,000 rows, ~20 rendered: the body scrolls, the header stays.
+// 50,000 rows, ~20 rendered: the body scrolls, the header stays, the sort runs on all of them.
 export default function DataTableVirtualized() {
-  return <DataTable caption="Events" rows={events} columns={columns} getRowId={(e) => e.id} virtualize={{ rowHeight: 44, height: 320 }} density="compact" />;
+  return <DataTable caption="Events" rows={events} columns={columns} getRowId={(e) => e.id} virtualized={{ height: 320, estimateRowHeight: 37 }} density="compact" />;
 }

package/registry/examples/docs-article-page/cli.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/docs-article-page/cli.js

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/docs-article-page/cli.tsx
+import { CodeBlock } from "@krizaka/ui/code-block";
+import { DocsArticlePage } from "@krizaka/ui/docs-article-page";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PAGES = ["Getting started", "The CLI", "Packs & Studios"];
+function DocsArticlePageCli() {
+  return /* @__PURE__ */ jsxs(
+    DocsArticlePage,
+    {
+      className: "brand-orazaka pt-6",
+      sidebarLabel: "Pages of the documentation",
+      sidebar: /* @__PURE__ */ jsx("nav", { "aria-label": "Orazaka documentation", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1 text-sm", children: PAGES.map((p, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: `#p${i}`, "aria-current": i === 1 ? "page" : void 0, className: "block rounded-md px-3 py-2 text-fg-secondary no-underline hover:bg-surface-2 aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg", children: p }) }, p)) }) }),
+      breadcrumb: [{ href: "#docs", label: "Docs" }, { href: "#orazaka", label: "Orazaka" }],
+      title: "The CLI",
+      lead: "Install, start and develop Orazaka from one command line.",
+      facts: [{ label: "Updated 11 Oct 2026" }, { label: "4 min read" }],
+      toc: { label: "On this page", items: [{ id: "install", label: "Install" }, { id: "start", label: "Start" }] },
+      pager: { previous: { href: "#p0", title: "Getting started" }, next: { href: "#p2", title: "Packs & Studios" }, labels: { previous: "Previous", next: "Next" } },
+      children: [
+        /* @__PURE__ */ jsx("h2", { id: "install", children: "Install" }),
+        /* @__PURE__ */ jsx("p", { children: "One command installs the engine, the console and the models you choose." }),
+        /* @__PURE__ */ jsx(CodeBlock, { code: "npx orazaka install", language: "bash", file: "Terminal", copyLabel: "Copy", copiedLabel: "Copied" }),
+        /* @__PURE__ */ jsx("h2", { id: "start", children: "Start" }),
+        /* @__PURE__ */ jsx("p", { children: "Then start it; the console opens on your machine." })
+      ]
+    }
+  );
+}
+export {
+  DocsArticlePageCli as default
+};

package/registry/examples/docs-article-page/cli.tsx

@@ -0,0 +1,38 @@
+import { CodeBlock } from "@krizaka/ui/code-block";
+import { DocsArticlePage } from "@krizaka/ui/docs-article-page";
+
+const PAGES = ["Getting started", "The CLI", "Packs & Studios"];
+
+// TEMPLATE — a documentation article (Orazaka's CLI): the pages, where it sits, its title and facts, the reading column,
+// the contents beside it, previous and next at the foot. On a phone the pages fold above the article.
+export default function DocsArticlePageCli() {
+  return (
+    <DocsArticlePage
+      className="brand-orazaka pt-6"
+      sidebarLabel="Pages of the documentation"
+      sidebar={
+        <nav aria-label="Orazaka documentation">
+          <ul className="flex flex-col gap-1 text-sm">
+            {PAGES.map((p, i) => (
+              <li key={p}>
+                <a href={`#p${i}`} aria-current={i === 1 ? "page" : undefined} className="block rounded-md px-3 py-2 text-fg-secondary no-underline hover:bg-surface-2 aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg">{p}</a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      }
+      breadcrumb={[{ href: "#docs", label: "Docs" }, { href: "#orazaka", label: "Orazaka" }]}
+      title="The CLI"
+      lead="Install, start and develop Orazaka from one command line."
+      facts={[{ label: "Updated 11 Oct 2026" }, { label: "4 min read" }]}
+      toc={{ label: "On this page", items: [{ id: "install", label: "Install" }, { id: "start", label: "Start" }] }}
+      pager={{ previous: { href: "#p0", title: "Getting started" }, next: { href: "#p2", title: "Packs & Studios" }, labels: { previous: "Previous", next: "Next" } }}
+    >
+      <h2 id="install">Install</h2>
+      <p>One command installs the engine, the console and the models you choose.</p>
+      <CodeBlock code="npx orazaka install" language="bash" file="Terminal" copyLabel="Copy" copiedLabel="Copied" />
+      <h2 id="start">Start</h2>
+      <p>Then start it; the console opens on your machine.</p>
+    </DocsArticlePage>
+  );
+}

package/registry/examples/docs-hub-page/krizaka.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/docs-hub-page/krizaka.js

@@ -0,0 +1,46 @@
+"use client";
+
+// registry/examples/docs-hub-page/krizaka.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { Button } from "@krizaka/ui/button";
+import { CodeBlock } from "@krizaka/ui/code-block";
+import { DocsHubPage } from "@krizaka/ui/docs-hub-page";
+import { Kbd } from "@krizaka/ui/kbd";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var COLLECTIONS = [
+  { id: "ui", title: "Krizaka UI", href: "#ui", mark: /* @__PURE__ */ jsx(ProductLogo, { id: "krizaka", size: 26, animated: false }), description: "Tokens, a Tailwind preset, the components \u2014 live, generated from their code.", links: [{ href: "#blocks", label: "Blocks" }, { href: "#layouts", label: "Layouts" }, { href: "#templates", label: "Templates" }] },
+  { id: "java", title: "Krizaka Java", href: "#java", mark: /* @__PURE__ */ jsx(ProductLogo, { id: "krizaka", size: 26, animated: false }), description: "Parent, BOM, starters, messaging, Problem Details.", links: [{ href: "#bom", label: "BOM" }, { href: "#messaging", label: "Messaging" }] },
+  { id: "orazaka", brand: "orazaka", title: "Orazaka", href: "#orazaka", mark: /* @__PURE__ */ jsx(ProductLogo, { id: "orazaka", size: 26, animated: false }), description: "The sovereign AI engine: install, packs, administration.", links: [{ href: "#cli", label: "CLI" }, { href: "#packs", label: "Packs" }, { href: "#admin", label: "Admin" }] },
+  { id: "orochia", brand: "orochia", title: "Orochia", href: "#orochia", mark: /* @__PURE__ */ jsx(ProductLogo, { id: "orochia", size: 26, animated: false }), description: "The creator platform: payments, auctions, the admin console.", links: [{ href: "#payouts", label: "Payouts" }, { href: "#console", label: "Console" }] }
+];
+function DocsHubPageKrizaka() {
+  return /* @__PURE__ */ jsx(
+    DocsHubPage,
+    {
+      eyebrow: "Documentation",
+      title: "Build with Krizaka",
+      lead: "Every building block the products are made of, documented from its source.",
+      search: /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "lg", shape: "cut", className: "w-full justify-between text-fg-secondary", children: [
+        "Search the documentation ",
+        /* @__PURE__ */ jsx(Kbd, { children: "\u2318K" })
+      ] }),
+      searchHints: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Try: ",
+        /* @__PURE__ */ jsx("a", { href: "#cli", children: "orazaka install" }),
+        " \xB7 ",
+        /* @__PURE__ */ jsx("a", { href: "#button", children: "Button" }),
+        " \xB7 ",
+        /* @__PURE__ */ jsx("a", { href: "#bom", children: "BOM" })
+      ] }),
+      collectionsTitle: "Collections",
+      collections: COLLECTIONS,
+      quickstarts: { title: "Start in one line", children: /* @__PURE__ */ jsx(CodeBlock, { code: "npx orazaka install", language: "bash", file: "Terminal", copyLabel: "Copy", copiedLabel: "Copied" }) },
+      popular: { title: "Most read", items: [{ href: "#cli", title: "The CLI", meta: "Orazaka" }, { href: "#button", title: "Button", meta: "Krizaka UI" }, { href: "#bom", title: "The BOM", meta: "Java" }] },
+      whatsNew: { title: "What's new", items: [{ href: "#ui-260", title: "Page blocks: frame, hero, cards, decisions", meta: "@krizaka/ui 2.6.0" }, { href: "#java-010", title: "The platform kit on Maven Central", meta: "0.1.0" }] },
+      promise: { label: "The owl's promise", text: "Every page here is generated from the code it documents \u2014 when the code changes, the page does." }
+    }
+  );
+}
+export {
+  DocsHubPageKrizaka as default
+};

package/registry/examples/docs-hub-page/krizaka.tsx

@@ -0,0 +1,37 @@
+import { ProductLogo } from "@krizaka/ui";
+import { Button } from "@krizaka/ui/button";
+import { CodeBlock } from "@krizaka/ui/code-block";
+import { DocsHubPage } from "@krizaka/ui/docs-hub-page";
+import { Kbd } from "@krizaka/ui/kbd";
+
+const COLLECTIONS = [
+  { id: "ui", title: "Krizaka UI", href: "#ui", mark: <ProductLogo id="krizaka" size={26} animated={false} />, description: "Tokens, a Tailwind preset, the components — live, generated from their code.", links: [{ href: "#blocks", label: "Blocks" }, { href: "#layouts", label: "Layouts" }, { href: "#templates", label: "Templates" }] },
+  { id: "java", title: "Krizaka Java", href: "#java", mark: <ProductLogo id="krizaka" size={26} animated={false} />, description: "Parent, BOM, starters, messaging, Problem Details.", links: [{ href: "#bom", label: "BOM" }, { href: "#messaging", label: "Messaging" }] },
+  { id: "orazaka", brand: "orazaka", title: "Orazaka", href: "#orazaka", mark: <ProductLogo id="orazaka" size={26} animated={false} />, description: "The sovereign AI engine: install, packs, administration.", links: [{ href: "#cli", label: "CLI" }, { href: "#packs", label: "Packs" }, { href: "#admin", label: "Admin" }] },
+  { id: "orochia", brand: "orochia", title: "Orochia", href: "#orochia", mark: <ProductLogo id="orochia" size={26} animated={false} />, description: "The creator platform: payments, auctions, the admin console.", links: [{ href: "#payouts", label: "Payouts" }, { href: "#console", label: "Console" }] },
+];
+
+// TEMPLATE — krizaka.com/docs: the search in the middle of the hero (⌘K), the collections each in its product's brand
+// with their quick links, a quick start beside the most read pages, what is new, the owl's promise. On a phone: search,
+// then one collection per row.
+export default function DocsHubPageKrizaka() {
+  return (
+    <DocsHubPage
+      eyebrow="Documentation"
+      title="Build with Krizaka"
+      lead="Every building block the products are made of, documented from its source."
+      search={
+        <Button variant="secondary" size="lg" shape="cut" className="w-full justify-between text-fg-secondary">
+          Search the documentation <Kbd>⌘K</Kbd>
+        </Button>
+      }
+      searchHints={<>Try: <a href="#cli">orazaka install</a> · <a href="#button">Button</a> · <a href="#bom">BOM</a></>}
+      collectionsTitle="Collections"
+      collections={COLLECTIONS}
+      quickstarts={{ title: "Start in one line", children: <CodeBlock code="npx orazaka install" language="bash" file="Terminal" copyLabel="Copy" copiedLabel="Copied" /> }}
+      popular={{ title: "Most read", items: [{ href: "#cli", title: "The CLI", meta: "Orazaka" }, { href: "#button", title: "Button", meta: "Krizaka UI" }, { href: "#bom", title: "The BOM", meta: "Java" }] }}
+      whatsNew={{ title: "What's new", items: [{ href: "#ui-260", title: "Page blocks: frame, hero, cards, decisions", meta: "@krizaka/ui 2.6.0" }, { href: "#java-010", title: "The platform kit on Maven Central", meta: "0.1.0" }] }}
+      promise={{ label: "The owl's promise", text: "Every page here is generated from the code it documents — when the code changes, the page does." }}
+    />
+  );
+}

package/registry/examples/error-page/not-found.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/error-page/not-found.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/error-page/not-found.tsx
+import { ActionBar } from "@krizaka/ui/action-bar";
+import { ErrorPage } from "@krizaka/ui/error-page";
+import { Mascot } from "@krizaka/ui/mascots";
+import { SearchField } from "@krizaka/ui/search-field";
+import { jsx } from "react/jsx-runtime";
+function ErrorPageNotFound() {
+  return /* @__PURE__ */ jsx(
+    ErrorPage,
+    {
+      code: "404",
+      mascot: /* @__PURE__ */ jsx(Mascot, { bird: "pigeon", mood: "empty", size: 96 }),
+      title: "This page took another road",
+      text: "The address may have changed. Search for it, or start again from one of these.",
+      search: /* @__PURE__ */ jsx(SearchField, { label: "Search the site", placeholder: "Search\u2026" }),
+      actions: /* @__PURE__ */ jsx(ActionBar, { label: "Ways back", primaryFirst: true, actions: [{ href: "#home", label: "Home" }, { href: "#docs", label: "Documentation" }, { href: "#contact", label: "Contact" }] })
+    }
+  );
+}
+export {
+  ErrorPageNotFound as default
+};

package/registry/examples/error-page/not-found.tsx

@@ -0,0 +1,19 @@
+import { ActionBar } from "@krizaka/ui/action-bar";
+import { ErrorPage } from "@krizaka/ui/error-page";
+import { Mascot } from "@krizaka/ui/mascots";
+import { SearchField } from "@krizaka/ui/search-field";
+
+// TEMPLATE — a page that is not there: the code drawn, the pigeon that lost its way, one sentence, a search, the ways
+// back. Never a dead end.
+export default function ErrorPageNotFound() {
+  return (
+    <ErrorPage
+      code="404"
+      mascot={<Mascot bird="pigeon" mood="empty" size={96} />}
+      title="This page took another road"
+      text="The address may have changed. Search for it, or start again from one of these."
+      search={<SearchField label="Search the site" placeholder="Search…" />}
+      actions={<ActionBar label="Ways back" primaryFirst actions={[{ href: "#home", label: "Home" }, { href: "#docs", label: "Documentation" }, { href: "#contact", label: "Contact" }]} />}
+    />
+  );
+}

package/registry/examples/gallery-page/made-here.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;