@krizaka/ui 2.8.0 → 2.10.0

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/landscape/backdrop.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/landscape/backdrop.js

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/landscape/backdrop.tsx
+import { Landscape } from "@krizaka/ui/landscape";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LandscapeBackdrop() {
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-80 w-full max-w-3xl overflow-hidden rounded-2xl border border-border-subtle", children: [
+    /* @__PURE__ */ jsx(Landscape, { animated: false }),
+    /* @__PURE__ */ jsx("p", { className: "relative z-10 p-6 text-lg font-semibold text-fg", children: "Built in the open, in Montr\xE9al." })
+  ] });
+}
+export {
+  LandscapeBackdrop as default
+};

package/registry/examples/landscape/backdrop.tsx

@@ -0,0 +1,11 @@
+import { Landscape } from "@krizaka/ui/landscape";
+
+// A page's end: the Krizaka valley at dusk behind the last words, faded into the surface.
+export default function LandscapeBackdrop() {
+  return (
+    <div className="relative h-80 w-full max-w-3xl overflow-hidden rounded-2xl border border-border-subtle">
+      <Landscape animated={false} />
+      <p className="relative z-10 p-6 text-lg font-semibold text-fg">Built in the open, in Montréal.</p>
+    </div>
+  );
+}

package/registry/examples/landscape/brand.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/landscape/brand.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/landscape/brand.tsx
+import { Landscape } from "@krizaka/ui/landscape";
+import { jsx } from "react/jsx-runtime";
+function LandscapeBrand() {
+  return /* @__PURE__ */ jsx("div", { className: "brand-orazaka relative h-64 w-full max-w-3xl overflow-hidden rounded-2xl border border-border-subtle", children: /* @__PURE__ */ jsx(Landscape, { tone: "brand", flock: false, animated: false }) });
+}
+export {
+  LandscapeBrand as default
+};

package/registry/examples/landscape/brand.tsx

@@ -0,0 +1,10 @@
+import { Landscape } from "@krizaka/ui/landscape";
+
+// `tone="brand"`: the sky and the peaks in the host brand's accents; without the flock, a calmer backdrop.
+export default function LandscapeBrand() {
+  return (
+    <div className="brand-orazaka relative h-64 w-full max-w-3xl overflow-hidden rounded-2xl border border-border-subtle">
+      <Landscape tone="brand" flock={false} animated={false} />
+    </div>
+  );
+}

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/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/marketing-layout/basic.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/marketing-layout/basic.js

@@ -0,0 +1,31 @@
+"use client";
+
+// registry/examples/marketing-layout/basic.tsx
+import { MarketingLayout } from "@krizaka/ui/marketing-layout";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MarketingLayoutBasic() {
+  return /* @__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__ */ jsx(NavBar.Brand, { href: "#home", children: "Krizaka" }),
+        /* @__PURE__ */ jsxs(NavBar.Items, { children: [
+          /* @__PURE__ */ jsx(NavBar.Link, { href: "#products", active: true, children: "Products" }),
+          /* @__PURE__ */ jsx(NavBar.Link, { href: "#docs", children: "Docs" })
+        ] })
+      ] }),
+      footer: /* @__PURE__ */ jsx("footer", { className: "border-t border-border-subtle px-6 py-8 text-sm text-fg-secondary", children: "\xA9 Krizaka \xB7 Montr\xE9al" }),
+      children: [
+        /* @__PURE__ */ jsx(PageHero, { eyebrow: "Products", title: "Two products, one way of building", backdrop: "plain" }),
+        /* @__PURE__ */ jsx(Section, { id: "why", title: "Why", spacing: "sm", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "Every page shares the same edges." }) })
+      ]
+    }
+  );
+}
+export {
+  MarketingLayoutBasic as default
+};

package/registry/examples/marketing-layout/basic.tsx

