@krizaka/ui 2.5.0 → 2.6.0

package/registry/examples/link-card/docs-hub.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/link-card/docs-hub.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { jsx } from "react/jsx-runtime";
+var shortcuts = [
+  { id: "cli", logo: "orazaka", title: "The CLI", text: "npx orazaka install, start, dev \u2014 then every command and option." },
+  { id: "packs", logo: "orazaka", title: "Packs & Studios", text: "The business offers Orazaka installs without code." },
+  { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts \u2014 behind four gates." }
+];
+function LinkCardDocsHub() {
+  return /* @__PURE__ */ jsx(CardGrid, { className: "w-full max-w-4xl", min: 260, reveal: false, children: shortcuts.map((s) => /* @__PURE__ */ jsx(LinkCard, { href: `#${s.id}`, icon: /* @__PURE__ */ jsx(ProductLogo, { id: s.logo, size: 24, animated: false }), title: s.title, description: s.text, cta: "Open" }, s.id)) });
+}
+export {
+  LinkCardDocsHub as default
+};

package/registry/examples/link-card/docs-hub.tsx

@@ -0,0 +1,20 @@
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+
+const shortcuts = [
+  { id: "cli", logo: "orazaka", title: "The CLI", text: "npx orazaka install, start, dev — then every command and option." },
+  { id: "packs", logo: "orazaka", title: "Packs & Studios", text: "The business offers Orazaka installs without code." },
+  { id: "admin", logo: "orochia", title: "Orochia admin console", text: "Verification, moderation, payouts — behind four gates." },
+] as const;
+
+// The entry points of a documentation hub: compact cards, the whole card one link. The pointer lights the card it is on.
+export default function LinkCardDocsHub() {
+  return (
+    <CardGrid className="w-full max-w-4xl" min={260} reveal={false}>
+      {shortcuts.map((s) => (
+        <LinkCard key={s.id} href={`#${s.id}`} icon={<ProductLogo id={s.logo} size={24} animated={false} />} title={s.title} description={s.text} cta="Open" />
+      ))}
+    </CardGrid>
+  );
+}

package/registry/examples/link-card/external.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/link-card/external.js

@@ -0,0 +1,22 @@
+"use client";
+
+// registry/examples/link-card/external.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { jsx } from "react/jsx-runtime";
+function LinkCardExternal() {
+  return /* @__PURE__ */ jsx(
+    LinkCard,
+    {
+      className: "max-w-sm",
+      href: "https://github.com/krizaka/krizaka-ui",
+      icon: /* @__PURE__ */ jsx(ProductLogo, { id: "krizaka", size: 24, animated: false }),
+      title: "krizaka-ui on GitHub",
+      description: "The sources, the issues, the discussions.",
+      cta: "Open the repository"
+    }
+  );
+}
+export {
+  LinkCardExternal as default
+};

package/registry/examples/link-card/external.tsx

@@ -0,0 +1,16 @@
+import { ProductLogo } from "@krizaka/ui";
+import { LinkCard } from "@krizaka/ui/link-card";
+
+// An absolute address opens in a new tab and wears the external mark instead of the arrow.
+export default function LinkCardExternal() {
+  return (
+    <LinkCard
+      className="max-w-sm"
+      href="https://github.com/krizaka/krizaka-ui"
+      icon={<ProductLogo id="krizaka" size={24} animated={false} />}
+      title="krizaka-ui on GitHub"
+      description="The sources, the issues, the discussions."
+      cta="Open the repository"
+    />
+  );
+}

package/registry/examples/link-card/stack.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/link-card/stack.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/link-card/stack.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { Facts } from "@krizaka/ui/page";
+import { jsx } from "react/jsx-runtime";
+function LinkCardStack() {
+  return /* @__PURE__ */ jsx(
+    LinkCard,
+    {
+      className: "max-w-sm",
+      layout: "stack",
+      href: "#orazaka",
+      icon: /* @__PURE__ */ jsx(ProductLogo, { id: "orazaka", size: 26, animated: false }),
+      meta: "Product",
+      title: "Orazaka",
+      description: "The sovereign AI engine: chat, image, video and voice on your own servers.",
+      extra: /* @__PURE__ */ jsx(Facts, { items: [{ label: "Self-hosted", tone: "ok" }, { label: "Apache-2.0" }] }),
+      cta: "Overview"
+    }
+  );
+}
+export {
+  LinkCardStack as default
+};

package/registry/examples/link-card/stack.tsx

@@ -0,0 +1,21 @@
+import { ProductLogo } from "@krizaka/ui";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { Facts } from "@krizaka/ui/page";
+
+// `layout="stack"`: the icon above the text, for a few large entry points (the products). `meta` names the category,
+// `extra` carries facts — never another link: the card is one.
+export default function LinkCardStack() {
+  return (
+    <LinkCard
+      className="max-w-sm"
+      layout="stack"
+      href="#orazaka"
+      icon={<ProductLogo id="orazaka" size={26} animated={false} />}
+      meta="Product"
+      title="Orazaka"
+      description="The sovereign AI engine: chat, image, video and voice on your own servers."
+      extra={<Facts items={[{ label: "Self-hosted", tone: "ok" }, { label: "Apache-2.0" }]} />}
+      cta="Overview"
+    />
+  );
+}

package/registry/examples/mascot-quote/callout.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/mascot-quote/callout.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/mascot-quote/callout.tsx
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+import { jsx } from "react/jsx-runtime";
+function MascotQuoteCallout() {
+  return /* @__PURE__ */ jsx(MascotQuote, { className: "max-w-2xl", variant: "callout", bird: "owl", mood: "welcome", label: "The owl's promise", children: "Every personal record stays in Qu\xE9bec, and you can read who touched it \u2014 Law 25, by design." });
+}
+export {
+  MascotQuoteCallout as default
+};

package/registry/examples/mascot-quote/callout.tsx

@@ -0,0 +1,10 @@
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+
+// `callout`: a promise alone in a section — larger, the bird alive (its loop pauses off screen and under reduced motion).
+export default function MascotQuoteCallout() {
+  return (
+    <MascotQuote className="max-w-2xl" variant="callout" bird="owl" mood="welcome" label="The owl's promise">
+      Every personal record stays in Québec, and you can read who touched it — Law 25, by design.
+    </MascotQuote>
+  );
+}

package/registry/examples/mascot-quote/inline.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/mascot-quote/inline.js

@@ -0,0 +1,11 @@
+"use client";
+
+// registry/examples/mascot-quote/inline.tsx
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+import { jsx } from "react/jsx-runtime";
+function MascotQuoteInline() {
+  return /* @__PURE__ */ jsx(MascotQuote, { className: "max-w-sm", bird: "falcon", label: "The falcon's rule", children: "Nothing crosses the walls: no prompt, no file, no metric." });
+}
+export {
+  MascotQuoteInline as default
+};

package/registry/examples/mascot-quote/inline.tsx

@@ -0,0 +1,10 @@
+import { MascotQuote } from "@krizaka/ui/mascot-quote";
+
+// `inline`: a rule inside a card or beside a paragraph — small, the bird still (it hops once under the pointer).
+export default function MascotQuoteInline() {
+  return (
+    <MascotQuote className="max-w-sm" bird="falcon" label="The falcon's rule">
+      Nothing crosses the walls: no prompt, no file, no metric.
+    </MascotQuote>
+  );
+}

package/registry/examples/page/backdrop.d.ts

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

package/registry/examples/page/backdrop.js

@@ -0,0 +1,23 @@
+"use client";
+
+// registry/examples/page/backdrop.tsx
+import { Button } from "@krizaka/ui/button";
+import { Section } from "@krizaka/ui/page";
+import { jsx } from "react/jsx-runtime";
+function PageBackdrop() {
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      id: "get-started",
+      className: "w-full",
+      backdrop: { direction: "up" },
+      eyebrow: "Get started",
+      title: "Install it in four lines",
+      lead: "Tokens, the Tailwind preset and the primitives \u2014 one version for the three.",
+      actions: /* @__PURE__ */ jsx(Button, { variant: "primary", children: "Read the guide" })
+    }
+  );
+}
+export {
+  PageBackdrop as default
+};

