@vertesia/ui 1.6.0-dev.20260918.090710Z → 1.6.0-dev.20260923.085325Z

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.6.0-dev.20260918.090710Z",
+  "version": "1.6.0-dev.20260923.085325Z",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -45,11 +45,11 @@
     "@radix-ui/react-switch": "^1.3.7",
     "@radix-ui/react-tabs": "^1.1.21",
     "@radix-ui/react-tooltip": "^1.2.16",
-    "@vertesia/client": "1.6.0-dev.20260918.090710Z",
-    "@vertesia/common": "1.6.0-dev.20260918.090710Z",
-    "@vertesia/fusion-ux": "1.6.0-dev.20260918.090710Z",
-    "@vertesia/json": "1.6.0-dev.20260918.090710Z",
-    "@vertesia/rich-text": "1.6.0-dev.20260918.090710Z",
+    "@vertesia/client": "1.6.0-dev.20260923.085325Z",
+    "@vertesia/common": "1.6.0-dev.20260923.085325Z",
+    "@vertesia/fusion-ux": "1.6.0-dev.20260923.085325Z",
+    "@vertesia/json": "1.6.0-dev.20260923.085325Z",
+    "@vertesia/rich-text": "1.6.0-dev.20260923.085325Z",
     "ajv": "^8.20.0",
     "ajv-formats": "^3.0.1",
     "aria-hidden": "^1.2.6",
@@ -60,23 +60,23 @@
     "debounce": "^3.0.0",
     "dompurify": "^3.4.15",
     "fast-xml-parser": "^5.11.1",
-    "firebase": "^12.18.0",
+    "firebase": "^12.19.0",
     "framer-motion": "^13.2.0",
     "i18next": "^26.4.2",
     "jwt-decode": "^4.0.0",
     "katex": "^0.18.7",
     "lodash-es": "^4.18.1",
-    "lucide-react": "^1.42.0",
-    "mermaid": "^11.17.2",
+    "lucide-react": "^1.46.0",
+    "mermaid": "^12.0.0",
     "monaco-editor": "^0.56.0",
     "motion": "^13.2.0",
     "papaparse": "^5.7.0",
-    "react": "19.2.8",
+    "react": "19.3.0",
     "react-calendar": "^6.0.1",
     "react-date-picker": "^12.1.0",
-    "react-dom": "19.2.8",
+    "react-dom": "19.3.0",
     "react-error-boundary": "^6.1.5",
-    "react-i18next": "^17.0.13",
+    "react-i18next": "^17.0.14",
     "react-markdown": "^10.1.0",
     "react-pdf": "^10.5.0",
     "react-remove-scroll": "^2.7.2",
@@ -91,7 +91,7 @@
     "remark-github-blockquote-alert": "^2.1.0",
     "remark-math": "^6.0.0",
     "remark-supersub": "^1.0.0",
-    "tailwind-merge": "^3.6.0",
+    "tailwind-merge": "^3.7.0",
     "ts-md5": "^2.0.1",
     "unist-util-visit": "^5.1.0",
     "vega": "^6.4.0",
@@ -103,19 +103,19 @@
     "@testing-library/user-event": "^14.6.7",
     "@types/hast": "^3.0.5",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.13.3",
+    "@types/node": "^24.13.5",
     "@types/papaparse": "^5.5.2",
-    "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.7",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
     "@vertesia/tsconfig": "0.1.0",
     "axe-core": "^4.13.0",
     "culori": "^4.0.2",
-    "i18next-cli": "^1.73.1",
+    "i18next-cli": "^1.73.3",
     "jsdom": "^30.0.1",
     "rolldown": "1.2.8",
     "tailwindcss": "^4.3.3",
     "typescript": "7.0.2",
-    "vitest": "5.0.0",
+    "vitest": "5.0.1",
     "vitest-axe": "^0.1.0",
     "wcag-contrast": "^3.0.0"
   },
@@ -188,7 +188,7 @@
     "url": "https://github.com/vertesia/composableai.git",
     "directory": "packages/ui"
   },
-  "gitHead": "10f35da1a210e1950f9c8b1368fea89328a23ea0",
+  "gitHead": "8732631fd8099bdcab4f5375da2309f3cff34e19",
   "scripts": {
     "clean:lib": "rimraf ./lib ./tsconfig.tsbuildinfo",
     "clean": "rimraf ./node_modules ./lib ./tsconfig.tsbuildinfo",

package/src/boot/branding.ts

@@ -106,3 +106,11 @@ ${brand.colors?.dark?.background ? `:root.dark{--vertesia-boot-background:${bran
 ${brand.boot?.styles ?? ''}`,
     };
 }
