@kopai/ui 0.2.0 → 0.4.0

package/README.md

@@ -1,5 +1,7 @@
 # @kopai/ui
 
+[![npm](https://img.shields.io/npm/v/@kopai/ui?label=latest)](https://www.npmjs.com/package/@kopai/ui)
+
 React component library for rendering LLM-generated UI trees. Define typed component catalogs, create renderers, and generate prompt instructions for AI models.
 
 ## Exports

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopai/ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "license": "Apache-2.0",
   "author": "Vladimir Adamic",
   "repository": {
@@ -31,31 +31,31 @@
   "dependencies": {
     "@tanstack/react-query": "^5",
     "@tanstack/react-virtual": "^3.11.2",
-    "recharts": "^2.15.4",
-    "@kopai/core": "0.5.0",
-    "@kopai/sdk": "0.2.3"
+    "recharts": "^3.7.0",
+    "@kopai/core": "0.6.0",
+    "@kopai/sdk": "0.3.1"
   },
   "peerDependencies": {
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
+    "@storybook/addon-docs": "^10.2.8",
+    "@storybook/react": "^10.2.8",
+    "@storybook/react-vite": "^10.2.8",
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.2.10",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.1.0",
-    "@vitejs/plugin-react": "^4.5.2",
-    "autoprefixer": "^10.4.20",
-    "jsdom": "^26.1.0",
+    "@vitejs/plugin-react": "^5.1.4",
+    "@tailwindcss/postcss": "^4.1.18",
+    "jsdom": "^28.0.0",
     "postcss": "^8.5.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "storybook": "^8.6.14",
-    "tailwindcss": "^3.4.17",
+    "storybook": "^10.2.8",
+    "tailwindcss": "^4.1.18",
     "tsdown": "^0.20.3",
-    "vite": "^6.3.5",
+    "vite": "^7.3.1",
     "@kopai/tsconfig": "0.2.0"
   },
   "scripts": {

package/src/components/observability/MetricHistogram/index.tsx

@@ -173,8 +173,8 @@ export function MetricHistogram({
             tick={
               labelStyle === "staggered"
                 ? (props: {
-                    x?: number;
-                    y?: number;
+                    x?: string | number;
+                    y?: string | number;
                     payload?: { value: string; index: number };
                   }) => {
                     if (!props.payload) return <g />;

package/src/components/observability/__fixtures__/metrics.ts

@@ -72,7 +72,7 @@ function sumPoint(
     StartTimeUnix: ts(0),
     Value: value,
     IsMonotonic: 1,
-    AggTemporality: "CUMULATIVE",
+    AggregationTemporality: "CUMULATIVE",
     ServiceName: "api-gateway",
     Attributes: { "http.method": method },
     ResourceAttributes: {
@@ -126,7 +126,7 @@ export const mockHistogramRows: OtelMetricsRow[] = [
     Max: 1850,
     ExplicitBounds: HISTOGRAM_BOUNDS,
     BucketCounts: [120, 280, 350, 310, 180, 120, 85, 35, 15, 5],
-    AggTemporality: "CUMULATIVE",
+    AggregationTemporality: "CUMULATIVE",
     Attributes: { "http.method": "GET" },
     ResourceAttributes: {
       "service.name": "api-gateway",
@@ -150,7 +150,7 @@ export const mockHistogramRows: OtelMetricsRow[] = [
     Max: 2100,
     ExplicitBounds: HISTOGRAM_BOUNDS,
     BucketCounts: [250, 580, 720, 640, 380, 280, 190, 95, 45, 20],
-    AggTemporality: "CUMULATIVE",
+    AggregationTemporality: "CUMULATIVE",
     Attributes: { "http.method": "GET" },
     ResourceAttributes: {
       "service.name": "api-gateway",
@@ -174,7 +174,7 @@ export const mockHistogramRows: OtelMetricsRow[] = [
     Max: 1950,
     ExplicitBounds: HISTOGRAM_BOUNDS,
     BucketCounts: [380, 850, 1100, 950, 560, 420, 310, 140, 65, 25],
-    AggTemporality: "CUMULATIVE",
+    AggregationTemporality: "CUMULATIVE",
     Attributes: { "http.method": "GET" },
     ResourceAttributes: {
       "service.name": "api-gateway",

package/src/styles/globals.css

@@ -1,6 +1,51 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@source "../../";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-error: #ef4444;
+
+  --radius: 0.5rem;
+
+  --animation-shimmer: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
 
 @layer base {
   :root {
@@ -35,7 +80,6 @@
     --warning: 38 92% 60%;
     --warning-foreground: 0 0% 9%;
     --ring: 0 0% 83.1%;
-    --radius: 0.5rem;
 
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;