@vertesia/ui 1.0.0-dev.20260305.083323Z → 1.0.0-dev.20260331.091034Z

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.0.0-dev.20260305.083323Z",
+  "version": "1.0.0-dev.20260331.091034Z",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -22,35 +22,36 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.1",
     "@floating-ui/react": "^0.27.11",
-    "@headlessui/react": "^2.2.9",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-checkbox": "^1.3.1",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.13",
+    "@radix-ui/react-dismissable-layer": "^1.1.11",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-focus-guards": "^1.1.3",
+    "@radix-ui/react-focus-scope": "^1.1.7",
     "@radix-ui/react-label": "^2.1.6",
     "@radix-ui/react-popover": "^1.1.13",
+    "@radix-ui/react-portal": "^1.1.9",
     "@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",
-    "@radix-ui/react-dismissable-layer": "^1.1.11",
-    "@radix-ui/react-focus-guards": "^1.1.3",
-    "@radix-ui/react-focus-scope": "^1.1.7",
-    "@radix-ui/react-portal": "^1.1.9",
-    "aria-hidden": "^1.2.6",
-    "react-remove-scroll": "^2.7.1",
-    "react-remove-scroll-bar": "^2.3.8",
-    "react-style-singleton": "^2.2.3",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-switch": "^1.2.6",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
+    "aria-hidden": "^1.2.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "dayjs": "^1.11.19",
     "debounce": "^2.2.0",
-    "dompurify": "^3.3.1",
-    "fast-xml-parser": "^5.3.6",
+    "dompurify": "^3.3.2",
+    "fast-xml-parser": "^5.5.7",
     "firebase": "^10.12.2",
     "framer-motion": "^12.23.12",
+    "i18next": "^25.8.14",
     "jwt-decode": "^4.0.0",
     "katex": "^0.16.28",
     "lodash-es": "^4.17.23",
@@ -64,9 +65,13 @@
     "react-date-picker": "^12.0.1",
     "react-dom": "^19.2.3",
     "react-error-boundary": "^6.0.0",
+    "react-i18next": "^16.5.5",
     "react-markdown": "^10.1.0",
     "react-pdf": "^10.2.0",
+    "react-remove-scroll": "^2.7.1",
+    "react-remove-scroll-bar": "^2.3.8",
     "react-resizable-panels": "^3.0.6",
+    "react-style-singleton": "^2.2.3",
     "react-vega": "^8.0.0",
     "rehype-katex": "^7.0.1",
     "remark-definition-list": "^2.0.0",
@@ -81,32 +86,34 @@
     "vega": "^6.2.0",
     "vega-embed": "^7.1.0",
     "vega-lite": "^6.4.1",
-    "@vertesia/client": "1.0.0-dev.20260305.083323Z",
-    "@vertesia/common": "1.0.0-dev.20260305.083323Z",
-    "@vertesia/fusion-ux": "1.0.0-dev.20260305.083323Z",
-    "@vertesia/json": "1.0.0-dev.20260305.083323Z"
+    "@vertesia/client": "1.0.0-dev.20260331.091034Z",
+    "@vertesia/common": "1.0.0-dev.20260331.091034Z",
+    "@vertesia/fusion-ux": "1.0.0-dev.20260331.091034Z",
+    "@vertesia/json": "1.0.0-dev.20260331.091034Z"
   },
   "devDependencies": {
-    "@eslint/js": "^9.27.0",
+    "@eslint/compat": "^2.0.2",
+    "@eslint/js": "^10.0.1",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
     "@types/hast": "^3.0.4",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.19.2",
     "@types/papaparse": "^5.5.2",
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
-    "eslint": "^9.27.0",
+    "eslint": "^10.0.2",
     "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",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "i18next-parser": "^9.4.0",
     "rimraf": "^6.1.2",
     "rollup": "^4.59.0",
-    "@rollup/plugin-terser": "^0.4.4",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0",
+    "typescript-eslint": "^8.56.1",
     "vitest": "^4.0.16"
   },
   "exports": {
@@ -163,6 +170,10 @@
     "./shell": {
       "types": "./lib/types/shell/index.d.ts",
       "default": "./lib/esm/shell/index.js"
+    },
+    "./i18n": {
+      "types": "./lib/types/i18n/index.d.ts",
+      "default": "./lib/esm/i18n/index.js"
     }
   },
   "types": "./lib/index.d.ts",
