@vertesia/ui 0.24.0-dev.202601221707

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

@@ -0,0 +1,132 @@
+import clsx from 'clsx';
+import { ComponentType, isValidElement, ReactNode, SyntheticEvent, useEffect, useState } from 'react';
+
+import { Tab, TabsContext, useTabs } from './TabsContext.js';
+
+function applyCurrentTab(tabs: Tab[], current?: string | (() => string)) {
+    const name = typeof current === 'function' ? current() : current;
+    let currentTab: Tab | null = null;
+    const newTabs = [];
+    for (const tab of tabs) {
+        const newTab = { ...tab };
+        newTab.current = false;
+        newTabs.push(newTab);
+        if (newTab.name === name) {
+            currentTab = newTab;
+        }
+    }
+    if (!currentTab) {
+        currentTab = newTabs[0];
+    }
+    currentTab.current = true;
+    return newTabs;
+}
+
+interface TabsProps {
+    current?: string | (() => string);
+    /**
+     * Return false to prevent the tab from being selected
+     * @param tab
+     * @returns
+     */
+    onSelect?: (tab: Tab) => void | boolean;
+    tabs: Tab[];
+    children: ReactNode | ReactNode[];
+    navigate?: (path: string) => void;
+}
+export function Tabs({ current, onSelect, tabs, children, navigate }: TabsProps) {
+    const [_tabs, _setTabs] = useState<Tab[]>([]);
+    useEffect(() => {
+        _setTabs(applyCurrentTab(tabs, current));
+    }, [current, tabs]);
+    const context = {
+        tabs: _tabs,
+        select: (tab: Tab) => {
+            if (onSelect) {
+                if (onSelect(tab) === false) {
+                    return;
+                }
+            }
+            if (tab.href) {
+                if (navigate) {
+                    navigate(tab.href);
+                } else {
+                    window.location.href = tab.href;
+                }
+            } else {
+                _setTabs([...applyCurrentTab(_tabs, tab.name)]);
+            }
+        }
+    };
+
+    return (
+        <TabsContext.Provider value={context}>
+            <div className="flex flex-col h-full">
+                {children}
+            </div>
+        </TabsContext.Provider>
+    );
+}
+
+interface TabsBarProps {
+    actions?: ReactNode | ReactNode[];
+    className?: string;
+}
+export function TabsBar({ actions, className }: TabsBarProps) {
+    const { tabs, select } = useTabs();
+    const _onClick = (e: SyntheticEvent, tab: Tab) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // ignore if disabled
+        !tab.disabled && select(tab);
+    };
+
+    return (
+        <div className="border-b flex items-start justify-between">
+            <nav className="flex space-x-4 px-4" aria-label="Tabs">
+                {tabs.map((tab) => {
+                    const cursor = tab.disabled ? 'cursor-not-allowed' : 'cursor-pointer';
+                    return (
+                        <a
+                            key={tab.name}
+                            href={tab.href || '#' + tab.name}
+                            onClick={(e) => _onClick(e, tab)}
+                            className={clsx(
+                                tab.current
+                                    ? 'border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-50'
+                                    : 'border-transparent text-gray-500 dark:text-slate-300 hover:border-slate-400 hover:text-gray-700 dark:hover:border-slate-200 dark:hover:text-gray-200 ',
+                                className,
+                                'whitespace-nowrap border-b-2 py-2 px-1 text-sm font-medium',
+                                cursor
+                            )}
+                            aria-current={tab.current ? 'page' : undefined}
+                        >
+                            {tab.label}
+                        </a>
+                    );
+                })}
+            </nav>
+            <div className="flex gap-x-1">{actions}</div>
+        </div>
+    );
+}
+
+interface TabsPanelProps { }
+export function TabsPanel({ }: TabsPanelProps) {
+    const { tabs } = useTabs();
+    const content = tabs.find((t) => t.current)?.content;
+    if (!content) {
+        return null;
+    }
+
+    if (isValidElement(content)) {
+        return <div className="h-full overflow-y-auto flex-1">{content}</div>;
+    }
+
+    const Component = content as unknown as ComponentType;
+    return (
+        <div className="h-full overflow-y-auto flex-1">
+            <Component />
+        </div>
+    );
+}

