kopai-app · Vunovati · May 7, 2026 · Apr 20, 2026 · May 7, 2026
diff --git a/.changeset/ui-core-dedup.md b/.changeset/ui-core-dedup.md
@@ -0,0 +1,6 @@
+---
+"@kopai/ui": minor
+"@kopai/ui-core": minor
+---
+
+Internal restructure — `@kopai/ui` now re-exports DOM-free symbols from `@kopai/ui-core` instead of shipping its own copies. Public API unchanged (additive only — new symbols exposed, no removals). New code should prefer importing non-DOM symbols from `@kopai/ui-core` directly. `@kopai/ui-core` patch: add `CatalogueComponentProps` to the public barrel so `@kopai/ui`'s dashboard primitives can use it.
diff --git a/packages/ui-core/src/index.ts b/packages/ui-core/src/index.ts
@@ -12,6 +12,7 @@ export {
 } from "./lib/renderer.js";
 export {
   createCatalog,
+  type CatalogueComponentProps,
   type ComponentDefinition,
   type DataSource,
   type InferProps,

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -39,6 +39,7 @@
   "dependencies": {
     "@kopai/core": "workspace:*",
     "@kopai/sdk": "workspace:*",
+    "@kopai/ui-core": "workspace:*",
     "@tanstack/react-query": "^5",
     "@tanstack/react-virtual": "^3.13.24",
     "recharts": "^3.8.1"

diff --git a/packages/ui/src/components/dashboard/Badge/index.tsx b/packages/ui/src/components/dashboard/Badge/index.tsx
@@ -1,5 +1,5 @@
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
-import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+import { observabilityCatalog } from "@kopai/ui-core";
+import type { CatalogueComponentProps } from "@kopai/ui-core";
 
 export function Badge({
   element,

diff --git a/packages/ui/src/components/dashboard/Card/index.tsx b/packages/ui/src/components/dashboard/Card/index.tsx
@@ -1,5 +1,5 @@
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
-import type { RendererComponentProps } from "../../../lib/renderer.js";
+import { observabilityCatalog } from "@kopai/ui-core";
+import type { RendererComponentProps } from "@kopai/ui-core";
 
 export function Card({
   element,

diff --git a/packages/ui/src/components/dashboard/Divider/index.tsx b/packages/ui/src/components/dashboard/Divider/index.tsx
@@ -1,5 +1,5 @@
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
-import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+import { observabilityCatalog } from "@kopai/ui-core";
+import type { CatalogueComponentProps } from "@kopai/ui-core";
 
 export function Divider({
   element,

diff --git a/packages/ui/src/components/dashboard/Empty/index.tsx b/packages/ui/src/components/dashboard/Empty/index.tsx
@@ -1,5 +1,5 @@
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
-import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+import { observabilityCatalog } from "@kopai/ui-core";
+import type { CatalogueComponentProps } from "@kopai/ui-core";
 
 export function Empty({
   element,

diff --git a/packages/ui/src/components/dashboard/Grid/index.tsx b/packages/ui/src/components/dashboard/Grid/index.tsx
@@ -1,5 +1,5 @@
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
-import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+import { observabilityCatalog } from "@kopai/ui-core";
+import type { CatalogueComponentProps } from "@kopai/ui-core";
 
 export function Grid({
   element,

diff --git a/packages/ui/src/components/dashboard/Heading/index.tsx b/packages/ui/src/components/dashboard/Heading/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
-import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+import { observabilityCatalog } from "@kopai/ui-core";
+import type { CatalogueComponentProps } from "@kopai/ui-core";
 
 export function Heading({
   element,

diff --git a/packages/ui/src/components/dashboard/Stack/index.tsx b/packages/ui/src/components/dashboard/Stack/index.tsx
@@ -1,5 +1,5 @@
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
-import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+import { observabilityCatalog } from "@kopai/ui-core";
+import type { CatalogueComponentProps } from "@kopai/ui-core";
 
 export function Stack({
   element,

diff --git a/packages/ui/src/components/dashboard/Text/index.tsx b/packages/ui/src/components/dashboard/Text/index.tsx
@@ -1,5 +1,5 @@
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
-import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+import { observabilityCatalog } from "@kopai/ui-core";
+import type { CatalogueComponentProps } from "@kopai/ui-core";
 
 export function Text({
   element,

diff --git a/packages/ui/src/components/observability/DynamicDashboard/DynamicDashboard.test.tsx b/packages/ui/src/components/observability/DynamicDashboard/DynamicDashboard.test.tsx
@@ -5,7 +5,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createElement } from "react";
 import { render, waitFor, fireEvent } from "@testing-library/react";
 import { DynamicDashboard, type UITree } from "./index.js";
-import { queryClient } from "../../../providers/kopai-provider.js";
+import { queryClient } from "@kopai/ui-core";
 import type { KopaiClient } from "@kopai/sdk";
 
 type MockClient = {

diff --git a/packages/ui/src/components/observability/DynamicDashboard/index.tsx b/packages/ui/src/components/observability/DynamicDashboard/index.tsx
@@ -1,12 +1,10 @@
 import {
   createRendererFromCatalog,
   type UITree,
-} from "../../../lib/renderer.js";
-import {
   KopaiSDKProvider,
   type KopaiClient,
-} from "../../../providers/kopai-provider.js";
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
+  observabilityCatalog,
+} from "@kopai/ui-core";
 import {
   Heading,
   Text,

diff --git a/packages/ui/src/components/observability/TraceComparison/index.tsx b/packages/ui/src/components/observability/TraceComparison/index.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import type { denormalizedSignals } from "@kopai/core";
-import type { DataSource } from "../../../lib/component-catalog.js";
-import { useKopaiData } from "../../../hooks/use-kopai-data.js";
+import type { DataSource } from "@kopai/ui-core";
+import { useKopaiData } from "@kopai/ui-core";
 import { TraceTimeline } from "../TraceTimeline/index.js";
 import { formatDuration } from "../utils/time.js";
 

diff --git a/packages/ui/src/components/observability/renderers/OtelLogTimeline.tsx b/packages/ui/src/components/observability/renderers/OtelLogTimeline.tsx
@@ -1,5 +1,5 @@
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
-import type { RendererComponentProps } from "../../../lib/renderer.js";
+import { observabilityCatalog } from "@kopai/ui-core";
+import type { RendererComponentProps } from "@kopai/ui-core";
 import { LogTimeline } from "../index.js";
 import { NoDataSource } from "./NoDataSource.js";
 

diff --git a/packages/ui/src/components/observability/renderers/OtelMetricDiscovery.tsx b/packages/ui/src/components/observability/renderers/OtelMetricDiscovery.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
-import type { RendererComponentProps } from "../../../lib/renderer.js";
+import { observabilityCatalog } from "@kopai/ui-core";
+import type { RendererComponentProps } from "@kopai/ui-core";
 
 type Props = RendererComponentProps<
   typeof observabilityCatalog.components.MetricDiscovery

diff --git a/packages/ui/src/components/observability/renderers/OtelMetricHistogram.tsx b/packages/ui/src/components/observability/renderers/OtelMetricHistogram.tsx
@@ -1,5 +1,5 @@
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
-import type { RendererComponentProps } from "../../../lib/renderer.js";
+import { observabilityCatalog } from "@kopai/ui-core";
+import type { RendererComponentProps } from "@kopai/ui-core";
 import { MetricHistogram } from "../index.js";
 import { NoDataSource } from "./NoDataSource.js";
 

diff --git a/packages/ui/src/components/observability/renderers/OtelMetricStat.tsx b/packages/ui/src/components/observability/renderers/OtelMetricStat.tsx
@@ -1,5 +1,5 @@
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
-import type { RendererComponentProps } from "../../../lib/renderer.js";
+import { observabilityCatalog } from "@kopai/ui-core";
+import type { RendererComponentProps } from "@kopai/ui-core";
 import { MetricStat } from "../index.js";
 import { formatOtelValue } from "../utils/units.js";
 import { NoDataSource } from "./NoDataSource.js";

diff --git a/packages/ui/src/components/observability/renderers/OtelMetricTable.tsx b/packages/ui/src/components/observability/renderers/OtelMetricTable.tsx
@@ -1,5 +1,5 @@
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
-import type { RendererComponentProps } from "../../../lib/renderer.js";
+import { observabilityCatalog } from "@kopai/ui-core";
+import type { RendererComponentProps } from "@kopai/ui-core";
 import { MetricTable } from "../index.js";
 import { NoDataSource } from "./NoDataSource.js";
 

diff --git a/packages/ui/src/components/observability/renderers/OtelMetricTimeSeries.tsx b/packages/ui/src/components/observability/renderers/OtelMetricTimeSeries.tsx
@@ -1,5 +1,7 @@
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
-import type { RendererComponentProps } from "../../../lib/renderer.js";
+import {
+  observabilityCatalog,
+  type RendererComponentProps,
+} from "@kopai/ui-core";
 import { MetricTimeSeries } from "../index.js";
 import { NoDataSource } from "./NoDataSource.js";
 

diff --git a/packages/ui/src/components/observability/renderers/OtelTraceDetail.tsx b/packages/ui/src/components/observability/renderers/OtelTraceDetail.tsx
@@ -1,11 +1,13 @@
 import { useState, useMemo, useCallback } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { observabilityCatalog } from "../../../lib/observability-catalog.js";
-import type { RendererComponentProps } from "../../../lib/renderer.js";
+import {
+  observabilityCatalog,
+  type RendererComponentProps,
+  useKopaiSDK,
+} from "@kopai/ui-core";
 import { TraceDetail } from "../index.js";
 import { TraceSearch } from "../TraceSearch/index.js";
 import type { TraceSummary } from "../TraceSearch/index.js";
-import { useKopaiSDK } from "../../../providers/kopai-provider.js";
 import { NoDataSource } from "./NoDataSource.js";
 import type { dataFilterSchemas } from "@kopai/core";
 import type { OtelTracesRow, SearchResult } from "@kopai/sdk";