+
+/** Platform defaults shared by boot markup and Firebase/OAuth React screens. */
+export const vertesiaBranding = {
+    name: 'Vertesia',
+    logo: { light: '/logo-light.png', dark: '/logo-dark.png', alt: 'Vertesia' },
+    loadingIcon: { light: '/icon.svg' },
+    favicon: '/icon.svg',
+} satisfies AppBranding;

package/src/boot/index.ts

@@ -1,3 +1,6 @@
+import { vertesiaBranding } from './branding.js';
+import { LOADING_ICON_SIZE, LOADING_INDICATOR_STYLES } from './loading.js';
+
 export interface BootScreenOptions {
     storageKey?: string;
     iconSrc?: string;
@@ -18,10 +21,11 @@ export interface BootScreenHtmlPlugin {
 }
 
 const DEFAULT_STORAGE_KEY = 'vite-ui-theme';
-const DEFAULT_ICON_SRC = '/icon.svg';
+const DEFAULT_ICON_SRC = vertesiaBranding.loadingIcon.light;
 const DEFAULT_LOADING_LABEL = 'Loading';
 
 export const BOOT_SCREEN_STYLES = `
+${LOADING_INDICATOR_STYLES}
   .vboot {
     --vb-bg: #ffffff;
     --vb-fg: #0a0a0a;
@@ -44,10 +48,6 @@ export const BOOT_SCREEN_STYLES = `
     --vb-primary-fg: #fafafa;
     --vb-glow: rgba(79, 70, 229, 0.2);
   }
-  @keyframes vboot-spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-  }
   .vboot-overlay {
     position: absolute !important;
     inset: 0 !important;
@@ -75,20 +75,6 @@ export const BOOT_SCREEN_STYLES = `
     padding: 0 !important;
     transform: none !important;
   }
-  .vboot-spinner {
-    width: 2.5rem !important;
-    min-width: 2.5rem !important;
-    max-width: 2.5rem !important;
-    height: 2.5rem !important;
-    min-height: 2.5rem !important;
-    max-height: 2.5rem !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    object-fit: contain !important;
-    flex: none !important;
-    border-radius: 100% !important;
-    animation: var(--vertesia-loading-animation, vboot-spin 2s linear infinite) !important;
-  }
   .vboot-icon-dark { display: none; }
   .vboot-dark .vboot-icon-light { display: none; }
   .vboot-dark .vboot-icon-dark { display: block; }
@@ -115,9 +101,6 @@ export const BOOT_SCREEN_STYLES = `
   .vboot-btn:hover {
     opacity: 0.9;
   }
-  @media (prefers-reduced-motion: reduce) {
-    .vboot-spinner { animation: none !important; }
-  }
 `;
 
 function inlineJson(value: string): string {
@@ -144,7 +127,7 @@ export function renderDefaultBootContent(options: BootScreenOptions = {}): strin
         );
     const { iconSrc, loadingLabel } = normalizedOptions(options);
     const icon = (src: string, className = '') =>
-        `<img class="vboot-spinner ${className}" width="40" height="40" src="${escapeMarkup(src)}" alt="${escapeMarkup(loadingLabel)}" />`;
+        `<img class="vboot-spinner vertesia-loading-icon vertesia-loading-motion ${className}" width="${LOADING_ICON_SIZE}" height="${LOADING_ICON_SIZE}" src="${escapeMarkup(src)}" alt="${escapeMarkup(loadingLabel)}" />`;
     return `<div class="vboot-overlay" role="status" aria-live="polite">${options.darkIconSrc ? icon(iconSrc, 'vboot-icon-light') + icon(options.darkIconSrc, 'vboot-icon-dark') : icon(iconSrc)}
 <div id="loading-slow-notice" class="vboot-slow" style="display: none;">
 <p>${escapeMarkup(options.slowLoadingLabel ?? 'Still loading — this is taking longer than usual.')}</p>

package/src/boot/loading.ts

@@ -0,0 +1,27 @@
+/** Shared by server-rendered boot markup and React auth loaders. No React dependency. */
+export const LOADING_ICON_SIZE = 40;
+export const LOADING_INDICATOR_STYLES = `
+@keyframes vertesia-loading-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+.vertesia-loading-motion {
+    animation: var(--vertesia-loading-animation, vertesia-loading-spin 2s linear infinite);
+}
+.vertesia-loading-icon {
+    width: ${LOADING_ICON_SIZE}px !important;
+    min-width: ${LOADING_ICON_SIZE}px !important;
+    max-width: ${LOADING_ICON_SIZE}px !important;
+    height: ${LOADING_ICON_SIZE}px !important;
+    min-height: ${LOADING_ICON_SIZE}px !important;
+    max-height: ${LOADING_ICON_SIZE}px !important;
+    margin: 0;
+    padding: 0;
+    object-fit: contain;
+    flex: none;
+    border-radius: 100% !important;
+}
+@media (prefers-reduced-motion: reduce) {
+    .vertesia-loading-motion { animation: none !important; }
+}
+`;

package/src/core/components/SelectList.tsx

@@ -88,6 +88,7 @@ export function SelectList<T>({
                         onSelect={onSelect}
                         layout={layout}
                         noCheck={noCheck}
+                        isSelected={isSelected}
                     />
                 );
             })}