package/src/core/components/tabs/TabsContext.ts

@@ -0,0 +1,25 @@
+import { ReactNode, createContext, useContext } from "react";
+
+export interface Tab {
+    name: string;
+    current?: boolean;
+    href?: string;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
+
+export interface TabsContextProps {
+    tabs: Tab[];
+    select: (tab: Tab) => void;
+}
+
+export function useTabs() {
+    return useContext(TabsContext);
+}
+
+const TabsContext = createContext<TabsContextProps>({} as TabsContextProps);
+
+export {
+    TabsContext
+};

package/src/core/components/tabs/index.ts

@@ -0,0 +1,2 @@
+export * from "./Tabs.js";
+export * from "./TabsContext.js";

package/src/core/components/toast/NotificationPanel.tsx

@@ -0,0 +1,107 @@
+import { Transition } from "@headlessui/react"
+import { CircleCheck, AlertTriangle, Info, CircleX, X } from "lucide-react"
+import { Fragment, useEffect, useState, useRef } from "react"
+import { ToastProps } from "./ToastProps.js"
+
+const icons = {
+    success: CircleCheck,
+    error: CircleX,
+    warning: AlertTriangle,
+    info: Info
+}
+
+const colors = {
+    success: 'text-success',
+    error: 'text-destructive',
+    warning: 'text-attention',
+    info: 'text-info'
+}
+
+interface NotificationPanelProps {
+    data: ToastProps
+    onClose: () => void
+}
+export function NotificationPanel({ data, onClose }: NotificationPanelProps) {
+    const [show, setShow] = useState(true)
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+    const resetTimeout = () => {
+        if (timeoutRef.current) {
+            globalThis.clearTimeout(timeoutRef.current)
+        }
+        if (data.duration) {
+            timeoutRef.current = setTimeout(() => setShow(false), data.duration)
+        }
+    }
+
+    const clearCurrentTimeout = () => {
+        if (timeoutRef.current) {
+            globalThis.clearTimeout(timeoutRef.current)
+            timeoutRef.current = null
+        }
+    }
+
+    useEffect(() => {
+        resetTimeout()
+        return clearCurrentTimeout
+    }, [data.duration])
+
+    const Icon = icons[data.status] || Info;
+    const color = colors[data.status] || 'text-info';
+
+    // Global notification live region, render this permanently at the end of the document
+    return (
+        <div
+            aria-live="assertive"
+            className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-100"
+        >
+            <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
+                {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
+                <Transition
+                    appear={true}
+                    show={show}
+                    as={Fragment}
+                    afterLeave={onClose}
+                    enter="transform ease-out duration-700 transition"
+                    enterFrom="translate-y-0 opacity-0 sm:translate-y-0 sm:translate-x-2"
+                    enterTo="translate-y-2 opacity-100 sm:translate-x-0"
+                    leave="transition ease-in duration-300"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div
+                        className="pointer-events-auto w-full max-w-md overflow-hidden rounded-lg bg-muted shadow-lg ring-1 ring-border"
+                        onMouseEnter={clearCurrentTimeout}
+                        onMouseLeave={resetTimeout}
+                    >
+                        <div className="p-5">
+                            <div className="flex items-start">
+                                <div className="shrink-0">
+                                    <Icon className={`size-6 ${color}`} aria-hidden="true" />
+                                </div>
+                                <div className="ml-3 flex-1 pt-0.5 min-w-0">
+                                    <p className="text-sm font-semibold text-foreground break-words">{data.title}</p>
+                                    {data.description && (
+                                        <p className="mt-2 text-sm text-muted break-words whitespace-pre-wrap leading-relaxed">
+                                            {data.description}
+                                        </p>
+                                    )}
+                                </div>
+                                <div className="ml-4 flex shrink-0">
+                                    <button
+                                        type="button"
+                                        className="inline-flex rounded-md bg-muted text-muted hover:text-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
+                                        onClick={() => setShow(false)}
+                                    >
+                                        <span className="sr-only">Close</span>
+                                        <X className="size-5" aria-hidden="true" />
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </Transition>
+            </div>
+        </div>
+    )
+}

package/src/core/components/toast/ToastContext.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+import { ToastProps } from "./ToastProps.js";
+
+export function useToast() {
+    return useContext(ToastContext);
+}
+
+export type ToastFn = (data: ToastProps) => void;
+
+const ToastContext = createContext<ToastFn>(() => { });
+
+export { ToastContext };

package/src/core/components/toast/ToastProps.ts

@@ -0,0 +1,6 @@
+export interface ToastProps {
+    status: 'success' | 'error' | 'warning' | 'info';
+    title: string;
+    description?: string;
+    duration?: number
+}

package/src/core/components/toast/ToastProvider.tsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { Portal } from "../Portal.js";
+import { NotificationPanel } from "./NotificationPanel.js";
+import { ToastContext } from "./ToastContext.js";
+import { ToastProps } from "./ToastProps.js";
+
+
+interface ToastProviderProps {
+    children: React.ReactNode | React.ReactNode[];
+}
+export function ToastProvider({ children }: ToastProviderProps) {
+    const [data, setData] = useState<ToastProps | null>(null);
+
+    const toast = (data: ToastProps | null) => {
+        setData(data);
+    }
+
+    return (
+        <>
+            <ToastContext.Provider value={toast}>{children}</ToastContext.Provider>
+            {data && <Portal>
+                <NotificationPanel data={data} onClose={() => toast(null)} />
+            </Portal>}
+        </>
+    )
+}

package/src/core/components/toast/index.ts

@@ -0,0 +1,2 @@
+export * from "./ToastContext.js"
+export * from "./ToastProvider.js"

package/src/core/hooks/CompositeState.tsx

@@ -0,0 +1,292 @@
+import React, { ReactNode, useContext, useEffect, useState } from "react";
+
+//type KeysOfType<T, V> = { [K in keyof T]-?: T[K] extends V ? K : never }[keyof T];
+//type KeysNotOfType<T, V> = { [K in keyof T]-?: T[K] extends V ? never : K }[keyof T];
+
+export class Property<V = any> {
+    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: V | undefined) {
+        if (value !== this._value) {
+            this._value = value;
+            for (const watcher of this.watchers) {
+                watcher(value);
+            }
+        }
+    }
+
+    watch(watcher: (value: V | undefined) => void) {
+        this.watchers.push(watcher);
+        return () => {
+            this.watchers = this.watchers.filter(w => w !== watcher);
+        };
+    }
+}
+
+interface ContextContainer<T> {
+    Context: React.Context<T>
+}
+
+type ConstructorOf<T = any> = new (...args: any[]) => T;
+export function createCompositeStateProvider<T>(StateClass: ConstructorOf<T>) {
+    const context = React.createContext<T>(undefined as any);
+    (StateClass as unknown as ContextContainer<T>).Context = context;
+    return context.Provider;
+}
+
+
+export class Slot {
+
+    private consume: ((content: ReactNode) => void) | undefined = undefined
+    private _current: ReactNode;
+
+    constructor(content?: ReactNode) {
+        this._current = content;
+    }
+
+    set current(content: ReactNode) {
+        if (content !== this._current) {
+            this._current = content;
+            this.consume?.(content);
+        }
+    }
+
+    get current() {
+        return this._current;
+    }
+
+    withConsumer(consume: ((content: ReactNode) => void) | undefined) {
+        this.consume = consume;
+        consume && consume(this.current);
+        return this;
+    }
+}
+
+
+export function useCompositeState<T>(StateClass: ConstructorOf<T>) {
+    const context = (StateClass as unknown as ContextContainer<T>).Context;
+    if (!context) {
+        throw new Error("Context not defined for " + StateClass.name);
+    }
+    return useContext(context);
+}
+
+export function useGetCompositeStateProperty<V>(property: Property<V>) {
+    const [value, setValue] = useState(property.value)
+    useEffect(() => {
+        return property.watch((value) => {
+            if (typeof value === 'function') {
+                setValue(() => value) // cannot directly store functions
+            } else {
+                setValue(value)
+            }
+        });
+    }, [property])
+    return value as V;
+}
+
+// use memo on value to avoid re-computations if needed
+export function useSetCompositeStateProperty<V>(property: Property<V>, value: V | undefined) {
+    useEffect(() => {
+        property.value = value;
+        return () => {
+            property.value = undefined;
+        }
+    }, [property, value])
+    return value;
+}
+
+// use memo on watcher to avoid re-computations if needed
+export function useWatchCompositeStateProperty<V>(property: Property<V>, watcher: (value: V | undefined) => void) {
+    useEffect(() => {
+        return property.watch(watcher);
+    }, [property, watcher])
+}
+
+export function useSlot(slot: Slot) {
+    const [value, setValue] = useState(slot.current)
+    useEffect(() => {
+        slot.withConsumer(setValue);
+        return () => {
+            slot.withConsumer(undefined);
+        }
+    }, [slot])
+    return value;
+}
+
+export function useWatchSlot(slot: Slot, watcher: (value: ReactNode | undefined) => void) {
+    useEffect(() => {
+        slot.withConsumer(watcher);
+        return () => {
+            slot.withConsumer(undefined);
+        }
+    }, [slot, watcher])
+}
+
+// use memo for value if needed
+export function useDefineSlot(slot: Slot, value: ReactNode | undefined) {
+    useEffect(() => {
+        slot.current = value;
+        return () => {
+            slot.current = 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/PortalContainerProvider.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+const PortalContainerContext = React.createContext<HTMLElement | undefined>(undefined);
+
+function findOrCreatePortalContainer(root: ShadowRoot | Document, id = "plugin-portal-container") {
+    // Determine the actual parent element to search and append to
+    const parentElement = root instanceof Document ? root.body : root;
+
+    // look only at direct children
+    for (const child of Array.from(parentElement.children)) {
+        if (child instanceof HTMLElement && child.id === id) {
+            return child;
+        }
+    }
+    // not found → create
+    const container = document.createElement("div");
+    container.id = id;
+    parentElement.appendChild(container);
+    return container;
+}
+
+export function PortalContainerProvider({
+    children,
+    id = "plugin-portal-container",
+}: {
+    children: React.ReactNode;
+    id?: string;
+}) {
+    const ref = React.useRef<HTMLDivElement>(null);
+    const [container, setContainer] = React.useState<HTMLElement | null | undefined>(undefined);
+
+    React.useEffect(() => {
+        if (ref.current) {
+            const root = ref.current.getRootNode();
+            if (root instanceof ShadowRoot || root instanceof Document) {
+                const container = findOrCreatePortalContainer(root, id);
+                setContainer(container);
+            } else {
+                setContainer(null);
+            }
+        }
+    }, [id]);
+
+    // If container not discovered yet → render hidden marker only
+    if (container === undefined) {
+        return <div ref={ref} style={{ display: "none" }} />;
+    }
+
+    // Once container is resolved (null or HTMLElement) → provide it
+    return (
+        <PortalContainerContext.Provider value={container || undefined}>
+            {children}
+        </PortalContainerContext.Provider>
+    );
+}
+
+export function usePortalContainer() {
+    return React.useContext(PortalContainerContext);
+}