package/registry/examples/page/backdrop.tsx

@@ -0,0 +1,18 @@
+import { Button } from "@krizaka/ui/button";
+import { Section } from "@krizaka/ui/page";
+
+// `backdrop`: the brand's colour transition behind a section (SectionBackdrop) — a closing call, the page's main moment.
+// `actions` sit on the right of the heading (under it on a phone).
+export default function PageBackdrop() {
+  return (
+    <Section
+      id="get-started"
+      className="w-full"
+      backdrop={{ direction: "up" }}
+      eyebrow="Get started"
+      title="Install it in four lines"
+      lead="Tokens, the Tailwind preset and the primitives — one version for the three."
+      actions={<Button variant="primary">Read the guide</Button>}
+    />
+  );
+}

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

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/page/facts.tsx
+import { Facts, Ticks } from "@krizaka/ui/page";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageFacts() {
+  return /* @__PURE__ */ jsxs("div", { className: "grid max-w-xl gap-4", children: [
+    /* @__PURE__ */ jsx(
+      Facts,
+      {
+        "aria-label": "Status",
+        items: [
+          { label: "Maven Central 0.1.0", tone: "ok", href: "https://central.sonatype.com/namespace/com.krizaka" },
+          { label: "Apache-2.0" },
+          { label: "Gradle plugin \u2014 in progress", tone: "wip" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: /* @__PURE__ */ jsx(Ticks, { children: "Every request carries a `requestId`; a failed message lands in `.dlq`, never lost." }) })
+  ] });
+}
+export {
+  PageFacts as default
+};

package/registry/examples/page/facts.tsx

@@ -0,0 +1,21 @@
+import { Facts, Ticks } from "@krizaka/ui/page";
+
+// `Facts`: a few mono words that say a state (published, in progress — said honestly). `Ticks`: a sentence from a
+// message catalogue where words between backticks read as code.
+export default function PageFacts() {
+  return (
+    <div className="grid max-w-xl gap-4">
+      <Facts
+        aria-label="Status"
+        items={[
+          { label: "Maven Central 0.1.0", tone: "ok", href: "https://central.sonatype.com/namespace/com.krizaka" },
+          { label: "Apache-2.0" },
+          { label: "Gradle plugin — in progress", tone: "wip" },
+        ]}
+      />
+      <p className="text-sm text-fg-secondary">
+        <Ticks>{"Every request carries a `requestId`; a failed message lands in `.dlq`, never lost."}</Ticks>
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,15 @@
+"use client";
+
+// registry/examples/page/frame.tsx
+import { Page } from "@krizaka/ui/page";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageFrame() {
+  return /* @__PURE__ */ jsx("div", { className: "grid w-full gap-3", children: ["narrow", "default", "wide"].map((size) => /* @__PURE__ */ jsx(Page, { size, children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-dashed border-border-strong bg-surface-1 px-4 py-3 font-mono text-xs text-fg-secondary", children: [
+    'size="',
+    size,
+    '"'
+  ] }) }, size)) });
+}
+export {
+  PageFrame as default
+};

package/registry/examples/page/frame.tsx

@@ -0,0 +1,17 @@
+import { Page } from "@krizaka/ui/page";
+
+// `Page` alone: the frame of a custom layout — centred, at most `--kz-page-max` wide, the gutters of the site.
+// `narrow` for a reading column, `wide` for documentation with a sidebar.
+export default function PageFrame() {
+  return (
+    <div className="grid w-full gap-3">
+      {(["narrow", "default", "wide"] as const).map((size) => (
+        <Page key={size} size={size}>
+          <div className="rounded-lg border border-dashed border-border-strong bg-surface-1 px-4 py-3 font-mono text-xs text-fg-secondary">
+            size=&quot;{size}&quot;
+          </div>
+        </Page>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,14 @@
+"use client";
+
+// registry/examples/page/sections.tsx
+import { Section } from "@krizaka/ui/page";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PageSections() {
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsx(Section, { id: "why", eyebrow: "Why", title: "Nothing leaves your servers", lead: "Inference runs on your hardware; nothing calls home.", spacing: "sm", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "Local models by default, one governed pipeline, zero telemetry." }) }),
+    /* @__PURE__ */ jsx(Section, { id: "how", eyebrow: "How", title: "One pipeline, every request", spacing: "sm", divider: true, children: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "Every request crosses the same interceptors, in the same order." }) })
+  ] });
+}
+export {
+  PageSections as default
+};

