@krizaka/ui 2.8.0 → 2.10.0

package/registry/examples/detail-layout/video.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { DetailLayout } from "@krizaka/ui/detail-layout";
+import { Facts } from "@krizaka/ui/page";
+import { Stat } from "@krizaka/ui/stat";
+import { Tabs } from "@krizaka/ui/tabs";
+
+// TEMPLATE — one video in Orochia's studio: the way back to the list, its thumbnail, title and status, its facts, the
+// actions; the tabs (overview · sales · comments); the side panel with the price and the audience — under the content on
+// a phone, where the actions wrap under the title.
+export default function DetailLayoutVideo() {
+  return (
+    <div className="brand-orochia w-full">
+      <Tabs.Root defaultValue="overview">
+        <DetailLayout
+          back={<a href="#videos">← Videos</a>}
+          media={<div className="aspect-video w-40 bg-linear-to-br from-accent to-accent-2" />}
+          eyebrow="Video · v-2087"
+          title="Night shoot, part 2"
+          status={<Badge tone="success" dot>Published</Badge>}
+          meta={<Facts items={[{ label: "12:48" }, { label: "Unlock €4.99" }, { label: "18+ checked", tone: "ok" }]} />}
+          actions={
+            <>
+              <Button size="sm" variant="secondary" shape="cut">Edit</Button>
+              <Button size="sm" variant="primary" shape="cut">Share</Button>
+            </>
+          }
+          tabs={
+            <Tabs.List aria-label="Video">
+              <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+              <Tabs.Trigger value="sales">Sales</Tabs.Trigger>
+              <Tabs.Trigger value="comments">Comments</Tabs.Trigger>
+            </Tabs.List>
+          }
+          aside={
+            <div className="flex flex-col gap-4 rounded-xl border border-border-default bg-surface-1 p-4">
+              <Stat label="Unlocks" value="146" trend="up" trendLabel="+12" hint="7 days" />
+              <Stat label="Earned" value="€653" hint="after the 10 % fee" />
+            </div>
+          }
+        >
+          <Tabs.Content value="overview" className="text-sm leading-relaxed text-fg-secondary">
+            The second half of the night shoot in Old Montréal: the rooftop, the rain, the last take at dawn.
+          </Tabs.Content>
+          <Tabs.Content value="sales" className="text-sm text-fg-secondary">146 unlocks, 3 tips.</Tabs.Content>
+          <Tabs.Content value="comments" className="text-sm text-fg-secondary">28 comments, 2 waiting for moderation.</Tabs.Content>
+        </DetailLayout>
+      </Tabs.Root>
+    </div>
+  );
+}

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/docs-layout/page.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-layout/page.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/docs-layout/page.tsx
+import { DocsLayout } from "@krizaka/ui/docs-layout";
+import { Toc } from "@krizaka/ui/toc";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PAGES = ["Getting started", "Architecture", "API reference"];
+function DocsLayoutPage() {
+  return /* @__PURE__ */ jsxs(
+    DocsLayout,
+    {
+      className: "pt-6",
+      sidebarLabel: "Pages of the documentation",
+      sidebar: /* @__PURE__ */ jsx("nav", { "aria-label": "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: `#${i}`, "aria-current": i === 0 ? "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)) }) }),
+      toc: /* @__PURE__ */ jsx(Toc, { label: "On this page", items: [{ id: "install", label: "Install" }, { id: "run", label: "Run" }] }),
+      children: [
+        /* @__PURE__ */ jsx("h1", { className: "font-display text-3xl font-extrabold text-fg", children: "Getting started" }),
+        /* @__PURE__ */ jsx("h2", { id: "install", className: "mt-6 text-xl font-bold text-fg", children: "Install" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-fg-secondary", children: "npx orazaka install" })
+      ]
+    }
+  );
+}
+export {
+  DocsLayoutPage as default
+};

package/registry/examples/docs-layout/page.tsx

