@krizaka/ui 2.8.0 → 2.10.0

package/registry/examples/marketing-layout/product-page.js

@@ -0,0 +1,79 @@
+"use client";
+
+// registry/examples/marketing-layout/product-page.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { ActionBar } from "@krizaka/ui/action-bar";
+import { ArgumentCard } from "@krizaka/ui/argument-card";
+import { Button } from "@krizaka/ui/button";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { CtaPanel } from "@krizaka/ui/cta-panel";
+import { DecisionList } from "@krizaka/ui/decision-list";
+import { MarketingLayout } from "@krizaka/ui/marketing-layout";
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+import { Mascot } from "@krizaka/ui/mascots";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { Facts, Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+var WHY = [
+  { id: "local", title: "Local inference", hook: "Elsewhere, every prompt crosses the ocean.", bird: "falcon" },
+  { id: "paid", title: "Paid once", hook: "Elsewhere, you pay per token, forever.", bird: "flamingo" },
+  { id: "asked", title: "Agents that ask", hook: "Elsewhere, an agent acts first and apologises later.", bird: "pigeon" }
+];
+var DECISIONS = [
+  { id: "local", chose: "Local models by default.", refused: "A hosted API as the default path.", because: "A prompt that never leaves cannot leak.", cost: "You need a GPU, or patience on a CPU." },
+  { id: "telemetry", chose: "Zero telemetry.", refused: "Anonymous usage statistics.", because: "Anonymous rarely stays anonymous.", cost: "You tell us what breaks." }
+];
+var labels = { chose: "We chose", refused: "We refused", because: "Because", cost: "What it costs you" };
+function MarketingLayoutProductPage() {
+  return /* @__PURE__ */ jsx("div", { className: "brand-orazaka", children: /* @__PURE__ */ jsxs(
+    MarketingLayout,
+    {
+      skipLabel: "Skip to content",
+      header: /* @__PURE__ */ jsxs(NavBar.Root, { label: "Main", compactAfter: false, className: "max-w-(--kz-page-max,72rem)", children: [
+        /* @__PURE__ */ jsxs(NavBar.Brand, { href: "#home", children: [
+          /* @__PURE__ */ jsx(ProductLogo, { id: "orazaka", size: 22, animated: false }),
+          " Orazaka"
+        ] }),
+        /* @__PURE__ */ jsxs(NavBar.Items, { children: [
+          /* @__PURE__ */ jsx(NavBar.Link, { href: "#why", active: true, children: "Why" }),
+          /* @__PURE__ */ jsx(NavBar.Link, { href: "#decisions", children: "Decisions" })
+        ] })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          PageHero,
+          {
+            eyebrow: "Sovereign AI \xB7 open source",
+            title: "The AI that never leaves home",
+            lead: "Chat, image, voice and video on your own server \u2014 one governed pipeline, nothing sent anywhere.",
+            aside: /* @__PURE__ */ jsx(Mascot, { bird: "owl", mood: "welcome", size: 112 }),
+            children: [
+              /* @__PURE__ */ jsx(Facts, { items: [{ label: "Apache-2.0", tone: "ok" }, { label: "Law 25 \xB7 GDPR" }] }),
+              /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", shape: "cut", shimmer: true, children: "Install in three commands" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Section, { id: "why", eyebrow: "Why", title: "Three traps it removes", children: /* @__PURE__ */ jsx(CardGrid, { min: 260, fit: "fit", reveal: false, children: WHY.map((w) => /* @__PURE__ */ jsx(
+          ArgumentCard,
+          {
+            id: `why-${w.id}`,
+            title: w.title,
+            mark: /* @__PURE__ */ jsx(Mascot, { bird: w.bird, size: 40, animated: false }),
+            hook: { label: "The trap", text: w.hook },
+            more: { href: `#${w.id}`, label: "Details" }
+          },
+          w.id
+        )) }) }),
+        /* @__PURE__ */ jsxs(Section, { id: "decisions", eyebrow: "Decisions", title: "What we chose, and what it costs you", divider: true, children: [
+          /* @__PURE__ */ jsx(DecisionList, { decisions: DECISIONS, labels, reveal: false }),
+          /* @__PURE__ */ jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsx(MascotQuote, { variant: "callout", bird: "owl", label: "The owl's promise", children: "Every personal record stays in Qu\xE9bec, and you can read who touched it." }) })
+        ] }),
+        /* @__PURE__ */ jsx(Section, { spacing: "sm", "aria-labelledby": "product-cta", children: /* @__PURE__ */ jsx(CtaPanel, { id: "product-cta", title: "Ready to run it at home?", body: "Three commands, then your first private answer.", children: /* @__PURE__ */ jsx(ActionBar, { primaryFirst: true, size: "lg", label: "Get started", actions: [{ href: "#install", label: "Install" }, { href: "#contact", label: "Talk to us" }] }) }) })
+      ]
+    }
+  ) });
+}
+export {
+  MarketingLayoutProductPage as default
+};

