@entropy-softworks/ui 2026.8.34 → 2026.8.36

package/src/screens/auth/AuthScreen.tsx

@@ -1,10 +1,15 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { KeyboardAvoidingView, Platform, ScrollView, View } from "react-native";
+import {
+  KeyboardAvoidingView,
+  type LayoutChangeEvent,
+  Platform,
+  ScrollView,
+  useWindowDimensions,
+  View,
+} from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import Animated, {
   Easing,
-  FadeInDown,
-  FadeOutUp,
   LinearTransition,
   runOnJS,
   useAnimatedStyle,
@@ -40,6 +45,19 @@ import { useAppConfig } from "../../context/AppConfigContext";
 import { useNavigation } from "../../context/NavigationContext";
 
 const SCROLL_CONTENT_STYLE = { flexGrow: 1 } as const;
+
+/** Width of the form column when the aside is showing. */
+/**
+ * Width of the form column when the aside is showing.
+ *
+ * With symmetric padding the card centres in this column, so the gap either
+ * side of it is simply `(FORM_PANE_WIDTH - 360) / 2`. 716 puts 178px between
+ * the card and the seam, and the same 178px between the card and the window
+ * edge — the two gaps match by construction rather than by tuning two numbers
+ * against each other.
+ */
+const FORM_PANE_WIDTH = 716;
+
 const DEFAULT_POLICY = { enabled: false, enforce: false, block_threshold: 0 };
 
 type Mode = "signin" | "signup";
@@ -63,10 +81,28 @@ export interface AuthFormTransition {
   exiting?: AnimatedViewProps["exiting"];
 }
 
-const DEFAULT_TRANSITION: Required<AuthFormTransition> = {
+/** `Required` would forbid the `undefined` the defaults deliberately use. */
+type ResolvedTransition = AuthFormTransition;
+
+const DEFAULT_TRANSITION: ResolvedTransition = {
+  // Height is locked to the tallest mode (see the form-box note below), so the
+  // layout transition has nothing left to ease. Kept for the cases where the
+  // box legitimately grows past the lock — a pwned-password warning, a wrapped
+  // error, a larger system font.
   layout: LinearTransition.duration(280),
-  entering: FadeInDown.duration(240),
-  exiting: FadeOutUp.duration(160),
+  // No enter/exit animation. Two earlier attempts were both wrong: the
+  // directional FadeInDown/FadeOutUp slid fields in from above, and a plain
+  // cross-fade still singled out the only fields that actually mount on a mode
+  // switch — Display Name, Confirm Password — so they arrived visibly later
+  // than the fields around them, which are already on screen and simply stay
+  // put. One field fading in while its neighbours do not reads as a glitch, not
+  // as a transition. The card's size is locked, so an instant swap has nothing
+  // to hide anyway.
+  //
+  // Overridable: `transition` on the props still accepts both, for a consumer
+  // that wants them.
+  entering: undefined,
+  exiting: undefined,
 };
 
 // Stage morph timing — fade/scale out, swap the stage at zero opacity (so the
@@ -92,8 +128,23 @@ export interface AuthScreenProps {
   /**
    * Connection / server-settings dialog, folded into this single page (no
    * route). When provided, a gear button is shown top-right that toggles it.
+   *
+   * Mutually exclusive with `onSettingsPress`, which is the better fit where
+   * the settings surface deserves a whole screen rather than a dialog.
    */
   settings?: (props: { visible: boolean; onClose: () => void }) => React.ReactNode;
+  /**
+   * Show the gear, but navigate instead of opening a dialog.
+   *
+   * Takes precedence over `settings`. A connection screen that has to explain
+   * offline against cloud, official against self-hosted, and show a live health
+   * check is too much for a dialog on a phone — it wants a real screen with
+   * room and a back button. Web, by contrast, passes NEITHER: a browser reached
+   * the app by loading a particular server's URL, so offering to point it
+   * somewhere else is answering a question the page's own origin already
+   * settled.
+   */
+  onSettingsPress?: () => void;
   /** Override the animations. Merged over the defaults. */
   transition?: AuthFormTransition;
   /**
@@ -102,8 +153,67 @@ export interface AuthScreenProps {
    * simple-finance's AssetCarousel, …). Omit for none.
    */
   decoration?: React.ReactNode;
+  /**
+   * Full-bleed layer behind everything on the screen — a texture, an ambient
+   * gradient. Rendered absolutely-filled and `pointerEvents="none"`, below the
+   * morph, so a welcome→form stage change does not fade it.
+   *
+   * Pairs with `cardBackdrop`: this is the ground, that is the accent hugging
+   * the form. A backdrop drawn here sits UNDER the card backdrop, so a card
+   * glow still reads over an opaque texture.
+   */
+  backdrop?: React.ReactNode;
+  /**
+   * Persistent footer under the form — copyright, build, which server the
+   * client is pointed at. Always visible, unlike the legal line, which is
+   * welcome-stage only.
+   */
+  footer?: React.ReactNode;
+  /**
+   * Companion pane shown BESIDE the form on a wide viewport, and not rendered
+   * at all on a narrow one.
+   *
+   * This is the difference between a mobile layout stretched across a monitor
+   * and something that looks built for a desktop. A single centred card on a
+   * 1440px screen leaves most of the window empty; giving the brand, the
+   * product story and the ambient motion their own half turns that emptiness
+   * into the composition.
+   *
+   * Rendered inside the same `KeyboardAvoidingView` as the form but outside its
+   * scroll view, so it holds still while the form scrolls.
+   */
+  aside?: React.ReactNode;
+  /**
+   * Viewport width, in px, at which `aside` appears. Defaults to 1024 — below
+   * that a two-pane split squeezes the form narrower than its own 360px card.
+   */
+  asideBreakpoint?: number;
+  /**
+   * Ambient layer immediately behind the auth card — a soft glow, a tint.
+   * Rendered absolutely, `pointerEvents="none"`, and bled a little past the
+   * card's edges so the effect hugs the form rather than washing the screen.
+   *
+   * Deliberately scoped to the card. A full-bleed version of this reads as a
+   * coloured background, which is a much louder decision than an accent behind
+   * the one thing the user is looking at.
+   *
+   * Distinct from `decoration`, which is content INSIDE the welcome view's
+   * flow and moves with it.
+   */
+  cardBackdrop?: React.ReactNode;
+  /** How far the card backdrop bleeds past the card, in px. Defaults to 48. */
+  cardBackdropBleed?: number;
   /** Welcome-view tagline/subtitle. Defaults to AppConfig `tagline`. */
   welcomeCtaLabel?: string;
+  /**
+   * Called the first time the user leaves the welcome stage.
+   *
+   * The consumer persists this — an introduction repeated on every launch is an
+   * obstacle, not an introduction. Kept as a callback rather than handled here
+   * because this screen is shared across apps and has no business knowing where
+   * any of them keep their preferences.
+   */
+  onWelcomeDismissed?: () => void;
   /**
    * Show the Sign Up half of the toggle. Defaults to `true`.
    *
@@ -165,9 +275,17 @@ export function AuthScreen({
   passkeyUnlockTitle = "Unlock your vault",
   passkeyUnlockDescription = "Signed in successfully. This passkey can't unlock the vault on its own — enter your master password to decrypt your data.",
   settings,
+  onSettingsPress,
   transition,
   decoration,
+  footer,
+  aside,
+  asideBreakpoint = 1024,
+  backdrop,
+  cardBackdrop,
+  cardBackdropBleed = 48,
   welcomeCtaLabel = "Get Started",
+  onWelcomeDismissed,
   signUpEnabled = true,
   requireInviteCode = false,
   onSignUp,
@@ -181,12 +299,42 @@ export function AuthScreen({
     unlockWithPassword,
   } = useAuth();
   const router = useNavigation();
-  const { appName, Logo, tagline, routes, termsText, privacyText, logoIsWordmark, logoWidth } =
-    useAppConfig();
+  const {
+    appName,
+    Logo,
+    tagline,
+    taglineLayout,
+    routes,
+    termsText,
+    privacyText,
+    logoIsWordmark,
+    logoWidth,
+  } = useAppConfig();
 
   const { colorScheme } = useColorScheme();
   const isDark = colorScheme === "dark";
-  const t = useMemo(() => ({ ...DEFAULT_TRANSITION, ...transition }), [transition]);
+
+  // Two-pane only when there is a pane to show AND room to show it.
+  const { width: viewportWidth } = useWindowDimensions();
+  const showAside = !!aside && viewportWidth >= asideBreakpoint;
+
+  // A wordmark has no app-name text to sit beside, so the two layouts that
+  // need one degrade to the ruled treatment rather than rendering a pipe, or a
+  // lockup, against nothing.
+  const inlineTagline = taglineLayout === "inline" && !logoIsWordmark;
+  const lockupBrand = taglineLayout === "lockup" && !logoIsWordmark;
+  const ruledTagline = taglineLayout !== undefined && !inlineTagline && !lockupBrand;
+
+  // The lockup sizes the mark to the measured height of the name + tagline
+  // block, so the three line up however the app scales its type. Measured
+  // rather than hard-coded because a fixed px value drifts the moment the type
+  // scale or the system font size moves.
+  const [brandTextHeight, setBrandTextHeight] = useState(0);
+  const onBrandTextLayout = useCallback((e: LayoutChangeEvent) => {
+    const h = Math.round(e.nativeEvent.layout.height);
+    setBrandTextHeight((prev) => (Math.abs(prev - h) > 1 ? h : prev));
+  }, []);
+  const baseTransition = useMemo(() => ({ ...DEFAULT_TRANSITION, ...transition }), [transition]);
 
   const [mode, setMode] = useState<Mode>("signin");
   const [inviteCode, setInviteCode] = useState("");
@@ -291,6 +439,49 @@ export function AuthScreen({
     setPwnedInfo(null);
   }, []);
 
+  // ── Stable form box ───────────────────────────────────────────────────
+  // Sign In and Sign Up mount different field sets (passkey button +
+  // separator + "Forgot password?" against Display Name + strength meter +
+  // Confirm Password), so the card grew ~70 px on every toggle. On a short
+  // viewport the taller Sign Up layout also pushed the page into a scroll,
+  // which moved the logo, the footer and the card's own vertical centre —
+  // the whole screen appeared to resize, not only the fields.
+  //
+  // So lock the body to the TALLEST layout and let the shorter mode leave
+  // its slack at the bottom of the card. `probeSignup` renders the Sign Up
+  // field set for the single frame the form first mounts, purely to measure
+  // it: coming from the welcome stage that frame is already at zero opacity
+  // (the morph is mid-fade), and it is explicitly hidden anyway for apps
+  // that skip the welcome stage. Without that pre-measure the FIRST toggle
+  // of every page load would still be the one that grows the card.
+  //
+  // `minHeight` (not `height`) on purpose: anything that legitimately needs
+  // more room later — a pwned-password warning, a wrapped error, a larger
+  // system font — still expands the card instead of being clipped.
+  const [formMinHeight, setFormMinHeight] = useState(0);
+  const [probed, setProbed] = useState(!signUpEnabled);
+  const probeSignup = !probed;
+  const showSignup = probeSignup || isSignup;
+
+  const onFormLayout = useCallback((e: LayoutChangeEvent) => {
+    const measured = Math.ceil(e.nativeEvent.layout.height);
+    setFormMinHeight((prev) => (measured > prev ? measured : prev));
+    setProbed(true);
+  }, []);
+
+  // No enter/exit animation until the measuring pass is done.
+  //
+  // When `probed` flips, the probe's Sign Up fields unmount — and an exiting
+  // animation on that teardown plays VISIBLY, because the wrapper's opacity is
+  // back to 1 by the time it runs. That was a Display Name field blinking into
+  // view and fading out on first render, for a frame the user was never meant
+  // to see at all.
+  const t = useMemo(
+    () =>
+      probed ? baseTransition : { ...baseTransition, entering: undefined, exiting: undefined },
+    [baseTransition, probed]
+  );
+
   const clearField = (field: keyof typeof errors) => {
     if (errors[field]) {
       setErrors((e) => ({ ...e, [field]: undefined }));
@@ -545,27 +736,67 @@ export function AuthScreen({
     <>
       <SafeAreaView className="flex-1 bg-background dark:bg-black">
         <StatusBar style={isDark ? "light" : "dark"} />
+        {backdrop ? (
+          <View
+            pointerEvents="none"
+            style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
+          >
+            {backdrop}
+          </View>
+        ) : null}
         <KeyboardAvoidingView
           behavior={Platform.OS === "ios" ? "padding" : "height"}
           className="flex-1"
+          // Full-bleed two-pane split. The aside is a real panel with its own
+          // ground colour reaching the window edge, so it cannot be centred
+          // inside a capped container — a floating panel with black either
+          // side would read as a mistake. The form column is fixed and the
+          // aside takes everything else, which on a typical desktop leaves it
+          // roughly two thirds.
+          style={showAside ? { flexDirection: "row" } : undefined}
         >
+          {showAside ? (
+            // Sits outside the ScrollView on purpose: the pane is scenery and
+            // should hold still while the form beside it scrolls.
+            <View style={{ flex: 1 }} pointerEvents="box-none">
+              {aside}
+            </View>
+          ) : null}
           <ScrollView
             className="flex-1"
+            // Wide: a fixed column on the right rather than `flex: 1`, so the
+            // form keeps a comfortable measure instead of growing with the
+            // window and stranding its 360px card in the middle of a wide lane.
+            style={showAside ? { flexGrow: 0, flexBasis: FORM_PANE_WIDTH } : undefined}
             contentContainerStyle={SCROLL_CONTENT_STYLE}
             keyboardShouldPersistTaps="handled"
             showsVerticalScrollIndicator={false}
           >
-            <View className="flex-1 justify-between px-6">
+            <View
+              className="flex-1 justify-between px-6"
+              // Asymmetric on the wide layout: more room against the window
+              // edge than against the panel seam, so the card sits inside its
+              // column rather than pressed to the right of the screen.
+              // Symmetric: see FORM_PANE_WIDTH. Asymmetric padding would shift the card
+              // off centre and break the matching gaps.
+              style={showAside ? { paddingLeft: 64, paddingRight: 64 } : undefined}
+            >
               {/* top bar: settings gear only — back lives inside the cards
                   (thumb-reachable) so users don't stretch to the corner. */}
               <View className="mt-4 h-10 flex-row items-center justify-between">
                 <View />
-                {settings ? (
+                {settings || onSettingsPress ? (
                   <IconButton
                     variant="ghost"
                     size="sm"
                     telemetryId="auth.auth.settings_open"
-                    onPress={() => setSettingsOpen(true)}
+                    onPress={() => {
+                      if (onSettingsPress) {
+                        onSettingsPress();
+                        return;
+                      }
+                      setSettingsOpen(true);
+                    }}
                     accessibilityLabel="Connection settings"
                     accessibilityRole="button"
                   >
@@ -591,20 +822,71 @@ export function AuthScreen({
                   morphStyle,
                 ]}
               >
-                <View className="mb-6 items-center">
+                {/* On the wide layout the lockup is constrained to the same
+                    360px column as the title and the card and left-aligned with
+                    them, so all three share one left edge. Centred, it sat at
+                    its own width and read as indented against the form below
+                    it. Narrow keeps it centred, where there is no column to
+                    align to. */}
+                <View
+                  className={
+                    showAside ? "mb-6 w-full max-w-[360px] items-start" : "mb-6 items-center"
+                  }
+                >
                   {logoIsWordmark ? (
                     // The mark carries the name; height is left to the
                     // component so a wide wordmark keeps its aspect ratio, and
                     // the ink colour comes from the already-resolved theme.
                     <Logo width={logoWidth ?? 160} color={isDark ? "#FFFFFF" : "#000000"} />
+                  ) : lockupBrand ? (
+                    // Lockup: mark, vertical rule, then the name over the
+                    // tagline. The mark and the rule are both sized to the
+                    // MEASURED height of that text block, so all three read as
+                    // one unit at whatever type scale the app (or the system
+                    // font size) ends up at. `brandTextHeight || 64` only
+                    // covers the single frame before the first measurement.
+                    <View className="flex-row items-center" style={{ gap: 14 }}>
+                      <Logo width={brandTextHeight || 64} height={brandTextHeight || 64} bleed />
+                      <View
+                        style={{ width: 1, height: brandTextHeight || 64 }}
+                        className="bg-border dark:bg-neutral-700"
+                      />
+                      <View onLayout={onBrandTextLayout}>
+                        <Heading className="text-4xl">{appName}</Heading>
+                        {tagline ? (
+                          <MutedText className="font-mono text-base">{tagline}</MutedText>
+                        ) : null}
+                      </View>
+                    </View>
                   ) : (
                     <View className="flex-row items-center">
                       <Logo width={72} height={72} style={{ marginRight: -2 }} />
                       <Heading className="text-4xl">{appName}</Heading>
+                      {/* Inline tagline sits on the name's baseline, at body
+                          size — matching the 4xl heading would make the
+                          category label compete with the brand. */}
+                      {tagline && inlineTagline ? (
+                        <MutedText className="ml-2 font-mono text-base">{`| ${tagline}`}</MutedText>
+                      ) : null}
                     </View>
                   )}
-                  {tagline ? (
-                    <MutedText className="mt-1 font-mono text-base">{tagline}</MutedText>
+                  {tagline && !inlineTagline && !lockupBrand ? (
+                    <View className="items-center">
+                      {/* The rule is only drawn for the "ruled" layout. Width
+                          tracks the row rather than being a fixed px value, so
+                          it lines up under the logo + name pairing at whatever
+                          size the app renders them. */}
+                      {ruledTagline ? (
+                        <View className="mt-3 h-px w-full self-stretch bg-border dark:bg-neutral-800" />
+                      ) : null}
+                      <MutedText
+                        className={
+                          ruledTagline ? "mt-3 font-mono text-base" : "mt-1 font-mono text-base"
+                        }
+                      >
+                        {tagline}
+                      </MutedText>
+                    </View>
                   ) : null}
                 </View>
 
@@ -617,7 +899,10 @@ export function AuthScreen({
                       <Button
                         className="w-full"
                         telemetryId="auth.auth.stage"
-                        onPress={() => setStage("auth")}
+                        onPress={() => {
+                          setStage("auth");
+                          onWelcomeDismissed?.();
+                        }}
                         accessibilityLabel={welcomeCtaLabel}
                         accessibilityRole="button"
                         testID="welcome-get-started"
@@ -628,24 +913,191 @@ export function AuthScreen({
                   </View>
                 ) : (
                   <View style={{ width: "100%", alignItems: "center" }}>
-                    <Card className="w-full max-w-[360px]">
-                      {displayStage === "forgot" ? (
-                        <>
-                          <CardHeader>
-                            <CardTitle>Reset password</CardTitle>
-                          </CardHeader>
-                          <CardContent className="gap-4">
-                            {forgotSent ? (
-                              <MutedText className="text-sm leading-5">
-                                If an account exists for that email, we&apos;ve sent a link to reset
-                                your password. Check your inbox.
-                              </MutedText>
-                            ) : (
-                              <>
+                    {/* Positioned wrapper so the ambient layer can sit behind
+                        the card and bleed past its edges. Width tracks the
+                        card's own max so the glow is centred on the form, not
+                        the viewport. */}
+                    {/* No mode heading above the card. The Sign In / Sign Up
+                        toggle at the top of the card already says which mode
+                        this is, and a title restating it directly beneath the
+                        brand lockup made three stacked pieces of naming before
+                        the first field. The forgot-password card keeps its own
+                        header title, which is doing real work. */}
+                    <View style={{ width: "100%", maxWidth: 360, position: "relative" }}>
+                      {cardBackdrop && !showAside ? (
+                        <View
+                          pointerEvents="none"
+                          style={{
+                            position: "absolute",
+                            top: -cardBackdropBleed,
+                            left: -cardBackdropBleed,
+                            right: -cardBackdropBleed,
+                            bottom: -cardBackdropBleed,
+                          }}
+                        >
+                          {cardBackdrop}
+                        </View>
+                      ) : null}
+                      <Card className="w-full max-w-[360px]">
+                        {displayStage === "forgot" ? (
+                          <>
+                            <CardHeader>
+                              <CardTitle>Reset password</CardTitle>
+                            </CardHeader>
+                            <CardContent className="gap-4">
+                              {forgotSent ? (
                                 <MutedText className="text-sm leading-5">
-                                  Enter your email and we&apos;ll send you a link to reset your
-                                  password.
+                                  If an account exists for that email, we&apos;ve sent a link to
+                                  reset your password. Check your inbox.
                                 </MutedText>
+                              ) : (
+                                <>
+                                  <MutedText className="text-sm leading-5">
+                                    Enter your email and we&apos;ll send you a link to reset your
+                                    password.
+                                  </MutedText>
+                                  <ShakeField shake={emailShake} label="Email">
+                                    <EmailInput
+                                      value={email}
+                                      onChangeText={(text) => {
+                                        setEmail(text);
+                                        clearField("email");
+                                      }}
+                                      autoFocus
+                                      placeholder="you@example.com"
+                                      autoComplete="email"
+                                      invalid={!!errors.email}
+                                      returnKeyType="done"
+                                      onSubmitEditing={handleForgot}
+                                      accessibilityLabel="Email address"
+                                    />
+                                  </ShakeField>
+                                  <FormError message={errors.email} />
+                                </>
+                              )}
+                            </CardContent>
+                            <CardFooter className="flex-col items-stretch gap-3 border-t-0 pt-0">
+                              {forgotSent ? (
+                                <Button
+                                  className="w-full"
+                                  telemetryId="auth.auth.go_auth"
+                                  onPress={goAuth}
+                                  accessibilityLabel="Back to sign in"
+                                >
+                                  Back to Sign In
+                                </Button>
+                              ) : (
+                                <>
+                                  <Button
+                                    className="w-full"
+                                    telemetryId="auth.auth.forgot"
+                                    onPress={handleForgot}
+                                    isLoading={isLoading}
+                                    accessibilityLabel="Send reset link"
+                                  >
+                                    Send reset link
+                                  </Button>
+                                  <MutedText
+                                    className="mt-1 text-center font-mono text-sm"
+                                    onPress={withClickTracking("auth.auth.go_auth_2", goAuth)}
+                                    accessibilityRole="button"
+                                    accessibilityLabel="Back to sign in"
+                                  >
+                                    ← Back
+                                  </MutedText>
+                                </>
+                              )}
+                            </CardFooter>
+                          </>
+                        ) : (
+                          <>
+                            {/* `gap-5` under the toggle, not `gap-3`. The
+                              toggle is the mode switch and the title restates
+                              the mode, so they were reading as one crowded
+                              block; a wider gap separates the control from the
+                              heading it drives and takes some of the slack
+                              that otherwise all collects above the footer.
+                              Applies to both modes — the header is shared. */}
+                            <CardHeader className="gap-5 pb-3 pt-5">
+                              {signUpEnabled ? (
+                                <SegmentedToggle<Mode>
+                                  value={mode}
+                                  onChange={switchMode}
+                                  options={[
+                                    { key: "signin", label: "Sign In" },
+                                    { key: "signup", label: "Sign Up" },
+                                  ]}
+                                />
+                              ) : null}
+                              {signedUp ? (
+                                <MutedText className="text-sm leading-5">{signedUp}</MutedText>
+                              ) : null}
+                            </CardHeader>
+
+                            {/* Height is locked to the tallest of the two
+                              modes (see the form-box note above), so the
+                              layout transition only ever eases fields in and
+                              out — the card itself no longer moves. Width is
+                              pinned explicitly so the layout animation has
+                              nothing to interpolate horizontally either. */}
+                            <Animated.View
+                              layout={t.layout}
+                              onLayout={onFormLayout}
+                              pointerEvents={probeSignup ? "none" : "auto"}
+                              style={{
+                                width: "100%",
+                                minHeight: formMinHeight || undefined,
+                                opacity: probeSignup ? 0 : 1,
+                              }}
+                            >
+                              {/* `flex: 1` with the default top alignment, so the
+                                fields keep their natural rhythm and ALL the
+                                locked height's slack collects in one place —
+                                between the last field and the footer.
+                                That pins the submit button, the OR divider and
+                                the social row to the same y in both modes, so
+                                they hold still while toggling instead of
+                                jumping up and down by the height of two
+                                fields.
+                                Note this is not the earlier attempt: spreading
+                                the slack BETWEEN the rows (`space-between`)
+                                looked worse than the gap it removed. Same
+                                total space, collected instead of distributed. */}
+                              <CardContent className="gap-2.5 pb-2" style={{ flex: 1 }}>
+                                {!showSignup && passkeyEnabled ? (
+                                  <Animated.View
+                                    entering={t.entering}
+                                    exiting={t.exiting}
+                                    layout={t.layout}
+                                  >
+                                    <Button
+                                      variant="outline"
+                                      className="w-full"
+                                      telemetryId="auth.auth.passkey_login"
+                                      onPress={handlePasskeyLogin}
+                                      isLoading={passkeyStep === "passkey-loading"}
+                                      accessibilityLabel="Sign in with passkey"
+                                      accessibilityRole="button"
+                                      testID="login-passkey-button"
+                                    >
+                                      <View className="flex-row items-center justify-center">
+                                        <Ionicons
+                                          name="key-outline"
+                                          size={20}
+                                          color={isDark ? "#FFFFFF" : "#000000"}
+                                          className="mr-2"
+                                        />
+                                        <Text className="text-base font-medium">
+                                          Sign in with passkey
+                                        </Text>
+                                      </View>
+                                    </Button>
+                                    <View className="mt-3">
+                                      <SeparatorWithText />
+                                    </View>
+                                  </Animated.View>
+                                ) : null}
+
                                 <ShakeField shake={emailShake} label="Email">
                                   <EmailInput
                                     value={email}
@@ -657,307 +1109,227 @@ export function AuthScreen({
                                     placeholder="you@example.com"
                                     autoComplete="email"
                                     invalid={!!errors.email}
-                                    returnKeyType="done"
-                                    onSubmitEditing={handleForgot}
                                     accessibilityLabel="Email address"
+                                    testID="auth-email-input"
                                   />
                                 </ShakeField>
-                                <FormError message={errors.email} />
-                              </>
-                            )}
-                          </CardContent>
-                          <CardFooter className="flex-col items-stretch gap-3 border-t-0 pt-0">
-                            {forgotSent ? (
-                              <Button
-                                className="w-full"
-                                telemetryId="auth.auth.go_auth"
-                                onPress={goAuth}
-                                accessibilityLabel="Back to sign in"
-                              >
-                                Back to Sign In
-                              </Button>
-                            ) : (
-                              <>
-                                <Button
-                                  className="w-full"
-                                  telemetryId="auth.auth.forgot"
-                                  onPress={handleForgot}
-                                  isLoading={isLoading}
-                                  accessibilityLabel="Send reset link"
-                                >
-                                  Send reset link
-                                </Button>
-                                <MutedText
-                                  className="mt-1 text-center font-mono text-sm"
-                                  onPress={withClickTracking("auth.auth.go_auth_2", goAuth)}
-                                  accessibilityRole="button"
-                                  accessibilityLabel="Back to sign in"
-                                >
-                                  ← Back
-                                </MutedText>
-                              </>
-                            )}
-                          </CardFooter>
-                        </>
-                      ) : (
-                        <>
-                          <CardHeader className="gap-4">
-                            {signUpEnabled ? (
-                              <SegmentedToggle<Mode>
-                                value={mode}
-                                onChange={switchMode}
-                                options={[
-                                  { key: "signin", label: "Sign In" },
-                                  { key: "signup", label: "Sign Up" },
-                                ]}
-                              />
-                            ) : null}
-                            {signedUp ? (
-                              <MutedText className="text-sm leading-5">{signedUp}</MutedText>
-                            ) : null}
-                            <CardTitle>
-                              {isSignup ? "Create your account" : `Sign in to ${appName}`}
-                            </CardTitle>
-                          </CardHeader>
 
-                          {/* Card height eases as fields appear/disappear. */}
-                          <Animated.View layout={t.layout}>
-                            <CardContent className="gap-3 pb-3">
-                              {!isSignup && passkeyEnabled ? (
-                                <Animated.View
-                                  entering={t.entering}
-                                  exiting={t.exiting}
-                                  layout={t.layout}
-                                >
-                                  <Button
-                                    variant="outline"
-                                    className="w-full"
-                                    telemetryId="auth.auth.passkey_login"
-                                    onPress={handlePasskeyLogin}
-                                    isLoading={passkeyStep === "passkey-loading"}
-                                    accessibilityLabel="Sign in with passkey"
-                                    accessibilityRole="button"
-                                    testID="login-passkey-button"
+                                {showSignup ? (
+                                  <Animated.View
+                                    key="displayName"
+                                    entering={t.entering}
+                                    exiting={t.exiting}
+                                    layout={t.layout}
                                   >
-                                    <View className="flex-row items-center justify-center">
-                                      <Ionicons
-                                        name="key-outline"
-                                        size={20}
-                                        color={isDark ? "#FFFFFF" : "#000000"}
-                                        className="mr-2"
+                                    <ShakeField shake={displayNameShake} label="Display Name">
+                                      <Input
+                                        value={displayName}
+                                        onChangeText={(text) => {
+                                          setDisplayName(text);
+                                          clearField("displayName");
+                                        }}
+                                        placeholder="Your display name"
+                                        leftIcon={
+                                          <Ionicons
+                                            name="person-outline"
+                                            size={20}
+                                            color={isDark ? "#A3A3A3" : "#737373"}
+                                          />
+                                        }
+                                        autoCapitalize="words"
+                                        autoCorrect={false}
+                                        maxLength={100}
+                                        invalid={!!errors.displayName}
+                                        accessibilityLabel="Display name"
+                                        testID="auth-displayname-input"
                                       />
-                                      <Text className="text-base font-medium">
-                                        Sign in with passkey
-                                      </Text>
-                                    </View>
-                                  </Button>
-                                  <View className="mt-3">
-                                    <SeparatorWithText />
-                                  </View>
-                                </Animated.View>
-                              ) : null}
-
-                              <ShakeField shake={emailShake} label="Email">
-                                <EmailInput
-                                  value={email}
-                                  onChangeText={(text) => {
-                                    setEmail(text);
-                                    clearField("email");
-                                  }}
-                                  autoFocus
-                                  placeholder="you@example.com"
-                                  autoComplete="email"
-                                  invalid={!!errors.email}
-                                  accessibilityLabel="Email address"
-                                  testID="auth-email-input"
-                                />
-                              </ShakeField>
+                                    </ShakeField>
+                                  </Animated.View>
+                                ) : null}
 
-                              {isSignup ? (
-                                <Animated.View
-                                  key="displayName"
-                                  entering={t.entering}
-                                  exiting={t.exiting}
-                                  layout={t.layout}
-                                >
-                                  <ShakeField shake={displayNameShake} label="Display Name">
-                                    <Input
-                                      value={displayName}
-                                      onChangeText={(text) => {
-                                        setDisplayName(text);
-                                        clearField("displayName");
-                                      }}
-                                      placeholder="Your display name"
-                                      leftIcon={
-                                        <Ionicons
-                                          name="person-outline"
-                                          size={20}
-                                          color={isDark ? "#A3A3A3" : "#737373"}
-                                        />
+                                <ShakeField shake={passwordShake} label={passwordLabel}>
+                                  <PasswordInput
+                                    value={password}
+                                    onChangeText={(text) => {
+                                      setPassword(text);
+                                      clearField("password");
+                                      if (isSignup) {
+                                        checkPasswordDebounced(text);
                                       }
-                                      autoCapitalize="words"
-                                      autoCorrect={false}
-                                      maxLength={100}
-                                      invalid={!!errors.displayName}
-                                      accessibilityLabel="Display name"
-                                      testID="auth-displayname-input"
-                                    />
-                                  </ShakeField>
-                                </Animated.View>
-                              ) : null}
-
-                              <ShakeField shake={passwordShake} label={passwordLabel}>
-                                <PasswordInput
-                                  value={password}
-                                  onChangeText={(text) => {
-                                    setPassword(text);
-                                    clearField("password");
-                                    if (isSignup) {
-                                      checkPasswordDebounced(text);
-                                    }
-                                  }}
-                                  placeholder={passwordPlaceholder}
-                                  autoComplete={isSignup ? "password-new" : "password"}
-                                  invalid={!!errors.password}
-                                  returnKeyType={isSignup ? "next" : "done"}
-                                  onSubmitEditing={isSignup ? undefined : handleSubmit}
-                                  accessibilityLabel={passwordLabel}
-                                  testID="auth-password-input"
-                                />
-                              </ShakeField>
-
-                              {isSignup ? (
-                                <Animated.View
-                                  key="strength"
-                                  entering={t.entering}
-                                  exiting={t.exiting}
-                                  layout={t.layout}
-                                >
-                                  <PasswordStrengthMeter password={password} />
-                                  <PwnedPasswordWarning pwnedInfo={pwnedInfo} />
-                                </Animated.View>
-                              ) : null}
+                                    }}
+                                    placeholder={passwordPlaceholder}
+                                    autoComplete={isSignup ? "password-new" : "password"}
+                                    invalid={!!errors.password}
+                                    returnKeyType={isSignup ? "next" : "done"}
+                                    onSubmitEditing={isSignup ? undefined : handleSubmit}
+                                    accessibilityLabel={passwordLabel}
+                                    testID="auth-password-input"
+                                  />
+                                </ShakeField>
 
-                              {isSignup ? (
-                                <Animated.View
-                                  key="confirm"
-                                  entering={t.entering}
-                                  exiting={t.exiting}
-                                  layout={t.layout}
-                                >
-                                  <ShakeField shake={confirmShake} label="Confirm Password">
-                                    <PasswordInput
-                                      value={confirmPassword}
-                                      onChangeText={(text) => {
-                                        setConfirmPassword(text);
-                                        clearField("confirmPassword");
-                                      }}
-                                      placeholder="Re-enter your password"
-                                      autoComplete="password-new"
-                                      returnKeyType="done"
-                                      onSubmitEditing={handleSubmit}
-                                      invalid={!!errors.confirmPassword}
-                                      accessibilityLabel="Confirm password"
-                                      testID="auth-confirm-password-input"
+                                {/* Rendered only when it has something to show.
+                                  An empty wrapper still consumes one of
+                                  CardContent's `gap-3` slots, which put 12px
+                                  more space above Confirm Password than
+                                  between any other pair of fields — visible as
+                                  a stray gap. `probeSignup` keeps it in the
+                                  measuring pass so the locked height still
+                                  accounts for the meter. */}
+                                {showSignup && (probeSignup || password.length > 0 || pwnedInfo) ? (
+                                  <Animated.View
+                                    key="strength"
+                                    entering={t.entering}
+                                    exiting={t.exiting}
+                                    layout={t.layout}
+                                  >
+                                    {/* `reserveSpace` only during the probe.
+                                      Keeping it on permanently held an empty
+                                      28px block between Password and Confirm
+                                      Password, which reads as a stray gap.
+                                      Reserving it just for the measurement
+                                      means the locked height still accounts
+                                      for the meter, so it can appear later
+                                      without the card growing. */}
+                                    <PasswordStrengthMeter
+                                      password={password}
+                                      reserveSpace={probeSignup}
                                     />
-                                  </ShakeField>
-                                  {requireInviteCode ? (
-                                    <View className="mt-3">
-                                      <ShakeField shake={confirmShake} label="Invite code">
-                                        <Input
-                                          value={inviteCode}
-                                          onChangeText={(text) => {
-                                            setInviteCode(text);
-                                            clearField("inviteCode");
-                                          }}
-                                          placeholder="Paste your invite code"
-                                          autoCapitalize="none"
-                                          autoCorrect={false}
-                                          returnKeyType="done"
-                                          onSubmitEditing={handleSubmit}
-                                          invalid={!!errors.inviteCode}
-                                          accessibilityLabel="Invite code"
-                                          testID="auth-invite-code-input"
-                                        />
-                                      </ShakeField>
-                                      <FormError message={errors.inviteCode} />
-                                    </View>
-                                  ) : null}
-                                </Animated.View>
-                              ) : (
-                                <Animated.View
-                                  key="forgot"
-                                  entering={t.entering}
-                                  exiting={t.exiting}
-                                  layout={t.layout}
-                                  className="items-end"
-                                >
-                                  <Text
-                                    className="font-mono text-sm underline"
-                                    onPress={withClickTracking("auth.auth.stage_2", () => {
-                                      setStage("forgot");
-                                      setForgotSent(false);
-                                      setErrors({});
-                                    })}
-                                    accessibilityRole="link"
-                                    accessibilityLabel="Forgot password"
+                                    <PwnedPasswordWarning pwnedInfo={pwnedInfo} />
+                                  </Animated.View>
+                                ) : null}
+
+                                {showSignup ? (
+                                  <Animated.View
+                                    key="confirm"
+                                    entering={t.entering}
+                                    exiting={t.exiting}
+                                    layout={t.layout}
                                   >
-                                    Forgot password?
-                                  </Text>
-                                </Animated.View>
-                              )}
-                            </CardContent>
+                                    <ShakeField shake={confirmShake} label="Confirm Password">
+                                      <PasswordInput
+                                        value={confirmPassword}
+                                        onChangeText={(text) => {
+                                          setConfirmPassword(text);
+                                          clearField("confirmPassword");
+                                        }}
+                                        placeholder="Re-enter your password"
+                                        autoComplete="password-new"
+                                        returnKeyType="done"
+                                        onSubmitEditing={handleSubmit}
+                                        invalid={!!errors.confirmPassword}
+                                        accessibilityLabel="Confirm password"
+                                        testID="auth-confirm-password-input"
+                                      />
+                                    </ShakeField>
+                                    {requireInviteCode ? (
+                                      <View className="mt-3">
+                                        <ShakeField shake={confirmShake} label="Invite code">
+                                          <Input
+                                            value={inviteCode}
+                                            onChangeText={(text) => {
+                                              setInviteCode(text);
+                                              clearField("inviteCode");
+                                            }}
+                                            placeholder="Paste your invite code"
+                                            autoCapitalize="none"
+                                            autoCorrect={false}
+                                            returnKeyType="done"
+                                            onSubmitEditing={handleSubmit}
+                                            invalid={!!errors.inviteCode}
+                                            accessibilityLabel="Invite code"
+                                            testID="auth-invite-code-input"
+                                          />
+                                        </ShakeField>
+                                        <FormError message={errors.inviteCode} />
+                                      </View>
+                                    ) : null}
+                                  </Animated.View>
+                                ) : (
+                                  <Animated.View
+                                    key="forgot"
+                                    entering={t.entering}
+                                    exiting={t.exiting}
+                                    layout={t.layout}
+                                    className="items-end"
+                                  >
+                                    <Text
+                                      className="font-mono text-sm underline"
+                                      onPress={withClickTracking("auth.auth.stage_2", () => {
+                                        setStage("forgot");
+                                        setForgotSent(false);
+                                        setErrors({});
+                                      })}
+                                      accessibilityRole="link"
+                                      accessibilityLabel="Forgot password"
+                                    >
+                                      Forgot password?
+                                    </Text>
+                                  </Animated.View>
+                                )}
+                              </CardContent>
 
-                            <CardFooter className="flex-col items-stretch gap-3 border-t-0 pt-0">
-                              <FormError message={firstError} />
+                              <CardFooter className="flex-col items-stretch gap-2.5 border-t-0 pb-5 pt-0">
+                                <FormError message={firstError} />
 
-                              <Button
-                                className="w-full"
-                                telemetryId="auth.auth.submit"
-                                onPress={handleSubmit}
-                                isLoading={isLoading}
-                                accessibilityLabel={isSignup ? "Create account" : "Sign in"}
-                                accessibilityRole="button"
-                                testID="auth-submit"
-                              >
-                                {isSignup ? "Create Account" : "Sign In"}
-                              </Button>
+                                <Button
+                                  className="w-full"
+                                  telemetryId="auth.auth.submit"
+                                  onPress={handleSubmit}
+                                  isLoading={isLoading}
+                                  accessibilityLabel={isSignup ? "Create account" : "Sign in"}
+                                  accessibilityRole="button"
+                                  testID="auth-submit"
+                                >
+                                  {isSignup ? "Create Account" : "Sign In"}
+                                </Button>
 
-                              {socialAuth ? (
-                                <>
-                                  <SeparatorWithText />
-                                  {socialAuth}
-                                </>
-                              ) : null}
+                                {socialAuth ? (
+                                  <>
+                                    <SeparatorWithText />
+                                    {socialAuth}
+                                  </>
+                                ) : null}
 
-                              {/* In-card back — thumb-reachable, so users don't
+                                {/* In-card back — thumb-reachable, so users don't
                                 have to stretch to the top-left corner arrow.
                                 Hidden when there is no welcome stage behind it. */}
-                              <Text
-                                className={
-                                  showWelcome
-                                    ? "mt-1 text-center font-mono text-sm text-muted-foreground"
-                                    : "hidden"
-                                }
-                                onPress={withClickTracking("auth.auth.stage_3", () =>
-                                  setStage("welcome")
-                                )}
-                                accessibilityRole="button"
-                                accessibilityLabel="Back"
-                              >
-                                ← Back
-                              </Text>
-                            </CardFooter>
-                          </Animated.View>
-                        </>
-                      )}
-                    </Card>
+                                <Text
+                                  className={
+                                    showWelcome
+                                      ? "mt-1 text-center font-mono text-sm text-muted-foreground"
+                                      : "hidden"
+                                  }
+                                  onPress={withClickTracking("auth.auth.stage_3", () =>
+                                    setStage("welcome")
+                                  )}
+                                  accessibilityRole="button"
+                                  accessibilityLabel="Back"
+                                >
+                                  ← Back
+                                </Text>
+                              </CardFooter>
+                            </Animated.View>
+                          </>
+                        )}
+                      </Card>
+                    </View>
                   </View>
                 )}
               </Animated.View>
 
-              {/* legal footer — Terms/Privacy as popups, no routes */}
-              <View className="mb-6 mt-4">
+              {/* Legal footer — Terms/Privacy as popups, no routes.
+                  Welcome stage ONLY. Pressing "Get Started" and proceeding IS
+                  the acknowledgement, so the line belongs beside that button
+                  and nowhere else; repeating it under the sign-in and sign-up
+                  forms restates a consent the user already gave and crowds two
+                  screens that are busier than the welcome. When there is no
+                  welcome stage at all (`showWelcome={false}`) it stays on the
+                  form. Note there is deliberately NO "but show it on the form
+                  if there is no welcome stage" fallback: `showWelcome` is false
+                  on every launch after the first, so such a fallback puts the
+                  line back under the form permanently — which is exactly the
+                  bug it was written to avoid. */}
+              <View className={onWelcome ? "mb-6 mt-4" : "hidden"}>
                 <MutedText className="text-center text-xs leading-5">
                   By continuing, you agree to our{" "}
                   <Text
@@ -979,9 +1351,26 @@ export function AuthScreen({
                   </Text>
                 </MutedText>
               </View>
+
+              {footer && !showAside ? <View className="mb-6">{footer}</View> : null}
             </View>
           </ScrollView>
         </KeyboardAvoidingView>
+        {/* Wide only. Screen-level and absolutely placed, so it centres on the
+            PAGE rather than under the form column, and drawn after the panes so
+            it sits above them. `pointerEvents="box-none"` keeps it from
+            intercepting a tap meant for anything behind it.
+            On a narrow layout it is rendered IN FLOW instead (below): the card
+            reaches the bottom of a phone screen, and an absolute footer simply
+            lands on top of the card's own back link. */}
+        {footer && showAside ? (
+          <View
+            pointerEvents="box-none"
+            style={{ position: "absolute", left: 0, right: 0, bottom: 16, alignItems: "center" }}
+          >
+            {footer}
+          </View>
+        ) : null}
       </SafeAreaView>
 
       {/* Passkey unlock dialog — non-PRF authenticators. */}