@@ -0,0 +1,30 @@
+import { DocsLayout } from "@krizaka/ui/docs-layout";
+import { Toc } from "@krizaka/ui/toc";
+
+const PAGES = ["Getting started", "Architecture", "API reference"];
+
+// A documentation page in the site's frame: pages · article · contents; on a phone the pages fold above the article.
+export default function DocsLayoutPage() {
+  return (
+    <DocsLayout
+      className="pt-6"
+      sidebarLabel="Pages of the documentation"
+      sidebar={
+        <nav aria-label="Documentation">
+          <ul className="flex flex-col gap-1 text-sm">
+            {PAGES.map((p, i) => (
+              <li key={p}>
+                <a href={`#${i}`} aria-current={i === 0 ? "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>
+      }
+      toc={<Toc label="On this page" items={[{ id: "install", label: "Install" }, { id: "run", label: "Run" }]} />}
+    >
+      <h1 className="font-display text-3xl font-extrabold text-fg">Getting started</h1>
+      <h2 id="install" className="mt-6 text-xl font-bold text-fg">Install</h2>
+      <p className="mt-2 text-sm text-fg-secondary">npx orazaka install</p>
+    </DocsLayout>
+  );
+}

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;

package/registry/examples/gallery-page/made-here.js

@@ -0,0 +1,34 @@
+"use client";
+
+// registry/examples/gallery-page/made-here.tsx
+import { ChipLink } from "@krizaka/ui/chip-link";
+import { cn } from "@krizaka/ui/cn";
+import { GalleryPage } from "@krizaka/ui/gallery-page";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PIECES = [
+  { id: "harbour", title: "Old harbour at dawn", caption: "Flux 1.1 \xB7 seed 4102 \xB7 38 s on a Mac mini", ratio: "aspect-[4/5]" },
+  { id: "loft", title: "A loft studio", caption: "Flux 1.1 \xB7 seed 77 \xB7 41 s", ratio: "aspect-video" },
+  { id: "market", title: "Jean-Talon market", caption: "Flux 1.1 \xB7 seed 905 \xB7 36 s", ratio: "aspect-square" },
+  { id: "snow", title: "First snow, Plateau", caption: "Flux 1.1 \xB7 seed 12 \xB7 39 s", ratio: "aspect-[3/4]" }
+];
+function GalleryPageMadeHere() {
+  return /* @__PURE__ */ jsx(
+    GalleryPage,
+    {
+      brand: "orazaka",
+      eyebrow: "Made on this Mac",
+      title: "Generated by Orazaka itself",
+      lead: "Every image here was made locally, with its prompt and its seed \u2014 nothing came from a cloud.",
+      filters: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ChipLink, { href: "#all", selected: true, children: "All" }),
+        /* @__PURE__ */ jsx(ChipLink, { href: "#images", children: "Images" }),
+        /* @__PURE__ */ jsx(ChipLink, { href: "#voice", children: "Voice" })
+      ] }),
+      galleryLabel: "Pieces",
+      items: PIECES.map((p) => ({ id: p.id, title: p.title, caption: p.caption, media: /* @__PURE__ */ jsx("div", { role: "img", "aria-label": p.title, className: cn(p.ratio, "w-full bg-linear-to-br from-accent to-accent-2") }) }))
+    }
+  );
+}
+export {
+  GalleryPageMadeHere as default
+};

package/registry/examples/gallery-page/made-here.tsx

@@ -0,0 +1,32 @@
+import { ChipLink } from "@krizaka/ui/chip-link";
+import { cn } from "@krizaka/ui/cn";
+import { GalleryPage } from "@krizaka/ui/gallery-page";
+
+const PIECES = [
+  { id: "harbour", title: "Old harbour at dawn", caption: "Flux 1.1 · seed 4102 · 38 s on a Mac mini", ratio: "aspect-[4/5]" },
+  { id: "loft", title: "A loft studio", caption: "Flux 1.1 · seed 77 · 41 s", ratio: "aspect-video" },
+  { id: "market", title: "Jean-Talon market", caption: "Flux 1.1 · seed 905 · 36 s", ratio: "aspect-square" },
+  { id: "snow", title: "First snow, Plateau", caption: "Flux 1.1 · seed 12 · 39 s", ratio: "aspect-[3/4]" },
+];
+
+// TEMPLATE — a demo gallery (Orazaka's « Made on this Mac »): the filters as links (the address keeps the choice), the
+// pieces in staggered columns with how each was made. One column on a phone.
+export default function GalleryPageMadeHere() {
+  return (
+    <GalleryPage
+      brand="orazaka"
+      eyebrow="Made on this Mac"
+      title="Generated by Orazaka itself"
+      lead="Every image here was made locally, with its prompt and its seed — nothing came from a cloud."
+      filters={
+        <>
+          <ChipLink href="#all" selected>All</ChipLink>
+          <ChipLink href="#images">Images</ChipLink>
+          <ChipLink href="#voice">Voice</ChipLink>
+        </>
+      }
+      galleryLabel="Pieces"
+      items={PIECES.map((p) => ({ id: p.id, title: p.title, caption: p.caption, media: <div role="img" aria-label={p.title} className={cn(p.ratio, "w-full bg-linear-to-br from-accent to-accent-2")} /> }))}
+    />
+  );
+}