@@ -99,17 +100,19 @@ interface SelectListOptionProps<T> {
     onSelect: (value: T) => void;
     layout: OptionLayout;
     noCheck?: boolean;
+    isSelected: boolean;
 }
 
-function SelectListOption<T>({ option, onSelect, layout, noCheck }: SelectListOptionProps<T>) {
+function SelectListOption<T>({ option, onSelect, layout, noCheck, isSelected }: SelectListOptionProps<T>) {
     return (
         <Button
             variant="unstyled"
             size="none"
             className={clsx(
-                'group !flex w-full items-center cursor-pointer gap-x-2 hover:bg-muted',
+                'group flex! w-full items-center cursor-pointer gap-x-2 hover:bg-muted',
                 layout.reverse && 'flex-row-reverse',
                 layout.className,
+                isSelected && 'bg-muted',
             )}
             onClick={() => onSelect(option)}
         >

package/src/core/components/SidePanel.tsx

@@ -2,6 +2,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { Minus, X } from 'lucide-react';
 import type React from 'react';
 import { useState } from 'react';
+import { Portal } from './Portal.js';
 import { Button } from './shadcn/button';
 
 interface SidePanelProps {
@@ -72,78 +73,82 @@ export function SidePanel({
     const initialX = isLeft ? '-100%' : '100%';
 
     return (
-        <AnimatePresence>
-            {isOpen && (
-                <div className="relative z-20">
-                    {/* Backdrop */}
-                    {backdrop && (
-                        <motion.div
-                            className="fixed inset-0 bg-black/70"
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            exit={{ opacity: 0 }}
-                            onClick={onClose}
-                        />
-                    )}
+        <Portal>
+            <AnimatePresence>
+                {isOpen && (
+                    <div className="relative z-20">
+                        {/* Backdrop */}
+                        {backdrop && (
+                            <motion.div
+                                className="fixed inset-0 bg-black/70"
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                exit={{ opacity: 0 }}
+                                onClick={onClose}
+                            />
+                        )}
 
-                    <div className={`fixed inset-y-0 ${positionClass} overflow-hidden`}>
-                        <div className="absolute inset-0 overflow-hidden">
-                            <div
-                                className={`pointer-events-none fixed inset-y-0 ${positionClass} flex max-w-full ${paddingClass}`}
-                            >
-                                <motion.div
-                                    className={`pointer-events-auto ${borderClass}`}
-                                    style={{ width: `${_panelWidth}px` }}
-                                    initial={{ x: initialX }}
-                                    animate={{ x: 0 }}
-                                    exit={{ x: initialX }}
-                                    transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+                        <div className={`fixed inset-y-0 ${positionClass} overflow-hidden`}>
+                            <div className="absolute inset-0 overflow-hidden">
+                                <div
+                                    className={`pointer-events-none fixed inset-y-0 ${positionClass} flex max-w-full ${paddingClass}`}
                                 >
-                                    <div className="relative flex h-full">
-                                        {/* Drag Handle */}
-                                        {resizable && (
-                                            // biome-ignore lint/a11y/noStaticElementInteractions: drag handle is pointer-only (no keyboard equivalent for continuous resize); ARIA role omitted to avoid useAriaPropsForRole false positive.
-                                            // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label kept for AT users; div has no semantic role because separator/slider would require valuenow/min/max
+                                    <motion.div
+                                        className={`pointer-events-auto ${borderClass}`}
+                                        style={{ width: `${_panelWidth}px` }}
+                                        initial={{ x: initialX }}
+                                        animate={{ x: 0 }}
+                                        exit={{ x: initialX }}
+                                        transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+                                    >
+                                        <div className="relative flex h-full">
+                                            {/* Drag Handle */}
+                                            {resizable && (
+                                                // biome-ignore lint/a11y/noStaticElementInteractions: drag handle is pointer-only (no keyboard equivalent for continuous resize); ARIA role omitted to avoid useAriaPropsForRole false positive.
+                                                // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label kept for AT users; div has no semantic role because separator/slider would require valuenow/min/max
+                                                <div
+                                                    aria-label="Resize panel"
+                                                    className={`absolute ${dragHandleClass} top-0 bottom-0 w-3 z-25 cursor-ew-resize hover:bg-primary transition-colors flex items-center justify-center`}
+                                                    onMouseDown={handleDragStart}
+                                                >
+                                                    <Minus className="rotate-90 font-semibold" strokeWidth={4} />
+                                                </div>
+                                            )}
                                             <div
-                                                aria-label="Resize panel"
-                                                className={`absolute ${dragHandleClass} top-0 bottom-0 w-3 z-25 cursor-ew-resize hover:bg-primary transition-colors flex items-center justify-center`}
-                                                onMouseDown={handleDragStart}
+                                                className={`flex-1 min-w-0 flex flex-col bg-background shadow-xl ${className}`}
                                             >
-                                                <Minus className="rotate-90 font-semibold" strokeWidth={4} />
-                                            </div>
-                                        )}
-                                        <div
-                                            className={`flex-1 min-w-0 flex flex-col bg-background shadow-xl ${className}`}
-                                        >
-                                            {/* Sticky header */}
-                                            {title && (
-                                                <div className="sticky top-0 z-10 bg-background px-2 sm:px-4 py-2 border-b">
-                                                    <div className="flex items-start justify-between">
-                                                        <h2 className="w-full text-base font-semibold leading-6">
-                                                            <div className="text-2xl">{title ?? ''}</div>
-                                                        </h2>
-                                                        <div className="ms-3 flex h-7 items-center">
-                                                            <CloseButton onClose={onClose} />
+                                                {/* Sticky header */}
+                                                {title && (
+                                                    <div className="sticky top-0 z-10 bg-background px-2 sm:px-4 py-2 border-b">
+                                                        <div className="flex items-start justify-between">
+                                                            <h2 className="w-full text-base font-semibold leading-6">
+                                                                <div className="text-2xl">{title ?? ''}</div>
+                                                            </h2>
+                                                            <div className="ms-3 flex h-7 items-center">
+                                                                <CloseButton onClose={onClose} />
+                                                            </div>
                                                         </div>
                                                     </div>
-                                                </div>
-                                            )}
+                                                )}
 
-                                            {/* Scrollable content */}
-                                            <div
-                                                className={contentClassName ?? 'flex-1 overflow-auto px-2 sm:px-4 py-4'}
-                                            >
-                                                <div className="w-full h-full flex-1 flex flex-col">{children}</div>
+                                                {/* Scrollable content */}
+                                                <div
+                                                    className={
+                                                        contentClassName ?? 'flex-1 overflow-auto px-2 sm:px-4 py-4'
+                                                    }
+                                                >
+                                                    <div className="w-full h-full flex-1 flex flex-col">{children}</div>
+                                                </div>
                                             </div>
                                         </div>
-                                    </div>
-                                </motion.div>
+                                    </motion.div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            )}
-        </AnimatePresence>
+                )}
+            </AnimatePresence>
+        </Portal>
     );
 }
 

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

@@ -0,0 +1,101 @@
+// @vitest-environment jsdom
+import { act, cleanup, render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ThemeProvider } from './ThemeProvider.js';
+
+let dark = false;
+let media: EventTarget;
+
+beforeEach(() => {
+    dark = false;
+    media = new EventTarget();
+    vi.stubGlobal('matchMedia', () => ({
+        get matches() {
+            return dark;
+        },
+        addEventListener: media.addEventListener.bind(media),
+        removeEventListener: media.removeEventListener.bind(media),
+    }));
+});
+
+afterEach(() => {
+    cleanup();
+    localStorage.clear();
+    document.documentElement.classList.remove('light', 'dark');
+    vi.unstubAllGlobals();
+});
+
+function systemTheme(isDark: boolean) {
+    act(() => {
+        dark = isDark;
+        media.dispatchEvent(new Event('change'));
+    });
+}
+
+function storedTheme(value: string | null, key: string | null = 'vite-ui-theme') {
+    act(() => {
+        const event = new StorageEvent('storage', { key, newValue: value });
+        Object.defineProperty(event, 'storageArea', { value: localStorage });
+        window.dispatchEvent(event);
+    });
+}
+
+describe('ThemeProvider live preferences', () => {
+    it('follows system changes while the authorization page remains open', () => {
+        render(
+            <ThemeProvider>
+                <div />
+            </ThemeProvider>,
+        );
+        expect(document.documentElement.classList.contains('light')).toBe(true);
+        systemTheme(true);
+        expect(document.documentElement.classList.contains('dark')).toBe(true);
+        systemTheme(false);
+        expect(document.documentElement.classList.contains('light')).toBe(true);
+    });
+
+    it.each(['light', 'dark'])('keeps explicit %s preference over the system', (theme) => {
+        localStorage.setItem('vite-ui-theme', theme);
+        render(
+            <ThemeProvider>
+                <div />
+            </ThemeProvider>,
+        );
+        systemTheme(true);
+        systemTheme(false);
+        expect(document.documentElement.classList.contains(theme)).toBe(true);
+    });
+
+    it('syncs another tab and resumes system tracking when the preference is cleared', () => {
+        render(
+            <ThemeProvider>
+                <div />
+            </ThemeProvider>,
+        );
+        storedTheme('dark');
+        expect(document.documentElement.classList.contains('dark')).toBe(true);
+        systemTheme(false);
+        expect(document.documentElement.classList.contains('dark')).toBe(true);
+        storedTheme('light');
+        expect(document.documentElement.classList.contains('light')).toBe(true);
+        storedTheme('system');
+        systemTheme(true);
+        expect(document.documentElement.classList.contains('dark')).toBe(true);
+        storedTheme('light');
+        storedTheme(null, null);
+        expect(document.documentElement.classList.contains('dark')).toBe(true);
+        storedTheme('light', 'unrelated');
+        expect(document.documentElement.classList.contains('dark')).toBe(true);
+    });
+
+    it('removes system listeners when unmounted', () => {
+        const { unmount } = render(
+            <ThemeProvider>
+                <div />
+            </ThemeProvider>,
+        );
+        unmount();
+        systemTheme(true);
+        expect(document.documentElement.classList.contains('light')).toBe(true);
+    });
+});

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

@@ -32,19 +32,31 @@ export function ThemeProvider({
 
     useEffect(() => {
         const root = window.document.documentElement;
-
-        root.classList.remove('light', 'dark');
-
-        if (theme === 'system') {
-            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-
-            root.classList.add(systemTheme);
+        if (theme !== 'system') {
+            root.classList.remove('light', 'dark');
+            root.classList.add(theme);
             return;
         }
-
-        root.classList.add(theme);
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        const applyTheme = () => {
+            root.classList.remove('light', 'dark');
+            root.classList.add(media.matches ? 'dark' : 'light');
+        };
+        applyTheme();
+        media.addEventListener('change', applyTheme);
+        return () => media.removeEventListener('change', applyTheme);
     }, [theme]);
 
+    useEffect(() => {
+        const syncStoredTheme = (event: StorageEvent) => {
+            if (event.storageArea !== localStorage || (event.key !== storageKey && event.key !== null)) return;
+            const value = event.newValue;
+            setThemeState(value === 'dark' || value === 'light' || value === 'system' ? value : defaultTheme);
+        };
+        window.addEventListener('storage', syncStoredTheme);
+        return () => window.removeEventListener('storage', syncStoredTheme);
+    }, [defaultTheme, storageKey]);
+
     const setTheme = useCallback(
         (nextTheme: Theme, options?: { persist?: boolean }) => {
             if (options?.persist !== false) localStorage.setItem(storageKey, nextTheme);

package/src/env/index.test.ts

@@ -240,3 +240,24 @@ describe('fixed Firebase tenant', () => {
         expect(env.firebase).toBeUndefined();
     });
 });
+
+afterEach(() => vi.unstubAllGlobals());
+
+it('uses injected branch OAuth identity and API endpoints over build-time preview settings', () => {
+    const origin = 'https://app-gateway-dev-auth-test.api.dev1.vertesia.io';
+    const oauth = {
+        clientId: `${origin}/tenants/05948c_98b1eb/apps/test-app/.well-known/oauth-client/vertesia-app`,
+        redirectUri: `${origin}/tenants/05948c_98b1eb/apps/test-app/app/`,
+    };
+    const endpoints = {
+        studio: 'https://studio-server-dev-auth-test.api.dev1.vertesia.io',
+        zeno: 'https://zeno-server-dev-auth-test.api.dev1.vertesia.io',
+        sts: 'https://token-server-dev-auth-test.api.dev1.vertesia.io',
+    };
+    vi.stubGlobal('window', { __VERTESIA_RUNTIME_CONFIG__: { authMode: 'central', oauth, endpoints } });
+    const env = new VertesiaEnvironment().init(baseProps);
+    expect(env.oauth).toEqual(oauth);
+    expect(env.endpoints).toMatchObject(endpoints);
+    expect(window.AUTH_MODE).toBe('central');
+    expect(env.firebase).toBeUndefined();
+});

package/src/env/index.ts

@@ -1,3 +1,13 @@
+import { isTrustedAuthBrokerUrl } from '../session/auth/vertesiaHosts.js';
+
+export {
+    FIRST_PARTY_HOST_PATTERNS,
+    GATEWAY_HOST_PATTERNS,
+    isLoopbackHostname,
+    isTrustedAuthBrokerUrl,
+    normalizeHostname,
+} from '../session/auth/vertesiaHosts.js';
+
 // hook to initialize the environment and auth session
 // the main app must call this hook before rendering the page.
 
@@ -28,8 +38,10 @@ export interface EnvProps {
         /** Appgen app-gateway endpoint (serves live development previews and app bundles). */
         gateway?: string;
     };
+    /** Explicitly allow legacy Firebase/central sign-in in an iframe when host authentication is unavailable. */
+    allowLegacyIframeAuth?: boolean;
     /** Public OAuth client for independently hosted apps; ignored inside Studio or a gateway session. */
-    oauth?: { clientId: string; redirectUri: string; scopes?: string[] };
+    oauth?: { clientId: string; redirectUri: string; scopes?: string[]; offlineAccess?: boolean };
     firebase?: {
         apiKey: string;
         authDomain: string;
@@ -71,6 +83,7 @@ export interface EnvProps {
 export type VertesiaRuntimeConfig =
     | {
           authMode: 'firebase';
+          allowLegacyIframeAuth?: boolean;
           firebase: {
               apiKey: string;
               authDomain: string;
@@ -80,6 +93,10 @@ export type VertesiaRuntimeConfig =
       }
     | {
           authMode: 'central';
+          allowLegacyIframeAuth?: boolean;
+          oauth?: EnvProps['oauth'];
+          /** Deployment-injected API endpoints for dev branch path-served apps. */
+          endpoints?: Pick<EnvProps['endpoints'], 'studio' | 'zeno' | 'sts'>;
           /** Broker selected by the serving gateway. Overrides build-time configuration. */
           authUrl?: string;
           /** The serving gateway owns this standalone app's OAuth session. */
@@ -147,9 +164,19 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
         const runtimeFirebase = runtimeConfig?.authMode === 'firebase' ? runtimeConfig.firebase : undefined;
         this._props = props && runtimeFirebase && !props.firebase ? { ...props, firebase: runtimeFirebase } : props;
         const authUrl = runtimeConfig?.authMode === 'central' ? runtimeConfig.authUrl?.trim() : undefined;
-        if (this._props && authUrl) {
+        if (this._props && authUrl && isTrustedAuthBrokerUrl(authUrl, { allowLoopback: this._props.isLocalDev })) {
             this._props = { ...this._props, endpoints: { ...this._props.endpoints, auth: authUrl } };
         }
+        if (this._props && runtimeConfig?.authMode === 'central' && runtimeConfig.oauth) {
+            this._props = {
+                ...this._props,
+                oauth: runtimeConfig.oauth,
+                endpoints: { ...this._props.endpoints, ...runtimeConfig.endpoints },
+            };
+        }
+        if (this._props && runtimeConfig?.allowLegacyIframeAuth !== undefined) {
+            this._props = { ...this._props, allowLegacyIframeAuth: runtimeConfig.allowLegacyIframeAuth };
+        }
         const tenantId =
             typeof buildEnv?.VITE_FIREBASE_TENANT_ID === 'string' ? buildEnv.VITE_FIREBASE_TENANT_ID.trim() : '';
         if (this._props?.firebase && tenantId && !this._props.firebase.tenantId) {
@@ -252,6 +279,10 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
         return this._props?.defaultAuthSelection;
     }
 
+    get allowLegacyIframeAuth() {
+        return this._props?.allowLegacyIframeAuth ?? false;
+    }
+
     get oauth() {
         return this._props?.oauth;
     }