@krizaka/ui 3.5.0 → 3.7.0

package/registry/examples/avatar/native/group.js

@@ -5,10 +5,10 @@ import { Avatar } from "@krizaka/ui/native";
 import { jsx, jsxs } from "react/jsx-runtime";
 function NativeAvatarGroup() {
   return /* @__PURE__ */ jsxs(Avatar.Group, { max: 3, size: "md", children: [
-    /* @__PURE__ */ jsx(Avatar, { alt: "Maya" }),
-    /* @__PURE__ */ jsx(Avatar, { alt: "Noor" }),
-    /* @__PURE__ */ jsx(Avatar, { alt: "Ines" }),
-    /* @__PURE__ */ jsx(Avatar, { alt: "Theo" }),
+    /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/camille-256.dc2943029a.webp", alt: "Camille" }),
+    /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp", alt: "Noor" }),
+    /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/tomas-256.7eaab80903.webp", alt: "Tom\xE1s" }),
+    /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/ada-256.31a5ce640c.webp", alt: "Ada" }),
     /* @__PURE__ */ jsx(Avatar, { alt: "Lou" })
   ] });
 }

package/registry/examples/avatar/native/group.tsx

@@ -3,10 +3,10 @@ import { Avatar } from "@krizaka/ui/native";
 export default function NativeAvatarGroup() {
   return (
     <Avatar.Group max={3} size="md">
-      <Avatar alt="Maya" />
-      <Avatar alt="Noor" />
-      <Avatar alt="Ines" />
-      <Avatar alt="Theo" />
+      <Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/camille-256.dc2943029a.webp" alt="Camille" />
+      <Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp" alt="Noor" />
+      <Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/tomas-256.7eaab80903.webp" alt="Tomás" />
+      <Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/ada-256.31a5ce640c.webp" alt="Ada" />
       <Avatar alt="Lou" />
     </Avatar.Group>
   );

package/registry/examples/avatar/native/presence.js

@@ -4,13 +4,16 @@
 import { Avatar } from "@krizaka/ui/native";
 import { View } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
+var CAMILLE = "https://krizaka-assets.b-cdn.net/site/people/ui/camille-256.dc2943029a.webp";
+var TOMAS = "https://krizaka-assets.b-cdn.net/site/people/ui/tomas-256.7eaab80903.webp";
+var NOOR = "https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp";
 function NativeAvatarPresence() {
   return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 16, alignItems: "center" }, children: [
-    /* @__PURE__ */ jsx(Avatar, { alt: "Elena", size: "lg", presence: "online", presenceLabel: "online" }),
-    /* @__PURE__ */ jsx(Avatar, { alt: "Alex", size: "lg", presence: "away", presenceLabel: "away" }),
-    /* @__PURE__ */ jsx(Avatar, { alt: "Mina", size: "lg", presence: "offline", presenceLabel: "offline" }),
-    /* @__PURE__ */ jsx(Avatar, { alt: "Elena's story, new", size: "lg", ring: "story" }),
-    /* @__PURE__ */ jsx(Avatar, { alt: "Alex's story, seen", size: "lg", ring: "seen" })
+    /* @__PURE__ */ jsx(Avatar, { src: CAMILLE, alt: "Camille", size: "lg", presence: "online", presenceLabel: "online" }),
+    /* @__PURE__ */ jsx(Avatar, { src: TOMAS, alt: "Tom\xE1s", size: "lg", presence: "away", presenceLabel: "away" }),
+    /* @__PURE__ */ jsx(Avatar, { src: NOOR, alt: "Noor", size: "lg", presence: "offline", presenceLabel: "offline" }),
+    /* @__PURE__ */ jsx(Avatar, { src: CAMILLE, alt: "Camille's story, new", size: "lg", ring: "story" }),
+    /* @__PURE__ */ jsx(Avatar, { src: TOMAS, alt: "Tom\xE1s's story, seen", size: "lg", ring: "seen" })
   ] });
 }
 export {

package/registry/examples/avatar/native/presence.tsx

@@ -1,15 +1,19 @@
 import { Avatar } from "@krizaka/ui/native";
 import { View } from "react-native";
 
+const CAMILLE = "https://krizaka-assets.b-cdn.net/site/people/ui/camille-256.dc2943029a.webp";
+const TOMAS = "https://krizaka-assets.b-cdn.net/site/people/ui/tomas-256.7eaab80903.webp";
+const NOOR = "https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp";
+
 // Presence in Messages, story rings in the rail: the dot and the ring are said with the name.
 export default function NativeAvatarPresence() {
   return (
     <View style={{ flexDirection: "row", gap: 16, alignItems: "center" }}>
-      <Avatar alt="Elena" size="lg" presence="online" presenceLabel="online" />
-      <Avatar alt="Alex" size="lg" presence="away" presenceLabel="away" />
-      <Avatar alt="Mina" size="lg" presence="offline" presenceLabel="offline" />
-      <Avatar alt="Elena's story, new" size="lg" ring="story" />
-      <Avatar alt="Alex's story, seen" size="lg" ring="seen" />
+      <Avatar src={CAMILLE} alt="Camille" size="lg" presence="online" presenceLabel="online" />
+      <Avatar src={TOMAS} alt="Tomás" size="lg" presence="away" presenceLabel="away" />
+      <Avatar src={NOOR} alt="Noor" size="lg" presence="offline" presenceLabel="offline" />
+      <Avatar src={CAMILLE} alt="Camille's story, new" size="lg" ring="story" />
+      <Avatar src={TOMAS} alt="Tomás's story, seen" size="lg" ring="seen" />
     </View>
   );
 }

package/registry/examples/avatar/with-image.js

@@ -3,11 +3,8 @@
 // registry/examples/avatar/with-image.tsx
 import { Avatar } from "@krizaka/ui/avatar";
 import { jsx } from "react/jsx-runtime";
-var PORTRAIT = "data:image/svg+xml;utf8," + encodeURIComponent(
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="#3b82f6"/><circle cx="40" cy="31" r="14" fill="#dbeafe"/><path d="M12 80a28 24 0 0 1 56 0z" fill="#dbeafe"/></svg>'
-);
 function AvatarWithImage() {
-  return /* @__PURE__ */ jsx(Avatar, { src: PORTRAIT, alt: "Oussama", fallback: "OA" });
+  return /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/ada-256.31a5ce640c.webp", alt: "Ada Okafor", fallback: "AO" });
 }
 export {
   AvatarWithImage as default

package/registry/examples/avatar/with-image.tsx

@@ -1,13 +1,6 @@
 import { Avatar } from "@krizaka/ui/avatar";
 
-// A self-contained portrait (no network).
-const PORTRAIT =
-  "data:image/svg+xml;utf8," +
-  encodeURIComponent(
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="#3b82f6"/>' +
-      '<circle cx="40" cy="31" r="14" fill="#dbeafe"/><path d="M12 80a28 24 0 0 1 56 0z" fill="#dbeafe"/></svg>',
-  );
-
+// A portrait: the image when it loads, the initials while it loads or when it fails.
 export default function AvatarWithImage() {
-  return <Avatar src={PORTRAIT} alt="Oussama" fallback="OA" />;
+  return <Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/ada-256.31a5ce640c.webp" alt="Ada Okafor" fallback="AO" />;
 }

package/registry/examples/detail-layout/checkout.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/detail-layout/checkout.js

@@ -0,0 +1,37 @@
+"use client";
+
+// registry/examples/detail-layout/checkout.tsx
+import { Button } from "@krizaka/ui/button";
+import { Chip } from "@krizaka/ui/chip";
+import { DetailLayout } from "@krizaka/ui/detail-layout";
+import { Field, Textarea } from "@krizaka/ui/field";
+import { Stat } from "@krizaka/ui/stat";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AMOUNTS = [3, 5, 10, 20];
+function DetailLayoutCheckout() {
+  const [amount, setAmount] = React.useState("5");
+  return /* @__PURE__ */ jsx("div", { className: "brand-orochia w-full", children: /* @__PURE__ */ jsx(
+    DetailLayout,
+    {
+      back: /* @__PURE__ */ jsx("a", { href: "#elena", children: "\u2190 Elena's page" }),
+      eyebrow: "Tip",
+      title: "Say thanks to Elena",
+      meta: "She keeps 90 %. Paid out every Monday.",
+      aside: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 rounded-xl border border-border-default bg-surface-1 p-4", children: [
+        /* @__PURE__ */ jsx(Stat, { label: "You pay", value: `\u20AC${amount}`, hint: "no fee added on top" }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", shape: "cut", className: "w-full", children: `Tip \u20AC${amount}` })
+      ] }),
+      children: /* @__PURE__ */ jsxs("form", { className: "flex max-w-lg flex-col gap-5", onSubmit: (e) => e.preventDefault(), children: [
+        /* @__PURE__ */ jsx(Chip.Group, { type: "single", label: "Amount", value: amount, onValueChange: (v) => v && setAmount(v), required: true, children: AMOUNTS.map((a) => /* @__PURE__ */ jsx(Chip, { value: String(a), children: `\u20AC${a}` }, a)) }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { htmlFor: "note", children: "A word for her (optional)" }),
+          /* @__PURE__ */ jsx(Textarea, { id: "note", rows: 3, placeholder: "The rooftop scene was incredible." })
+        ] })
+      ] })
+    }
+  ) });
+}
+export {
+  DetailLayoutCheckout as default
+};

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