@@ -197,6 +208,9 @@
       ],
       "shell": [
         "./lib/types/shell/index.d.ts"
+      ],
+      "i18n": [
+        "./lib/types/i18n/index.d.ts"
       ]
     }
   },
@@ -206,7 +220,7 @@
     "directory": "packages/ui"
   },
   "scripts": {
-    "build": "pnpm lint && pnpm exec rimraf ./lib && tsc -b && pnpm exec rollup -c",
+    "build": "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/SelectList.tsx

@@ -1,6 +1,7 @@
 import { Check } from "lucide-react";
 import clsx from "clsx";
 import { ReactNode, useMemo, useState } from "react";
+import { useUITranslation } from "@vertesia/ui/i18n";
 import { Input } from "./shadcn";
 
 const Default_Option_Style = "flex-1 px-2 py-2 hover:bg-accent nowrap";
@@ -32,6 +33,7 @@ export interface SelectListProps<T> {
     filterBy?: (filterValue: string) => (opt: T) => boolean;
 }
 export function SelectList<T>({ value, options, onChange, className, optionLayout, by, noCheck, filterBy }: SelectListProps<T>) {
+    const { t } = useUITranslation();
     const [selected, setSelected] = useState(value);
     const [filterValue, setFilterValue] = useState("");
 
@@ -51,7 +53,7 @@ export function SelectList<T>({ value, options, onChange, className, optionLayou
     return (
         <div className={clsx("", className)}>
             {filterBy && (
-                <Input type="text" placeholder="Filter..." value={filterValue} onChange={(value) => setFilterValue(value)} />
+                <Input type="text" placeholder={t('form.filter')} value={filterValue} onChange={(value) => setFilterValue(value)} />
             )}
             {options.map((option, i) => {
                 if (filterBy && !filterBy(filterValue)(option)) {

package/src/core/components/SidePanel.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Minus, X } from 'lucide-react';
 import { Button } from './shadcn/button';
@@ -7,14 +7,15 @@ interface SidePanelProps {
     isOpen: boolean;
     onClose: () => void;
     children: React.ReactNode;
-    title?: string;
+    title?: React.ReactNode;
     panelWidth?: number;
     backdrop?: boolean;
     side?: 'left' | 'right';
     resizable?: boolean;
     className?: string;
+    contentClassName?: string;
 }
-export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false, side = 'right', resizable = true, className }: SidePanelProps) {
+export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false, side = 'right', resizable = true, className, contentClassName }: SidePanelProps) {
     const [_panelWidth, setPanelWidth] = useState(panelWidth);
 
     const handleDragStart = (e: React.MouseEvent) => {
@@ -101,7 +102,7 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                                             )}
 
                                             {/* Scrollable content */}
-                                            <div className="flex-1 overflow-y-auto px-2 sm:px-4 py-4">
+                                            <div className={contentClassName ?? "flex-1 overflow-y-auto px-2 sm:px-4 py-4"}>
                                                 {children}
                                             </div>
                                         </div>

package/src/core/components/index.ts

@@ -3,8 +3,6 @@ export * from "./Avatar.js";
 export * from "./Center.js";
 export * from "./ComboBox.js";
 export * from "./Divider.js";
-export * from "./Dropdown.js";
-export * from "./DropdownList.js";
 export * from "./EmptyCollection.js";
 export * from "./FileUpload.js";
 export * from "./FormItem.js";
@@ -15,14 +13,11 @@ export * from "./NumberInput.js";
 export * from "./Overlay.js";
 export * from "./popup/index.js";
 export * from "./Portal.js";
-export * from "./RadioGroup.js";
 export * from "./SelectList.js";
-export * from "./SelectStack.js";
 export * from "./shadcn/index.js";
 export * from "./SidePanel.js";
 export * from "./Spinner.js";
 export * from "./styles.js";
-export * from "./Switch.js";
 export * from "./table/index.js";
 export * from "./TagsInput.js";
 export * from "./toast/index.js";

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

@@ -2,9 +2,10 @@ import * as React from "react"
 import { ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "../libs/utils"
+import { Button } from "./button"
 
 interface BreadcrumbProps {
-  label: string
+  label: string | React.ReactNode
   href?: string
   onClick?: () => void
 }
@@ -17,19 +18,23 @@ interface BreadcrumbItemProps {
 export function Breadcrumbs({ path, maxItems = 3, className, separator }: BreadcrumbItemProps) {
   const items = path || [];
 
+
   const renderBreadcrumbItem = (item: BreadcrumbProps) => {
+    const shortenedLabel = typeof item.label === "string" && item.label.length > 20
+      ? item.label.slice(0, 17) + "..."
+      : item.label;
     if (item.onClick) {
-      return <BreadcrumbButton onClick={item.onClick} href={item.href}>{item.label}</BreadcrumbButton>;
+      return <BreadcrumbButton onClick={item.onClick} href={item.href} title={typeof item.label === 'string' ? item.label : undefined}>{shortenedLabel}</BreadcrumbButton>;
     } else if (item.href) {
-      return <BreadcrumbButton href={item.href}>{item.label}</BreadcrumbButton>;
+      return <BreadcrumbButton href={item.href} title={typeof item.label === 'string' ? item.label : undefined}>{shortenedLabel}</BreadcrumbButton>;
     } else {
-      return <BreadcrumbPage>{item.label}</BreadcrumbPage>;
+      return <BreadcrumbPage>{shortenedLabel}</BreadcrumbPage>;
     }
   };
 
   if (items.length <= maxItems) {
     return (
-      <Breadcrumb className={cn("w-full", className)}>
+      <Breadcrumb className={cn("w-full flex items-center", className)}>
         <BreadcrumbList>
           {items.map((item, index) => (
             <React.Fragment key={index}>
@@ -49,7 +54,7 @@ export function Breadcrumbs({ path, maxItems = 3, className, separator }: Breadc
   const lastThreeItems = items.slice(-(maxItems - 1));
 
   return (
-    <Breadcrumb className={cn("w-full", className)}>
+    <Breadcrumb className={cn("w-full flex items-center", className)}>
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbEllipsis />
@@ -85,7 +90,7 @@ const BreadcrumbList = React.forwardRef<
   <ol
     ref={ref}
     className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted sm:gap-2.5",
       className
     )}
     {...props}
@@ -135,9 +140,11 @@ const BreadcrumbButton = React.forwardRef<
   };
 
   return (
-    <button
+    <Button
+      variant="ghost"
+      size={"md"}
       ref={ref}
-      className={cn("transition-colors hover:text-foreground cursor-pointer", className)}
+      className={cn("p-0! hover:underline! hover:bg-background!", className)}
       onClick={handleClick}
       {...props}
     />

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

@@ -7,6 +7,7 @@ import { cn } from "../libs/utils"
 import { Check, CopyIcon, Loader2 } from "lucide-react"
 import clsx from "clsx"
 import { useState } from "react"
+import { i18nInstance, NAMESPACE } from '../../../i18n/instance.js'
 
 const buttonVariants = cva(
   "hover:cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -107,6 +108,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
   ({ size, content, toast, className, alt, ...props }, ref) => {
 
     const [isCopied, setIsCopied] = useState(false);
+    const t = i18nInstance.getFixedT(null, NAMESPACE);
 
     const handleCopy = (e: React.MouseEvent) => {
       e.stopPropagation();
@@ -118,7 +120,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
         }
         toast.toast({
           status: "success",
-          title: toast.message || "Copied to clipboard",
+          title: toast.message || t('misc.copiedToClipboard'),
           duration: 2000,
         })
       }).catch((err) => {
@@ -126,7 +128,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
         if (toast && toast.toast)
           toast.toast({
             status: "error",
-            title: "Failed to copy",
+            title: t('misc.failedToCopy'),
             duration: 2000,
           })
       })
@@ -140,7 +142,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
         size={size || "sm"}
         onClick={handleCopy}
         {...props}
-        alt={alt ?? "Copy"}
+        alt={alt ?? t('misc.copy')}
       >
         {isCopied ? 
           <Check className="text-success" />

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

@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>) {
+  return (
+    <CollapsiblePrimitive.Trigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Content>) {
+  return (
+    <CollapsiblePrimitive.Content
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }