@krizaka/sovkora-design-system 0.0.0-stage → 4.0.0

package/registry/video-result.json

@@ -0,0 +1,167 @@
+{
+  "name": "video-result",
+  "type": "composite",
+  "title": "Video result",
+  "summary": "What a video run of a Studio leaves: the clip in its player (a muted loop in view, badge, controls, opens larger), the exact prompt, what the run recorded, the command that makes it again, and a download.",
+  "description": "What a video run of a Studio leaves: the clip in its player (a muted loop in view, badge, controls, opens larger), the exact prompt, what the run recorded, the command that makes it again, and a download.",
+  "why": "Sovkora's promise is that a result is proven, not claimed: a generated clip comes with its prompt, its model, its seed, its frame, its length, its time, its cost and the id of the run that made it, and says how to make it again. @krizaka/ui has the player and the code block; this composite is the product's way of showing a run's result once, the same on every screen.",
+  "status": "beta",
+  "deprecated": null,
+  "category": "data-display",
+  "platforms": "web",
+  "builtOn": [
+    "ui/code-block",
+    "ui/button"
+  ],
+  "whenToUse": [
+    "On the page of a finished run of a video Studio, in the console and in the gallery of a site.",
+    "Anywhere a generated clip must come with what proves where it came from."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For a short looping accent with no words: a muted `<video>` that plays in view is enough."
+    },
+    {
+      "when": "For a clip the visitor must control in depth (subtitles, speed, chapters).",
+      "use": "ui/video-player"
+    }
+  ],
+  "bestPractices": [
+    "Say the real source in the facts (`Made by DigitalOcean serverless inference · run by Sovkora`), never a flattering one.",
+    "Give the frame the clip was really made in (`orientation`), never crop a landscape clip into a portrait one.",
+    "Every word is a prop (`labels`, `facts`): the app translates them; the prompt stays as the model received it."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Enter / Space",
+        "action": "Activates the focused button: open larger, play or pause, sound."
+      },
+      {
+        "keys": "Tab",
+        "action": "Moves through the player controls, the copy button and the download link."
+      }
+    ],
+    "notes": [
+      "The video is named (`title`); it is a muted loop that plays only in view, never under reduced motion (poster and a play button).",
+      "The facts are a description list; the command is a code block with a polite copy confirmation.",
+      "The prompt is marked `lang=\"en\"`: it is what the model received, whatever the page's language."
+    ]
+  },
+  "related": [
+    "clip-player",
+    "run-facts",
+    "ui/video-player",
+    "ui/code-block"
+  ],
+  "web": {
+    "entry": "@krizaka/sovkora-design-system",
+    "import": "import { VideoResult } from \"@krizaka/sovkora-design-system\";",
+    "props": [
+      {
+        "component": "VideoResult",
+        "description": "The result of a video run: the player (a muted loop in view, badge, controls, opens larger), the prompt, the facts,\n\"Reproduce it\" and the download.",
+        "props": [
+          {
+            "name": "facts",
+            "type": "readonly RunFact[]",
+            "default": null,
+            "description": "What the run recorded, in reading order (model, seed, frame, length, time, cost, run id).",
+            "required": true
+          },
+          {
+            "name": "labels",
+            "type": "VideoResultLabels",
+            "default": null,
+            "description": "The words.",
+            "required": true
+          },
+          {
+            "name": "prompt",
+            "type": "string",
+            "default": null,
+            "description": "The exact prompt that reached the model.",
+            "required": true
+          },
+          {
+            "name": "sources",
+            "type": "ClipSources",
+            "default": null,
+            "description": "The files: H.264 `mp4` (always), `webm` when there is one, and the poster.",
+            "required": true
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "The accessible name of the video: what it shows, in a sentence.",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Extra classes on the root, merged last.",
+            "required": false
+          },
+          {
+            "name": "downloadHref",
+            "type": "string",
+            "default": null,
+            "description": "Where the file can be downloaded; without it there is no download button.",
+            "required": false
+          },
+          {
+            "name": "orientation",
+            "type": "\"landscape\" | \"portrait\"",
+            "default": "landscape",
+            "description": "The frame the clip was made in; a portrait one is drawn as tall as a phone allows, a landscape one 16:9.",
+            "required": false
+          },
+          {
+            "name": "promptNode",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Replaces the plain prompt (the app may type it in, over its final size): the heading stays.",
+            "required": false
+          },
+          {
+            "name": "reproduce",
+            "type": "string",
+            "default": null,
+            "description": "The CLI command that makes the clip again; without it there is no \"Reproduce it\".",
+            "required": false
+          },
+          {
+            "name": "reproduceLead",
+            "type": "string",
+            "default": null,
+            "description": "One sentence above the command.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "tea-pour",
+        "title": "A landscape clip with its run",
+        "description": "Eric's tea-pour shot: the poster, the prompt, the facts of the run, the command and the download.",
+        "path": "examples/video-result/tea-pour.tsx",
+        "module": "@krizaka/sovkora-design-system/registry/examples/video-result/tea-pour",
+        "code": "import { VideoResult } from \"@krizaka/sovkora-design-system\";\n// Eric's tea-pour shot: the clip, its prompt, what the run recorded, how to make it again.\nexport default function TeaPour() {\n  return (\n    <VideoResult\n      title=\"Mint tea pouring into an engraved glass in a Berber tent, steam in a shaft of golden light\"\n      sources={{\n        mp4: \"https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/tea-pour.c4138c8ce9.mp4\",\n        webm: \"https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/tea-pour.b33e468733.webm\",\n        poster: \"https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/tea-pour-poster.8a062e63c2.webp\",\n      }}\n      prompt=\"Extreme close-up, slow motion: a stream of amber mint tea pours from a silver teapot into a small engraved glass, steam curling through a shaft of golden-hour light inside a Berber tent.\"\n      facts={[\n        { label: \"Model\", value: \"Wan 2.2 A14B\" },\n        { label: \"Run by\", value: \"Sovkora · run 25948442\" },\n        { label: \"Seed\", value: \"20261011\" },\n        { label: \"Frame\", value: \"832×480 · 16 fps · 5 s\" },\n      ]}\n      reproduce={\n        'orazaka video \"Extreme close-up, slow motion: a stream of amber mint tea pours…\" \\\\\\n  --model wan2-2-t2v-a14b --aspect 16:9 --seed 20261011'\n      }\n      downloadHref=\"https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/tea-pour.c4138c8ce9.mp4\"\n      labels={{\n        badge: \"Video · 5 s\",\n        play: \"Play\",\n        pause: \"Pause\",\n        mute: \"Mute\",\n        unmute: \"Sound on\",\n        enlarge: \"Open larger\",\n        close: \"Close\",\n        prompt: \"Prompt\",\n        facts: \"The run\",\n        reproduce: \"Reproduce it\",\n        copy: \"Copy command\",\n        copied: \"Command copied\",\n        download: \"Download the clip\",\n      }}\n    />\n  );\n}\n"
+      },
+      {
+        "name": "assistant",
+        "title": "A clip without its command",
+        "description": "The player, the prompt and the facts of the run; no command, no download.",
+        "path": "examples/video-result/assistant.tsx",
+        "module": "@krizaka/sovkora-design-system/registry/examples/video-result/assistant",
+        "code": "import { VideoResult } from \"@krizaka/sovkora-design-system\";\n\n// A clip without its command: the player, the prompt and the facts of the run, nothing else to copy.\nexport default function Assistant() {\n  return (\n    <VideoResult\n      title=\"A night workshop where a holographic interface of orange light unfolds blueprints\"\n      sources={{\n        mp4: \"https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/assistant.8b571af009.mp4\",\n        webm: \"https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/assistant.7311e0410e.webm\",\n        poster: \"https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/assistant-poster.fc37abd8c7.webp\",\n      }}\n      prompt=\"A genius engineer's workshop at night, a floating holographic interface of orange light blooms in mid-air and organises blueprints of a machine.\"\n      facts={[\n        { label: \"Model\", value: \"Wan 2.2 A14B\" },\n        { label: \"Seed\", value: \"20261011\" },\n        { label: \"Frame\", value: \"832×480 · 16 fps · 5 s\" },\n      ]}\n      labels={{\n        badge: \"Video · 5 s\",\n        play: \"Play\",\n        pause: \"Pause\",\n        mute: \"Mute\",\n        unmute: \"Sound on\",\n        enlarge: \"Open larger\",\n        close: \"Close\",\n        prompt: \"Prompt\",\n        facts: \"The run\",\n        reproduce: \"Reproduce it\",\n        copy: \"Copy command\",\n        copied: \"Command copied\",\n        download: \"Download the clip\",\n      }}\n    />\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "dependencies": [],
+  "registryDependencies": []
+}

package/src/components/Badge.tsx

@@ -0,0 +1,36 @@
+import {
+  Badge as KzBadge,
+  type BadgeProps as KzBadgeProps,
+  type BadgeVariants,
+  badgeVariants,
+} from "@krizaka/ui/badge";
+
+export { type BadgeVariants,badgeVariants };
+
+/** The 1.x badge variants. @deprecated Since 2.0 — use `tone`. */
+export type BadgeVariant = "default" | "success" | "warning" | "danger" | "accent";
+
+/** Props of {@link Badge}: the @krizaka/ui badge, plus the 1.x `variant`. */
+export type BadgeProps = KzBadgeProps & {
+  /** @deprecated Since 2.0 — use `tone` (`default` → `neutral`, the other names are the same). */
+  variant?: BadgeVariant;
+};
+
+const TONE_OF_VARIANT = {
+  default: "neutral",
+  success: "success",
+  warning: "warning",
+  danger: "danger",
+  accent: "accent",
+} as const satisfies Record<BadgeVariant, NonNullable<KzBadgeProps["tone"]>>;
+
+/**
+ * The @krizaka/ui badge (`tone` neutral · accent · success · warning · danger · scrim, `size`, `dot`, `pulse`), with
+ * the 1.x `variant` kept as a deprecated alias of `tone`. `tone` wins when both are given.
+ *
+ * @param props - {@link BadgeProps}
+ * @returns A status badge.
+ */
+export function Badge({ variant, tone, ...props }: BadgeProps) {
+  return <KzBadge tone={tone ?? (variant ? TONE_OF_VARIANT[variant] : undefined)} {...props} />;
+}

package/src/components/Button.tsx

@@ -0,0 +1,26 @@
+import { Button as KzButton, type ButtonProps } from "@krizaka/ui/button";
+
+/*
+ * The button is the @krizaka/ui primitive. Same props as 1.x (`variant` primary · secondary · outline · ghost, `size`
+ * sm · md · lg · icon), plus `danger`, `shape`, `loading` and `asChild`; `className` is merged last, so an override
+ * always wins. React 19: `ref` is a prop. A product variant extends `buttonVariants` (`tv({ extend: buttonVariants })`),
+ * it never copies it.
+ */
+export {
+  type ButtonProps,
+  type ButtonVariants,
+  buttonVariants,
+  IconButton,
+  type IconButtonProps,
+} from "@krizaka/ui/button";
+
+/**
+ * The @krizaka/ui `Button`, with the Sovkora 1.x default kept: without a `variant`, it is the primary (accent) button
+ * — the primitive's own default is `secondary`. Everything else is the primitive's.
+ *
+ * @param props - {@link ButtonProps}
+ * @returns A button (or its child, with `asChild`).
+ */
+export function Button({ variant = "primary", ...props }: ButtonProps) {
+  return <KzButton variant={variant} {...props} />;
+}

package/src/components/ChatShowcase.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+/**
+ * @file ChatShowcase.tsx
+ * @description Self-playing, sovereign AI-chat showcase — Calm Obsidian 2026.
+ *
+ * A code-driven mockup of the Sovkora engine answering a query *locally*.
+ * Dramatizes the product's value prop (deterministic interceptor pipeline +
+ * on-prem inference + zero data egress). Token-driven,
+ * roles only (--kz-* utilities),
+ * reduced-motion safe, and framework-agnostic on copy (all strings via props
+ * so each app localizes through its own i18n).
+ *
+ * Shared by the Sovkora web app (its operator console included) (AGENTS.md §8).
+ */
+
+import { MessageComposer } from "@krizaka/ui/chat";
+import { cn } from "@krizaka/ui/cn";
+import * as React from "react";
+
+import { Icon } from "../icon";
+import { CHAT_SHOWCASE_CSS } from "./chat-showcase.css";
+
+/** Localizable, non-conversational chrome labels. */
+export interface ChatShowcaseLabels {
+  agent: string;
+  status: string;
+  model: string;
+  routed: string;
+  privacy: string;
+  placeholder: string;
+  /** The send button's name inside the composer (inert here, so it is never read); defaults to "Send". */
+  send?: string;
+}
+
+/** Props for {@link ChatShowcase}. */
+export interface ChatShowcaseProps {
+  /** The chrome's words, translated: the agent's name, its status, the model, the "answered locally" tag, the privacy line, the composer's placeholder. */
+  labels: ChatShowcaseLabels;
+  /** The user's scripted question. */
+  question: string;
+  /** The assistant's scripted answer (typed out char-by-char). */
+  answer: string;
+  /** Interceptor pipeline steps rendered as chips once the answer lands. */
+  pipeline: string[];
+  /** Extra classes on the wrapper (width, placement), merged last. */
+  className?: string;
+}
+
+const noop = () => {};
+
+type Phase = 0 | 1 | 2 | 3 | 4; // idle · user · typing · answering · done
+
+const REDUCE = "(prefers-reduced-motion: reduce)";
+const subscribeReduce = (notify: () => void) => {
+  if (typeof window === "undefined" || !window.matchMedia) return noop;
+  const query = window.matchMedia(REDUCE);
+  query.addEventListener?.("change", notify);
+  return () => query.removeEventListener?.("change", notify);
+};
+const readReduce = () => typeof window !== "undefined" && Boolean(window.matchMedia?.(REDUCE).matches);
+
+/** `true` when the person asked for less motion; read on the client only (the server renders the first frame). */
+function usePrefersReducedMotion(): boolean {
+  return React.useSyncExternalStore(subscribeReduce, readReduce, () => false);
+}
+
+/**
+ * Renders the animated sovereign-chat card.
+ *
+ * @param props - {@link ChatShowcaseProps}
+ * @returns The showcase React element.
+ */
+export function ChatShowcase({ labels, question, answer, pipeline, className }: Readonly<ChatShowcaseProps>) {
+  const reduce = usePrefersReducedMotion();
+  const [played, setPlayed] = React.useState({ answer, phase: 0 as Phase, typed: "" });
+  // The sequence restarts when the copy (locale) changes: the state is reset while rendering, never in an effect.
+  if (played.answer !== answer) setPlayed({ answer, phase: 0, typed: "" });
+  const setPhase = React.useCallback((next: Phase) => setPlayed((p) => ({ ...p, phase: next })), []);
+  const setTyped = React.useCallback((next: string) => setPlayed((p) => ({ ...p, typed: next })), []);
+  // Under reduced motion the final state is shown at once, and nothing is scheduled.
+  const phase: Phase = reduce ? 4 : played.phase;
+  const typed = reduce ? answer : played.typed;
+
+  // Orchestrate the scripted sequence (timers only: their callbacks move the state).
+  React.useEffect(() => {
+    if (reduce) return;
+    const timers = [
+      setTimeout(() => setPhase(1), 650),
+      setTimeout(() => setPhase(2), 1350),
+      setTimeout(() => setPhase(3), 2450),
+    ];
+    return () => timers.forEach(clearTimeout);
+  }, [answer, reduce, setPhase]);
+
+  React.useEffect(() => {
+    if (phase !== 3) return;
+    let i = 0;
+    const id = setInterval(() => {
+      i += 2;
+      setTyped(answer.slice(0, i));
+      if (i >= answer.length) {
+        clearInterval(id);
+        setPhase(4);
+      }
+    }, 16);
+    return () => clearInterval(id);
+  }, [phase, answer, setPhase, setTyped]);
+
+  const renderConversation = (ph: Phase, text: string) => {
+    const shownText = ph === 4 ? answer : text;
+    return (
+      <>
+        {/* User */}
+        <div
+          className="flex justify-end transition-all duration-300"
+          style={{ opacity: ph >= 1 ? 1 : 0, transform: ph >= 1 ? "none" : "translateY(8px)" }}
+        >
+          <div className="max-w-[84%] rounded-2xl rounded-br-[5px] bg-accent px-3 py-2.5 text-[13px] font-medium leading-[1.55] text-on-accent">
+            {question}
+          </div>
+        </div>
+
+        {/* Typing */}
+        {ph === 2 && (
+          <div className="flex justify-start">
+            <div className="inline-flex items-center gap-1 rounded-2xl rounded-bl-[5px] border border-border-subtle bg-surface-2 px-3 py-3">
+              <span className="kzc-typing h-1.5 w-1.5 rounded-full bg-fg-muted" />
+              <span className="kzc-typing h-1.5 w-1.5 rounded-full bg-fg-muted" />
+              <span className="kzc-typing h-1.5 w-1.5 rounded-full bg-fg-muted" />
+            </div>
+          </div>
+        )}
+
+        {/* Assistant */}
+        {ph >= 3 && (
+          <div className="flex justify-start">
+            <div className="max-w-[84%] rounded-2xl rounded-bl-[5px] border border-border-subtle bg-surface-2 px-3 py-2.5 text-[13px] leading-[1.55] text-fg">
+              <span className="mb-[7px] inline-flex items-center gap-1.5 font-mono text-[9.5px] font-bold uppercase tracking-[0.04em] text-success">
+                <Icon name="checkCircle" size={11} />
+                {labels.routed}
+              </span>
+              <p className="m-0">
+                {shownText}
+                {ph === 3 && (
+                  <span className="kzc-caret ml-px inline-block h-[1em] w-0.5 translate-y-[2px] bg-accent align-text-bottom" />
+                )}
+              </p>
+              <div
+                className="mt-[11px] flex flex-wrap gap-1.5 border-t border-border-subtle pt-[11px] transition-opacity duration-300"
+                style={{ opacity: ph >= 4 ? 1 : 0 }}
+              >
+                {pipeline.map((step, i) => (
+                  <span
+                    key={step}
+                    className="inline-flex items-center gap-1 rounded-full bg-accent-soft px-2 py-0.5 font-mono text-[10px] font-semibold text-accent"
+                  >
+                    <Icon name="check" size={10} />
+                    {step}
+                    {i < pipeline.length - 1 && <span className="ml-0.5 opacity-50">→</span>}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <div className={cn("relative w-full max-w-[440px]", className)}>
+      <div
+        aria-hidden
+        className="pointer-events-none absolute -inset-x-8 -top-10 -bottom-14 rounded-xl"
+        style={{
+          background: "radial-gradient(60% 55% at 60% 35%, var(--kz-accent-soft) 0%, transparent 70%)",
+        }}
+      />
+
+      <div
+        role="img"
+        aria-label={`${question} — ${answer}`}
+        className="relative flex flex-col overflow-hidden rounded-xl border border-border-default bg-surface-1 shadow-lg"
+      >
+        {/* ── Header ── */}
+        <div className="flex items-center justify-between gap-3 border-b border-border-subtle bg-surface-2 px-4 py-3">
+          <div className="flex min-w-0 items-center gap-2.5">
+            <span className="grid h-[34px] w-[34px] shrink-0 place-items-center rounded-full bg-accent-soft text-accent">
+              <Icon name="shield" size={17} />
+            </span>
+            <span className="flex min-w-0 flex-col">
+              <span className="font-display text-[13px] font-bold tracking-tight text-fg">{labels.agent}</span>
+              <span className="flex items-center gap-1.5 text-[10.5px] text-fg-secondary">
+                <span className="kzc-dot h-1.5 w-1.5 rounded-full bg-success" />
+                {labels.status}
+              </span>
+            </span>
+          </div>
+          <span className="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border border-border-subtle bg-surface-1 px-2.5 py-1 font-mono text-[10px] font-semibold text-fg-secondary">
+            <Icon name="model" size={11} />
+            {labels.model}
+          </span>
+        </div>
+
+        {/* ── Conversation ──
+            Sized by its FINAL state: an invisible copy shares the grid cell with the live one (no layout shift). */}
+        <div className="grid min-h-[268px]">
+          <div
+            aria-hidden
+            data-chat-ghost
+            className="invisible col-start-1 row-start-1 flex flex-col gap-3 px-4 py-[18px]"
+          >
+            {renderConversation(4, answer)}
+          </div>
+          <div className="col-start-1 row-start-1 flex flex-col gap-3 px-4 py-[18px]">
+            {renderConversation(phase, typed)}
+          </div>
+        </div>
+
+        {/* ── Footer ── the very composer of the app (MessageComposer, pill): the card is an instance of the real component, inert. */}
+        <div className="flex flex-col border-t border-border-subtle bg-surface-2 px-4 pb-3 pt-[13px]" aria-hidden inert>
+          <MessageComposer
+            variant="pill"
+            value=""
+            onValueChange={noop}
+            onSend={noop}
+            placeholder={labels.placeholder}
+            sendLabel={labels.send ?? "Send"}
+            inputProps={{ tabIndex: -1, readOnly: true }}
+            status={
+              <>
+                <span className="text-success">
+                  <Icon name="shield" size={12} />
+                </span>
+                {labels.privacy}
+              </>
+            }
+          />
+        </div>
+      </div>
+
+      <style>{CHAT_SHOWCASE_CSS}</style>
+    </div>
+  );
+}
+
+ChatShowcase.displayName = "ChatShowcase";