@krizaka/ui 2.9.0 → 2.10.0

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/mascots/crane.d.ts

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

package/registry/examples/mascots/crane.js

@@ -0,0 +1,19 @@
+"use client";
+
+// registry/examples/mascots/crane.tsx
+import { Button } from "@krizaka/ui/button";
+import { Mascot } from "@krizaka/ui/mascots";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MascotCrane() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-96 items-center gap-4 rounded-xl border border-border-default bg-surface-1 p-4", children: [
+    /* @__PURE__ */ jsx(Mascot, { bird: "crane", mood: "welcome", size: 88 }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-fg", children: "Take your time" }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-fg-secondary", children: "Say it in your own words. One question at a time." }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", className: "mt-3", children: "Begin" })
+    ] })
+  ] });
+}
+export {
+  MascotCrane as default
+};

package/registry/examples/mascots/crane.tsx

@@ -0,0 +1,18 @@
+import { Button } from "@krizaka/ui/button";
+import { Mascot } from "@krizaka/ui/mascots";
+
+// The crane listens: posed and unhurried — a calm opening, the words and one action beside it.
+export default function MascotCrane() {
+  return (
+    <div className="flex w-96 items-center gap-4 rounded-xl border border-border-default bg-surface-1 p-4">
+      <Mascot bird="crane" mood="welcome" size={88} />
+      <div className="flex-1">
+        <p className="text-sm font-medium text-fg">Take your time</p>
+        <p className="mt-1 text-sm text-fg-secondary">Say it in your own words. One question at a time.</p>
+        <Button variant="primary" size="sm" className="mt-3">
+          Begin
+        </Button>
+      </div>
+    </div>
+  );
+}

package/registry/examples/mascots/flock.tsx

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

package/registry/examples/mascots/native/crane.d.ts

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

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

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

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

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

package/registry/examples/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/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  | \"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\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": [

package/registry/file-upload.json

@@ -279,7 +279,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  | \"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\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": [