package/registry/examples/page/sections.tsx

@@ -0,0 +1,15 @@
+import { Section } from "@krizaka/ui/page";
+
+// Sections on one rhythm, in one frame: the same edges at every width. The hairline (`divider`) is the transition.
+export default function PageSections() {
+  return (
+    <div className="w-full">
+      <Section id="why" eyebrow="Why" title="Nothing leaves your servers" lead="Inference runs on your hardware; nothing calls home." spacing="sm">
+        <p className="text-sm text-fg-secondary">Local models by default, one governed pipeline, zero telemetry.</p>
+      </Section>
+      <Section id="how" eyebrow="How" title="One pipeline, every request" spacing="sm" divider>
+        <p className="text-sm text-fg-secondary">Every request crosses the same interceptors, in the same order.</p>
+      </Section>
+    </div>
+  );
+}

package/registry/examples/page-hero/building-block.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/page-hero/building-block.js

@@ -0,0 +1,24 @@
+"use client";
+
+// registry/examples/page-hero/building-block.tsx
+import { Mascot } from "@krizaka/ui/mascots";
+import { Facts } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx } from "react/jsx-runtime";
+function PageHeroBuildingBlock() {
+  return /* @__PURE__ */ jsx(
+    PageHero,
+    {
+      className: "w-full",
+      back: { href: "#open-source", label: "Open source" },
+      eyebrow: "Building block \xB7 Java",
+      title: "Krizaka Java",
+      lead: "The Spring Boot foundation every Krizaka service starts from: one parent, one BOM, starters that agree.",
+      aside: /* @__PURE__ */ jsx(Mascot, { bird: "duck", mood: "welcome", size: 112 }),
+      children: /* @__PURE__ */ jsx(Facts, { items: [{ label: "Maven Central 0.1.0", tone: "ok" }, { label: "Java 21" }, { label: "Apache-2.0" }] })
+    }
+  );
+}
+export {
+  PageHeroBuildingBlock as default
+};

