@krizaka/ui 2.9.0 → 3.0.0

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/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} /> },
+      ]}
+    />
+  );
+}

package/registry/examples/landing-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/landing-page/krizaka.js

@@ -0,0 +1,44 @@
+"use client";
+
+// registry/examples/landing-page/krizaka.tsx
+import { Button } from "@krizaka/ui/button";
+import { LandingPage } from "@krizaka/ui/landing-page";
+import { Meter } from "@krizaka/ui/meter";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function LandingPageKrizaka() {
+  return /* @__PURE__ */ jsx(
+    LandingPage,
+    {
+      eyebrow: "Software studio \xB7 Montr\xE9al",
+      title: "Products that keep what is yours",
+      lead: "Krizaka builds sovereign AI and a platform where creators are paid \u2014 open source, on your servers or ours.",
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", shape: "cut", shimmer: true, children: "See the products" }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "lg", shape: "cut", children: "Read the docs" })
+      ] }),
+      visualLabel: "orazaka.local \u2014 console",
+      visual: /* @__PURE__ */ jsxs("div", { className: "grid gap-3 p-5", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-mono text-xs text-fg-secondary", children: "$ npx orazaka install" }),
+        /* @__PURE__ */ jsx("p", { className: "font-mono text-xs text-fg-success", children: "\u2713 1,284 answers this week, none left the server" }),
+        /* @__PURE__ */ jsx(Meter, { label: "Credits", value: 3800, max: 12e3, valueText: "3,800 of 12,000", showLabel: true })
+      ] }),
+      proofs: [
+        { value: "34", label: "public repositories" },
+        { value: "Apache-2.0", label: "every line" },
+        { value: "0", label: "telemetry calls" }
+      ],
+      featuresHeading: { eyebrow: "What we build", title: "Three products, one way of building" },
+      features: [
+        { id: "orazaka", size: "lg", title: "Orazaka \u2014 the AI that never leaves home", text: "Chat, image, voice and video on your own server, one governed pipeline." },
+        { id: "orochia", title: "Orochia", text: "Creators paid 90 % of what fans spend." },
+        { id: "yazakia", title: "Yazakia", text: "Meet by talking first \u2014 coming." },
+        { id: "blocks", size: "md", title: "Open building blocks", text: "Users, billing, notifications \u2014 on Maven Central and npm." },
+        { id: "ui", size: "md", title: "One design system", text: "Krizaka UI, web and mobile, documented from its code." }
+      ],
+      closing: { title: "Something to build together?", body: "Tell us what you need; a person answers within two days.", actions: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", shape: "cut", children: "Contact us" }) }
+    }
+  );
+}
+export {
+  LandingPageKrizaka as default
+};

package/registry/examples/landing-page/krizaka.tsx

@@ -0,0 +1,44 @@
+import { Button } from "@krizaka/ui/button";
+import { LandingPage } from "@krizaka/ui/landing-page";
+import { Meter } from "@krizaka/ui/meter";
+
+// TEMPLATE — a company's landing (krizaka.com): the promise beside the product alive, a band of proofs, the features
+// as a bento where the main one takes the room, the closing call. On a phone the window follows the words, the bento
+// is one column, the proofs stack.
+export default function LandingPageKrizaka() {
+  return (
+    <LandingPage
+      eyebrow="Software studio · Montréal"
+      title="Products that keep what is yours"
+      lead="Krizaka builds sovereign AI and a platform where creators are paid — open source, on your servers or ours."
+      actions={
+        <>
+          <Button variant="primary" size="lg" shape="cut" shimmer>See the products</Button>
+          <Button variant="secondary" size="lg" shape="cut">Read the docs</Button>
+        </>
+      }
+      visualLabel="orazaka.local — console"
+      visual={
+        <div className="grid gap-3 p-5">
+          <p className="font-mono text-xs text-fg-secondary">$ npx orazaka install</p>
+          <p className="font-mono text-xs text-fg-success">✓ 1,284 answers this week, none left the server</p>
+          <Meter label="Credits" value={3800} max={12000} valueText="3,800 of 12,000" showLabel />
+        </div>
+      }
+      proofs={[
+        { value: "34", label: "public repositories" },
+        { value: "Apache-2.0", label: "every line" },
+        { value: "0", label: "telemetry calls" },
+      ]}
+      featuresHeading={{ eyebrow: "What we build", title: "Three products, one way of building" }}
+      features={[
+        { id: "orazaka", size: "lg", title: "Orazaka — the AI that never leaves home", text: "Chat, image, voice and video on your own server, one governed pipeline." },
+        { id: "orochia", title: "Orochia", text: "Creators paid 90 % of what fans spend." },
+        { id: "yazakia", title: "Yazakia", text: "Meet by talking first — coming." },
+        { id: "blocks", size: "md", title: "Open building blocks", text: "Users, billing, notifications — on Maven Central and npm." },
+        { id: "ui", size: "md", title: "One design system", text: "Krizaka UI, web and mobile, documented from its code." },
+      ]}
+      closing={{ title: "Something to build together?", body: "Tell us what you need; a person answers within two days.", actions: <Button variant="primary" size="lg" shape="cut">Contact us</Button> }}
+    />
+  );
+}