@@ -0,0 +1,44 @@
+"use client";
+
+import { Button } from "@krizaka/ui/button";
+import { Chip } from "@krizaka/ui/chip";
+import { DetailLayout } from "@krizaka/ui/detail-layout";
+import { Field, Textarea } from "@krizaka/ui/field";
+import { Stat } from "@krizaka/ui/stat";
+import * as React from "react";
+
+const AMOUNTS = [3, 5, 10, 20];
+
+// TEMPLATE — tipping a creator (Orochia): who is paid, the amount in one tap, an optional word, the summary beside the
+// action — under the form on a phone, where the pay button stays last. The total is always said before the button.
+export default function DetailLayoutCheckout() {
+  const [amount, setAmount] = React.useState("5");
+  return (
+    <div className="brand-orochia w-full">
+      <DetailLayout
+        back={<a href="#elena">← Elena's page</a>}
+        eyebrow="Tip"
+        title="Say thanks to Elena"
+        meta="She keeps 90 %. Paid out every Monday."
+        aside={
+          <div className="flex flex-col gap-4 rounded-xl border border-border-default bg-surface-1 p-4">
+            <Stat label="You pay" value={`€${amount}`} hint="no fee added on top" />
+            <Button variant="primary" shape="cut" className="w-full">{`Tip €${amount}`}</Button>
+          </div>
+        }
+      >
+        <form className="flex max-w-lg flex-col gap-5" onSubmit={(e) => e.preventDefault()}>
+          <Chip.Group type="single" label="Amount" value={amount} onValueChange={(v) => v && setAmount(v)} required>
+            {AMOUNTS.map((a) => (
+              <Chip key={a} value={String(a)}>{`€${a}`}</Chip>
+            ))}
+          </Chip.Group>
+          <Field.Root>
+            <Field.Label htmlFor="note">A word for her (optional)</Field.Label>
+            <Textarea id="note" rows={3} placeholder="The rooftop scene was incredible." />
+          </Field.Root>
+        </form>
+      </DetailLayout>
+    </div>
+  );
+}

package/registry/examples/docs-article-page/faq.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/faq.js

@@ -0,0 +1,31 @@
+"use client";
+
+// registry/examples/docs-article-page/faq.tsx
+import { DocsArticlePage } from "@krizaka/ui/docs-article-page";
+import { jsx, jsxs } from "react/jsx-runtime";
+var QUESTIONS = [
+  { id: "cloud", q: "Does anything leave my server?", a: "No. Requests are answered by models on your machine; the only calls out are the ones you configure yourself." },
+  { id: "models", q: "Which models can I run?", a: "Any model your hardware can hold. Orazaka lists the ones that fit before you download them." },
+  { id: "price", q: "How is it priced?", a: "A plan with a monthly credit allowance. Credits are spent per job, and what is left is always shown." }
+];
+function DocsArticlePageFaq() {
+  return /* @__PURE__ */ jsx(
+    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: ["Getting started", "The CLI", "Questions"].map((p) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: `#${p}`, "aria-current": p === "Questions" ? "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: "Questions, answered",
+      lead: "What people ask before they install.",
+      toc: { label: "Questions", items: QUESTIONS.map((x) => ({ id: x.id, label: x.q })) },
+      children: QUESTIONS.map((x) => /* @__PURE__ */ jsxs("details", { id: x.id, className: "group border-b border-border-subtle py-3", children: [
+        /* @__PURE__ */ jsx("summary", { className: "cursor-pointer rounded-md py-1 font-semibold text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring", children: x.q }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-fg-secondary", children: x.a })
+      ] }, x.id))
+    }
+  );
+}
+export {
+  DocsArticlePageFaq as default
+};

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

@@ -0,0 +1,40 @@
+import { DocsArticlePage } from "@krizaka/ui/docs-article-page";
+
+const QUESTIONS = [
+  { id: "cloud", q: "Does anything leave my server?", a: "No. Requests are answered by models on your machine; the only calls out are the ones you configure yourself." },
+  { id: "models", q: "Which models can I run?", a: "Any model your hardware can hold. Orazaka lists the ones that fit before you download them." },
+  { id: "price", q: "How is it priced?", a: "A plan with a monthly credit allowance. Credits are spent per job, and what is left is always shown." },
+];
+
+// TEMPLATE — a FAQ: the questions as a list of disclosures, each answer one short paragraph, the contents beside them.
+// Open by the address (`#price`), reachable by keyboard; one column on a phone.
+export default function DocsArticlePageFaq() {
+  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">
+            {["Getting started", "The CLI", "Questions"].map((p) => (
+              <li key={p}>
+                <a href={`#${p}`} aria-current={p === "Questions" ? "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="Questions, answered"
+      lead="What people ask before they install."
+      toc={{ label: "Questions", items: QUESTIONS.map((x) => ({ id: x.id, label: x.q })) }}
+    >
+      {QUESTIONS.map((x) => (
+        <details key={x.id} id={x.id} className="group border-b border-border-subtle py-3">
+          <summary className="cursor-pointer rounded-md py-1 font-semibold text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">{x.q}</summary>
+          <p className="mt-2 text-fg-secondary">{x.a}</p>
+        </details>
+      ))}
+    </DocsArticlePage>
+  );
+}

package/registry/examples/empty-state/library.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/empty-state/library.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/empty-state/library.tsx
+import { Button } from "@krizaka/ui/button";
+import { EmptyState } from "@krizaka/ui/empty-state";
+import { Mascot } from "@krizaka/ui/mascots";
+import { Page } from "@krizaka/ui/page";
+import { jsx, jsxs } from "react/jsx-runtime";
+function EmptyStateLibrary() {
+  return /* @__PURE__ */ jsxs(Page, { className: "brand-orochia", children: [
+    /* @__PURE__ */ jsx("h1", { className: "font-display text-2xl font-extrabold tracking-tight text-fg", children: "Library" }),
+    /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: /* @__PURE__ */ jsx(Mascot, { bird: "flamingo", mood: "empty", size: 96 }),
+        title: "Nothing here yet",
+        description: "Your videos, once published, wait here with their sales. The first one takes about ten minutes.",
+        action: /* @__PURE__ */ jsx(Button, { variant: "primary", shape: "cut", children: "Publish a first video" })
+      }
+    )
+  ] });
+}
+export {
+  EmptyStateLibrary as default
+};

package/registry/examples/empty-state/library.tsx

@@ -0,0 +1,20 @@
+import { Button } from "@krizaka/ui/button";
+import { EmptyState } from "@krizaka/ui/empty-state";
+import { Mascot } from "@krizaka/ui/mascots";
+import { Page } from "@krizaka/ui/page";
+
+// TEMPLATE — a page with nothing in it yet (a creator's library): the page keeps its title and place, the bird says it is
+// empty, one sentence tells what will fill it, one button does the first thing. Never a blank screen.
+export default function EmptyStateLibrary() {
+  return (
+    <Page className="brand-orochia">
+      <h1 className="font-display text-2xl font-extrabold tracking-tight text-fg">Library</h1>
+      <EmptyState
+        icon={<Mascot bird="flamingo" mood="empty" size={96} />}
+        title="Nothing here yet"
+        description="Your videos, once published, wait here with their sales. The first one takes about ten minutes."
+        action={<Button variant="primary" shape="cut">Publish a first video</Button>}
+      />
+    </Page>
+  );
+}

package/registry/examples/loader/branded.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/loader/branded.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/loader/branded.tsx
+import { OrochiaLogo } from "@krizaka/ui";
+import { Loader } from "@krizaka/ui/loader";
+import { jsx } from "react/jsx-runtime";
+function LoaderBranded() {
+  return /* @__PURE__ */ jsx(Loader, { label: "Loading your videos", delay: 0, variant: "block", mark: /* @__PURE__ */ jsx(OrochiaLogo, { animated: true }) });
+}
+export {
+  LoaderBranded as default
+};

package/registry/examples/loader/branded.tsx

@@ -0,0 +1,7 @@
+import { OrochiaLogo } from "@krizaka/ui";
+import { Loader } from "@krizaka/ui/loader";
+
+// The product's mark in place of the Krizaka glyph: Orochia waits with its own animated mark. Words, delay and ending stay.
+export default function LoaderBranded() {
+  return <Loader label="Loading your videos" delay={0} variant="block" mark={<OrochiaLogo animated />} />;
+}

package/registry/examples/loader/native/branded.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/loader/native/branded.js

@@ -0,0 +1,12 @@
+"use client";
+
+// registry/examples/loader/native/branded.tsx
+import { Loader } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativeLoaderBranded() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(Loader, { label: "Loading your videos", product: "orochia", variant: "block", delay: 0 }) });
+}
+export {
+  NativeLoaderBranded as default
+};

