@vertesia/ui 1.0.0 → 1.1.0-dev.20260427.060440Z

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.0.0",
+  "version": "1.1.0-dev.20260427.060440Z",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -24,6 +24,7 @@
     "@floating-ui/react": "^0.27.11",
     "@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",
@@ -32,12 +33,12 @@
     "@radix-ui/react-label": "^2.1.6",
     "@radix-ui/react-popover": "^1.1.13",
     "@radix-ui/react-portal": "^1.1.9",
+    "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-separator": "^1.1.6",
     "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@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",
@@ -47,10 +48,10 @@
     "dayjs": "^1.11.19",
     "debounce": "^2.2.0",
     "dompurify": "^3.3.2",
-    "fast-xml-parser": "^5.5.7",
+    "fast-xml-parser": "^5.7.2",
     "firebase": "^10.12.2",
     "framer-motion": "^12.23.12",
-    "i18next": "^25.8.14",
+    "i18next": "^26.0.1",
     "jwt-decode": "^4.0.0",
     "katex": "^0.16.28",
     "lodash-es": "^4.17.23",
@@ -59,13 +60,12 @@
     "monaco-editor": "^0.52.2",
     "motion": "^12.12.1",
     "papaparse": "^5.5.3",
-    "radix-ui": "^1.4.3",
     "react": "^19.2.3",
     "react-calendar": "^6.0.0",
     "react-date-picker": "^12.0.1",
     "react-dom": "^19.2.3",
     "react-error-boundary": "^6.0.0",
-    "react-i18next": "^16.5.5",
+    "react-i18next": "^17.0.2",
     "react-markdown": "^10.1.0",
     "react-pdf": "^10.2.0",
     "react-remove-scroll": "^2.7.1",
@@ -86,10 +86,10 @@
     "vega": "^6.2.0",
     "vega-embed": "^7.1.0",
     "vega-lite": "^6.4.1",
