@vertesia/ui 0.79.1 → 0.80.0-dev-20251118

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vertesia/ui",
-    "version": "0.79.1",
+    "version": "0.80.0-dev-20251118",
     "description": "Vertesia UI components and and hooks",
     "type": "module",
     "main": "./lib/index.js",
@@ -168,5 +168,10 @@
                 "./lib/types/shell/index.d.ts"
             ]
         }
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/vertesia/composableai.git",
+        "directory": "packages/ui"
     }
 }

package/src/core/components/SelectBox.tsx

@@ -90,7 +90,7 @@ export function SelectBox<T>({ clearTitle, ClearIcon = X, showFilter, filterBy,
         }
     }
     return (
-        <Listbox value={value || null} onChange={onChange} by={by} disabled={disabled}>
+        <Listbox value={value ?? undefined} onChange={onChange} by={by} disabled={disabled}>
             {() => (
                 <div className={'overflow-y-visible ' + className}>
                     <div className="relative">

package/src/core/components/TagsInput.tsx

@@ -0,0 +1,388 @@
+import clsx from 'clsx';
+import { X } from 'lucide-react';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { Popover, PopoverContent, PopoverContext, PopoverTrigger } from './shadcn/popover';
+
+interface TagsInputProps {
+    options: string[];
+    value: string[];
+    onChange: (selected: string[]) => void;
+    onOptionsChange?: (options: string[]) => void;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    layout?: 'horizontal' | 'vertical';
+    creatable?: boolean;
+    createText?: string;
+    maxDropdownHeight?: number;
+}
+
+function TagsInputContent({
+    options,
+    value,
+    onChange,
+    onOptionsChange,
+    placeholder,
+    className,
+    disabled,
+    layout = 'horizontal',
+    creatable = false,
+    createText = 'Create "%value%"',
+    maxDropdownHeight = 200
+}: TagsInputProps) {
+    const popoverContext = useContext(PopoverContext);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const [width, setWidth] = useState<number>(0);
+    const [pendingDeleteIndex, setPendingDeleteIndex] = useState<number | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const highlightedItemRef = useRef<HTMLElement | null>(null);
+
+    const isOpen = popoverContext?.open ?? false;
+    const setIsOpen = popoverContext?.setOpen ?? (() => { });
+
+    // Measure trigger width for popover
+    useEffect(() => {
+        const element = triggerRef.current;
+        if (!element) return;
+
+        const updateWidth = () => {
+            const contentWidth = element.getBoundingClientRect().width;
+            setWidth(contentWidth);
+        };
+
+        const resizeObserver = new ResizeObserver(() => {
+            updateWidth();
+        });
+
+        updateWidth();
+        resizeObserver.observe(element);
+
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+
+    // Filter options based on search term and exclude already selected
+    const filteredOptions = options.filter(
+        option =>
+            !value.includes(option) &&
+            option.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    // Check if create option should be shown
+    const showCreateOption = creatable && searchTerm && !value.includes(searchTerm) && !options.includes(searchTerm);
+
+    // Total number of items (filtered options + create option if shown)
+    const totalItems = filteredOptions.length + (showCreateOption ? 1 : 0);
+
+    // Reset highlighted index when filtered options change
+    useEffect(() => {
+        setHighlightedIndex(0);
+    }, [searchTerm, showCreateOption]);
+
+    // Clear pending delete when user starts typing
+    useEffect(() => {
+        if (searchTerm !== '') {
+            setPendingDeleteIndex(null);
+        }
+    }, [searchTerm]);
+
+    // Scroll highlighted item into view
+    useEffect(() => {
+        if (isOpen && highlightedItemRef.current && dropdownRef.current) {
+            highlightedItemRef.current.scrollIntoView({
+                block: 'nearest',
+                behavior: 'smooth'
+            });
+        }
+    }, [highlightedIndex, isOpen]);
+
+    // Clear search term when popover closes and refocus input when it opens
+    useEffect(() => {
+        if (!isOpen) {
+            setSearchTerm('');
+        } else {
+            // Ensure input stays focused when popover opens
+            inputRef.current?.focus();
+        }
+    }, [isOpen]);
+
+    const handleSelect = (option: string) => {
+        onChange([...value, option]);
+        setSearchTerm('');
+        setIsOpen(false);
+        setHighlightedIndex(0);
+        setPendingDeleteIndex(null);
+    };
+
+    const handleCreate = (newTag: string) => {
+        // Add to value
+        onChange([...value, newTag]);
+        // Add to options if callback provided
+        if (onOptionsChange && !options.includes(newTag)) {
+            onOptionsChange([...options, newTag]);
+        }
+        setSearchTerm('');
+        setIsOpen(false);
+        setHighlightedIndex(0);
+        setPendingDeleteIndex(null);
+    };
+
+    const handleRemove = (option: string, e: React.MouseEvent) => {
+        e.stopPropagation();
+        onChange(value.filter(v => v !== option));
+        setPendingDeleteIndex(null);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        // Handle special keys
+        if (e.key === 'Enter' && isOpen && totalItems > 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            // Check if we're selecting the create option
+            if (highlightedIndex === filteredOptions.length && showCreateOption) {
+                handleCreate(searchTerm);
+            } else if (highlightedIndex < filteredOptions.length) {
+                handleSelect(filteredOptions[highlightedIndex]);
+            }
+            return;
+        }
+
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!isOpen) {
+                setIsOpen(true);
+            } else {
+                setHighlightedIndex(prev =>
+                    prev < totalItems - 1 ? prev + 1 : prev
+                );
+            }
+            return;
+        }
+
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!isOpen) {
+                setIsOpen(true);
+            } else {
+                setHighlightedIndex(prev => (prev > 0 ? prev - 1 : 0));
+            }
+            return;
+        }
+
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsOpen(false);
+            return;
+        }
+
+        if (e.key === 'Backspace' && searchTerm === '' && value.length > 0) {
+            // Two-step deletion: first backspace marks for deletion, second backspace deletes
+            e.stopPropagation();
+            const lastIndex = value.length - 1;
+
+            if (pendingDeleteIndex === lastIndex) {
+                // Second backspace: actually delete the item
+                onChange(value.slice(0, -1));
+                setPendingDeleteIndex(null);
+            } else {
+                // First backspace: mark for deletion
+                setPendingDeleteIndex(lastIndex);
+            }
+            return;
+        }
+
+        // For any other key (typing characters), open dropdown
+        if (!isOpen && e.key.length === 1) {
+            setIsOpen(true);
+        }
+    };
+
+    const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {
+        e.stopPropagation();
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    };
+
+    const handleInputFocus = () => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    };
+
+    const handleContainerClick = () => {
+        if (!disabled) {
+            inputRef.current?.focus();
+        }
+    };
+
+    return (
+        <div className={clsx('relative', className)}>
+            <PopoverTrigger asChild>
+                <div
+                    ref={triggerRef}
+                    className={clsx(
+                        'min-h-[40px] w-full rounded-md border border-input bg-background px-3 py-2',
+                        'flex items-center gap-1',
+                        layout === 'horizontal' ? 'flex-wrap' : 'flex-col items-stretch',
+                        'cursor-text',
+                        'ring-offset-background',
+                        disabled && 'opacity-50 cursor-not-allowed',
+                        isOpen ? 'ring-1 ring-inset ring-ring' : ''
+                    )}
+                    onClick={handleContainerClick}
+                >
+                    {/* Selected Items Badges - Vertical Layout */}
+                    {layout === 'vertical' && value.length > 0 && (
+                        <div className="flex flex-col gap-1 w-full">
+                            {value.map((item, index) => (
+                                <span
+                                    key={item}
+                                    className={clsx(
+                                        "inline-flex items-center justify-between gap-2 px-2 py-1 text-sm bg-primary/10 text-primary rounded-md w-full transition-all",
+                                        pendingDeleteIndex === index && "ring-2 ring-red-300 shadow-[0_0_8px_rgba(252,165,165,0.5)]"
+                                    )}
+                                >
+                                    <span className="truncate">{item}</span>
+                                    <button
+                                        type="button"
+                                        onClick={(e) => handleRemove(item, e)}
+                                        disabled={disabled}
+                                        className="hover:bg-primary/20 rounded-sm transition-colors flex-shrink-0"
+                                    >
+                                        <X className="h-3 w-3" />
+                                    </button>
+                                </span>
+                            ))}
+                        </div>
+                    )}
+
+                    {/* Selected Items Badges - Horizontal Layout */}
+                    {layout === 'horizontal' && value.map((item, index) => (
+                        <span
+                            key={item}
+                            className={clsx(
+                                "inline-flex items-center gap-1 px-2 py-1 text-sm bg-primary/10 text-primary rounded-md transition-all",
+                                pendingDeleteIndex === index && "ring-2 ring-red-300 shadow-[0_0_8px_rgba(252,165,165,0.5)]"
+                            )}
+                        >
+                            {item}
+                            <button
+                                type="button"
+                                onClick={(e) => handleRemove(item, e)}
+                                disabled={disabled}
+                                className="hover:bg-primary/20 rounded-sm transition-colors"
+                            >
+                                <X className="h-3 w-3" />
+                            </button>
+                        </span>
+                    ))}
+
+                    {/* Search Input */}
+                    <input
+                        ref={inputRef}
+                        type="text"
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        onClick={handleInputClick}
+                        onFocus={handleInputFocus}
+                        disabled={disabled}
+                        placeholder={value.length === 0 ? placeholder : ''}
+                        className={clsx(
+                            'flex-1 min-w-[120px] bg-transparent text-sm',
+                            'placeholder:text-muted-foreground',
+                            'border-none outline-none focus:outline-none focus:ring-0 p-0 m-0',
+                            layout === 'vertical' && 'w-full'
+                        )}
+                    />
+                </div>
+            </PopoverTrigger>
+
+            <PopoverContent
+                style={{ width: `${width}px` }}
+                className="p-0 bg-popover border border-border shadow-lg"
+                align="start"
+                side="bottom"
+                onOpenAutoFocus={(e) => {
+                    // Prevent the popover from stealing focus from the input
+                    e.preventDefault();
+                }}
+            >
+                <div ref={dropdownRef} className="overflow-y-auto" style={{ maxHeight: `${maxDropdownHeight}px` }}>
+                    {filteredOptions.length === 0 && !showCreateOption ? (
+                        <div className="px-3 py-2 text-sm text-muted-foreground">
+                            {searchTerm ? 'No options found' : 'No more options available'}
+                        </div>
+                    ) : (
+                        <>
+                            {filteredOptions.length > 0 && (
+                                <ul className="py-1">
+                                    {filteredOptions.map((option, index) => (
+                                        <li
+                                            key={option}
+                                            ref={(el) => {
+                                                if (index === highlightedIndex) {
+                                                    highlightedItemRef.current = el;
+                                                }
+                                            }}
+                                            onClick={() => handleSelect(option)}
+                                            onMouseEnter={() => setHighlightedIndex(index)}
+                                            className={clsx(
+                                                'px-3 py-2 text-sm cursor-pointer transition-colors',
+                                                index === highlightedIndex
+                                                    ? 'bg-blue-500/20 text-foreground'
+                                                    : 'hover:bg-accent/50'
+                                            )}
+                                        >
+                                            {option}
+                                        </li>
+                                    ))}
+                                </ul>
+                            )}
+                            {showCreateOption && (
+                                <>
+                                    {filteredOptions.length > 0 && (
+                                        <div className="border-t border-border" />
+                                    )}
+                                    <div
+                                        ref={(el) => {
+                                            if (highlightedIndex === filteredOptions.length) {
+                                                highlightedItemRef.current = el;
+                                            }
+                                        }}
+                                        onClick={() => handleCreate(searchTerm)}
+                                        onMouseEnter={() => setHighlightedIndex(filteredOptions.length)}
+                                        className={clsx(
+                                            'px-3 py-2 text-sm cursor-pointer transition-colors text-primary',
+                                            highlightedIndex === filteredOptions.length
+                                                ? 'bg-blue-500/20'
+                                                : 'hover:bg-accent/50'
+                                        )}
+                                    >
+                                        {createText.replace('%value%', searchTerm)}
+                                    </div>
+                                </>
+                            )}
+                        </>
+                    )}
+                </div>
+            </PopoverContent>
+        </div>
+    );
+}
+
+export function TagsInput(props: TagsInputProps) {
+    return (
+        <Popover click>
+            <TagsInputContent {...props} />
+        </Popover>
+    );
+}

