@dloizides/auth-web 1.5.1 → 1.7.0

package/dist/index.d.ts

@@ -1,8 +1,134 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactNode, ReactElement } from 'react';
 import { BffAuthClient, BffUser, HttpClient, BffLoginRequest, BffForgotPasswordRequest, BffResetPasswordRequest, BffOtpRequestResult } from '@dloizides/auth-client';
 export { BffAuthClient, BffAuthClientOptions, BffForgotPasswordRequest, BffLoginRequest, BffOtpRequestRequest, BffOtpRequestResult, BffOtpVerifyRequest, BffPinLoginRequest, BffRegisterRequest, BffResetPasswordRequest, BffUser, HttpClient, HttpRequest, HttpResponse, createFetchHttpClient } from '@dloizides/auth-client';
 import { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
 
+/**
+ * `AuthTheme` — the design-token contract every `@dloizides/auth-web` component
+ * is styled against.
+ *
+ * The package owns **no** brand. Katalogos, Erevna and Kefi each look different;
+ * each one maps its own theme system onto this flat token bag and passes it in
+ * (via the `theme` prop or `<AuthThemeProvider>`). The component code only ever
+ * reads these tokens — never an app-specific theme object — so the same
+ * `<LoginForm>` renders on-brand in three visually distinct apps.
+ *
+ * Keep this shape minimal and stable: it is a public API surface.
+ */
+/** Colour tokens — the only colours the auth components reference. */
+interface AuthThemeColors {
+    /** Page / screen background behind the form card. */
+    background: string;
+    /** The form card surface colour. */
+    surface: string;
+    /** Primary text (titles, labels, input text). */
+    text: string;
+    /** Muted / secondary text (subtitles, helper copy). */
+    textSecondary: string;
+    /** Input + card border colour; also the disabled-button fill. */
+    border: string;
+    /** Brand primary — the submit button fill and link colour. */
+    primary: string;
+    /** Text drawn on top of `primary` (e.g. the submit button label). */
+    onPrimary: string;
+    /** Error text and error-state borders. */
+    danger: string;
+    /** Success text (e.g. the forgot-password confirmation). */
+    success: string;
+}
+/** Corner-radius tokens. */
+interface AuthThemeRadii {
+    /** Inputs and buttons. */
+    input: number;
+    /** The form card. */
+    card: number;
+}
+/** Spacing scale (in density-independent pixels). */
+interface AuthThemeSpacing {
+    /** Tight gap — e.g. label-to-input. */
+    xs: number;
+    /** Small gap. */
+    sm: number;
+    /** Default gap — between stacked fields. */
+    md: number;
+    /** Large gap — section separation. */
+    lg: number;
+    /** Card inner padding. */
+    xl: number;
+}
+/** Font-size tokens. */
+interface AuthThemeTypography {
+    /** Form title. */
+    title: number;
+    /** Form subtitle. */
+    subtitle: number;
+    /** Field labels. */
+    label: number;
+    /** Input text and button text. */
+    body: number;
+    /** Helper / error / footer copy. */
+    caption: number;
+}
+/** The full token bag a consuming app supplies. */
+interface AuthTheme {
+    colors: AuthThemeColors;
+    radii: AuthThemeRadii;
+    spacing: AuthThemeSpacing;
+    typography: AuthThemeTypography;
+}
+/**
+ * A neutral, accessible light-mode theme. Apps are expected to override this —
+ * it exists so a component renders sensibly with zero configuration and so
+ * `<AuthThemeProvider>` has a default value.
+ */
+declare const defaultAuthTheme: AuthTheme;
+
+/**
+ * `<AuthScreen>` — the screen-level auth composition, extracted from Kefi's
+ * login card (the design reference) so every app gets ONE tidy card instead of
+ * hand-rolling its own wrapper.
+ *
+ * The package's forms (`<LoginForm>`, `<OtpForm>`, `<PinForm>`) each render their
+ * own `screen` + `card` chrome by default (drop-one-in-on-a-blank-route mode).
+ * When an app needs to compose several controls (method tabs + a form + a passkey
+ * button + a hint) onto ONE surface, it renders them as `chromeless` children of
+ * an `<AuthScreen>`: the AuthScreen owns the single card, the forms contribute
+ * fields only. This makes the P1-04 "loose wrapper" bug impossible by
+ * construction — the app can no longer assemble a card with the wrong (or no)
+ * surface, border, padding or width.
+ *
+ * Slots mirror Kefi's login composition exactly: an optional `title`/`subtitle`
+ * at the top of the card, the `children` (the auth controls), and an optional
+ * `footer` rendered OUTSIDE the card (Kefi's sign-up footer sits below it).
+ */
+
+/**
+ * Default auth-card max width, in dp. Matches the package's standalone form card
+ * so a single `<LoginForm>` and an `<AuthScreen>`-composed login read the same
+ * width unless the app overrides it.
+ */
+declare const DEFAULT_AUTH_CARD_MAX_WIDTH = 420;
+interface AuthScreenProps {
+    /** The auth controls placed on the shared card (forms should be `chromeless`). */
+    children: ReactNode;
+    /** Explicit theme; overrides any `<AuthThemeProvider>`. Falls back to the default theme. */
+    theme?: AuthTheme;
+    /** testID on the outer full-screen centering container. */
+    testID?: string;
+    /** testID on the inner card surface. */
+    cardTestID?: string;
+    /** Max card width in dp. Defaults to {@link DEFAULT_AUTH_CARD_MAX_WIDTH}. */
+    maxWidth?: number;
+    /** Optional heading rendered at the top of the card. */
+    title?: string;
+    /** Optional sub-heading rendered under the title. */
+    subtitle?: string;
+    /** Optional content rendered below/outside the card (e.g. a sign-up footer). */
+    footer?: ReactNode;
+}
+/** The screen-level auth composition: one centered card the controls share. */
+declare function AuthScreen({ children, theme: themeProp, testID, cardTestID, maxWidth, title, subtitle, footer, }: Readonly<AuthScreenProps>): ReactElement;
+
 /**
  * Label bags for the auth components.
  *
@@ -293,86 +419,6 @@ declare const DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS: PreferredMethodSettingsL
 declare const DEFAULT_PREFERRED_METHOD_HINT_LABELS: PreferredMethodHintLabels;
 declare const DEFAULT_RESET_PASSWORD_LABELS: ResetPasswordFormLabels;
 
-/**
- * `AuthTheme` — the design-token contract every `@dloizides/auth-web` component
- * is styled against.
- *
- * The package owns **no** brand. Katalogos, Erevna and Kefi each look different;
- * each one maps its own theme system onto this flat token bag and passes it in
- * (via the `theme` prop or `<AuthThemeProvider>`). The component code only ever
- * reads these tokens — never an app-specific theme object — so the same
- * `<LoginForm>` renders on-brand in three visually distinct apps.
- *
- * Keep this shape minimal and stable: it is a public API surface.
- */
-/** Colour tokens — the only colours the auth components reference. */
-interface AuthThemeColors {
-    /** Page / screen background behind the form card. */
-    background: string;
-    /** The form card surface colour. */
-    surface: string;
-    /** Primary text (titles, labels, input text). */
-    text: string;
-    /** Muted / secondary text (subtitles, helper copy). */
-    textSecondary: string;
-    /** Input + card border colour; also the disabled-button fill. */
-    border: string;
-    /** Brand primary — the submit button fill and link colour. */
-    primary: string;
-    /** Text drawn on top of `primary` (e.g. the submit button label). */
-    onPrimary: string;
-    /** Error text and error-state borders. */
-    danger: string;
-    /** Success text (e.g. the forgot-password confirmation). */
-    success: string;
-}
-/** Corner-radius tokens. */
-interface AuthThemeRadii {
-    /** Inputs and buttons. */
-    input: number;
-    /** The form card. */
-    card: number;
-}
-/** Spacing scale (in density-independent pixels). */
-interface AuthThemeSpacing {
-    /** Tight gap — e.g. label-to-input. */
-    xs: number;
-    /** Small gap. */
-    sm: number;
-    /** Default gap — between stacked fields. */
-    md: number;
-    /** Large gap — section separation. */
-    lg: number;
-    /** Card inner padding. */
-    xl: number;
-}
-/** Font-size tokens. */
-interface AuthThemeTypography {
-    /** Form title. */
-    title: number;
-    /** Form subtitle. */
-    subtitle: number;
-    /** Field labels. */
-    label: number;
-    /** Input text and button text. */
-    body: number;
-    /** Helper / error / footer copy. */
-    caption: number;
-}
-/** The full token bag a consuming app supplies. */
-interface AuthTheme {
-    colors: AuthThemeColors;
-    radii: AuthThemeRadii;
-    spacing: AuthThemeSpacing;
-    typography: AuthThemeTypography;
-}
-/**
- * A neutral, accessible light-mode theme. Apps are expected to override this —
- * it exists so a component renders sensibly with zero configuration and so
- * `<AuthThemeProvider>` has a default value.
- */
-declare const defaultAuthTheme: AuthTheme;
-
 /**
  * `<LoginForm>` — the ready-made, themeable password-login form.
  *
@@ -407,9 +453,16 @@ interface LoginFormProps {
     onSignUp?: () => void;
     /** Prefix applied to every `testID` so multiple forms can share a screen. */
     testIdPrefix?: string;
+    /**
+     * When `true`, render the form fields WITHOUT the built-in `screen` + `card`
+     * chrome, so the form can be composed as a child of `<AuthScreen>` (which owns
+     * the single shared card). Defaults to `false` — standalone drop-in behaviour
+     * is byte-identical to before.
+     */
+    chromeless?: boolean;
 }
 /** Themeable password-login form built on `useBffAuth`. */
