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

package/registry/icon.json

@@ -0,0 +1,109 @@
+{
+  "name": "icon",
+  "type": "composite",
+  "title": "Icon",
+  "summary": "The Sovkora icon registry: one `Icon` component and a typed `name` for every product concept — studios, models, the pipeline, RAG, MCP.",
+  "description": "The Sovkora icon registry: one `Icon` component and a typed `name` for every product concept — studios, models, the pipeline, RAG, MCP.",
+  "why": "Sovkora's screens name AI concepts (a router, a refiner, a memory, a cost shield) that no generic set draws. The contract centralises them in one registry, so an app never imports an icon library directly and every concept has one picture across the client, the console and the website.",
+  "status": "stable",
+  "deprecated": null,
+  "category": "foundations",
+  "platforms": "web",
+  "builtOn": [],
+  "whenToUse": [
+    "Every icon of an Sovkora screen: navigation, buttons, lists, the palette.",
+    "A concept of the engine (model, pipeline, router) shown next to its name."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For a Krizaka platform concept on the website (the signature set): use @krizaka/icons."
+    },
+    {
+      "when": "As the product's logo: use `SovkoraLogo` from @krizaka/ui."
+    }
+  ],
+  "bestPractices": [
+    "Never import lucide or another set in an app: add the icon to the registry.",
+    "An icon-only button carries an `aria-label` (`IconButton` from @krizaka/ui requires one).",
+    "Colour through the text role (`text-fg-secondary`, `text-accent`): the strokes are `currentColor`."
+  ],
+  "accessibility": {
+    "keyboard": [],
+    "notes": [
+      "Decorative by default (`aria-hidden`): the text or the button around it names it."
+    ]
+  },
+  "related": [
+    "command-palette",
+    "sentinel-mini",
+    "ui/button"
+  ],
+  "web": {
+    "entry": "@krizaka/sovkora-design-system",
+    "import": "import { Icon } from \"@krizaka/sovkora-design-system\";",
+    "props": [
+      {
+        "component": "Icon",
+        "description": "Polymorphic SVG icon wrapper with uniform fallback configuration.\n\n- Default fine strokeWidth: 1.25\n- Round caps and joins\n- Size control via `size` prop\n- vector-effect=\"non-scaling-stroke\" on all paths",
+        "props": [
+          {
+            "name": "name",
+            "type": "\"audio\" | \"code\" | \"menu\" | \"search\" | \"video\" | \"circle\" | \"image\" | \"text\" | \"warning\" | \"key\" | \"send\" | \"timer\" | \"copy\" | \"error\" | \"pipeline\" | \"user\" | \"dashboard\" | \"chat\" | ... 64 more ... | \"studio\"",
+            "default": null,
+            "description": "Icon identifier from the registry",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": "",
+            "description": "Additional CSS classes",
+            "required": false
+          },
+          {
+            "name": "fallback",
+            "type": "\"audio\" | \"code\" | \"menu\" | \"search\" | \"video\" | \"circle\" | \"image\" | \"text\" | \"warning\" | \"key\" | \"send\" | \"timer\" | \"copy\" | \"error\" | \"pipeline\" | \"user\" | \"dashboard\" | \"chat\" | ... 65 more ...",
+            "default": null,
+            "description": "Drawn when `name` is not in the registry (a key that comes from data, e.g. a Studio's `iconKey`).",
+            "required": false
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "Accessible label — if omitted, icon is decorative (aria-hidden)",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "number",
+            "default": "20",
+            "description": "Pixel size (width & height). Defaults to 20.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "engine",
+        "title": "The engine's concepts",
+        "description": "Router, pipeline, model, RAG, memory, MCP — the vocabulary of Sovkora.",
+        "path": "examples/icon/engine.tsx",
+        "module": "@krizaka/sovkora-design-system/registry/examples/icon/engine",
+        "code": "import { Icon, type IconName } from \"@krizaka/sovkora-design-system\";\n\nconst CONCEPTS: { name: IconName; label: string }[] = [\n  { name: \"router\", label: \"Router\" },\n  { name: \"pipeline\", label: \"Pipeline\" },\n  { name: \"model\", label: \"Model\" },\n  { name: \"rag\", label: \"RAG\" },\n  { name: \"memory\", label: \"Memory\" },\n  { name: \"mcp\", label: \"MCP\" },\n  { name: \"costShield\", label: \"Cost shield\" },\n  { name: \"shield\", label: \"Policies\" },\n];\n\n// The vocabulary of the engine, one picture per concept.\nexport default function Engine() {\n  return (\n    <ul className=\"grid grid-cols-4 gap-4 text-xs text-fg-secondary\">\n      {CONCEPTS.map((c) => (\n        <li key={c.name} className=\"flex flex-col items-center gap-1.5\">\n          <Icon name={c.name} size={22} className=\"text-fg\" />\n          {c.label}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"
+      },
+      {
+        "name": "in-a-button",
+        "title": "In a button",
+        "description": "An icon beside a label, coloured by the button's role.",
+        "path": "examples/icon/in-a-button.tsx",
+        "module": "@krizaka/sovkora-design-system/registry/examples/icon/in-a-button",
+        "code": "import { Icon } from \"@krizaka/sovkora-design-system\";\nimport { Button } from \"@krizaka/ui/button\";\n\n// An icon beside a label: it takes the button's text role.\nexport default function InAButton() {\n  return (\n    <Button variant=\"secondary\">\n      <Icon name=\"upload\" size={16} />\n      Add documents\n    </Button>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "dependencies": [],
+  "registryDependencies": []
+}

package/registry/index.json

@@ -0,0 +1,242 @@
+{
+  "name": "@krizaka/sovkora-design-system",
+  "version": "4.0.0",
+  "product": "sovkora",
+  "extends": {
+    "name": "@krizaka/ui",
+    "range": "workspace:^"
+  },
+  "install": {
+    "command": "npm install @krizaka/sovkora-design-system && npm install -D tailwindcss",
+    "css": "@import \"tailwindcss\";\n@import \"@krizaka/sovkora-design-system/theme.css\";",
+    "note": "The package ships its TypeScript sources: add it to `transpilePackages` (with @krizaka/sovkora-shared and @krizaka/ui)."
+  },
+  "reexports": [
+    {
+      "name": "buttonVariants",
+      "from": "@krizaka/ui/button"
+    },
+    {
+      "name": "cn",
+      "from": "@krizaka/ui/cn"
+    },
+    {
+      "name": "Field",
+      "from": "@krizaka/ui/field"
+    },
+    {
+      "name": "IconButton",
+      "from": "@krizaka/ui/button"
+    },
+    {
+      "name": "Input",
+      "from": "@krizaka/ui/field"
+    },
+    {
+      "name": "Select",
+      "from": "@krizaka/ui/field"
+    },
+    {
+      "name": "Textarea",
+      "from": "@krizaka/ui/field"
+    }
+  ],
+  "items": [
+    {
+      "name": "badge",
+      "type": "composite",
+      "title": "Badge",
+      "summary": "The @krizaka/ui badge with the 1.x `variant` kept as a deprecated alias of `tone`.",
+      "description": "The @krizaka/ui badge with the 1.x `variant` kept as a deprecated alias of `tone`.",
+      "status": "stable",
+      "deprecated": null,
+      "category": "data-display",
+      "platforms": "web",
+      "builtOn": [
+        "ui/badge"
+      ],
+      "examples": {
+        "web": 1,
+        "native": 0
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
+    {
+      "name": "button",
+      "type": "composite",
+      "title": "Button",
+      "summary": "The @krizaka/ui button with the Sovkora 1.x default kept: without a `variant`, it is the primary (orange) button.",
+      "description": "The @krizaka/ui button with the Sovkora 1.x default kept: without a `variant`, it is the primary (orange) button.",
+      "status": "stable",
+      "deprecated": null,
+      "category": "actions",
+      "platforms": "web",
+      "builtOn": [
+        "ui/button"
+      ],
+      "examples": {
+        "web": 1,
+        "native": 0
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
+    {
+      "name": "chat-showcase",
+      "type": "composite",
+      "title": "Chat showcase",
+      "summary": "A self-playing sovereign AI chat: a question, the answer typed out, the interceptor pipeline it went through, and the promise that nothing left the premises.",
+      "description": "A self-playing sovereign AI chat: a question, the answer typed out, the interceptor pipeline it went through, and the promise that nothing left the premises.",
+      "status": "stable",
+      "deprecated": null,
+      "category": "data-display",
+      "platforms": "web",
+      "builtOn": [],
+      "examples": {
+        "web": 2,
+        "native": 0
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
+    {
+      "name": "clip-player",
+      "type": "composite",
+      "title": "Clip player",
+      "summary": "A short clip that is plainly a clip: a muted loop that plays in view, a badge with its length, play/pause and sound buttons, and a click that opens it larger.",
+      "description": "A short clip that is plainly a clip: a muted loop that plays in view, a badge with its length, play/pause and sound buttons, and a click that opens it larger.",
+      "status": "beta",
+      "deprecated": null,
+      "category": "data-display",
+      "platforms": "web",
+      "builtOn": [
+        "ui/button",
+        "ui/dialog"
+      ],
+      "examples": {
+        "web": 1,
+        "native": 0
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
+    {
+      "name": "command-palette",
+      "type": "composite",
+      "title": "Command palette",
+      "summary": "The Sovkora ⌘K palette: jump to a studio, a chat, a setting — sections, registry icons and a footer of hints, on the platform's command dialog.",
+      "description": "The Sovkora ⌘K palette: jump to a studio, a chat, a setting — sections, registry icons and a footer of hints, on the platform's command dialog.",
+      "status": "stable",
+      "deprecated": null,
+      "category": "navigation",
+      "platforms": "web",
+      "builtOn": [
+        "ui/command",
+        "ui/kbd",
+        "ui/dialog"
+      ],
+      "examples": {
+        "web": 1,
+        "native": 0
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
+    {
+      "name": "icon",
+      "type": "composite",
+      "title": "Icon",
+      "summary": "The Sovkora icon registry: one `Icon` component and a typed `name` for every product concept — studios, models, the pipeline, RAG, MCP.",
+      "description": "The Sovkora icon registry: one `Icon` component and a typed `name` for every product concept — studios, models, the pipeline, RAG, MCP.",
+      "status": "stable",
+      "deprecated": null,
+      "category": "foundations",
+      "platforms": "web",
+      "builtOn": [],
+      "examples": {
+        "web": 2,
+        "native": 0
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
+    {
+      "name": "run-facts",
+      "type": "composite",
+      "title": "Run facts",
+      "summary": "What a run recorded, as a description list: label left, value right, in mono.",
+      "description": "What a run recorded, as a description list: label left, value right, in mono.",
+      "status": "beta",
+      "deprecated": null,
+      "category": "data-display",
+      "platforms": "web",
+      "builtOn": [],
+      "examples": {
+        "web": 1,
+        "native": 0
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
+    {
+      "name": "sentinel-mini",
+      "type": "composite",
+      "title": "Sentinel mini",
+      "summary": "The Sentinel, Sovkora's guardian, at 24 px: a core, a ring and an orbit in the accent — for a sidebar, a header, a loading corner.",
+      "description": "The Sentinel, Sovkora's guardian, at 24 px: a core, a ring and an orbit in the accent — for a sidebar, a header, a loading corner.",
+      "status": "stable",
+      "deprecated": null,
+      "category": "foundations",
+      "platforms": "web",
+      "builtOn": [],
+      "examples": {
+        "web": 1,
+        "native": 0
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
+    {
+      "name": "skeleton",
+      "type": "composite",
+      "title": "Skeleton",
+      "summary": "The @krizaka/ui skeleton (default shape `rect`) with the 1.x shorthands, and `SkeletonGroup` — a paragraph of text lines.",
+      "description": "The @krizaka/ui skeleton (default shape `rect`) with the 1.x shorthands, and `SkeletonGroup` — a paragraph of text lines.",
+      "status": "stable",
+      "deprecated": null,
+      "category": "feedback",
+      "platforms": "web",
+      "builtOn": [
+        "ui/skeleton"
+      ],
+      "examples": {
+        "web": 1,
+        "native": 0
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
+    {
+      "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.",
+      "status": "beta",
+      "deprecated": null,
+      "category": "data-display",
+      "platforms": "web",
+      "builtOn": [
+        "ui/code-block",
+        "ui/button"
+      ],
+      "examples": {
+        "web": 2,
+        "native": 0
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    }
+  ]
+}

package/registry/run-facts.json

@@ -0,0 +1,75 @@
+{
+  "name": "run-facts",
+  "type": "composite",
+  "title": "Run facts",
+  "summary": "What a run recorded, as a description list: label left, value right, in mono.",
+  "description": "What a run recorded, as a description list: label left, value right, in mono.",
+  "why": "Sovkora shows what proves a result — model, seed, frame, length, time, cost, run id — the same way everywhere. A long id breaks instead of overflowing, so the same list reads on a phone and in a wide card.",
+  "status": "beta",
+  "deprecated": null,
+  "category": "data-display",
+  "platforms": "web",
+  "builtOn": [],
+  "whenToUse": [
+    "Under a generated result (a clip, an image) to say how it was made.",
+    "In a run's detail, beside its steps."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "Many rows to compare side by side."
+    }
+  ],
+  "bestPractices": [
+    "Say the real source (`Made by`, `Run by`), never a flattering one.",
+    "Values are as the run recorded them: never rounded to look better."
+  ],
+  "accessibility": {
+    "keyboard": [],
+    "notes": [
+      "A `dl`: a screen reader reads each label with its value."
+    ]
+  },
+  "related": [
+    "video-result",
+    "clip-player"
+  ],
+  "web": {
+    "entry": "@krizaka/sovkora-design-system",
+    "import": "import { RunFacts } from \"@krizaka/sovkora-design-system\";",
+    "props": [
+      {
+        "component": "RunFacts",
+        "description": "What a run recorded, as a description list in mono: label left, value right (a long id breaks instead of overflowing).",
+        "props": [
+          {
+            "name": "facts",
+            "type": "readonly RunFact[]",
+            "default": null,
+            "description": "The facts, in reading order.",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Extra classes on the list, merged last.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "clip-run",
+        "title": "The run of a clip",
+        "description": "Model, seed, frame, length and the run id of Eric's tea-pour shot.",
+        "path": "examples/run-facts/clip-run.tsx",
+        "module": "@krizaka/sovkora-design-system/registry/examples/run-facts/clip-run",
+        "code": "import { RunFacts } from \"@krizaka/sovkora-design-system\";\n\n// What the run of Eric's tea-pour shot recorded.\nexport default function ClipRun() {\n  return (\n    <RunFacts\n      facts={[\n        { label: \"Model\", value: \"Wan 2.2 A14B\" },\n        { label: \"Sovkora run\", value: \"25948442-7c68-4e66-94d6-39cd8b96438d\" },\n        { label: \"Seed\", value: \"20261011\" },\n        { label: \"Frame\", value: \"832×480 · 16 fps · 5 s\" },\n      ]}\n    />\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "dependencies": [],
+  "registryDependencies": []
+}

package/registry/sentinel-mini.json

@@ -0,0 +1,81 @@
+{
+  "name": "sentinel-mini",
+  "type": "composite",
+  "title": "Sentinel mini",
+  "summary": "The Sentinel, Sovkora's guardian, at 24 px: a core, a ring and an orbit in the accent — for a sidebar, a header, a loading corner.",
+  "description": "The Sentinel, Sovkora's guardian, at 24 px: a core, a ring and an orbit in the accent — for a sidebar, a header, a loading corner.",
+  "why": "The Sovkora mark (`SovkoraLogo`, @krizaka/ui) signs the product; the Sentinel stands for what watches over the requests — the interceptors. It is drawn once here, in the accent role, so it follows the brand and every named theme.",
+  "status": "stable",
+  "deprecated": null,
+  "category": "foundations",
+  "platforms": "web",
+  "builtOn": [],
+  "whenToUse": [
+    "Next to a section that the governance watches (the console's pipeline, the audit trail).",
+    "As a small brand accent in a dense sidebar where the mark would be too much."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "As the product's logo: use `SovkoraLogo` from @krizaka/ui."
+    },
+    {
+      "when": "As a loading indicator.",
+      "use": "ui/spinner"
+    }
+  ],
+  "bestPractices": [
+    "Decorative: put it next to a text that says what it means.",
+    "Keep it small (16–32 px): its strokes are drawn for that size."
+  ],
+  "accessibility": {
+    "keyboard": [],
+    "notes": [
+      "`aria-hidden`: decorative.",
+      "Strokes and fills read `--kz-accent`: it follows the theme."
+    ]
+  },
+  "related": [
+    "chat-showcase",
+    "icon",
+    "ui/mascots"
+  ],
+  "web": {
+    "entry": "@krizaka/sovkora-design-system",
+    "import": "import { SentinelMini } from \"@krizaka/sovkora-design-system\";",
+    "props": [
+      {
+        "component": "SentinelMini",
+        "description": "Compact 24×24 Sentinel mascot with simplified core + single orbital ring.",
+        "props": [
+          {
+            "name": "className",
+            "type": "string",
+            "default": "",
+            "description": "Additional CSS classes.",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "number",
+            "default": "24",
+            "description": "SVG size in pixels. Defaults to 24.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "sidebar",
+        "title": "In a sidebar heading",
+        "description": "Beside the name of the section the governance watches.",
+        "path": "examples/sentinel-mini/sidebar.tsx",
+        "module": "@krizaka/sovkora-design-system/registry/examples/sentinel-mini/sidebar",
+        "code": "import { SentinelMini } from \"@krizaka/sovkora-design-system\";\n\n// Beside the name of the section the governance watches.\nexport default function Sidebar() {\n  return (\n    <div className=\"flex items-center gap-2 text-sm font-semibold text-fg\">\n      <SentinelMini size={24} />\n      Governance · 12 policies active\n    </div>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "dependencies": [],
+  "registryDependencies": []
+}

package/registry/skeleton.json

@@ -0,0 +1,116 @@
+{
+  "name": "skeleton",
+  "type": "composite",
+  "title": "Skeleton",
+  "summary": "The @krizaka/ui skeleton (default shape `rect`) with the 1.x shorthands, and `SkeletonGroup` — a paragraph of text lines.",
+  "description": "The @krizaka/ui skeleton (default shape `rect`) with the 1.x shorthands, and `SkeletonGroup` — a paragraph of text lines.",
+  "why": "Sovkora 1.x sized skeletons with `width` / `height` and chose the shape with `variant`; this adapter keeps them (deprecated) on the primitive, and adds `SkeletonGroup`, the paragraph its chat and document views wait on.",
+  "status": "stable",
+  "deprecated": null,
+  "category": "feedback",
+  "platforms": "web",
+  "builtOn": [
+    "ui/skeleton"
+  ],
+  "whenToUse": [
+    "While an answer, a document or a list loads: the shape of what is coming.",
+    "`SkeletonGroup` for a paragraph (an answer being prepared)."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "In new code for a single block: import `Skeleton` from `@krizaka/ui/skeleton` and size it with `className`.",
+      "use": "ui/skeleton"
+    },
+    {
+      "when": "For an action in progress (a button, a send).",
+      "use": "ui/spinner"
+    }
+  ],
+  "bestPractices": [
+    "Size with `className` (`h-4 w-32`), not `width` / `height` (deprecated).",
+    "Match the layout that replaces it, so nothing jumps."
+  ],
+  "accessibility": {
+    "keyboard": [],
+    "notes": [
+      "Hidden from assistive technology: announce the loading state elsewhere (`aria-busy` on the region)."
+    ]
+  },
+  "related": [
+    "ui/skeleton",
+    "ui/spinner"
+  ],
+  "web": {
+    "entry": "@krizaka/sovkora-design-system",
+    "import": "import { Skeleton, SkeletonGroup } from \"@krizaka/sovkora-design-system\";",
+    "props": [
+      {
+        "component": "Skeleton",
+        "description": "The",
+        "props": [
+          {
+            "name": "height",
+            "type": "string",
+            "default": null,
+            "description": "@deprecated Since 2.0 — size it with a `className` (`h-4`) or `style`.",
+            "required": false
+          },
+          {
+            "name": "shape",
+            "type": "\"circle\" | \"rect\" | \"text\"",
+            "default": "text",
+            "description": "text (a line) · circle (an avatar; give it a height) · rect (a media; give it a height).",
+            "required": false
+          },
+          {
+            "name": "variant",
+            "type": "NonNullable<\"circle\" | \"rect\" | \"text\">",
+            "default": null,
+            "description": "@deprecated Since 2.0 — use `shape` (same names).",
+            "required": false
+          },
+          {
+            "name": "width",
+            "type": "string",
+            "default": null,
+            "description": "@deprecated Since 2.0 — size it with a `className` (`w-32`) or `style`.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "SkeletonGroup",
+        "description": "A paragraph of text skeletons; the last line is shorter.",
+        "props": [
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Extra classes on the group (its width), merged last.",
+            "required": false
+          },
+          {
+            "name": "lines",
+            "type": "number",
+            "default": "3",
+            "description": "The number of text lines; the last one is shorter. Default 3.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "answer-loading",
+        "title": "An answer loading",
+        "description": "The avatar and three lines while the engine prepares the answer.",
+        "path": "examples/skeleton/answer-loading.tsx",
+        "module": "@krizaka/sovkora-design-system/registry/examples/skeleton/answer-loading",
+        "code": "import { Skeleton, SkeletonGroup } from \"@krizaka/sovkora-design-system\";\n\n// The shape of an answer while the engine prepares it.\nexport default function AnswerLoading() {\n  return (\n    <div aria-busy=\"true\" aria-label=\"Preparing the answer\" className=\"flex w-80 gap-3\">\n      <Skeleton shape=\"circle\" className=\"h-8 w-8 shrink-0\" />\n      <SkeletonGroup lines={3} className=\"flex-1\" />\n    </div>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "dependencies": [],
+  "registryDependencies": []
+}