@krizaka/ui 2.9.0 → 3.0.0

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/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/status-page/building.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/status-page/building.js

@@ -0,0 +1,29 @@
+"use client";
+
+// registry/examples/status-page/building.tsx
+import { Button } from "@krizaka/ui/button";
+import { Mascot } from "@krizaka/ui/mascots";
+import { Progress } from "@krizaka/ui/progress";
+import { StatusPage } from "@krizaka/ui/status-page";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StatusPageBuilding() {
+  return /* @__PURE__ */ jsx(
+    StatusPage,
+    {
+      eyebrow: "Yazakia",
+      title: "On its way",
+      lead: "Meet by talking first. The first build reaches testers this winter.",
+      aside: /* @__PURE__ */ jsx(Mascot, { bird: "duck", mood: "thinking", size: 112 }),
+      state: "building",
+      stateLabel: "In construction",
+      checked: "Updated this week",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-md flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(Progress, { value: 40, label: "First build", showLabel: true, valueText: "4 of 10 milestones" }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", shape: "cut", className: "w-fit", children: "Tell me when it is ready" })
+      ] })
+    }
+  );
+}
+export {
+  StatusPageBuilding as default
+};

package/registry/examples/status-page/building.tsx

@@ -0,0 +1,25 @@
+import { Button } from "@krizaka/ui/button";
+import { Mascot } from "@krizaka/ui/mascots";
+import { Progress } from "@krizaka/ui/progress";
+import { StatusPage } from "@krizaka/ui/status-page";
+
+// TEMPLATE — « under construction »: what is coming, said honestly — its state in words, its progress, how to hear
+// about it — the duck that builds beside it. Never a fake screen.
+export default function StatusPageBuilding() {
+  return (
+    <StatusPage
+      eyebrow="Yazakia"
+      title="On its way"
+      lead="Meet by talking first. The first build reaches testers this winter."
+      aside={<Mascot bird="duck" mood="thinking" size={112} />}
+      state="building"
+      stateLabel="In construction"
+      checked="Updated this week"
+    >
+      <div className="flex max-w-md flex-col gap-4">
+        <Progress value={40} label="First build" showLabel valueText="4 of 10 milestones" />
+        <Button variant="primary" shape="cut" className="w-fit">Tell me when it is ready</Button>
+      </div>
+    </StatusPage>
+  );
+}

package/registry/examples/status-page/operational.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/status-page/operational.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/status-page/operational.tsx
+import { StatusPage } from "@krizaka/ui/status-page";
+import { jsx } from "react/jsx-runtime";
+function StatusPageOperational() {
+  return /* @__PURE__ */ jsx(
+    StatusPage,
+    {
+      eyebrow: "Status",
+      title: "How things are running",
+      state: "operational",
+      stateLabel: "All systems operational",
+      checked: "Checked 2 min ago",
+      servicesLabel: "Services",
+      services: [
+        { id: "web", name: "krizaka.com", state: "operational", label: "Operational" },
+        { id: "orochia", name: "Orochia", state: "operational", label: "Operational" },
+        { id: "cdn", name: "Video delivery", state: "degraded", label: "Slower than usual" }
+      ]
+    }
+  );
+}
+export {
+  StatusPageOperational as default
+};

package/registry/examples/status-page/operational.tsx

@@ -0,0 +1,20 @@
+import { StatusPage } from "@krizaka/ui/status-page";
+
+// TEMPLATE — a status page: the overall state in words and colour, each service on its line.
+export default function StatusPageOperational() {
+  return (
+    <StatusPage
+      eyebrow="Status"
+      title="How things are running"
+      state="operational"
+      stateLabel="All systems operational"
+      checked="Checked 2 min ago"
+      servicesLabel="Services"
+      services={[
+        { id: "web", name: "krizaka.com", state: "operational", label: "Operational" },
+        { id: "orochia", name: "Orochia", state: "operational", label: "Operational" },
+        { id: "cdn", name: "Video delivery", state: "degraded", label: "Slower than usual" },
+      ]}
+    />
+  );
+}

package/registry/examples/virtual/feed.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/virtual/feed.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/virtual/feed.tsx
+import { VirtualList } from "@krizaka/ui/virtual";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var page = (from) => Array.from({ length: 20 }, (_, i) => ({ id: `p${from + i}`, text: `Post ${from + i + 1}` }));
+function VirtualFeed() {
+  const [posts, setPosts] = useState(() => page(0));
+  return /* @__PURE__ */ jsx(
+    VirtualList,
+    {
+      items: posts,
+      getKey: (p) => p.id,
+      estimateSize: 72,
+      gap: 8,
+      scroll: "window",
+      label: "Feed",
+      onEndReached: () => setPosts((all) => [...all, ...page(all.length)]),
+      renderItem: (p) => /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-border-default bg-surface-1 p-4 text-sm text-fg", children: p.text })
+    }
+  );
+}
+export {
+  VirtualFeed as default
+};