package/registry/examples/goal-gauge/arcade.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/goal-gauge/arcade.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/goal-gauge/arcade.tsx
+import { GoalGauge } from "@krizaka/ui/goal-gauge";
+import { jsx } from "react/jsx-runtime";
+function GoalGaugeArcade() {
+  return /* @__PURE__ */ jsx("div", { className: "w-96 brand-orochia", children: /* @__PURE__ */ jsx(GoalGauge, { variant: "arcade", label: "Boss gauge", segments: 8, value: 0, mode: "drain", valueText: "All eight sealed" }) });
+}
+export {
+  GoalGaugeArcade as default
+};

package/registry/examples/goal-gauge/arcade.tsx

@@ -0,0 +1,10 @@
+import { GoalGauge } from "@krizaka/ui/goal-gauge";
+
+// The boss gauge: a skewed frame, gradient cells, the label centred — every head sealed, the gauge empty.
+export default function GoalGaugeArcade() {
+  return (
+    <div className="w-96 brand-orochia">
+      <GoalGauge variant="arcade" label="Boss gauge" segments={8} value={0} mode="drain" valueText="All eight sealed" />
+    </div>
+  );
+}

package/registry/examples/goal-gauge/challenge.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/goal-gauge/challenge.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/goal-gauge/challenge.tsx
+import { GoalGauge } from "@krizaka/ui/goal-gauge";
+import { jsx } from "react/jsx-runtime";
+function GoalGaugeChallenge() {
+  return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(GoalGauge, { label: "Backers", segments: 10, value: 6, valueText: "6 of 10 backers" }) });
+}
+export {
+  GoalGaugeChallenge as default
+};

package/registry/examples/goal-gauge/challenge.tsx

@@ -0,0 +1,10 @@
+import { GoalGauge } from "@krizaka/ui/goal-gauge";
+
+// A challenge's goal: 6 backers of 10 — the reached steps light one by one when its scene plays.
+export default function GoalGaugeChallenge() {
+  return (
+    <div className="w-80">
+      <GoalGauge label="Backers" segments={10} value={6} valueText="6 of 10 backers" />
+    </div>
+  );
+}

package/registry/examples/goal-gauge/drain.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/goal-gauge/drain.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/goal-gauge/drain.tsx
+import { GoalGauge } from "@krizaka/ui/goal-gauge";
+import { jsx } from "react/jsx-runtime";
+function GoalGaugeDrain() {
+  return /* @__PURE__ */ jsx("div", { className: "w-80", children: /* @__PURE__ */ jsx(GoalGauge, { label: "Seats left", segments: 12, value: 3, mode: "drain", valueText: "3 seats left" }) });
+}
+export {
+  GoalGaugeDrain as default
+};

package/registry/examples/goal-gauge/drain.tsx

@@ -0,0 +1,10 @@
+import { GoalGauge } from "@krizaka/ui/goal-gauge";
+
+// `mode="drain"`: what is left — the spent steps empty one by one (seats, tickets, problems still standing).
+export default function GoalGaugeDrain() {
+  return (
+    <div className="w-80">
+      <GoalGauge label="Seats left" segments={12} value={3} mode="drain" valueText="3 seats left" />
+    </div>
+  );
+}

package/registry/examples/goal-gauge/native/default.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/goal-gauge/native/default.js

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/goal-gauge/native/default.tsx
+import { GoalGauge } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeGoalGaugeDefault() {
+  return /* @__PURE__ */ jsxs(View, { style: { width: 300, gap: 18 }, children: [
+    /* @__PURE__ */ jsx(GoalGauge, { label: "Backers", segments: 10, value: 6, valueText: "6 of 10 backers", animated: false }),
+    /* @__PURE__ */ jsx(GoalGauge, { label: "Seats left", segments: 12, value: 3, mode: "drain", valueText: "3 seats left", animated: false })
+  ] });
+}
+export {
+  NativeGoalGaugeDefault as default
+};