package/registry/examples/loader/native/branded.tsx

@@ -0,0 +1,11 @@
+import { Loader } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// The app's own mark waits for you: the animated `ProductMark` of Orochia, still when the system reduces motion.
+export default function NativeLoaderBranded() {
+  return (
+    <View style={{ width: 340 }}>
+      <Loader label="Loading your videos" product="orochia" variant="block" delay={0} />
+    </View>
+  );
+}

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

@@ -0,0 +1,41 @@
+"use client";
+
+// registry/examples/longform-page/case-study.tsx
+import { LongformPage } from "@krizaka/ui/longform-page";
+import { Stat } from "@krizaka/ui/stat";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function LongformPageCaseStudy() {
+  return /* @__PURE__ */ jsx(
+    LongformPage,
+    {
+      brand: "orazaka",
+      eyebrow: "Case study \xB7 Notary",
+      title: "Eleven leases a day, none of them leaving the office",
+      lead: "A four-person firm in Laval summarises contracts with its own AI, on its own server.",
+      chapters: [
+        {
+          id: "before",
+          title: "Before",
+          pull: "The summary took twenty minutes. The cloud tools took the lease with them.",
+          children: /* @__PURE__ */ jsx("p", { children: "Each lease was read twice by hand. Pasting it into a public chatbot was faster, and not an option." })
+        },
+        {
+          id: "after",
+          title: "What changed",
+          children: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { children: "Orazaka runs on a Mac mini in the back room. A pack reads the lease and drafts the summary; the notary signs it." }),
+            /* @__PURE__ */ jsx("p", { children: "Nothing is sent outside the building, and every request is logged for the audit." })
+          ] }),
+          figure: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-3", children: [
+            /* @__PURE__ */ jsx(Stat, { label: "Per lease", value: "2 min", trend: "down", trendLabel: "was 20 min" }),
+            /* @__PURE__ */ jsx(Stat, { label: "Sent outside", value: "0", hint: "all answered locally" }),
+            /* @__PURE__ */ jsx(Stat, { label: "Hours a week", value: "14", trend: "up", trendLabel: "given back" })
+          ] })
+        }
+      ]
+    }
+  );
+}
+export {
+  LongformPageCaseStudy as default
+};