package/registry/examples/legal-page/privacy.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/legal-page/privacy.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/legal-page/privacy.tsx
+import { LegalPage } from "@krizaka/ui/legal-page";
+import { jsx } from "react/jsx-runtime";
+function LegalPagePrivacy() {
+  return /* @__PURE__ */ jsx(
+    LegalPage,
+    {
+      title: "Privacy policy",
+      updated: "Last updated: October 2026",
+      summary: "In short: we collect what you send us, keep it in Qu\xE9bec, never sell it, and delete it when you ask.",
+      tocLabel: "On this page",
+      sections: [
+        { id: "collect", title: "What we collect", children: /* @__PURE__ */ jsx("p", { children: "Your email and your message, when you write to us." }) },
+        { id: "keep", title: "Where it is kept", children: /* @__PURE__ */ jsx("p", { children: "On servers in Qu\xE9bec, encrypted at rest." }) },
+        { id: "rights", title: "Your rights", children: /* @__PURE__ */ jsx("p", { children: "Ask for a copy or for deletion at any time; we answer within 30 days." }) }
+      ]
+    }
+  );
+}
+export {
+  LegalPagePrivacy as default
+};

package/registry/examples/legal-page/privacy.tsx

@@ -0,0 +1,19 @@
+import { LegalPage } from "@krizaka/ui/legal-page";
+
+// TEMPLATE — a policy: the date in force, the short version in plain words, then the sections with their contents
+// beside them (chips on a phone).
+export default function LegalPagePrivacy() {
+  return (
+    <LegalPage
+      title="Privacy policy"
+      updated="Last updated: October 2026"
+      summary="In short: we collect what you send us, keep it in Québec, never sell it, and delete it when you ask."
+      tocLabel="On this page"
+      sections={[
+        { id: "collect", title: "What we collect", children: <p>Your email and your message, when you write to us.</p> },
+        { id: "keep", title: "Where it is kept", children: <p>On servers in Québec, encrypted at rest.</p> },
+        { id: "rights", title: "Your rights", children: <p>Ask for a copy or for deletion at any time; we answer within 30 days.</p> },
+      ]}
+    />
+  );
+}

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

@@ -0,0 +1,33 @@
+"use client";
+
+// registry/examples/list/native/default.tsx
+import { Avatar, Txt } from "@krizaka/ui/native";
+import { List } from "@krizaka/ui/native/list";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+var notifications = [
+  { id: "n1", who: "Elena Varga", what: "tipped your video \u201CSunset over Montr\xE9al\u201D", when: "2 min" },
+  { id: "n2", who: "Noah Petit", what: "started following you", when: "1 h" },
+  { id: "n3", who: "Maya Chen", what: "commented: \u201CThe drone shot!\u201D", when: "3 h" }
+];
+function NativeListDefault() {
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      label: "Notifications",
+      data: notifications,
+      keyExtractor: (n) => n.id,
+      separator: "inset",
+      renderItem: (n) => /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 16, paddingVertical: 12 }, children: [
+        /* @__PURE__ */ jsx(Avatar, { alt: n.who, size: "md" }),
+        /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Txt, { children: `${n.who} ${n.what}` }),
+          /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", children: n.when })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  NativeListDefault as default
+};