package/registry/examples/marketing-layout/product-page.tsx

@@ -0,0 +1,83 @@
+import { ProductLogo } from "@krizaka/ui";
+import { ActionBar } from "@krizaka/ui/action-bar";
+import { ArgumentCard } from "@krizaka/ui/argument-card";
+import { Button } from "@krizaka/ui/button";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { CtaPanel } from "@krizaka/ui/cta-panel";
+import { DecisionList } from "@krizaka/ui/decision-list";
+import { MarketingLayout } from "@krizaka/ui/marketing-layout";
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+import { Mascot } from "@krizaka/ui/mascots";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { Facts, Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+
+const WHY = [
+  { id: "local", title: "Local inference", hook: "Elsewhere, every prompt crosses the ocean.", bird: "falcon" as const },
+  { id: "paid", title: "Paid once", hook: "Elsewhere, you pay per token, forever.", bird: "flamingo" as const },
+  { id: "asked", title: "Agents that ask", hook: "Elsewhere, an agent acts first and apologises later.", bird: "pigeon" as const },
+];
+const DECISIONS = [
+  { id: "local", chose: "Local models by default.", refused: "A hosted API as the default path.", because: "A prompt that never leaves cannot leak.", cost: "You need a GPU, or patience on a CPU." },
+  { id: "telemetry", chose: "Zero telemetry.", refused: "Anonymous usage statistics.", because: "Anonymous rarely stays anonymous.", cost: "You tell us what breaks." },
+];
+const labels = { chose: "We chose", refused: "We refused", because: "Because", cost: "What it costs you" };
+
+// TEMPLATE — a product page (Orazaka): the hero with its facts and its main action (cut, shimmer), the reasons as compact
+// argument cards (the bird in the corner), the decisions with their cost, the owl's promise, the closing call. On a
+// phone the hero's bird goes above the title, the cards stack, the decisions' three parts stack under the choice.
+export default function MarketingLayoutProductPage() {
+  return (
+    <div className="brand-orazaka">
+      <MarketingLayout
+        skipLabel="Skip to content"
+        header={
+          <NavBar.Root label="Main" compactAfter={false} className="max-w-(--kz-page-max,72rem)">
+            <NavBar.Brand href="#home"><ProductLogo id="orazaka" size={22} animated={false} /> Orazaka</NavBar.Brand>
+            <NavBar.Items>
+              <NavBar.Link href="#why" active>Why</NavBar.Link>
+              <NavBar.Link href="#decisions">Decisions</NavBar.Link>
+            </NavBar.Items>
+          </NavBar.Root>
+        }
+      >
+        <PageHero
+          eyebrow="Sovereign AI · open source"
+          title="The AI that never leaves home"
+          lead="Chat, image, voice and video on your own server — one governed pipeline, nothing sent anywhere."
+          aside={<Mascot bird="owl" mood="welcome" size={112} />}
+        >
+          <Facts items={[{ label: "Apache-2.0", tone: "ok" }, { label: "Law 25 · GDPR" }]} />
+          <Button variant="primary" size="lg" shape="cut" shimmer>Install in three commands</Button>
+        </PageHero>
+        <Section id="why" eyebrow="Why" title="Three traps it removes">
+          <CardGrid min={260} fit="fit" reveal={false}>
+            {WHY.map((w) => (
+              <ArgumentCard
+                key={w.id}
+                id={`why-${w.id}`}
+                title={w.title}
+                mark={<Mascot bird={w.bird} size={40} animated={false} />}
+                hook={{ label: "The trap", text: w.hook }}
+                more={{ href: `#${w.id}`, label: "Details" }}
+              />
+            ))}
+          </CardGrid>
+        </Section>
+        <Section id="decisions" eyebrow="Decisions" title="What we chose, and what it costs you" divider>
+          <DecisionList decisions={DECISIONS} labels={labels} reveal={false} />
+          <div className="mt-8">
+            <MascotQuote variant="callout" bird="owl" label="The owl's promise">
+              Every personal record stays in Québec, and you can read who touched it.
+            </MascotQuote>
+          </div>
+        </Section>
+        <Section spacing="sm" aria-labelledby="product-cta">
+          <CtaPanel id="product-cta" title="Ready to run it at home?" body="Three commands, then your first private answer.">
+            <ActionBar primaryFirst size="lg" label="Get started" actions={[{ href: "#install", label: "Install" }, { href: "#contact", label: "Talk to us" }]} />
+          </CtaPanel>
+        </Section>
+      </MarketingLayout>
+    </div>
+  );
+}

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

package/registry/examples/mascots/flock.tsx

@@ -1,6 +1,7 @@
 import { Mascot,MASCOT_BIRDS } from "@krizaka/ui/mascots";
 
-// The six birds in the host's brand colours: blue on Krizaka, orange in Orazaka, violet in Orochia, turquoise in Yazakia.
+// The seven birds in the host's brand colours: blue on Krizaka, orange in Orazaka, violet in Orochia, turquoise in
+// Yazakia, sage in Yororis.
 export default function MascotFlock() {
   return (
     <div className="flex flex-wrap items-end gap-6">

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

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/mascots/native/crane.tsx
+import { Mascot, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeMascotCrane() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 16, alignItems: "flex-end" }, children: [
+    /* @__PURE__ */ jsxs(View, { style: { alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ jsx(Mascot, { bird: "crane", mood: "welcome", size: 80 }),
+      /* @__PURE__ */ jsx(Txt, { variant: "caption", children: "welcome" })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: { alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ jsx(Mascot, { bird: "crane", mood: "thinking", size: 80 }),
+      /* @__PURE__ */ jsx(Txt, { variant: "caption", children: "listening" })
+    ] })
+  ] });
+}
+export {
+  NativeMascotCrane as default
+};

package/registry/examples/mascots/native/crane.tsx

@@ -0,0 +1,18 @@
+import { Mascot, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// The crane listens: welcoming, then listening — posed, unhurried.
+export default function NativeMascotCrane() {
+  return (
+    <View style={{ flexDirection: "row", gap: 16, alignItems: "flex-end" }}>
+      <View style={{ alignItems: "center", gap: 4 }}>
+        <Mascot bird="crane" mood="welcome" size={80} />
+        <Txt variant="caption">welcome</Txt>
+      </View>
+      <View style={{ alignItems: "center", gap: 4 }}>
+        <Mascot bird="crane" mood="thinking" size={80} />
+        <Txt variant="caption">listening</Txt>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/mascots/native/phoenix.tsx
+import { Phoenix, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeMascotPhoenix() {
+  return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 20, alignItems: "flex-end" }, children: [
+    /* @__PURE__ */ jsxs(View, { style: { alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ jsx(Phoenix, { size: 88, animated: false }),
+      /* @__PURE__ */ jsx(Txt, { variant: "caption", children: "own" })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: { alignItems: "center", gap: 4 }, children: [
+      /* @__PURE__ */ jsx(Phoenix, { size: 88, tone: "brand", animated: false }),
+      /* @__PURE__ */ jsx(Txt, { variant: "caption", children: "brand" })
+    ] })
+  ] });
+}
+export {
+  NativeMascotPhoenix as default
+};

package/registry/examples/mascots/native/phoenix.tsx

@@ -0,0 +1,18 @@
+import { Phoenix, Txt } from "@krizaka/ui/native";
+import { View } from "react-native";
+
+// The comeback: the phoenix in its own colours, then in the app's accent.
+export default function NativeMascotPhoenix() {
+  return (
+    <View style={{ flexDirection: "row", gap: 20, alignItems: "flex-end" }}>
+      <View style={{ alignItems: "center", gap: 4 }}>
+        <Phoenix size={88} animated={false} />
+        <Txt variant="caption">own</Txt>
+      </View>
+      <View style={{ alignItems: "center", gap: 4 }}>
+        <Phoenix size={88} tone="brand" animated={false} />
+        <Txt variant="caption">brand</Txt>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/mascots/phoenix.tsx
+import { Phoenix } from "@krizaka/ui/mascots";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MascotPhoenix() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-8", children: [
+    /* @__PURE__ */ jsx(Phoenix, { size: 112, title: "The phoenix" }),
+    /* @__PURE__ */ jsx(Phoenix, { size: 112, tone: "brand", title: "The phoenix in the brand's colours" })
+  ] });
+}
+export {
+  MascotPhoenix as default
+};

package/registry/examples/mascots/phoenix.tsx

@@ -0,0 +1,11 @@
+import { Phoenix } from "@krizaka/ui/mascots";
+
+// The phoenix stands for a comeback — a relaunch, a recovered account: its own colours, then the product's accent.
+export default function MascotPhoenix() {
+  return (
+    <div className="flex flex-wrap items-end gap-8">
+      <Phoenix size={112} title="The phoenix" />
+      <Phoenix size={112} tone="brand" title="The phoenix in the brand's colours" />
+    </div>
+  );
+}

package/registry/examples/pricing-page/credits.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/pricing-page/credits.js

@@ -0,0 +1,41 @@
+"use client";
+
+// registry/examples/pricing-page/credits.tsx
+import { Button } from "@krizaka/ui/button";
+import { Meter } from "@krizaka/ui/meter";
+import { PricingPage } from "@krizaka/ui/pricing-page";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PricingPageCredits() {
+  return /* @__PURE__ */ jsx(
+    PricingPage,
+    {
+      brand: "orazaka",
+      eyebrow: "Pricing",
+      title: "Pay once for what was done",
+      lead: "Credits buy answers, images and minutes of video \u2014 never a seat you do not use.",
+      plansLabel: "Plans",
+      plans: [
+        { id: "community", name: "Community", price: "Free", unit: "self-hosted", features: ["Every feature", "Your hardware"], action: /* @__PURE__ */ jsx(Button, { variant: "secondary", shape: "cut", className: "w-full", children: "Install" }) },
+        { id: "workspace", name: "Workspace", price: "CA$29", unit: "per month \xB7 12,000 credits", features: ["Packs & Studios", "Shared workspaces"], featured: true, badge: "Most chosen", action: /* @__PURE__ */ jsx(Button, { variant: "primary", shape: "cut", shimmer: true, className: "w-full", children: "Choose Workspace" }) },
+        { id: "sovereign", name: "Sovereign", price: "Custom", unit: "on your servers", features: ["Installed with you", "A named engineer"], action: /* @__PURE__ */ jsx(Button, { variant: "secondary", shape: "cut", className: "w-full", children: "Talk to us" }) }
+      ],
+      compare: {
+        caption: "Compare the plans",
+        columns: ["Community", "Workspace", "Sovereign"],
+        rows: [
+          { feature: "Local models", cells: ["\u2713", "\u2713", "\u2713"] },
+          { feature: "Shared workspaces", cells: ["\u2014", "\u2713", "\u2713"] },
+          { feature: "Support", cells: ["Community", "Email", "Named engineer"] }
+        ]
+      },
+      credits: { title: "What a credit buys", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md", children: [
+        /* @__PURE__ */ jsx(Meter, { label: "Credits this month", value: 3800, max: 12e3, valueText: "3,800 of 12,000 used", showLabel: true }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-fg-secondary", children: "1 credit \u2248 a chat answer \xB7 4 an image \xB7 30 a minute of video." })
+      ] }) },
+      faq: { title: "Questions", items: [{ question: "What happens when credits run out?", answer: "Nothing breaks: requests wait until the next month or a top-up." }, { question: "Do credits expire?", answer: "Unused credits roll over for one month." }] }
+    }
+  );
+}
+export {
+  PricingPageCredits as default
+};

