@vertesia/ui 1.0.0-dev.20260128.144200 → 1.0.0-dev.20260225.024852Z

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.0.0-dev.20260128.144200",
+  "version": "1.0.0-dev.20260225.024852Z",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -39,12 +39,12 @@
     "cmdk": "^1.1.1",
     "dayjs": "^1.11.19",
     "debounce": "^2.2.0",
-    "fast-xml-parser": "^5.2.3",
+    "dompurify": "^3.3.1",
+    "fast-xml-parser": "^5.3.6",
     "firebase": "^10.12.2",
     "framer-motion": "^12.23.12",
-    "html-to-image": "^1.11.13",
-    "json-schema": "^0.4.0",
     "jwt-decode": "^4.0.0",
+    "katex": "^0.16.28",
     "lodash-es": "^4.17.23",
     "lucide-react": "^0.562.0",
     "mermaid": "^11.4.0",
@@ -60,18 +60,23 @@
     "react-pdf": "^10.2.0",
     "react-resizable-panels": "^3.0.6",
     "react-vega": "^8.0.0",
-    "recharts": "^3.5.0",
+    "rehype-katex": "^7.0.1",
+    "remark-definition-list": "^2.0.0",
+    "remark-directive": "^4.0.0",
     "remark-gfm": "^4.0.1",
+    "remark-github-blockquote-alert": "^2.0.0",
+    "remark-math": "^6.0.0",
+    "remark-supersub": "^1.0.0",
     "tailwind-merge": "^3.4.0",
     "ts-md5": "^1.3.1",
     "unist-util-visit": "^5.0.0",
     "vega": "^6.2.0",
     "vega-embed": "^7.1.0",
     "vega-lite": "^6.4.1",
-    "@vertesia/client": "1.0.0-dev.20260128.144200",
-    "@vertesia/common": "1.0.0-dev.20260128.144200",
-    "@vertesia/json": "1.0.0-dev.20260128.144200",
-    "@vertesia/fusion-ux": "1.0.0-dev.20260128.144200"
+    "@vertesia/fusion-ux": "1.0.0-dev.20260225.024852Z",
+    "@vertesia/client": "1.0.0-dev.20260225.024852Z",
+    "@vertesia/json": "1.0.0-dev.20260225.024852Z",
+    "@vertesia/common": "1.0.0-dev.20260225.024852Z"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",
@@ -79,7 +84,6 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@types/hast": "^3.0.4",
-    "@types/json-schema": "^7.0.15",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.19.2",
     "@types/papaparse": "^5.5.2",

package/src/core/components/InputList.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
 
-import { Badge } from './Badge';
+import { Badge } from './shadcn/badge';
 import { Input } from './shadcn/input';
 import { VTooltip } from '@vertesia/ui/core';
 

package/src/core/components/Overlay.tsx

@@ -2,7 +2,7 @@ import { motion } from "framer-motion"
 import { X } from "lucide-react"
 import { useState, ReactNode } from "react"
 