package/registry/examples/page-hero/building-block.tsx

@@ -0,0 +1,20 @@
+import { Mascot } from "@krizaka/ui/mascots";
+import { Facts } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+
+// The first screen of a sub-page: the way back, where the reader is, the title, what the page gives — the facts under
+// it and the page's bird beside it. Painted at once: never revealed.
+export default function PageHeroBuildingBlock() {
+  return (
+    <PageHero
+      className="w-full"
+      back={{ href: "#open-source", label: "Open source" }}
+      eyebrow="Building block · Java"
+      title="Krizaka Java"
+      lead="The Spring Boot foundation every Krizaka service starts from: one parent, one BOM, starters that agree."
+      aside={<Mascot bird="duck" mood="welcome" size={112} />}
+    >
+      <Facts items={[{ label: "Maven Central 0.1.0", tone: "ok" }, { label: "Java 21" }, { label: "Apache-2.0" }]} />
+    </PageHero>
+  );
+}

package/registry/examples/page-hero/hub.d.ts

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

package/registry/examples/page-hero/hub.js

@@ -0,0 +1,21 @@
+"use client";
+
+// registry/examples/page-hero/hub.tsx
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx } from "react/jsx-runtime";
+function PageHeroHub() {
+  return /* @__PURE__ */ jsx(
+    PageHero,
+    {
+      className: "w-full",
+      align: "center",
+      backdrop: "plain",
+      eyebrow: "Documentation",
+      title: "Build with Krizaka",
+      lead: "The building blocks the products are made of, documented from their source."
+    }
+  );
+}
+export {
+  PageHeroHub as default
+};

package/registry/examples/page-hero/hub.tsx

@@ -0,0 +1,15 @@
+import { PageHero } from "@krizaka/ui/page-hero";
+
+// A hub opens on its title alone, centred, on the brand's plain gradient.
+export default function PageHeroHub() {
+  return (
+    <PageHero
+      className="w-full"
+      align="center"
+      backdrop="plain"
+      eyebrow="Documentation"
+      title="Build with Krizaka"
+      lead="The building blocks the products are made of, documented from their source."
+    />
+  );
+}

package/registry/examples/pointer-light/list.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/pointer-light/list.js

@@ -0,0 +1,16 @@
+"use client";
+
+// registry/examples/pointer-light/list.tsx
+import { LinkCard } from "@krizaka/ui/link-card";
+import { PointerLight } from "@krizaka/ui/pointer-light";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PointerLightList() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-3xl flex-wrap gap-3", children: [
+    /* @__PURE__ */ jsx(LinkCard, { className: "flex-1 basis-56", href: "#tokens", title: "Tokens", description: "Every colour, radius and shadow." }),
+    /* @__PURE__ */ jsx(LinkCard, { className: "flex-1 basis-56", href: "#preset", title: "Tailwind preset", description: "The tokens as utilities." }),
+    /* @__PURE__ */ jsx(PointerLight, {})
+  ] });
+}
+export {
+  PointerLightList as default
+};