package/registry/examples/list/native/default.tsx

@@ -0,0 +1,31 @@
+import { Avatar, Txt } from "@krizaka/ui/native";
+import { List } from "@krizaka/ui/native/list";
+import { View } from "react-native";
+
+type Notification = { id: string; who: string; what: string; when: string };
+const notifications: Notification[] = [
+  { id: "n1", who: "Elena Varga", what: "tipped your video “Sunset over Montréal”", when: "2 min" },
+  { id: "n2", who: "Noah Petit", what: "started following you", when: "1 h" },
+  { id: "n3", who: "Maya Chen", what: "commented: “The drone shot!”", when: "3 h" },
+];
+
+// A FlashList v2 with the theme's separators, inset after the avatar.
+export default function NativeListDefault() {
+  return (
+    <List
+      label="Notifications"
+      data={notifications}
+      keyExtractor={(n) => n.id}
+      separator="inset"
+      renderItem={(n) => (
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 16, paddingVertical: 12 }}>
+          <Avatar alt={n.who} size="md" />
+          <View style={{ flex: 1 }}>
+            <Txt>{`${n.who} ${n.what}`}</Txt>
+            <Txt variant="caption" tone="secondary">{n.when}</Txt>
+          </View>
+        </View>
+      )}
+    />
+  );
+}

package/registry/examples/list/native/infinite.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/list/native/infinite.js

@@ -0,0 +1,30 @@
+"use client";
+
+// registry/examples/list/native/infinite.tsx
+import { configureKrizakaFetch, krizakaFetch, KrizakaQueryProvider } from "@krizaka/query";
+import { Txt } from "@krizaka/ui/native";
+import { List, useInfiniteList } from "@krizaka/ui/native/list";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+async function fakeApi(input) {
+  const cursor = Number(new URL(String(input), "https://api.example").searchParams.get("cursor"));
+  const items = Array.from({ length: 20 }, (_, i) => ({ id: `v${cursor + i}`, title: `Video ${cursor + i + 1}` }));
+  return Response.json({ items, next: cursor + 20 < 100 ? cursor + 20 : null });
+}
+function Videos() {
+  const { listProps, error } = useInfiniteList({
+    queryKey: ["videos", "feed"],
+    queryFn: ({ pageParam, signal }) => krizakaFetch("/api/videos", { query: { cursor: pageParam }, signal }),
+    initialPageParam: 0,
+    getNextPageParam: (last) => last.next,
+    getItems: (page) => page.items
+  });
+  return /* @__PURE__ */ jsx(List, { label: "Videos", ...listProps, error: error ? /* @__PURE__ */ jsx(Txt, { children: "Could not load the videos." }) : void 0, keyExtractor: (v) => v.id, renderItem: (v) => /* @__PURE__ */ jsx(Txt, { style: { padding: 16 }, children: v.title }) });
+}
+function NativeListInfinite() {
+  useState(() => configureKrizakaFetch({ fetch: fakeApi }));
+  return /* @__PURE__ */ jsx(KrizakaQueryProvider, { children: /* @__PURE__ */ jsx(Videos, {}) });
+}
+export {
+  NativeListInfinite as default
+};

package/registry/examples/list/native/infinite.tsx