package/registry/examples/virtual/feed.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { VirtualList } from "@krizaka/ui/virtual";
+import { useState } from "react";
+
+type Post = { id: string; text: string };
+const page = (from: number): Post[] => Array.from({ length: 20 }, (_, i) => ({ id: `p${from + i}`, text: `Post ${from + i + 1}` }));
+
+// A feed that scrolls the page itself (`scroll="window"`): 20 more posts each time the end comes near.
+export default function VirtualFeed() {
+  const [posts, setPosts] = useState(() => page(0));
+  return (
+    <VirtualList
+      items={posts}
+      getKey={(p) => p.id}
+      estimateSize={72}
+      gap={8}
+      scroll="window"
+      label="Feed"
+      onEndReached={() => setPosts((all) => [...all, ...page(all.length)])}
+      renderItem={(p) => <div className="rounded-xl border border-border-default bg-surface-1 p-4 text-sm text-fg">{p.text}</div>}
+    />
+  );
+}

package/registry/examples/virtual/gallery.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/virtual/gallery.js

@@ -0,0 +1,31 @@
+"use client";
+
+// registry/examples/virtual/gallery.tsx
+import { VirtualGrid } from "@krizaka/ui/virtual";
+import { jsx, jsxs } from "react/jsx-runtime";
+var clips = Array.from({ length: 5e4 }, (_, i) => ({ id: `c${i}`, title: `Clip ${i + 1}`, minutes: 1 + i % 12 }));
+function VirtualGallery() {
+  return /* @__PURE__ */ jsx(
+    VirtualGrid,
+    {
+      items: clips,
+      getKey: (c) => c.id,
+      estimateRowHeight: 148,
+      minItemWidth: 160,
+      gap: 12,
+      height: 420,
+      label: "Clips",
+      renderItem: (c) => /* @__PURE__ */ jsxs("article", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "aspect-video rounded-lg bg-surface-3", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold text-fg", children: c.title }),
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-fg-secondary", children: [
+          c.minutes,
+          " min"
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  VirtualGallery as default
+};

package/registry/examples/virtual/gallery.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { VirtualGrid } from "@krizaka/ui/virtual";
+
+type Clip = { id: string; title: string; minutes: number };
+const clips: Clip[] = Array.from({ length: 50_000 }, (_, i) => ({ id: `c${i}`, title: `Clip ${i + 1}`, minutes: 1 + (i % 12) }));
+
+// A gallery of 50,000 clips: as many columns as the width allows, only the rows in view rendered.
+export default function VirtualGallery() {
+  return (
+    <VirtualGrid
+      items={clips}
+      getKey={(c) => c.id}
+      estimateRowHeight={148}
+      minItemWidth={160}
+      gap={12}
+      height={420}
+      label="Clips"
+      renderItem={(c) => (
+        <article className="flex flex-col gap-2">
+          <div className="aspect-video rounded-lg bg-surface-3" aria-hidden />
+          <p className="truncate text-sm font-semibold text-fg">{c.title}</p>
+          <p className="text-xs text-fg-secondary">{c.minutes} min</p>
+        </article>
+      )}
+    />
+  );
+}

package/registry/examples/virtual/messages.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/virtual/messages.js

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/virtual/messages.tsx
+import { VirtualList } from "@krizaka/ui/virtual";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LINES = ["On my way.", "Can you send the cut from yesterday? The second take, with the sunset over the river and the drone shot at the end.", "Done!", "Thanks \u2014 looks great, posting it tonight at eight. I'll tag you."];
+var messages = Array.from({ length: 5e4 }, (_, i) => ({ id: `m${i}`, author: i % 2 ? "Elena" : "Noah", text: LINES[i % LINES.length] }));
+function VirtualMessages() {
+  return /* @__PURE__ */ jsx(
+    VirtualList,
+    {
+      items: messages,
+      getKey: (m) => m.id,
+      estimateSize: 64,
+      gap: 8,
+      height: 360,
+      label: "Messages",
+      className: "border border-border-default bg-surface-1 p-3",
+      renderItem: (m) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-surface-2 px-3 py-2 text-sm text-fg", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-fg-secondary", children: m.author }),
+        /* @__PURE__ */ jsx("p", { children: m.text })
+      ] })
+    }
+  );
+}
+export {
+  VirtualMessages as default
+};

package/registry/examples/virtual/messages.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { VirtualList } from "@krizaka/ui/virtual";
+
+type Message = { id: string; author: string; text: string };
+const LINES = ["On my way.", "Can you send the cut from yesterday? The second take, with the sunset over the river and the drone shot at the end.", "Done!", "Thanks — looks great, posting it tonight at eight. I'll tag you."];
+const messages: Message[] = Array.from({ length: 50_000 }, (_, i) => ({ id: `m${i}`, author: i % 2 ? "Elena" : "Noah", text: LINES[i % LINES.length]! }));
+
+// 50,000 messages of different heights: each one measured, ~15 in the page, the scrollbar right from the start.
+export default function VirtualMessages() {
+  return (
+    <VirtualList
+      items={messages}
+      getKey={(m) => m.id}
+      estimateSize={64}
+      gap={8}
+      height={360}
+      label="Messages"
+      className="border border-border-default bg-surface-1 p-3"
+      renderItem={(m) => (
+        <div className="rounded-lg bg-surface-2 px-3 py-2 text-sm text-fg">
+          <p className="text-xs font-semibold text-fg-secondary">{m.author}</p>
+          <p>{m.text}</p>
+        </div>
+      )}
+    />
+  );
+}

package/registry/field.json

@@ -147,7 +147,7 @@
     },
     {
       "path": "meta.ts",
-      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landscape\"\n  | \"link-card\"\n  | \"loader\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its templates.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
     }
   ],
   "dependencies": [