Phase 2 mobile: share UI, advanced layers, analytics dashboard, builder depth

- ShapeLayer type; cardStore reorderLayer + profile/link actions (undoable)
- QRCodeView (renders on-device qr matrix); CardFace renders shape + qr layers
- share.ts / analytics.ts API clients
- ShareSheet (QR overlay, OS share, Add to Google Wallet); per-card analytics
  dashboard (summary + top countries + activity feed)
- Builder: LayerPropertySheet, LayerOrderPanel, ProfileEditor, shape creation

25 logic unit tests; tsc clean.

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

cardclaws-mobile/app/card/[cardId]/view.tsx

@@ -1,11 +1,16 @@
 import { useQuery } from "@tanstack/react-query";
-import { Stack, useLocalSearchParams } from "expo-router";
-import { ActivityIndicator, View } from "react-native";
+import { Stack, useLocalSearchParams, useRouter } from "expo-router";
+import { useState } from "react";
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from "react-native";
 import { getCard } from "../../../src/api/cards";
 import { CardViewer } from "../../../src/components/card/CardViewer";
+import { ShareSheet } from "../../../src/components/share/ShareSheet";
 
 export default function CardViewScreen() {
   const { cardId } = useLocalSearchParams<{ cardId: string }>();
+  const router = useRouter();
+  const [sharing, setSharing] = useState(false);
+
   const { data, isLoading } = useQuery({
     queryKey: ["card", cardId],
     queryFn: () => getCard(cardId),
@@ -14,14 +19,44 @@ export default function CardViewScreen() {
 
   return (
     <View style={{ flex: 1, backgroundColor: "#0a0a0c" }}>
-      <Stack.Screen options={{ title: "", headerTransparent: true }} />
+      <Stack.Screen
+        options={{
+          title: "",
+          headerTransparent: true,
+          headerRight: () => (
+            <View style={styles.actions}>
+              <Pressable onPress={() => router.push(`/card/${cardId}/analytics`)}>
+                <Text style={styles.headerBtn}>Stats</Text>
+              </Pressable>
+              <Pressable onPress={() => setSharing(true)}>
+                <Text style={[styles.headerBtn, styles.share]}>Share</Text>
+              </Pressable>
+            </View>
+          ),
+        }}
+      />
       {isLoading || !data ? (
-        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+        <View style={styles.center}>
           <ActivityIndicator color="#ff3b30" />
         </View>
       ) : (
-        <CardViewer card={data.definition} />
+        <>
+          <CardViewer card={data.definition} />
+          <ShareSheet
+            cardId={cardId}
+            handle={data.handle}
+            visible={sharing}
+            onClose={() => setSharing(false)}
+          />
+        </>
       )}
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  center: { flex: 1, alignItems: "center", justifyContent: "center" },
+  actions: { flexDirection: "row", gap: 16 },
+  headerBtn: { color: "#f5f5f7", fontWeight: "600", fontSize: 16 },
+  share: { color: "#ff3b30" },
+});