Mobile: on-device gallery + AI image/video generators

- index.tsx: card gallery that shrinks columns as it grows (2→3→4); video tiles
  animate via a frame flipbook (expo-video-thumbnails) with a play badge.
- demo.tsx: standalone editor — photo / AI scene / AI video → card front;
  name/title/QR-link; back-of-card scannable links; save to the local gallery.
- generate-image.tsx: single-screen AI scene — refine (Gemini) → nano-banana →
  drop image on the card front.
- generate-video.tsx: single-screen AI video — submit Veo, poll with progress,
  drop the looping clip on the card front.
- stores/localCardsStore (MMKV-persisted cards + links + videoPath), draftStore
  (generator → editor hand-off); utils/imageStore (persist photo/video);
  api/ai client; LinksEditor, CardThumb, genwizard/Chips.
- deps: expo-image-picker, expo-file-system, expo-av, expo-video-thumbnails,
  expo-build-properties (cleartext for the backend over adb reverse).

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

cardclaws-mobile/app/index.tsx

@@ -1,29 +1,103 @@
-// Landing: jump straight into the no-login demo, or sign in to the full app.
-import { useRouter } from "expo-router";
-import { Pressable, StyleSheet, Text, View } from "react-native";
+// Gallery of cards saved on this device (standalone demo). Tap a card to view /
+// edit it, or create a new one. Falls back to a welcome state when empty.
 
-export default function Index() {
+import { useRouter } from "expo-router";
+import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
+import { CardThumb } from "../src/components/CardThumb";
+import { LocalCard, useLocalCardsStore } from "../src/stores/localCardsStore";
+
+/// Shrink tiles as the gallery grows: 2 columns → 4 fit a screen, 3 columns →
+/// ~8 fit, 4 columns beyond that.
+function columnsFor(count: number): number {
+  if (count <= 4) return 2;
+  if (count <= 9) return 3;
+  return 4;
+}
+
+export default function Gallery() {
   const router = useRouter();
+  const cards = useLocalCardsStore((s) => s.cards);
+  const columns = columnsFor(cards.length);
+
   return (
     <View style={styles.root}>
-      <Text style={styles.title}>CardClaws</Text>
-      <Text style={styles.tagline}>The other side of you.</Text>
+      <View style={styles.header}>
+        <Text style={styles.title}>Your cards</Text>
+        <Pressable onPress={() => router.push("/(auth)/login")}>
+          <Text style={styles.signin}>Sign in</Text>
+        </Pressable>
+      </View>
 
-      <Pressable style={styles.primary} onPress={() => router.push("/demo")}>
-        <Text style={styles.primaryText}>Try the card demo</Text>
-      </Pressable>
-      <Pressable onPress={() => router.push("/(auth)/login")}>
-        <Text style={styles.link}>Sign in to the full app</Text>
+      <FlatList
+        data={cards}
+        keyExtractor={(c) => c.id}
+        // numColumns can't change on the fly without remounting the list.
+        key={`cols-${columns}`}
+        numColumns={columns}
+        columnWrapperStyle={cards.length > 0 ? styles.column : undefined}
+        contentContainerStyle={styles.list}
+        ListEmptyComponent={
+          <View style={styles.empty}>
+            <Text style={styles.emptyTitle}>No cards yet</Text>
+            <Text style={styles.emptyHint}>Tap “New card” to create your first.</Text>
+          </View>
+        }
+        renderItem={({ item }: { item: LocalCard }) => (
+          <Pressable style={styles.tile} onPress={() => router.push(`/demo?cardId=${item.id}`)}>
+            <CardThumb item={item} style={styles.tileImage} />
+            <View style={[styles.tileLabel, columns >= 3 && styles.tileLabelCompact]}>
+              <Text style={[styles.tileName, columns >= 3 && styles.tileNameCompact]} numberOfLines={1}>
+                {item.name}
+              </Text>
+              {!!item.title && columns < 4 && (
+                <Text style={[styles.tileTitle, columns >= 3 && styles.tileNameCompact]} numberOfLines={1}>
+                  {item.title}
+                </Text>
+              )}
+            </View>
+          </Pressable>
+        )}
+      />
+
+      <Pressable style={styles.fab} onPress={() => router.push("/demo")}>
+        <Text style={styles.fabText}>+ New card</Text>
       </Pressable>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  root: { flex: 1, backgroundColor: "#0a0a0c", alignItems: "center", justifyContent: "center", padding: 24, gap: 14 },
-  title: { color: "#f5f5f7", fontSize: 44, fontWeight: "800", letterSpacing: -1 },
-  tagline: { color: "#9a9aa0", marginBottom: 24 },
-  primary: { backgroundColor: "#ff3b30", borderRadius: 16, paddingVertical: 16, paddingHorizontal: 40 },
-  primaryText: { color: "#fff", fontWeight: "700", fontSize: 17 },
-  link: { color: "#9a9aa0", marginTop: 12 },
+  root: { flex: 1, backgroundColor: "#0a0a0c" },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 20,
+    paddingTop: 64,
+    paddingBottom: 12,
+  },
+  title: { color: "#f5f5f7", fontSize: 30, fontWeight: "800" },
+  signin: { color: "#9a9aa0", fontSize: 15 },
+  list: { paddingHorizontal: 16, paddingBottom: 110, flexGrow: 1 },
+  column: { gap: 12 },
+  tile: { flex: 1, marginBottom: 12, borderRadius: 18, overflow: "hidden", backgroundColor: "#15151a" },
+  tileImage: { width: "100%", aspectRatio: 2 / 3, overflow: "hidden" },
+  tileLabel: { padding: 12 },
+  tileLabelCompact: { padding: 7 },
+  tileName: { color: "#f5f5f7", fontSize: 16, fontWeight: "700" },
+  tileNameCompact: { fontSize: 12 },
+  tileTitle: { color: "#9a9aa0", fontSize: 13, marginTop: 2 },
+  empty: { flex: 1, alignItems: "center", justifyContent: "center", paddingTop: 120, gap: 6 },
+  emptyTitle: { color: "#f5f5f7", fontSize: 20, fontWeight: "700" },
+  emptyHint: { color: "#6b6b70" },
+  fab: {
+    position: "absolute",
+    bottom: 28,
+    alignSelf: "center",
+    backgroundColor: "#ff3b30",
+    borderRadius: 28,
+    paddingHorizontal: 30,
+    paddingVertical: 16,
+  },
+  fabText: { color: "#fff", fontWeight: "700", fontSize: 16 },
 });