@vertesia/ui 1.1.0 → 1.1.1-dev.20260505.163000Z

package/lib/vertesia-ui-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"vertesia-ui-layout.js","sources":["esm/layout/FullHeightLayout.js","esm/layout/SidebarContext.js","esm/layout/TitleBar.js","esm/i18n/instance.js","esm/layout/Navbar.js","esm/i18n/index.js","esm/layout/Sidebar.js","esm/layout/AppLayout.js","esm/layout/RegionTag.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport clsx from 'clsx';\nexport function FullHeightLayout({ className, children }) {\n    return (_jsx(\"div\", { className: clsx(\"flex flex-col\", \"h-full\", \"overflow-y-auto\", \"px-2\", className), children: children }));\n}\nFullHeightLayout.Fixed = function Fixed({ heightClass, className, children }) {\n    return (_jsx(\"div\", { className: clsx(\"w-full\", heightClass, className), children: children }));\n};\nFullHeightLayout.Body = function Body({ className, children }) {\n    return (_jsx(\"div\", { className: clsx(\"grow overflow-auto\", \"min-h-0\", \"p-2\", className), children: children }));\n};\nFullHeightLayout.VR = function VDivider({}) {\n    return (_jsx(\"div\", { className: \"w-[1px] border border-red-200\" }));\n};\nFullHeightLayout.HR = function HDivider({}) {\n    return (_jsx(\"div\", { className: \"w-full h-1 border-b border-red-200\" }));\n};\nFullHeightLayout.Tab = function Tab({ children }) {\n    return (_jsx(\"div\", { className: \"flex flex-col h-full\", children: children }));\n};\n//# sourceMappingURL=FullHeightLayout.js.map","import { createContext, useContext } from \"react\";\nexport const SidebarContext = createContext({\n    isOpen: false,\n    toggleMobile: () => void 0,\n    toggleDesktop: () => void 0,\n});\nexport function useSidebarToggle() {\n    return useContext(SidebarContext);\n}\n//# sourceMappingURL=SidebarContext.js.map","import { jsx as _jsx } from \"react/jsx-runtime\";\nexport function TitleBar({ title }) {\n    return _jsx(\"div\", { className: 'self-center text-lg font-semibold', children: title });\n}\n//# sourceMappingURL=TitleBar.js.map","import i18next from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport ar from './locales/ar.json';\nimport de from './locales/de.json';\nimport en from './locales/en.json';\nimport es from './locales/es.json';\nimport fr from './locales/fr.json';\nimport it from './locales/it.json';\nimport ja from './locales/ja.json';\nimport ko from './locales/ko.json';\nimport pt from './locales/pt.json';\nimport ru from './locales/ru.json';\nimport tr from './locales/tr.json';\nimport zh from './locales/zh.json';\nimport zhTW from './locales/zh-TW.json';\nexport const NAMESPACE = 'vertesia.ui';\n// Scoped instance — does NOT touch the global i18next singleton\nconst i18nInstance = i18next.createInstance();\nvoid i18nInstance.use(initReactI18next).init({\n    resources: {\n        ar: { [NAMESPACE]: ar },\n        de: { [NAMESPACE]: de },\n        en: { [NAMESPACE]: en },\n        es: { [NAMESPACE]: es },\n        fr: { [NAMESPACE]: fr },\n        it: { [NAMESPACE]: it },\n        ja: { [NAMESPACE]: ja },\n        ko: { [NAMESPACE]: ko },\n        pt: { [NAMESPACE]: pt },\n        ru: { [NAMESPACE]: ru },\n        tr: { [NAMESPACE]: tr },\n        zh: { [NAMESPACE]: zh },\n        'zh-TW': { [NAMESPACE]: zhTW },\n    },\n    fallbackLng: 'en',\n    ns: [NAMESPACE],\n    defaultNS: NAMESPACE,\n    interpolation: {\n        escapeValue: false, // React already escapes\n    },\n    react: {\n        useSuspense: false, // Translations are bundled, no async loading\n    },\n});\nexport { i18nInstance };\n//# sourceMappingURL=instance.js.map","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { Menu, Search } from 'lucide-react';\nimport { Button } from '@vertesia/ui/core';\nimport { useSidebarToggle } from './SidebarContext.js';\nimport { TitleBar } from './TitleBar.js';\nimport { useUITranslation } from '../i18n/index.js';\nexport function Navbar({ children, logo, onSearch, title }) {\n    return (_jsxs(\"div\", { className: \"sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b px-4 shadow-2xs sm:gap-x-6 sm:px-6 lg:px-8\", children: [_jsx(HamburgerButton, {}), _jsx(\"div\", { className: \"lg:hidden\", children: logo }), onSearch && _jsx(NavbarSeparator, { visible: 'mobile' }), _jsxs(\"div\", { className: \"flex flex-1 gap-x-4 self-stretch lg:gap-x-6\", children: [_jsx(TitleBar, { title: title }), onSearch && _jsx(SearchBox, { onSearch: onSearch }), _jsx(\"div\", { className: \"flex items-center gap-x-4 lg:gap-x-6 ml-auto\", children: children })] })] }));\n}\nfunction SearchBox({}) {\n    const { t } = useUITranslation();\n    return (_jsxs(\"form\", { className: \"relative flex flex-1\", action: \"#\", method: \"GET\", children: [_jsx(\"label\", { htmlFor: \"search-field\", className: \"sr-only\", children: t('layout.search') }), _jsx(Search, { className: \"pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400\", \"aria-hidden\": \"true\" }), _jsx(\"input\", { id: \"search-field\", className: \"block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm\", placeholder: t('layout.searchPlaceholder'), type: \"search\", name: \"search\" })] }));\n}\nexport function HamburgerButton() {\n    const { toggleDesktop, toggleMobile } = useSidebarToggle();\n    const toggle = () => {\n        if (window.innerWidth < 1024) {\n            toggleMobile();\n        }\n        else {\n            toggleDesktop();\n        }\n    };\n    return (_jsx(_Fragment, { children: _jsx(Button, { variant: 'ghost', size: 'icon', onClick: () => toggle(), className: \"p-2 rounded-full transition-colors w-full text-center \", children: _jsx(Menu, { \"aria-hidden\": \"true\", size: 24 }) }) }));\n}\nexport function NavbarSeparator({ visible }) {\n    let visibility = \"\";\n    if (visible) {\n        visibility = visible === \"mobile\" ? \"lg:hidden\" : \"hidden lg:block\";\n    }\n    return (_jsx(\"div\", { className: `h-6 w-px bg-gray-900/10 dark:bg-slate-900/0.1 ${visibility}`, \"aria-hidden\": \"true\" }));\n}\nexport function NavbarIconButton({ title, icon: Icon, onClick }) {\n    return (_jsxs(\"button\", { type: \"button\", className: \"-m-2.5 p-2.5 text-gray-400 dark:text-slate-50 hover:text-gray-500\", onClick: onClick, children: [_jsx(\"span\", { className: \"sr-only\", children: title }), _jsx(Icon, { className: \"size-6\", \"aria-hidden\": \"true\", title: title })] }));\n}\nexport function NavbarButton({ children, onClick }) {\n    return (_jsx(Button, { onClick: onClick, children: children }));\n}\nexport function NavbarLink({ href, onClick, children }) {\n    return (_jsx(\"a\", { className: \"dark:text-slate-50\", href: href, onClick: onClick, children: children }));\n}\n//# sourceMappingURL=Navbar.js.map","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useEffect } from 'react';\nimport { I18nextProvider, useTranslation } from 'react-i18next';\nimport { i18nInstance, NAMESPACE } from './instance.js';\nfunction detectLanguage(lng) {\n    return lng ?? navigator.language?.split('-')[0] ?? 'en';\n}\nexport function I18nProvider({ lng, children }) {\n    // Set language synchronously on first render to avoid flash of wrong language\n    const language = detectLanguage(lng);\n    if (i18nInstance.language !== language) {\n        void i18nInstance.changeLanguage(language);\n    }\n    // Also react to prop changes\n    useEffect(() => {\n        const lang = detectLanguage(lng);\n        if (i18nInstance.language !== lang) {\n            void i18nInstance.changeLanguage(lang);\n        }\n    }, [lng]);\n    return (_jsx(I18nextProvider, { i18n: i18nInstance, children: children }));\n}\n/**\n * Hook for components inside @vertesia/ui to get translation functions.\n * Always binds to the 'vertesia.ui' namespace on the scoped instance.\n */\nexport function useUITranslation() {\n    return useTranslation(NAMESPACE, { i18n: i18nInstance });\n}\nexport { i18nInstance, NAMESPACE } from './instance.js';\n//# sourceMappingURL=index.js.map","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport clsx from 'clsx';\nimport { useSidebarToggle } from './SidebarContext';\nimport { Dot } from 'lucide-react';\nimport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@vertesia/ui/core';\nimport { Nav } from \"@vertesia/ui/router\";\nexport function Sidebar({ children, logo, className }) {\n    return (_jsxs(\"div\", { className: clsx(className || \"bg-indigo-600 dark:bg-indigo-950\", \"flex flex-col h-full\"), children: [logo &&\n                _jsx(\"div\", { className: \"-mx-2 flex h-auto my-4 shrink-0 self-start\", children: logo }), _jsx(\"div\", { className: \"flex-1 min-h-0 overflow-hidden px-0 lg:px-2\", children: _jsx(\"nav\", { className: \"h-full flex flex-col\", children: _jsx(\"ul\", { role: \"list\", className: \"flex flex-col gap-y-2 overflow-y-auto h-full\", children: children }) }) })] }));\n}\nexport function SidebarSection({ children, title, action, isFooter = false, className }) {\n    const { isOpen } = useSidebarToggle();\n    let header = isOpen ? _jsxs(_Fragment, { children: [title || \"\", action] }) : _jsx(Dot, { className: 'size-6' });\n    return (_jsxs(\"li\", { className: isFooter ? 'mt-auto' : '', children: [title && _jsx(\"div\", { className: \"text-xs font-medium h-8 flex items-center gap-x-2 px-2 text-sidebar-foreground/70\", children: header }), _jsx(\"ul\", { \"data-sidebar\": \"menu\", className: clsx(\"flex w-full min-w-0 flex-col gap-1\", className), children: children })] }));\n}\nexport function SidebarTooltip({ children, text }) {\n    const { isOpen } = useSidebarToggle();\n    return (isOpen ? _jsx(_Fragment, { children: children }) :\n        _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: children }), _jsx(TooltipContent, { side: 'right', children: text })] }) }));\n}\nexport function SidebarItem({ external, className, tools, children, icon: Icon, href, to, current, onClick, replace }) {\n    const { toggleMobile } = useSidebarToggle();\n    const _closeSideBar = () => {\n        setTimeout(() => {\n            toggleMobile(false);\n        }, 100);\n    };\n    const onClickWrapper = (event) => {\n        if (external) {\n            window.open(href, '_blank');\n            event.preventDefault(); // Prevent default link behavior\n            event.stopPropagation(); // Stop the event from propagating\n        }\n        else if (onClick) {\n            onClick(event);\n        }\n    };\n    return (_jsx(\"li\", { children: _jsx(Nav, { to: to, onClick: _closeSideBar, replace: replace, children: _jsx(SidebarTooltip, { text: children, children: _jsxs(\"a\", { href: href, onClick: onClickWrapper, className: clsx(current\n                        ? 'bg-sidebar-accent text-sidebar-accent-foreground'\n                        : 'text-sidebar-foreground hover:text-sidebar-accent-foreground hover:bg-sidebar-accent', 'group flex gap-x-3 rounded-md px-2 py-1.5 text-sm items-center h-8', className), children: [Icon &&\n                            _jsx(Icon, { className: clsx(current\n                                    ? 'bg-sidebar-accent text-sidebar-accent-foreground'\n                                    : 'text-sidebar-foreground hover:text-sidebar-accent-foreground hover:bg-sidebar-accent', 'size-4 shrink-0'), \"aria-hidden\": \"true\" }), children, tools && _jsx(\"div\", { className: 'flex items-center ml-auto', children: tools })] }) }) }) }));\n}\n//# sourceMappingURL=Sidebar.js.map","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport clsx from 'clsx';\nimport { useEffect, useState } from 'react';\nimport { SidePanel } from '@vertesia/ui/core';\n// import { FullHeightLayout } from './FullHeightLayout.js'\nimport { Navbar } from './Navbar.js';\nimport { Sidebar } from './Sidebar.js';\nimport { SidebarContext } from './SidebarContext.js';\nexport function AppLayout({ sidebarClassName, className, title, children, logo, navbar, sidebar, mainNav }) {\n    if (localStorage.getItem('desktopSidebarOpen') === null) {\n        localStorage.setItem('desktopSidebarOpen', 'true');\n    }\n    const [sidebarOpen, setSidebarOpen] = useState(false);\n    const [desktopSidebarOpen, setDesktopSidebarOpen] = useState(localStorage.getItem('desktopSidebarOpen') === 'true');\n    const [isLargeScreen, setIsLargeScreen] = useState(window.innerWidth >= 1024);\n    useEffect(() => {\n        const handleResize = () => {\n            setIsLargeScreen(window.innerWidth >= 1024);\n        };\n        window.addEventListener('resize', handleResize);\n        return () => window.removeEventListener('resize', handleResize);\n    }, []);\n    const sidebarContextValue = {\n        isOpen: isLargeScreen ? desktopSidebarOpen : sidebarOpen,\n        toggleDesktop: (value) => {\n            if (value === undefined) {\n                setDesktopSidebarOpen(!desktopSidebarOpen);\n            }\n            else {\n                setDesktopSidebarOpen(value);\n            }\n            localStorage.setItem('desktopSidebarOpen', JSON.stringify(!desktopSidebarOpen));\n        },\n        toggleMobile: (value) => {\n            if (value === undefined) {\n                setSidebarOpen(!sidebarOpen);\n            }\n            else {\n                setSidebarOpen(value);\n            }\n        },\n    };\n    return (_jsx(_Fragment, { children: _jsx(\"div\", { className: 'flex flex-col h-screen overflow-y-hidden', children: _jsxs(SidebarContext.Provider, { value: sidebarContextValue, children: [_jsx(\"div\", { className: 'w-full', children: mainNav }), _jsxs(\"div\", { className: 'flex h-full overflow-y-auto w-full', children: [_jsx(\"div\", { className: \"lg:hidden\", children: _jsx(SidePanel, { className: 'bg-sidebar', isOpen: sidebarOpen, onClose: () => setSidebarOpen(false), side: \"left\", panelWidth: 288, resizable: false, backdrop: true, children: _jsx(Sidebar, { logo: logo, className: sidebarClassName, children: sidebar }) }) }), _jsx(\"div\", { className: `hidden lg:block relative transition-all duration-300 ${desktopSidebarOpen ? 'w-72' : 'w-12'}`, children: _jsx(Sidebar, { logo: logo, className: sidebarClassName, children: sidebar }) }), _jsxs(\"div\", { className: \"w-full h-full overflow-y-hidden\", children: [navbar ? (_jsx(Navbar, { title: title, logo: logo, children: navbar })) : null, _jsx(\"main\", { className: clsx(\"flex-1 h-full w-full relative flex flex-col\", className), children: children })] })] })] }) }) }));\n}\n//# sourceMappingURL=AppLayout.js.map","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { cn } from '@vertesia/ui/core';\nimport { Env } from '@vertesia/ui/env';\nconst regionLabels = {\n    eu: 'EU',\n    jp: 'JP',\n};\nexport function RegionTag({ className }) {\n    const region = Env.region;\n    // Only show for non-US regions (US is default, no need to display)\n    if (!region || region === 'us')\n        return null;\n    return (_jsx(\"div\", { className: cn('text-[0.6rem] font-semibold px-1.5 rounded-3xl leading-4', 'bg-info text-white', className), children: regionLabels[region] ?? region.toUpperCase() }));\n}\n//# sourceMappingURL=RegionTag.js.map"],"names":["FullHeightLayout","className","children","_jsx","clsx","Fixed","heightClass","Body","VR","HR","Tab","SidebarContext","createContext","isOpen","toggleMobile","toggleDesktop","useSidebarToggle","useContext","TitleBar","title","NAMESPACE","i18nInstance","i18next","createInstance","Navbar","logo","onSearch","_jsxs","HamburgerButton","NavbarSeparator","visible","SearchBox","t","useTranslation","i18n","action","method","htmlFor","Search","id","placeholder","type","name","_Fragment","Button","variant","size","onClick","window","innerWidth","Menu","visibility","NavbarIconButton","icon","Icon","NavbarButton","NavbarLink","href","Sidebar","role","SidebarSection","isFooter","header","Dot","SidebarTooltip","text","TooltipProvider","Tooltip","TooltipTrigger","asChild","TooltipContent","side","SidebarItem","external","tools","to","current","replace","Nav","setTimeout","event","open","preventDefault","stopPropagation","AppLayout","sidebarClassName","navbar","sidebar","mainNav","localStorage","getItem","setItem","sidebarOpen","setSidebarOpen","useState","desktopSidebarOpen","setDesktopSidebarOpen","isLargeScreen","setIsLargeScreen","useEffect","handleResize","addEventListener","removeEventListener","sidebarContextValue","value","undefined","JSON","stringify","Provider","SidePanel","onClose","panelWidth","resizable","backdrop","use","initReactI18next","init","resources","ar","de","en","es","fr","it","ja","ko","pt","ru","tr","zh","fallbackLng","ns","defaultNS","interpolation","escapeValue","react","useSuspense","regionLabels","eu","jp","RegionTag","region","Env","cn","toUpperCase"],"mappings":"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"}
+{"version":3,"file":"vertesia-ui-layout.js","sources":["esm/layout/FullHeightLayout.js","esm/layout/SidebarContext.js","esm/layout/TitleBar.js","esm/i18n/instance.js","esm/layout/Navbar.js","esm/i18n/index.js","esm/layout/Sidebar.js","esm/layout/AppLayout.js","esm/layout/RegionTag.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport clsx from 'clsx';\nexport function FullHeightLayout({ className, children }) {\n    return (_jsx(\"div\", { className: clsx(\"flex flex-col\", \"h-full\", \"overflow-y-auto\", \"px-2\", className), children: children }));\n}\nFullHeightLayout.Fixed = function Fixed({ heightClass, className, children }) {\n    return (_jsx(\"div\", { className: clsx(\"w-full\", heightClass, className), children: children }));\n};\nFullHeightLayout.Body = function Body({ className, children }) {\n    return (_jsx(\"div\", { className: clsx(\"grow overflow-auto\", \"min-h-0\", \"p-2\", className), children: children }));\n};\nFullHeightLayout.VR = function VDivider({}) {\n    return (_jsx(\"div\", { className: \"w-[1px] border border-red-200\" }));\n};\nFullHeightLayout.HR = function HDivider({}) {\n    return (_jsx(\"div\", { className: \"w-full h-1 border-b border-red-200\" }));\n};\nFullHeightLayout.Flex = function Flex({ className, children }) {\n    return (_jsx(\"div\", { className: clsx(\"grow flex flex-col\", \"overflow-hidden min-h-0\", \"p-2\", className), children: children }));\n};\nFullHeightLayout.Tab = function Tab({ children }) {\n    return (_jsx(\"div\", { className: \"flex flex-col h-full\", children: children }));\n};\n//# sourceMappingURL=FullHeightLayout.js.map","import { createContext, useContext } from \"react\";\nexport const SidebarContext = createContext({\n    isOpen: false,\n    toggleMobile: () => void 0,\n    toggleDesktop: () => void 0,\n});\nexport function useSidebarToggle() {\n    return useContext(SidebarContext);\n}\n//# sourceMappingURL=SidebarContext.js.map","import { jsx as _jsx } from \"react/jsx-runtime\";\nexport function TitleBar({ title }) {\n    return _jsx(\"div\", { className: 'self-center text-lg font-semibold', children: title });\n}\n//# sourceMappingURL=TitleBar.js.map","import i18next from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport ar from './locales/ar.json';\nimport de from './locales/de.json';\nimport en from './locales/en.json';\nimport es from './locales/es.json';\nimport fr from './locales/fr.json';\nimport it from './locales/it.json';\nimport ja from './locales/ja.json';\nimport ko from './locales/ko.json';\nimport pt from './locales/pt.json';\nimport ru from './locales/ru.json';\nimport tr from './locales/tr.json';\nimport zh from './locales/zh.json';\nimport zhTW from './locales/zh-TW.json';\nexport const NAMESPACE = 'vertesia.ui';\n// Scoped instance — does NOT touch the global i18next singleton\nconst i18nInstance = i18next.createInstance();\nvoid i18nInstance.use(initReactI18next).init({\n    resources: {\n        ar: { [NAMESPACE]: ar },\n        de: { [NAMESPACE]: de },\n        en: { [NAMESPACE]: en },\n        es: { [NAMESPACE]: es },\n        fr: { [NAMESPACE]: fr },\n        it: { [NAMESPACE]: it },\n        ja: { [NAMESPACE]: ja },\n        ko: { [NAMESPACE]: ko },\n        pt: { [NAMESPACE]: pt },\n        ru: { [NAMESPACE]: ru },\n        tr: { [NAMESPACE]: tr },\n        zh: { [NAMESPACE]: zh },\n        'zh-TW': { [NAMESPACE]: zhTW },\n    },\n    fallbackLng: 'en',\n    ns: [NAMESPACE],\n    defaultNS: NAMESPACE,\n    interpolation: {\n        escapeValue: false, // React already escapes\n    },\n    react: {\n        useSuspense: false, // Translations are bundled, no async loading\n    },\n});\nexport { i18nInstance };\n//# sourceMappingURL=instance.js.map","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { Menu, Search } from 'lucide-react';\nimport { Button } from '@vertesia/ui/core';\nimport { useSidebarToggle } from './SidebarContext.js';\nimport { TitleBar } from './TitleBar.js';\nimport { useUITranslation } from '../i18n/index.js';\nexport function Navbar({ children, logo, onSearch, title }) {\n    return (_jsxs(\"div\", { className: \"sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b px-4 shadow-2xs sm:gap-x-6 sm:px-6 lg:px-8\", children: [_jsx(HamburgerButton, {}), _jsx(\"div\", { className: \"lg:hidden\", children: logo }), onSearch && _jsx(NavbarSeparator, { visible: 'mobile' }), _jsxs(\"div\", { className: \"flex flex-1 gap-x-4 self-stretch lg:gap-x-6\", children: [_jsx(TitleBar, { title: title }), onSearch && _jsx(SearchBox, { onSearch: onSearch }), _jsx(\"div\", { className: \"flex items-center gap-x-4 lg:gap-x-6 ml-auto\", children: children })] })] }));\n}\nfunction SearchBox({}) {\n    const { t } = useUITranslation();\n    return (_jsxs(\"form\", { className: \"relative flex flex-1\", action: \"#\", method: \"GET\", children: [_jsx(\"label\", { htmlFor: \"search-field\", className: \"sr-only\", children: t('layout.search') }), _jsx(Search, { className: \"pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400\", \"aria-hidden\": \"true\" }), _jsx(\"input\", { id: \"search-field\", className: \"block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm\", placeholder: t('layout.searchPlaceholder'), type: \"search\", name: \"search\" })] }));\n}\nexport function HamburgerButton() {\n    const { toggleDesktop, toggleMobile } = useSidebarToggle();\n    const toggle = () => {\n        if (window.innerWidth < 1024) {\n            toggleMobile();\n        }\n        else {\n            toggleDesktop();\n        }\n    };\n    return (_jsx(_Fragment, { children: _jsx(Button, { variant: 'ghost', size: 'icon', onClick: () => toggle(), className: \"p-2 rounded-full transition-colors w-full text-center \", children: _jsx(Menu, { \"aria-hidden\": \"true\", size: 24 }) }) }));\n}\nexport function NavbarSeparator({ visible }) {\n    let visibility = \"\";\n    if (visible) {\n        visibility = visible === \"mobile\" ? \"lg:hidden\" : \"hidden lg:block\";\n    }\n    return (_jsx(\"div\", { className: `h-6 w-px bg-gray-900/10 dark:bg-slate-900/0.1 ${visibility}`, \"aria-hidden\": \"true\" }));\n}\nexport function NavbarIconButton({ title, icon: Icon, onClick }) {\n    return (_jsxs(\"button\", { type: \"button\", className: \"-m-2.5 p-2.5 text-gray-400 dark:text-slate-50 hover:text-gray-500\", onClick: onClick, children: [_jsx(\"span\", { className: \"sr-only\", children: title }), _jsx(Icon, { className: \"size-6\", \"aria-hidden\": \"true\", title: title })] }));\n}\nexport function NavbarButton({ children, onClick }) {\n    return (_jsx(Button, { onClick: onClick, children: children }));\n}\nexport function NavbarLink({ href, onClick, children }) {\n    return (_jsx(\"a\", { className: \"dark:text-slate-50\", href: href, onClick: onClick, children: children }));\n}\n//# sourceMappingURL=Navbar.js.map","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useEffect } from 'react';\nimport { I18nextProvider, useTranslation } from 'react-i18next';\nimport { i18nInstance, NAMESPACE } from './instance.js';\nfunction detectLanguage(lng) {\n    return lng ?? navigator.language?.split('-')[0] ?? 'en';\n}\nexport function I18nProvider({ lng, children }) {\n    // Set language synchronously on first render to avoid flash of wrong language\n    const language = detectLanguage(lng);\n    if (i18nInstance.language !== language) {\n        void i18nInstance.changeLanguage(language);\n    }\n    // Also react to prop changes\n    useEffect(() => {\n        const lang = detectLanguage(lng);\n        if (i18nInstance.language !== lang) {\n            void i18nInstance.changeLanguage(lang);\n        }\n    }, [lng]);\n    return (_jsx(I18nextProvider, { i18n: i18nInstance, children: children }));\n}\n/**\n * Hook for components inside @vertesia/ui to get translation functions.\n * Always binds to the 'vertesia.ui' namespace on the scoped instance.\n */\nexport function useUITranslation() {\n    return useTranslation(NAMESPACE, { i18n: i18nInstance });\n}\nexport { i18nInstance, NAMESPACE } from './instance.js';\n//# sourceMappingURL=index.js.map","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport clsx from 'clsx';\nimport { useSidebarToggle } from './SidebarContext';\nimport { Dot } from 'lucide-react';\nimport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@vertesia/ui/core';\nimport { Nav } from \"@vertesia/ui/router\";\nexport function Sidebar({ children, logo, className }) {\n    return (_jsxs(\"div\", { className: clsx(className || \"bg-indigo-600 dark:bg-indigo-950\", \"flex flex-col h-full\"), children: [logo &&\n                _jsx(\"div\", { className: \"-mx-2 flex h-auto my-4 shrink-0 self-start\", children: logo }), _jsx(\"div\", { className: \"flex-1 min-h-0 overflow-hidden px-0 lg:px-2\", children: _jsx(\"nav\", { className: \"h-full flex flex-col\", children: _jsx(\"ul\", { role: \"list\", className: \"flex flex-col gap-y-2 overflow-y-auto h-full\", children: children }) }) })] }));\n}\nexport function SidebarSection({ children, title, action, isFooter = false, className }) {\n    const { isOpen } = useSidebarToggle();\n    let header = isOpen ? _jsxs(_Fragment, { children: [title || \"\", action] }) : _jsx(Dot, { className: 'size-6' });\n    return (_jsxs(\"li\", { className: isFooter ? 'mt-auto' : '', children: [title && _jsx(\"div\", { className: \"text-xs font-medium h-8 flex items-center gap-x-2 px-2 text-sidebar-foreground/70\", children: header }), _jsx(\"ul\", { \"data-sidebar\": \"menu\", className: clsx(\"flex w-full min-w-0 flex-col gap-1\", className), children: children })] }));\n}\nexport function SidebarTooltip({ children, text }) {\n    const { isOpen } = useSidebarToggle();\n    return (isOpen ? _jsx(_Fragment, { children: children }) :\n        _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: children }), _jsx(TooltipContent, { side: 'right', children: text })] }) }));\n}\nexport function SidebarItem({ external, className, tools, children, icon: Icon, href, to, current, onClick, replace }) {\n    const { toggleMobile } = useSidebarToggle();\n    const _closeSideBar = () => {\n        setTimeout(() => {\n            toggleMobile(false);\n        }, 100);\n    };\n    const onClickWrapper = (event) => {\n        if (external) {\n            window.open(href, '_blank');\n            event.preventDefault(); // Prevent default link behavior\n            event.stopPropagation(); // Stop the event from propagating\n        }\n        else if (onClick) {\n            onClick(event);\n        }\n    };\n    return (_jsx(\"li\", { children: _jsx(Nav, { to: to, onClick: _closeSideBar, replace: replace, children: _jsx(SidebarTooltip, { text: children, children: _jsxs(\"a\", { href: href, onClick: onClickWrapper, className: clsx(current\n                        ? 'bg-sidebar-accent text-sidebar-accent-foreground'\n                        : 'text-sidebar-foreground hover:text-sidebar-accent-foreground hover:bg-sidebar-accent', 'group flex gap-x-3 rounded-md px-2 py-1.5 text-sm items-center h-8', className), children: [Icon &&\n                            _jsx(Icon, { className: clsx(current\n                                    ? 'bg-sidebar-accent text-sidebar-accent-foreground'\n                                    : 'text-sidebar-foreground hover:text-sidebar-accent-foreground hover:bg-sidebar-accent', 'size-4 shrink-0'), \"aria-hidden\": \"true\" }), children, tools && _jsx(\"div\", { className: 'flex items-center ml-auto', children: tools })] }) }) }) }));\n}\n//# sourceMappingURL=Sidebar.js.map","import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport clsx from 'clsx';\nimport { useEffect, useState } from 'react';\nimport { SidePanel } from '@vertesia/ui/core';\n// import { FullHeightLayout } from './FullHeightLayout.js'\nimport { Navbar } from './Navbar.js';\nimport { Sidebar } from './Sidebar.js';\nimport { SidebarContext } from './SidebarContext.js';\nexport function AppLayout({ sidebarClassName, className, title, children, logo, navbar, sidebar, mainNav }) {\n    if (localStorage.getItem('desktopSidebarOpen') === null) {\n        localStorage.setItem('desktopSidebarOpen', 'true');\n    }\n    const [sidebarOpen, setSidebarOpen] = useState(false);\n    const [desktopSidebarOpen, setDesktopSidebarOpen] = useState(localStorage.getItem('desktopSidebarOpen') === 'true');\n    const [isLargeScreen, setIsLargeScreen] = useState(window.innerWidth >= 1024);\n    useEffect(() => {\n        const handleResize = () => {\n            setIsLargeScreen(window.innerWidth >= 1024);\n        };\n        window.addEventListener('resize', handleResize);\n        return () => window.removeEventListener('resize', handleResize);\n    }, []);\n    const sidebarContextValue = {\n        isOpen: isLargeScreen ? desktopSidebarOpen : sidebarOpen,\n        toggleDesktop: (value) => {\n            if (value === undefined) {\n                setDesktopSidebarOpen(!desktopSidebarOpen);\n            }\n            else {\n                setDesktopSidebarOpen(value);\n            }\n            localStorage.setItem('desktopSidebarOpen', JSON.stringify(!desktopSidebarOpen));\n        },\n        toggleMobile: (value) => {\n            if (value === undefined) {\n                setSidebarOpen(!sidebarOpen);\n            }\n            else {\n                setSidebarOpen(value);\n            }\n        },\n    };\n    return (_jsx(_Fragment, { children: _jsx(\"div\", { className: 'flex flex-col h-screen overflow-y-hidden', children: _jsxs(SidebarContext.Provider, { value: sidebarContextValue, children: [_jsx(\"div\", { className: 'w-full', children: mainNav }), _jsxs(\"div\", { className: 'flex h-full overflow-y-auto w-full', children: [_jsx(\"div\", { className: \"lg:hidden\", children: _jsx(SidePanel, { className: 'bg-sidebar', isOpen: sidebarOpen, onClose: () => setSidebarOpen(false), side: \"left\", panelWidth: 288, resizable: false, backdrop: true, children: _jsx(Sidebar, { logo: logo, className: sidebarClassName, children: sidebar }) }) }), _jsx(\"div\", { className: `hidden lg:block relative transition-all duration-300 ${desktopSidebarOpen ? 'w-72' : 'w-12'}`, children: _jsx(Sidebar, { logo: logo, className: sidebarClassName, children: sidebar }) }), _jsxs(\"div\", { className: \"w-full h-full overflow-y-hidden\", children: [navbar ? (_jsx(Navbar, { title: title, logo: logo, children: navbar })) : null, _jsx(\"main\", { className: clsx(\"flex-1 h-full w-full relative flex flex-col\", className), children: children })] })] })] }) }) }));\n}\n//# sourceMappingURL=AppLayout.js.map","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { cn } from '@vertesia/ui/core';\nimport { Env } from '@vertesia/ui/env';\nconst regionLabels = {\n    eu: 'EU',\n    jp: 'JP',\n};\nexport function RegionTag({ className }) {\n    const region = Env.region;\n    // Only show for non-US regions (US is default, no need to display)\n    if (!region || region === 'us')\n        return null;\n    return (_jsx(\"div\", { className: cn('text-[0.6rem] font-semibold px-1.5 rounded-3xl leading-4', 'bg-info text-white', className), children: regionLabels[region] ?? region.toUpperCase() }));\n}\n//# sourceMappingURL=RegionTag.js.map"],"names":["FullHeightLayout","className","children","_jsx","clsx","Fixed","heightClass","Body","VR","HR","Flex","Tab","SidebarContext","createContext","isOpen","toggleMobile","toggleDesktop","useSidebarToggle","useContext","TitleBar","title","NAMESPACE","i18nInstance","i18next","createInstance","Navbar","logo","onSearch","_jsxs","HamburgerButton","NavbarSeparator","visible","SearchBox","t","useTranslation","i18n","action","method","htmlFor","Search","id","placeholder","type","name","_Fragment","Button","variant","size","onClick","window","innerWidth","Menu","visibility","NavbarIconButton","icon","Icon","NavbarButton","NavbarLink","href","Sidebar","role","SidebarSection","isFooter","header","Dot","SidebarTooltip","text","TooltipProvider","Tooltip","TooltipTrigger","asChild","TooltipContent","side","SidebarItem","external","tools","to","current","replace","Nav","setTimeout","event","open","preventDefault","stopPropagation","AppLayout","sidebarClassName","navbar","sidebar","mainNav","localStorage","getItem","setItem","sidebarOpen","setSidebarOpen","useState","desktopSidebarOpen","setDesktopSidebarOpen","isLargeScreen","setIsLargeScreen","useEffect","handleResize","addEventListener","removeEventListener","sidebarContextValue","value","undefined","JSON","stringify","Provider","SidePanel","onClose","panelWidth","resizable","backdrop","use","initReactI18next","init","resources","ar","de","en","es","fr","it","ja","ko","pt","ru","tr","zh","fallbackLng","ns","defaultNS","interpolation","escapeValue","react","useSuspense","regionLabels","eu","jp","RegionTag","region","Env","cn","toUpperCase"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.1.0",
+  "version": "1.1.1-dev.20260505.163000Z",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -86,10 +86,10 @@
     "vega": "^6.2.0",
     "vega-embed": "^7.1.0",
     "vega-lite": "^6.4.1",
-    "@vertesia/fusion-ux": "1.1.0",
-    "@vertesia/json": "1.1.0",
-    "@vertesia/common": "1.1.0",
-    "@vertesia/client": "1.1.0"
+    "@vertesia/client": "1.1.1-dev.20260505.163000Z",
+    "@vertesia/common": "1.1.1-dev.20260505.163000Z",
+    "@vertesia/fusion-ux": "1.1.1-dev.20260505.163000Z",
+    "@vertesia/json": "1.1.1-dev.20260505.163000Z"
   },
   "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": "^25.6.0",
+    "@types/node": "^24.1.0",
     "@types/papaparse": "^5.5.2",
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",

package/src/features/agent/PayloadBuilder.tsx

@@ -6,6 +6,7 @@ import Ajv, { ValidateFunction } from "ajv";
 import React, { createContext, useContext, useState, useSyncExternalStore } from "react";
 
 export type WorkflowMode = 'start' | 'schedule';
+type ModelOptions = NonNullable<WorkflowInteractionVars["config"]["model_options"]>;
 
 export interface ScheduledWorkflowConfig {
     name: string;
@@ -47,6 +48,7 @@ export class PayloadBuilder {
     _interaction: InCodeInteraction | undefined;
     _environment: ExecutionEnvironmentRef | undefined;
     _model: string = '';
+    _model_options: ModelOptions | undefined;
     _tool_names: string[] = [];
     _data: JSONObject | undefined;
     _mode: WorkflowMode = 'start';
@@ -79,6 +81,7 @@ export class PayloadBuilder {
         builder._data = this._data;
         builder._environment = this._environment;
         builder._model = this._model;
+        builder._model_options = this._model_options ? { ...this._model_options } as ModelOptions : undefined;
         builder._tool_names = [...this._tool_names];
         builder._interactive = this._interactive;
         builder._debug_mode = this._debug_mode;
@@ -251,6 +254,7 @@ export class PayloadBuilder {
         this._non_blocking_subagents = context.non_blocking_subagents ?? true;
         this._checkpoint_tokens = context.checkpoint_tokens;
         this._user_channels = context.user_channels;
+        this._model_options = context.config?.model_options as ModelOptions | undefined;
         this.collection = context.collection_id ?? undefined;
 
         // we need to trigger the setter to deal with default models
@@ -273,6 +277,7 @@ export class PayloadBuilder {
             // Reset the validator when schema changes
             this._inputValidator = undefined;
             if (interaction && !this._preserveRunValues) {
+                this._model_options = interaction.model_options as ModelOptions | undefined;
                 if (interaction.runtime?.environment) {
                     const envId = interaction.runtime.environment;
                     this.vertesia.environments.retrieve(envId).then((environment) => this.environment = environment);
@@ -313,6 +318,15 @@ export class PayloadBuilder {
         }
     }
 
+    get model_options() {
+        return this._model_options;
+    }
+
+    set model_options(modelOptions: ModelOptions | undefined) {
+        this._model_options = modelOptions;
+        this.onStateChanged();
+    }
+
     get tool_names() {
         return this._tool_names;
     }
@@ -350,6 +364,7 @@ export class PayloadBuilder {
     setInteraction(interaction: InCodeInteraction | undefined) { this.interaction = interaction; }
     setEnvironment(environment: ExecutionEnvironmentRef | undefined) { this.environment = environment; }
     setModel(model: string | undefined) { this.model = model; }
+    setModelOptions(modelOptions: ModelOptions | undefined) { this.model_options = modelOptions; }
     setToolNames(tools: string[]) { this.tool_names = tools; }
     setCollection(collection: string | undefined) { this.collection = collection; }
     setInteractive(interactive: boolean) { this.interactive = interactive; }
@@ -427,6 +442,7 @@ export class PayloadBuilder {
         this._collection = undefined;
         this._preserveRunValues = false;
         this._model = '';
+        this._model_options = undefined;
         this._environment = undefined;
         this._tool_names = [];
         this._interaction = undefined;

package/src/features/agent/chat/DocumentPanel.tsx

@@ -44,7 +44,7 @@ function DocumentPanelComponent({
                 client.store.objects.getObjectText(docId),
                 client.store.objects.retrieve(docId),
             ]);
-            setContent(textResult.text);
+            setContent(textResult.text ?? null);
             const name = obj.name;
             setDocName(name);
             if (name) onUpdateDocumentTitle?.(docId, name);

package/src/features/facets/AgentRunnerFacetsNav.tsx

@@ -13,6 +13,8 @@ interface AgentRunnerFacetsNavProps {
         interactions?: any[];
     };
     search: SearchInterface;
+    actions?: React.ReactNode[];
+    selectionCount?: number;
 }
 
 // Hook to create filter groups for agent runners
@@ -95,7 +97,7 @@ export function createAgentRunnerFilterHandler(search: SearchInterface) {
 }
 
 // Legacy component for backward compatibility
-export function AgentRunnerFacetsNav({ facets, search }: AgentRunnerFacetsNavProps) {
+export function AgentRunnerFacetsNav({ facets, search, selectionCount, actions }: AgentRunnerFacetsNavProps) {
     const [filters, setFilters] = useState<BaseFilter[]>([]);
     const didMountRef = useRef(false);
     const skipNextSearchRef = useRef(
@@ -128,15 +130,35 @@ export function AgentRunnerFacetsNav({ facets, search }: AgentRunnerFacetsNavPro
             filters={filters}
             setFilters={setFilters}
         >
-            <div className='flex justify-between mb-1'>
-                <div className='flex gap-2 items-center'>
+            <div className='gap-2 items-center w-full'>
+                <div className='flex justify-between mb-1'>
                     <FilterBtn />
-                    <FilterBar />
-                    <FilterClear />
+                    <div className='flex justify-end'>
+                        {!selectionCount && (
+                            <div className="flex items-center justify-between px-2 py-1">
+                                <div className="text-sm text-muted-foreground">
+                                    {search.initialized ? `${search.totalCount} agent runs` : 'Loading agent runs...'}
+                                </div>
+                            </div>
+                        )}
+                        {actions && actions.length > 0 ? (
+                            <div className='flex items-center gap-2 mb-1 mr-2'>
+                                {actions.map((action, index) => (
+                                    <div key={index}>{action}</div>
+                                ))}
+                            </div>
+                        ) : null}
+                        <Button onClick={handleRefetch} variant='outline' title="Refresh">
+                            <RefreshCw className="size-5" />
+                        </Button>
+                    </div>
                 </div>
-                <Button onClick={handleRefetch} variant='outline' title="Refresh">
-                    <RefreshCw className="size-5" />
-                </Button>
+                {filters.length > 0 && (
+                    <div className='flex items-center gap-2 mb-1'>
+                        <FilterBar />
+                        <FilterClear />
+                    </div>
+                )}
             </div>
 
         </FilterProvider>

package/src/features/facets/DocumentsFacetsNav.tsx

@@ -1,21 +1,20 @@
 import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup, useIsInModal } from '@vertesia/ui/core';
 import { useState } from 'react';
+import { ComputedFacetResponse } from '@vertesia/common';
 import { useTypeRegistry } from '../store/types/TypeRegistryProvider.js';
 import { VStringFacet } from './utils/VStringFacet';
 import { VTypeFacet } from './utils/VTypeFacet';
 import { SearchInterface } from './utils/SearchInterface';
 
 interface DocumentsFacetsNavProps {
-    facets: {
-        type?: any[];
-        status?: any[];
-        role?: any[];
-        location?: any[];
-        tags?: string[];
-    };
+    facets: ComputedFacetResponse;
     search: SearchInterface;
 }
 
+function getBuckets(value: ComputedFacetResponse[string]) {
+    return Array.isArray(value) ? value : [];
+}
+
 // Hook to create filter groups for documents
 export function useDocumentFilterGroups(facets: DocumentsFacetsNavProps['facets']): FilterGroup[] {
     const { registry: typeRegistry } = useTypeRegistry();
@@ -37,7 +36,7 @@ export function useDocumentFilterGroups(facets: DocumentsFacetsNavProps['facets'
 
     if (facets.type) {
         const typeFilterGroup = VTypeFacet({
-            buckets: facets.type || [],
+            buckets: getBuckets(facets.type),
             typeRegistry: typeRegistry,
             type: 'select',
             multiple: true
@@ -48,7 +47,7 @@ export function useDocumentFilterGroups(facets: DocumentsFacetsNavProps['facets'
     if (facets.status) {
         const statusFilterGroup = VStringFacet({
             search: null as any, // This will be provided by the search context
-            buckets: facets.status || [],
+            buckets: getBuckets(facets.status),
             name: 'status',
             placeholder: 'Status',
             type: 'select',
@@ -62,9 +61,9 @@ export function useDocumentFilterGroups(facets: DocumentsFacetsNavProps['facets'
             name: 'tags',
             placeholder: 'Tags',
             type: 'stringList',
-            options: facets.tags.map((tag: string) => ({
-                label: tag,
-                value: tag
+            options: getBuckets(facets.tags).map((tag) => ({
+                label: tag._id,
+                value: tag._id
             }))
         });
     }

package/src/features/facets/InteractionsFacetsNav.tsx

@@ -1,11 +1,10 @@
 import { Filter as BaseFilter, FilterProvider, FilterBtn, FilterBar, FilterClear, FilterGroup } from '@vertesia/ui/core';
+import type { ComputedFacetResponse } from '@vertesia/common';
 import { useState } from 'react';
 import { SearchInterface } from './utils/SearchInterface';
 
 interface InteractionsFacetsNavProps {
-    facets: {
-        tags?: any[];
-    };
+    facets: ComputedFacetResponse;
     search: SearchInterface;
     env?: string | null;
 }
@@ -118,4 +117,4 @@ export function InteractionsFacetsNav({ facets, search }: InteractionsFacetsNavP
             </div>
         </FilterProvider>
     );
-}
+}

package/src/features/facets/RunsFacetsNav.tsx

@@ -19,6 +19,8 @@ interface RunsFacetsNavProps {
         created_by?: any[];
     };
     search: SearchInterface;
+    actions?: React.ReactNode[];
+    selectionCount?: number;
 }
 
 // Hook to create filter groups for runs
@@ -181,7 +183,7 @@ export function useRunsFilterHandler(search: SearchInterface) {
 }
 
 // Legacy component for backward compatibility
-export function RunsFacetsNav({ facets, search }: RunsFacetsNavProps) {
+export function RunsFacetsNav({ facets, search, actions, selectionCount }: RunsFacetsNavProps) {
     const [filters, setFilters] = useState<BaseFilter[]>([]);
     const filterGroups = useRunsFilterGroups(facets);
     const handleFilterLogic = useRunsFilterHandler(search);
@@ -202,15 +204,36 @@ export function RunsFacetsNav({ facets, search }: RunsFacetsNavProps) {
             filters={filters}
             setFilters={handleFilterChange}
         >
-            <div className='flex justify-between mb-1 sticky top-2 py-2 z-10 bg-background'>
-                <div className='flex gap-2 items-center'>
+            <div className='gap-2 items-center w-full'>
+                <div className='flex justify-between mb-1'>
                     <FilterBtn />
-                    <FilterBar />
-                    <FilterClear />
+                    <div className='flex justify-end'>
+                        {!selectionCount && (
+                            <div className="flex items-center justify-between px-2 py-1">
+                                <div className="text-sm text-muted">
+                                    {search.initialized ? `${search.totalCount} calls` : 'Loading calls...'}
+                                </div>
+                            </div>
+                        )}
+                        {actions && actions.length > 0 ? (
+                            <div className='flex items-center gap-2 mb-1 mr-2'>
+                                {actions.map((action, index) => (
+                                    <div key={index}>{action}</div>
+                                ))}
+                            </div>
+                        ) : null}
+                        <Button onClick={handleRefetch} variant='outline' title="Refresh">
+                            <RefreshCw className="size-5" />
+                        </Button>
+                    </div>
                 </div>
-                <Button onClick={handleRefetch} variant='outline' title="Refresh">
-                    <RefreshCw className="size-5" />
-                </Button>
+                {filters.length > 0 && (
+                    <div className='flex items-center gap-2 mb-1'>
+                        <FilterBar />
+                        <FilterClear />
+                    </div>
+                )}
+
             </div>
         </FilterProvider>
     );

package/src/features/facets/utils/SearchInterface.tsx

@@ -8,5 +8,7 @@ export interface SearchInterface {
     search(applyDefaults?: boolean): Promise<boolean | undefined>;
     setDefaultKeys(keys: defaultKeys[]): void;
     readonly isRunning: boolean;
+    readonly initialized?: boolean;
+    readonly totalCount?: number;
     query: Record<string, any>;
 }

package/src/features/store/objects/DocumentSearchResults.tsx

@@ -119,6 +119,7 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
     const [filters, setFilters] = useState<BaseFilter[]>([]);
 
     const loadMoreRef = useRef<HTMLDivElement>(null);
+    const scrollRef = useRef<HTMLDivElement>(null);
 
     // Trigger initial search when component mounts
     useEffect(() => {
@@ -248,7 +249,7 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
     }
 
     return (
-        <div className="flex flex-col gap-y-2">
+        <div className="flex flex-col gap-y-2 flex-1 min-h-0 ">
             <OverviewDrawer object={selectedObject} onClose={() => setSelectedObject(null)} />
             {
                 error && <ErrorBox title={t('store.error')}>{error.message}</ErrorBox>
@@ -265,26 +266,30 @@ export function DocumentSearchResults({ layout, onUpload, allowFilter = true, al
                 handleRefetch={handleRefetch}
                 setIsGridView={setIsGridView}
             />
-            <DocumentTable
-                objects={objects}
-                isLoading={!objects.length && isLoading}
-                layout={actualLayout}
-                onRowClick={onRowClick}
-                previewObject={previewObject}
-                selectedObject={selectedObject}
-                onUpload={onUpload}
-                isGridView={isGridView}
-                collectionId={searchContext.collectionId} // Pass the collection ID from context
-            />
-            {hasMore ? (
-                <div ref={loadMoreRef} className="w-full flex justify-center" >
-                    <Spinner size='xl' />
-                </div>
-            ) : (
-                <div className="text-muted text-center text-sm py-1">
-                    {`All ${objects.length} objects loaded.`}
+            <div className="flex flex-col w-full flex-1 min-h-0 border rounded-md mb-2">
+                <div ref={scrollRef} className="flex-1 min-h-0 overflow-y-auto">
+                    <DocumentTable
+                        objects={objects}
+                        isLoading={!objects.length && isLoading}
+                        layout={actualLayout}
+                        onRowClick={onRowClick}
+                        previewObject={previewObject}
+                        selectedObject={selectedObject}
+                        onUpload={onUpload}
+                        isGridView={isGridView}
+                        collectionId={searchContext.collectionId}
+                    />
+                    {hasMore ? (
+                        <div ref={loadMoreRef} className="w-full flex justify-center" >
+                            <Spinner size='xl' />
+                        </div>
+                    ) : (
+                        <div className="text-muted text-center text-sm py-1">
+                            {`All ${objects.length} objects loaded.`}
+                        </div>
+                    )}
                 </div>
-            )}
+            </div>
         </div>
     );
 }

package/src/features/store/objects/layout/documentLayout.tsx

@@ -1,5 +1,5 @@
 import { ColumnLayout, ContentObjectItem } from "@vertesia/common";
-import { Table, TBody } from "@vertesia/ui/core";
+import { Table, TBody, THead } from "@vertesia/ui/core";
 import { useUITranslation } from '../../../../i18n/index.js';
 import { CheckIcon } from "lucide-react";
 import { ChangeEvent } from "react";
@@ -24,15 +24,15 @@ interface ViewProps {
 export function DocumentTableView({ objects, selection, isLoading, columns, onRowClick, highlightRow, selectedObject, toggleAll, onSelectionChange }: ViewProps) {
     const { t } = useUITranslation();
     return (
-        <Table className="w-full border-t">
-            <thead>
+        <Table className="w-full">
+            <THead>
                 <tr>
                     {selection && <th><input type="checkbox" onChange={toggleAll} /></th>}
                     {columns.map((col) => (
                         <th key={col.name}>{col.name}</th>
                     ))}
                 </tr>
-            </thead>
+            </THead>
             <TBody isLoading={isLoading} columns={columns.length + 1}>
                 {
                     objects?.map((obj: ContentObjectItem) => {

package/src/features/store/objects/search/DocumentSearchContext.ts

@@ -1,8 +1,8 @@
 import { createContext, useContext } from 'react';
 
 import { SharedState, useWatchSharedState } from '@vertesia/ui/core';
-import { ComputeFacetsResponse, ZenoClient } from '@vertesia/client';
-import { ComplexSearchPayload, ComplexSearchQuery, ComputeObjectFacetPayload, ContentObjectItem, FacetBucket, FacetSpec, ObjectSearchQuery } from '@vertesia/common';
+import { ZenoClient } from '@vertesia/client';
+import { ComplexSearchPayload, ComplexSearchQuery, ComputeObjectFacetPayload, ComputedFacetResponse, ContentObjectItem, FacetBucket, FacetSpec, ObjectSearchQuery } from '@vertesia/common';
 import { SearchInterface } from '@vertesia/ui/features'
 
 interface DocumentSearchResult {
@@ -16,7 +16,7 @@ interface DocumentSearchResult {
 export class DocumentSearch implements SearchInterface {
 
     collectionId?: string;
-    facets = new SharedState<ComputeFacetsResponse>({});
+    facets = new SharedState<ComputedFacetResponse>({});
     result = new SharedState<DocumentSearchResult>({ objects: [], isLoading: false });
 
     facetSpecs: FacetSpec[] = [];
@@ -79,7 +79,8 @@ export class DocumentSearch implements SearchInterface {
     }
 
     getFacetBuckets(name: string): FacetBucket[] {
-        return (this.facets.value as any)[name]?.buckets || [];
+        const value = this.facets.value[name];
+        return Array.isArray(value) ? value : [];
     }
 
     resetFacets() {
@@ -161,6 +162,11 @@ export class DocumentSearch implements SearchInterface {
 
             return true;
         }).catch((err) => {
+            // index_not_found_exception means the data store has no index yet — treat as empty
+            if (err?.status === 404) {
+                this.result.value = { isLoading: false, objects: [], hasMore: false };
+                return false;
+            }
             this.result.value = {
                 error: err,
                 isLoading: false,

package/src/features/store/types/ContentObjectTypesSearch.tsx

@@ -96,22 +96,27 @@ export function ContentObjectTypesSearch({ isDirty = false }: ContentObjectTypes
     };
 
     return (
-        <div className="flex flex-col gap-4 h-full">
+        <div className="flex flex-col flex-1 min-h-0">
             <div className="flex flex-shrink-0 gap-4">
                 <Input placeholder={t('store.filterByName')} value={searchTerm} onChange={setSearchTerm} />
                 <SelectBox className="w-60" isClearable options={Object.values(ChunkableOptions)} value={chunkable} onChange={onChunkableChange} placeholder={t('store.isChunkable')} />
             </div>
-            <div className="flex-1 overflow-y-auto">
-                {
-                    (!isLoading && objects?.length === 0) ? (
-                        <EmptyCollection title={t('store.noType')} buttonLabel={t('store.createType')} onClick={onOpenCreateModal}>
-                            {t('store.getStartedTypes')}
-                        </EmptyCollection >
-                    ) : (
-                        <ContentObjectTypesTable objects={objects} isLoading={isLoading} />
-                    )
-                }
-                <CreateOrUpdateTypeModal okLabel="Create" title={t('store.createType')} isOpen={showCreateModal} onClose={onCloseCreateModal} />
+            <div className="flex flex-col w-full flex-1 min-h-0 border rounded-md my-2">
+                <div className="flex-1 min-h-0 overflow-y-auto">
+                    {
+                        (!isLoading && objects?.length === 0) ? (
+                            <EmptyCollection title={t('store.noType')} buttonLabel={t('store.createType')} onClick={onOpenCreateModal}>
+                                {t('store.getStartedTypes')}
+                            </EmptyCollection >
+                        ) : (
+                            <>
+                                <ContentObjectTypesTable objects={objects} isLoading={isLoading} />
+                                <div ref={loadMoreRef} className="h-4 w-full" />
+                            </>
+                        )
+                    }
+                    <CreateOrUpdateTypeModal okLabel="Create" title={t('store.createType')} isOpen={showCreateModal} onClose={onCloseCreateModal} />
+                </div>
             </div>
         </div>
     )