@@ -0,0 +1,28 @@
+import { MarketingLayout } from "@krizaka/ui/marketing-layout";
+import { NavBar } from "@krizaka/ui/nav-bar";
+import { Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+
+// A site's page: the link that skips to the content, the floating bar, the hero and sections in one frame, the footer.
+export default function MarketingLayoutBasic() {
+  return (
+    <MarketingLayout
+      skipLabel="Skip to content"
+      header={
+        <NavBar.Root label="Main" compactAfter={false} className="max-w-(--kz-page-max,72rem)">
+          <NavBar.Brand href="#home">Krizaka</NavBar.Brand>
+          <NavBar.Items>
+            <NavBar.Link href="#products" active>Products</NavBar.Link>
+            <NavBar.Link href="#docs">Docs</NavBar.Link>
+          </NavBar.Items>
+        </NavBar.Root>
+      }
+      footer={<footer className="border-t border-border-subtle px-6 py-8 text-sm text-fg-secondary">© Krizaka · Montréal</footer>}
+    >
+      <PageHero eyebrow="Products" title="Two products, one way of building" backdrop="plain" />
+      <Section id="why" title="Why" spacing="sm">
+        <p className="text-sm text-fg-secondary">Every page shares the same edges.</p>
+      </Section>
+    </MarketingLayout>
+  );
+}

package/registry/examples/marketing-layout/docs-hub.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/marketing-layout/docs-hub.js

@@ -0,0 +1,37 @@
+"use client";
+
+// registry/examples/marketing-layout/docs-hub.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GROUPS = [
+  {
+    id: "start",
+    title: "Start here",
+    cards: [
+      { id: "cli", logo: "orazaka", title: "The CLI", text: "npx orazaka install, start, dev \u2014 then every command." },
+      { id: "packs", logo: "orazaka", title: "Packs & Studios", text: "The business offers Orazaka installs without code." },
+      { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts \u2014 behind four gates." }
+    ]
+  },
+  {
+    id: "platform",
+    title: "Platform",
+    cards: [
+      { id: "ui", logo: "krizaka", title: "Krizaka UI", text: "Tokens, a Tailwind preset and the components \u2014 live." },
+      { id: "java", logo: "krizaka", title: "Krizaka Java", text: "Parent, BOM, starters, messaging, Problem Details." }
+    ]
+  }
+];
+function MarketingLayoutDocsHub() {
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsx(PageHero, { eyebrow: "Documentation", title: "Build with Krizaka", lead: "The building blocks the products are made of, documented from their source.", backdrop: "plain" }),
+    GROUPS.map((g) => /* @__PURE__ */ jsx(Section, { id: `hub-${g.id}`, title: g.title, headingSize: "sm", spacing: "sm", children: /* @__PURE__ */ jsx(CardGrid, { min: 260, reveal: false, children: g.cards.map((c) => /* @__PURE__ */ jsx(LinkCard, { href: `#${c.id}`, icon: /* @__PURE__ */ jsx(ProductLogo, { id: c.logo, size: 24, animated: false }), title: c.title, description: c.text, cta: "Open" }, c.id)) }) }, g.id))
+  ] });
+}
+export {
+  MarketingLayoutDocsHub as default
+};

package/registry/examples/marketing-layout/docs-hub.tsx

@@ -0,0 +1,44 @@
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+
+const GROUPS = [
+  {
+    id: "start",
+    title: "Start here",
+    cards: [
+      { id: "cli", logo: "orazaka", title: "The CLI", text: "npx orazaka install, start, dev — then every command." },
+      { id: "packs", logo: "orazaka", title: "Packs & Studios", text: "The business offers Orazaka installs without code." },
+      { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts — behind four gates." },
+    ],
+  },
+  {
+    id: "platform",
+    title: "Platform",
+    cards: [
+      { id: "ui", logo: "krizaka", title: "Krizaka UI", text: "Tokens, a Tailwind preset and the components — live." },
+      { id: "java", logo: "krizaka", title: "Krizaka Java", text: "Parent, BOM, starters, messaging, Problem Details." },
+    ],
+  },
+] as const;
+
+// TEMPLATE — a documentation hub (krizaka.com/docs): the hero, then one section per group, each a grid of compact link
+// cards — the whole card one link, the product's mark, one sentence, the way in. One column on a phone.
+export default function MarketingLayoutDocsHub() {
+  return (
+    <div className="w-full">
+      <PageHero eyebrow="Documentation" title="Build with Krizaka" lead="The building blocks the products are made of, documented from their source." backdrop="plain" />
+      {GROUPS.map((g) => (
+        <Section key={g.id} id={`hub-${g.id}`} title={g.title} headingSize="sm" spacing="sm">
+          <CardGrid min={260} reveal={false}>
+            {g.cards.map((c) => (
+              <LinkCard key={c.id} href={`#${c.id}`} icon={<ProductLogo id={c.logo} size={24} animated={false} />} title={c.title} description={c.text} cta="Open" />
+            ))}
+          </CardGrid>
+        </Section>
+      ))}
+    </div>
+  );
+}

package/registry/examples/marketing-layout/pricing.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/marketing-layout/pricing.js

@@ -0,0 +1,45 @@
+"use client";
+
+// registry/examples/marketing-layout/pricing.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { GlowCard } from "@krizaka/ui/glow-card";
+import { Meter } from "@krizaka/ui/meter";
+import { Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PLANS = [
+  { id: "community", name: "Community", price: "Free", unit: "self-hosted", points: ["Every feature", "Your hardware", "Community support"] },
+  { id: "workspace", name: "Workspace", price: "\u20AC29", unit: "per month \xB7 12,000 credits", points: ["Packs & Studios", "Shared workspaces", "Email support"], featured: true },
+  { id: "sovereign", name: "Sovereign", price: "Custom", unit: "on your servers", points: ["Installation with you", "Law 25 review", "A named engineer"] }
+];
+function MarketingLayoutPricing() {
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsx(PageHero, { 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.", align: "center", backdrop: "plain" }),
+    /* @__PURE__ */ jsx(Section, { "aria-label": "Plans", spacing: "sm", children: /* @__PURE__ */ jsx("ul", { className: "grid gap-4 md:grid-cols-3", children: PLANS.map((p) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsxs(GlowCard, { alive: p.featured, className: "flex w-full flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("h2", { className: "font-display text-lg font-bold text-fg", children: p.name }),
+        p.featured && /* @__PURE__ */ jsx(Badge, { tone: "accent", children: "Most chosen" })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { children: [
+        /* @__PURE__ */ jsx("span", { className: "font-display text-4xl font-extrabold text-fg", children: p.price }),
+        /* @__PURE__ */ jsx("span", { className: "mt-1 block text-sm text-fg-secondary", children: p.unit })
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2 text-sm text-fg-secondary", children: p.points.map((x) => /* @__PURE__ */ jsxs("li", { children: [
+        "\u2014 ",
+        x
+      ] }, x)) }),
+      /* @__PURE__ */ jsxs(Button, { variant: p.featured ? "primary" : "secondary", shape: "cut", className: "mt-auto w-full", children: [
+        "Choose ",
+        p.name
+      ] })
+    ] }) }, p.id)) }) }),
+    /* @__PURE__ */ jsx(Section, { id: "credits", title: "Your credits", headingSize: "sm", spacing: "sm", divider: true, 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", thresholds: { low: 0.7, high: 0.9 }, showLabel: true }),
+      /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-fg-secondary", children: "One credit \u2248 one chat answer \xB7 4 credits an image \xB7 30 a minute of video." })
+    ] }) })
+  ] });
+}
+export {
+  MarketingLayoutPricing as default
+};

