create-100x-mobile 0.1.1 → 0.2.0

package/dist/commands/new.js

@@ -12,6 +12,7 @@ const projectName_1 = require("../lib/projectName");
 const run_1 = require("../lib/run");
 const dotenv_1 = require("../lib/dotenv");
 const fs_2 = require("../lib/fs");
+const clerk_1 = require("../lib/clerk");
 // Config templates
 const packageJson_1 = require("../templates/config/packageJson");
 const appJson_1 = require("../templates/config/appJson");
@@ -29,7 +30,6 @@ const notFound_1 = require("../templates/app/notFound");
 const authProvider_1 = require("../templates/app/authProvider");
 const authLayout_1 = require("../templates/app/authLayout");
 const signIn_1 = require("../templates/app/signIn");
-const signUp_1 = require("../templates/app/signUp");
 const tabsLayout_1 = require("../templates/app/tabsLayout");
 const todosScreen_1 = require("../templates/app/todosScreen");
 const settingsScreen_1 = require("../templates/app/settingsScreen");
@@ -121,7 +121,6 @@ async function cmdNew(args) {
         ["app/providers/AuthProvider.tsx", (0, authProvider_1.authProviderTemplate)()],
         ["app/(auth)/_layout.tsx", (0, authLayout_1.authLayoutTemplate)()],
         ["app/(auth)/sign-in.tsx", (0, signIn_1.signInTemplate)()],
-        ["app/(auth)/sign-up.tsx", (0, signUp_1.signUpTemplate)()],
         ["app/(tabs)/_layout.tsx", (0, tabsLayout_1.tabsLayoutTemplate)()],
         ["app/(tabs)/index.tsx", (0, todosScreen_1.todosScreenTemplate)()],
         ["app/(tabs)/settings.tsx", (0, settingsScreen_1.settingsScreenTemplate)()],
@@ -173,19 +172,38 @@ async function cmdNew(args) {
     });
     const clerkKeyValue = (0, prompts_1.isCancel)(clerkKey) || !clerkKey ? "" : clerkKey.trim();
     let clerkDomain = "";
