@krizaka/ui 2.6.0 → 2.9.0

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

@@ -0,0 +1,20 @@
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { DetailLayout } from "@krizaka/ui/detail-layout";
+
+// Without tabs or side panel: an object's header and its content.
+export default function DetailLayoutJob() {
+  return (
+    <DetailLayout
+      className="w-full"
+      back={<a href="#jobs">← Jobs</a>}
+      eyebrow="Job · job-4822"
+      title="Podcast transcript"
+      status={<Badge tone="accent" dot>Running</Badge>}
+      meta="Whisper large · started 5 min ago"
+      actions={<Button size="sm" variant="danger" shape="cut">Cancel</Button>}
+    >
+      <p className="text-sm text-fg-secondary">The transcript appears here as it is written.</p>
+    </DetailLayout>
+  );
+}

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

@@ -0,0 +1,44 @@
+"use client";
+
+// registry/examples/detail-layout/video.tsx
+import { Badge } from "@krizaka/ui/badge";
+import { Button } from "@krizaka/ui/button";
+import { DetailLayout } from "@krizaka/ui/detail-layout";
+import { Facts } from "@krizaka/ui/page";
+import { Stat } from "@krizaka/ui/stat";
+import { Tabs } from "@krizaka/ui/tabs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DetailLayoutVideo() {
+  return /* @__PURE__ */ jsx("div", { className: "brand-orochia w-full", children: /* @__PURE__ */ jsx(Tabs.Root, { defaultValue: "overview", children: /* @__PURE__ */ jsxs(
+    DetailLayout,
+    {
+      back: /* @__PURE__ */ jsx("a", { href: "#videos", children: "\u2190 Videos" }),
+      media: /* @__PURE__ */ jsx("div", { className: "aspect-video w-40 bg-linear-to-br from-accent to-accent-2" }),
+      eyebrow: "Video \xB7 v-2087",
+      title: "Night shoot, part 2",
+      status: /* @__PURE__ */ jsx(Badge, { tone: "success", dot: true, children: "Published" }),
+      meta: /* @__PURE__ */ jsx(Facts, { items: [{ label: "12:48" }, { label: "Unlock \u20AC4.99" }, { label: "18+ checked", tone: "ok" }] }),
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", shape: "cut", children: "Edit" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", shape: "cut", children: "Share" })
+      ] }),
+      tabs: /* @__PURE__ */ jsxs(Tabs.List, { "aria-label": "Video", children: [
+        /* @__PURE__ */ jsx(Tabs.Trigger, { value: "overview", children: "Overview" }),
+        /* @__PURE__ */ jsx(Tabs.Trigger, { value: "sales", children: "Sales" }),
+        /* @__PURE__ */ jsx(Tabs.Trigger, { value: "comments", children: "Comments" })
+      ] }),
+      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: "Unlocks", value: "146", trend: "up", trendLabel: "+12", hint: "7 days" }),
+        /* @__PURE__ */ jsx(Stat, { label: "Earned", value: "\u20AC653", hint: "after the 10 % fee" })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(Tabs.Content, { value: "overview", className: "text-sm leading-relaxed text-fg-secondary", children: "The second half of the night shoot in Old Montr\xE9al: the rooftop, the rain, the last take at dawn." }),
+        /* @__PURE__ */ jsx(Tabs.Content, { value: "sales", className: "text-sm text-fg-secondary", children: "146 unlocks, 3 tips." }),
+        /* @__PURE__ */ jsx(Tabs.Content, { value: "comments", className: "text-sm text-fg-secondary", children: "28 comments, 2 waiting for moderation." })
+      ]
+    }
+  ) }) });
+}
+export {
+  DetailLayoutVideo as default
+};

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

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

package/registry/examples/docs-layout/page.d.ts

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

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

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/docs-layout/page.tsx
+import { DocsLayout } from "@krizaka/ui/docs-layout";
+import { Toc } from "@krizaka/ui/toc";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PAGES = ["Getting started", "Architecture", "API reference"];
+function DocsLayoutPage() {
+  return /* @__PURE__ */ jsxs(
+    DocsLayout,
+    {
+      className: "pt-6",
+      sidebarLabel: "Pages of the documentation",
+      sidebar: /* @__PURE__ */ jsx("nav", { "aria-label": "Documentation", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1 text-sm", children: PAGES.map((p, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: `#${i}`, "aria-current": i === 0 ? "page" : void 0, className: "block rounded-md px-3 py-2 text-fg-secondary no-underline hover:bg-surface-2 aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg", children: p }) }, p)) }) }),
+      toc: /* @__PURE__ */ jsx(Toc, { label: "On this page", items: [{ id: "install", label: "Install" }, { id: "run", label: "Run" }] }),
+      children: [
+        /* @__PURE__ */ jsx("h1", { className: "font-display text-3xl font-extrabold text-fg", children: "Getting started" }),
+        /* @__PURE__ */ jsx("h2", { id: "install", className: "mt-6 text-xl font-bold text-fg", children: "Install" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-fg-secondary", children: "npx orazaka install" })
+      ]
+    }
+  );
+}
+export {
+  DocsLayoutPage as default
+};

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

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

package/registry/examples/goal-gauge/arcade.d.ts

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

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

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

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

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

package/registry/examples/goal-gauge/challenge.d.ts

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

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

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

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

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

package/registry/examples/goal-gauge/drain.d.ts

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

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

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

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

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

package/registry/examples/goal-gauge/native/default.d.ts

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

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

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

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

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

package/registry/examples/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/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
+};