@vertesia/ui 0.79.0 → 0.80.0-dev-20251118

package/package.json

@@ -1,172 +1,177 @@
 {
-  "name": "@vertesia/ui",
-  "version": "0.79.0",
-  "description": "Vertesia UI components and and hooks",
-  "type": "module",
-  "main": "./lib/index.js",
-  "files": [
-    "lib",
-    "src",
-    "tsconfig.dist.json"
-  ],
-  "license": "Apache-2.0",
-  "homepage": "https://docs.vertesiahq.com",
-  "keywords": [
-    "vertesia",
-    "UI",
-    "react",
-    "components",
-    "hooks"
-  ],
-  "dependencies": {
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.36.8",
-    "@floating-ui/dom": "^1.7.1",
-    "@floating-ui/react": "^0.27.11",
-    "@headlessui/react": "^2.2.2",
-    "@monaco-editor/react": "^4.7.0",
-    "@radix-ui/react-checkbox": "^1.3.1",
-    "@radix-ui/react-dialog": "^1.1.13",
-    "@radix-ui/react-label": "^2.1.6",
-    "@radix-ui/react-popover": "^1.1.13",
-    "@radix-ui/react-separator": "^1.1.6",
-    "@radix-ui/react-slot": "^1.2.2",
-    "@radix-ui/react-tabs": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.6",
-    "ajv": "^8.16.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "codemirror": "^6.0.1",
-    "dayjs": "^1.11.13",
-    "debounce": "^2.2.0",
-    "fast-xml-parser": "^5.2.3",
-    "firebase": "^10.12.2",
-    "framer-motion": "^12.23.12",
-    "json-schema": "^0.4.0",
-    "jwt-decode": "^4.0.0",
-    "lodash-es": "^4.17.21",
-    "lucide-react": "^0.511.0",
-    "monaco-editor": "^0.52.2",
-    "motion": "^12.12.1",
-    "react": "^19.1.0",
-    "react-calendar": "^6.0.0",
-    "react-date-picker": "^11.0.0",
-    "react-dom": "^19.1.0",
-    "react-error-boundary": "^6.0.0",
-    "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^3.0.6",
-    "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.3.0",
-    "ts-md5": "^1.3.1",
-    "unist-util-visit": "^5.0.0",
-    "@vertesia/client": "0.79.0",
-    "@vertesia/json": "0.79.0",
-    "@vertesia/common": "0.79.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.27.0",
-    "@rollup/plugin-commonjs": "^28.0.3",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@types/json-schema": "^7.0.15",
-    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.15.21",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.1",
-    "eslint": "^9.27.0",
-    "eslint-import-resolver-typescript": "^4.4.4",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.40.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.38.0",
-    "vitest": "^3.0.9"
-  },
-  "exports": {
-    "./router": {
-      "types": "./lib/types/router/index.d.ts",
-      "default": "./lib/esm/router/index.js"
+    "name": "@vertesia/ui",
+    "version": "0.80.0-dev-20251118",
+    "description": "Vertesia UI components and and hooks",
+    "type": "module",
+    "main": "./lib/index.js",
+    "files": [
+        "lib",
+        "src",
+        "tsconfig.dist.json"
+    ],
+    "license": "Apache-2.0",
+    "homepage": "https://docs.vertesiahq.com",
+    "keywords": [
+        "vertesia",
+        "UI",
+        "react",
+        "components",
+        "hooks"
+    ],
+    "scripts": {
+        "build": "pnpm lint && pnpm exec rimraf ./lib && tsc -b && pnpm exec rollup -c",
+        "lint": "eslint \"src/**/*.{ts,tsx}\"",
+        "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix"
     },
-    "./env": {
-      "types": "./lib/types/env/index.d.ts",
-      "default": "./lib/esm/env/index.js"
+    "dependencies": {
+        "@codemirror/lang-json": "^6.0.1",
+        "@codemirror/state": "^6.5.2",
+        "@codemirror/view": "^6.36.8",
+        "@floating-ui/dom": "^1.7.1",
+        "@floating-ui/react": "^0.27.11",
+        "@headlessui/react": "^2.2.2",
+        "@monaco-editor/react": "^4.7.0",
+        "@radix-ui/react-checkbox": "^1.3.1",
+        "@radix-ui/react-dialog": "^1.1.13",
+        "@radix-ui/react-label": "^2.1.6",
+        "@radix-ui/react-popover": "^1.1.13",
+        "@radix-ui/react-separator": "^1.1.6",
+        "@radix-ui/react-slot": "^1.2.2",
+        "@radix-ui/react-tabs": "^1.1.11",
+        "@radix-ui/react-tooltip": "^1.2.6",
+        "@vertesia/client": "workspace:*",
+        "@vertesia/common": "workspace:*",
+        "@vertesia/json": "workspace:*",
+        "ajv": "^8.16.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
+        "codemirror": "^6.0.1",
+        "dayjs": "^1.11.13",
+        "debounce": "^2.2.0",
+        "fast-xml-parser": "^5.2.3",
+        "firebase": "^10.12.2",
+        "framer-motion": "^12.23.12",
+        "json-schema": "^0.4.0",
+        "jwt-decode": "^4.0.0",
+        "lodash-es": "^4.17.21",
+        "lucide-react": "^0.511.0",
+        "monaco-editor": "^0.52.2",
+        "motion": "^12.12.1",
+        "react": "^19.1.0",
+        "react-calendar": "^6.0.0",
+        "react-date-picker": "^11.0.0",
+        "react-dom": "^19.1.0",
+        "react-error-boundary": "^6.0.0",
+        "react-markdown": "^10.1.0",
+        "react-resizable-panels": "^3.0.6",
+        "remark-gfm": "^4.0.1",
+        "tailwind-merge": "^3.3.0",
+        "ts-md5": "^1.3.1",
+        "unist-util-visit": "^5.0.0"
     },
-    "./session": {
-      "types": "./lib/types/session/index.d.ts",
-      "default": "./lib/esm/session/index.js"
+    "devDependencies": {
+        "@eslint/js": "^9.27.0",
+        "@rollup/plugin-commonjs": "^28.0.3",
+        "@rollup/plugin-json": "^6.1.0",
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@types/json-schema": "^7.0.15",
+        "@types/lodash-es": "^4.17.12",
+        "@types/node": "^22.15.21",
+        "@types/react": "^19.1.0",
+        "@types/react-dom": "^19.1.1",
+        "eslint": "^9.27.0",
+        "eslint-import-resolver-typescript": "^4.4.4",
+        "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "rimraf": "^6.0.1",
+        "rollup": "^4.40.2",
+        "rollup-plugin-terser": "^7.0.2",
+        "typescript": "~5.8.3",
+        "typescript-eslint": "^8.38.0",
+        "vitest": "^3.0.9"
     },
-    "./core": {
-      "types": "./lib/types/core/index.d.ts",
-      "default": "./lib/esm/core/index.js"
+    "exports": {
+        "./router": {
+            "types": "./lib/types/router/index.d.ts",
+            "default": "./lib/esm/router/index.js"
+        },
+        "./env": {
+            "types": "./lib/types/env/index.d.ts",
+            "default": "./lib/esm/env/index.js"
+        },
+        "./session": {
+            "types": "./lib/types/session/index.d.ts",
+            "default": "./lib/esm/session/index.js"
+        },
+        "./core": {
+            "types": "./lib/types/core/index.d.ts",
+            "default": "./lib/esm/core/index.js"
+        },
+        "./widgets": {
+            "types": "./lib/types/widgets/index.d.ts",
+            "default": "./lib/esm/widgets/index.js"
+        },
+        "./code": {
+            "types": "./lib/types/code/index.d.ts",
+            "default": "./lib/esm/code/index.js"
+        },
+        "./form": {
+            "types": "./lib/types/form/index.d.ts",
+            "default": "./lib/esm/form/index.js"
+        },
+        "./layout": {
+            "types": "./lib/types/layout/index.d.ts",
+            "default": "./lib/esm/layout/index.js"
+        },
+        "./features": {
+            "types": "./lib/types/features/index.d.ts",
+            "default": "./lib/esm/features/index.js"
+        },
+        "./shell": {
+            "types": "./lib/types/shell/index.d.ts",
+            "default": "./lib/esm/shell/index.js"
+        }
     },
-    "./widgets": {
-      "types": "./lib/types/widgets/index.d.ts",
-      "default": "./lib/esm/widgets/index.js"
+    "types": "./lib/index.d.ts",
+    "typesVersions": {
+        "*": {
+            "router": [
+                "./lib/types/router/index.d.ts"
+            ],
+            "env": [
+                "./lib/types/env/index.d.ts"
+            ],
+            "session": [
+                "./lib/types/session/index.d.ts"
+            ],
+            "core": [
+                "./lib/types/core/index.d.ts"
+            ],
+            "widgets": [
+                "./lib/types/widgets/index.d.ts"
+            ],
+            "code": [
+                "./lib/types/code/index.d.ts"
+            ],
+            "features": [
+                "./lib/types/features/index.d.ts"
+            ],
+            "layout": [
+                "./lib/types/layout/index.d.ts"
+            ],
+            "form": [
+                "./lib/types/form/index.d.ts"
+            ],
+            "shell": [
+                "./lib/types/shell/index.d.ts"
+            ]
+        }
     },
-    "./code": {
-      "types": "./lib/types/code/index.d.ts",
-      "default": "./lib/esm/code/index.js"
-    },
-    "./form": {
-      "types": "./lib/types/form/index.d.ts",
-      "default": "./lib/esm/form/index.js"
-    },
-    "./layout": {
-      "types": "./lib/types/layout/index.d.ts",
-      "default": "./lib/esm/layout/index.js"
-    },
-    "./features": {
-      "types": "./lib/types/features/index.d.ts",
-      "default": "./lib/esm/features/index.js"
-    },
-    "./shell": {
-      "types": "./lib/types/shell/index.d.ts",
-      "default": "./lib/esm/shell/index.js"
-    }
-  },
-  "types": "./lib/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "router": [
-        "./lib/types/router/index.d.ts"
-      ],
-      "env": [
-        "./lib/types/env/index.d.ts"
-      ],
-      "session": [
-        "./lib/types/session/index.d.ts"
-      ],
-      "core": [
-        "./lib/types/core/index.d.ts"
-      ],
-      "widgets": [
-        "./lib/types/widgets/index.d.ts"
-      ],
-      "code": [
-        "./lib/types/code/index.d.ts"
-      ],
-      "features": [
-        "./lib/types/features/index.d.ts"
-      ],
-      "layout": [
-        "./lib/types/layout/index.d.ts"
-      ],
-      "form": [
-        "./lib/types/form/index.d.ts"
-      ],
-      "shell": [
-        "./lib/types/shell/index.d.ts"
-      ]
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/vertesia/composableai.git",
+        "directory": "packages/ui"
     }
-  },
-  "scripts": {
-    "build": "pnpm lint && pnpm exec rimraf ./lib && tsc -b && pnpm exec rollup -c",
-    "lint": "eslint \"src/**/*.{ts,tsx}\"",
-    "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix"
-  }
-}
+}

package/src/core/components/Panel.tsx

@@ -0,0 +1,34 @@
+import { VTooltip } from "./shadcn/tooltip"
+import { Info } from "lucide-react"
+
+interface PanelProps {
+    title: string | React.ReactNode
+    description?: React.ReactNode
+    action?: React.ReactNode
+    children: React.ReactNode
+    footer?: string | React.ReactNode
+    className?: string
+}
+
+export function Panel({ children, action, title, description, footer, className }: PanelProps) {
+
+    return (
+        <div className={`p-4 flex flex-col gap-2 rounded-sm border bg-card ${className}`}>
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                    <div className="font-semibold text-lg">
+                        {title}
+                    </div>
+                    {description && <VTooltip description={description}><Info className="size-4 text-muted" /></VTooltip>}
+                </div>
+                {action}
+            </div>
+
+            {children}
+            {footer &&
+                <div className="border-t border-muted flex flex-col-2 text-sm pt-4">
+                    {footer}
+                </div>}
+        </div>
+    )
+}

package/src/core/components/SelectBox.tsx

@@ -90,7 +90,7 @@ export function SelectBox<T>({ clearTitle, ClearIcon = X, showFilter, filterBy,
         }
     }
     return (
-        <Listbox value={value || null} onChange={onChange} by={by} disabled={disabled}>
+        <Listbox value={value ?? undefined} onChange={onChange} by={by} disabled={disabled}>
             {() => (
                 <div className={'overflow-y-visible ' + className}>
                     <div className="relative">

package/src/core/components/SidePanel.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { X } from 'lucide-react';
+import { Minus, X } from 'lucide-react';
 import { Button } from './shadcn/button';
 
 interface SidePanelProps {
@@ -68,9 +68,11 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                                     <div className="relative flex h-full">
                                         {/* Drag Handle */}
                                         <div
-                                            className="absolute left-0 top-0 bottom-0 w-1 cursor-ew-resize hover:bg-indigo-500 transition-colors"
+                                            className="absolute -left-1 top-0 bottom-0 w-3 cursor-ew-resize hover:bg-indigo-500 transition-colors flex items-center justify-center"
                                             onMouseDown={handleDragStart}
-                                        />
+                                        >
+                                            <Minus className="rotate-90 font-semibold" strokeWidth={4} />
+                                        </div>
                                         <div className="flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-2 shadow-xl">
                                             {title && (
                                                 <div className="px-2 sm:px-4">