@vertesia/ui 1.5.0-dev.20260807.073259Z → 1.5.0-dev.20260901.005903Z

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

@@ -0,0 +1,35 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { useState } from 'react';
+import { describe, expect, it } from 'vitest';
+import { renderWithProviders } from '../../../../__tests__/test-utils.js';
+import { Modal, ModalBody, ModalTitle } from './dialog.js';
+
+describe('Modal', () => {
+    it('moves focus into the dialog when it opens', async () => {
+        function Harness() {
+            const [open, setOpen] = useState(false);
+            return (
+                <>
+                    <button type="button" onClick={() => setOpen(true)}>
+                        Open modal
+                    </button>
+                    <Modal isOpen={open} onClose={() => setOpen(false)} noCloseButton>
+                        <ModalTitle>Example modal</ModalTitle>
+                        <ModalBody>
+                            <input aria-label="Modal input" />
+                        </ModalBody>
+                    </Modal>
+                </>
+            );
+        }
+
+        renderWithProviders(<Harness />);
+        const trigger = screen.getByRole('button', { name: 'Open modal' });
+        trigger.focus();
+        fireEvent.click(trigger);
+
+        const dialog = await screen.findByRole('dialog', { name: 'Example modal' });
+        await waitFor(() => expect(dialog.contains(document.activeElement)).toBe(true));
+        expect(document.activeElement).toBe(screen.getByRole('textbox', { name: 'Modal input' }));
+    });
+});

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

@@ -205,10 +205,6 @@ const DialogContent = React.forwardRef<
             <DialogOverlay />
             <DialogPrimitive.Content
                 ref={ref}
