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

package/registry/examples/chat-showcase/sovereign-answer.tsx

@@ -0,0 +1,20 @@
+import { ChatShowcase } from "@krizaka/sovkora-design-system";
+
+// Eric, finance lead, asks about a contract: the engine answers on premises, nothing leaves.
+export default function SovereignAnswer() {
+  return (
+    <ChatShowcase
+      labels={{
+        agent: "Sovkora · Finance desk",
+        status: "On premises · online",
+        model: "llama-3.1-70b",
+        routed: "Answered locally",
+        privacy: "0 bytes left your network",
+        placeholder: "Ask about your documents…",
+      }}
+      question="Eric here — which supplier contracts renew before March, and at what notice?"
+      answer="Three renew before March: Northwind (90 days' notice, by Dec 2), Calder Logistics (60 days, by Jan 4) and Ivo Print (30 days, by Feb 1). Northwind's clause also caps the increase at 3 %."
+      pipeline={["PII masked", "Policy checked", "Routed locally", "Cited 3 contracts"]}
+    />
+  );
+}

package/registry/examples/clip-player/tea-pour.tsx

@@ -0,0 +1,27 @@
+import { ClipPlayer } from "@krizaka/sovkora-design-system";
+
+// Eric's tea-pour shot as a loop: it plays in view, the controls show on hover, a click opens it larger.
+export default function TeaPour() {
+  return (
+    <div className="max-w-xl overflow-hidden rounded-2xl border border-border-default">
+      <ClipPlayer
+        title="Mint tea pouring into an engraved glass in a Berber tent"
+        sources={{
+          mp4: "https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/tea-pour.c4138c8ce9.mp4",
+          webm: "https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/tea-pour.b33e468733.webm",
+          poster:
+            "https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/tea-pour-poster.8a062e63c2.webp",
+        }}
+        labels={{
+          badge: "Video · 5 s",
+          play: "Play",
+          pause: "Pause",
+          mute: "Mute",
+          unmute: "Sound on",
+          enlarge: "Open larger",
+          close: "Close",
+        }}
+      />
+    </div>
+  );
+}

package/registry/examples/command-palette/workspace.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { CommandPalette } from "@krizaka/sovkora-design-system";
+
+// Eric's workspace: ⌘K / Ctrl+K opens it; entries and words are props.
+export default function Workspace() {
+  return (
+    <div className="flex flex-col items-start gap-2 text-sm text-fg-secondary">
+      <p>Press ⌘K (Ctrl+K) to open the palette.</p>
+      <CommandPalette
+        onNavigate={() => {}}
+        labels={{
+          label: "Command palette",
+          placeholder: "Go to…",
+          results: "Results",
+          empty: "Nothing matches.",
+          navigate: "move",
+          open: "open",
+          close: "close",
+        }}
+        commands={[
+          { id: "studios", label: "Studios", icon: "studio", href: "/studios", section: "Go to" },
+          { id: "chat", label: "Contracts assistant", icon: "chat", href: "/chat/contracts", section: "Go to" },
+          { id: "new-chat", label: "New chat", icon: "newChat", href: "/chat/new", section: "Actions" },
+          { id: "models", label: "Local models", icon: "model", href: "/settings/models", section: "Settings" },
+        ]}
+      />
+    </div>
+  );
+}

package/registry/examples/icon/engine.tsx