package/registry/examples/longform-page/case-study.tsx

@@ -0,0 +1,40 @@
+import { LongformPage } from "@krizaka/ui/longform-page";
+import { Stat } from "@krizaka/ui/stat";
+
+// TEMPLATE — a case study (a notary's office on Orazaka): the situation, what was done, the figures that prove it. Chapters
+// in a reading column, the result as a figure that breaks out of the column; one column on a phone.
+export default function LongformPageCaseStudy() {
+  return (
+    <LongformPage
+      brand="orazaka"
+      eyebrow="Case study · Notary"
+      title="Eleven leases a day, none of them leaving the office"
+      lead="A four-person firm in Laval summarises contracts with its own AI, on its own server."
+      chapters={[
+        {
+          id: "before",
+          title: "Before",
+          pull: "The summary took twenty minutes. The cloud tools took the lease with them.",
+          children: <p>Each lease was read twice by hand. Pasting it into a public chatbot was faster, and not an option.</p>,
+        },
+        {
+          id: "after",
+          title: "What changed",
+          children: (
+            <>
+              <p>Orazaka runs on a Mac mini in the back room. A pack reads the lease and drafts the summary; the notary signs it.</p>
+              <p>Nothing is sent outside the building, and every request is logged for the audit.</p>
+            </>
+          ),
+          figure: (
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+              <Stat label="Per lease" value="2 min" trend="down" trendLabel="was 20 min" />
+              <Stat label="Sent outside" value="0" hint="all answered locally" />
+              <Stat label="Hours a week" value="14" trend="up" trendLabel="given back" />
+            </div>
+          ),
+        },
+      ]}
+    />
+  );
+}