package/registry/examples/marketing-layout/pricing.tsx

@@ -0,0 +1,55 @@
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { GlowCard } from "@krizaka/ui/glow-card";
+import { Meter } from "@krizaka/ui/meter";
+import { Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+
+const PLANS = [
+  { id: "community", name: "Community", price: "Free", unit: "self-hosted", points: ["Every feature", "Your hardware", "Community support"] },
+  { id: "workspace", name: "Workspace", price: "€29", unit: "per month · 12,000 credits", points: ["Packs & Studios", "Shared workspaces", "Email support"], featured: true },
+  { id: "sovereign", name: "Sovereign", price: "Custom", unit: "on your servers", points: ["Installation with you", "Law 25 review", "A named engineer"] },
+];
+
+// TEMPLATE — pricing and credits: the plans side by side (the featured one lit by its turning ring), what a credit buys,
+// and the credits left for a signed-in visitor. On a phone the plans stack, the featured one first in the reading order
+// it already has; every action is the cut button, the featured one primary.
+export default function MarketingLayoutPricing() {
+  return (
+    <div className="w-full">
+      <PageHero 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." align="center" backdrop="plain" />
+      <Section aria-label="Plans" spacing="sm">
+        <ul className="grid gap-4 md:grid-cols-3">
+          {PLANS.map((p) => (
+            <li key={p.id} className="flex">
+              <GlowCard alive={p.featured} className="flex w-full flex-col gap-4">
+                <div className="flex items-center justify-between gap-2">
+                  <h2 className="font-display text-lg font-bold text-fg">{p.name}</h2>
+                  {p.featured && <Badge tone="accent">Most chosen</Badge>}
+                </div>
+                <p>
+                  <span className="font-display text-4xl font-extrabold text-fg">{p.price}</span>
+                  <span className="mt-1 block text-sm text-fg-secondary">{p.unit}</span>
+                </p>
+                <ul className="flex flex-col gap-2 text-sm text-fg-secondary">
+                  {p.points.map((x) => (
+                    <li key={x}>— {x}</li>
+                  ))}
+                </ul>
+                <Button variant={p.featured ? "primary" : "secondary"} shape="cut" className="mt-auto w-full">
+                  Choose {p.name}
+                </Button>
+              </GlowCard>
+            </li>
+          ))}
+        </ul>
+      </Section>
+      <Section id="credits" title="Your credits" headingSize="sm" spacing="sm" divider>
+        <div className="max-w-md">
+          <Meter label="Credits this month" value={3800} max={12000} valueText="3,800 of 12,000 used" thresholds={{ low: 0.7, high: 0.9 }} showLabel />
+          <p className="mt-3 text-sm text-fg-secondary">One credit ≈ one chat answer · 4 credits an image · 30 a minute of video.</p>
+        </div>
+      </Section>
+    </div>
+  );
+}

package/registry/examples/marketing-layout/product-page.d.ts

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