@ramonclaudio/create-vexpo 0.1.0 → 0.1.1

package/dist/templates/default/src/app/(app)/_layout.tsx

@@ -0,0 +1,147 @@
+import { Stack } from "expo-router";
+import { useQuery } from "convex/react";
+
+import { api } from "@/convex/_generated/api";
+import { authClient } from "@/lib/auth-client";
+import { useDeepLinkHandler } from "@/hooks/use-deep-link";
+import { useColors } from "@/hooks/use-theme";
+import { useMotionScreenOptions } from "@/hooks/use-motion-screen-options";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
+import { FontFamily } from "@/constants/layout";
+import { LoadingScreen } from "@/components/ui/loading-screen";
+
+export { AppErrorBoundary as ErrorBoundary } from "@/components/ui/error-boundary";
+
+export function SuspenseFallback() {
+  return <LoadingScreen testID="app-content-loading" />;
+}
+
+// Anchor the back-stack root so a guard flip lands on the tabs root, not
+// whichever screen declares first.
+export const unstable_settings = { anchor: "(tabs)" } as const;
+
+export default function AppLayout() {
+  const { data: session } = authClient.useSession();
+  const isAuthenticated = !!session?.session;
+
+  // Skipped while unauthed because Convex queries need a live JWT.
+  const me = useQuery(api.users.getMe, isAuthenticated ? {} : "skip");
+  const isAccountDeleted = !!me?.deletedAt;
+
+  useDeepLinkHandler();
+
+  const colors = useColors();
+  const reduceMotion = useReducedMotion();
+  const motion = useMotionScreenOptions("slide_from_right", 300);
+  const headerTint = colors.foreground as string;
+  const titleStyle = { color: headerTint, fontFamily: FontFamily.semiBold };
+
+  return (
+    <Stack
+      screenOptions={{
+        ...motion,
+        headerShown: false,
+        contentStyle: { backgroundColor: colors.background as string },
+        headerBackTitle: "Back",
+        headerTintColor: headerTint,
+        headerShadowVisible: false,
+      }}
+    >
+      <Stack.Protected guard={isAuthenticated && !isAccountDeleted}>
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+
+        <Stack.Screen
+          name="welcome"
+          options={{
+            headerShown: false,
+            presentation: "fullScreenModal",
+            gestureEnabled: false,
+            animation: reduceMotion ? "none" : "fade",
+          }}
+        />
+
+        <Stack.Screen name="debug">
+          <Stack.Header transparent />
+          <Stack.Screen.Title style={titleStyle}>Debug</Stack.Screen.Title>
+          <Stack.Screen.BackButton withMenu>Settings</Stack.Screen.BackButton>
+        </Stack.Screen>
+
+        <Stack.Screen name="help">
+          <Stack.Header transparent />
+          <Stack.Screen.Title style={titleStyle}>Help</Stack.Screen.Title>
+          <Stack.Screen.BackButton>Settings</Stack.Screen.BackButton>
+        </Stack.Screen>
+
+        <Stack.Screen name="privacy">
+          <Stack.Header transparent />
+          <Stack.Screen.Title style={titleStyle}>Privacy</Stack.Screen.Title>
+          <Stack.Screen.BackButton displayMode="minimal" withMenu>
+            Settings
+          </Stack.Screen.BackButton>
+        </Stack.Screen>
+
+        <Stack.Screen
+          name="linked"
+          options={{
+            headerShown: true,
+            title: "Linked",
+            headerTitleStyle: titleStyle,
+            presentation: "formSheet",
+            sheetAllowedDetents: [0.5, 1],
+            sheetGrabberVisible: true,
+            sheetCornerRadius: 24,
+            sheetLargestUndimmedDetentIndex: 0,
+          }}
+        />
+
+        <Stack.Screen name="profile/index" options={{ headerShown: true }}>
+          <Stack.Header transparent />
+          <Stack.Screen.Title style={titleStyle}>Profile</Stack.Screen.Title>
+          <Stack.Screen.BackButton>Settings</Stack.Screen.BackButton>
+        </Stack.Screen>
+
+        <Stack.Screen
+          name="profile/change-password"
+          options={{ headerShown: true, presentation: "modal" }}
+        >
+          <Stack.Header transparent />
+          <Stack.Screen.Title style={titleStyle}>Password</Stack.Screen.Title>
+          <Stack.Screen.BackButton>Profile</Stack.Screen.BackButton>
+        </Stack.Screen>
+
+        <Stack.Screen name="sessions" options={{ headerShown: true }}>
+          <Stack.Header transparent />
+          <Stack.Screen.Title style={titleStyle}>Sessions</Stack.Screen.Title>
+          <Stack.Screen.BackButton>Settings</Stack.Screen.BackButton>
+        </Stack.Screen>
+      </Stack.Protected>
+
+      {/* Own Stack.Protected so the whole authed tree above un-mounts when
+          `deletedAt` is set and re-mounts on restore. */}
+      <Stack.Protected guard={isAuthenticated && isAccountDeleted}>
+        <Stack.Screen
+          name="restore-account"
+          options={{
+            headerShown: false,
+            presentation: "modal",
+            gestureEnabled: false,
+            animation: reduceMotion ? "fade" : "default",
+          }}
+        />
+      </Stack.Protected>
+
+      <Stack.Protected guard={!isAuthenticated}>
+        <Stack.Screen
+          name="auth"
+          options={{
+            headerShown: false,
+            presentation: "fullScreenModal",
+            gestureEnabled: false,
+            animation: reduceMotion ? "fade" : "fade_from_bottom",
+            animationDuration: reduceMotion ? 150 : 250,
+          }}
+        />
+      </Stack.Protected>
+    </Stack>
+  );
+}

