create-100x-mobile 0.5.3 → 0.6.0

package/dist/commands/new/steps.js

@@ -249,7 +249,10 @@ function buildExpoInstallPackages(backend, instantAuthMode = "clerk") {
                 "@react-native-async-storage/async-storage",
                 "@react-native-community/netinfo",
             ];
-    return [...commonExpoPackages, ...backendExpoPackages];
+    const cloudflareExpoPackages = (0, scaffold_1.isCloudflareInstantAuthMode)(instantAuthMode)
+        ? ["expo-document-picker"]
+        : [];
+    return [...commonExpoPackages, ...backendExpoPackages, ...cloudflareExpoPackages];
 }
 async function resolveExpoDependencies(projectDir, backend, instantAuthMode = "clerk") {
     const expoPackages = buildExpoInstallPackages(backend, instantAuthMode);

package/dist/commands/new.js

@@ -51,6 +51,8 @@ const tabsLayout_3 = require("../templates/instant/magic/tabsLayout");
 // Cloudflare templates
 const alchemyRun_1 = require("../templates/cloudflare/alchemyRun");
 const cloudflareStorage_1 = require("../templates/cloudflare/cloudflareStorage");
+const cloudflareTabsLayout_1 = require("../templates/cloudflare/cloudflareTabsLayout");
+const filesScreen_1 = require("../templates/cloudflare/filesScreen");
 const instantCloudflareLib_1 = require("../templates/cloudflare/instantCloudflareLib");
 const worker_1 = require("../templates/cloudflare/worker");
 const workerMigration_1 = require("../templates/cloudflare/workerMigration");
@@ -62,6 +64,8 @@ const filterTabs_1 = require("../templates/components/filterTabs");
 const todoItem_1 = require("../templates/components/todoItem");
 // Hook templates
 const useFrameworkReady_1 = require("../templates/hooks/useFrameworkReady");
+// AGENTS.md template
+const agentsMd_1 = require("../templates/config/agentsMd");
 function buildTemplateFiles(projectName, expoVersion, backend, instantAuthMode = "clerk") {
     if (backend === "instantdb") {
         const cloudflareFiles = (0, scaffold_1.isCloudflareInstantAuthMode)(instantAuthMode)
@@ -95,12 +99,24 @@ function buildTemplateFiles(projectName, expoVersion, backend, instantAuthMode =
                     "README.md",
                     (0, readme_1.readmeTemplate)(projectName, backend, instantAuthMode),
                 ],
+                [
+                    "AGENTS.md",
+                    (0, agentsMd_1.agentsMdTemplate)(projectName, backend, instantAuthMode),
+                ],
                 // Instant app
                 ["app/_layout.tsx", (0, rootLayout_3.magicRootLayoutTemplate)()],
                 ["app/+not-found.tsx", (0, notFound_1.notFoundTemplate)()],
                 ["app/(auth)/_layout.tsx", (0, authLayout_2.magicAuthLayoutTemplate)()],
                 ["app/(auth)/sign-in.tsx", (0, signIn_2.magicSignInTemplate)()],
-                ["app/(tabs)/_layout.tsx", (0, tabsLayout_3.magicTabsLayoutTemplate)()],
+                [
+                    "app/(tabs)/_layout.tsx",
+                    (0, scaffold_1.isCloudflareInstantAuthMode)(instantAuthMode)
+                        ? (0, cloudflareTabsLayout_1.cloudflareTabsLayoutTemplate)()
+                        : (0, tabsLayout_3.magicTabsLayoutTemplate)(),
+                ],
+                ...((0, scaffold_1.isCloudflareInstantAuthMode)(instantAuthMode)
+                    ? [["app/(tabs)/files.tsx", (0, filesScreen_1.filesScreenTemplate)()]]
+                    : []),
                 ["app/(tabs)/index.tsx", (0, todosScreen_2.instantTodosScreenTemplate)()],
                 [
                     "app/(tabs)/settings.tsx",
@@ -135,6 +151,10 @@ function buildTemplateFiles(projectName, expoVersion, backend, instantAuthMode =
                     "README.md",
                     (0, readme_1.readmeTemplate)(projectName, backend, instantAuthMode),
                 ],
+                [
+                    "AGENTS.md",
+                    (0, agentsMd_1.agentsMdTemplate)(projectName, backend, instantAuthMode),
+                ],
                 // Instant app
                 ["app/_layout.tsx", (0, rootLayout_2.instantRootLayoutTemplate)()],
                 ["app/+not-found.tsx", (0, notFound_1.notFoundTemplate)()],
@@ -161,6 +181,7 @@ function buildTemplateFiles(projectName, expoVersion, backend, instantAuthMode =
         [".prettierrc", (0, prettierrc_1.prettierrcTemplate)()],
         ["eas.json", (0, easJson_1.easJsonTemplate)()],
         ["README.md", (0, readme_1.readmeTemplate)(projectName, backend)],
+        ["AGENTS.md", (0, agentsMd_1.agentsMdTemplate)(projectName, backend)],
         // Convex
         ["convex/schema.ts", (0, schema_1.schemaTemplate)()],
         ["convex/todos.ts", (0, todos_1.todosTemplate)()],

package/dist/templates/cloudflare/cloudflareStorage.js

@@ -104,5 +104,22 @@ export async function syncCloudflareUploadToInstant(
   requireStorageWorkerUrl();
   return input.upload.id;
 }
+
+export async function deleteCloudflareObject(
+  uploadId: string,
+): Promise<void> {
+  const workerUrl = requireStorageWorkerUrl();
+  const token = await requireInstantRefreshToken();
+  const response = await fetch(\\\`\\\${workerUrl}/uploads/\\\${uploadId}\\\`, {
+    method: "DELETE",
+    headers: {
+      authorization: \\\`Bearer \\\${token}\\\`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(await readErrorResponse(response));
+  }
+}
 `;
 }

package/dist/templates/cloudflare/cloudflareTabsLayout.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cloudflareTabsLayoutTemplate = cloudflareTabsLayoutTemplate;
+function cloudflareTabsLayoutTemplate() {
+    return `import { Tabs, Redirect } from "expo-router";
+import { FolderOpen, SquareCheck as CheckSquare, Settings } from "lucide-react-native";
+import { Platform, StyleSheet, Text, View } from "react-native";
+import { instantDb } from "@/lib/instant";
+
+function SetupRequired() {
+  return (
+    <View style={styles.setupContainer}>
+      <View style={styles.setupCard}>
+        <Text style={styles.setupTitle}>Setup Required</Text>
+        <Text style={styles.setupText}>
+          Add EXPO_PUBLIC_INSTANT_APP_ID to your .env.local file.
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+function AuthenticatedTabsLayout({ db }: { db: NonNullable<typeof instantDb> }) {
+  const { isLoading, user, error } = db.useAuth();
+  if (isLoading || error) return null;
+  if (!user) return <Redirect href="/(auth)/sign-in" />;
+
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: {
+          backgroundColor: "#FFFFFF",
+          borderTopWidth: 0,
+          elevation: 0,
+          shadowOpacity: 0,
+          height: Platform.OS === "ios" ? 88 : 72,
+          paddingBottom: Platform.OS === "ios" ? 32 : 12,
+          paddingTop: 12,
+        },
+        tabBarActiveTintColor: "#1F2937",
+        tabBarInactiveTintColor: "#9CA3AF",
+        tabBarLabelStyle: { fontSize: 13, fontWeight: "500", marginTop: 4 },
+      }}
+    >
+      <Tabs.Screen name="index" options={{ title: "Todos", tabBarIcon: ({ size, color }) => <CheckSquare size={size} color={color} strokeWidth={2} /> }} />
+      <Tabs.Screen name="files" options={{ title: "Files", tabBarIcon: ({ size, color }) => <FolderOpen size={size} color={color} strokeWidth={2} /> }} />
+      <Tabs.Screen name="settings" options={{ title: "Settings", tabBarIcon: ({ size, color }) => <Settings size={size} color={color} strokeWidth={2} /> }} />
+    </Tabs>
+  );
+}
+
+export default function TabLayout() {
+  if (!instantDb) return <SetupRequired />;
+  return <AuthenticatedTabsLayout db={instantDb} />;
+}
+
+const styles = StyleSheet.create({
+  setupContainer: { flex: 1, backgroundColor: "#f5f5f5", justifyContent: "center", alignItems: "center", padding: 20 },
+  setupCard: { backgroundColor: "#fff", borderRadius: 12, padding: 24, maxWidth: 420, width: "100%", shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 8, elevation: 3 },
+  setupTitle: { fontSize: 24, fontWeight: "700", color: "#333", marginBottom: 16, textAlign: "center" },
+  setupText: { fontSize: 16, color: "#666", lineHeight: 22, textAlign: "center" },
+});
+`;
+}

package/dist/templates/cloudflare/filesScreen.js

@@ -0,0 +1,499 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filesScreenTemplate = filesScreenTemplate;
+function filesScreenTemplate() {
+    return `import React, { useCallback, useState } from "react";
+import {
+  ActivityIndicator,
+  Alert,
+  FlatList,
+  Linking,
+  Platform,
+  Pressable,
+  StatusBar,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import {
+  Download,
+  File,
+  FileImage,
+  FileText,
+  Film,
+  Music,
+  Plus,
+  Trash2,
+  Upload,
+} from "lucide-react-native";
+import * as DocumentPicker from "expo-document-picker";
+import {
+  instantDb,
+  type InstantCloudflareObject,
+} from "@/lib/instant";
+import {
+  isCloudflareStorageConfigured,
+  uploadCloudflareObject,
+  deleteCloudflareObject,
+} from "@/lib/cloudflareStorage";
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.min(
+    Math.floor(Math.log(bytes) / Math.log(1024)),
+    units.length - 1,
+  );
+  const value = bytes / Math.pow(1024, i);
+  return i === 0
+    ? bytes + " B"
+    : value.toFixed(value < 10 ? 1 : 0) + " " + units[i];
+}
+
+function formatDate(timestamp: number): string {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60_000);
+  if (diffMins < 1) return "Just now";
+  if (diffMins < 60) return diffMins + "m ago";
+  const diffHrs = Math.floor(diffMins / 60);
+  if (diffHrs < 24) return diffHrs + "h ago";
+  const diffDays = Math.floor(diffHrs / 24);
+  if (diffDays < 7) return diffDays + "d ago";
+  return date.toLocaleDateString();
+}
+
+function FileIcon({
+  contentType,
+  size,
+  color,
+}: {
+  contentType: string;
+  size: number;
+  color: string;
+}) {
+  if (contentType.startsWith("image/"))
+    return <FileImage size={size} color={color} />;
+  if (contentType.startsWith("video/"))
+    return <Film size={size} color={color} />;
+  if (contentType.startsWith("audio/"))
+    return <Music size={size} color={color} />;
+  if (
+    contentType === "application/pdf" ||
+    contentType.startsWith("text/")
+  )
+    return <FileText size={size} color={color} />;
+  return <File size={size} color={color} />;
+}
+
+function SetupRequired({ message }: { message: string }) {
+  return (
+    <View style={styles.setupContainer}>
+      <Text style={styles.setupTitle}>Setup Required</Text>
+      <Text style={styles.setupText}>{message}</Text>
+    </View>
+  );
+}
+
+function FilesContent({
+  db,
+}: {
+  db: NonNullable<typeof instantDb>;
+}) {
+  const [isUploading, setIsUploading] = useState(false);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  const { isLoading, error, data } = db.useQuery({
+    cloudflareObjects: {
+      $: {
+        order: { createdAt: "desc" },
+      },
+    },
+  });
+
+  const files = data?.cloudflareObjects ?? [];
+  const totalSize = files.reduce((sum, f) => sum + (f.size ?? 0), 0);
+
+  const pickAndUpload = useCallback(async () => {
+    try {
+      const result = await DocumentPicker.getDocumentAsync({
+        copyToCacheDirectory: true,
+        multiple: false,
+      });
+
+      if (result.canceled || !result.assets?.length) return;
+
+      const asset = result.assets[0];
+      setIsUploading(true);
+
+      const response = await fetch(asset.uri);
+      const blob = await response.blob();
+
+      await uploadCloudflareObject({
+        body: blob,
+        contentType: asset.mimeType || "application/octet-stream",
+        fileName: asset.name || "untitled",
+      });
+    } catch (uploadError) {
+      console.error("Upload failed:", uploadError);
+      Alert.alert(
+        "Upload Failed",
+        uploadError instanceof Error
+          ? uploadError.message
+          : "Could not upload file.",
+      );
+    } finally {
+      setIsUploading(false);
+    }
+  }, []);
+
+  const handleDownload = useCallback(
+    async (file: InstantCloudflareObject) => {
+      try {
+        const workerUrl = process.env.EXPO_PUBLIC_STORAGE_WORKER_URL;
+        if (!workerUrl) {
+          Alert.alert("Error", "Storage worker URL is not configured.");
+          return;
+        }
+        const downloadUrl =
+          workerUrl + "/uploads/" + file.uploadId + "/content";
+        await Linking.openURL(downloadUrl);
+      } catch (downloadError) {
+        console.error("Download failed:", downloadError);
+        Alert.alert("Error", "Could not open file.");
+      }
+    },
+    [],
+  );
+
+  const handleDelete = useCallback(
+    async (file: InstantCloudflareObject) => {
+      const performDelete = async () => {
+        setDeletingId(file.uploadId);
+        try {
+          await deleteCloudflareObject(file.uploadId);
+        } catch (deleteError) {
+          console.error("Delete failed:", deleteError);
+          Alert.alert(
+            "Delete Failed",
+            deleteError instanceof Error
+              ? deleteError.message
+              : "Could not delete file.",
+          );
+        } finally {
+          setDeletingId(null);
+        }
+      };
+
+      if (Platform.OS === "web") {
+        const confirmed = window.confirm(
+          "Delete " + file.fileName + "?",
+        );
+        if (confirmed) await performDelete();
+        return;
+      }
+
+      Alert.alert(
+        "Delete File",
+        "Are you sure you want to delete " + file.fileName + "?",
+        [
+          { text: "Cancel", style: "cancel" },
+          {
+            text: "Delete",
+            style: "destructive",
+            onPress: performDelete,
+          },
+        ],
+      );
+    },
+    [],
+  );
+
+  if (isLoading) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color="#4B5563" />
+        <Text style={styles.loadingText}>Loading files...</Text>
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.loadingContainer}>
+        <Text style={styles.errorText}>Error: {error.message}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
+
+      <View style={styles.header}>
+        <Text style={styles.title}>Files</Text>
+        <Text style={styles.subtitle}>
+          {files.length} {files.length === 1 ? "file" : "files"}
+          {files.length > 0 ? " · " + formatBytes(totalSize) : ""}
+        </Text>
+      </View>
+
+      <View style={styles.uploadRow}>
+        <Pressable
+          style={[
+            styles.uploadButton,
+            isUploading && styles.uploadButtonDisabled,
+          ]}
+          onPress={pickAndUpload}
+          disabled={isUploading}
+        >
+          {isUploading ? (
+            <ActivityIndicator size={18} color="#FFFFFF" />
+          ) : (
+            <Upload size={18} color="#FFFFFF" />
+          )}
+          <Text style={styles.uploadButtonText}>
+            {isUploading ? "Uploading..." : "Upload File"}
+          </Text>
+        </Pressable>
+      </View>
+
+      <FlatList
+        data={files}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={styles.listContent}
+        ListEmptyComponent={
+          <View style={styles.emptyState}>
+            <View style={styles.emptyIconWrap}>
+              <Plus size={32} color="#9CA3AF" />
+            </View>
+            <Text style={styles.emptyTitle}>No files yet</Text>
+            <Text style={styles.emptySubtitle}>
+              Tap "Upload File" to add your first file.
+            </Text>
+          </View>
+        }
+        renderItem={({ item }) => {
+          const isDeleting = deletingId === item.uploadId;
+          return (
+            <View style={styles.fileRow}>
+              <View style={styles.fileIconWrap}>
+                <FileIcon
+                  contentType={item.contentType}
+                  size={22}
+                  color="#6B7280"
+                />
+              </View>
+
+              <View style={styles.fileInfo}>
+                <Text
+                  style={styles.fileName}
+                  numberOfLines={1}
+                  ellipsizeMode="middle"
+                >
+                  {item.fileName}
+                </Text>
+                <Text style={styles.fileMeta}>
+                  {formatBytes(item.size)} ·{" "}
+                  {formatDate(item.createdAt)}
+                </Text>
+              </View>
+
+              <Pressable
+                style={styles.actionButton}
+                onPress={() => handleDownload(item)}
+              >
+                <Download size={18} color="#6B7280" />
+              </Pressable>
+
+              <Pressable
+                style={styles.actionButton}
+                onPress={() => handleDelete(item)}
+                disabled={isDeleting}
+              >
+                {isDeleting ? (
+                  <ActivityIndicator size={16} color="#9CA3AF" />
+                ) : (
+                  <Trash2 size={18} color="#9CA3AF" />
+                )}
+              </Pressable>
+            </View>
+          );
+        }}
+      />
+    </SafeAreaView>
+  );
+}
+
+export default function FilesScreen() {
+  if (!instantDb) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <SetupRequired message="Add EXPO_PUBLIC_INSTANT_APP_ID to your .env.local file." />
+      </SafeAreaView>
+    );
+  }
+
+  if (!isCloudflareStorageConfigured()) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <SetupRequired message="Deploy Cloudflare storage and add EXPO_PUBLIC_STORAGE_WORKER_URL to .env.local." />
+      </SafeAreaView>
+    );
+  }
+
+  return <FilesContent db={instantDb} />;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#FFFFFF",
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 12,
+    paddingHorizontal: 24,
+  },
+  loadingText: {
+    color: "#4B5563",
+    fontSize: 16,
+  },
+  errorText: {
+    color: "#DC2626",
+    fontSize: 15,
+    textAlign: "center",
+  },
+  header: {
+    paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 16,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "700",
+    color: "#1F2937",
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: "#6B7280",
+    fontWeight: "500",
+  },
+  uploadRow: {
+    paddingHorizontal: 16,
+    paddingBottom: 14,
+  },
+  uploadButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    backgroundColor: "#1F2937",
+    borderRadius: 12,
+    paddingVertical: 14,
+  },
+  uploadButtonDisabled: {
+    opacity: 0.6,
+  },
+  uploadButtonText: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  listContent: {
+    paddingHorizontal: 16,
+    paddingBottom: 96,
+    flexGrow: 1,
+  },
+  fileRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: 64,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    marginBottom: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    backgroundColor: "#FFFFFF",
+  },
+  fileIconWrap: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    backgroundColor: "#F3F4F6",
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 12,
+  },
+  fileInfo: {
+    flex: 1,
+    marginRight: 4,
+  },
+  fileName: {
+    fontSize: 15,
+    fontWeight: "500",
+    color: "#1F2937",
+    marginBottom: 2,
+  },
+  fileMeta: {
+    fontSize: 13,
+    color: "#9CA3AF",
+  },
+  actionButton: {
+    width: 38,
+    height: 38,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  setupContainer: {
+    flex: 1,
+    justifyContent: "center",
+    paddingHorizontal: 24,
+  },
+  setupTitle: {
+    fontSize: 24,
+    fontWeight: "700",
+    color: "#111827",
+    marginBottom: 12,
+    textAlign: "center",
+  },
+  setupText: {
+    fontSize: 15,
+    color: "#4B5563",
+    textAlign: "center",
+    lineHeight: 22,
+  },
+  emptyState: {
+    marginTop: 64,
+    alignItems: "center",
+  },
+  emptyIconWrap: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: "#F3F4F6",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 16,
+  },
+  emptyTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#1F2937",
+  },
+  emptySubtitle: {
+    marginTop: 8,
+    color: "#6B7280",
+    fontSize: 14,
+    textAlign: "center",
+  },
+});
+`;
+}

package/dist/templates/config/agentsMd.js

@@ -0,0 +1,406 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.agentsMdTemplate = agentsMdTemplate;
+function agentsMdTemplate(projectName, backend, instantAuthMode = "clerk") {
+    if (backend === "instantdb") {
+        if (instantAuthMode === "magic-code-cloudflare") {
+            return magicCodeCloudflareAgentsMd(projectName);
+        }
+        if (instantAuthMode === "magic-code") {
+            return magicCodeAgentsMd(projectName);
+        }
+        return instantClerkAgentsMd(projectName);
+    }
+    return convexClerkAgentsMd(projectName);
+}
+function convexClerkAgentsMd(projectName) {
+    return `# AGENTS.md — ${projectName}
+
+> AI agent context file. This project was scaffolded with \`create-100x-mobile\`.
+
+## Tech Stack
+
+| Layer | Technology |
+|-------|-----------|
+| Framework | Expo (React Native) with Expo Router (file-based routing) |
+| Backend | Convex — realtime serverless backend |
+| Auth | Clerk — OAuth (Google, Apple), session management |
+| Language | TypeScript (strict) |
+| Styling | React Native StyleSheet (no Tailwind) |
+
+## Project Structure
+
+\`\`\`
+├── app/
+│   ├── _layout.tsx              # Root layout with Clerk + Convex providers
+│   ├── +not-found.tsx           # 404 screen
+│   ├── (auth)/
+│   │   ├── _layout.tsx          # Auth guard layout
+│   │   └── sign-in.tsx          # Sign-in screen (Clerk OAuth)
+│   ├── (tabs)/
+│   │   ├── _layout.tsx          # Tab navigator
+│   │   ├── index.tsx            # Todos screen
+│   │   └── settings.tsx         # Settings screen
+│   └── providers/
+│       └── AuthProvider.tsx     # Clerk + Convex auth bridge
+├── components/                  # Reusable UI components
+├── convex/
+│   ├── schema.ts                # Database schema (todos, users)
+│   ├── todos.ts                 # Todo mutations and queries
+│   ├── users.ts                 # User functions
+│   ├── auth.config.ts           # Clerk JWT issuer config
+│   ├── http.ts                  # HTTP routes
+│   └── tsconfig.json            # Convex-specific tsconfig
+├── hooks/
+│   └── useFrameworkReady.ts     # Expo framework ready hook
+└── assets/                      # Images and static assets
+\`\`\`
+
+## Environment Variables
+
+File: \`.env.local\` (never commit this file)
+
+| Variable | Purpose | Source |
+|----------|---------|--------|
+| \`EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY\` | Clerk public key | Clerk Dashboard → API Keys |
+| \`CLERK_JWT_ISSUER_DOMAIN\` | Clerk JWT issuer domain | Auto-derived from publishable key |
+| \`EXPO_PUBLIC_CONVEX_URL\` | Convex deployment URL | \`bunx convex dev\` output |
+
+## Commands
+
+| Command | Purpose |
+|---------|---------|
+| \`bun install\` | Install dependencies |
+| \`bunx convex dev\` | Start Convex dev server (run in separate terminal) |
+| \`bunx expo start\` | Start Expo dev server |
+| \`bun run lint\` | Run ESLint |
+| \`bun run format\` | Format with Prettier |
+| \`bunx convex deploy\` | Deploy Convex to production |
+| \`bunx eas build --profile development --platform ios\` | Dev build for iOS |
+
+## Key Patterns
+
+### Adding a new database table
+
+1. Add the entity to \`convex/schema.ts\`
+2. Create queries/mutations in \`convex/<tableName>.ts\`
+3. Use \`useQuery()\` and \`useMutation()\` from \`convex/react\` in components
+
+### Auth flow
+
+1. Clerk handles OAuth (Google/Apple) via \`expo-auth-session\`
+2. Clerk session token is forwarded to Convex via \`ConvexProviderWithClerk\`
+3. Convex validates the JWT using the issuer domain in \`auth.config.ts\`
+4. Server functions access the user via \`ctx.auth.getUserIdentity()\`
+
+### Navigation
+
+- File-based routing via Expo Router
+- \`(auth)\` group for unauthenticated screens
+- \`(tabs)\` group for authenticated tab screens
+- Auth guard in \`(tabs)/_layout.tsx\` redirects to sign-in if not authenticated
+
+## Constraints
+
+- Do NOT commit \`.env.local\` — it contains secrets
+- Do NOT modify \`convex/_generated/\` — these files are auto-generated
+- Convex functions must be deterministic; no \`Date.now()\` or \`Math.random()\` in queries
+- All Convex mutations must use \`ctx.db\` methods, not direct database access
+`;
+}
+function instantClerkAgentsMd(projectName) {
+    return `# AGENTS.md — ${projectName}
+
+> AI agent context file. This project was scaffolded with \`create-100x-mobile\`.
+
+## Tech Stack
+
+| Layer | Technology |
+|-------|-----------|
+| Framework | Expo (React Native) with Expo Router (file-based routing) |
+| Backend | InstantDB — client-first realtime database |
+| Auth | Clerk — OAuth, then bridged to InstantDB via client name |
+| Language | TypeScript (strict) |
+| Styling | React Native StyleSheet (no Tailwind) |
+
+## Project Structure
+
+\`\`\`
+├── app/
+│   ├── _layout.tsx              # Root layout with Clerk provider
+│   ├── +not-found.tsx           # 404 screen
+│   ├── (auth)/
+│   │   ├── _layout.tsx          # Auth guard layout
+│   │   └── sign-in.tsx          # Sign-in screen
+│   ├── (tabs)/
+│   │   ├── _layout.tsx          # Tab navigator
+│   │   ├── index.tsx            # Todos screen
+│   │   └── settings.tsx         # Settings screen
+│   └── providers/
+│       └── AuthProvider.tsx     # Clerk + InstantDB bridge
+├── lib/
+│   └── instant.ts               # InstantDB schema and initialization
+├── hooks/
+│   └── useFrameworkReady.ts
+└── assets/
+\`\`\`
+
+## Environment Variables
+
+File: \`.env.local\` (never commit this file)
+
+| Variable | Purpose | Source |
+|----------|---------|--------|
+| \`EXPO_PUBLIC_INSTANT_APP_ID\` | InstantDB app identifier | \`npx instant-cli init-without-files\` |
+| \`EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY\` | Clerk public key | Clerk Dashboard → API Keys |
+| \`EXPO_PUBLIC_INSTANT_CLERK_CLIENT_NAME\` | Clerk client name in Instant auth | Instant Dashboard → Auth tab |
+
+## Commands
+
+| Command | Purpose |
+|---------|---------|
+| \`bun install\` | Install dependencies |
+| \`bunx expo start\` | Start Expo dev server |
+| \`bun run lint\` | Run ESLint |
+| \`bun run format\` | Format with Prettier |
+
+## Key Patterns
+
+### Adding a new entity
+
+1. Add the entity to the schema in \`lib/instant.ts\`:
+   \`\`\`ts
+   myEntity: i.entity({ name: i.string(), createdAt: i.number().indexed() })
+   \`\`\`
+2. Export the type: \`export type MyEntity = InstaQLEntity<typeof schema, "myEntity">\`
+3. Query in components: \`db.useQuery({ myEntity: {} })\`
+4. Write: \`db.transact(db.tx.myEntity[id()].create({ ... }))\`
+
+### Auth flow
+
+1. Clerk authenticates the user (OAuth)
+2. Clerk token is passed to InstantDB as a third-party auth client
+3. InstantDB verifies via the registered Clerk client name
+4. Clerk session customization must include \`email\` and \`email_verified\` claims
+
+## Constraints
+
+- Do NOT commit \`.env.local\`
+- InstantDB schema is defined client-side in \`lib/instant.ts\` — keep it in sync with Instant Dashboard
+- \`id()\` from \`@instantdb/react-native\` generates IDs; never use custom string IDs
+`;
+}
+function magicCodeAgentsMd(projectName) {
+    return `# AGENTS.md — ${projectName}
+
+> AI agent context file. This project was scaffolded with \`create-100x-mobile\`.
+
+## Tech Stack
+
+| Layer | Technology |
+|-------|-----------|
+| Framework | Expo (React Native) with Expo Router (file-based routing) |
+| Backend | InstantDB — client-first realtime database with built-in auth |
+| Auth | InstantDB magic code — email-based one-time code authentication |
+| Language | TypeScript (strict) |
+| Styling | React Native StyleSheet (no Tailwind) |
+
+## Project Structure
+
+\`\`\`
+├── app/
+│   ├── _layout.tsx              # Root layout
+│   ├── +not-found.tsx           # 404 screen
+│   ├── (auth)/
+│   │   ├── _layout.tsx          # Auth guard layout
+│   │   └── sign-in.tsx          # Magic code sign-in (email + code input)
+│   ├── (tabs)/
+│   │   ├── _layout.tsx          # Tab navigator (Todos, Settings)
+│   │   ├── index.tsx            # Todos screen
+│   │   └── settings.tsx         # Settings screen
+├── lib/
+│   └── instant.ts               # InstantDB schema and initialization
+├── hooks/
+│   └── useFrameworkReady.ts
+└── assets/
+\`\`\`
+
+## Environment Variables
+
+File: \`.env.local\` (never commit this file)
+
+| Variable | Purpose | Source |
+|----------|---------|--------|
+| \`EXPO_PUBLIC_INSTANT_APP_ID\` | InstantDB app identifier | \`npx instant-cli init-without-files\` |
+
+## Commands
+
+| Command | Purpose |
+|---------|---------|
+| \`bun install\` | Install dependencies |
+| \`bunx expo start\` | Start Expo dev server |
+| \`bun run lint\` | Run ESLint |
+| \`bun run format\` | Format with Prettier |
+
+## Key Patterns
+
+### Adding a new entity
+
+1. Add to schema in \`lib/instant.ts\`
+2. Export the type
+3. Query: \`db.useQuery({ entityName: {} })\`
+4. Write: \`db.transact(db.tx.entityName[id()].create({ ... }))\`
+
+### Auth flow
+
+1. User enters email → \`db.auth.sendMagicCode({ email })\`
+2. User receives code via email
+3. User enters code → \`db.auth.signInWithMagicCode({ email, code })\`
+4. Session persists via \`@react-native-async-storage/async-storage\`
+5. Check auth: \`db.useAuth()\` returns \`{ isLoading, user, error }\`
+6. Sign out: \`db.auth.signOut()\`
+
+## Constraints
+
+- Do NOT commit \`.env.local\`
+- No external auth provider needed — InstantDB handles everything
+- \`id()\` from \`@instantdb/react-native\` generates IDs
+`;
+}
+function magicCodeCloudflareAgentsMd(projectName) {
+    return `# AGENTS.md — ${projectName}
+
+> AI agent context file. This project was scaffolded with \`create-100x-mobile\`.
+
+## Tech Stack
+
+| Layer | Technology |
+|-------|-----------|
+| Framework | Expo (React Native) with Expo Router (file-based routing) |
+| Backend | InstantDB — client-first realtime database with built-in auth |
+| Auth | InstantDB magic code — email-based one-time code authentication |
+| Storage | Cloudflare R2 (files) + D1 (metadata) via a Worker API |
+| Infrastructure | Alchemy — TypeScript IaC for Cloudflare resources |
+| Language | TypeScript (strict) |
+| Styling | React Native StyleSheet (no Tailwind) |
+
+## Architecture
+
+\`\`\`
+Expo App ──realtime──▸ InstantDB (auth, todos, file metadata)
+    │
+    └── upload/download/delete ──▸ Cloudflare Worker
+                                       ├── R2 Bucket (file bytes)
+                                       ├── D1 Database (upload metadata)
+                                       └── syncs back to InstantDB
+\`\`\`
+
+## Project Structure
+
+\`\`\`
+├── app/
+│   ├── _layout.tsx              # Root layout
+│   ├── +not-found.tsx
+│   ├── (auth)/
+│   │   ├── _layout.tsx          # Auth guard layout
+│   │   └── sign-in.tsx          # Magic code sign-in
+│   ├── (tabs)/
+│   │   ├── _layout.tsx          # Tab navigator (Todos, Files, Settings)
+│   │   ├── index.tsx            # Todos screen
+│   │   ├── files.tsx            # File manager (upload, download, delete)
+│   │   └── settings.tsx         # Settings screen
+├── lib/
+│   ├── instant.ts               # InstantDB schema (todos + cloudflareObjects)
+│   └── cloudflareStorage.ts     # Upload, download, delete API client
+├── worker/
+│   ├── src/worker.ts            # Cloudflare Worker entry point
+│   ├── tsconfig.json
+│   └── migrations/
+│       └── 0001_uploads.sql     # D1 uploads table
+├── alchemy.run.ts               # Alchemy IaC (R2 bucket, D1 database, Worker)
+├── hooks/
+│   └── useFrameworkReady.ts
+└── assets/
+\`\`\`
+
+## Environment Variables
+
+File: \`.env.local\` (never commit this file)
+
+| Variable | Purpose | Source |
+|----------|---------|--------|
+| \`EXPO_PUBLIC_INSTANT_APP_ID\` | InstantDB app ID | \`npx instant-cli init-without-files\` |
+| \`EXPO_PUBLIC_STORAGE_WORKER_URL\` | Deployed Worker URL | Output of \`bun run cloudflare:deploy\` |
+| \`INSTANT_APP_ID\` | Same as above, used by Alchemy for Worker bindings | Same value |
+| \`INSTANT_ADMIN_TOKEN\` | InstantDB admin token for Worker metadata sync | Instant Dashboard → Admin Tokens |
+| \`ALLOWED_ORIGINS\` | CORS origins for the Worker | Comma-separated URLs |
+| \`MAX_UPLOAD_BYTES\` | Max single file size (default 25 MB) | Integer |
+| \`USER_STORAGE_LIMIT_BYTES\` | Per-user storage cap (default 500 MB) | Integer |
+| \`DAILY_UPLOAD_LIMIT\` | Max uploads per user per day (default 100) | Integer |
+| \`ALLOWED_CONTENT_TYPES\` | Allowed MIME types | Comma-separated |
+
+## Commands
+
+| Command | Purpose |
+|---------|---------|
+| \`bun install\` | Install dependencies |
+| \`bunx expo start\` | Start Expo dev server |
+| \`bun run lint\` | Run ESLint |
+| \`bun run format\` | Format with Prettier |
+| \`bun run cloudflare:configure\` | Configure Alchemy credentials |
+| \`bun run cloudflare:login\` | Login to Cloudflare via Alchemy |
+| \`bun run cloudflare:deploy\` | Deploy Worker + R2 + D1 |
+| \`bun run cloudflare:dev\` | Run Worker locally |
+| \`bun run cloudflare:destroy\` | Tear down Cloudflare resources |
+| \`bun run typecheck:worker\` | Type-check Worker code |
+
+## Key Patterns
+
+### Adding a new InstantDB entity
+
+1. Add to \`lib/instant.ts\` schema
+2. Export the type
+3. Query: \`db.useQuery({ entityName: {} })\`
+4. Write: \`db.transact(db.tx.entityName[id()].create({ ... }))\`
+
+### File upload flow
+
+1. User picks a file with \`expo-document-picker\`
+2. App calls \`uploadCloudflareObject({ body, contentType, fileName })\` from \`lib/cloudflareStorage.ts\`
+3. Client sends the file to \`POST /uploads\` on the Worker with the InstantDB refresh token
+4. Worker verifies token with \`@instantdb/admin\`, stores file in R2, records in D1
+5. Worker syncs metadata to InstantDB \`cloudflareObjects\` entity via admin SDK
+6. App sees the new file in realtime via \`db.useQuery({ cloudflareObjects: {} })\`
+
+### File delete flow
+
+1. App calls \`deleteCloudflareObject(uploadId)\`
+2. Worker verifies ownership, deletes from R2, D1, and InstantDB
+
+### Worker API routes
+
+| Method | Path | Purpose |
+|--------|------|---------|
+| \`POST\` | \`/uploads\` | Upload a file |
+| \`GET\` | \`/uploads/:id\` | Get upload metadata |
+| \`GET\` | \`/uploads/:id/content\` | Download file bytes |
+| \`DELETE\` | \`/uploads/:id\` | Delete file |
+| \`GET\` | \`/health\` | Health check |
+
+### Auth flow
+
+1. User enters email → \`db.auth.sendMagicCode({ email })\`
+2. Code arrives by email
+3. User enters code → \`db.auth.signInWithMagicCode({ email, code })\`
+4. Refresh token is used as Bearer token for Worker requests
+
+## Constraints
+
+- Do NOT commit \`.env.local\` — contains admin tokens
+- Do NOT expose the R2 bucket publicly — all access goes through the Worker
+- Worker validates ownership before reads, downloads, and deletes
+- The \`cloudflareObjects\` entity in InstantDB is written by the Worker only (via admin token)
+- When adding new Worker routes, add them to \`routeRequest()\` in \`worker/src/worker.ts\`
+- After changing Worker code, redeploy with \`bun run cloudflare:deploy\`
+`;
+}

package/dist/templates/config/packageJson.js

@@ -13,7 +13,10 @@ function packageJsonTemplate(appName, expoVersion = "latest", backend = "convex"
         ? isMagicCodeInstantAuthMode(instantAuthMode)
             ? {
                 ...(isCloudflareInstantAuthMode(instantAuthMode)
-                    ? { "@instantdb/admin": "^1.0.15" }
+                    ? {
+                        "@instantdb/admin": "^1.0.15",
+                        "expo-document-picker": "~12.2.2",
+                    }
                     : {}),
                 "@instantdb/react-native": "^0.20.0",
                 "@react-native-async-storage/async-storage": "^2.2.0",

package/package.json

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