package/src/core/components/index.ts

@@ -18,6 +18,7 @@ export * from "./MessageBox.js";
 export * from "./Modal.js";
 export * from "./NumberInput.js";
 export * from "./Overlay.js";
+export * from "./Panel.js";
 export * from "./popup/index.js";
 export * from "./Portal.js";
 export * from "./RadioGroup.js";
@@ -26,12 +27,12 @@ export * from "./SelectList.js";
 export * from "./SelectStack.js";
 export * from "./shadcn/index.js";
 export * from "./SidePanel.js";
-export * from "./Panel.js";
 export * from "./Spinner.js";
 export * from "./styles.js";
 export * from "./Switch.js";
 export * from "./table/index.js";
 export * from "./tabs/index.js";
+export * from "./TagsInput.js";
 export * from "./toast/index.js";
 
 export type HeroIcon = React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {

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

@@ -5,13 +5,13 @@ import { cn } from "../libs/utils"
 import { JSX } from "react";
 import { useIsInModal } from "./dialog";
 
-interface PopoverContextValue {
+export interface PopoverContextValue {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   hover: boolean;
   click: boolean;
 }
-const PopoverContext = React.createContext<PopoverContextValue | null>(null);
+export const PopoverContext = React.createContext<PopoverContextValue | null>(null);
 
 interface PopoverProps {
   _open?: boolean;

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/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 };