-declare function LoginForm({ client, theme: themeProp, labels: labelsProp, onSuccess, onForgotPassword, onSignUp, testIdPrefix, }: Readonly<LoginFormProps>): ReactElement;
+declare function LoginForm({ client, theme: themeProp, labels: labelsProp, onSuccess, onForgotPassword, onSignUp, testIdPrefix, chromeless, }: Readonly<LoginFormProps>): ReactElement;
 
 /**
  * `<ForgotPasswordForm>` — the ready-made, themeable "request a reset link"
@@ -555,9 +608,15 @@ interface OtpFormProps {
     onSuccess: (user: BffUser) => void;
     /** Prefix applied to every `testID` so multiple forms can share a screen. */
     testIdPrefix?: string;
+    /**
+     * When `true`, render WITHOUT the built-in `screen` + `card` chrome so the
+     * form can be composed as a child of `<AuthScreen>`. Defaults to `false` —
+     * standalone drop-in behaviour is byte-identical to before.
+     */
+    chromeless?: boolean;
 }
 /** Themeable two-step email-OTP login form built on `useOtpLogin`. */
-declare function OtpForm({ client, theme: themeProp, labels: labelsProp, onSuccess, testIdPrefix, }: Readonly<OtpFormProps>): ReactElement;
+declare function OtpForm({ client, theme: themeProp, labels: labelsProp, onSuccess, testIdPrefix, chromeless, }: Readonly<OtpFormProps>): ReactElement;
 
 /**
  * `<PinForm>` — the ready-made, themeable single-step event-PIN login form.
@@ -593,9 +652,15 @@ interface PinFormProps {
     onSuccess: (user: BffUser) => void;
     /** Prefix applied to every `testID` so multiple forms can share a screen. */
     testIdPrefix?: string;