-    "@vertesia/client": "1.0.0",
-    "@vertesia/common": "1.0.0",
-    "@vertesia/fusion-ux": "1.0.0",
-    "@vertesia/json": "1.0.0"
+    "@vertesia/client": "1.1.0-dev.20260427.060440Z",
+    "@vertesia/fusion-ux": "1.1.0-dev.20260427.060440Z",
+    "@vertesia/common": "1.1.0-dev.20260427.060440Z",
+    "@vertesia/json": "1.1.0-dev.20260427.060440Z"
   },
   "devDependencies": {
     "@eslint/compat": "^2.0.2",
@@ -100,7 +100,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@types/hast": "^3.0.4",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.19.2",
+    "@types/node": "^25.6.0",
     "@types/papaparse": "^5.5.2",
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
@@ -109,11 +109,11 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "i18next-parser": "^9.4.0",
+    "i18next-cli": "^1.51.5",
     "rimraf": "^6.1.2",
     "rollup": "^4.59.0",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.56.1",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.1",
     "vitest": "^4.0.16"
   },
   "exports": {

package/src/core/components/ComboBox.tsx

@@ -1,10 +1,10 @@
-import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { ChevronDownIcon, ChevronUpIcon, XIcon } from 'lucide-react';
 import clsx from 'clsx';
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import { AlignType, Popup, PopupController } from "./popup/index";
 
-const INPUT_UNSTYLED = "block m-0 p-0 border-0 focus:outline-none focus:ring-0 bg-transparent"
-const INPUT_NO_PADDING = "block sm:text-sm sm:leading-6 rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-slate-600 dark:text-slate-50 dark:bg-slate-800 placeholder:text-gray-400 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 dark:focus:ring-indigo-800"
+const INPUT_UNSTYLED = "block m-0 p-0 border-0 focus:outline-none focus:ring-0";
+const INPUT_NO_PADDING = "block sm:text-sm sm:leading-6 bg-muted rounded-md border-0 shadow-sm ring-1 ring-inset ring-muted placeholder:text-muted focus:ring-2 focus:ring-inset focus:ring-primary"
 const INPUT = INPUT_NO_PADDING + " py-1.5";
 const COMBOBOX_POPUP = "combobox-popup";
 
@@ -66,7 +66,7 @@ export function getDefaultComboBoxLayout<T>(fullWidth?: boolean, unstyledInput?:
         buttonRight: 4,
         buttonWidth: 24,
         maxMenuHeight: 240,
-        menuClass: "w-72 bg-white mt-1 shadow-md border border-gray-200 overflow-auto p-0 z-10",
+        menuClass: "w-72 mt-1 border-popover bg-popover text-popover-foreground shadow-md overflow-auto p-0 z-10",
         inputClass: clsx(unstyledInput ? INPUT_UNSTYLED : INPUT, fullWidth ? "w-full" : "!w-auto"),
         optionClass: "py-2 px-3 shadow-sm flex flex-col [&.option-selected]:font-semibold [&.option-highlighted]:bg-blue-300",
         Input: ComboInput<T>,
@@ -84,7 +84,7 @@ export interface ComboBoxApi<T> {
     setInputValue: (value: string) => void;
     focus: () => void;
 }
-interface ComboBoxProps<T> {
+export interface ComboBoxProps<T> {
     items: T[];
     adapter: OptionAdapter<T>;
     // if true then the default layout will use an unstyled input
@@ -103,8 +103,14 @@ interface ComboBoxProps<T> {
     focusOnMount?: boolean
     menuGap?: number;
     menuAlign?: AlignType;
+    // show X button to clear the current selection
+    clearable?: boolean;
+    // shown inside the dropdown when filter produces zero results
+    noMatchMessage?: ReactNode;
+    // open the menu when the input is focused
+    openOnFocus?: boolean;
 }
-export function ComboBox<T>({ menuAlign = "fill", menuGap, focusOnMount, onSelect, value, zIndex, unstyledInput, fullWidth, api, layout: layoutOpts, adapter, items, placeholder }: ComboBoxProps<T>) {
+export function ComboBox<T>({ menuAlign = "fill", menuGap, focusOnMount, onSelect, value, zIndex, unstyledInput, fullWidth, api, layout: layoutOpts, adapter, items, placeholder, clearable, noMatchMessage, openOnFocus }: ComboBoxProps<T>) {
     const [popupId] = useState(genComboboxPopupId());
     const popupCtrl = useRef<PopupController | undefined>(undefined);
     const inputRef = useRef<HTMLInputElement>(null);
@@ -143,11 +149,11 @@ export function ComboBox<T>({ menuAlign = "fill", menuGap, focusOnMount, onSelec
         }
     }, [api, ctrl, inputRef.current]);
 
-    const showMenu = ctrl.isMenuOpen && ctrl.filteredItems.length > 0;
+    const showMenu = ctrl.isMenuOpen && (ctrl.filteredItems.length > 0 || !!noMatchMessage);
 
     return (
         <>
-            <layout.Input boxRef={inputBoxRef} inputRef={inputRef} ctrl={ctrl} layout={layout} placeholder={placeholder} />
+            <layout.Input boxRef={inputBoxRef} inputRef={inputRef} ctrl={ctrl} layout={layout} placeholder={placeholder} clearable={clearable} openOnFocus={openOnFocus} />
             <Popup
                 id={popupId}
                 ctrlRef={popupCtrl}
@@ -159,7 +165,7 @@ export function ComboBox<T>({ menuAlign = "fill", menuGap, focusOnMount, onSelec
                     align: menuAlign,
                     gap: menuGap != null ? menuGap : 4
                 }}>
-                <layout.Menu fillWidth={menuAlign === "fill"} items={ctrl.filteredItems} ctrl={ctrl} layout={layout} adapter={adapter} />
+                <layout.Menu fillWidth={menuAlign === "fill"} items={ctrl.filteredItems} ctrl={ctrl} layout={layout} adapter={adapter} noMatchMessage={noMatchMessage} />
             </Popup>
         </>
     );
@@ -171,29 +177,42 @@ export interface ComboInputProps<T> {
     placeholder?: string
     boxRef?: React.RefObject<HTMLDivElement | null>;
     inputRef?: React.RefObject<HTMLInputElement | null>;
+    clearable?: boolean;
+    openOnFocus?: boolean;
 }
-function ComboInput<T>({ inputRef, placeholder, boxRef, ctrl, layout }: ComboInputProps<T>) {
-    const buttonWidth = layout.buttonWidth;
-    const style = buttonWidth > 0 ? { paddingRight: `${buttonWidth}px` } : undefined;
+function ComboInput<T>({ inputRef, placeholder, boxRef, ctrl, layout, clearable, openOnFocus }: ComboInputProps<T>) {
     const Toggle = layout.Toggle;
+    const showClear = clearable && ctrl.selectedItem != null;
+    const buttonCount = (Toggle ? 1 : 0) + (showClear ? 1 : 0);
+    const style = buttonCount > 0 ? { paddingRight: `${layout.buttonWidth * buttonCount + layout.buttonRight}px` } : undefined;
     return (
         <div className="relative" ref={boxRef}>
-            <input ref={inputRef} placeholder={placeholder} {...ctrl.getInputProps()} style={style} className={layout.inputClass} />
-            {Toggle &&
-                <button style={{
-                    top: 0, bottom: 0, right: `${layout.buttonRight}px`, width: `${buttonWidth}px`,
-                    position: "absolute",
-                    border: "none",
-                    padding: 0,
-                    margin: 0,
-                    backgroundColor: "transparent",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center"
-                }} {...ctrl.getToggleButtonProps()}>
-                    <Toggle ctrl={ctrl} layout={layout} />
-                </button>
-            }
+            <input
+                ref={inputRef}
+                placeholder={placeholder}
+                {...ctrl.getInputProps()}
+                onFocus={openOnFocus ? () => ctrl.openMenu() : undefined}
+                style={style}
+                className={layout.inputClass}
+            />
+            <div style={{ position: 'absolute', right: `${layout.buttonRight}px`, top: 0, bottom: 0, display: 'flex', alignItems: 'center', gap: '2px' }}>
+                {showClear && (
+                    <button
+                        style={{ border: 'none', padding: 0, margin: 0, backgroundColor: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', width: `${layout.buttonWidth}px` }}
+                        onClick={() => { ctrl.selectedItem = null; }}
+                    >
+                        <XIcon className="w-4 h-4" />
+                    </button>
+                )}
+                {Toggle && (
+                    <button
+                        style={{ width: `${layout.buttonWidth}px`, border: 'none', padding: 0, margin: 0, backgroundColor: 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                        {...ctrl.getToggleButtonProps()}
+                    >
+                        <Toggle ctrl={ctrl} layout={layout} />
+                    </button>
+                )}
+            </div>
         </div>
     )
 }
@@ -212,9 +231,15 @@ export interface ComboMenuProps<T> {
     ctrl: ComboboxController<T>;
     adapter: OptionAdapter<T>;
     fillWidth: boolean;
+    noMatchMessage?: ReactNode;
 }
-function ComboMenu<T>({ fillWidth, items, layout, ctrl, adapter }: ComboMenuProps<T>) {
+function ComboMenu<T>({ fillWidth, items, layout, ctrl, adapter, noMatchMessage }: ComboMenuProps<T>) {
     const { highlightedIndex, selectedItem } = ctrl;
+    if (items.length === 0) {
+        return noMatchMessage
+            ? <div style={{ width: fillWidth ? '100%' : undefined }} className={layout.menuClass}>{noMatchMessage}</div>
+            : null;
+    }
     return (
         <ul style={{ width: fillWidth ? "100%" : undefined, maxHeight: layout.maxMenuHeight ? `${layout.maxMenuHeight}px` : '240px' }}
             className={layout.menuClass} {...ctrl.getMenuProps()}>
@@ -485,4 +510,16 @@ function incrModulo(value: number, max: number) {
 }
 function decrModulo(value: number, max: number) {
     return (value - 1 + max) % max;
+}
+
+export function SimpleCombobox({
+    options,
+    creatable,
+    ...rest
+}: Omit<ComboBoxProps<string>, 'adapter' | 'items'> & {
+    options: string[];
+    creatable?: boolean;
+}) {
+    const adapter = creatable ? StringOptionAdapterWithCreate.instance : StringOptionAdapter.instance;
+    return <ComboBox adapter={adapter} items={options} {...rest} />;
 }

package/src/core/components/FormItem.tsx

@@ -7,17 +7,20 @@ import { Info } from 'lucide-react';
 interface FormItemProps {
     label: any;
     children: ReactNode;
+    childrenId?: string;
     className?: string;
     description?: ReactNode;
     required?: boolean;
-    direction?: "row" | "column";
+    direction?: "row" | "column" | "row-reverse";
     disabled?: boolean;
+    /** When true, the label row stretches to full width. Useful when placing actions (e.g. buttons) inside the label. */
+    fullWidthLabel?: boolean;
 }
-export function FormItem({ description, required, label, className, direction = "column", children, disabled = false }: FormItemProps) {
+export function FormItem({ description, required, label, className, direction = "column", children, disabled = false, fullWidthLabel = false, childrenId }: FormItemProps) {
     return (
-        <div className={clsx("flex w-full space-y-1", className, direction === "row" ? "flex-row justify-between items-center gap-2" : "flex-col")}>
-            <div className='flex items-center gap-1'>
-                <label className={`text-sm font-medium mb-1 ${disabled ? "text-muted" : ""}`}>
+        <div className={clsx("flex w-full space-y-1", className, direction === "row" ? "flex-row justify-between items-center gap-2" : direction === "row-reverse" ? "flex-row-reverse justify-between items-center gap-2" : "flex-col")}>
+            <div className={clsx('flex items-center gap-1 mb-0', fullWidthLabel && 'w-full')}>
+                <label htmlFor={childrenId} className={`text-sm font-medium mb-1 ${disabled ? "text-muted" : ""} ${fullWidthLabel && "flex-1"}`}>
                     {label}{required ? <span className='text-destructive -mt-4 ml-1'>*</span> : ""}
                 </label>
                 {
@@ -33,4 +36,4 @@ export function FormItem({ description, required, label, className, direction =
             {children}
         </div>
     );
-}
+}

package/src/core/components/SidePanel.tsx

@@ -86,7 +86,7 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                                                 <Minus className="rotate-90 font-semibold" strokeWidth={4} />
                                             </div>
                                         )}
-                                        <div className={`flex-1 flex flex-col bg-background shadow-xl ${className}`}>
+                                        <div className={`flex-1 min-w-0 flex flex-col bg-background shadow-xl ${className}`}>
                                             {/* Sticky header */}
                                             {title && (
                                                 <div className="sticky top-0 z-10 bg-background px-2 sm:px-4 py-2 border-b">
@@ -102,8 +102,10 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                                             )}
 
                                             {/* Scrollable content */}
-                                            <div className={contentClassName ?? "flex-1 overflow-y-auto px-2 sm:px-4 py-4"}>
-                                                {children}
+                                            <div className={contentClassName ?? "flex-1 overflow-auto px-2 sm:px-4 py-4"}>
+                                                <div className='w-full h-full flex-1 flex flex-col'>
+                                                    {children}
+                                                </div>
                                             </div>
                                         </div>
                                     </div>

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

@@ -1,6 +1,4 @@
-"use client"
-
-import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 
 function Collapsible({
   ...props
@@ -10,9 +8,9 @@ function Collapsible({
 
 function CollapsibleTrigger({
   ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+}: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>) {
   return (
-    <CollapsiblePrimitive.CollapsibleTrigger
+    <CollapsiblePrimitive.Trigger
       data-slot="collapsible-trigger"
       {...props}
     />
@@ -21,9 +19,9 @@ function CollapsibleTrigger({
 
 function CollapsibleContent({
   ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+}: React.ComponentProps<typeof CollapsiblePrimitive.Content>) {
   return (
-    <CollapsiblePrimitive.CollapsibleContent
+    <CollapsiblePrimitive.Content
       data-slot="collapsible-content"
       {...props}
     />

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

@@ -1,12 +1,12 @@
-"use client"
-
 import * as React from "react"
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 
 import { cn } from "../libs/utils"
 
 import { CheckIcon, ChevronRightIcon } from "lucide-react"
 
+const HoverMenuContext = React.createContext(false);
+
 function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
@@ -74,7 +74,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "hover:bg-muted focus:bg-muted data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive gap-2 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}
@@ -96,7 +96,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-muted focus:text-muted focus:**:text-muted gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       checked={checked}
@@ -140,7 +140,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-muted focus:text-muted focus:**:text-muted gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}
@@ -170,7 +170,7 @@ function DropdownMenuLabel({
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7", className)}
+      className={cn("text-muted px-1.5 py-1 text-xs font-medium data-inset:pl-7", className)}
       {...props}
     />
   )
@@ -196,7 +196,7 @@ function DropdownMenuShortcut({
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
+      className={cn("text-muted group-focus/dropdown-menu-item:text-muted ml-auto text-xs tracking-widest", className)}
       {...props}
     />
   )
@@ -221,7 +221,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-muted focus:text-muted data-open:bg-muted data-open:text-muted not-data-[variant=destructive]:focus:**:text-muted gap-2 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}
@@ -271,8 +271,35 @@ interface DropdownProps {
   trigger: React.ReactNode;
   children: React.ReactNode | React.ReactNode[];
   align?: 'left' | 'center' | 'right';
+  hover?: boolean;
 }
-export function Dropdown({ trigger, children, align = 'right' }: DropdownProps) {
+export function Dropdown({ trigger, children, align = 'right', hover }: DropdownProps) {
+  const [open, setOpen] = React.useState(false);
+  const closeTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  if (hover) {
+    const onEnter = () => {
+      if (closeTimer.current) clearTimeout(closeTimer.current);
+      setOpen(true);
+    };
+    const onLeave = () => {
+      closeTimer.current = setTimeout(() => setOpen(false), 80);
+    };
+    const alignClass = align === 'right' ? 'right-0' : align === 'center' ? 'left-1/2 -translate-x-1/2' : 'left-0';
+    return (
+      <div className="relative inline-flex" onMouseEnter={onEnter} onMouseLeave={onLeave}>
+        {trigger}
+        {open && (
+          <div className={cn('absolute top-full pt-1 z-50', alignClass)}>
+            <div className="min-w-32 rounded-lg p-1 shadow-md ring-1 ring-foreground/10 bg-popover text-popover-foreground">
+              <HoverMenuContext.Provider value={true}>{children}</HoverMenuContext.Provider>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -287,19 +314,47 @@ export function Dropdown({ trigger, children, align = 'right' }: DropdownProps)
   );
 }
 
+interface MenuGroupProps {
+  children: React.ReactNode | React.ReactNode[];
+  label?: string;
+}
+export function MenuGroup({ children, label }: MenuGroupProps) {
+  return (
+    <DropdownMenuGroup>
+      {label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}
+      {children}
+    </DropdownMenuGroup>
+  );
+}
+
 interface MenuItemProps {
   children: React.ReactNode | React.ReactNode[];
   onClick?: (ev: React.MouseEvent) => void;
   href?: string;
   closeOnClick?: boolean;
   isDisabled?: boolean;
+  variant?: "default" | "destructive";
+  className?: string;
 }
-export function MenuItem({ children, href, onClick, closeOnClick = true, isDisabled = false }: MenuItemProps) {
+export function MenuItem({ children, href, onClick, isDisabled = false, variant = "default", className }: MenuItemProps) {
+  const isHoverMenu = React.useContext(HoverMenuContext);
+  const baseClass = cn(
+    "w-full gap-2 rounded-md px-1.5 py-1 text-sm text-nowrap [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    variant === 'destructive' ? 'text-destructive' : '',
+    isDisabled ? 'pointer-events-none opacity-50' : 'hover:bg-muted focus:bg-muted',
+    className
+  );
+  if (isHoverMenu) {
+    const handleClick = (e: React.MouseEvent) => { e.stopPropagation(); onClick?.(e); };
+    return href
+      ? <a href={href} className={baseClass}>{children}</a>
+      : <button className={baseClass} disabled={isDisabled} onClick={handleClick}>{children}</button>;
+  }
   return (
     <DropdownMenuItem
-      className="hover:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-nowrap"
+      className={cn("data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-nowrap", className)}
       disabled={isDisabled}
-      onSelect={(e) => { if (!closeOnClick) e.preventDefault(); }}
+      variant={variant}
       onClick={(e) => { e.stopPropagation(); onClick?.(e); }}
       asChild={!!href}
     >

package/src/core/components/shadcn/filters/comboBox/DateCombobox.tsx

@@ -19,21 +19,21 @@ export const DateCombobox = ({
     const [localDateRange, setLocalDateRange] = useState<[Date | null, Date | null]>([null, null]);
     const { t } = useUITranslation();
 
-    // For single date
-    const selectedDate = filterValues[0] ? new Date(filterValues[0]) : undefined;
+    // Parse with dayjs to interpret bare YYYY-MM-DD as local time (to match UI).
+    const selectedDate = filterValues[0] ? dayjs(filterValues[0]).toDate() : undefined;
 
     // For date range - use local state for immediate feedback, fall back to filter values
     const dateRange: [Date | null, Date | null] = isRange ? [
-        localDateRange[0] || (filterValues[0] ? new Date(filterValues[0]) : null),
-        localDateRange[1] || (filterValues[1] ? new Date(filterValues[1]) : null)
+        localDateRange[0] || (filterValues[0] ? dayjs(filterValues[0]).toDate() : null),
+        localDateRange[1] || (filterValues[1] ? dayjs(filterValues[1]).toDate() : null)
     ] : [null, null];
 
     // Update local state when filter values change
     useEffect(() => {
         if (isRange) {
             setLocalDateRange([
-                filterValues[0] ? new Date(filterValues[0]) : null,
-                filterValues[1] ? new Date(filterValues[1]) : null
+                filterValues[0] ? dayjs(filterValues[0]).toDate() : null,
+                filterValues[1] ? dayjs(filterValues[1]).toDate() : null
             ]);
         }
     }, [filterValues, isRange]);

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

@@ -25,6 +25,7 @@ interface FilterProviderProps {
   setFilters: Dispatch<SetStateAction<Filter[]>>;
   filterGroups: FilterGroup[];
   children: React.ReactNode;
+  inModal?: boolean;
 }
 
 // Syncs filters ↔ URL. On mount, captures the initial URL param and restores matching filters
@@ -33,14 +34,15 @@ interface FilterProviderProps {
 // (prevents cross-page URL contamination, e.g. a modal inheriting a parent page's filters).
 
 // Parse format with array indicators: filterName:value or filterName:[value1,value2]
-const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterProviderProps) => {
+const FilterProvider = ({ filters, setFilters, filterGroups, children, inModal }: FilterProviderProps) => {
   const url = new URL(window.location.href);
   const searchParams = url.searchParams;
   const [initialFiltersParam] = React.useState(() => new URLSearchParams(window.location.search).get('filters'));
   const processedUrlFilters = React.useRef<Set<string>>(new Set());
-  const hasRestoredFromUrl = React.useRef(!initialFiltersParam);
+  const hasRestoredFromUrl = React.useRef(inModal || !initialFiltersParam);
 
   useEffect(() => {
+    if (inModal) return;
     if (!hasRestoredFromUrl.current) return;
     try {
       const params = new URLSearchParams(searchParams.toString());
@@ -82,7 +84,7 @@ const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterP
   }, [filters]);
 
   useEffect(() => {
-    if (!initialFiltersParam || filterGroups.length === 0) return;
+    if (inModal || !initialFiltersParam || filterGroups.length === 0) return;
     try {
       const filterPairs = initialFiltersParam.split(';');
       const newFilters: Filter[] = [];

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

@@ -1,5 +1,3 @@
-"use client"
-
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 import * as React from "react"
 
@@ -52,7 +50,7 @@ function RadioGroup<T = RadioGroupOption>({ onSelect, selected, options, adapter
   const getId = (o: T) => adapter ? adapter.idOf(o) : (o as unknown as RadioGroupOption).id
   const getLabel = (o: T) => adapter ? adapter.labelOf(o) : (o as unknown as RadioGroupOption).label
   const getDescription = (o: T) => adapter ? adapter.descriptionOf(o) : (o as unknown as RadioGroupOption).description
-  const getSelectedClass = (o: T) => adapter ? adapter.selectedClassName(o) : 'border-accent-foreground'
+  const getSelectedClass = (o: T) => adapter ? adapter.selectedClassName(o) : 'border-primary'
 
   return (
     <RadioGroupPrimitive.Root

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

@@ -1,5 +1,3 @@
-"use client"
-
 import * as SwitchPrimitive from "@radix-ui/react-switch"
 import * as React from "react"
 

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

@@ -153,7 +153,13 @@ const Tabs = ({
   );
 };
 
-const TabsBar = ({ className, sticky }: { className?: string; sticky?: boolean }) => {
+interface TabsBarProps {
+  className?: string;
+  sticky?: boolean;
+  direction?: "vertical" | "horizontal";
+}
+
+const TabsBar = ({ className, sticky, direction }: TabsBarProps) => {
   const { tabs, size, current, setTab, responsive, variant, updateHash } = React.useContext(TabsContext);
 
   const fullWidth = size !== 0;
@@ -194,10 +200,17 @@ const TabsBar = ({ className, sticky }: { className?: string; sticky?: boolean }
           />
         </div>
       )}
-      <TabsList size={size} variant={variant} className={cn((fullWidth ? "w-full" : ""), sticky && "sticky top-0 bg-background z-10", className, (responsive ? "hidden lg:flex" : ""))}>
+      <TabsList size={size} variant={variant}
+        className={cn((
+          fullWidth ? "w-full" : ""),
+          sticky && "sticky top-0 bg-background z-10",
+          direction === "vertical" ? "flex-col items-start" : "flex-row",
+          responsive ? "hidden lg:flex" : "",
+          className)}>
         {tabs.map((tab) => (
 
           <TabsTrigger
+            className={cn(direction === "vertical" ? "w-full text-left" : "")}
             key={tab.name}
             value={tab.name}
             disabled={tab.disabled}