+    let clerkSecretKey = "";
     if (clerkKeyValue) {
-        const domainInput = await (0, prompts_1.text)({
-            message: "Clerk JWT Issuer Domain",
-            placeholder: "https://your-app.clerk.accounts.dev",
+        // Try to extract domain from publishable key
+        const derivedDomain = (0, clerk_1.extractDomainFromPublishableKey)(clerkKeyValue);
+        if (derivedDomain) {
+            clerkDomain = derivedDomain;
+            prompts_1.log.info(`  Detected issuer domain: ${picocolors_1.default.cyan(clerkDomain)}`);
+        }
+        else {
+            const domainInput = await (0, prompts_1.text)({
+                message: "Clerk JWT Issuer Domain",
+                placeholder: "https://your-app.clerk.accounts.dev",
+                defaultValue: "",
+            });
+            clerkDomain =
+                (0, prompts_1.isCancel)(domainInput) || !domainInput ? "" : domainInput.trim();
+        }
+        // Ask for secret key to auto-create JWT template
+        prompts_1.log.info("");
+        prompts_1.log.info(picocolors_1.default.dim('Provide your Clerk Secret Key to auto-create the "convex" JWT template.'));
+        prompts_1.log.info(picocolors_1.default.dim("Press Enter to skip (you can create it manually later)."));
+        const secretInput = await (0, prompts_1.text)({
+            message: "Clerk Secret Key",
+            placeholder: "sk_test_...",
             defaultValue: "",
         });
-        clerkDomain =
-            (0, prompts_1.isCancel)(domainInput) || !domainInput ? "" : domainInput.trim();
+        clerkSecretKey =
+            (0, prompts_1.isCancel)(secretInput) || !secretInput ? "" : secretInput.trim();
     }
     // Step 7: Write env vars
     const envLocalPath = (0, node_path_1.join)(projectDir, ".env.local");
     let envContents = "";
-    // Read existing .env.local (Convex may have written EXPO_PUBLIC_CONVEX_URL)
     try {
         envContents = await (0, fs_2.readTextFile)(envLocalPath);
     }
@@ -212,6 +230,22 @@ async function cmdNew(args) {
             prompts_1.log.warn(`Run manually: bunx convex env set CLERK_JWT_ISSUER_DOMAIN ${clerkDomain}`);
         }
     }
+    // Step 8b: Auto-create JWT template if secret key provided
+    let jwtCreated = false;
+    if (clerkSecretKey) {
+        const jwtSpinner = (0, prompts_1.spinner)();
+        jwtSpinner.start('Creating "convex" JWT template in Clerk');
+        const result = await (0, clerk_1.createConvexJwtTemplate)(clerkSecretKey);
+        if (result.success) {
+            jwtSpinner.stop('JWT template "convex" created in Clerk.');
+            jwtCreated = true;
+        }
+        else {
+            jwtSpinner.stop("Could not create JWT template.");
+            prompts_1.log.warn(`Clerk API error: ${result.error}`);
+            prompts_1.log.warn('Create a JWT template named "convex" manually in Clerk dashboard.');
+        }
+    }
     // Step 9: Push Convex functions (if Clerk was configured)
     if (clerkKeyValue && clerkDomain) {
         prompts_1.log.step("Deploying Convex functions");
@@ -225,29 +259,44 @@ async function cmdNew(args) {
     }
     // Step 10: Success message
     prompts_1.log.info("");
-    if (clerkKeyValue && clerkDomain) {
+    if (clerkKeyValue && clerkDomain && jwtCreated) {
+        // Fully automated — everything is set up
         prompts_1.log.success(picocolors_1.default.bold(picocolors_1.default.green("Your app is ready!")));
         prompts_1.log.info("");
         prompts_1.log.info("  Next steps:");
         prompts_1.log.info(`  ${picocolors_1.default.cyan("cd")} ${projectName}`);
         prompts_1.log.info(`  ${picocolors_1.default.cyan("bunx expo start")}`);
         prompts_1.log.info("");
-        prompts_1.log.info(picocolors_1.default.dim('Important: In your Clerk dashboard, create a JWT template named "convex"'));
-        prompts_1.log.info(picocolors_1.default.dim("with issuer set to your Convex deployment URL."));
+        prompts_1.log.info(picocolors_1.default.dim("Remember to enable Google and Apple OAuth providers in your Clerk dashboard."));
+    }
+    else if (clerkKeyValue && clerkDomain) {
+        // Keys set but JWT template not auto-created
+        prompts_1.log.success(picocolors_1.default.bold(picocolors_1.default.green("Almost ready!")));
+        prompts_1.log.info("");
+        prompts_1.log.info("  One more step:");
+        prompts_1.log.info(`  1. Create a JWT template named ${picocolors_1.default.bold('"convex"')} in Clerk dashboard`);
+        prompts_1.log.info(picocolors_1.default.dim("     Dashboard → JWT Templates → New template → Name: convex"));
+        prompts_1.log.info(`  2. Enable Google and Apple OAuth in Clerk dashboard`);
+        prompts_1.log.info("");
+        prompts_1.log.info("  Then start your app:");
+        prompts_1.log.info(`  ${picocolors_1.default.cyan("cd")} ${projectName}`);
+        prompts_1.log.info(`  ${picocolors_1.default.cyan("bunx expo start")}`);
     }
     else {
+        // No Clerk keys — manual setup needed
         prompts_1.log.success(picocolors_1.default.bold(picocolors_1.default.green("Project scaffolded!")));
         prompts_1.log.info("");
         prompts_1.log.info("  To finish setup:");
         prompts_1.log.info("");
-        prompts_1.log.info(`  1. Get your Clerk keys from ${picocolors_1.default.cyan("https://dashboard.clerk.com")}`);
-        prompts_1.log.info(`  2. Add them to ${picocolors_1.default.cyan(".env.local")}:`);
+        prompts_1.log.info(`  1. Create a Clerk app at ${picocolors_1.default.cyan("https://dashboard.clerk.com")}`);
+        prompts_1.log.info(`  2. Enable Google and Apple OAuth providers`);
+        prompts_1.log.info(`  3. Add keys to ${picocolors_1.default.cyan(".env.local")}:`);
         prompts_1.log.info(`     ${picocolors_1.default.dim("EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...")}`);
         prompts_1.log.info(`     ${picocolors_1.default.dim("CLERK_JWT_ISSUER_DOMAIN=https://your-app.clerk.accounts.dev")}`);
-        prompts_1.log.info(`  3. Set the Convex env var:`);
+        prompts_1.log.info(`  4. Set the Convex env var:`);
         prompts_1.log.info(`     ${picocolors_1.default.dim("bunx convex env set CLERK_JWT_ISSUER_DOMAIN <domain>")}`);
-        prompts_1.log.info(`  4. Create a JWT template named ${picocolors_1.default.bold('"convex"')} in Clerk dashboard`);
-        prompts_1.log.info(`  5. Deploy Convex: ${picocolors_1.default.dim("bunx convex dev --once")}`);
+        prompts_1.log.info(`  5. Create a JWT template named ${picocolors_1.default.bold('"convex"')} in Clerk dashboard`);
+        prompts_1.log.info(`  6. Deploy Convex: ${picocolors_1.default.dim("bunx convex dev --once")}`);
         prompts_1.log.info("");
         prompts_1.log.info("  Then start your app:");
         prompts_1.log.info(`  ${picocolors_1.default.cyan("cd")} ${projectName}`);

package/dist/lib/clerk.js

@@ -0,0 +1,125 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractDomainFromPublishableKey = extractDomainFromPublishableKey;
+exports.createConvexJwtTemplate = createConvexJwtTemplate;
+const https = __importStar(require("node:https"));
+function clerkApi(secretKey, method, path, body) {
+    return new Promise((resolve, reject) => {
+        const data = body ? JSON.stringify(body) : undefined;
+        const req = https.request({
+            hostname: "api.clerk.com",
+            path: `/v1${path}`,
+            method,
+            headers: {
+                Authorization: `Bearer ${secretKey}`,
+                "Content-Type": "application/json",
+                ...(data ? { "Content-Length": String(Buffer.byteLength(data)) } : {}),
+            },
+        }, (res) => {
+            let responseBody = "";
+            res.on("data", (chunk) => (responseBody += chunk));
+            res.on("end", () => {
+                try {
+                    resolve({ status: res.statusCode ?? 0, data: JSON.parse(responseBody) });
+                }
+                catch {
+                    resolve({ status: res.statusCode ?? 0, data: responseBody });
+                }
+            });
+        });
+        req.on("error", reject);
+        if (data)
+            req.write(data);
+        req.end();
+    });
+}
+/**
+ * Extract the JWT issuer domain from a Clerk publishable key.
+ * Clerk keys encode the Frontend API domain in base64 after the prefix.
+ */
+function extractDomainFromPublishableKey(key) {
+    try {
+        const prefix = key.startsWith("pk_test_")
+            ? "pk_test_"
+            : key.startsWith("pk_live_")
+                ? "pk_live_"
+                : null;
+        if (!prefix)
+            return null;
+        const base64Part = key.slice(prefix.length);
+        const decoded = Buffer.from(base64Part, "base64").toString("utf-8");
+        // Remove trailing $ if present
+        const domain = decoded.replace(/\$$/, "");
+        if (domain.includes("clerk")) {
+            return `https://${domain}`;
+        }
+        return null;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Create a "convex" JWT template in Clerk via the Backend API.
+ * Returns success even if the template already exists.
+ */
+async function createConvexJwtTemplate(secretKey) {
+    try {
+        const res = await clerkApi(secretKey, "POST", "/jwt_templates", {
+            name: "convex",
+            claims: {},
+            lifetime: 60,
+            allowed_clock_skew: 5,
+        });
+        if (res.status >= 200 && res.status < 300) {
+            return { success: true };
+        }
+        // Template already exists — that's fine
+        if (res.status === 422 || res.status === 409) {
+            return { success: true };
+        }
+        const message = res.data?.errors?.[0]?.long_message ||
+            res.data?.errors?.[0]?.message ||
+            `HTTP ${res.status}`;
+        return { success: false, error: message };
+    }
+    catch (err) {
+        return {
+            success: false,
+            error: err instanceof Error ? err.message : "Network error",
+        };
+    }
+}

package/dist/templates/app/authLayout.js

@@ -6,21 +6,8 @@ function authLayoutTemplate() {
 
 export default function AuthLayout() {
   return (
-    <Stack>
-      <Stack.Screen
-        name="sign-in"
-        options={{
-          title: "Sign In",
-          headerBackTitle: "Back",
-        }}
-      />
-      <Stack.Screen
-        name="sign-up"
-        options={{
-          title: "Sign Up",
-          headerBackTitle: "Back",
-        }}
-      />
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="sign-in" />
     </Stack>
   );
 }

package/dist/templates/app/rootLayout.js

@@ -13,6 +13,8 @@ export default function RootLayout() {
   return (
     <AuthProvider>
       <Stack screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="(tabs)" />
+        <Stack.Screen name="(auth)" />
         <Stack.Screen name="+not-found" />
       </Stack>
       <StatusBar style="auto" />

package/dist/templates/app/settingsScreen.js

@@ -32,17 +32,11 @@ export default function SettingsScreen() {
   const handleSignOut = async () => {
     if (Platform.OS === "web") {
       const confirmed = window.confirm("Are you sure you want to sign out?");
-      if (confirmed) {
-        await performSignOut();
-      }
+      if (confirmed) await performSignOut();
     } else {
       Alert.alert("Sign Out", "Are you sure you want to sign out?", [
         { text: "Cancel", style: "cancel" },
-        {
-          text: "Sign Out",
-          style: "destructive",
-          onPress: performSignOut,
-        },
+        { text: "Sign Out", style: "destructive", onPress: performSignOut },
       ]);
     }
   };
@@ -56,18 +50,12 @@ export default function SettingsScreen() {
           SecureStore.deleteItemAsync("__clerk_db_jwt"),
           SecureStore.deleteItemAsync("__clerk_session_jwt"),
         ]);
-      } catch {
-        // Token cleanup errors are ignorable
-      }
+      } catch {}
 
       await signOut();
     } catch (error) {
       console.error("Sign out error:", error);
-      if (Platform.OS === "web") {
-        window.alert("Failed to sign out. Please try again.");
-      } else {
-        Alert.alert("Error", "Failed to sign out. Please try again.");
-      }
+      Alert.alert("Error", "Failed to sign out. Please try again.");
     } finally {
       setIsSigningOut(false);
     }
@@ -125,7 +113,7 @@ export default function SettingsScreen() {
         <View style={styles.section}>
           <Text style={styles.sectionTitle}>Account</Text>
 
-          <TouchableOpacity style={styles.menuItem}>
+          <TouchableOpacity style={styles.menuItem} activeOpacity={0.7}>
             <Shield size={20} color="#6B7280" strokeWidth={2} />
             <Text style={styles.menuText}>Privacy & Security</Text>
           </TouchableOpacity>
@@ -158,9 +146,6 @@ export default function SettingsScreen() {
           <Text style={styles.sectionText}>
             Built with Expo, Convex, and Clerk
           </Text>
-          <Text style={styles.sectionText}>
-            Real-time sync across all your devices
-          </Text>
         </View>
       </View>
     </SafeAreaView>
@@ -178,9 +163,9 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   header: {
-    paddingHorizontal: 24,
-    paddingTop: 20,
-    paddingBottom: 24,
+    paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 16,
   },
   title: {
     fontSize: 28,
@@ -189,32 +174,32 @@ const styles = StyleSheet.create({
   },
   content: {
     flex: 1,
-    paddingHorizontal: 24,
-    paddingBottom: 100,
+    paddingHorizontal: 16,
+    paddingBottom: 96,
   },
   profileSection: {
     marginBottom: 32,
   },
   profileCard: {
     backgroundColor: "#F8F9FA",
-    borderRadius: 12,
+    borderRadius: 16,
     padding: 16,
     flexDirection: "row",
     alignItems: "center",
   },
   avatarContainer: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
     backgroundColor: "#E5E7EB",
     alignItems: "center",
     justifyContent: "center",
     marginRight: 16,
   },
   avatar: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
   },
   profileInfo: {
     flex: 1,
@@ -232,7 +217,7 @@ const styles = StyleSheet.create({
   profileEmail: {
     fontSize: 14,
     color: "#6B7280",
-    marginLeft: 6,
+    marginLeft: 8,
   },
   section: {
     marginBottom: 24,
@@ -251,10 +236,11 @@ const styles = StyleSheet.create({
   menuItem: {
     flexDirection: "row",
     alignItems: "center",
+    minHeight: 48,
     paddingVertical: 12,
     paddingHorizontal: 16,
     backgroundColor: "#F8F9FA",
-    borderRadius: 8,
+    borderRadius: 12,
     marginBottom: 8,
   },
   menuText: {

package/dist/templates/app/signIn.js

@@ -6,195 +6,203 @@ function signInTemplate() {
 import {
   View,
   Text,
-  TextInput,
   TouchableOpacity,
   StyleSheet,
-  KeyboardAvoidingView,
-  Platform,
   Alert,
   ActivityIndicator,
+  Platform,
 } from "react-native";
-import { useSignIn } from "@clerk/clerk-expo";
-import { useRouter, Link } from "expo-router";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useOAuth } from "@clerk/clerk-expo";
+import { useRouter } from "expo-router";
+import { SquareCheck as CheckSquare } from "lucide-react-native";
+import * as WebBrowser from "expo-web-browser";
+
+WebBrowser.maybeCompleteAuthSession();
 
 export default function SignInScreen() {
-  const { signIn, setActive, isLoaded } = useSignIn();
   const router = useRouter();
+  const { startOAuthFlow: startGoogleOAuth } = useOAuth({
+    strategy: "oauth_google",
+  });
+  const { startOAuthFlow: startAppleOAuth } = useOAuth({
+    strategy: "oauth_apple",
+  });
 
-  const [emailAddress, setEmailAddress] = useState("");
-  const [password, setPassword] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
+  const [loading, setLoading] = useState<"google" | "apple" | null>(null);
 
-  const onSignInPress = async () => {
-    if (!isLoaded) return;
+  const handleOAuth = async (
+    provider: "google" | "apple",
+    startFlow: typeof startGoogleOAuth
+  ) => {
+    if (loading) return;
+    setLoading(provider);
 
-    setLoading(true);
-    setErrorMessage("");
     try {
-      const signInAttempt = await signIn.create({
-        identifier: emailAddress,
-        password,
-      });
+      const { createdSessionId, setActive } = await startFlow();
 
-      if (signInAttempt.status === "complete") {
-        await setActive({ session: signInAttempt.createdSessionId });
+      if (createdSessionId && setActive) {
+        await setActive({ session: createdSessionId });
         router.replace("/(tabs)");
-      } else {
-        setErrorMessage("Sign in failed. Please try again.");
       }
     } catch (err: any) {
-      const errorCode = err.errors?.[0]?.code;
-      let message = "Sign in failed";
-
-      if (errorCode === "form_identifier_not_found") {
-        message = "No account found with this email.";
-      } else if (errorCode === "form_password_incorrect") {
-        message = "Incorrect password. Please try again.";
-      } else if (err.errors?.[0]?.message) {
-        message = err.errors[0].message;
-      }
-
-      setErrorMessage(message);
+      console.error(\`\${provider} OAuth error:\`, err);
+      const message =
+        err?.errors?.[0]?.message || "Sign in failed. Please try again.";
       Alert.alert("Sign In Failed", message);
     } finally {
-      setLoading(false);
+      setLoading(null);
     }
   };
 
   return (
-    <KeyboardAvoidingView
-      behavior={Platform.OS === "ios" ? "padding" : "height"}
-      style={styles.container}
-    >
+    <SafeAreaView style={styles.container}>
       <View style={styles.content}>
-        <Text style={styles.title}>Welcome Back</Text>
-        <Text style={styles.subtitle}>Sign in to continue</Text>
-
-        {errorMessage ? (
-          <View style={styles.errorContainer}>
-            <Text style={styles.errorText}>{errorMessage}</Text>
+        <View style={styles.branding}>
+          <View style={styles.logoContainer}>
+            <CheckSquare size={40} color="#1F2937" strokeWidth={2} />
           </View>
-        ) : null}
-
-        <TextInput
-          style={styles.input}
-          placeholder="Email"
-          placeholderTextColor="#999"
-          value={emailAddress}
-          onChangeText={setEmailAddress}
-          autoCapitalize="none"
-          keyboardType="email-address"
-        />
-
-        <TextInput
-          style={styles.input}
-          placeholder="Password"
-          placeholderTextColor="#999"
-          value={password}
-          onChangeText={setPassword}
-          secureTextEntry
-        />
+          <Text style={styles.title}>TaskSync</Text>
+          <Text style={styles.subtitle}>
+            Your tasks, synced across all devices
+          </Text>
+        </View>
 
-        <TouchableOpacity
-          style={[styles.button, loading && styles.buttonDisabled]}
-          onPress={onSignInPress}
-          disabled={loading}
-        >
-          {loading ? (
-            <ActivityIndicator color="#fff" />
-          ) : (
-            <Text style={styles.buttonText}>Sign In</Text>
-          )}
-        </TouchableOpacity>
+        <View style={styles.buttons}>
+          <TouchableOpacity
+            style={[
+              styles.button,
+              styles.googleButton,
+              loading === "google" && styles.buttonLoading,
+            ]}
+            onPress={() => handleOAuth("google", startGoogleOAuth)}
+            activeOpacity={0.7}
+            disabled={loading !== null}
+          >
+            {loading === "google" ? (
+              <ActivityIndicator size={20} color="#1F2937" />
+            ) : (
+              <>
+                <Text style={styles.googleIcon}>G</Text>
+                <Text style={styles.googleText}>Continue with Google</Text>
+              </>
+            )}
+          </TouchableOpacity>
 
-        <View style={styles.footer}>
-          <Text style={styles.footerText}>Don't have an account? </Text>
-          <Link href="/(auth)/sign-up" asChild>
-            <TouchableOpacity>
-              <Text style={styles.link}>Sign Up</Text>
-            </TouchableOpacity>
-          </Link>
+          <TouchableOpacity
+            style={[
+              styles.button,
+              styles.appleButton,
+              loading === "apple" && styles.buttonLoading,
+            ]}
+            onPress={() => handleOAuth("apple", startAppleOAuth)}
+            activeOpacity={0.7}
+            disabled={loading !== null}
+          >
+            {loading === "apple" ? (
+              <ActivityIndicator size={20} color="#FFFFFF" />
+            ) : (
+              <>
+                <Text style={styles.appleIcon}>\u{F8FF}</Text>
+                <Text style={styles.appleText}>Continue with Apple</Text>
+              </>
+            )}
+          </TouchableOpacity>
         </View>
+
+        <Text style={styles.terms}>
+          By continuing, you agree to our Terms of Service and Privacy Policy
+        </Text>
       </View>
-    </KeyboardAvoidingView>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#f5f5f5",
+    backgroundColor: "#FFFFFF",
   },
   content: {
     flex: 1,
     justifyContent: "center",
-    paddingHorizontal: 20,
+    paddingHorizontal: 24,
+  },
+  branding: {
+    alignItems: "center",
+    marginBottom: 64,
+  },
+  logoContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 20,
+    backgroundColor: "#F3F4F6",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 24,
   },
   title: {
     fontSize: 32,
-    fontWeight: "bold",
-    color: "#333",
+    fontWeight: "700",
+    color: "#1F2937",
     marginBottom: 8,
-    textAlign: "center",
   },
   subtitle: {
     fontSize: 16,
-    color: "#666",
-    marginBottom: 40,
+    color: "#6B7280",
     textAlign: "center",
+    lineHeight: 24,
   },
-  input: {
-    backgroundColor: "#fff",
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    fontSize: 16,
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: "#e0e0e0",
+  buttons: {
+    gap: 12,
   },
   button: {
-    backgroundColor: "#007AFF",
-    borderRadius: 8,
-    paddingVertical: 14,
+    flexDirection: "row",
     alignItems: "center",
-    marginTop: 8,
+    justifyContent: "center",
+    height: 56,
+    borderRadius: 12,
+    paddingHorizontal: 24,
   },
-  buttonDisabled: {
+  buttonLoading: {
     opacity: 0.7,
   },
-  buttonText: {
-    color: "#fff",
-    fontSize: 18,
+  googleButton: {
+    backgroundColor: "#FFFFFF",
+    borderWidth: 1.5,
+    borderColor: "#E5E7EB",
+  },
+  googleIcon: {
+    fontSize: 20,
+    fontWeight: "700",
+    color: "#4285F4",
+    marginRight: 12,
+  },
+  googleText: {
+    fontSize: 16,
     fontWeight: "600",
+    color: "#1F2937",
   },
-  footer: {
-    flexDirection: "row",
-    justifyContent: "center",
-    marginTop: 24,
+  appleButton: {
+    backgroundColor: "#000000",
   },
-  footerText: {
-    color: "#666",
-    fontSize: 14,
+  appleIcon: {
+    fontSize: 20,
+    color: "#FFFFFF",
+    marginRight: 12,
   },
-  link: {
-    color: "#007AFF",
-    fontSize: 14,
+  appleText: {
+    fontSize: 16,
     fontWeight: "600",
+    color: "#FFFFFF",
   },
-  errorContainer: {
-    backgroundColor: "#ffebee",
-    borderRadius: 8,
-    padding: 12,
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: "#ef5350",
-  },
-  errorText: {
-    color: "#c62828",
-    fontSize: 14,
+  terms: {
+    fontSize: 13,
+    color: "#9CA3AF",
     textAlign: "center",
+    marginTop: 32,
+    lineHeight: 20,
+    paddingHorizontal: 16,
   },
 });
 `;

package/dist/templates/app/tabsLayout.js

@@ -27,10 +27,9 @@ export default function TabLayout() {
           borderTopWidth: 0,
           elevation: 0,
           shadowOpacity: 0,
-          height: Platform.OS === "ios" ? 90 : 70,
-          paddingBottom: Platform.OS === "ios" ? 30 : 12,
+          height: Platform.OS === "ios" ? 88 : 72,
+          paddingBottom: Platform.OS === "ios" ? 32 : 12,
           paddingTop: 12,
-          borderTopColor: "transparent",
         },
         tabBarActiveTintColor: "#1F2937",
         tabBarInactiveTintColor: "#9CA3AF",
@@ -38,10 +37,6 @@ export default function TabLayout() {
           fontSize: 13,
           fontWeight: "500",
           marginTop: 4,
-          marginBottom: Platform.OS === "ios" ? 0 : 2,
-        },
-        tabBarIconStyle: {
-          marginBottom: Platform.OS === "ios" ? 2 : 0,
         },
       }}
     >

package/dist/templates/app/todosScreen.js

@@ -3,13 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.todosScreenTemplate = todosScreenTemplate;
 function todosScreenTemplate() {
     return `import React, { useState } from "react";
-import {
-  View,
-  Text,
-  ScrollView,
-  StyleSheet,
-  StatusBar,
-} from "react-native";
+import { View, Text, ScrollView, StyleSheet, StatusBar } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { AddTodoForm } from "@/components/AddTodoForm";
 import { TodoItem } from "@/components/TodoItem";
@@ -130,9 +124,9 @@ const styles = StyleSheet.create({
     backgroundColor: "#FFFFFF",
   },
   header: {
-    paddingHorizontal: 24,
-    paddingTop: 20,
-    paddingBottom: 24,
+    paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 16,
   },
   title: {
     fontSize: 28,
@@ -147,10 +141,10 @@ const styles = StyleSheet.create({
   },
   todosContainer: {
     flex: 1,
-    paddingHorizontal: 24,
+    paddingHorizontal: 16,
   },
   todosContent: {
-    paddingBottom: 100,
+    paddingBottom: 96,
     flexGrow: 1,
   },
 });

package/dist/templates/components/addTodoForm.js

@@ -37,11 +37,12 @@ export function AddTodoForm({ onAddTodo }: AddTodoFormProps) {
           style={[styles.addButton, !text.trim() && styles.addButtonDisabled]}
           onPress={handleSubmit}
           disabled={!text.trim()}
+          activeOpacity={0.7}
         >
           <Plus
             size={20}
             color={text.trim() ? "#FFFFFF" : "#9CA3AF"}
-            strokeWidth={2}
+            strokeWidth={2.5}
           />
         </TouchableOpacity>
       </View>
@@ -51,8 +52,8 @@ export function AddTodoForm({ onAddTodo }: AddTodoFormProps) {
 
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 24,
-    marginBottom: 24,
+    paddingHorizontal: 16,
+    marginBottom: 16,
   },
   inputContainer: {
     flexDirection: "row",
@@ -61,21 +62,22 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     borderWidth: 1,
     borderColor: "#E5E7EB",
-    paddingHorizontal: 16,
-    paddingVertical: 4,
+    paddingLeft: 16,
+    paddingRight: 8,
+    minHeight: 56,
   },
   input: {
     flex: 1,
     fontSize: 16,
     color: "#1F2937",
-    paddingVertical: 12,
+    paddingVertical: 16,
     paddingRight: 12,
   },
   addButton: {
     backgroundColor: "#1F2937",
-    borderRadius: 8,
-    width: 32,
-    height: 32,
+    borderRadius: 10,
+    width: 40,
+    height: 40,
     alignItems: "center",
     justifyContent: "center",
   },

package/dist/templates/components/emptyState.js

@@ -17,33 +17,30 @@ interface EmptyStateProps {
 }
 
 export function EmptyState({ filter }: EmptyStateProps) {
-  const getEmptyStateContent = () => {
+  const getContent = () => {
     switch (filter) {
       case "active":
         return {
           icon: <CheckCircle size={48} color="#D1D5DB" strokeWidth={1.5} />,
           title: "All caught up!",
-          description:
-            "You have no active tasks. Time to add some new ones or take a well-deserved break.",
+          description: "No active tasks. Add some new ones or take a break.",
         };
       case "completed":
         return {
           icon: <Circle size={48} color="#D1D5DB" strokeWidth={1.5} />,
           title: "No completed tasks",
-          description:
-            "Tasks you complete will appear here. Start checking off some items!",
+          description: "Tasks you complete will appear here.",
         };
       default:
         return {
           icon: <ListTodo size={48} color="#D1D5DB" strokeWidth={1.5} />,
           title: "No tasks yet",
-          description:
-            "Add your first task above to get started with organizing your day.",
+          description: "Add your first task above to get started.",
         };
     }
   };
 
-  const content = getEmptyStateContent();
+  const content = getContent();
 
   return (
     <View style={styles.container}>
@@ -59,7 +56,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
-    paddingHorizontal: 40,
+    paddingHorizontal: 48,
     paddingVertical: 80,
   },
   iconContainer: {

package/dist/templates/components/filterTabs.js

@@ -55,11 +55,10 @@ export function FilterTabs({ filter, onFilterChange, counts }: FilterTabsProps)
 const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
-    paddingHorizontal: 24,
     marginBottom: 16,
-    backgroundColor: "#F8F9FA",
+    backgroundColor: "#F3F4F6",
     borderRadius: 12,
-    marginHorizontal: 24,
+    marginHorizontal: 16,
     padding: 4,
   },
   tab: {
@@ -70,37 +69,37 @@ const styles = StyleSheet.create({
     paddingVertical: 12,
     paddingHorizontal: 8,
     borderRadius: 8,
-    minHeight: 40,
+    minHeight: 48,
   },
   tabActive: {
     backgroundColor: "#FFFFFF",
     shadowColor: "#000000",
     shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 1,
+    shadowOpacity: 0.06,
+    shadowRadius: 3,
+    elevation: 2,
   },
   tabText: {
-    fontSize: 13,
+    fontSize: 14,
     fontWeight: "500",
     color: "#6B7280",
     marginRight: 4,
-    flexShrink: 0,
   },
   tabTextActive: {
     color: "#1F2937",
+    fontWeight: "600",
   },
   tabCount: {
-    fontSize: 11,
+    fontSize: 12,
     fontWeight: "600",
     color: "#9CA3AF",
     backgroundColor: "#E5E7EB",
     borderRadius: 10,
-    paddingHorizontal: 5,
-    paddingVertical: 1,
-    minWidth: 18,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    minWidth: 20,
     textAlign: "center",
-    flexShrink: 0,
+    overflow: "hidden",
   },
   tabCountActive: {
     color: "#1F2937",

package/dist/templates/components/todoItem.js

@@ -18,7 +18,7 @@ export function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
   return (
     <View style={styles.container}>
       <TouchableOpacity
-        style={styles.checkboxContainer}
+        style={styles.checkboxHitArea}
         onPress={() => onToggle(todo._id)}
         activeOpacity={0.7}
       >
@@ -26,7 +26,7 @@ export function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
           style={[styles.checkbox, todo.completed && styles.checkboxCompleted]}
         >
           {todo.completed && (
-            <Check size={16} color="#FFFFFF" strokeWidth={2.5} />
+            <Check size={14} color="#FFFFFF" strokeWidth={3} />
           )}
         </View>
       </TouchableOpacity>
@@ -40,7 +40,7 @@ export function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
       </View>
 
       <TouchableOpacity
-        style={styles.deleteButton}
+        style={styles.deleteHitArea}
         onPress={() => onDelete(todo._id)}
         activeOpacity={0.7}
       >
@@ -56,19 +56,24 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     borderWidth: 1,
     borderColor: "#E5E7EB",
-    paddingHorizontal: 16,
-    paddingVertical: 16,
+    paddingLeft: 4,
+    paddingRight: 4,
+    paddingVertical: 4,
     marginBottom: 8,
     flexDirection: "row",
     alignItems: "center",
+    minHeight: 56,
   },
-  checkboxContainer: {
-    marginRight: 12,
+  checkboxHitArea: {
+    width: 48,
+    height: 48,
+    alignItems: "center",
+    justifyContent: "center",
   },
   checkbox: {
-    width: 20,
-    height: 20,
-    borderRadius: 4,
+    width: 24,
+    height: 24,
+    borderRadius: 6,
     borderWidth: 2,
     borderColor: "#D1D5DB",
     alignItems: "center",
@@ -80,7 +85,7 @@ const styles = StyleSheet.create({
   },
   content: {
     flex: 1,
-    marginRight: 12,
+    paddingVertical: 12,
   },
   text: {
     fontSize: 16,
@@ -91,8 +96,11 @@ const styles = StyleSheet.create({
     color: "#9CA3AF",
     textDecorationLine: "line-through",
   },
-  deleteButton: {
-    padding: 4,
+  deleteHitArea: {
+    width: 48,
+    height: 48,
+    alignItems: "center",
+    justifyContent: "center",
   },
 });
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-100x-mobile",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Scaffold a full-stack mobile app with Expo + Convex + Clerk in seconds",
   "main": "dist/cli.js",
   "bin": {