@vertesia/ui 0.79.0 → 0.80.0-dev-20251118

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

@@ -6,8 +6,9 @@ import { useState, useEffect, useRef } from 'react';
 import { Popover, PopoverContent, PopoverTrigger, PopoverClose } from './popover';
 import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from './command';
 import { Input } from './input';
+import { Button } from '@vertesia/ui/core';
 
-interface VSelectBoxBaseProps<T> {
+export interface VSelectBoxBaseProps<T> {
     options: T[] | undefined;
     optionLabel?: (option: T) => React.ReactNode;
     onBlur?: () => void;
@@ -23,6 +24,7 @@ interface VSelectBoxBaseProps<T> {
     popupClass?: string;
     isClearable?: boolean;
     border?: boolean;
+    inline?: boolean;
 }
 
 interface VSelectBoxSingleProps<T> extends VSelectBoxBaseProps<T> {
@@ -39,7 +41,7 @@ interface VSelectBoxMultipleProps<T> extends VSelectBoxBaseProps<T> {
 
 type VSelectBoxProps<T> = VSelectBoxSingleProps<T> | VSelectBoxMultipleProps<T>;
 
-export function VSelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by }: Readonly<VSelectBoxProps<T>>) {
+export function VSelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by, inline = false }: Readonly<VSelectBoxProps<T>>) {
     const triggerRef = useRef<HTMLDivElement>(null);
     const [open, setOpen] = useState(false);
     const [width, setWidth] = useState<number>(0);
@@ -169,6 +171,82 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
         );
     };
 