-                autoFocus={false}
-                onOpenAutoFocus={(event) => {
-                    event.preventDefault();
-                }}
                 className={cn(
                     // rtl-ok: symmetric centering + slide animations from Radix — left-[50%]/translate-x-[-50%] are mirror-safe
                     '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 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',

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

@@ -0,0 +1,320 @@
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { ChevronDownIcon } from 'lucide-react';
+import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+import { cn } from '../libs/utils';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './dropdown';
+
+/** Gap between tab items, in px — must match the `gap-1` used by the rendered rows. */
+export const OVERFLOW_TAB_GAP_PX = 4;
+
+export type OverflowTabsVariant = 'tabs' | 'pills';
+
+/** Tab-item styling, matching the corresponding `TabsTrigger` variants. */
+const VARIANT_CLASSES: Record<OverflowTabsVariant, { base: string; active: string; inactive: string; icon: string }> = {
+    tabs: {
+        base: 'flex items-center border-b-2 px-2 py-1.5 text-sm font-medium whitespace-nowrap cursor-pointer shrink-0',
+        inactive: 'border-transparent text-muted-foreground hover:border-border hover:text-foreground',
+        active: 'border-primary text-primary',
+        icon: 'ms-1 size-4',
+    },
+    pills: {
+        base: 'flex items-center rounded-md px-2 py-1 text-xs font-medium whitespace-nowrap cursor-pointer shrink-0',
+        inactive: 'text-muted-foreground hover:bg-muted/60',
+        active: 'bg-muted text-foreground',
+        icon: 'ms-0.5 size-3.5',
+    },
+};
+
+export interface OverflowTabsLayout<T> {
+    /** Attach to the element whose width bounds the row; its `clientWidth` is what tabs are fitted into. */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    /** Ref callback for the i-th item of the hidden measurement row. */
+    setItemRef: (index: number) => (el: HTMLElement | null) => void;
+    /** Ref callback for the "More" button of the hidden measurement row. */
+    setMoreRef: (el: HTMLElement | null) => void;
+    /** Items that fit; when the active item overflowed it is promoted into the last slot. */
+    visible: T[];
+    /** Items that did not fit and belong in the "More" menu. */
+    overflow: T[];
+    /** Whether the active item ended up in `overflow` (used to highlight the "More" trigger). */
+    activeInOverflow: boolean;
+}
+
+/**
+ * Splits `items` into a visible row and an overflow list, measured from a hidden row that renders
+ * every item at its natural width (see {@link OverflowTabsBar} for the expected markup). The active
+ * item is promoted into the last visible slot when it would otherwise be hidden in the menu.
+ *
+ * Callers own the rendering, so the hidden row must use the same classes and content as the visible
+ * one — otherwise the measured widths don't describe what is actually laid out.
+ */
+export function useOverflowTabs<T>(
+    items: T[],
+    isActive: (item: T) => boolean,
+    gap = OVERFLOW_TAB_GAP_PX,
+): OverflowTabsLayout<T> {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const itemRefs = useRef<Array<HTMLElement | null>>([]);
+    const moreRef = useRef<HTMLElement | null>(null);
+    // `count` leading items are shown. When `promote` is set, the active item is pulled
+    // into the last slot (before More) and `count` counts the items shown before it.
+    const [layout, setLayout] = useState<{ count: number; promote: boolean }>({
+        count: items.length,
+        promote: false,
+    });
+
+    const recompute = () => {
+        const container = containerRef.current;
+        if (!container) return;
+        const containerWidth = container.clientWidth;
+        const widths = items.map((_, i) => itemRefs.current[i]?.offsetWidth ?? 0);
+        const totalAll = widths.reduce((sum, w) => sum + w, 0) + gap * Math.max(0, items.length - 1);
+
+        // How many items (in order, optionally skipping one) fit within `available`.
+        const fitCount = (available: number, skipIndex: number) => {
+            let used = 0;
+            let fitted = 0;
+            for (let i = 0; i < items.length; i++) {
+                if (i === skipIndex) continue;
+                const cand = used + (fitted > 0 ? gap : 0) + widths[i];
+                if (cand > available) break;
+                used = cand;
+                fitted += 1;
+            }
+            return fitted;
+        };
+
+        let next: { count: number; promote: boolean };
+        if (totalAll <= containerWidth) {
+            next = { count: items.length, promote: false };
+        } else {
+            const moreWidth = moreRef.current?.offsetWidth ?? 0;
+            const naturalCount = Math.max(1, fitCount(containerWidth - moreWidth - gap, -1));
+            const activeIndex = items.findIndex(isActive);
+            if (activeIndex < 0 || activeIndex < naturalCount) {
+                next = { count: naturalCount, promote: false };
+            } else {
+                // Active item overflowed: reserve its slot at the end, fit leading items before it.
+                const leadAvailable = containerWidth - moreWidth - widths[activeIndex] - gap * 2;
+                next = { count: fitCount(leadAvailable, activeIndex), promote: true };
+            }
+        }
+        setLayout((prev) => (prev.count === next.count && prev.promote === next.promote ? prev : next));
+    };
+
+    // Re-measure after every render (item/label changes) and on container resize.
+    const recomputeRef = useRef(recompute);
+    recomputeRef.current = recompute;
+    useLayoutEffect(() => {
+        recomputeRef.current();
+    });
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || typeof ResizeObserver === 'undefined') return;
+        const observer = new ResizeObserver(() => recomputeRef.current());
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, []);
+
+    const activeIndex = items.findIndex(isActive);
+    let visible: T[];
+    let overflow: T[];
+    if (layout.promote && activeIndex >= 0) {
+        // Pull the active item into the last visible slot; the item it displaces overflows.
+        const others = items.filter((_, i) => i !== activeIndex);
+        visible = [...others.slice(0, layout.count), items[activeIndex]];
+        overflow = others.slice(layout.count);
+    } else {
+        visible = items.slice(0, layout.count);
+        overflow = items.slice(layout.count);
+    }
+
+    return {
+        containerRef,
+        setItemRef: (index: number) => (el: HTMLElement | null) => {
+            itemRefs.current[index] = el;
+        },
+        setMoreRef: (el: HTMLElement | null) => {
+            moreRef.current = el;
+        },
+        visible,
+        overflow,
+        activeInOverflow: overflow.some(isActive),
+    };
+}
+
+export interface OverflowMoreMenuProps {
+    label: ReactNode;
+    /** Classes for the trigger button — pass the same tab-item classes the row uses. */
+    triggerClassName?: string;
+    /** Icon after the label; the hidden measurement row must render the same one. */
+    icon?: ReactNode;
+    /** The menu entries, normally `DropdownMenuItem`s rendered by the caller. */
+    children: ReactNode;
+}
+
+/** Trailing "More" dropdown of overflowed tabs; opens on hover, click, or keyboard. */
+export function OverflowMoreMenu({ label, triggerClassName, icon, children }: OverflowMoreMenuProps) {
+    const [open, setOpen] = useState(false);
+    const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const openedByHover = useRef(false);
+
+    const cancelClose = () => {
+        if (closeTimer.current) {
+            clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+    };
+    const openOnHover = () => {
+        cancelClose();
+        openedByHover.current = true;
+        setOpen(true);
+    };
+    // Delay the close so the pointer can travel across the gap onto the menu.
+    const closeAfterDelay = () => {
+        cancelClose();
+        closeTimer.current = setTimeout(() => setOpen(false), 150);
+    };
+
+    // Clear any pending close timer on unmount.
+    useEffect(() => () => clearTimeout(closeTimer.current ?? undefined), []);
+
+    return (
+        // Non-modal: a modal menu sets body `pointer-events: none` while open, which makes
+        // the hover open/close flap. It still closes on outside-click / Escape.
+        <DropdownMenu
+            modal={false}
+            open={open}
+            onOpenChange={(next) => {
+                // Fired by click / keyboard / dismiss (not by hover); keep our state in sync.
+                cancelClose();
+                if (next) openedByHover.current = false;
+                setOpen(next);
+            }}
+        >
+            <DropdownMenuTrigger asChild>
+                {/* Tab-bar primitive: raw button is the menu trigger (asChild). */}
+                <button
+                    type="button"
+                    onMouseEnter={openOnHover}
+                    onMouseLeave={closeAfterDelay}
+                    className={triggerClassName}
+                >
+                    {label}
+                    {icon ?? <ChevronDownIcon className="ms-1 size-4" />}
+                </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+                align="end"
+                className="w-max"
+                onMouseEnter={cancelClose}
+                onMouseLeave={closeAfterDelay}
+                onCloseAutoFocus={(e) => {
+                    // Keep hover-opens from returning the focus ring to the trigger.
+                    if (openedByHover.current) e.preventDefault();
+                }}
+            >
+                {children}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}
+
+/** Minimal tab shape the bar needs; the richer core `Tab` satisfies it as-is. */
+export interface OverflowTab {
+    name: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+
+export interface OverflowTabsBarProps {
+    tabs: OverflowTab[];
+    current: string;
+    onTabChange: (name: string) => void;
+    /** `tabs` draws the underline bar (default), `pills` the compact rounded row. */
+    variant?: OverflowTabsVariant;
+    className?: string;
+}
+
+/**
+ * Tabs as a horizontal row; any that don't fit collapse into a trailing "More" dropdown. Unlike
+ * `TabsBar` this is a bar only — it does not own the panels — so it suits tab rows whose content is
+ * rendered by the caller. The visible/overflow split is measured from a hidden full-width row.
+ */
+export function OverflowTabsBar({ tabs, current, onTabChange, variant = 'tabs', className }: OverflowTabsBarProps) {
+    const { t } = useUITranslation();
+    const styles = VARIANT_CLASSES[variant];
+    const { containerRef, setItemRef, setMoreRef, visible, overflow, activeInOverflow } = useOverflowTabs(
+        tabs,
+        (tab) => tab.name === current,
+    );
+    const moreLabel = t('agent.moreTabs');
+
+    return (
+        <div ref={containerRef} className={cn('relative', className)}>
+            {/* Hidden measurement row: all tabs + More at natural width, kept separate
+                from the visible row so measuring can't feed back into the layout. */}
+            <div aria-hidden className="pointer-events-none invisible absolute start-0 top-0 flex w-max gap-1">
+                {tabs.map((tab, i) => (
+                    <button
+                        type="button"
+                        key={tab.name}
+                        tabIndex={-1}
+                        ref={setItemRef(i)}
+                        className={cn(styles.base, styles.inactive)}
+                    >
+                        {tab.label}
+                    </button>
+                ))}
+                <button type="button" tabIndex={-1} ref={setMoreRef} className={cn(styles.base, styles.inactive)}>
+                    {moreLabel}
+                    <ChevronDownIcon className={styles.icon} />
+                </button>
+            </div>
+
+            {/* Visible row */}
+            <div className={cn('flex gap-1 overflow-hidden', variant === 'tabs' && '-mb-px border-b')}>
+                {visible.map((tab) => {
+                    const isActive = tab.name === current;
+                    return (
+                        // Tab-bar primitive: raw button mirrors core TabsTrigger styling.
+                        <button
+                            type="button"
+                            key={tab.name}
+                            aria-current={isActive ? 'page' : undefined}
+                            disabled={tab.disabled}
+                            onClick={() => onTabChange(tab.name)}
+                            className={cn(
+                                styles.base,
+                                isActive ? styles.active : styles.inactive,
+                                'disabled:pointer-events-none disabled:opacity-50',
+                            )}
+                        >
+                            {tab.label}
+                        </button>
+                    );
+                })}
+
+                {overflow.length > 0 && (
+                    <OverflowMoreMenu
+                        label={moreLabel}
+                        triggerClassName={cn(styles.base, activeInOverflow ? styles.active : styles.inactive)}
+                        icon={<ChevronDownIcon className={styles.icon} />}
+                    >
+                        {overflow.map((tab) => (
+                            <DropdownMenuItem
+                                key={tab.name}
+                                disabled={tab.disabled}
+                                onClick={() => onTabChange(tab.name)}
+                                className={cn(tab.name === current && 'text-primary')}
+                            >
+                                {tab.label}
+                            </DropdownMenuItem>
+                        ))}
+                    </OverflowMoreMenu>
+                )}
+            </div>
+        </div>
+    );
+}

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

@@ -448,7 +448,7 @@ export function SelectBox<T = unknown>({
                         variant="link"
                         size="icon"
                         disabled={disabled}
-                        aria-label={clearTitle || 'Clear selection'}
+                        title={clearTitle || 'Clear selection'}
                         onClick={(e) => {
                             e.stopPropagation();
                             if (multiple) {
@@ -462,7 +462,7 @@ export function SelectBox<T = unknown>({
                                 e.stopPropagation();
                             }
                         }}
-                        className="absolute end-8 top-1/2 -translate-y-1/2 hover:bg-muted/20 rounded p-1"
+                        className="absolute end-2 top-1/2 -translate-y-1/2 hover:bg-muted/20 rounded p-1"
                     >
                         {clearIcon ? clearIcon : <X className="size-4" />}
                     </Button>

package/src/core/components/shadcn/theme/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
 type Theme = 'dark' | 'light' | 'system';
 
@@ -10,7 +10,7 @@ type ThemeProviderProps = {
 
 type ThemeProviderState = {
     theme: Theme;
-    setTheme: (theme: Theme) => void;
+    setTheme: (theme: Theme, options?: { persist?: boolean }) => void;
 };
 
 const initialState: ThemeProviderState = {
@@ -28,7 +28,7 @@ export function ThemeProvider({
     storageKey = 'vite-ui-theme',
     ...props
 }: ThemeProviderProps) {
-    const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);
+    const [theme, setThemeState] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);
 
     useEffect(() => {
         const root = window.document.documentElement;
@@ -45,13 +45,14 @@ export function ThemeProvider({
         root.classList.add(theme);
     }, [theme]);
 
-    const value = {
-        theme,
-        setTheme: (theme: Theme) => {
-            localStorage.setItem(storageKey, theme);
-            setTheme(theme);
+    const setTheme = useCallback(
+        (nextTheme: Theme, options?: { persist?: boolean }) => {
+            if (options?.persist !== false) localStorage.setItem(storageKey, nextTheme);
+            setThemeState(nextTheme);
         },
-    };
+        [storageKey],
+    );
+    const value = useMemo(() => ({ theme, setTheme }), [setTheme, theme]);
 
     return (
         <ThemeProviderContext.Provider {...props} value={value}>

package/src/core/utils/dayjs.ts

@@ -0,0 +1,17 @@
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+
+/**
+ * dayjs with the plugins this package relies on already registered — import this rather than `dayjs`
+ * itself.
+ *
+ * `dayjs.extend()` mutates a singleton, so a module calling `fromNow()` or a localized format token
+ * (`L`, `LT`, …) without registering the plugin itself only works while some unrelated module
+ * happens to have been loaded first. That is not a dependency a bundler can see, and tree-shaking
+ * is free to drop the module that was doing the registering.
+ */
+export default dayjs;

package/src/css/base.css

@@ -29,3 +29,81 @@
         scrollbar-width: none; /* Firefox */
     }
 }
+
+/*
+ * Keep this rule unlayered. Autofill must outrank Tailwind's layered background
+ * and focus-shadow utilities, while retaining their ring variables.
+ */
+input[class]:-webkit-autofill,
+input[class]:-webkit-autofill:hover,
+input[class]:-webkit-autofill:focus,
+textarea[class]:-webkit-autofill,
+textarea[class]:-webkit-autofill:hover,
+textarea[class]:-webkit-autofill:focus,
+select[class]:-webkit-autofill,
+select[class]:-webkit-autofill:hover,
+select[class]:-webkit-autofill:focus {
+    -webkit-text-fill-color: var(--color-foreground);
+    -webkit-box-shadow:
+        0 0 0 1000px var(--color-background) inset,
+        var(--tw-inset-shadow, 0 0 #0000),
+        var(--tw-inset-ring-shadow, 0 0 #0000),
+        var(--tw-ring-offset-shadow, 0 0 #0000),
+        var(--tw-ring-shadow, 0 0 #0000),
+        var(--tw-shadow, 0 0 #0000);
+    box-shadow:
+        0 0 0 1000px var(--color-background) inset,
+        var(--tw-inset-shadow, 0 0 #0000),
+        var(--tw-inset-ring-shadow, 0 0 #0000),
+        var(--tw-ring-offset-shadow, 0 0 #0000),
+        var(--tw-ring-shadow, 0 0 #0000),
+        var(--tw-shadow, 0 0 #0000);
+    caret-color: var(--color-foreground);
+    /* biome-ignore lint/complexity/noImportantStyles: Chromium otherwise animates from its autofill preview font. */
+    font-size: var(--autofill-font-size) !important;
+    /* biome-ignore lint/complexity/noImportantStyles: Chromium otherwise animates from its autofill preview line height. */
+    line-height: var(--autofill-line-height) !important;
+    /* biome-ignore lint/complexity/noImportantStyles: Chromium's autofill transition causes a visible typography jump. */
+    transition: none !important;
+}
+
+input.text-xs {
+    --autofill-font-size: var(--text-xs);
+    --autofill-line-height: var(--text-xs--line-height);
+}
+
+input.text-sm {
+    --autofill-font-size: var(--text-sm);
+    --autofill-line-height: var(--text-sm--line-height);
+}
+
+input.text-base {
+    --autofill-font-size: var(--text-base);
+    --autofill-line-height: var(--text-base--line-height);
+}
+
+input.text-lg {
+    --autofill-font-size: var(--text-lg);
+    --autofill-line-height: var(--text-lg--line-height);
+}
+
+/* Chromium paints accepted autocomplete text through a separate first-line style. */
+input.text-xs:-webkit-autofill::first-line {
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+}
+
+input.text-sm:-webkit-autofill::first-line {
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
+}
+
+input.text-base:-webkit-autofill::first-line {
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+}
+
+input.text-lg:-webkit-autofill::first-line {
+    font-size: var(--text-lg);
+    line-height: var(--text-lg--line-height);
+}

package/src/env/index.test.ts

@@ -0,0 +1,94 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { type EnvProps, VertesiaEnvironment, type VertesiaRuntimeConfig } from './index';
+
+const baseProps: EnvProps = {
+    name: 'test-app',
+    version: '1.0.0',
+    isLocalDev: false,
+    isDocker: false,
+    type: 'production',
+    endpoints: {
+        studio: 'https://api.us1.vertesia.io',
+        zeno: 'https://api.us1.vertesia.io',
+        sts: 'https://sts.us1.vertesia.io',
+    },
+};
+
+describe('VertesiaEnvironment runtime configuration', () => {
+    afterEach(() => {
+        vi.unstubAllGlobals();
+    });
+
+    it('uses complete gateway-injected Firebase configuration as an initialization fallback', () => {
+        const firebase = {
+            apiKey: 'firebase-key',
+            authDomain: 'apps.us1.vertesia.io',
+            projectId: 'dengenlabs',
+            appId: 'firebase-app-id',
+        };
+        vi.stubGlobal('window', {
+            __VERTESIA_RUNTIME_CONFIG__: { authMode: 'firebase', firebase },
+        });
+
+        const env = new VertesiaEnvironment().init(baseProps);
+
+        expect(env.firebase).toEqual(firebase);
+        expect(window.AUTH_MODE).toBe('firebase');
+    });
+
+    it('preserves explicit app configuration and auth mode', () => {
+        const explicitFirebase = {
+            apiKey: 'explicit-key',
+            authDomain: 'explicit.example.com',
+            projectId: 'explicit-project',
+            appId: 'explicit-app-id',
+        };
+        vi.stubGlobal('window', {
+            AUTH_MODE: 'central',
+            __VERTESIA_RUNTIME_CONFIG__: {
+                authMode: 'firebase',
+                firebase: {
+                    apiKey: 'runtime-key',
+                    authDomain: 'apps.us1.vertesia.io',
+                    projectId: 'dengenlabs',
+                    appId: 'runtime-app-id',
+                },
+            },
+        });
+
+        const env = new VertesiaEnvironment().init({ ...baseProps, firebase: explicitFirebase });
+
+        expect(env.firebase).toEqual(explicitFirebase);
+        expect(window.AUTH_MODE).toBe('central');
+    });
+
+    it('ignores incomplete injected Firebase configuration', () => {
+        vi.stubGlobal('window', {
+            __VERTESIA_RUNTIME_CONFIG__: {
+                authMode: 'firebase',
+                firebase: {
+                    apiKey: 'firebase-key',
+                    authDomain: 'apps.us1.vertesia.io',
+                    projectId: 'dengenlabs',
+                    appId: '',
+                },
+            } satisfies VertesiaRuntimeConfig,
+        });
+
+        const env = new VertesiaEnvironment().init(baseProps);
+
+        expect(env.firebase).toBeUndefined();
+        expect(window.AUTH_MODE).toBeUndefined();
+    });
+
+    it('accepts injected Central Auth mode without Firebase configuration', () => {
+        vi.stubGlobal('window', {
+            __VERTESIA_RUNTIME_CONFIG__: { authMode: 'central' },
+        });
+
+        const env = new VertesiaEnvironment().init(baseProps);
+
+        expect(env.firebase).toBeUndefined();
+        expect(window.AUTH_MODE).toBe('central');
+    });
+});

package/src/env/index.ts

@@ -55,11 +55,46 @@ export interface EnvProps {
     onLogout?: () => void;
 }
 
+export type VertesiaRuntimeConfig =
+    | {
+          authMode: 'firebase';
+          firebase: {
+              apiKey: string;
+              authDomain: string;
+              projectId: string;
+              appId: string;
+          };
+      }
+    | {
+          authMode: 'central';
+      };
+
+declare global {
+    interface Window {
+        AUTH_MODE?: 'firebase' | 'central';
+        __VERTESIA_RUNTIME_CONFIG__?: VertesiaRuntimeConfig;
+    }
+}
+
+function injectedRuntimeConfig(): VertesiaRuntimeConfig | undefined {
+    if (typeof window === 'undefined') return undefined;
+    const runtimeConfig = window.__VERTESIA_RUNTIME_CONFIG__;
+    if (runtimeConfig?.authMode === 'central') return runtimeConfig;
+    if (runtimeConfig?.authMode !== 'firebase') return undefined;
+
+    const firebase = runtimeConfig.firebase;
+    if (!firebase?.apiKey || !firebase.authDomain || !firebase.projectId || !firebase.appId) return undefined;
+    return runtimeConfig;
+}
+
 export class VertesiaEnvironment implements Readonly<EnvProps> {
     constructor(private _props?: EnvProps | undefined) {}
 
     init(props?: EnvProps) {
-        this._props = props;
+        const runtimeConfig = injectedRuntimeConfig();
+        const runtimeFirebase = runtimeConfig?.authMode === 'firebase' ? runtimeConfig.firebase : undefined;
+        this._props = props && runtimeFirebase && !props.firebase ? { ...props, firebase: runtimeFirebase } : props;
+        if (runtimeConfig && window.AUTH_MODE === undefined) window.AUTH_MODE = runtimeConfig.authMode;
         return this;
     }