package/registry/examples/goal-gauge/native/default.tsx

@@ -0,0 +1,12 @@
+import { GoalGauge } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// A challenge's goal and the seats left of a live drop, on mobile.
+export default function NativeGoalGaugeDefault() {
+  return (
+    <View style={{ width: 300, gap: 18 }}>
+      <GoalGauge label="Backers" segments={10} value={6} valueText="6 of 10 backers" animated={false} />
+      <GoalGauge label="Seats left" segments={12} value={3} mode="drain" valueText="3 seats left" animated={false} />
+    </View>
+  );
+}

package/registry/examples/how-it-works-page/orazaka.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/how-it-works-page/orazaka.js

@@ -0,0 +1,30 @@
+"use client";
+
+// registry/examples/how-it-works-page/orazaka.tsx
+import { CodeBlock } from "@krizaka/ui/code-block";
+import { HowItWorksPage } from "@krizaka/ui/how-it-works-page";
+import { Mascot } from "@krizaka/ui/mascots";
+import { jsx } from "react/jsx-runtime";
+var copy = { copyLabel: "Copy", copiedLabel: "Copied" };
+function HowItWorksPageOrazaka() {
+  return /* @__PURE__ */ jsx(
+    HowItWorksPage,
+    {
+      brand: "orazaka",
+      back: { href: "#orazaka", label: "Orazaka" },
+      eyebrow: "How it works",
+      title: "The journey of a request",
+      lead: "Six stages, the same for every request \u2014 and none of them leaves your server.",
+      aside: /* @__PURE__ */ jsx(Mascot, { bird: "duck", mood: "thinking", size: 112 }),
+      stepsLabel: "The steps",
+      steps: [
+        { id: "install", title: "Install", text: "One command pulls the engine, the models you choose and the console.", visual: /* @__PURE__ */ jsx(CodeBlock, { code: "npx orazaka install", language: "bash", file: "Terminal", ...copy }) },
+        { id: "guard", title: "Guard", text: "Every request crosses the same interceptors: identity, quotas, the rules of your workspace.", visual: /* @__PURE__ */ jsx(CodeBlock, { code: "orazaka rules add --deny pii-export", language: "bash", file: "Terminal", ...copy }) },
+        { id: "answer", title: "Answer", text: "The best local model answers; the answer is checked before it is shown.", visual: /* @__PURE__ */ jsx(CodeBlock, { code: "orazaka chat --model llama3.3", language: "bash", file: "Terminal", ...copy }) }
+      ]
+    }
+  );
+}
+export {
+  HowItWorksPageOrazaka as default
+};

package/registry/examples/how-it-works-page/orazaka.tsx

@@ -0,0 +1,26 @@
+import { CodeBlock } from "@krizaka/ui/code-block";
+import { HowItWorksPage } from "@krizaka/ui/how-it-works-page";
+import { Mascot } from "@krizaka/ui/mascots";
+
+const copy = { copyLabel: "Copy", copiedLabel: "Copied" };
+
+// TEMPLATE — how a product works, in steps along a line (Orazaka's journey of a request): each step its words beside
+// its visual, the sides alternating on a wide screen, one column on a phone.
+export default function HowItWorksPageOrazaka() {
+  return (
+    <HowItWorksPage
+      brand="orazaka"
+      back={{ href: "#orazaka", label: "Orazaka" }}
+      eyebrow="How it works"
+      title="The journey of a request"
+      lead="Six stages, the same for every request — and none of them leaves your server."
+      aside={<Mascot bird="duck" mood="thinking" size={112} />}
+      stepsLabel="The steps"
+      steps={[
+        { id: "install", title: "Install", text: "One command pulls the engine, the models you choose and the console.", visual: <CodeBlock code="npx orazaka install" language="bash" file="Terminal" {...copy} /> },
+        { id: "guard", title: "Guard", text: "Every request crosses the same interceptors: identity, quotas, the rules of your workspace.", visual: <CodeBlock code="orazaka rules add --deny pii-export" language="bash" file="Terminal" {...copy} /> },
+        { id: "answer", title: "Answer", text: "The best local model answers; the answer is checked before it is shown.", visual: <CodeBlock code="orazaka chat --model llama3.3" language="bash" file="Terminal" {...copy} /> },
+      ]}
+    />
+  );
+}