-import { Button } from "./Button"
+import { Button } from "./shadcn/button"
 
 interface OverlayProps {
     children: ReactNode

package/src/core/components/SidePanel.tsx

@@ -10,8 +10,11 @@ interface SidePanelProps {
     title?: string;
     panelWidth?: number;
     backdrop?: boolean;
+    side?: 'left' | 'right';
+    resizable?: boolean;
+    className?: string;
 }
-export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false }: SidePanelProps) {
+export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false, side = 'right', resizable = true, className }: SidePanelProps) {
     const [_panelWidth, setPanelWidth] = useState(panelWidth);
 
     const handleDragStart = (e: React.MouseEvent) => {
@@ -39,6 +42,13 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
         document.addEventListener('mouseup', handleMouseUp);
     };
 
+    const isLeft = side === 'left';
+    const positionClass = isLeft ? 'left-0' : 'right-0';
+    const paddingClass = isLeft ? 'pr-10 sm:pr-16' : 'pl-10 sm:pl-16';
+    const borderClass = isLeft ? 'border-r' : 'border-l';
+    const dragHandleClass = isLeft ? '-right-1' : '-left-1';
+    const initialX = isLeft ? "-100%" : "100%";
+
     return (
         <AnimatePresence>
             {isOpen && (
@@ -54,28 +64,31 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                         />
                     )}
 
-                    <div className="fixed inset-y-0 right-0 overflow-hidden">
+                    <div className={`fixed inset-y-0 ${positionClass} 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">
+                            <div className={`pointer-events-none fixed inset-y-0 ${positionClass} flex max-w-full ${paddingClass}`}>
                                 <motion.div
-                                    className="pointer-events-auto border-l"
+                                    className={`pointer-events-auto ${borderClass}`}
                                     style={{ width: `${_panelWidth}px` }}
-                                    initial={{ x: "100%" }}
+                                    initial={{ x: initialX }}
                                     animate={{ x: 0 }}
-                                    exit={{ x: "100%" }}
+                                    exit={{ x: initialX }}
                                     transition={{ type: "spring", stiffness: 300, damping: 30 }}
                                 >
                                     <div className="relative flex h-full">
                                         {/* Drag Handle */}
-                                        <div
-                                            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">
+                                        {resizable && (
+                                            <div
+                                                className={`absolute ${dragHandleClass} 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 bg-background shadow-xl ${className}`}>
+                                            {/* Sticky header */}
                                             {title && (
-                                                <div className="px-2 sm:px-4">
+                                                <div className="sticky top-0 z-10 bg-background px-2 sm:px-4 py-2 border-b">
                                                     <div className="flex items-start justify-between">
                                                         <h2 className="w-full text-base font-semibold leading-6">
                                                             <div className="text-2xl">{title ?? ""}</div>
@@ -87,7 +100,8 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                                                 </div>
                                             )}
 
-                                            <div className="px-2 sm:px-4">
+                                            {/* Scrollable content */}
+                                            <div className="flex-1 overflow-y-auto px-2 sm:px-4 py-4">
                                                 {children}
                                             </div>
                                         </div>

package/src/core/components/Switch.tsx

@@ -17,7 +17,7 @@ interface SwitchProps {
 export function Switch({ value, onChange, size = 'md', children, className, disabled }: SwitchProps) {
     const sizeClass = sizes[size];
     return (
-        <UISwitch checked={value} onChange={() => onChange(!value)} className={`flex items-center ${className} ${disabled ? 'cursor-not-allowed opacity-50' : 'hover:cursor-pointer'}`}>
+        <UISwitch checked={value} onChange={() => onChange(!value)} disabled={disabled} className={`flex items-center ${className} ${disabled ? 'cursor-not-allowed opacity-50' : 'hover:cursor-pointer'}`}>
             <div className={`${value ? 'bg-primary' : 'bg-muted/50'} relative inline-flex ${sizeClass[0]} items-center rounded-full border-1`}>
                 <span
                     className={`${value ? sizeClass[2] : 'translate-x-1'

package/src/core/components/index.ts

@@ -1,10 +1,7 @@
 
 export * from "./Avatar.js";
-export * from "./Badge.js";
 export * from "./Center.js";
 export * from "./ComboBox.js";
-export * from "./ConfirmModal.js";
-export * from "./DeleteModal.js";
 export * from "./Divider.js";
 export * from "./Dropdown.js";
 export * from "./DropdownList.js";
@@ -14,15 +11,11 @@ export * from "./FormItem.js";
 export * from "./InputList.js";
 export * from "./Link.js";
 export * from "./MenuList.js";
-export * from "./MessageBox.js";
-export * from "./Modal.js";
 export * from "./NumberInput.js";
 export * from "./Overlay.js";
-export * from "./Panel.js";
 export * from "./popup/index.js";
 export * from "./Portal.js";
 export * from "./RadioGroup.js";
-export * from "./SelectBox.js";
 export * from "./SelectList.js";
 export * from "./SelectStack.js";
 export * from "./shadcn/index.js";
@@ -31,7 +24,6 @@ export * from "./Spinner.js";
 export * from "./styles.js";
 export * from "./Switch.js";
 export * from "./table/index.js";
-export * from "./tabs/index.js";
 export * from "./TagsInput.js";
 export * from "./toast/index.js";
 

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

@@ -0,0 +1,50 @@
+import { useState } from "react"
+import { VTooltip } from "./tooltip"
+import { ChevronDown, ChevronUp, Info } from "lucide-react"
+import { Button } from "./button"
+
+interface PanelProps {
+    title: string | React.ReactNode
+    description?: React.ReactNode
+    action?: React.ReactNode
+    children: React.ReactNode
+    footer?: string | React.ReactNode
+    className?: string
+    collapsible?: boolean
+    defaultCollapsed?: boolean
+}
+
+export function Panel({ children, action, title, description, footer, className, collapsible, defaultCollapsed = false }: PanelProps) {
+    const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+    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>
+                <div className="flex gap-2 items-center">
+                    {action}
+                    {
+                        collapsible && (
+                            <Button variant="ghost" size="icon" onClick={() => setIsCollapsed(!isCollapsed)}>
+                                {isCollapsed ?
+                                    <ChevronDown className="size-4" /> :
+                                    <ChevronUp className="size-4" />
+                                }
+                            </Button>
+                        )
+                    }
+                </div>
+            </div>
+            {!isCollapsed && children}
+            {footer &&
+                <div className="border-t border-muted flex flex-col-2 text-sm pt-4">
+                    {footer}
+                </div>}
+        </div>
+    )
+}

package/src/core/components/{Badge.tsx → shadcn/badge.tsx}

@@ -1,6 +1,6 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-import { cn } from "./libs/utils";
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../libs/utils"
 
 // Base badge variants
 const badgeVariants = cva(

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

@@ -4,7 +4,7 @@ import { Command as CommandPrimitive } from "cmdk"
 import { Search } from "lucide-react"
 
 import { cn } from "../libs/utils"
-import { Dialog, DialogContent } from "./dialog"
+import { Dialog, DialogContent } from "./modal/dialog"
 
 const Command: React.ForwardRefExoticComponent<
   React.RefAttributes<HTMLDivElement> &

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

@@ -26,36 +26,38 @@ interface FilterProviderProps {
   children: React.ReactNode;
 }
 
+// Syncs filters ↔ URL. On mount, captures the initial URL param and restores matching filters
+// incrementally as filterGroups loads. URL writes are blocked until the first filterGroups load
+// so the address bar doesn't flicker. Filters not matching any filterGroup are silently dropped
+// (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 url = new URL(window.location.href);
   const searchParams = url.searchParams;
-  const [hasInitialized, setHasInitialized] = React.useState(false);
+  const [initialFiltersParam] = React.useState(() => new URLSearchParams(window.location.search).get('filters'));
+  const processedUrlFilters = React.useRef<Set<string>>(new Set());
+  const hasRestoredFromUrl = React.useRef(!initialFiltersParam);
 
   useEffect(() => {
+    if (!hasRestoredFromUrl.current) return;
     try {
       const params = new URLSearchParams(searchParams.toString());
       if (filters.length > 0) {
-        // Convert filters to format with array indicators: filterName:value,value;filterName2:value
-        // Arrays are prefixed with []: filterName:[value1,value2]
         const filterString = filters.map(filter => {
           let values;
           if (filter.type === 'stringList' && Array.isArray(filter.value) && typeof filter.value[0] === 'string') {
-            // Handle stringList with direct string array - always array format
             values = `[${(filter.value as string[]).map(item => encodeURIComponent(item)).join(',')}]`;
           } else if (Array.isArray(filter.value)) {
             if (filter.multiple) {
-              // Handle multiple filters - always use array format for multiple=true
               values = `[${filter.value.map((item: any) => encodeURIComponent(item.value || item || '')).join(',')}]`;
             } else if (filter.value.length > 1) {
-              // Handle multiple values for non-multiple filters
               values = `[${filter.value.map((item: any) => encodeURIComponent(item.value || item || '')).join(',')}]`;
             } else {
-              // Single value in array for non-multiple filter - don't use array format
               const firstValue = filter.value[0];
               if (typeof firstValue === 'string') {
                 values = encodeURIComponent(firstValue);
               } else if (typeof firstValue === 'object' && firstValue?.value !== undefined) {
-                // Handle FilterOption object
                 values = encodeURIComponent(String(firstValue.value));
               } else {
                 values = encodeURIComponent(String(firstValue || ''));
@@ -79,91 +81,78 @@ const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterP
   }, [filters]);
 
   useEffect(() => {
-    const filtersParam = searchParams.get('filters');
-    if (filtersParam && filterGroups.length > 0 && !hasInitialized) {
-      try {
-        // Parse format with array indicators: filterName:value or filterName:[value1,value2]
-        const filterPairs = filtersParam.split(';');
-        const parsedFilters = filterPairs.map(pair => {
-          const [encodedName, valuesString] = pair.split(':');
-          const name = decodeURIComponent(encodedName);
-
-          let values: string[];
-          // Check if it's an array format [value1,value2]
-          if (valuesString.startsWith('[') && valuesString.endsWith(']')) {
-            // Array format - remove brackets and split by comma
-            const arrayContent = valuesString.slice(1, -1); // Remove [ and ]
-            values = arrayContent ? arrayContent.split(',').map(encodedValue => decodeURIComponent(encodedValue)) : [];
-          } else {
-            // Single value format
-            values = [decodeURIComponent(valuesString)];
-          }
-
-          const group = filterGroups.find(g => g.name === name);
-          let filterValue;
+    if (!initialFiltersParam || filterGroups.length === 0) return;
+    try {
+      const filterPairs = initialFiltersParam.split(';');
+      const newFilters: Filter[] = [];
+
+      for (const pair of filterPairs) {
+        const [encodedName, valuesString] = pair.split(':');
+        const name = decodeURIComponent(encodedName);
+
+        if (processedUrlFilters.current.has(name)) continue;
+
+        const group = filterGroups.find(g => g.name === name);
+        if (!group) continue;
+
+        processedUrlFilters.current.add(name);
+
+        let values: string[];
+        if (valuesString.startsWith('[') && valuesString.endsWith(']')) {
+          const arrayContent = valuesString.slice(1, -1);
+          values = arrayContent ? arrayContent.split(',').map(encodedValue => decodeURIComponent(encodedValue)) : [];
+        } else {
+          values = [decodeURIComponent(valuesString)];
+        }
+
+        let filterValue;
+
+        if (group.type === 'stringList') {
+          filterValue = values;
+        } else if (group.type === 'text') {
+          filterValue = values.length === 1 ? [{ value: values[0], label: values[0] }] :
+            values.map(value => ({ value, label: value }));
+        } else {
+          filterValue = values.map(value => {
+            const matchingOption = group.options?.find(opt => opt.value === value);
+            let label = value;
+            if (matchingOption?.label) {
+              label = String(matchingOption.label);
+            } else if (matchingOption?.labelRenderer) {
+              label = String(matchingOption.labelRenderer(value));
+            } else if (group.labelRenderer) {
+              label = String(group.labelRenderer(value));
+            }
+            return { value, label };
+          });
+        }
 
-          if (group?.type === 'stringList') {
-            // For stringList, return direct string array
+        if (group.multiple && !valuesString.startsWith('[') && !valuesString.endsWith(']')) {
+          if (group.type === 'stringList') {
             filterValue = values;
-          } else if (group?.type === 'text') {
-            // For text, return FilterOption array (single value for text inputs)
-            filterValue = values.length === 1 ? [{ value: values[0], label: values[0] }] :
-              values.map(value => ({ value, label: value }));
-          } else {
-            // For other types, find options with labels
-            filterValue = values.map(value => {
-              const matchingOption = group?.options?.find(opt => opt.value === value);
-              let label = value;
-
-              if (matchingOption?.label) {
-                label = String(matchingOption.label);
-              } else if (matchingOption?.labelRenderer) {
-                label = String(matchingOption.labelRenderer(value));
-              } else if (group?.labelRenderer) {
-                label = String(group.labelRenderer(value));
-              }
-
-              return {
-                value,
-                label
-              };
-            });
+          } else if (!Array.isArray(filterValue)) {
+            filterValue = [filterValue];
           }
-
-          if (group?.multiple && !valuesString.startsWith('[') && !valuesString.endsWith(']')) {
-            if (group.type === 'stringList') {
-              filterValue = values;
-            } else {
-              if (!Array.isArray(filterValue)) {
-                filterValue = [filterValue];
-              }
-            }
-          }
-
-          // Fallback: if group not found but we detected array format, assume it should be multiple
-          const shouldBeMultiple = group?.multiple || (!group && valuesString.startsWith('[') && valuesString.endsWith(']'));
-
-          const filter = {
-            name,
-            type: group?.type || 'select',
-            placeholder: group?.placeholder,
-            value: filterValue,
-            multiple: shouldBeMultiple
-          };
-
-          return filter;
+        }
+
+        newFilters.push({
+          name,
+          type: group.type,
+          placeholder: group.placeholder,
+          value: filterValue,
+          multiple: group.multiple,
         });
+      }
 
-        setFilters(parsedFilters);
-        setHasInitialized(true);
-      } catch (error) {
-        setHasInitialized(true);
+      if (newFilters.length > 0) {
+        setFilters(prev => [...prev, ...newFilters]);
       }
-    } else if (filterGroups.length > 0 && !hasInitialized) {
-      // No URL params but we have groups - mark as initialized
-      setHasInitialized(true);
+
+      hasRestoredFromUrl.current = true;
+    } catch (_error) {
+      // ignore parse errors
     }
-  }, [filterGroups, hasInitialized]);
+  }, [filterGroups, initialFiltersParam]);
 
   return (
     <FilterContext.Provider value={{ filters, setFilters, filterGroups }}>
@@ -351,7 +340,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

@@ -1,9 +1,10 @@
 export * from './theme/ThemeSwitcher';
 export * from './theme/ThemeProvider';
 
+export * from "./badge"
 export * from './button';
 export * from './card';
-export * from './dialog';
+export * from './modal';
 export * from './input';
 export * from './separator';
 export * from './selectBox';
@@ -11,7 +12,6 @@ export * from './tabs';
 export * from './tooltip';
 export * from './label';
 export * from './breadcrumb';
-export * from './dialog';
 export * from './button';
 export * from './filters';
 export * from './popover';
@@ -20,4 +20,6 @@ export * from './checkbox';
 export * from './heading';
 export * from './text';
 export * from './resizeable';
-export * from './textarea';
+export * from './textarea';
+export * from "./MessageBox"
+export * from "./Panel"

package/src/core/components/{ConfirmModal.tsx → shadcn/modal/ConfirmModal.tsx}

@@ -1,7 +1,7 @@
 import { TriangleAlert } from "lucide-react"
 import React, { useRef } from "react"
-import { VModal, VModalTitle, VModalFooter } from "./shadcn"
-import { Button } from "./shadcn/button"
+import { Modal, ModalTitle, ModalFooter } from "./dialog"
+import { Button } from "../button"
 
 interface ConfirmModalProps {
     title: string
@@ -15,15 +15,15 @@ export function ConfirmModal({ title, content, onConfirm, onCancel, isOpen }: Co
     const cancelButtonRef = useRef(null)
 
     return (
-        <VModal isOpen={isOpen} onClose={onCancel} description="Confirm Modal">
+        <Modal isOpen={isOpen} onClose={onCancel} description="Confirm Modal">
             <div className="sm:flex sm:items-start p-2">
                 <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                     <TriangleAlert className="size-6 text-red-600" aria-hidden="true" />
                 </div>
                 <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                    <VModalTitle className="leading-6" show >
+                    <ModalTitle className="leading-6" show >
                         {title}
-                    </VModalTitle>
+                    </ModalTitle>
                     <div className="mt-2">
                         <div className="prose text-sm text-gray-500">
                             {content}
@@ -31,7 +31,7 @@ export function ConfirmModal({ title, content, onConfirm, onCancel, isOpen }: Co
                     </div>
                 </div>
             </div>
-            <VModalFooter align="right">
+            <ModalFooter align="right">
                 <Button
                     variant="destructive"
                     onClick={onConfirm}
@@ -45,7 +45,7 @@ export function ConfirmModal({ title, content, onConfirm, onCancel, isOpen }: Co
                 >
                     Cancel
                 </Button>
-            </VModalFooter>
-        </VModal>
+            </ModalFooter>
+        </Modal>
     )
 }

package/src/core/components/{DeleteModal.tsx → shadcn/modal/DeleteModal.tsx}

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { ConfirmModal } from "./ConfirmModal.js";
-import { useToast } from "./toast/index.js";
+import { useToast } from "../../toast/index.js";
 
 interface DeleteModalProps {
     idToDelete?: string;