+    // Render the options list content
+    const renderOptionsContent = () => (
+        <>
+            {filterBy && (
+                <div className='flex justify-start items-center mb-1'>
+                    <div className='mx-2'>
+                        <SearchIcon className="size-4" />
+                    </div>
+                    <Input variant='unstyled' value={filterValue} onChange={setFilterValue} className="w-full p-1 rounded-md" placeholder="Search..." />
+                </div>
+            )}
+            <Command className="overflow-hidden">
+                <CommandList className={inline ? "max-h-full overflow-y-auto" : "max-h-[200px] overflow-y-auto"}>
+                    <CommandEmpty>No result found.</CommandEmpty>
+                    <CommandGroup className="overflow-visible">
+                        {filteredOptions?.map((opt, index) => {
+                            const isSelected = multiple
+                                ? isOptionSelected(opt, Array.isArray(value) ? value : [])
+                                : value != null ? isOptionsEqual(value as T, opt) : false;
+
+                            return (
+                                <CommandItem
+                                    key={index}
+                                    onSelect={() => _onClick(opt)}
+                                    className="w-full"
+                                >
+                                    {multiple || inline ? (
+                                        <div className='w-full flex justify-between items-center cursor-pointer'>
+                                            <div className='w-full truncate text-left'>
+                                                {optionLabel ? optionLabel(opt) : opt as String}
+                                            </div>
+                                            {isSelected && <Check className="size-4" />}
+                                        </div>
+                                    ) : (
+                                        <PopoverClose className='w-full flex justify-between items-center'>
+                                            <div className='w-full truncate text-left'>
+                                                {optionLabel ? optionLabel(opt) : opt as String}
+                                            </div>
+                                            {isSelected && <Check className="size-4" />}
+                                        </PopoverClose>
+                                    )}
+                                </CommandItem>
+                            );
+                        })}
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+            {addNew && (
+                <div className='p-1'>
+                    <a
+                        onClick={addNew}
+                        className={clsx(
+                            'gap-x-2 px-2 py-1.5 truncate group flex rounded-md items-center text-sm cursor-pointer hover:bg-accent',
+                        )}
+                    >
+                        <SquarePlus size={16} strokeWidth={1.25} absoluteStrokeWidth />
+                        {addNewLabel}
+                    </a>
+                </div>
+            )}
+        </>
+    );
+
+    if (inline) {
+        return (
+            <div className={clsx(
+                className,
+                border && 'border border-border rounded-md',
+                "bg-popover p-1",
+                popupClass
+            )}>
+                {renderOptionsContent()}
+            </div>
+        );
+    }
+
     return (
         <Popover>
             <PopoverTrigger asChild>
@@ -178,7 +256,7 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                     className={clsx(
                         className,
                         border && 'border border-border',
-                        'flex flex-row gap-2 items-center justify-between p-2 rounded-md group relative',
+                        'flex flex-row gap-2 items-center justify-between p-2 rounded-md group relative [&:hover_.clear-button]:opacity-100',
                         !disabled ? "cursor-pointer hover:bg-muted" : "cursor-not-allowed text-muted",
                     )}
                 >
@@ -194,9 +272,10 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                             {multiple ? renderMultipleValue() : renderSingleValue()}
                         </div>
                     </div>
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-1 group">
                         {isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && (
-                            <div
+                            <Button variant={"link"} size={"icon"}
+                                alt="Clear selection"
                                 onClick={(e) => {
                                     e.stopPropagation();
                                     if (multiple) {
@@ -205,10 +284,10 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                                         (onChange as (option: T) => void)(undefined as any);
                                     }
                                 }}
-                                className="cursor-pointer hover:bg-muted/20 rounded p-1"
+                                className="cursor-pointer hover:bg-muted/20 clear-button opacity-0 transition-opacity duration-200 rounded p-1"
                             >
                                 <X className="size-4" />
-                            </div>
+                            </Button>
                         )}
                         {!disabled && (
                             <ChevronsUpDown className="size-4 opacity-50" />
@@ -225,66 +304,7 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                     popupClass
                 )}
             >
-                {filterBy && (
-
-                    <div className='flex justify-start items-center mb-1'>
-                        <div className='mx-2'>
-                            <SearchIcon className="size-4" />
-                        </div>
-                        <Input variant='unstyled' value={filterValue} onChange={setFilterValue} className="w-full p-1 rounded-md" placeholder="Search..." />
-                    </div>
-                )}
-                <Command className="overflow-hidden">
-                    <CommandList className="max-h-[200px] overflow-y-auto">
-                        <CommandEmpty>No result found.</CommandEmpty>
-                        <CommandGroup className="overflow-visible">
-                            {filteredOptions?.map((opt, index) => {
-                                const isSelected = multiple
-                                    ? isOptionSelected(opt, Array.isArray(value) ? value : [])
-                                    : value != null ? isOptionsEqual(value as T, opt) : false;
-
-                                return (
-                                    <CommandItem
-                                        key={index}
-                                        onSelect={() => _onClick(opt)}
-                                        className="w-full"
-                                    >
-                                        {multiple ? (
-                                            <div className='w-full flex justify-between items-center cursor-pointer'>
-                                                <div className='w-full truncate text-left'>
-                                                    {optionLabel ? optionLabel(opt) : opt as String}
-                                                </div>
-                                                {isSelected && <Check className="size-4" />}
-                                            </div>
-                                        ) : (
-                                            <PopoverClose className='w-full flex justify-between items-center'>
-                                                <div className='w-full truncate text-left'>
-                                                    {optionLabel ? optionLabel(opt) : opt as String}
-                                                </div>
-                                                {isSelected && <Check className="size-4" />}
-                                            </PopoverClose>
-                                        )}
-                                    </CommandItem>
-                                );
-                            })}
-                        </CommandGroup>
-                    </CommandList>
-                </Command>
-                {
-                    addNew && (
-                        <div className='p-1'>
-                            <a
-                                onClick={addNew}
-                                className={clsx(
-                                    'gap-x-2 px-2 py-1.5 truncate group flex rounded-md items-center text-sm cursor-pointer hover:bg-accent',
-                                )}
-                            >
-                                <SquarePlus size={16} strokeWidth={1.25} absoluteStrokeWidth />
-                                {addNewLabel}
-                            </a>
-                        </div>
-                    )
-                }
+                {renderOptionsContent()}
             </PopoverContent>
         </Popover>
     );

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

