feat(ui-core): extract DOM-free components from @kopai/ui

.changeset/ui-core-initial.md

@@ -0,0 +1,5 @@
+---
+"@kopai/ui-core": minor
+---
+
+New package `@kopai/ui-core` — DOM-free subset of `@kopai/ui` (catalog, renderer, provider, hooks, prompt-gen) for React Native / SSR / CLI consumers. `@kopai/ui` unchanged; re-export migration lands in a follow-up.

README.md

@@ -34,6 +34,7 @@ The image is built on [Docker Hardened Images](https://hub.docker.com/hardened-i
 | [@kopai/cli](./packages/cli)                                     | CLI tool                        | [![npm](https://img.shields.io/npm/v/@kopai/cli?label=latest)](https://www.npmjs.com/package/@kopai/cli)                                     |
 | [@kopai/api](./packages/api)                                     | OTEL signals API                | [![npm](https://img.shields.io/npm/v/@kopai/api?label=latest)](https://www.npmjs.com/package/@kopai/api)                                     |
 | [@kopai/ui](./packages/ui)                                       | Dashboard React components      | [![npm](https://img.shields.io/npm/v/@kopai/ui?label=latest)](https://www.npmjs.com/package/@kopai/ui)                                       |
+| [@kopai/ui-core](./packages/ui-core)                             | DOM-free SDUI primitives        | [![npm](https://img.shields.io/npm/v/@kopai/ui-core?label=latest)](https://www.npmjs.com/package/@kopai/ui-core)                             |
 | [@kopai/collector](./packages/collector)                         | OTLP collector, HTTP only       | [![npm](https://img.shields.io/npm/v/@kopai/collector?label=latest)](https://www.npmjs.com/package/@kopai/collector)                         |
 | [@kopai/sqlite-datasource](./packages/sqlite-datasource)         | SQLite datasource               | [![npm](https://img.shields.io/npm/v/@kopai/sqlite-datasource?label=latest)](https://www.npmjs.com/package/@kopai/sqlite-datasource)         |
 | [@kopai/clickhouse-datasource](./packages/clickhouse-datasource) | ClickHouse datasource           | [![npm](https://img.shields.io/npm/v/@kopai/clickhouse-datasource?label=latest)](https://www.npmjs.com/package/@kopai/clickhouse-datasource) |
@@ -42,9 +43,10 @@ The image is built on [Docker Hardened Images](https://hub.docker.com/hardened-i
 
 ## Examples
 
-| Example                                                                         | Description                                              |
-| ------------------------------------------------------------------------------- | -------------------------------------------------------- |
-| [clickhouse-observability-backend](./examples/clickhouse-observability-backend) | Docker Compose: OTEL Collector → ClickHouse → @kopai/api |
+| Example                                                                         | Description                                               |
+| ------------------------------------------------------------------------------- | --------------------------------------------------------- |
+| [clickhouse-observability-backend](./examples/clickhouse-observability-backend) | Docker Compose: OTEL Collector → ClickHouse → @kopai/api  |
+| [ui-react-app](./examples/ui-react-app)                                         | React SPA showing custom SDUI renderers on @kopai/ui-core |
 
 ### Dependency Graph
 

examples/ui-react-app/README.md

@@ -18,6 +18,8 @@ flowchart LR
     style DOM fill:#fce4ec,stroke:#c62828
 ```
 
+> This example depends only on **`@kopai/ui-core`** — the DOM-free subset that ships the catalog schema, the renderer factory, the SDK provider, and the data-fetching hook. It runs in any React host (web, React Native, SSR). The full feature-complete DOM renderer set (charts, virtual scroll, drill-downs) lives in **`@kopai/ui`** and is the right choice for web apps that want batteries-included components. See [§ Feature-complete reference](#feature-complete-reference).
+
 ## Run it
 
 ```bash
@@ -31,7 +33,7 @@ pnpm lint
 
 ## The two contract functions
 
-`@kopai/ui` provides the two functions needed to build a renderer:
+`@kopai/ui-core` provides the two functions needed to build a renderer:
 
 1. `createCatalog` — define the components and their props. The returned `uiTreeSchema` is a Zod schema that any valid tree must satisfy.
 2. `createRendererFromCatalog` — bind each catalog entry to a React component.
@@ -133,8 +135,8 @@ Same local-catalog pattern, but adds a `MetricStat` component with `acceptsDataF
 
 ### 3. [`src/custom-observability-catalog.tsx`](src/custom-observability-catalog.tsx)
 
-Reference implementation for the full `observabilityCatalog` exported from `@kopai/ui` — all 15 components (8 primitives + 7 data-backed), a shared `<RequestState>` helper, multi-method type-guard narrowing, and a kitchen-sink tree that exercises every renderer. Read this as the authoritative example for building a custom renderer set. Canonical catalog definitions (Zod schemas for each component's `props` + `acceptsDataFrom`) live at [`packages/ui/src/lib/observability-catalog.ts`](../../packages/ui/src/lib/observability-catalog.ts).
+Reference implementation for the full `observabilityCatalog` exported from `@kopai/ui-core` — all 15 components (8 primitives + 7 data-backed), a shared `<RequestState>` helper, multi-method type-guard narrowing, and a kitchen-sink tree that exercises every renderer. Read this as the authoritative example for building a custom renderer set. Canonical catalog definitions (Zod schemas for each component's `props` + `acceptsDataFrom`) live at [`packages/ui-core/src/lib/observability-catalog.ts`](../../packages/ui-core/src/lib/observability-catalog.ts).
 
 ## Feature-complete reference
 
-The renderers in this package are intentionally minimal. For production-grade implementations with charts, virtual scroll, drill-downs, etc., see [`packages/ui/src/components/observability/renderers/`](../../packages/ui/src/components/observability/renderers/) in the repo.
+The renderers in this package are intentionally minimal — they're a teaching aid built directly on `@kopai/ui-core`. For production-grade implementations with charts, virtual scroll, drill-downs, etc., see [`packages/ui/src/components/observability/renderers/`](../../packages/ui/src/components/observability/renderers/) — those live in `@kopai/ui`, which bundles recharts + react-virtual and targets web only.

examples/ui-react-app/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@kopai/sdk": "workspace:*",
-    "@kopai/ui": "workspace:*",
+    "@kopai/ui-core": "workspace:*",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   },

examples/ui-react-app/src/custom-observability-catalog.tsx

@@ -36,7 +36,7 @@ import {
   createRendererFromCatalog,
   observabilityCatalog,
   type RendererComponentProps,
-} from "@kopai/ui";
+} from "@kopai/ui-core";
 import type { ReactNode } from "react";
 import { z } from "zod";
 

examples/ui-react-app/src/dynamic-kopai-data.tsx

@@ -3,7 +3,7 @@ import {
   KopaiSDKProvider,
   createCatalog,
   createRendererFromCatalog,
-} from "@kopai/ui";
+} from "@kopai/ui-core";
 import { z } from "zod";
 
 const catalog = createCatalog({

examples/ui-react-app/src/static-data.tsx

@@ -1,4 +1,4 @@
-import { createRendererFromCatalog, createCatalog } from "@kopai/ui";
+import { createRendererFromCatalog, createCatalog } from "@kopai/ui-core";
 import { z } from "zod";
 
 const catalog = createCatalog({

packages/ui-core/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@kopai/ui-core",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "author": "Vladimir Adamic",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kopai-app/kopai-mono.git",
+    "directory": "packages/ui-core"
+  },
+  "homepage": "https://github.com/kopai-app/kopai-mono/tree/main/packages/ui-core#readme",
+  "bugs": {
+    "url": "https://github.com/kopai-app/kopai-mono/issues"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "lint": "eslint src",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@kopai/core": "workspace:*",
+    "@kopai/sdk": "workspace:*",
+    "@tanstack/react-query": "^5",
+    "zod": "^4.3.6"
+  },
+  "peerDependencies": {
+    "react": "^19.2.5"
+  },
+  "devDependencies": {
+    "@kopai/tsconfig": "workspace:*",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.1.0",
+    "jsdom": "^29.0.2",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "tsdown": "^0.21.7"
+  }
+}