package/registry/examples/pricing-page/credits.tsx

@@ -0,0 +1,33 @@
+import { Button } from "@krizaka/ui/button";
+import { Meter } from "@krizaka/ui/meter";
+import { PricingPage } from "@krizaka/ui/pricing-page";
+
+// TEMPLATE — plans and credits (Orazaka): the plans side by side, the featured one lifted; the comparison scrolls on a
+// phone; what a credit buys; the questions people ask, folded.
+export default function PricingPageCredits() {
+  return (
+    <PricingPage
+      brand="orazaka"
+      eyebrow="Pricing"
+      title="Pay once for what was done"
+      lead="Credits buy answers, images and minutes of video — never a seat you do not use."
+      plansLabel="Plans"
+      plans={[
+        { id: "community", name: "Community", price: "Free", unit: "self-hosted", features: ["Every feature", "Your hardware"], action: <Button variant="secondary" shape="cut" className="w-full">Install</Button> },
+        { id: "workspace", name: "Workspace", price: "CA$29", unit: "per month · 12,000 credits", features: ["Packs & Studios", "Shared workspaces"], featured: true, badge: "Most chosen", action: <Button variant="primary" shape="cut" shimmer className="w-full">Choose Workspace</Button> },
+        { id: "sovereign", name: "Sovereign", price: "Custom", unit: "on your servers", features: ["Installed with you", "A named engineer"], action: <Button variant="secondary" shape="cut" className="w-full">Talk to us</Button> },
+      ]}
+      compare={{
+        caption: "Compare the plans",
+        columns: ["Community", "Workspace", "Sovereign"],
+        rows: [
+          { feature: "Local models", cells: ["✓", "✓", "✓"] },
+          { feature: "Shared workspaces", cells: ["—", "✓", "✓"] },
+          { feature: "Support", cells: ["Community", "Email", "Named engineer"] },
+        ],
+      }}
+      credits={{ title: "What a credit buys", children: <div className="max-w-md"><Meter label="Credits this month" value={3800} max={12000} valueText="3,800 of 12,000 used" showLabel /><p className="mt-3 text-sm text-fg-secondary">1 credit ≈ a chat answer · 4 an image · 30 a minute of video.</p></div> }}
+      faq={{ title: "Questions", items: [{ question: "What happens when credits run out?", answer: "Nothing breaks: requests wait until the next month or a top-up." }, { question: "Do credits expire?", answer: "Unused credits roll over for one month." }] }}
+    />
+  );
+}

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