@@ -106,7 +106,10 @@ const VTabs = ({
     
     // Update the URL hash when tab changes (only if updateHash is true and not controlled by parent)
     if (updateHash && !current) {
-      window.location.hash = newValue;
+      // Preserve existing history state when changing hash
+      const currentState = window.history.state;
+      const newUrl = window.location.pathname + window.location.search + '#' + newValue;
+      window.history.pushState(currentState, '', newUrl);
     }
     
     if (onTabChange) {
@@ -143,7 +146,9 @@ const VTabsBar = ({ className }: { className?: string }) => {
     const tab = tabs.find(t => t.name === tabName);
 
     if (tab?.href && updateHash) {
-      window.history.pushState(null, '', tab.href);
+      // Preserve existing history state when changing tabs
+      const currentState = window.history.state;
+      window.history.pushState(currentState, '', tab.href);
     }
 
     setTab(tabName);
@@ -236,7 +241,9 @@ const TabsTrigger = React.forwardRef<
   const handleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     if (href) {
       event.preventDefault();
-      window.history.pushState(null, '', href);
+      // Preserve existing history state when changing tabs
+      const currentState = window.history.state;
+      window.history.pushState(currentState, '', href);
     }
     if (props.onClick) {
       (props.onClick as React.MouseEventHandler<HTMLButtonElement>)(event);

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

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "../libs/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "py-2 text-sm",
+        "flex w-full rounded-md border border-input bg-background ring-offset-background",
+        "placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 ring-inset focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/core/hooks/CompositeState.tsx

@@ -4,17 +4,28 @@ import React, { ReactNode, useContext, useEffect, useState } from "react";
 //type KeysNotOfType<T, V> = { [K in keyof T]-?: T[K] extends V ? never : K }[keyof T];
 
 export class Property<V = any> {
-    _value?: V;
-    watchers: ((value: V) => void)[] = [];
-    constructor(value?: V) {
+    private _value?: V;
+    private watchers: ((value: V | undefined) => void)[] = [];
+    /**
+     * Optional name for debugging purposes.
+     * When provided, changes to this property will be logged to the console in development mode,
+     * making it easier to track state changes and debug reactive updates.
+     *
+     * Example: new Property<string>('', 'streamingText')
+     * Will log: [CompositeState] streamingText: "" → "new value"
+     */
+    readonly name?: string;
+
+    constructor(value?: V, name?: string) {
         this._value = value;
+        this.name = name;
     }
 
     get value() {
         return this._value;
     }
 
-    set value(value: any) {
+    set value(value: V | undefined) {
         if (value !== this._value) {
             this._value = value;
             for (const watcher of this.watchers) {
@@ -23,11 +34,11 @@ export class Property<V = any> {
         }
     }
 
-    watch(watcher: (value: any) => void) {
+    watch(watcher: (value: V | undefined) => void) {
         this.watchers.push(watcher);
         return () => {
             this.watchers = this.watchers.filter(w => w !== watcher);
-        }
+        };
     }
 }
 
@@ -140,3 +151,142 @@ export function useDefineSlot(slot: Slot, value: ReactNode | undefined) {
         }
     }, [slot, value])
 }
+
+/**
+ * Computed property that derives its value from other properties.
+ * Automatically recalculates when any of its dependencies change.
+ *
+ * Think of it like a spreadsheet formula: if cell A1 = 5 and A2 = 10,
+ * then A3 = A1 + A2 will automatically update to 15. If A1 changes to 7,
+ * A3 automatically becomes 17.
+ *
+ * @example Basic usage
+ * ```typescript
+ * class MyState {
+ *     count = new Property(0, 'count');
+ *     multiplier = new Property(2, 'multiplier');
+ *
+ *     // Automatically recalculates when count or multiplier changes
+ *     result = new ComputedProperty(
+ *         () => (this.count.value || 0) * (this.multiplier.value || 0),
+ *         [this.count, this.multiplier],
+ *         'result'
+ *     );
+ * }
+ *
+ * state.count.value = 5;      // result automatically becomes 10
+ * state.multiplier.value = 3; // result automatically becomes 15
+ * ```
+ *
+ * @example Derived state
+ * ```typescript
+ * class EditorState {
+ *     workingCopy = new Property<Interaction>();
+ *     sourceInteraction = new Property<Interaction>();
+ *
+ *     // Automatically true when workingCopy differs from source
+ *     isDirty = new ComputedProperty(
+ *         () => JSON.stringify(this.workingCopy.value) !==
+ *               JSON.stringify(this.sourceInteraction.value),
+ *         [this.workingCopy, this.sourceInteraction],
+ *         'isDirty'
+ *     );
+ * }
+ * ```
+ *
+ * @example Cascading computed properties
+ * ```typescript
+ * class State {
+ *     a = new Property(1);
+ *     b = new Property(2);
+ *     sum = new ComputedProperty(() => a.value + b.value, [a, b]);
+ *     doubled = new ComputedProperty(() => sum.value * 2, [sum]);
+ * }
+ * ```
+ *
+ * Benefits:
+ * - ✅ Automatic updates when dependencies change
+ * - ✅ Memoization - only recalculates when needed
+ * - ✅ Composable - can depend on other ComputedProperties
+ * - ✅ Type-safe with full TypeScript support
+ *
+ * When to use:
+ * - ✅ For derived state (values calculated from other values)
+ * - ✅ When dependencies are other Properties or ComputedProperties
+ * - ❌ NOT for async operations (use regular methods instead)
+ * - ❌ NOT if compute function has side effects
+ *
+ * @important Remember to call dispose() when the ComputedProperty is no longer needed
+ * to prevent memory leaks by unsubscribing from all dependencies.
+ */
+export class ComputedProperty<V = any> {
+    private _value?: V;
+    private watchers: ((value: V | undefined) => void)[] = [];
+    private unsubscribers: (() => void)[] = [];
+    /**
+     * Optional name for debugging purposes.
+     * When provided, recalculations will be logged to the console in development mode.
+     */
+    readonly name?: string;
+
+    /**
+     * @param compute - Function that calculates the derived value
+     * @param dependencies - Array of Properties this computed value depends on
+     * @param name - Optional name for debugging
+     */
+    constructor(
+        private compute: () => V,
+        dependencies: Property<any>[],
+        name?: string
+    ) {
+        this.name = name;
+        this.recalculate();
+
+        // Watch all dependencies - when any changes, recalculate
+        for (const dep of dependencies) {
+            this.unsubscribers.push(
+                dep.watch(() => this.recalculate())
+            );
+        }
+    }
+
+    private recalculate() {
+        const newValue = this.compute();
+        if (newValue !== this._value) {
+            this._value = newValue;
+            for (const watcher of this.watchers) {
+                watcher(newValue);
+            }
+        }
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    watch(watcher: (value: V | undefined) => void) {
+        this.watchers.push(watcher);
+        return () => {
+            this.watchers = this.watchers.filter(w => w !== watcher);
+        };
+    }
+
+    /**
+     * Dispose of this ComputedProperty by unsubscribing from all dependencies.
+     * Call this when the ComputedProperty is no longer needed to prevent memory leaks.
+     *
+     * @example
+     * ```typescript
+     * const computed = new ComputedProperty(...);
+     *
+     * // Later, when cleaning up:
+     * computed.dispose();
+     * ```
+     */
+    dispose() {
+        for (const unsub of this.unsubscribers) {
+            unsub();
+        }
+        this.watchers = [];
+    }
+}

package/src/core/hooks/index.ts

@@ -11,4 +11,5 @@ export * from "./useFlag.js"
 export * from "./useIntersectionObserver.js"
 export * from "./useIsFistRendering.js"
 export * from "./useSafeLayoutEffect.js"
+export * from "./useScrollableSearch.js"
 export * from "./useSharedValue.js"

package/src/core/hooks/useScrollableSearch.tsx

@@ -0,0 +1,193 @@
+import { useIntersectionObserver } from "@vertesia/ui/core";
+import { useEffect, useRef, useState } from "react";
+
+interface SearchResponse<ResultT, PageT> {
+    /**
+     * The search result
+     */
+    result: ResultT[];
+
+    /**
+     * The next page information or null if no more pages are available
+     */
+    nextPage: PageT | null;
+}
+
+/**
+ * The search function signature.
+ * @param payload The search payload
+ * @param page The information for the page to fetch. Use null to fetch the first page
+ * @param pageSize The number of items per page
+ * @returns A promise that resolves to the search response
+ */
+type SearchFn<PayloadT, ResultT, PageT = number> = (payload: PayloadT, page: PageT | null, pageSize: number) => Promise<SearchResponse<ResultT, PageT>>;
+
+
+interface ScrollableSearchOptions<ResultT, PayloadT, PageT = number> {
+    /**
+     * the search function
+     */
+    search: SearchFn<PayloadT, ResultT, PageT>;
+
+    /**
+     * Initial paylload for the first search
+     */
+    payload: PayloadT;
+
+    /**
+     * Which page size to use. Defaults to 50.
+     */
+    pageSize?: number;
+
+    /**
+     * A ref to the element that triggers loading the next page when it enters the viewport
+     */
+    nextPageTrigger: React.RefObject<HTMLElement | null>;
+}
+
+interface ScrollableSearchResult<ResultT, PayloadT, PageT = number> {
+    /**
+     * Initiates a new search with the given payload
+     * @param payload The search payload
+     */
+    search: (payload: PayloadT) => void;
+
+    /**
+     * Refreshes the current search with the last used payload
+     */
+    refresh: () => void;
+
+    /**
+     * Loads the next page of results
+     */
+    searchMore: () => void;
+
+    /**
+     * The current accumulated search result
+     */
+    result: ResultT[];
+
+    /**
+     * The current page information
+     */
+    page: PageT | null;
+
+    /**
+     * Whether there are more pages to load
+     */
+    hasMore: boolean;
+
+    /**
+     * Any error that occurred during the last search
+     */
+    error: Error | null;
+
+    /**
+     * Whether a search is currently in progress
+     */
+    isSearching: boolean;
+}
+
+/**
+ * A hook that provides paginated search functionality with infinite scrolling support.
+ */
+export function useScrollableSearch<ResultT, PayloadT, PageT = number>(opts: ScrollableSearchOptions<ResultT, PayloadT, PageT>, dependencies: any[] = []): ScrollableSearchResult<ResultT, PayloadT, PageT> {
+    const pageSize = opts.pageSize || 50;
+    const [page, setPage] = useState<PageT | null>(null);
+    const [lastPayload, setLastPayload] = useState<PayloadT>(opts.payload);
+    const [error, setError] = useState<Error | null>(null);
+    const [results, setResults] = useState<ResultT[]>([]);
+    const [nextPage, setNextPage] = useState<PageT | null>(null);
+    const [isSearching, setIsSearching] = useState(false);
+
+    // Track current request to prevent stale results
+    const requestIdRef = useRef(0);
+
+    const search = (payload: PayloadT) => {
+        setPage(null);
+        setResults([]);  // Clear old results immediately
+        setNextPage(null);
+        setLastPayload(payload);
+    }
+
+    const searchMore = () => {
+        if (nextPage !== null) {
+            setPage(nextPage);
+        }
+    }
+
+    useEffect(() => {
+        // Increment request ID to mark previous requests as stale
+        requestIdRef.current += 1;
+        const currentRequestId = requestIdRef.current;
+
+        setIsSearching(true);
+        opts.search(lastPayload, page, pageSize).then(r => {
+            // Only update state if this is still the current request
+            if (currentRequestId !== requestIdRef.current) {
+                return; // Stale request, ignore results
+            }
+
+            // If page is null, it's a new search - replace results
+            // Otherwise, it's loading more - append results
+            if (page === null) {
+                setResults(r.result);
+            } else {
+                setResults(prev => [...prev, ...r.result]);
+            }
+            setNextPage(r.nextPage);
+            setError(null);
+        }).catch(error => {
+            // Only update error if this is still the current request
+            if (currentRequestId !== requestIdRef.current) {
+                return; // Stale request, ignore error
+            }
+            setError(error);
+        }).finally(() => {
+            // Only update isSearching if this is still the current request
+            if (currentRequestId === requestIdRef.current) {
+                setIsSearching(false);
+            }
+        });
+    }, [...dependencies, lastPayload, page]);
+
+    // Intersection observer for infinite scrolling
+    useIntersectionObserver(opts.nextPageTrigger, () => {
+        if (!isSearching && nextPage) {
+            searchMore();
+        }
+    }, { threshold: 0.1, deps: [nextPage, isSearching] });
+
+    return {
+        search,
+        refresh: () => search(lastPayload),
+        searchMore,
+        result: results,
+        page,
+        hasMore: nextPage !== null,
+        error,
+        isSearching,
+    }
+}
+
+type DefaultSearchFn<PayloadT, ResultT> = (payload: PayloadT, offset: number, limit: number) => Promise<ResultT[]>;
+
+interface DefaultScrollableSearchOptions<ResultT, PayloadT> extends Omit<ScrollableSearchOptions<ResultT, PayloadT, number>, 'search'> {
+    search: DefaultSearchFn<PayloadT, ResultT>;
+}
+
+export function useDefaultScrollableSearch<ResultT, PayloadT>(opts: DefaultScrollableSearchOptions<ResultT, PayloadT>, dependencies: any[] = []): ScrollableSearchResult<ResultT, PayloadT, number> {
+    const actualOpts: ScrollableSearchOptions<ResultT, PayloadT, number> = {
+        ...opts,
+        async search(payload, page, pageSize) {
+            const currentPage = page ?? 0;
+            const offset = currentPage * pageSize;
+            const result = await opts.search(payload, offset, pageSize);
+            return {
+                result,
+                nextPage: result.length === 0 ? null : currentPage + 1
+            };
+        }
+    };
+    return useScrollableSearch<ResultT, PayloadT, number>(actualOpts, dependencies);
+}

package/src/env/index.ts

@@ -12,6 +12,7 @@ export interface EnvProps {
     endpoints: {
         zeno: string,
         studio: string,
+        sts: string, // Security Token Service endpoint
     },
     firebase?: {
         apiKey: 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,
@@ -93,7 +94,7 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
     }
 
     get datadog() {
-        return this.prop("datadog");
+        return this._props?.datadog ?? false;
     }
 
     get logger() {
@@ -117,4 +118,4 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
 
 const Env = new VertesiaEnvironment();
 
-export { Env };
+export { Env };