+    /**
+     * When `true`, render WITHOUT the built-in `screen` + `card` chrome so the
+     * form can be composed as a child of `<AuthScreen>`. Defaults to `false` —
+     * standalone drop-in behaviour is byte-identical to before.
+     */
+    chromeless?: boolean;
 }
 /** Themeable single-step event-PIN login form built on `usePinLogin`. */
-declare function PinForm({ client, eventExternalId, theme: themeProp, labels: labelsProp, onSuccess, testIdPrefix, }: Readonly<PinFormProps>): ReactElement;
+declare function PinForm({ client, eventExternalId, theme: themeProp, labels: labelsProp, onSuccess, testIdPrefix, chromeless, }: Readonly<PinFormProps>): ReactElement;
 
 /**
  * A masked numeric PIN input for the device-PIN unlock + enrol surfaces.
@@ -1750,6 +1815,14 @@ interface RoleRoute {
     role: string;
     /** The route/path to send a user holding that role to. */
     route: string;
+    /**
+     * Optional translation key for a human label of this route — consumed by the
+     * multi-role dashboard nav (`resolveAccessibleRoutes`) so an app can render a
+     * localized link per accessible dashboard. Ignored by `resolvePostLoginRoute`
+     * (landing only cares about the path). The package stays i18n-agnostic: it
+     * carries the key, the app resolves it.
+     */
+    labelKey?: string;
 }
 /** An app-supplied, ordered role-routing table. */
 interface RoleRouteTable {
@@ -1779,6 +1852,15 @@ declare function collectUserRoles(user: BffUser): string[];
  */
 declare function resolvePostLoginRoute(user: BffUser, table: RoleRouteTable): string | null;
 
+/**
+ * Resolve every route in `table` whose role the user holds, in table
+ * (priority) order.
+ *
+ * @returns the matching `RoleRoute` entries (each carrying its optional
+ *   `labelKey`), or an empty array when the user holds none of the roles.
+ */
+declare function resolveAccessibleRoutes(user: BffUser, table: RoleRouteTable): RoleRoute[];
+
 /**
  * The discrete ways a password can fail the shared client-side policy.
  *
@@ -1824,4 +1906,4 @@ declare function validatePasswordPolicy(password: string): PasswordPolicyError[]
 /** `true` when the password satisfies every policy rule. */
 declare function isPasswordValid(password: string): boolean;
 
-export { AuthTestIds, type AuthTheme, type AuthThemeColors, AuthThemeProvider, type AuthThemeProviderProps, type AuthThemeRadii, type AuthThemeSpacing, type AuthThemeTypography, BffAuthStatus, type BffDeviceState, type BffLoginConfig, type CreateBffAuthClientOptions, DEFAULT_DEVICE_PIN_ENROLL_LABELS, DEFAULT_DEVICE_PIN_SETTINGS_LABELS, DEFAULT_DEVICE_PIN_UNLOCK_LABELS, DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS, DEFAULT_FORGOT_PASSWORD_LABELS, DEFAULT_LOGIN_LABELS, DEFAULT_OTP_LABELS, DEFAULT_PASSKEY_LOGIN_LABELS, DEFAULT_PASSKEY_SETTINGS_LABELS, DEFAULT_PIN_LABELS, DEFAULT_PREFERRED_METHOD_HINT_LABELS, DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS, DEFAULT_RESET_PASSWORD_LABELS, DEVICE_PIN_ALLOWED_DIGITS, DEVICE_PIN_DEFAULT_DIGITS, type DevicePinCapableClient, type DevicePinDisableCapableClient, type DevicePinEnrollCapableClient, DevicePinEnrollErrorKey, DevicePinEnrollForm, type DevicePinEnrollFormProps, type DevicePinEnrollLabels, type DevicePinEnrollResult, DevicePinErrorKey, DevicePinInput, type DevicePinInputProps, DevicePinLengthPicker, type DevicePinLengthPickerProps, DevicePinOffer, type DevicePinOfferProps, DevicePinSettingsCard, type DevicePinSettingsCardProps, type DevicePinSettingsLabels, type DevicePinUnlockCapableClient, type DevicePinUnlockLabels, type DevicePinUnlockResult, DevicePinUnlockScreen, type DevicePinUnlockScreenProps, type DevicePinUnlockedUser, ForgotPasswordFields, type ForgotPasswordFieldsLabels, type ForgotPasswordFieldsProps, ForgotPasswordForm, type ForgotPasswordFormLabels, type ForgotPasswordFormProps, type LoginConfigCapableClient, LoginForm, type LoginFormLabels, type LoginFormProps, OtpForm, type OtpFormLabels, type OtpFormProps, OtpLoginStep, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH, type PasskeyErrorCode, PasskeyLoginButton, type PasskeyLoginButtonProps, type PasskeyLoginLabels, PasskeySettingsCard, type PasskeySettingsCardProps, type PasskeySettingsLabels, PasswordPolicyError, PinForm, type PinFormLabels, type PinFormProps, type PreferencesClientOptions, type PreferredMethodClient, PreferredMethodHint, type PreferredMethodHintLabels, type PreferredMethodHintProps, PreferredMethodSettingsCard, type PreferredMethodSettingsCardProps, type PreferredMethodSettingsLabels, ResetPasswordError, ResetPasswordForm, type ResetPasswordFormLabels, type ResetPasswordFormProps, type RoleRoute, type RoleRouteTable, type UseBffAuthOptions, type UseBffAuthResult, type UseBffForgotPasswordOptions, type UseBffLoginConfigResult, type UseBffResetPasswordOptions, type UseDevicePinDisableArgs, type UseDevicePinDisableResult, type UseDevicePinEnrollArgs, type UseDevicePinEnrollResult, type UseDevicePinUnlockArgs, type UseDevicePinUnlockResult, type UseForgotPasswordSubmitArgs, type UseForgotPasswordSubmitResult, type UseOtpLoginOptions, type UseOtpLoginResult, type UsePinLoginOptions, type UsePinLoginResult, type UsePreferredMethodSettingArgs, type UsePreferredMethodSettingResult, type UseResetPasswordFormArgs, type UseResetPasswordFormResult, cachePreferredMethod, clearCachedPreferredMethod, collectUserRoles, createBffAuthClient, createPreferencesClient, defaultAuthTheme, isAllowedPinDigits, isPasswordValid, isValidForgotPasswordEmail, readCachedPreferredMethod, readPasskeyError, readPasskeyRegistered, resolvePostLoginRoute, startPasskeyLogin, startPasskeyRegistration, syncPreferredMethodFromServer, useAuthTheme, useBffAuth, useBffForgotPassword, useBffLoginConfig, useBffResetPassword, useDevicePinDisable, useDevicePinEnroll, useDevicePinUnlock, useForgotPasswordSubmit, useOtpLogin, usePinLogin, usePreferredMethodSetting, useResetPasswordForm, validatePasswordPolicy, withTestIdPrefix };
+export { AuthScreen, type AuthScreenProps, AuthTestIds, type AuthTheme, type AuthThemeColors, AuthThemeProvider, type AuthThemeProviderProps, type AuthThemeRadii, type AuthThemeSpacing, type AuthThemeTypography, BffAuthStatus, type BffDeviceState, type BffLoginConfig, type CreateBffAuthClientOptions, DEFAULT_AUTH_CARD_MAX_WIDTH, DEFAULT_DEVICE_PIN_ENROLL_LABELS, DEFAULT_DEVICE_PIN_SETTINGS_LABELS, DEFAULT_DEVICE_PIN_UNLOCK_LABELS, DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS, DEFAULT_FORGOT_PASSWORD_LABELS, DEFAULT_LOGIN_LABELS, DEFAULT_OTP_LABELS, DEFAULT_PASSKEY_LOGIN_LABELS, DEFAULT_PASSKEY_SETTINGS_LABELS, DEFAULT_PIN_LABELS, DEFAULT_PREFERRED_METHOD_HINT_LABELS, DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS, DEFAULT_RESET_PASSWORD_LABELS, DEVICE_PIN_ALLOWED_DIGITS, DEVICE_PIN_DEFAULT_DIGITS, type DevicePinCapableClient, type DevicePinDisableCapableClient, type DevicePinEnrollCapableClient, DevicePinEnrollErrorKey, DevicePinEnrollForm, type DevicePinEnrollFormProps, type DevicePinEnrollLabels, type DevicePinEnrollResult, DevicePinErrorKey, DevicePinInput, type DevicePinInputProps, DevicePinLengthPicker, type DevicePinLengthPickerProps, DevicePinOffer, type DevicePinOfferProps, DevicePinSettingsCard, type DevicePinSettingsCardProps, type DevicePinSettingsLabels, type DevicePinUnlockCapableClient, type DevicePinUnlockLabels, type DevicePinUnlockResult, DevicePinUnlockScreen, type DevicePinUnlockScreenProps, type DevicePinUnlockedUser, ForgotPasswordFields, type ForgotPasswordFieldsLabels, type ForgotPasswordFieldsProps, ForgotPasswordForm, type ForgotPasswordFormLabels, type ForgotPasswordFormProps, type LoginConfigCapableClient, LoginForm, type LoginFormLabels, type LoginFormProps, OtpForm, type OtpFormLabels, type OtpFormProps, OtpLoginStep, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH, type PasskeyErrorCode, PasskeyLoginButton, type PasskeyLoginButtonProps, type PasskeyLoginLabels, PasskeySettingsCard, type PasskeySettingsCardProps, type PasskeySettingsLabels, PasswordPolicyError, PinForm, type PinFormLabels, type PinFormProps, type PreferencesClientOptions, type PreferredMethodClient, PreferredMethodHint, type PreferredMethodHintLabels, type PreferredMethodHintProps, PreferredMethodSettingsCard, type PreferredMethodSettingsCardProps, type PreferredMethodSettingsLabels, ResetPasswordError, ResetPasswordForm, type ResetPasswordFormLabels, type ResetPasswordFormProps, type RoleRoute, type RoleRouteTable, type UseBffAuthOptions, type UseBffAuthResult, type UseBffForgotPasswordOptions, type UseBffLoginConfigResult, type UseBffResetPasswordOptions, type UseDevicePinDisableArgs, type UseDevicePinDisableResult, type UseDevicePinEnrollArgs, type UseDevicePinEnrollResult, type UseDevicePinUnlockArgs, type UseDevicePinUnlockResult, type UseForgotPasswordSubmitArgs, type UseForgotPasswordSubmitResult, type UseOtpLoginOptions, type UseOtpLoginResult, type UsePinLoginOptions, type UsePinLoginResult, type UsePreferredMethodSettingArgs, type UsePreferredMethodSettingResult, type UseResetPasswordFormArgs, type UseResetPasswordFormResult, cachePreferredMethod, clearCachedPreferredMethod, collectUserRoles, createBffAuthClient, createPreferencesClient, defaultAuthTheme, isAllowedPinDigits, isPasswordValid, isValidForgotPasswordEmail, readCachedPreferredMethod, readPasskeyError, readPasskeyRegistered, resolveAccessibleRoutes, resolvePostLoginRoute, startPasskeyLogin, startPasskeyRegistration, syncPreferredMethodFromServer, useAuthTheme, useBffAuth, useBffForgotPassword, useBffLoginConfig, useBffResetPassword, useDevicePinDisable, useDevicePinEnroll, useDevicePinUnlock, useForgotPasswordSubmit, useOtpLogin, usePinLogin, usePreferredMethodSetting, useResetPasswordForm, validatePasswordPolicy, withTestIdPrefix };

package/dist/index.js

@@ -1,12 +1,118 @@
 'use strict';
 
-var react = require('react');
 var reactNative = require('react-native');
+var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactQuery = require('@tanstack/react-query');
 var authClient = require('@dloizides/auth-client');
 
-// src/components/LoginForm.tsx
+// src/components/AuthScreen.tsx
+var FULL_WIDTH = "100%";
+var CARD_BORDER_WIDTH = 1;
+function useAuthScreenStyles(theme) {
+  return react.useMemo(() => {
+    const { colors, radii, spacing, typography } = theme;
+    return reactNative.StyleSheet.create({
+      screen: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: spacing.md,
+        backgroundColor: colors.background
+      },
+      card: {
+        width: FULL_WIDTH,
+        borderRadius: radii.card,
+        borderWidth: CARD_BORDER_WIDTH,
+        borderColor: colors.border,
+        padding: spacing.xl,
+        backgroundColor: colors.surface
+      },
+      title: {
+        fontSize: typography.title,
+        fontWeight: "bold",
+        marginBottom: spacing.xs,
+        color: colors.text
+      },
+      subtitle: {
+        fontSize: typography.subtitle,
+        marginBottom: spacing.lg,
+        color: colors.textSecondary
+      },
+      footer: {
+        marginTop: spacing.lg,
+        width: FULL_WIDTH,
+        alignItems: "center"
+      }
+    });
+  }, [theme]);
+}
+
+// src/theme/AuthTheme.ts
+var defaultAuthTheme = {
+  colors: {
+    background: "#f5f5f7",
+    surface: "#ffffff",
+    text: "#1a1a1a",
+    textSecondary: "#6b6b6b",
+    border: "#d0d0d5",
+    primary: "#2563eb",
+    onPrimary: "#ffffff",
+    danger: "#d33333",
+    success: "#1f7a3d"
+  },
+  radii: {
+    input: 8,
+    card: 12
+  },
+  spacing: {
+    xs: 8,
+    sm: 12,
+    md: 20,
+    lg: 32,
+    xl: 24
+  },
+  typography: {
+    title: 28,
+    subtitle: 16,
+    label: 14,
+    body: 16,
+    caption: 12
+  }
+};
+var AuthThemeContext = react.createContext(defaultAuthTheme);
+function AuthThemeProvider({
+  theme,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AuthThemeContext.Provider, { value: theme, children });
+}
+function useAuthTheme(themeProp) {
+  const contextTheme = react.useContext(AuthThemeContext);
+  return react.useMemo(() => themeProp ?? contextTheme, [themeProp, contextTheme]);
+}
+var DEFAULT_AUTH_CARD_MAX_WIDTH = 420;
+function AuthScreen({
+  children,
+  theme: themeProp,
+  testID,
+  cardTestID,
+  maxWidth = DEFAULT_AUTH_CARD_MAX_WIDTH,
+  title,
+  subtitle,
+  footer
+}) {
+  const theme = useAuthTheme(themeProp);
+  const styles3 = useAuthScreenStyles(theme);
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.screen, testID, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles3.card, { maxWidth }], testID: cardTestID, children: [
+      title !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: title }) : null,
+      subtitle !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.subtitle, children: subtitle }) : null,
+      children
+    ] }),
+    footer !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.footer, { maxWidth }], children: footer }) : null
+  ] });
+}
 
 // src/components/labels.ts
 var DEFAULT_LOGIN_LABELS = {
@@ -247,7 +353,7 @@ var AuthTestIds = {
 function withTestIdPrefix(baseId, prefix) {
   return prefix === void 0 || prefix === "" ? baseId : `${prefix}-${baseId}`;
 }
-var FULL_WIDTH = "100%";
+var FULL_WIDTH2 = "100%";
 var CARD_MAX_WIDTH = 420;
 var BUTTON_VERTICAL_PADDING = 14;
 function useAuthStyles(theme) {
@@ -262,7 +368,7 @@ function useAuthStyles(theme) {
         backgroundColor: colors.background
       },
       card: {
-        width: FULL_WIDTH,
+        width: FULL_WIDTH2,
         maxWidth: CARD_MAX_WIDTH,
         borderRadius: radii.card,
         padding: spacing.xl,
@@ -305,11 +411,6 @@ function useAuthStyles(theme) {
       primaryButton: {
         borderRadius: radii.input,
         paddingVertical: BUTTON_VERTICAL_PADDING,
-        paddingHorizontal: spacing.md,
-        // Never shrink below the label width: in a row of actions (e.g. the
-        // forgot-password modal's Cancel + submit), shrinking would clip a long
-        // label like "Send reset link" past the button's rounded edge.
-        flexShrink: 0,
         alignItems: "center",
         justifyContent: "center",
         marginTop: spacing.xs,
@@ -352,8 +453,6 @@ function useAuthStyles(theme) {
         borderWidth: 1,
         borderColor: colors.primary,
         paddingVertical: BUTTON_VERTICAL_PADDING,
-        paddingHorizontal: spacing.md,
-        flexShrink: 0,
         alignItems: "center",
         justifyContent: "center",
         marginTop: spacing.sm,
@@ -476,50 +575,6 @@ function useBffAuth(options) {
     [session.user, session.status, isSubmitting, error, login, logout, refresh]
   );
 }
-
-// src/theme/AuthTheme.ts
-var defaultAuthTheme = {
-  colors: {
-    background: "#f5f5f7",
-    surface: "#ffffff",
-    text: "#1a1a1a",
-    textSecondary: "#6b6b6b",
-    border: "#d0d0d5",
-    primary: "#2563eb",
-    onPrimary: "#ffffff",
-    danger: "#d33333",
-    success: "#1f7a3d"
-  },
-  radii: {
-    input: 8,
-    card: 12
-  },
-  spacing: {
-    xs: 8,
-    sm: 12,
-    md: 20,
-    lg: 32,
-    xl: 24
-  },
-  typography: {
-    title: 28,
-    subtitle: 16,
-    label: 14,
-    body: 16,
-    caption: 12
-  }
-};
-var AuthThemeContext = react.createContext(defaultAuthTheme);
-function AuthThemeProvider({
-  theme,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(AuthThemeContext.Provider, { value: theme, children });
-}
-function useAuthTheme(themeProp) {
-  const contextTheme = react.useContext(AuthThemeContext);
-  return react.useMemo(() => themeProp ?? contextTheme, [themeProp, contextTheme]);
-}
 function LoginForm({
   client,
   theme: themeProp,
@@ -527,7 +582,8 @@ function LoginForm({
   onSuccess,
   onForgotPassword,
   onSignUp,
-  testIdPrefix
+  testIdPrefix,
+  chromeless = false
 }) {
   const theme = useAuthTheme(themeProp);
   const styles3 = useAuthStyles(theme);
@@ -558,7 +614,7 @@ function LoginForm({
     void runLogin();
   }, [runLogin]);
   const submitButtonStyle = isSubmitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.screen, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.card, testID: withTestIdPrefix(AuthTestIds.loginForm, testIdPrefix), children: [
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: labels.title }),
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.subtitle, children: labels.subtitle }),
     /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.fieldGroup, children: [
@@ -647,7 +703,16 @@ function LoginForm({
         children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.linkText, children: labels.signUp })
       }
     ) : null
-  ] }) });
+  ] });
+  const card = /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: chromeless ? void 0 : styles3.card,
+      testID: withTestIdPrefix(AuthTestIds.loginForm, testIdPrefix),
+      children: content
+    }
+  );
+  return chromeless ? card : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.screen, children: card });
 }
 function useBffForgotPassword(options) {
   const { client, ...rest } = options;
@@ -830,9 +895,6 @@ function useModalStyles(theme) {
         flexDirection: "row",
         justifyContent: "flex-end",
         alignItems: "center",
-        // Wrap (rather than clip) when a long submit label + Cancel can't
-        // fit a narrow modal on one line.
-        flexWrap: "wrap",
         marginTop: theme.spacing.md,
         gap: theme.spacing.sm
       },
@@ -840,8 +902,6 @@ function useModalStyles(theme) {
         borderRadius: theme.radii.input,
         paddingVertical: theme.spacing.sm,
         paddingHorizontal: theme.spacing.md,
-        // Match the submit button: never shrink below the label width.
-        flexShrink: 0,
         borderWidth: SECONDARY_BORDER_WIDTH,
         borderColor: theme.colors.border
       },
@@ -1502,7 +1562,8 @@ function OtpForm({
   theme: themeProp,
   labels: labelsProp,
   onSuccess,
-  testIdPrefix
+  testIdPrefix,
+  chromeless = false
 }) {
   const theme = useAuthTheme(themeProp);
   const styles3 = useAuthStyles(theme);
@@ -1523,7 +1584,7 @@ function OtpForm({
     otp.reset();
   }, [otp]);
   const errorText = localError ?? transportErrorFor(otp.step, otp.error, labels);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.screen, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.card, testID: withTestIdPrefix(AuthTestIds.otpForm, testIdPrefix), children: otp.step === "requestCode" /* RequestCode */ ? /* @__PURE__ */ jsxRuntime.jsx(
+  const content = otp.step === "requestCode" /* RequestCode */ ? /* @__PURE__ */ jsxRuntime.jsx(
     OtpRequestStep,
     {
       errorText,
@@ -1548,7 +1609,16 @@ function OtpForm({
       onResend: handleResend,
       onSubmit: handleVerify
     }
-  ) }) });
+  );
+  const card = /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: chromeless ? void 0 : styles3.card,
+      testID: withTestIdPrefix(AuthTestIds.otpForm, testIdPrefix),
+      children: content
+    }
+  );
+  return chromeless ? card : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.screen, children: card });
 }
 function toError3(value) {
   return value instanceof Error ? value : new Error(String(value));
@@ -1627,7 +1697,8 @@ function PinForm({
   theme: themeProp,
   labels: labelsProp,
   onSuccess,
-  testIdPrefix
+  testIdPrefix,
+  chromeless = false
 }) {
   const theme = useAuthTheme(themeProp);
   const styles3 = useAuthStyles(theme);
@@ -1641,7 +1712,7 @@ function PinForm({
   const handleSubmit = useSubmitHandler(pin, labels, setLocalError, onSuccess);
   const errorText = localError ?? transportErrorFor2(pin.error, labels);
   const buttonStyle = pin.isSubmitting ? [styles3.primaryButton, styles3.primaryButtonDisabled] : styles3.primaryButton;
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.screen, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.card, testID: withTestIdPrefix(AuthTestIds.pinForm, testIdPrefix), children: [
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: labels.title }),
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.subtitle, children: labels.description }),
     /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.fieldGroup, children: [
@@ -1686,7 +1757,16 @@ function PinForm({
         children: pin.isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.ActivityIndicator, { color: theme.colors.onPrimary, size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.primaryButtonText, children: labels.submit })
       }
     )
-  ] }) });
+  ] });
+  const card = /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      style: chromeless ? void 0 : styles3.card,
+      testID: withTestIdPrefix(AuthTestIds.pinForm, testIdPrefix),
+      children: content
+    }
+  );
+  return chromeless ? card : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.screen, children: card });
 }
 var DOT_SIZE = 18;
 var DOT_BORDER_WIDTH = 2;