@@ -0,0 +1,44 @@
+"use client";
+
+// registry/examples/product-page/orazaka.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { Button } from "@krizaka/ui/button";
+import { Mascot } from "@krizaka/ui/mascots";
+import { ProductPage } from "@krizaka/ui/product-page";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ProductPageOrazaka() {
+  return /* @__PURE__ */ jsx(
+    ProductPage,
+    {
+      brand: "orazaka",
+      mark: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ProductLogo, { id: "orazaka", size: 18, animated: false }),
+        " Orazaka \xB7 sovereign AI"
+      ] }),
+      title: "The AI that never leaves home",
+      lead: "Chat, image, voice and video on your own server \u2014 one governed pipeline, nothing sent anywhere.",
+      facts: [{ label: "Apache-2.0", tone: "ok" }, { label: "Law 25 \xB7 GDPR" }],
+      actions: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", shape: "cut", shimmer: true, children: "Install in three commands" }),
+      visualLabel: "orazaka.local \u2014 chat",
+      visual: /* @__PURE__ */ jsx("p", { className: "p-6 text-sm text-fg-secondary", children: "\u201CSummarise the lease in plain French.\u201D \u2014 answered locally in 1.8 s." }),
+      reasonsHeading: { eyebrow: "Why", title: "Three traps it removes" },
+      reasonLabels: { trap: "The trap", more: "Details" },
+      reasons: [
+        { id: "local", title: "Local inference", trap: "Elsewhere, every prompt crosses the ocean.", mark: /* @__PURE__ */ jsx(Mascot, { bird: "falcon", size: 40, animated: false }), href: "#local" },
+        { id: "paid", title: "Paid once", trap: "Elsewhere, you pay per token, forever.", mark: /* @__PURE__ */ jsx(Mascot, { bird: "flamingo", size: 40, animated: false }), href: "#paid" },
+        { id: "asked", title: "Agents that ask", trap: "Elsewhere, an agent acts first.", mark: /* @__PURE__ */ jsx(Mascot, { bird: "pigeon", size: 40, animated: false }), href: "#asked" }
+      ],
+      decisions: {
+        eyebrow: "Decisions",
+        title: "What we chose, and what it costs you",
+        labels: { chose: "We chose", refused: "We refused", because: "Because", cost: "What it costs you" },
+        items: [{ id: "local", chose: "Local models by default.", refused: "A hosted API by default.", because: "A prompt that never leaves cannot leak.", cost: "A GPU, or patience." }]
+      },
+      promise: { bird: "owl", label: "The owl's promise", text: "Every personal record stays in Qu\xE9bec, and you can read who touched it." },
+      closing: { title: "Ready to run it at home?", actions: /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", shape: "cut", children: "Install" }) }
+    }
+  );
+}
+export {
+  ProductPageOrazaka as default
+};