@@ -0,0 +1,26 @@
+import { Icon, type IconName } from "@krizaka/sovkora-design-system";
+
+const CONCEPTS: { name: IconName; label: string }[] = [
+  { name: "router", label: "Router" },
+  { name: "pipeline", label: "Pipeline" },
+  { name: "model", label: "Model" },
+  { name: "rag", label: "RAG" },
+  { name: "memory", label: "Memory" },
+  { name: "mcp", label: "MCP" },
+  { name: "costShield", label: "Cost shield" },
+  { name: "shield", label: "Policies" },
+];
+
+// The vocabulary of the engine, one picture per concept.
+export default function Engine() {
+  return (
+    <ul className="grid grid-cols-4 gap-4 text-xs text-fg-secondary">
+      {CONCEPTS.map((c) => (
+        <li key={c.name} className="flex flex-col items-center gap-1.5">
+          <Icon name={c.name} size={22} className="text-fg" />
+          {c.label}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/registry/examples/icon/in-a-button.tsx

@@ -0,0 +1,12 @@
+import { Icon } from "@krizaka/sovkora-design-system";
+import { Button } from "@krizaka/ui/button";
+
+// An icon beside a label: it takes the button's text role.
+export default function InAButton() {
+  return (
+    <Button variant="secondary">
+      <Icon name="upload" size={16} />
+      Add documents
+    </Button>
+  );
+}

package/registry/examples/run-facts/clip-run.tsx

@@ -0,0 +1,15 @@
+import { RunFacts } from "@krizaka/sovkora-design-system";
+
+// What the run of Eric's tea-pour shot recorded.
+export default function ClipRun() {
+  return (
+    <RunFacts
+      facts={[
+        { label: "Model", value: "Wan 2.2 A14B" },
+        { label: "Sovkora run", value: "25948442-7c68-4e66-94d6-39cd8b96438d" },
+        { label: "Seed", value: "20261011" },
+        { label: "Frame", value: "832×480 · 16 fps · 5 s" },
+      ]}
+    />
+  );
+}

package/registry/examples/sentinel-mini/sidebar.tsx

@@ -0,0 +1,11 @@
+import { SentinelMini } from "@krizaka/sovkora-design-system";
+
+// Beside the name of the section the governance watches.
+export default function Sidebar() {
+  return (
+    <div className="flex items-center gap-2 text-sm font-semibold text-fg">
+      <SentinelMini size={24} />
+      Governance · 12 policies active
+    </div>
+  );
+}

package/registry/examples/skeleton/answer-loading.tsx

@@ -0,0 +1,11 @@
+import { Skeleton, SkeletonGroup } from "@krizaka/sovkora-design-system";
+
+// The shape of an answer while the engine prepares it.
+export default function AnswerLoading() {
+  return (
+    <div aria-busy="true" aria-label="Preparing the answer" className="flex w-80 gap-3">
+      <Skeleton shape="circle" className="h-8 w-8 shrink-0" />
+      <SkeletonGroup lines={3} className="flex-1" />
+    </div>
+  );
+}

package/registry/examples/video-result/assistant.tsx

@@ -0,0 +1,36 @@
+import { VideoResult } from "@krizaka/sovkora-design-system";
+
+// A clip without its command: the player, the prompt and the facts of the run, nothing else to copy.
+export default function Assistant() {
+  return (
+    <VideoResult
+      title="A night workshop where a holographic interface of orange light unfolds blueprints"
+      sources={{
+        mp4: "https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/assistant.8b571af009.mp4",
+        webm: "https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/assistant.7311e0410e.webm",
+        poster: "https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/assistant-poster.fc37abd8c7.webp",
+      }}
+      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."
+      facts={[
+        { label: "Model", value: "Wan 2.2 A14B" },
+        { label: "Seed", value: "20261011" },
+        { label: "Frame", value: "832×480 · 16 fps · 5 s" },
+      ]}
+      labels={{
+        badge: "Video · 5 s",
+        play: "Play",
+        pause: "Pause",
+        mute: "Mute",
+        unmute: "Sound on",
+        enlarge: "Open larger",
+        close: "Close",
+        prompt: "Prompt",
+        facts: "The run",
+        reproduce: "Reproduce it",
+        copy: "Copy command",
+        copied: "Command copied",
+        download: "Download the clip",
+      }}
+    />
+  );
+}

package/registry/examples/video-result/tea-pour.tsx

@@ -0,0 +1,40 @@
+import { VideoResult } from "@krizaka/sovkora-design-system";
+// Eric's tea-pour shot: the clip, its prompt, what the run recorded, how to make it again.
+export default function TeaPour() {
+  return (
+    <VideoResult
+      title="Mint tea pouring into an engraved glass in a Berber tent, steam in a shaft of golden light"
+      sources={{
+        mp4: "https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/tea-pour.c4138c8ce9.mp4",
+        webm: "https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/tea-pour.b33e468733.webm",
+        poster: "https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/tea-pour-poster.8a062e63c2.webp",
+      }}
+      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."
+      facts={[
+        { label: "Model", value: "Wan 2.2 A14B" },
+        { label: "Run by", value: "Sovkora · run 25948442" },
+        { label: "Seed", value: "20261011" },
+        { label: "Frame", value: "832×480 · 16 fps · 5 s" },
+      ]}
+      reproduce={
+        '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'
+      }
+      downloadHref="https://krizaka-assets.b-cdn.net/site/products/orazaka/gallery-video/tea-pour.c4138c8ce9.mp4"
+      labels={{
+        badge: "Video · 5 s",
+        play: "Play",
+        pause: "Pause",
+        mute: "Mute",
+        unmute: "Sound on",
+        enlarge: "Open larger",
+        close: "Close",
+        prompt: "Prompt",
+        facts: "The run",
+        reproduce: "Reproduce it",
+        copy: "Copy command",
+        copied: "Command copied",
+        download: "Download the clip",
+      }}
+    />
+  );
+}