package/registry/examples/profile-card/creator.js

@@ -9,9 +9,9 @@ function ProfileCardCreator() {
   return /* @__PURE__ */ jsxs(
     ProfileCard,
     {
-      visual: /* @__PURE__ */ jsx(Avatar, { fallback: "EM", size: "xl" }),
+      visual: /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp", alt: "Noor Haddad", fallback: "NH", size: "xl" }),
       visualSize: 96,
-      name: "Elena Marchetti",
+      name: "Noor Haddad",
       statLabel: "Profile complete",
       value: 80,
       stats: [

package/registry/examples/profile-card/creator.tsx

@@ -6,9 +6,9 @@ import { ProfileCard } from "@krizaka/ui/profile-card";
 export default function ProfileCardCreator() {
   return (
     <ProfileCard
-      visual={<Avatar fallback="EM" size="xl" />}
+      visual={<Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp" alt="Noor Haddad" fallback="NH" size="xl" />}
       visualSize={96}
-      name="Elena Marchetti"
+      name="Noor Haddad"
       statLabel="Profile complete"
       value={80}
       stats={[

package/registry/examples/profile-card/match.js

@@ -9,9 +9,9 @@ function ProfileCardMatch() {
     ProfileCard,
     {
       brand: "yazakia",
-      visual: /* @__PURE__ */ jsx(Avatar, { fallback: "AR", size: "xl" }),
+      visual: /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/camille-256.dc2943029a.webp", alt: "Camille Roy", fallback: "CR", size: "xl" }),
       visualSize: 88,
-      name: "Alex, 29",
+      name: "Camille, 29",
       stats: [
         { label: "Interests in common", value: 4, max: 6, valueText: "4 of 6" },
         { label: "Answers that match", value: 7, max: 10, valueText: "7 of 10" }

package/registry/examples/profile-card/match.tsx

@@ -6,9 +6,9 @@ export default function ProfileCardMatch() {
   return (
     <ProfileCard
       brand="yazakia"
-      visual={<Avatar fallback="AR" size="xl" />}
+      visual={<Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/camille-256.dc2943029a.webp" alt="Camille Roy" fallback="CR" size="xl" />}
       visualSize={88}
-      name="Alex, 29"
+      name="Camille, 29"
       stats={[
         { label: "Interests in common", value: 4, max: 6, valueText: "4 of 6" },
         { label: "Answers that match", value: 7, max: 10, valueText: "7 of 10" },

package/registry/examples/profile-card/native/default.js

@@ -7,8 +7,8 @@ function NativeProfileCardDefault() {
   return /* @__PURE__ */ jsx(
     ProfileCard,
     {
-      visual: /* @__PURE__ */ jsx(Avatar, { fallback: "EM", size: "xl" }),
-      name: "Elena Marchetti",
+      visual: /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp", alt: "Noor Haddad", fallback: "NH", size: "xl" }),
+      name: "Noor Haddad",
       statLabel: "Profile complete",
       value: 80,
       stats: [

package/registry/examples/profile-card/native/default.tsx

@@ -4,8 +4,8 @@ import { Avatar, Button, ProfileCard } from "@krizaka/ui/native";
 export default function NativeProfileCardDefault() {
   return (
     <ProfileCard
-      visual={<Avatar fallback="EM" size="xl" />}
-      name="Elena Marchetti"
+      visual={<Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp" alt="Noor Haddad" fallback="NH" size="xl" />}
+      name="Noor Haddad"
       statLabel="Profile complete"
       value={80}
       stats={[

package/registry/examples/pull-to-refresh/native/branded.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/pull-to-refresh/native/branded.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/pull-to-refresh/native/branded.tsx
+import { BrandedRefresh, Txt } from "@krizaka/ui/native";
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+function NativePullToRefreshBranded() {
+  const [refreshing, setRefreshing] = useState(true);
+  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 240 }, children: /* @__PURE__ */ jsx(BrandedRefresh, { product: "orochia", refreshing, onRefresh: () => setRefreshing(true), label: "Refreshing your videos", children: (scroll) => /* @__PURE__ */ jsx(ScrollView, { ...scroll, contentContainerStyle: { paddingTop: 56 }, children: ["Sunset session \xB7 Elena \xB7 2.4K views", "Acoustic dare \xB7 Alex \xB7 918 views"].map((line) => /* @__PURE__ */ jsx(Txt, { style: { padding: 16 }, children: line }, line)) }) }) });
+}
+export {
+  NativePullToRefreshBranded as default
+};