package/registry/examples/product-page/orazaka.tsx

@@ -0,0 +1,36 @@
+import { ProductLogo } from "@krizaka/ui";
+import { Button } from "@krizaka/ui/button";
+import { Mascot } from "@krizaka/ui/mascots";
+import { ProductPage } from "@krizaka/ui/product-page";
+
+// TEMPLATE — a product's overview (Orazaka, in its orange): the promise beside the console alive, the traps it removes
+// as compact cards with their bird, its decisions and what they cost, the owl's promise, the closing call.
+export default function ProductPageOrazaka() {
+  return (
+    <ProductPage
+      brand="orazaka"
+      mark={<><ProductLogo id="orazaka" size={18} animated={false} /> Orazaka · sovereign AI</>}
+      title="The AI that never leaves home"
+      lead="Chat, image, voice and video on your own server — one governed pipeline, nothing sent anywhere."
+      facts={[{ label: "Apache-2.0", tone: "ok" }, { label: "Law 25 · GDPR" }]}
+      actions={<Button variant="primary" size="lg" shape="cut" shimmer>Install in three commands</Button>}
+      visualLabel="orazaka.local — chat"
+      visual={<p className="p-6 text-sm text-fg-secondary">“Summarise the lease in plain French.” — answered locally in 1.8 s.</p>}
+      reasonsHeading={{ eyebrow: "Why", title: "Three traps it removes" }}
+      reasonLabels={{ trap: "The trap", more: "Details" }}
+      reasons={[
+        { id: "local", title: "Local inference", trap: "Elsewhere, every prompt crosses the ocean.", mark: <Mascot bird="falcon" size={40} animated={false} />, href: "#local" },
+        { id: "paid", title: "Paid once", trap: "Elsewhere, you pay per token, forever.", mark: <Mascot bird="flamingo" size={40} animated={false} />, href: "#paid" },
+        { id: "asked", title: "Agents that ask", trap: "Elsewhere, an agent acts first.", mark: <Mascot bird="pigeon" size={40} animated={false} />, href: "#asked" },
+      ]}
+      decisions={{
+        eyebrow: "Decisions",
+        title: "What we chose, and what it costs you",
+        labels: { chose: "We chose", refused: "We refused", because: "Because", cost: "What it costs you" },
+        items: [{ id: "local", chose: "Local models by default.", refused: "A hosted API by default.", because: "A prompt that never leaves cannot leak.", cost: "A GPU, or patience." }],
+      }}
+      promise={{ bird: "owl", label: "The owl's promise", text: "Every personal record stays in Québec, and you can read who touched it." }}
+      closing={{ title: "Ready to run it at home?", actions: <Button variant="primary" size="lg" shape="cut">Install</Button> }}
+    />
+  );
+}