package/registry/examples/pointer-light/list.tsx

@@ -0,0 +1,14 @@
+import { LinkCard } from "@krizaka/ui/link-card";
+import { PointerLight } from "@krizaka/ui/pointer-light";
+
+// Any group of cards that is not a CardGrid (a flex row, a list): drop `PointerLight` inside it — it listens on its
+// parent and lights the card the pointer is over (`[data-kz-light]`). Nothing on touch screens or under reduced motion.
+export default function PointerLightList() {
+  return (
+    <div className="flex w-full max-w-3xl flex-wrap gap-3">
+      <LinkCard className="flex-1 basis-56" href="#tokens" title="Tokens" description="Every colour, radius and shadow." />
+      <LinkCard className="flex-1 basis-56" href="#preset" title="Tailwind preset" description="The tokens as utilities." />
+      <PointerLight />
+    </div>
+  );
+}

package/registry/examples/terminal-replay/at-rest.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/terminal-replay/at-rest.js

@@ -0,0 +1,32 @@
+"use client";
+
+// registry/examples/terminal-replay/at-rest.tsx
+import { TerminalReplay } from "@krizaka/ui/terminal-replay";
+import { jsx } from "react/jsx-runtime";
+function TerminalReplayAtRest() {
+  return /* @__PURE__ */ jsx(
+    TerminalReplay,
+    {
+      autoPlay: false,
+      label: "Terminal session: check the tools",
+      title: "~/projects \u2014 zsh",
+      playLabel: "Play",
+      pauseLabel: "Pause",
+      replayLabel: "Replay",
+      rows: 7,
+      steps: [
+        {
+          command: "node --version && git --version",
+          output: ["v22.12.0", "git version 2.47.1"]
+        },
+        {
+          command: "docker compose version",
+          output: [{ text: "Docker Compose version v2.31.0", tone: "success" }]
+        }
+      ]
+    }
+  );
+}
+export {
+  TerminalReplayAtRest as default
+};

package/registry/examples/terminal-replay/at-rest.tsx

@@ -0,0 +1,26 @@
+import { TerminalReplay } from "@krizaka/ui/terminal-replay";
+
+// At rest: the whole session is there to read; it plays only when the reader presses play.
+export default function TerminalReplayAtRest() {
+  return (
+    <TerminalReplay
+      autoPlay={false}
+      label="Terminal session: check the tools"
+      title="~/projects — zsh"
+      playLabel="Play"
+      pauseLabel="Pause"
+      replayLabel="Replay"
+      rows={7}
+      steps={[
+        {
+          command: "node --version && git --version",
+          output: ["v22.12.0", "git version 2.47.1"],
+        },
+        {
+          command: "docker compose version",
+          output: [{ text: "Docker Compose version v2.31.0", tone: "success" }],
+        },
+      ]}
+    />
+  );
+}

package/registry/examples/terminal-replay/session.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/terminal-replay/session.js

@@ -0,0 +1,34 @@
+"use client";
+
+// registry/examples/terminal-replay/session.tsx
+import { TerminalReplay } from "@krizaka/ui/terminal-replay";
+import { jsx } from "react/jsx-runtime";
+function TerminalReplaySession() {
+  return /* @__PURE__ */ jsx(
+    TerminalReplay,
+    {
+      label: "Terminal session: create, install, start",
+      title: "~/projects \u2014 zsh",
+      playLabel: "Play",
+      pauseLabel: "Pause",
+      replayLabel: "Replay",
+      copyLabel: "Copy commands",
+      copiedLabel: "Copied",
+      rows: 12,
+      steps: [
+        { command: "mkdir shop && cd shop", output: [] },
+        {
+          command: "npm install @krizaka/ui",
+          output: [{ text: "added 12 packages in 2s", tone: "success" }, { text: "found 0 vulnerabilities", tone: "muted" }]
+        },
+        {
+          command: "npm run dev",
+          output: [{ text: "\u25B2 Next.js 16", tone: "accent" }, "- Local: http://localhost:3000", { text: "\u2713 Ready in 1.4s", tone: "success" }]
+        }
+      ]
+    }
+  );
+}
+export {
+  TerminalReplaySession as default
+};