@@ -0,0 +1,35 @@
+import { configureKrizakaFetch, krizakaFetch, KrizakaQueryProvider } from "@krizaka/query";
+import { Txt } from "@krizaka/ui/native";
+import { List, useInfiniteList } from "@krizaka/ui/native/list";
+import { useState } from "react";
+
+type Page = { items: { id: string; title: string }[]; next: number | null };
+// The API, faked in the screen: 20 videos per page, 5 pages.
+async function fakeApi(input: RequestInfo | URL) {
+  const cursor = Number(new URL(String(input), "https://api.example").searchParams.get("cursor"));
+  const items = Array.from({ length: 20 }, (_, i) => ({ id: `v${cursor + i}`, title: `Video ${cursor + i + 1}` }));
+  return Response.json({ items, next: cursor + 20 < 100 ? cursor + 20 : null } satisfies Page);
+}
+
+function Videos() {
+  const { listProps, error } = useInfiniteList({
+    queryKey: ["videos", "feed"],
+    queryFn: ({ pageParam, signal }) => krizakaFetch("/api/videos", { query: { cursor: pageParam }, signal }) as Promise<Page>,
+    initialPageParam: 0,
+    getNextPageParam: (last) => last.next,
+    getItems: (page) => page.items,
+  });
+  return (
+    <List label="Videos" {...listProps} error={error ? <Txt>Could not load the videos.</Txt> : undefined} keyExtractor={(v) => v.id} renderItem={(v) => <Txt style={{ padding: 16 }}>{v.title}</Txt>} />
+  );
+}
+
+// A paginated API as a list: the next page near the end, pull to refresh, the query of @krizaka/query.
+export default function NativeListInfinite() {
+  useState(() => configureKrizakaFetch({ fetch: fakeApi as typeof fetch }));
+  return (
+    <KrizakaQueryProvider>
+      <Videos />
+    </KrizakaQueryProvider>
+  );
+}

package/registry/examples/list/native/states.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/list/native/states.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/list/native/states.tsx
+import { Button } from "@krizaka/ui/native";
+import { List } from "@krizaka/ui/native/list";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NONE = [];
+function NativeListStates() {
+  return /* @__PURE__ */ jsxs(View, { style: { gap: 24, width: "100%" }, children: [
+    /* @__PURE__ */ jsx(List, { label: "Messages", data: NONE, keyExtractor: (m) => m.id, renderItem: () => null, loading: true, loadingRows: 3 }),
+    /* @__PURE__ */ jsx(
+      List,
+      {
+        label: "Messages",
+        data: NONE,
+        keyExtractor: (m) => m.id,
+        renderItem: () => null,
+        empty: { title: "No message yet", description: "Say hello to a creator you follow.", action: /* @__PURE__ */ jsx(Button, { label: "Find creators", size: "sm" }) }
+      }
+    )
+  ] });
+}
+export {
+  NativeListStates as default
+};

package/registry/examples/list/native/states.tsx

@@ -0,0 +1,21 @@
+import { Button } from "@krizaka/ui/native";
+import { List } from "@krizaka/ui/native/list";
+import { View } from "react-native";
+
+const NONE: { id: string }[] = [];
+
+// While the first page loads: skeleton rows. Nothing yet: the empty state and what to do next.
+export default function NativeListStates() {
+  return (
+    <View style={{ gap: 24, width: "100%" }}>
+      <List label="Messages" data={NONE} keyExtractor={(m) => m.id} renderItem={() => null} loading loadingRows={3} />
+      <List
+        label="Messages"
+        data={NONE}
+        keyExtractor={(m) => m.id}
+        renderItem={() => null}
+        empty={{ title: "No message yet", description: "Say hello to a creator you follow.", action: <Button label="Find creators" size="sm" /> }}
+      />
+    </View>
+  );
+}

package/registry/examples/longform-page/story.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/longform-page/story.js