package/registry/examples/profile-card/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/profile-card/arcade.js

@@ -0,0 +1,25 @@
+"use client";
+
+// registry/examples/profile-card/arcade.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { Emblem } from "@krizaka/ui/achievement";
+import { ProfileCard } from "@krizaka/ui/profile-card";
+import { jsx } from "react/jsx-runtime";
+function ProfileCardArcade() {
+  return /* @__PURE__ */ jsx(
+    ProfileCard,
+    {
+      variant: "arcade",
+      brand: "orazaka",
+      nameAs: "p",
+      visual: /* @__PURE__ */ jsx(ProductLogo, { id: "orazaka", size: 120, animated: false }),
+      icon: /* @__PURE__ */ jsx(Emblem, { kind: "mirror", size: 16 }),
+      name: "Mirror clan",
+      statLabel: "Data kept at home",
+      caption: "\u014Dr\u0101re + zaka"
+    }
+  );
+}
+export {
+  ProfileCardArcade as default
+};

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

@@ -0,0 +1,19 @@
+import { ProductLogo } from "@krizaka/ui";
+import { Emblem } from "@krizaka/ui/achievement";
+import { ProfileCard } from "@krizaka/ui/profile-card";
+
+// The arcade flavour: the brand's light, a ring and a breathing aura, a skewed gauge — for a told page, not a dashboard.
+export default function ProfileCardArcade() {
+  return (
+    <ProfileCard
+      variant="arcade"
+      brand="orazaka"
+      nameAs="p"
+      visual={<ProductLogo id="orazaka" size={120} animated={false} />}
+      icon={<Emblem kind="mirror" size={16} />}
+      name="Mirror clan"
+      statLabel="Data kept at home"
+      caption="ōrāre + zaka"
+    />
+  );
+}

package/registry/examples/profile-card/creator.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/profile-card/creator.js

@@ -0,0 +1,31 @@
+"use client";
+
+// registry/examples/profile-card/creator.tsx
+import { Avatar } from "@krizaka/ui/avatar";
+import { Button } from "@krizaka/ui/button";
+import { ProfileCard } from "@krizaka/ui/profile-card";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ProfileCardCreator() {
+  return /* @__PURE__ */ jsxs(
+    ProfileCard,
+    {
+      visual: /* @__PURE__ */ jsx(Avatar, { fallback: "EM", size: "xl" }),
+      visualSize: 96,
+      name: "Elena Marchetti",
+      statLabel: "Profile complete",
+      value: 80,
+      stats: [
+        { label: "Challenges met", value: 12, max: 15, valueText: "12 of 15" },
+        { label: "Replies within a day", value: 94 }
+      ],
+      caption: "Dance and street fashion \xB7 Montr\xE9al",
+      children: [
+        /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", children: "Follow" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", children: "Message" })
+      ]
+    }
+  );
+}
+export {
+  ProfileCardCreator as default
+};