@vertesia/ui 0.79.0 → 0.79.1

package/package.json

@@ -1,172 +1,172 @@
 {
-  "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.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/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">

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)

package/src/core/components/shadcn/filters/filterBar.tsx

@@ -71,8 +71,8 @@ const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterP
         params.delete('filters');
       }
 
-      const newUrl = `${window.location.pathname}?${params.toString()}`;
-      window.history.replaceState({}, '', newUrl);
+      const newUrl = `${window.location.pathname}?${params.toString()}${window.location.hash}`;
+      window.history.replaceState(window.history.state || {}, '', newUrl);
     } catch (error) {
       console.error("Failed to update URL with filters:", error);
     }
@@ -350,7 +350,7 @@ const FilterBar = ({ className }: { className?: string }) => {
   );
 };
 
-const FilterClear = ({ className }: { className?: string }) => {
+const FilterClear = ({ className }: { className?: string}) => {
   const { filters, setFilters } = React.useContext(FilterContext);
 
   const hasActiveFilters = filters.filter((filter) => filter.value?.length > 0).length > 0;

package/src/core/components/shadcn/index.ts

@@ -20,4 +20,5 @@ export * from './command';
 export * from './checkbox';
 export * from './heading';
 export * from './text';
-export * from './resizeable';
+export * from './resizeable';
+export * from './textarea';

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

@@ -4,6 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../libs/utils"
 import { X } from "lucide-react";
 import { ChangeEvent } from "react";
+import { Button } from "@vertesia/ui/core";
 
 const variants = cva(
   "",
@@ -53,14 +54,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     };
 
     return (
-      <div className="w-full" style={{ position: 'relative', display: 'inline-block' }}>
+      <div className="w-full relative inline-block [&:hover_.clear-button]:opacity-100">
         <input
           type={type}
           className={
             cn(
               variants({ size, variant }),
               className,
-              clearable && value ? "pr-6" : "",
+              clearable && value ? "pr-8" : "",
             )}
           ref={ref}
           value={value == null ? '' : value}
@@ -68,14 +69,16 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           {...props}
         />
         {clearable && value && !props.readOnly && !props.disabled && (
-          <button
-            onClick={_onClear}
-            className={`absolute ${type !== 'number' ? 'right-0' : 'right-7'} top-1/2 -translate-y-1/2 size-7 text-muted-foreground hover:text-destructive cursor-pointer flex items-center justify-center`}
+          <Button variant={"link"} size={"icon"}
             type="button"
-            aria-label="Clear input"
+            onClick={_onClear}
+            className={`clear-button opacity-0 transition-opacity duration-200
+              absolute top-1/2 -translate-y-1/2 text-muted !hover:text-destructive cursor-pointer
+              flex items-center justify-center size-6 rounded right-2`}
+            alt="Clear input"
           >
             <X size={16} />
-          </button>
+          </Button>
         )}
       </div>
     )