@@ -0,0 +1,38 @@
+"use client";
+
+// registry/examples/longform-page/story.tsx
+import { LongformPage } from "@krizaka/ui/longform-page";
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+import { Mascot } from "@krizaka/ui/mascots";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function LongformPageStory() {
+  return /* @__PURE__ */ jsx(
+    LongformPage,
+    {
+      eyebrow: "Our story",
+      title: "Why a studio in Montr\xE9al builds its own AI",
+      lead: "Three products, one rule: what is yours stays yours.",
+      aside: /* @__PURE__ */ jsx(Mascot, { bird: "owl", mood: "welcome", size: 112 }),
+      chapters: [
+        {
+          id: "start",
+          title: "It started with a lease",
+          pull: "The prompt crossed the ocean before the answer came back.",
+          children: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { children: "A notary asked a chatbot to summarise a lease. The answer was good; the lease was now on someone else's server." }),
+            /* @__PURE__ */ jsx("p", { children: "We built Orazaka so that question never has to leave the office." })
+          ] })
+        },
+        {
+          id: "creators",
+          title: "Then came the creators",
+          children: /* @__PURE__ */ jsx("p", { children: "Orochia pays creators 90 % of what their fans spend, every Monday \u2014 no algorithm in between." }),
+          figure: /* @__PURE__ */ jsx(MascotQuote, { bird: "flamingo", label: "The flamingo's rule", children: "Whoever does the work gets paid first." })
+        }
+      ]
+    }
+  );
+}
+export {
+  LongformPageStory as default
+};

package/registry/examples/longform-page/story.tsx

@@ -0,0 +1,35 @@
+import { LongformPage } from "@krizaka/ui/longform-page";
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+import { Mascot } from "@krizaka/ui/mascots";
+
+// TEMPLATE — a long read (Krizaka's story): numbered chapters in a reading column, a sentence pulled into the margin,
+// a bird's quote breaking out under the text. Editorial, not cards; one column on a phone.
+export default function LongformPageStory() {
+  return (
+    <LongformPage
+      eyebrow="Our story"
+      title="Why a studio in Montréal builds its own AI"
+      lead="Three products, one rule: what is yours stays yours."
+      aside={<Mascot bird="owl" mood="welcome" size={112} />}
+      chapters={[
+        {
+          id: "start",
+          title: "It started with a lease",
+          pull: "The prompt crossed the ocean before the answer came back.",
+          children: (
+            <>
+              <p>A notary asked a chatbot to summarise a lease. The answer was good; the lease was now on someone else's server.</p>
+              <p>We built Orazaka so that question never has to leave the office.</p>
+            </>
+          ),
+        },
+        {
+          id: "creators",
+          title: "Then came the creators",
+          children: <p>Orochia pays creators 90 % of what their fans spend, every Monday — no algorithm in between.</p>,
+          figure: <MascotQuote bird="flamingo" label="The flamingo's rule">Whoever does the work gets paid first.</MascotQuote>,
+        },
+      ]}
+    />
+  );
+}

package/registry/examples/mascots/crane.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/mascots/crane.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/mascots/crane.tsx
+import { Button } from "@krizaka/ui/button";
+import { Mascot } from "@krizaka/ui/mascots";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MascotCrane() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-96 items-center gap-4 rounded-xl border border-border-default bg-surface-1 p-4", children: [
+    /* @__PURE__ */ jsx(Mascot, { bird: "crane", mood: "welcome", size: 88 }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-fg", children: "Take your time" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-fg-secondary", children: "Say it in your own words. One question at a time." }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", className: "mt-3", children: "Begin" })
+    ] })
+  ] });
+}
+export {
+  MascotCrane as default
+};

package/registry/examples/mascots/crane.tsx

@@ -0,0 +1,18 @@
+import { Button } from "@krizaka/ui/button";
+import { Mascot } from "@krizaka/ui/mascots";
+
+// The crane listens: posed and unhurried — a calm opening, the words and one action beside it.
+export default function MascotCrane() {
+  return (
+    <div className="flex w-96 items-center gap-4 rounded-xl border border-border-default bg-surface-1 p-4">
+      <Mascot bird="crane" mood="welcome" size={88} />
+      <div className="flex-1">
+        <p className="text-sm font-medium text-fg">Take your time</p>
+        <p className="mt-1 text-sm text-fg-secondary">Say it in your own words. One question at a time.</p>
+        <Button variant="primary" size="sm" className="mt-3">
+          Begin
+        </Button>
+      </div>
+    </div>
+  );
+}