@vertesia/ui 1.4.0 → 1.5.0-dev.20260713.151751Z

package/src/i18n/locales/ja.json

@@ -1,4 +1,13 @@
 {
+  "abac_perms.collection.content_manager": "コレクション管理者",
+  "abac_perms.collection.content_reader": "コレクション閲覧者",
+  "abac_perms.collection.content_writer": "コレクション編集者",
+  "abac_perms.document.content_manager": "コンテンツ管理者",
+  "abac_perms.document.content_reader": "コンテンツ閲覧者",
+  "abac_perms.document.content_writer": "コンテンツ編集者",
+  "abac_perms.scope.collection": "コレクション",
+  "abac_perms.scope.document": "ドキュメント",
+  "abac_perms.scope.task": "タスク",
   "agent.activeWorkstreams_one": "エージェントは{{count}}つのアクティブなワークストリームを実行中",
   "agent.activeWorkstreams_other": "エージェントは{{count}}つのアクティブなワークストリームを実行中",
   "agent.addAttachment": "添付ファイルを追加",
@@ -226,6 +235,14 @@
   "auth.providers.bodyConsumer": "続行するには、以下のプロバイダーのいずれかを選択してください。",
   "auth.providers.eyebrow": "サインイン方法を選択",
   "auth.providers.title": "あと一歩です",
+  "auth.restricted.autoRedirect": "{{seconds}} 秒後にメインサイトへ移動します…",
+  "auth.restricted.body": "このサイトは、新機能や修正への早期アクセス権を持つユーザーに限定されています。メインサイトに進むか、このサイトへの早期アクセスについて Vertesia にお問い合わせください。",
+  "auth.restricted.calloutMeta": "早期アクセスについては Vertesia にお問い合わせください",
+  "auth.restricted.calloutTitle": "早期アクセスが必要です",
+  "auth.restricted.eyebrow": "制限付きサイト",
+  "auth.restricted.redirect": "メインサイトへ移動",
+  "auth.restricted.title": "アクセスが制限されています",
+  "auth.restricted.useDifferent": "別のメールアドレスを使う",
   "auth.returning.body": "チームのプロジェクトはいつでも準備万端です。前回使用した方法で続けるか、別の方法に切り替えてください。",
   "auth.returning.eyebrow": "Vertesia へお帰りなさい",
   "auth.returning.notYou": "あなたではありませんか?",

package/src/i18n/locales/ko.json

@@ -1,4 +1,13 @@
 {
+  "abac_perms.collection.content_manager": "컬렉션 관리자",
+  "abac_perms.collection.content_reader": "컬렉션 열람자",
+  "abac_perms.collection.content_writer": "컬렉션 편집자",
+  "abac_perms.document.content_manager": "콘텐츠 관리자",
+  "abac_perms.document.content_reader": "콘텐츠 열람자",
+  "abac_perms.document.content_writer": "콘텐츠 편집자",
+  "abac_perms.scope.collection": "컬렉션",
+  "abac_perms.scope.document": "문서",
+  "abac_perms.scope.task": "작업",
   "agent.activeWorkstreams_one": "에이전트가 {{count}}개의 활성 워크스트림을 실행 중",
   "agent.activeWorkstreams_other": "에이전트가 {{count}}개의 활성 워크스트림을 실행 중",
   "agent.addAttachment": "첨부 파일 추가",
@@ -226,6 +235,14 @@
   "auth.providers.bodyConsumer": "계속하려면 아래 공급자 중 하나를 선택하세요.",
   "auth.providers.eyebrow": "로그인 방법 선택",
   "auth.providers.title": "한 단계만 더",
+  "auth.restricted.autoRedirect": "{{seconds}}초 후 메인 사이트로 이동합니다…",
+  "auth.restricted.body": "이 사이트는 새로운 기능 및 수정 사항에 대한 얼리 액세스 권한이 있는 사용자로 제한됩니다. 메인 사이트로 계속하거나 이 사이트에 대한 얼리 액세스에 관해 Vertesia에 문의하세요.",
+  "auth.restricted.calloutMeta": "얼리 액세스는 Vertesia에 문의하세요",
+  "auth.restricted.calloutTitle": "얼리 액세스 필요",
+  "auth.restricted.eyebrow": "제한된 사이트",
+  "auth.restricted.redirect": "메인 사이트로 이동",
+  "auth.restricted.title": "액세스가 제한됨",
+  "auth.restricted.useDifferent": "다른 이메일 사용",
   "auth.returning.body": "팀 프로젝트가 준비되어 있습니다. 마지막에 사용한 방법으로 계속하거나 다른 방법을 선택하세요.",
   "auth.returning.eyebrow": "Vertesia 에 다시 오신 것을 환영합니다",
   "auth.returning.notYou": "본인이 아니신가요?",

package/src/i18n/locales/pt.json

@@ -1,4 +1,13 @@
 {
+  "abac_perms.collection.content_manager": "Gerenciador de coleção",
+  "abac_perms.collection.content_reader": "Leitor de coleção",
+  "abac_perms.collection.content_writer": "Editor de coleção",
+  "abac_perms.document.content_manager": "Gerenciador de conteúdo",
+  "abac_perms.document.content_reader": "Leitor de conteúdo",
+  "abac_perms.document.content_writer": "Editor de conteúdo",
+  "abac_perms.scope.collection": "Coleção",
+  "abac_perms.scope.document": "Documento",
+  "abac_perms.scope.task": "Tarefa",
   "agent.activeWorkstreams_one": "O agente tem {{count}} fluxo de trabalho ativo em execução",
   "agent.activeWorkstreams_many": "O agente tem {{count}} fluxos de trabalho ativos em execução",
   "agent.activeWorkstreams_other": "O agente tem {{count}} fluxos de trabalho ativos em execução",
@@ -228,6 +237,14 @@
   "auth.providers.bodyConsumer": "Escolha um dos provedores abaixo para continuar.",
   "auth.providers.eyebrow": "Escolha como entrar",
   "auth.providers.title": "Mais um passo",
+  "auth.restricted.autoRedirect": "Redirecionando para o site principal em {{seconds}} s…",
+  "auth.restricted.body": "Este site é restrito a usuários com acesso antecipado a novos recursos e correções. Continue para o site principal ou entre em contato com a Vertesia sobre o acesso antecipado a este site.",
+  "auth.restricted.calloutMeta": "Entre em contato com a Vertesia para acesso antecipado",
+  "auth.restricted.calloutTitle": "Acesso antecipado necessário",
+  "auth.restricted.eyebrow": "Site restrito",
+  "auth.restricted.redirect": "Ir para o site principal",
+  "auth.restricted.title": "Acesso restrito",
+  "auth.restricted.useDifferent": "Usar outro e-mail",
   "auth.returning.body": "O projeto da sua equipe está pronto quando você estiver. Continue com o último método usado, ou mude.",
   "auth.returning.eyebrow": "Retornando ao Vertesia",
   "auth.returning.notYou": "Não é você?",

package/src/i18n/locales/ru.json

@@ -1,4 +1,13 @@
 {
+  "abac_perms.collection.content_manager": "Менеджер коллекций",
+  "abac_perms.collection.content_reader": "Читатель коллекций",
+  "abac_perms.collection.content_writer": "Редактор коллекций",
+  "abac_perms.document.content_manager": "Менеджер контента",
+  "abac_perms.document.content_reader": "Читатель контента",
+  "abac_perms.document.content_writer": "Редактор контента",
+  "abac_perms.scope.collection": "Коллекция",
+  "abac_perms.scope.document": "Документ",
+  "abac_perms.scope.task": "Задача",
   "agent.activeWorkstreams_one": "У агента {{count}} активный рабочий поток",
   "agent.activeWorkstreams_few": "У агента {{count}} активных рабочих потока",
   "agent.activeWorkstreams_many": "У агента {{count}} активных рабочих потоков",
@@ -230,6 +239,14 @@
   "auth.providers.bodyConsumer": "Выберите одного из провайдеров ниже, чтобы продолжить.",
   "auth.providers.eyebrow": "Выберите способ входа",
   "auth.providers.title": "Ещё один шаг",
+  "auth.restricted.autoRedirect": "Перенаправление на основной сайт через {{seconds}} с…",
+  "auth.restricted.body": "Этот сайт доступен только пользователям с ранним доступом к новым функциям и исправлениям. Перейдите на основной сайт или свяжитесь с Vertesia по вопросу раннего доступа к этому сайту.",
+  "auth.restricted.calloutMeta": "Свяжитесь с Vertesia для получения раннего доступа",
+  "auth.restricted.calloutTitle": "Требуется ранний доступ",
+  "auth.restricted.eyebrow": "Сайт с ограниченным доступом",
+  "auth.restricted.redirect": "Перейти на основной сайт",
+  "auth.restricted.title": "Доступ ограничен",
+  "auth.restricted.useDifferent": "Использовать другой адрес",
   "auth.returning.body": "Проект вашей команды готов. Продолжите с последним использованным способом или смените его.",
   "auth.returning.eyebrow": "Возвращение в Vertesia",
   "auth.returning.notYou": "Это не вы?",

package/src/i18n/locales/tr.json

@@ -1,4 +1,13 @@
 {
+  "abac_perms.collection.content_manager": "Koleksiyon Yöneticisi",
+  "abac_perms.collection.content_reader": "Koleksiyon Okuyucusu",
+  "abac_perms.collection.content_writer": "Koleksiyon Yazarı",
+  "abac_perms.document.content_manager": "İçerik Yöneticisi",
+  "abac_perms.document.content_reader": "İçerik Okuyucusu",
+  "abac_perms.document.content_writer": "İçerik Yazarı",
+  "abac_perms.scope.collection": "Koleksiyon",
+  "abac_perms.scope.document": "Belge",
+  "abac_perms.scope.task": "Görev",
   "agent.activeWorkstreams_one": "Ajanın {{count}} aktif iş akışı çalışıyor",
   "agent.activeWorkstreams_other": "Ajanın {{count}} aktif iş akışı çalışıyor",
   "agent.addAttachment": "Ek dosya ekle",
@@ -226,6 +235,14 @@
   "auth.providers.bodyConsumer": "Devam etmek için aşağıdaki sağlayıcılardan birini seçin.",
   "auth.providers.eyebrow": "Oturum açma yöntemini seç",
   "auth.providers.title": "Bir adım daha",
+  "auth.restricted.autoRedirect": "{{seconds}} sn içinde ana siteye yönlendiriliyorsunuz…",
+  "auth.restricted.body": "Bu site, yeni özelliklere ve düzeltmelere erken erişimi olan kullanıcılarla sınırlıdır. Lütfen ana siteye devam edin veya bu siteye erken erişim hakkında Vertesia ile iletişime geçin.",
+  "auth.restricted.calloutMeta": "Erken erişim için Vertesia ile iletişime geçin",
+  "auth.restricted.calloutTitle": "Erken erişim gerekli",
+  "auth.restricted.eyebrow": "Kısıtlı site",
+  "auth.restricted.redirect": "Ana siteye git",
+  "auth.restricted.title": "Erişim kısıtlı",
+  "auth.restricted.useDifferent": "Farklı bir e-posta kullan",
   "auth.returning.body": "Ekibinizin projesi siz hazır olduğunuzda hazır. Son kullandığınız yöntemle devam edin veya yöntemi değiştirin.",
   "auth.returning.eyebrow": "Vertesia'ya tekrar hoş geldiniz",
   "auth.returning.notYou": "Siz değil misiniz?",

package/src/i18n/locales/zh-TW.json

@@ -1,4 +1,13 @@
 {
+  "abac_perms.collection.content_manager": "集合管理員",
+  "abac_perms.collection.content_reader": "集合檢視者",
+  "abac_perms.collection.content_writer": "集合編輯者",
+  "abac_perms.document.content_manager": "內容管理員",
+  "abac_perms.document.content_reader": "內容檢視者",
+  "abac_perms.document.content_writer": "內容編輯者",
+  "abac_perms.scope.collection": "集合",
+  "abac_perms.scope.document": "文件",
+  "abac_perms.scope.task": "任務",
   "agent.activeWorkstreams_one": "代理有{{count}}個活躍的工作流正在運行",
   "agent.activeWorkstreams_other": "代理有{{count}}個活躍的工作流正在運行",
   "agent.addAttachment": "新增附件",
@@ -226,6 +235,14 @@
   "auth.providers.bodyConsumer": "請從下方提供者中選擇一個繼續。",
   "auth.providers.eyebrow": "選擇登入方式",
   "auth.providers.title": "再一步",
+  "auth.restricted.autoRedirect": "{{seconds}} 秒後前往主網站…",
+  "auth.restricted.body": "本網站僅限擁有新功能和修復搶先體驗權限的使用者使用。請繼續前往主網站，或就此網站的搶先體驗事宜聯絡 Vertesia。",
+  "auth.restricted.calloutMeta": "聯絡 Vertesia 取得搶先體驗權限",
+  "auth.restricted.calloutTitle": "需要搶先體驗權限",
+  "auth.restricted.eyebrow": "受限網站",
+  "auth.restricted.redirect": "前往主網站",
+  "auth.restricted.title": "存取受限",
+  "auth.restricted.useDifferent": "使用其他電子郵件",
   "auth.returning.body": "團隊專案隨時為您準備就緒。繼續使用上次的方式,或更換其他方式。",
   "auth.returning.eyebrow": "回到 Vertesia",
   "auth.returning.notYou": "不是您?",

package/src/i18n/locales/zh.json

@@ -1,4 +1,13 @@
 {
+  "abac_perms.collection.content_manager": "集合管理员",
+  "abac_perms.collection.content_reader": "集合查看者",
+  "abac_perms.collection.content_writer": "集合编辑者",
+  "abac_perms.document.content_manager": "内容管理员",
+  "abac_perms.document.content_reader": "内容查看者",
+  "abac_perms.document.content_writer": "内容编辑者",
+  "abac_perms.scope.collection": "集合",
+  "abac_perms.scope.document": "文档",
+  "abac_perms.scope.task": "任务",
   "agent.activeWorkstreams_one": "代理有{{count}}个活跃的工作流正在运行",
   "agent.activeWorkstreams_other": "代理有{{count}}个活跃的工作流正在运行",
   "agent.addAttachment": "添加附件",
@@ -226,6 +235,14 @@
   "auth.providers.bodyConsumer": "请从下方提供商中选择一个继续。",
   "auth.providers.eyebrow": "选择登录方式",
   "auth.providers.title": "再一步",
+  "auth.restricted.autoRedirect": "{{seconds}} 秒后前往主站点…",
+  "auth.restricted.body": "本站点仅限拥有新功能和修复抢先体验权限的用户使用。请继续前往主站点，或就此站点的抢先体验事宜联系 Vertesia。",
+  "auth.restricted.calloutMeta": "联系 Vertesia 获取抢先体验权限",
+  "auth.restricted.calloutTitle": "需要抢先体验权限",
+  "auth.restricted.eyebrow": "受限站点",
+  "auth.restricted.redirect": "前往主站点",
+  "auth.restricted.title": "访问受限",
+  "auth.restricted.useDifferent": "使用其他邮箱",
   "auth.returning.body": "团队项目随时为您准备就绪。继续使用上次的方式,或更换其他方式。",
   "auth.returning.eyebrow": "回到 Vertesia",
   "auth.returning.notYou": "不是您?",

package/src/layout/Sidebar.tsx

@@ -70,10 +70,15 @@ export function SidebarTooltip({ children, text }: { children: React.ReactNode;
     );
 }
 
+export interface SidebarItemIconProps {
+    className?: string;
+    'aria-hidden'?: boolean | 'true' | 'false';
+}
+
 export interface SidebarItemProps {
     href: string;
     to?: string;
-    icon?: React.ComponentType<React.HTMLAttributes<Element>>;
+    icon?: React.ComponentType<SidebarItemIconProps>;
     current?: boolean;
     onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
     children: React.ReactNode | React.ReactNode[];

package/src/router/NestedRouterProvider.tsx

@@ -46,12 +46,12 @@ export function NestedRouterProvider({ routes, index, children, fixLinks = false
         : (elem: React.ReactNode) => elem;
 
     return (
+        nestedRouter &&
         nestedRouteMatch && (
             <ReactRouterContext.Provider
                 value={{
                     ...ctx,
-                    // biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here
-                    router: nestedRouter!,
+                    router: nestedRouter,
                     route: nestedRouteMatch.value,
                     params: nestedRouteMatch.params,
                     matchedRoutePath: `/${nestedRouteMatch.matchedSegments.join('/')}`,

package/src/router/Redirect.tsx

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import type { NavigateOptions } from './HistoryNavigator';
+import { useNavigate } from './Router';
+
+export interface RedirectProps {
+    to: string;
+    replace?: boolean;
+    state?: unknown;
+}
+
+export function Redirect({ to, replace = true, state }: RedirectProps) {
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        navigate(to, { replace, state });
+    }, [navigate, replace, state, to]);
+
+    return null;
+}
+
+/**
+ * Creates a route component that redirects to another route when rendered.
+ * Useful in route tables, for example: `{ path: '/', Component: redirectTo('/content') }`.
+ */
+export function redirectTo(to: string, options: Pick<NavigateOptions, 'replace' | 'state'> = {}) {
+    return function RedirectRoute() {
+        return <Redirect to={to} replace={options.replace} state={options.state} />;
+    };
+}

package/src/router/Router.tsx

@@ -40,8 +40,7 @@ export abstract class BaseRouter {
 
     match(path: string): PathMatch<Route> | null {
         const useIndex = isRootPath(path) && this.index;
-        // biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here
-        return this.matcher.match(useIndex ? this.index! : path);
+        return this.matcher.match(useIndex || path);
     }
 
     abstract navigate(path: string, options?: NavigateOptions): void;

package/src/router/index.ts

@@ -5,6 +5,7 @@ export * from './NestedNavigationContext.js';
 export * from './NestedRouterProvider.js';
 export * from './PathMatcher.js';
 export * as Path from './path.js';
+export * from './Redirect.js';
 export * from './RouteComponent.js';
 export * from './Router.js';
 export * from './RouterProvider.js';

package/src/session/DevSessionProvider.tsx

@@ -0,0 +1,46 @@
+import type { AuthTokenPayload } from '@vertesia/common';
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
+import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY } from './constants';
+import { UserSession, UserSessionContext } from './UserSession';
+
+function decodeJwtPayload(token: string): AuthTokenPayload {
+    const [, payload] = token.split('.');
+    if (!payload) {
+        throw new Error('Invalid Vertesia auth token');
+    }
+    const padded = payload
+        .replace(/-/g, '+')
+        .replace(/_/g, '/')
+        .padEnd(Math.ceil(payload.length / 4) * 4, '=');
+    return JSON.parse(atob(padded)) as AuthTokenPayload;
+}
+
+interface DevSessionProviderProps {
+    children: ReactNode;
+    token: string;
+}
+
+export function DevSessionProvider({ children, token }: DevSessionProviderProps) {
+    const session = useMemo(() => {
+        const next = new UserSession();
+        next.isLoading = false;
+
+        try {
+            next.authToken = decodeJwtPayload(token);
+            next.client.withAuthCallback(() => Promise.resolve(`Bearer ${token}`));
+
+            localStorage.setItem(LastSelectedAccountId_KEY, next.authToken.account.id);
+            localStorage.setItem(
+                `${LastSelectedProjectId_KEY}-${next.authToken.account.id}`,
+                next.authToken.project?.id ?? '',
+            );
+        } catch (error: unknown) {
+            next.authError = error instanceof Error ? error : new Error(String(error));
+        }
+
+        return next.clone();
+    }, [token]);
+
+    return <UserSessionContext.Provider value={session}>{children}</UserSessionContext.Provider>;
+}

package/src/session/UserSessionProvider.tsx

@@ -1,7 +1,7 @@
 import { Env } from '@vertesia/ui/env';
 import { onAuthStateChanged } from 'firebase/auth';
 import { type ReactNode, useEffect, useRef, useState } from 'react';
-import { getComposableToken, STSError, UserNotFoundError } from './auth/composable';
+import { getComposableToken, RestrictedEnvironmentError, STSError, UserNotFoundError } from './auth/composable';
 import { shouldRedirectToCentralAuth } from './auth/domainRouting';
 import { getFirebaseAuth } from './auth/firebase';
 import { useAuthState } from './auth/useAuthState';
@@ -91,6 +91,17 @@ export function UserSessionProvider({ children, loadOnboardingStatus = true }: U
                         return;
                     }
 
+                    // Restricted environment (preview/preprod without early-access): surface the
+                    // error so the sign-in screen shows the dedicated step. Redirecting to central
+                    // auth here would loop, since the identity is valid but the environment is gated.
+                    if (err instanceof RestrictedEnvironmentError) {
+                        console.warn('Restricted environment - user lacks early-access', err);
+                        session.isLoading = false;
+                        session.authError = err;
+                        setSession(session.clone());
+                        return;
+                    }
+
                     if (err instanceof STSError) {
                         console.error('STS error during token exchange', err);
                         Env.logger.error('STS error during token exchange', {
@@ -184,7 +195,12 @@ export function UserSessionProvider({ children, loadOnboardingStatus = true }: U
                                 error: err,
                             },
                         });
-                        if (!(err instanceof UserNotFoundError)) session.logout();
+                        // Keep the Firebase session for UserNotFoundError (signup flow) and
+                        // RestrictedEnvironmentError (identity is valid; the environment is gated).
+                        // Logging out would retrigger onAuthStateChanged and clear the authError.
+                        if (!(err instanceof UserNotFoundError) && !(err instanceof RestrictedEnvironmentError)) {
+                            session.logout();
+                        }
                         session.isLoading = false;
                         session.authError = err;
                         setSession(session.clone());

package/src/session/auth/composable.ts

@@ -1,7 +1,7 @@
 /**
  * Handle client caching and refresh of auth token
  */
-import type { AuthTokenPayload } from '@vertesia/common';
+import { type AuthTokenPayload, RESTRICTED_ENVIRONMENT_ERROR_CODE } from '@vertesia/common';
 import { Env } from '@vertesia/ui/env';
 import { jwtDecode } from 'jwt-decode';
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY } from '../constants';
@@ -174,6 +174,26 @@ export async function fetchComposableToken(
         }
 
         if (stsRes.status === 403) {
+            // Distinguish the "restricted environment" rejection (preview/preprod gated to
+            // early-access users) from the account-access 403 handled below. The STS tags it
+            // with a machine-readable business error code. Peek a clone so the body stays
+            // readable for the fall-through path.
+            const body = await stsRes
+                .clone()
+                .json()
+                .catch(() => undefined);
+            if (body?.errorCode === RESTRICTED_ENVIRONMENT_ERROR_CODE) {
+                Env.logger.warn('403: User lacks early-access for this restricted environment', {
+                    vertesia: {
+                        account_id: accountId,
+                        project_id: projectId,
+                    },
+                });
+                throw new RestrictedEnvironmentError(
+                    body.message ?? "You don't have sufficient permission to visit unstable environments",
+                );
+            }
+
             // User doesn't have access to the requested account/project, or has no accounts
             // This can happen with:
             // 1. Stale localStorage from previous user
@@ -233,8 +253,13 @@ export async function fetchComposableToken(
         Env.logger.info('Successfully got token from STS');
         return token;
     } catch (error) {
-        if (error instanceof UserNotFoundError || error instanceof STSError) {
-            throw error; // Re-throw UserNotFoundError and STSError to be handled separately in the caller
+        if (
+            error instanceof UserNotFoundError ||
+            error instanceof STSError ||
+            error instanceof RestrictedEnvironmentError
+        ) {
+            // Re-throw typed auth errors to be handled separately in the caller
+            throw error;
         }
 
         // Clear any stale account/project from localStorage on error
@@ -356,3 +381,16 @@ export class STSError extends Error {
         this.stsURL = stsURL;
     }
 }
+
+/**
+ * Thrown when the STS rejects sign-in because the current environment (preview/preprod) is
+ * restricted to early-access users and this user lacks the `early-access` annotation. The
+ * sign-in screen renders a dedicated "restricted environment" step for this error.
+ * See docs/restrict-access-to-non-production-envs.md.
+ */
+export class RestrictedEnvironmentError extends Error {
+    constructor(message: string) {
+        super(message);
+        this.name = 'RestrictedEnvironmentError';
+    }
+}

package/src/session/index.ts

@@ -2,6 +2,7 @@ export * from './auth/composable';
 export * from './auth/firebase';
 export * from './auth/useAuthState';
 export * from './auth/useCurrentTenant';
+export * from './DevSessionProvider';
 export * from './UserSession';
 export * from './UserSessionProvider';
 export * from './useUXTracking';

package/src/shell/VertesiaShell.tsx

@@ -1,7 +1,7 @@
 import { ThemeProvider, ToastProvider } from '@vertesia/ui/core';
 import { TypeRegistryProvider, UserPermissionProvider } from '@vertesia/ui/features';
 import { LanguageBoundI18nProvider, LanguageProvider, type SupportedLanguage } from '@vertesia/ui/i18n';
-import { UserSessionProvider } from '@vertesia/ui/session';
+import { DevSessionProvider, UserSessionProvider } from '@vertesia/ui/session';
 import type { ReactNode } from 'react';
 import { SigninScreen } from './login/SigninScreen';
 import { SplashScreen } from './SplashScreen';
@@ -14,6 +14,8 @@ interface VertesiaShellProps {
     loadOnboardingStatus?: boolean;
     preserveSignInPath?: boolean;
     suppressSignInErrorPrefixes?: string | string[];
+    /** Use an already-issued Vertesia token instead of starting the normal sign-in flow. */
+    authToken?: string;
     /** Force a default language. If omitted, falls back to localStorage then navigator.language then 'en'. */
     defaultLanguage?: SupportedLanguage;
 }
@@ -25,15 +27,16 @@ export function VertesiaShell({
     loadOnboardingStatus,
     preserveSignInPath,
     suppressSignInErrorPrefixes,
+    authToken,
     defaultLanguage,
 }: VertesiaShellProps) {
-    return (
-        <ToastProvider>
-            <UserSessionProvider loadOnboardingStatus={loadOnboardingStatus}>
-                <TypeRegistryProvider>
-                    <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
-                        <LanguageProvider defaultLanguage={defaultLanguage}>
-                            <LanguageBoundI18nProvider>
+    const content = (
+        <TypeRegistryProvider>
+            <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+                <LanguageProvider defaultLanguage={defaultLanguage}>
+                    <LanguageBoundI18nProvider>
+                        {!authToken && (
+                            <>
                                 <SplashScreen icon={loadingIcon} />
                                 <SigninScreen
                                     allowedPrefix="/shared/"
@@ -42,12 +45,22 @@ export function VertesiaShell({
                                     preservePath={preserveSignInPath}
                                     suppressAuthErrorPrefix={suppressSignInErrorPrefixes}
                                 />
-                                <UserPermissionProvider>{children}</UserPermissionProvider>
-                            </LanguageBoundI18nProvider>
-                        </LanguageProvider>
-                    </ThemeProvider>
-                </TypeRegistryProvider>
-            </UserSessionProvider>
+                            </>
+                        )}
+                        <UserPermissionProvider>{children}</UserPermissionProvider>
+                    </LanguageBoundI18nProvider>
+                </LanguageProvider>
+            </ThemeProvider>
+        </TypeRegistryProvider>
+    );
+
+    return (
+        <ToastProvider>
+            {authToken ? (
+                <DevSessionProvider token={authToken}>{content}</DevSessionProvider>
+            ) : (
+                <UserSessionProvider loadOnboardingStatus={loadOnboardingStatus}>{content}</UserSessionProvider>
+            )}
         </ToastProvider>
     );
 }

package/src/shell/login/SignInRestrictedEnvStep.tsx

@@ -0,0 +1,87 @@
+import { Env } from '@vertesia/ui/env';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { ShieldOff } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { getProductionAppUrl } from './productionUrl';
+import { SignInCallout, SignInStepButton, SignInStepHeader, SignInStepLayout } from './SignInPrimitives';
+import { resetSignInState } from './signInUtils';
+
+interface SignInRestrictedEnvStepProps {
+    /** Return to the email-entry step to sign in with a different account. */
+    onUseDifferentEmail: () => void;
+}
+
+/** Seconds of inactivity on this screen before the user is redirected to production automatically. */
+const AUTO_REDIRECT_SECONDS = 15;
+
+/**
+ * Shown when the STS rejects sign-in because the current environment (preview/preprod) is
+ * restricted to early-access users. Offers a redirect to the production web application — in the
+ * user's own region — and a way to sign in with a different account. If the user takes no action, it
+ * redirects automatically after {@link AUTO_REDIRECT_SECONDS}. See
+ * docs/restrict-access-to-non-production-envs.md.
+ */
+export default function SignInRestrictedEnvStep({ onUseDifferentEmail }: SignInRestrictedEnvStepProps) {
+    const { t } = useUITranslation();
+    // Region-aware: send the user to their own region's production site, never another region's (an
+    // EU user must not be redirected to the US site). Falls back to the canonical site when unknown.
+    const productionUrl = getProductionAppUrl(Env.region);
+    const [secondsLeft, setSecondsLeft] = useState(AUTO_REDIRECT_SECONDS);
+
+    // Clear the rejected session (Firebase sign-out + cached login) once the screen is shown, so a
+    // page reload restarts the normal sign-in flow instead of re-triggering the STS 403 and landing
+    // straight back here. `mode` in SigninScreen is sticky, so clearing the session does not hide
+    // this screen in the current session.
+    useEffect(() => {
+        void resetSignInState();
+    }, []);
+
+    // Auto-redirect to production after AUTO_REDIRECT_SECONDS of inactivity. Taking an action —
+    // "Use a different email" unmounts this step, "Go to the main site" redirects immediately — runs
+    // the cleanup below and cancels the timer, so the automatic redirect only fires on inactivity.
+    useEffect(() => {
+        const redirect = setTimeout(() => {
+            window.location.href = productionUrl;
+        }, AUTO_REDIRECT_SECONDS * 1000);
+        const countdown = setInterval(() => {
+            setSecondsLeft((s) => (s > 0 ? s - 1 : 0));
+        }, 1000);
+        return () => {
+            clearTimeout(redirect);
+            clearInterval(countdown);
+        };
+    }, [productionUrl]);
+
+    return (
+        <SignInStepLayout>
+            <SignInStepHeader
+                variant="destructive"
+                eyebrow={t('auth.restricted.eyebrow')}
+                title={t('auth.restricted.title')}
+                body={t('auth.restricted.body')}
+            />
+
+            <div className="flex flex-col gap-2">
+                <SignInCallout
+                    icon={ShieldOff}
+                    title={t('auth.restricted.calloutTitle')}
+                    meta={t('auth.restricted.calloutMeta')}
+                />
+                <SignInStepButton
+                    className="w-full"
+                    onClick={() => {
+                        window.location.href = productionUrl;
+                    }}
+                >
+                    {t('auth.restricted.redirect')}
+                </SignInStepButton>
+                <SignInStepButton variant="ghost" onClick={onUseDifferentEmail}>
+                    {t('auth.restricted.useDifferent')}
+                </SignInStepButton>
+                <p className="text-center text-xs text-muted">
+                    {t('auth.restricted.autoRedirect', { seconds: secondsLeft })}
+                </p>
+            </div>
+        </SignInStepLayout>
+    );
+}