@vertesia/ui 0.78.0 → 0.79.1

package/package.json

@@ -1,171 +1,172 @@
 {
-  "name": "@vertesia/ui",
-  "version": "0.78.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",
-    "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.3.0",
-    "ts-md5": "^1.3.1",
-    "unist-util-visit": "^5.0.0",
-    "@vertesia/client": "0.78.0",
-    "@vertesia/common": "0.78.0",
-    "@vertesia/json": "0.78.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.79.1",
+    "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"
-    },
-    "./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"
-      ]
+    "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"
+            ]
+        }
     }
-  },
-  "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/SelectList.tsx

@@ -1,6 +1,7 @@
 import { Check } from "lucide-react";
 import clsx from "clsx";
 import { ReactNode, useMemo, useState } from "react";
+import { Input } from "./shadcn";
 
 const Default_Option_Style = "flex-1 px-2 py-2 hover:bg-accent nowrap";
 
@@ -28,9 +29,12 @@ export interface SelectListProps<T> {
     by?: (keyof T & string) | ((o1: T, o2: T) => boolean);
     optionLayout?: (opt: T, selected: boolean) => OptionLayout;
     noCheck?: boolean;
+    filterBy?: (filterValue: string) => (opt: T) => boolean;
 }
-export function SelectList<T>({ value, options, onChange, className, optionLayout, by, noCheck }: SelectListProps<T>) {
+export function SelectList<T>({ value, options, onChange, className, optionLayout, by, noCheck, filterBy }: SelectListProps<T>) {
     const [selected, setSelected] = useState(value);
+    const [filterValue, setFilterValue] = useState("");
+
     const onSelect = (option: T) => {
         setSelected(option);
         onChange(option);
@@ -46,7 +50,13 @@ export function SelectList<T>({ value, options, onChange, className, optionLayou
     }, [by]);
     return (
         <div className={clsx("", className)}>
+            {filterBy && (
+                <Input type="text" placeholder="Filter..." value={filterValue} onChange={(value) => setFilterValue(value)} />
+            )}
             {options.map((option, i) => {
+                if (filterBy && !filterBy(filterValue)(option)) {
+                    return null;
+                }
                 const isSelected = selected ? optionEquals(selected, option) : false;
                 let layout: OptionLayout;
                 if (optionLayout) {

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 {
@@ -53,7 +53,7 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                             onClick={onClose}
                         />
                     )}
-                    
+
                     <div className="fixed inset-y-0 right-0 overflow-hidden">
                         <div className="absolute inset-0 overflow-hidden">
                             <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
@@ -68,20 +68,25 @@ 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}
-                                        />
-                                        <div className="flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-6 shadow-xl">
-                                            <div className="px-2 sm:px-4">
-                                                <div className="flex items-start justify-between">
-                                                    <h2 className="w-full text-base font-semibold leading-6">
-                                                        <div className="text-2xl">{title ?? ""}</div>
-                                                    </h2>
-                                                    <div className="ml-3 flex h-7 items-center">
-                                                        <CloseButton onClose={onClose} />
+                                        >
+                                            <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">
+                                                    <div className="flex items-start justify-between">
+                                                        <h2 className="w-full text-base font-semibold leading-6">
+                                                            <div className="text-2xl">{title ?? ""}</div>
+                                                        </h2>
+                                                        <div className="ml-3 flex h-7 items-center">
+                                                            <CloseButton onClose={onClose} />
+                                                        </div>
                                                     </div>
                                                 </div>
-                                            </div>
+                                            )}
+
                                             <div className="px-2 sm:px-4">
                                                 {children}
                                             </div>

package/src/core/components/index.ts

@@ -26,12 +26,12 @@ export * from "./SelectList.js";
 export * from "./SelectStack.js";
 export * from "./shadcn/index.js";
 export * from "./SidePanel.js";
+export * from "./Panel.js";
 export * from "./Spinner.js";
 export * from "./styles.js";
 export * from "./Switch.js";
 export * from "./table/index.js";
 export * from "./tabs/index.js";
-export * from "./Textarea.js";
 export * from "./toast/index.js";
 
 export type HeroIcon = React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {

package/src/core/components/shadcn/breadcrumb.tsx

@@ -6,28 +6,37 @@ import { cn } from "../libs/utils"
 interface BreadcrumbProps {
   label: string
   href?: string
+  onClick?: () => void
 }
 interface BreadcrumbItemProps {
-  children: BreadcrumbProps[]
+  path: BreadcrumbProps[]
   className?: string
   maxItems?: number
   separator?: React.ReactNode
 }
-export function Breadcrumbs({ children, maxItems = 3, className, separator }: BreadcrumbItemProps) {
-  if (children.length <= maxItems) {
+export function Breadcrumbs({ path, maxItems = 3, className, separator }: BreadcrumbItemProps) {
+  const items = path || [];
+
+  const renderBreadcrumbItem = (item: BreadcrumbProps) => {
+    if (item.onClick) {
+      return <BreadcrumbButton onClick={item.onClick} href={item.href}>{item.label}</BreadcrumbButton>;
+    } else if (item.href) {
+      return <BreadcrumbButton href={item.href}>{item.label}</BreadcrumbButton>;
+    } else {
+      return <BreadcrumbPage>{item.label}</BreadcrumbPage>;
+    }
+  };
+
+  if (items.length <= maxItems) {
     return (
       <Breadcrumb className={cn("w-full", className)}>
         <BreadcrumbList>
-          {children.map((item, index) => (
+          {items.map((item, index) => (
             <React.Fragment key={index}>
               <BreadcrumbItem>
-                {item.href ? (
-                  <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
-                ) : (
-                  <BreadcrumbPage>{item.label}</BreadcrumbPage>
-                )}
+                {renderBreadcrumbItem(item)}
               </BreadcrumbItem>
-              {index < children.length - 1 &&
+              {index < items.length - 1 &&
                 <BreadcrumbSeparator>{separator ?? <ChevronRight />}</BreadcrumbSeparator>
               }
             </React.Fragment>
@@ -37,36 +46,22 @@ export function Breadcrumbs({ children, maxItems = 3, className, separator }: Br
     );
   }
 
-  const firstItem = children[0];
-  const lastItems = children.slice(-(maxItems - 2));
+  const lastThreeItems = items.slice(-(maxItems - 1));
 
   return (
     <Breadcrumb className={cn("w-full", className)}>
       <BreadcrumbList>
-        <BreadcrumbItem>
-          {firstItem.href ? (
-            <BreadcrumbLink href={firstItem.href}>{firstItem.label}</BreadcrumbLink>
-          ) : (
-            <BreadcrumbPage>{firstItem.label}</BreadcrumbPage>
-          )}
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>{separator ?? <ChevronRight />}</BreadcrumbSeparator>
-
         <BreadcrumbItem>
           <BreadcrumbEllipsis />
         </BreadcrumbItem>
         <BreadcrumbSeparator>{separator ?? <ChevronRight />}</BreadcrumbSeparator>
 
-        {lastItems.map((item, index) => (
+        {lastThreeItems.map((item, index) => (
           <React.Fragment key={index}>
             <BreadcrumbItem>
-              {item.href ? (
-                <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
-              ) : (
-                <BreadcrumbPage>{item.label}</BreadcrumbPage>
-              )}
+              {renderBreadcrumbItem(item)}
             </BreadcrumbItem>
-            {index < lastItems.length - 1 && <BreadcrumbSeparator>{separator ?? <ChevronRight />}</BreadcrumbSeparator>
+            {index < lastThreeItems.length - 1 && <BreadcrumbSeparator>{separator ?? <ChevronRight />}</BreadcrumbSeparator>
             }
           </React.Fragment>
         ))}
@@ -104,7 +99,7 @@ const BreadcrumbItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <li
     ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
+    className={cn("inline-flex items-center gap-1.5 text-muted", className)}
     {...props}
   />
 ))
@@ -119,13 +114,37 @@ const BreadcrumbLink = React.forwardRef<
   return (
     <a
       ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
+      className={cn("transition-colors hover:text-muted", className)}
       {...props}
     />
   )
 })
 BreadcrumbLink.displayName = "BreadcrumbLink"
 
+const BreadcrumbButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<"button"> & {
+    href?: string
+  }
+>(({ className, href, onClick, ...props }, ref) => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  return (
+    <button
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground cursor-pointer", className)}
+      onClick={handleClick}
+      {...props}
+    />
+  );
+})
+BreadcrumbButton.displayName = "BreadcrumbButton"
+
 const BreadcrumbPage = React.forwardRef<
   HTMLSpanElement,
   React.ComponentPropsWithoutRef<"span">

package/src/core/components/shadcn/button.tsx

@@ -20,7 +20,7 @@ const buttonVariants = cva(
         secondary:
           "bg-primary/5 dark:bg-primary/10 text-primary shadow-xs hover:bg-primary/10 dark:hover:bg-primary/20 ring-inset",
         ghost: "hover:bg-muted/50 dark:hover:bg-muted/20 ring-inset",
-        link: "text-white underline-offset-4 hover:underline ring-inset",
+        link: "text-foreground underline-offset-4 hover:underline ring-inset",
         primary:
           "bg-primary text-white shadow-xs hover:bg-primary/90 ring-inset",
         unstyled:
@@ -108,7 +108,8 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
 
     const [isCopied, setIsCopied] = useState(false);
 
-    const handleCopy = () => {
+    const handleCopy = (e: React.MouseEvent) => {
+      e.stopPropagation();
       navigator.clipboard.writeText(content).then(() => {
         setIsCopied(true)
         setTimeout(() => setIsCopied(false), 2000)