package/dist/templates/default/{app/(auth) → src/app/(app)/auth}/_layout.tsx

@@ -1,25 +1,24 @@
 import { Stack } from "expo-router";
 
 import { useColors } from "@/hooks/use-theme";
-import { useReducedMotion } from "@/hooks/use-reduced-motion";
+import { useMotionScreenOptions } from "@/hooks/use-motion-screen-options";
 import { LoadingScreen } from "@/components/ui/loading-screen";
 
 export { AppErrorBoundary as ErrorBoundary } from "@/components/ui/error-boundary";
 
 export function SuspenseFallback() {
-  return <LoadingScreen />;
+  return <LoadingScreen testID="auth-loading" />;
 }
 
 export default function AuthLayout() {
   const colors = useColors();
-  const reduceMotion = useReducedMotion();
+  const motion = useMotionScreenOptions("fade_from_bottom", 250);
   return (
     <Stack
       screenOptions={{
+        ...motion,
         headerShown: false,
         contentStyle: { backgroundColor: colors.background as string },
-        animation: reduceMotion ? "fade" : "fade_from_bottom",
-        animationDuration: reduceMotion ? 150 : 250,
       }}
     >
       <Stack.Screen name="sign-in" />

package/dist/templates/default/{app/(auth) → src/app/(app)/auth}/forgot-password.tsx

@@ -15,6 +15,7 @@ import {
   keyboardType,
   onSubmit,
   submitLabel,
+  textContentType,
   textFieldStyle,
   textInputAutocapitalization,
   padding,
@@ -25,7 +26,7 @@ import {
   tint,
 } from "@expo/ui/swift-ui/modifiers";
 import { useDynamicFont } from "@/lib/dynamic-font";
-import { Button as ButtonTokens } from "@/constants/layout";
+import { Button as ButtonTokens, TouchTarget } from "@/constants/layout";
 
 import { authClient } from "@/lib/auth-client";
 import { assets } from "@/lib/assets";
@@ -52,7 +53,7 @@ export default function ForgotPasswordScreen() {
   // mode, but a deeplinked navigation could still land here.
   useEffect(() => {
     if (providers !== undefined && providers.emailFeatures === false) {
-      router.replace("/sign-in");
+      router.replace("/auth/sign-in");
     }
   }, [providers]);
 
@@ -66,8 +67,6 @@ export default function ForgotPasswordScreen() {
     }
 
     try {
-      // OTP-based reset: server emails a 6-digit code, the next screen
-      // collects code + new password and calls emailOtp.resetPassword.
       const response = await authClient.emailOtp.sendVerificationOtp({
         email: parsed.data.email,
         type: "forget-password",
@@ -79,7 +78,7 @@ export default function ForgotPasswordScreen() {
       }
       haptics.success();
       announce("Reset code sent");
-      router.push({ pathname: "/reset-password", params: { email: parsed.data.email } });
+      router.push({ pathname: "/auth/reset-password", params: { email: parsed.data.email } });
       return {};
     } catch {
       haptics.error();
@@ -88,7 +87,7 @@ export default function ForgotPasswordScreen() {
   }, initialState);
 
   return (
-    <Host style={{ flex: 1, backgroundColor: colors.background }}>
+    <Host testID="forgot-password-screen" style={{ flex: 1, backgroundColor: colors.background }}>
       <ScrollView
         modifiers={[scrollDismissesKeyboard("interactively"), tint(colors.primary as string)]}
       >
@@ -107,7 +106,9 @@ export default function ForgotPasswordScreen() {
           </RNHostView>
 
           <VStack spacing={6} alignment="leading">
-            <Text modifiers={[dfont({ size: 28, weight: "bold" })]}>Reset your password</Text>
+            <Text testID="forgot-password-title" modifiers={[dfont({ size: 28, weight: "bold" })]}>
+              Reset your password
+            </Text>
             <Text
               modifiers={[dfont({ size: 16 }), foregroundStyle(colors.mutedForeground as string)]}
             >
@@ -115,23 +116,25 @@ export default function ForgotPasswordScreen() {
             </Text>
           </VStack>
 
-          {state.error && <ErrorText>{state.error}</ErrorText>}
+          {state.error && <ErrorText testID="forgot-password-error">{state.error}</ErrorText>}
 
           <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
             <Text modifiers={[dfont({ size: 17, weight: "semibold" })]}>Email</Text>
             <TextField
+              testID="forgot-password-email"
               placeholder="you@example.com"
               onTextChange={setEmail}
               modifiers={[
                 textFieldStyle("plain"),
                 padding({ horizontal: 16 }),
-                frame({ maxWidth: Infinity, height: ButtonTokens.height }),
+                frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
                 background(colors.muted as string),
                 clipShape("capsule"),
                 dfont({ size: 16 }),
                 keyboardType("email-address"),
                 autocorrectionDisabled(),
                 textInputAutocapitalization("never"),
+                textContentType("username"),
                 onSubmit(() => startTransition(() => submit())),
                 disabled(isPending),
                 submitLabel("send"),
@@ -142,6 +145,7 @@ export default function ForgotPasswordScreen() {
           </VStack>
 
           <ProminentButton
+            testID="forgot-password-submit"
             label={isPending ? "Sending..." : "Send reset code"}
             onPress={() => startTransition(() => submit())}
             disabled={isPending}
@@ -149,11 +153,13 @@ export default function ForgotPasswordScreen() {
 
           <VStack alignment="center" modifiers={[frame({ maxWidth: Infinity })]}>
             <Button
+              testID="forgot-password-back"
               label="Back to sign in"
               modifiers={[
                 buttonStyle("plain"),
                 foregroundStyle(colors.mutedForeground as string),
                 dfont({ size: 14, weight: "semibold" }),
+                frame({ minHeight: TouchTarget.min }),
               ]}
               onPress={() => {
                 haptics.light();

package/dist/templates/default/{app/(auth) → src/app/(app)/auth}/reset-password.tsx

@@ -12,13 +12,16 @@ import {
   Spacer,
   RNHostView,
   ConfirmationDialog,
+  useNativeState,
 } from "@expo/ui/swift-ui";
 import {
   foregroundStyle,
   buttonStyle,
   background,
   clipShape,
+  defaultScrollAnchorForRole,
   disabled,
+  dynamicTypeSize,
   keyboardType,
   textFieldStyle,
   padding,
@@ -28,16 +31,23 @@ import {
   monospacedDigit,
   kerning,
   submitLabel,
+  textContentType,
+  accessibilityHidden,
   accessibilityLabel,
   accessibilityHint,
   tint,
 } from "@expo/ui/swift-ui/modifiers";
 import { useDynamicFont } from "@/lib/dynamic-font";
+import { useSymbolSize } from "@/lib/dynamic-symbol-size";
 import { Button as ButtonTokens } from "@/constants/layout";
+import { DynamicType } from "@/constants/ui";
+
+import { runOnJS } from "react-native-worklets";
 
 import { authClient } from "@/lib/auth-client";
 import { assets } from "@/lib/assets";
 import { haptics } from "@/lib/haptics";
+import { maskOtp } from "@/lib/masks";
 import { firstError, resetPasswordSchema } from "@/lib/schemas";
 import { PasswordField } from "@/components/auth/password-field";
 import { ProminentButton } from "@/components/ui/prominent-button";
@@ -53,6 +63,7 @@ const initialState: ResetState = {};
 
 export default function ResetPasswordScreen() {
   const dfont = useDynamicFont();
+  const symbolSize = useSymbolSize();
   const colors = useColors();
   const brandIcon = useThemedAsset(assets.brandIconLight, assets.brandIconDark);
   const { email = "" } = useLocalSearchParams<{ email: string }>();
@@ -61,13 +72,17 @@ export default function ResetPasswordScreen() {
   // in lite mode (`REQUIRE_EMAIL_VERIFICATION` unset).
   useEffect(() => {
     if (providers !== undefined && providers.emailFeatures === false) {
-      router.replace("/sign-in");
+      router.replace("/auth/sign-in");
     }
   }, [providers]);
 
+  const otpState = useNativeState("");
   const [otp, setOtp] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
+  // Hidden carrier so iOS keychain pairs the new password with this email
+  // when Strong Password offers a suggestion and the user accepts.
+  const emailIdentityState = useNativeState(email);
 
   const [state, submit, isPending] = useActionState<ResetState, void>(async () => {
     haptics.light();
@@ -126,7 +141,7 @@ export default function ResetPasswordScreen() {
   const inputModifiers = [
     textFieldStyle("plain"),
     padding({ horizontal: 16 }),
-    frame({ maxWidth: Infinity, height: ButtonTokens.height }),
+    frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
     background(colors.muted as string),
     clipShape("capsule"),
     dfont({ size: 16 }),
@@ -134,15 +149,29 @@ export default function ResetPasswordScreen() {
 
   if (state.ok) {
     return (
-      <Host style={{ flex: 1, backgroundColor: colors.background }}>
+      <Host
+        testID="reset-password-success-screen"
+        style={{ flex: 1, backgroundColor: colors.background }}
+      >
         <VStack
           spacing={16}
           alignment="center"
           modifiers={[padding({ horizontal: 24 }), tint(colors.primary as string)]}
         >
           <Spacer />
-          <Image systemName="checkmark.circle.fill" size={56} color={colors.success} />
-          <Text modifiers={[dfont({ size: 28, weight: "bold" })]}>Password reset!</Text>
+          <Image
+            testID="reset-password-success-icon"
+            systemName="checkmark.circle.fill"
+            size={symbolSize(56)}
+            color={colors.success}
+            modifiers={[accessibilityHidden(true)]}
+          />
+          <Text
+            testID="reset-password-success-title"
+            modifiers={[dfont({ size: 28, weight: "bold" })]}
+          >
+            Password reset!
+          </Text>
           <Text
             modifiers={[
               dfont({ size: 15 }),
@@ -153,10 +182,11 @@ export default function ResetPasswordScreen() {
             Your password has been reset. You can now sign in with your new password.
           </Text>
           <ProminentButton
+            testID="reset-password-success-sign-in"
             label="Sign in"
             onPress={() => {
               haptics.light();
-              router.replace("/sign-in");
+              router.replace("/auth/sign-in");
             }}
           />
           <Spacer />
@@ -168,9 +198,16 @@ export default function ResetPasswordScreen() {
   const labelModifiers = [dfont({ size: 17, weight: "semibold" })];
 
   return (
-    <Host style={{ flex: 1, backgroundColor: colors.background }}>
+    <Host testID="reset-password-screen" style={{ flex: 1, backgroundColor: colors.background }}>
       <ScrollView
-        modifiers={[scrollDismissesKeyboard("interactively"), tint(colors.primary as string)]}
+        modifiers={[
+          scrollDismissesKeyboard("interactively"),
+          tint(colors.primary as string),
+          // An invalid-code error appears between the account row and the OTP
+          // field, pushing the password fields down. Pin the visible center so
+          // the user stays on the field they were filling. No-op below iOS 18.
+          defaultScrollAnchorForRole("center", "sizeChanges"),
+        ]}
       >
         <VStack
           spacing={20}
@@ -187,7 +224,9 @@ export default function ResetPasswordScreen() {
           </RNHostView>
 
           <VStack spacing={6} alignment="leading">
-            <Text modifiers={[dfont({ size: 28, weight: "bold" })]}>Reset password</Text>
+            <Text testID="reset-password-title" modifiers={[dfont({ size: 28, weight: "bold" })]}>
+              Reset password
+            </Text>
             <Text
               modifiers={[dfont({ size: 16 }), foregroundStyle(colors.mutedForeground as string)]}
             >
@@ -195,16 +234,32 @@ export default function ResetPasswordScreen() {
             </Text>
           </VStack>
 
+          <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+            <Text modifiers={labelModifiers}>Account</Text>
+            <TextField
+              testID="reset-password-account"
+              text={emailIdentityState}
+              modifiers={[
+                ...inputModifiers,
+                foregroundStyle(colors.mutedForeground as string),
+                textContentType("username"),
+                disabled(true),
+                accessibilityLabel("Account email"),
+              ]}
+            />
+          </VStack>
+
           {error && (
             <VStack spacing={8} alignment="leading">
-              <ErrorText>{error}</ErrorText>
+              <ErrorText testID="reset-password-error">{error}</ErrorText>
               {isExpiredError && (
                 <Button
+                  testID="reset-password-request-code"
                   label="Request a new code"
                   modifiers={[buttonStyle("plain"), dfont({ size: 14 })]}
                   onPress={() => {
                     haptics.light();
-                    router.push("/forgot-password");
+                    router.push("/auth/forgot-password");
                   }}
                 />
               )}
@@ -214,16 +269,27 @@ export default function ResetPasswordScreen() {
           <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
             <Text modifiers={labelModifiers}>Verification code</Text>
             <TextField
+              testID="reset-password-code"
+              text={otpState}
               placeholder="000000"
-              onTextChange={(text) => setOtp(text.replace(/\D/g, "").slice(0, 6))}
+              onTextChange={(text) => {
+                "worklet";
+                const digits = maskOtp(text);
+                otpState.value = digits;
+                runOnJS(setOtp)(digits);
+              }}
               autoFocus
               modifiers={[
                 ...inputModifiers,
                 keyboardType("numeric"),
+                textContentType("oneTimeCode"),
                 dfont({ size: 24, design: "monospaced" }),
                 monospacedDigit(),
                 kerning(8),
                 multilineTextAlignment("center"),
+                // upstream expo/expo#46540: six monospaced glyphs in a capsule
+                // that can't wrap, cap Dynamic Type so they don't overflow.
+                dynamicTypeSize({ max: DynamicType.otp }),
                 submitLabel("next"),
                 disabled(isPending),
                 accessibilityLabel("Verification code"),
@@ -235,7 +301,9 @@ export default function ResetPasswordScreen() {
           <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
             <Text modifiers={labelModifiers}>New password</Text>
             <PasswordField
+              testID="reset-password-new"
               onTextChange={setPassword}
+              contentType="newPassword"
               disabled={isPending}
               submitLabelType="next"
               accessibilityLabel="New password"
@@ -251,8 +319,10 @@ export default function ResetPasswordScreen() {
           <VStack spacing={6} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
             <Text modifiers={labelModifiers}>Confirm password</Text>
             <PasswordField
+              testID="reset-password-confirm"
               onTextChange={setConfirmPassword}
               onSubmit={() => startTransition(() => submit())}
+              contentType="newPassword"
               disabled={isPending}
               accessibilityLabel="Confirm new password"
               accessibilityHint="Re-enter the new password to confirm"
@@ -260,6 +330,7 @@ export default function ResetPasswordScreen() {
           </VStack>
 
           <ProminentButton
+            testID="reset-password-submit"
             label={isPending ? "Resetting..." : "Reset password"}
             onPress={() => startTransition(() => submit())}
             disabled={isPending}
@@ -267,6 +338,7 @@ export default function ResetPasswordScreen() {
 
           <VStack alignment="center" modifiers={[frame({ maxWidth: Infinity })]}>
             <Button
+              testID="reset-password-back-to-sign-in"
               label="Back to sign in"
               modifiers={[
                 buttonStyle("plain"),
@@ -275,7 +347,7 @@ export default function ResetPasswordScreen() {
               ]}
               onPress={() => {
                 haptics.light();
-                router.push("/sign-in");
+                router.push("/auth/sign-in");
               }}
             />
           </VStack>
@@ -295,15 +367,17 @@ export default function ResetPasswordScreen() {
         </ConfirmationDialog.Trigger>
         <ConfirmationDialog.Actions>
           <Button
+            testID="reset-password-discard"
             label="Discard"
             role="destructive"
             onPress={() => {
+              haptics.warning();
               const action = pendingNavAction;
               setPendingNavAction(null);
               if (action) navigation.dispatch(action);
             }}
           />
-          <Button label="Keep Editing" role="cancel" />
+          <Button testID="reset-password-keep-editing" label="Keep Editing" role="cancel" />
         </ConfirmationDialog.Actions>
         <ConfirmationDialog.Message>
           <Text modifiers={[dfont({ size: 16 })]}>Your password entries will be lost.</Text>