@vertesia/ui 0.79.3 → 0.79.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "0.79.3",
+  "version": "0.79.4",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -50,10 +50,10 @@
     "lucide-react": "^0.511.0",
     "monaco-editor": "^0.52.2",
     "motion": "^12.12.1",
-    "react": "^19.1.0",
+    "react": "^19.1.2",
     "react-calendar": "^6.0.0",
     "react-date-picker": "^11.0.0",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.1.2",
     "react-error-boundary": "^6.0.0",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^3.0.6",
@@ -61,9 +61,9 @@
     "tailwind-merge": "^3.3.0",
     "ts-md5": "^1.3.1",
     "unist-util-visit": "^5.0.0",
-    "@vertesia/client": "0.79.3",
-    "@vertesia/json": "0.79.3",
-    "@vertesia/common": "0.79.3"
+    "@vertesia/common": "0.79.4",
+    "@vertesia/json": "0.79.4",
+    "@vertesia/client": "0.79.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",
@@ -73,7 +73,7 @@
     "@types/json-schema": "^7.0.15",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.15.21",
-    "@types/react": "^19.1.0",
+    "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.1",
     "eslint": "^9.27.0",
     "eslint-import-resolver-typescript": "^4.4.4",

package/src/core/components/MenuList.tsx

@@ -7,7 +7,7 @@ interface MenuListProps {
 }
 export function MenuList({ className, children }: MenuListProps) {
     return (
-        <ul className={`${className} space-y-1 flex flex-col items-start dark:px-2`}>
+        <ul className={`${className} space-y-1 flex flex-col items-start`}>
             {children}
         </ul>
     )
@@ -21,11 +21,8 @@ interface MenuListItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 const MenuListItem = forwardRef<HTMLAnchorElement, MenuListItemProps>(function _MenuListItem(props, ref) {
     const { current, children, className, href = '#', onClick, ...others } = props;
     return (
-        <li className={clsx(className, current ?
-            'bg-gray-50 text-indigo-600'
-            :
-            'text-gray-700 dark:dark:text-slate-300  hover:text-indigo-600 hover:bg-gray-50  dark:hover:bg-slate-800 dark:hover:text-slate-50 dark:border dark:border-transparent dark:hover:border-slate-50',
-            'w-full rounded-md p-2 pl-3 text-sm leading-6 font-semibold')}>
+        <li className={clsx(className, current ? 'bg-muted' : '',
+            'w-full p-2 pl-3 text-sm leading-6 font-semibold hover:bg-muted')}>
             <a ref={ref} href={href} onClick={(e) => {
                 if (onClick) {
                     e.preventDefault();

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

@@ -16,6 +16,7 @@ interface ModalProps {
     className?: string;
     allowOverflow?: boolean;
     disableCloseOnClickOutside?: boolean;
+    size?: "sm" | "md" | "lg" | "xl";
 }
 const ModalContext = createContext<boolean>(false)
 export function useIsInModal() {
@@ -34,12 +35,27 @@ export function VModal({
     noCloseButton = false,
     allowOverflow = false,
     disableCloseOnClickOutside = false,
+    size = "md",
 }: ModalProps) {
     const handleOpenChange = (open: boolean) => {
         if (!open) {
             onClose();
         }
     };
+    function getSizeClasses() {
+        switch (size) {
+            case "sm":
+                return "max-w-[20vw]";
+            case "md":
+                return "max-w-[40vw]";
+            case "lg":
+                return "max-w-[60vw]";
+            case "xl":
+                return "max-w-[80vw]";
+            default:
+                return "max-w-[40vw]";
+        }
+    }
 
     return (
         <Dialog
@@ -49,6 +65,7 @@ export function VModal({
                     handleOpenChange(open);
                 }
             }}
+            
         >
             {allowOverflow && <DialogOverlay className="z-50 fixed inset-0 bg-black/80" />}
             <VisuallyHidden>
@@ -57,7 +74,8 @@ export function VModal({
             <DialogContent
                 className={cn(
                     "min-h-20 p-4",
-                    "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 sm:rounded-lg",
+                    "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 sm:rounded-lg",
+                    getSizeClasses(),
                     className
                 )}
             >

package/src/core/components/shadcn/filters/filter/SelectFilter.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { CommandItem, CommandEmpty } from "../../command";
+import { CommandItem } from "../../command";
 import { Button } from "../../button";
 import { Filter, FilterGroup, FilterGroupOption, FilterOption } from "../types";
 import { DynamicLabel } from "../DynamicLabel";
@@ -52,12 +52,8 @@ export default function SelectFilter({
   }
 
   const options = getFilteredOptions(selectedView);
-  const selectedGroup = filterGroups.find(g => g.name === selectedView);
-
-  if (options.length === 0) {
-    return <CommandEmpty>No matching options</CommandEmpty>;
-  }
 
+  const selectedGroup = filterGroups.find(g => g.name === selectedView);
   const groupTitle = selectedGroup?.placeholder || selectedGroup?.name;
 
   const handleApply = () => {
@@ -117,35 +113,39 @@ export default function SelectFilter({
   };
 
   return (
-    <>
-      <div className="flex items-center p-1.5 text-xs text-muted">
+    <div className="flex flex-col h-full">
+      <div className="flex items-center p-1.5 text-xs text-muted shrink-0">
         <span>{groupTitle}</span>
       </div>
-      <div className="max-h-50 overflow-y-auto">
-        {options.map((option: FilterGroupOption) => {
-          const isSelected = selectedOptions.some(opt => opt.value === option.value);
+      <div className="flex-1 overflow-hidden min-h-0">
+        <div className="max-h-[200px] overflow-y-auto">
+          {options.length > 0 && (
+            options.map((option: FilterGroupOption) => {
+              const isSelected = selectedOptions.some(opt => opt.value === option.value);
 
-          return (
-            <CommandItem
-              key={option.value || `option-${Math.random()}`}
-              className={`group flex gap-2 items-center w-full hover:bg-muted ${selectedGroup?.multiple && isSelected ? 'bg-muted' : ''
-                }`}
-              onSelect={() => handleOptionToggle(option)}
-            >
-              <DynamicLabel
-                value={option.value || ''}
-                labelRenderer={option.labelRenderer || selectedGroup?.labelRenderer}
-                fallbackLabel={option.label}
-              />
-              {selectedGroup?.multiple && isSelected && (
-                <span className="ml-auto text-xs text-success">✓</span>
-              )}
-            </CommandItem>
-          );
-        })}
+              return (
+                <CommandItem
+                  key={option.value || `option-${Math.random()}`}
+                  className={`group flex gap-2 items-center w-full hover:bg-muted ${selectedGroup?.multiple && isSelected ? 'bg-muted' : ''
+                    }`}
+                  onSelect={() => handleOptionToggle(option)}
+                >
+                  <DynamicLabel
+                    value={option.value || ''}
+                    labelRenderer={option.labelRenderer || selectedGroup?.labelRenderer}
+                    fallbackLabel={option.label}
+                  />
+                  {selectedGroup?.multiple && isSelected && (
+                    <span className="ml-auto text-xs text-success">✓</span>
+                  )}
+                </CommandItem>
+              );
+            })
+          )}
+        </div>
       </div>
       {selectedGroup?.multiple && (
-        <div className="p-2 border-t">
+        <div className="p-2 border-t shrink-0">
           <div className="flex gap-2 justify-end">
             <Button variant="ghost" size="sm" onClick={handleClose}>
               Cancel
@@ -156,6 +156,6 @@ export default function SelectFilter({
           </div>
         </div>
       )}
-    </>
+    </div>
   );
 }

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

@@ -330,6 +330,7 @@ const FilterBtn = ({ className }: { className?: string }) => {
             )
           }
           <CommandList>
+            <CommandEmpty>No matching filters</CommandEmpty>
             <CommandGroup>
               {!selectedView ? getAvailableFilterGroups() : renderFilterOptions()}
             </CommandGroup>

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

@@ -275,6 +275,7 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                     <div className="flex items-center gap-1 group">
                         {isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && (
                             <Button variant={"link"} size={"icon"}
+                                disabled={disabled}
                                 alt="Clear selection"
                                 onClick={(e) => {
                                     e.stopPropagation();

package/src/env/index.ts

@@ -6,6 +6,7 @@ import { AuthTokenPayload } from "@vertesia/common";
 export interface EnvProps {
     name: string; // the app name
     version: string,
+    sdkVersion?: string, // the @vertesia/ui package version
     isLocalDev: boolean,
     isDocker: boolean,
     type: "production" | "staging" | "preview" | "development" | string,
@@ -20,7 +21,7 @@ export interface EnvProps {
         appId?: string,
         providerType?: string,
     },
-    datadog: boolean,
+    datadog?: boolean,
     logger?: {
         info: (msg: string, ...args: any) => void,
         warn: (msg: string, ...args: any) => void,
@@ -52,6 +53,10 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
         return this.prop("version");
     }
 
+    get sdkVersion() {
+        return this._props?.sdkVersion;
+    }
+
     get name() {
         return this.prop("name");
     }
@@ -93,7 +98,7 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
     }
 
     get datadog() {
-        return this.prop("datadog");
+        return this._props?.datadog ?? false;
     }
 
     get logger() {

package/src/features/facets/CollectionsFacetsNav.tsx

@@ -40,7 +40,11 @@ export function useCollectionsFilterGroups(facets: CollectionsFacetsNavProps['fa
             placeholder: 'Type',
             type: 'select' as const,
             multiple: true,
-            options: typeOptions
+            options: typeOptions,
+            filterBy: (value: string, searchText: string) => {
+                const option = typeOptions.find(opt => opt.value === value);
+                return option?.label?.toLowerCase().includes(searchText.toLowerCase()) ?? false;
+            }
         };
         customFilterGroups.push(typeFilterGroup);
     }

package/src/features/layout/GenericPageNavHeader.tsx

@@ -28,8 +28,11 @@ export function GenericPageNavHeader({ className, children, title, description,
         const pathSegments: string[] = (cleanHref as string).split('/').filter((segment: string) => segment.length > 0);
         
         if (pathSegments.length === 3) {
+            if (entry.title !== document.title && entry.title) {
+                return entry.title;
+            }
             const secondSegment = pathSegments[1];
-            return `${capitalize(secondSegment)} Detail`;
+            return `${capitalize(secondSegment)} Detail (...${pathSegments[2].slice(-6)})`;
         } else if (pathSegments.length >= 2) {
             return capitalize(pathSegments[pathSegments.length - 1]);
         } else if (pathSegments.length === 1) {
@@ -51,7 +54,7 @@ export function GenericPageNavHeader({ className, children, title, description,
                 items.push({
                     label: buildBreadcrumbLabel(entry),
                     href: entry.href,
-                    onClick: () => window.history.go(-stepsBack)
+                    onClick: () => navigate(entry.href, { stepsBack: stepsBack })
                 });
             });
         }

package/src/features/store/collections/EditCollectionView.tsx

@@ -265,11 +265,11 @@ function PropertiesEditor({ typeId, collection }: PropertiesEditorProps) {
 
     return (
         <Panel title="Properties" action={
-            <Button size="lg" isLoading={isUpdating} type="submit">
+            <Button size="lg" isLoading={isUpdating} type="submit" onClick={() => _onSave(object?.value)}>
                 Save
             </Button>}
         >
-            <GeneratedForm object={object} onSubmit={_onSave} />
+            <GeneratedForm object={object} />
         </Panel>
     );
 }

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

@@ -27,7 +27,8 @@ const defaultLayout: ColumnLayout[] = [
 
 function getTableLayout(registry: TypeRegistry, type: string | undefined): ColumnLayout[] {
     const layout = type ? registry.getTypeLayout(type) : defaultLayout;
-    return layout ?? defaultLayout;
+    const result = layout ?? defaultLayout;
+    return result;
 }
 
 interface DocumentSearchResultsWithDropZoneProps {

package/src/router/HistoryNavigator.ts

@@ -66,6 +66,10 @@ export interface NavigateOptions {
      * if defined, indicate whether the basePath will be used as a top-level base path or a nested base path.
      */
     isBasePathNested?: boolean;
+    // Number of steps to go back in history, which will pop the history stack instead of pushing a new entry
+    stepsBack?: number;
+    // the title to set for the new history entry
+    title?: string;
 }
 
 function getElementHrefAsUrl(elem: HTMLElement) {
@@ -113,6 +117,11 @@ export class HistoryNavigator {
     }
 
     navigate(to: string, options: NavigateOptions = {}) {
+        if (options.stepsBack && options.stepsBack > 0) {
+            this.stepBack(options.stepsBack, options);
+            return;
+        }
+
         if (options.basePath) {
             let basePath = options.basePath;
             if (!basePath.startsWith('/')) {
@@ -124,6 +133,24 @@ export class HistoryNavigator {
         this._navigate(new URL(to, window.location.href), 'navigate', options);
     }
 
+    stepBack(steps: number, options: NavigateOptions = {}) {
+        const historyChain = window.history.state.historyChain || [];
+        const to = historyChain.length >= steps
+            ? new URL(historyChain[historyChain.length - steps].href, window.location.href)
+            : new URL(window.location.origin, window.location.href);
+        this._navigate(to, 'popState', options);
+
+        const stateToStore = {
+            from: window.location.href,
+            historyChain: historyChain.slice(0, -steps),
+            data: options.state || undefined,
+            title: options.title || document.title
+        };
+        
+        window.history['replaceState'](stateToStore, '', to.href);
+        this.fireLocationChange(new AfterLocationChangeEvent('popState', to, options.state));
+    }
+
     _navigate(to: URL, type: LocationChangeType, options: NavigateOptions) {
         const beforeEvent = new BeforeLocationChangeEvent(type, to, options.state);
         this.fireLocationChange(beforeEvent);
@@ -133,7 +160,7 @@ export class HistoryNavigator {
         
         // Build navigation chain by preserving previous history
         const currentState = window.history.state;
-        const currentTitle = document.title;
+        const currentTitle = options.title || document.title;
         
         // Create new history chain entry
         const newChainEntry = {
@@ -160,7 +187,8 @@ export class HistoryNavigator {
         const stateToStore = {
             from: window.location.href,
             historyChain: historyChain,
-            data: options.state || undefined
+            data: options.state || undefined,
+            title: options.title || document.title
         };
         
         window.history[options.replace ? 'replaceState' : 'pushState'](stateToStore, '', to.href);

package/src/shell/login/UserInfo.tsx

@@ -2,6 +2,7 @@ import { getTenantIdFromProject } from "@vertesia/common";
 import { VTabs, VTabsBar, VTabsPanel, VTooltip } from "@vertesia/ui/core";
 import { Env } from "@vertesia/ui/env";
 import { useUserSession } from "@vertesia/ui/session";
+// Package version is now passed as prop from the consuming application
 import { Check, CopyIcon } from "lucide-react";
 import { useState } from "react";
 
@@ -61,6 +62,7 @@ export default function InfoList() {
                     <InfoItems title="Server" value={server} />
                     <InfoItems title="Store" value={store} />
                     <InfoItems title="App Version" value={Env.version} />
+                    <InfoItems title="SDK Version" value={Env.sdkVersion || 'unknown'} />
                 </div>
         }
     ];

package/src/shell/login/UserSessionMenu.tsx

@@ -1,4 +1,4 @@
-import { AuthTokenPayload } from "@vertesia/common";
+import { AuthTokenPayload, Permission } from "@vertesia/common";
 import { Avatar, Button, MenuList, ModeToggle, Spinner } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { Popover } from "@vertesia/ui/widgets";
@@ -6,6 +6,8 @@ import clsx from "clsx";
 import { useState } from "react";
 import SignInModal from "./SignInModal";
 import InfoList from "./UserInfo";
+import { useNavigate } from "@vertesia/ui/router";
+import { useUserPermissions } from "@vertesia/ui/features";
 interface UserSessionMenuProps {
     name?: string
     picture?: string;
@@ -38,9 +40,13 @@ interface UserSessionPopupProps {
 }
 function UserSessionPopup({ className, asMenuTrigger = false }: UserSessionPopupProps) {
     const session = useUserSession();
+    const navigate = useNavigate();
+    const perms = useUserPermissions();
     const { user } = session;
     if (!session || !user) return null;
 
+    const isProjectManager = perms.hasPermission(Permission.project_admin);
+
     return (
         <Popover strategy='fixed' placement='bottom-start' zIndex={100}>
             <Popover.Trigger click>
@@ -68,6 +74,11 @@ function UserSessionPopup({ className, asMenuTrigger = false }: UserSessionPopup
                         </div>
                         <div className='py-2'>
                             <MenuList>
+                                {isProjectManager && (
+                                    <MenuList.Item className='px-2' onClick={() => navigate('/settings', { replace: true })}>
+                                        Settings
+                                    </MenuList.Item>
+                                )}
                                 <MenuList.Item className='px-2' onClick={() => session.logout()}>
                                     Sign out
                                 </MenuList.Item>

package/src/widgets/form/Form.tsx

@@ -94,10 +94,15 @@ export function ScalarField({ object, editor, inline = false }: ScalarFieldProps
         object.value = object.schema.isNumber ? parseFloat(value) : value
     }
 
+    if (object.isListItem) {
+        // List items don't need the FormItem wrapper (no label, description, etc.)
+        return <Component object={object} type={inputType} onChange={handleOnChange} />;
+    }
+
     return (
         <FormItem label={object.title} required={object.schema.isRequired} description={object.schema.description}
             className={clsx('flex', inline ? 'flex-row items-center' : 'flex-col')}>
-            {!object.isListItem && <Component object={object} type={inputType} onChange={handleOnChange} />}
+            <Component object={object} type={inputType} onChange={handleOnChange} />
         </FormItem>
     )
 }

package/src/widgets/schema-editor/ManagedSchema.ts

@@ -279,16 +279,13 @@ export class SchemaNode {
         if (this.schema.editor && data.editor === null) {
             // explicitly set to null => delete current editor
             this.schema.editor = undefined;
-            this.schema.format = undefined;
             updated = true;
         } else if (data.editor) { // a new editor is set
             this.schema.editor = data.editor;
-            this.schema.format = data.editor;
             updated = true;
         } else if (typeChanged) {
             // preserve editor only if the type didn't change
             this.schema.editor = undefined;
-            this.schema.format = undefined;
             updated = true;
         }
         if (data.description !== this.description) {

package/src/widgets/schema-editor/json-schema4-utils.ts

@@ -132,7 +132,7 @@ export function getTypeSignature(schema: JSONSchema): TypeSignature {
         typeName = getItemTypeName(schema.items);
     }
     let displayTypeName: string = typeName;
-    switch (schema.editor || schema.format) {
+    switch (schema.editor) {
         case 'textarea': {
             displayTypeName = 'text'; break;
         }