@@ -2920,6 +3000,12 @@ function resolvePostLoginRoute(user, table) {
   return table.fallback ?? null;
 }
 
+// src/router/resolveAccessibleRoutes.ts
+function resolveAccessibleRoutes(user, table) {
+  const userRoles = new Set(collectUserRoles(user));
+  return table.routes.filter((entry) => userRoles.has(entry.role));
+}
+
 Object.defineProperty(exports, "BffAuthClient", {
   enumerable: true,
   get: function () { return authClient.BffAuthClient; }
@@ -2928,9 +3014,11 @@ Object.defineProperty(exports, "createFetchHttpClient", {
   enumerable: true,
   get: function () { return authClient.createFetchHttpClient; }
 });
+exports.AuthScreen = AuthScreen;
 exports.AuthTestIds = AuthTestIds;
 exports.AuthThemeProvider = AuthThemeProvider;
 exports.BffAuthStatus = BffAuthStatus;
+exports.DEFAULT_AUTH_CARD_MAX_WIDTH = DEFAULT_AUTH_CARD_MAX_WIDTH;
 exports.DEFAULT_DEVICE_PIN_ENROLL_LABELS = DEFAULT_DEVICE_PIN_ENROLL_LABELS;
 exports.DEFAULT_DEVICE_PIN_SETTINGS_LABELS = DEFAULT_DEVICE_PIN_SETTINGS_LABELS;
 exports.DEFAULT_DEVICE_PIN_UNLOCK_LABELS = DEFAULT_DEVICE_PIN_UNLOCK_LABELS;
@@ -2981,6 +3069,7 @@ exports.isValidForgotPasswordEmail = isValidForgotPasswordEmail;
 exports.readCachedPreferredMethod = readCachedPreferredMethod;
 exports.readPasskeyError = readPasskeyError;
 exports.readPasskeyRegistered = readPasskeyRegistered;
+exports.resolveAccessibleRoutes = resolveAccessibleRoutes;
 exports.resolvePostLoginRoute = resolvePostLoginRoute;
 exports.startPasskeyLogin = startPasskeyLogin;
 exports.startPasskeyRegistration = startPasskeyRegistration;