@ramonclaudio/create-vexpo 0.1.0 → 0.1.2

package/dist/templates/default/src/app/(app)/restore-account.tsx

@@ -0,0 +1,192 @@
+/**
+ * Restore-or-confirm surface for the account-deletion window.
+ *
+ * Reachable only when `getMe` returns a user with `deletedAt` set. The
+ * (app) layout's two-layer `Stack.Protected` switches the entire subtree
+ * to this screen and keeps the user from navigating elsewhere until they
+ * pick a path:
+ *
+ *   Restore Account       calls `users.restoreAccount`, clears the
+ *                         tombstone, drops us back at the home tab
+ *   Sign Out              hard sign-out; the 30-day cron continues to
+ *                         tick down toward permanent deletion
+ *
+ * Apple revoke does NOT happen here; the soft-delete pattern in
+ * `users.deleteAccount` defers Apple's `revokeRefreshToken` to the
+ * `hardDeleteExpired` cron so a restore within the window leaves SIWA
+ * authorization intact.
+ */
+
+import { router } from "expo-router";
+import { useActionState, useState } from "react";
+import { Image as ExpoImage } from "expo-image";
+import { Button, Host, Spacer, Text, VStack } from "@expo/ui/swift-ui";
+import {
+  background,
+  buttonStyle,
+  clipShape,
+  disabled,
+  foregroundStyle,
+  frame,
+  multilineTextAlignment,
+  padding,
+} from "@expo/ui/swift-ui/modifiers";
+import { useMutation, useQuery } from "convex/react";
+
+import { ProminentButton } from "@/components/ui/prominent-button";
+import { ErrorText } from "@/components/ui/status-text";
+import { api } from "@/convex/_generated/api";
+import { Button as ButtonTokens } from "@/constants/layout";
+import { useColors, useThemedAsset } from "@/hooks/use-theme";
+import { announce } from "@/lib/a11y";
+import { assets } from "@/lib/assets";
+import { authClient } from "@/lib/auth-client";
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { haptics } from "@/lib/haptics";
+
+// Mirror of `ACCOUNT_DELETION_GRACE_MS` in `convex/users.ts`. Importing
+// across the convex / app boundary costs a runtime require for a single
+// constant, so inline it here. If you ever change the grace window,
+// keep the two in sync.
+const ACCOUNT_DELETION_GRACE_MS = 30 * 24 * 60 * 60 * 1000;
+
+type ActionState = { error?: string };
+const initialState: ActionState = {};
+
+export default function RestoreAccountScreen() {
+  const dfont = useDynamicFont();
+  const colors = useColors();
+  const brandIcon = useThemedAsset(assets.brandIconLight, assets.brandIconDark);
+  const me = useQuery(api.users.getMe);
+  const restoreMutation = useMutation(api.users.restoreAccount);
+
+  const [signingOut, setSigningOut] = useState(false);
+
+  const [restoreState, restore, restorePending] = useActionState<ActionState, void>(async () => {
+    haptics.medium();
+    try {
+      await restoreMutation();
+      haptics.success();
+      announce("Account restored");
+      router.replace("/");
+      return {};
+    } catch (err) {
+      haptics.error();
+      return { error: err instanceof Error ? err.message : "Failed to restore account" };
+    }
+  }, initialState);
+
+  const handleSignOut = async () => {
+    if (signingOut || restorePending) return;
+    setSigningOut(true);
+    haptics.medium();
+    try {
+      await authClient.signOut();
+    } finally {
+      setSigningOut(false);
+    }
+  };
+
+  if (!me) {
+    return (
+      <Host style={{ flex: 1, backgroundColor: colors.background }}>
+        <Spacer />
+      </Host>
+    );
+  }
+
+  // Note: `deletedAt` cleared mid-mount is handled by the two-layer
+  // Stack.Protected in (app)/_layout.tsx, which switches us back to the
+  // authed subtree on the next render. No side-effect-in-render needed.
+  if (!me.deletedAt) {
+    return (
+      <Host style={{ flex: 1, backgroundColor: colors.background }}>
+        <Spacer />
+      </Host>
+    );
+  }
+
+  const permanentDeleteAt = new Date(me.deletedAt + ACCOUNT_DELETION_GRACE_MS);
+  const formattedDate = new Intl.DateTimeFormat(undefined, {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  }).format(permanentDeleteAt);
+
+  return (
+    <Host testID="restore-account-screen" style={{ flex: 1, backgroundColor: colors.background }}>
+      <VStack
+        spacing={24}
+        alignment="center"
+        modifiers={[
+          frame({ maxWidth: Infinity, maxHeight: Infinity }),
+          padding({ horizontal: 24, vertical: 48 }),
+        ]}
+      >
+        <ExpoImage
+          source={brandIcon}
+          style={{ width: 72, height: 72 }}
+          contentFit="contain"
+          accessibilityLabel=""
+        />
+
+        <VStack spacing={12} alignment="center">
+          <Text
+            testID="restore-account-title"
+            modifiers={[
+              dfont({ size: 24, weight: "bold" }),
+              foregroundStyle(colors.foreground as string),
+              multilineTextAlignment("center"),
+            ]}
+          >
+            Account Scheduled for Deletion
+          </Text>
+          <Text
+            testID="restore-account-deletion-date"
+            modifiers={[
+              dfont({ size: 15 }),
+              foregroundStyle(colors.mutedForeground as string),
+              multilineTextAlignment("center"),
+            ]}
+          >
+            {`Your account is set to be permanently deleted on ${formattedDate}. Restore now to keep your account and all of its data.`}
+          </Text>
+        </VStack>
+
+        <VStack spacing={12} alignment="center" modifiers={[frame({ maxWidth: Infinity })]}>
+          <ProminentButton
+            testID="restore-account-restore"
+            label={restorePending ? "Restoring…" : "Restore Account"}
+            onPress={() => restore()}
+            disabled={restorePending || signingOut}
+          />
+          <Button
+            testID="restore-account-sign-out"
+            modifiers={[
+              buttonStyle("plain"),
+              frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
+              background(colors.muted as string),
+              clipShape("capsule"),
+              disabled(restorePending || signingOut),
+            ]}
+            onPress={handleSignOut}
+          >
+            <Text
+              modifiers={[
+                dfont({ size: 16, weight: "medium" }),
+                foregroundStyle(colors.destructive as string),
+              ]}
+            >
+              {signingOut ? "Signing Out…" : "Sign Out"}
+            </Text>
+          </Button>
+        </VStack>
+
+        {restoreState.error ? (
+          <ErrorText testID="restore-account-error">{restoreState.error}</ErrorText>
+        ) : null}
+      </VStack>
+    </Host>
+  );
+}

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

@@ -0,0 +1,287 @@
+import { useEffect, useState } from "react";
+import { Host, ScrollView, Button, Text, VStack, HStack, Spacer, Alert } from "@expo/ui/swift-ui";
+import {
+  background,
+  buttonStyle,
+  contentShape,
+  cornerRadius,
+  dynamicTypeSize,
+  shapes,
+  foregroundStyle,
+  frame,
+  multilineTextAlignment,
+  padding,
+  refreshable,
+  textSelection,
+  tint,
+} from "@expo/ui/swift-ui/modifiers";
+
+import { TouchTarget } from "@/constants/layout";
+import { DynamicType } from "@/constants/ui";
+import { ContentUnavailable } from "@/components/ui/content-unavailable";
+import { SkeletonSessions } from "@/components/ui/skeleton";
+import { useDynamicFont } from "@/lib/dynamic-font";
+
+import { authClient } from "@/lib/auth-client";
+import { haptics } from "@/lib/haptics";
+import { announce } from "@/lib/a11y";
+import { useColors } from "@/hooks/use-theme";
+
+type SessionRow = {
+  id: string;
+  token: string;
+  ipAddress?: string | null;
+  userAgent?: string | null;
+  createdAt: Date;
+  expiresAt: Date;
+};
+
+function formatRelative(date: Date): string {
+  const now = Date.now();
+  const delta = Math.max(0, now - date.getTime());
+  const seconds = Math.floor(delta / 1000);
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  if (months < 12) return `${months}mo ago`;
+  return `${Math.floor(months / 12)}y ago`;
+}
+
+function deviceLabel(userAgent?: string | null): string {
+  if (!userAgent) return "Unknown device";
+  if (/iPhone/i.test(userAgent)) return "iPhone";
+  if (/iPad/i.test(userAgent)) return "iPad";
+  if (/Mac/i.test(userAgent)) return "Mac";
+  if (/Android/i.test(userAgent)) return "Android";
+  if (/Windows/i.test(userAgent)) return "Windows";
+  if (/Linux/i.test(userAgent)) return "Linux";
+  return userAgent.slice(0, 40);
+}
+
+export default function SessionsScreen() {
+  const dfont = useDynamicFont();
+  const colors = useColors();
+  const { data: current } = authClient.useSession();
+  const currentToken = current?.session?.token ?? null;
+  const [sessions, setSessions] = useState<SessionRow[] | null>(null);
+  const [loadError, setLoadError] = useState(false);
+  const [revoking, setRevoking] = useState<string | null>(null);
+  const [confirmToken, setConfirmToken] = useState<string | null>(null);
+
+  const load = async () => {
+    try {
+      const res = await authClient.listSessions();
+      if (res.error) {
+        setLoadError(true);
+        return;
+      }
+      setLoadError(false);
+      const rows = (res.data ?? []).map((s) => ({
+        id: s.id,
+        token: s.token,
+        ipAddress: s.ipAddress ?? null,
+        userAgent: s.userAgent ?? null,
+        createdAt: new Date(s.createdAt),
+        expiresAt: new Date(s.expiresAt),
+      }));
+      setSessions(rows);
+    } catch {
+      setLoadError(true);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const revoke = async (token: string) => {
+    haptics.medium();
+    setRevoking(token);
+    try {
+      // revokeSession resolves with an `error` object (not a throw) on a
+      // server-side failure, so check it before announcing success, matching
+      // load()'s `res.error` handling above.
+      const res = await authClient.revokeSession({ token });
+      if (res.error) {
+        haptics.error();
+        return;
+      }
+      haptics.success();
+      announce("Session revoked");
+      await load();
+    } catch {
+      haptics.error();
+    } finally {
+      setRevoking(null);
+    }
+  };
+
+  return (
+    <Host testID="sessions-screen" style={{ flex: 1, backgroundColor: colors.background }}>
+      {sessions === null ? (
+        loadError ? (
+          <ContentUnavailable
+            testID="sessions-error"
+            title="Couldn't load sessions"
+            systemImage="exclamationmark.triangle"
+            description="Check your connection and try again."
+          />
+        ) : (
+          <SkeletonSessions testID="sessions-loading" />
+        )
+      ) : sessions.length === 0 ? (
+        <ContentUnavailable
+          testID="sessions-empty"
+          title="No active sessions"
+          systemImage="list.bullet.rectangle.portrait"
+          description="You have no other active sessions."
+        />
+      ) : (
+        <ScrollView modifiers={[tint(colors.primary as string), refreshable(load)]}>
+          <VStack
+            spacing={12}
+            alignment="leading"
+            modifiers={[padding({ horizontal: 24, top: 24, bottom: 40 })]}
+          >
+            <Text
+              testID="sessions-heading"
+              modifiers={[
+                dfont({ size: 13, weight: "semibold" }),
+                foregroundStyle(colors.mutedForeground as string),
+              ]}
+            >
+              ACTIVE SESSIONS
+            </Text>
+            {sessions.map((s) => {
+              const isCurrent = s.token === currentToken;
+              return (
+                <HStack
+                  key={s.id}
+                  testID={`session-row-${s.token}`}
+                  spacing={12}
+                  alignment="center"
+                  modifiers={[
+                    frame({ maxWidth: Infinity }),
+                    padding({ horizontal: 20, vertical: 14 }),
+                    background(colors.muted as string),
+                    cornerRadius(20),
+                  ]}
+                >
+                  <VStack alignment="leading" spacing={2}>
+                    <HStack spacing={8} alignment="center">
+                      <Text
+                        testID={`session-device-${s.token}`}
+                        modifiers={[dfont({ size: 16, weight: "semibold" }), textSelection(true)]}
+                      >
+                        {deviceLabel(s.userAgent)}
+                      </Text>
+                      {isCurrent ? (
+                        <Text
+                          testID={`session-current-badge-${s.token}`}
+                          modifiers={[
+                            dfont({ size: 11, weight: "semibold" }),
+                            foregroundStyle(colors.primaryForeground as string),
+                            padding({ horizontal: 8, vertical: 2 }),
+                            background(colors.primary as string),
+                            cornerRadius(8),
+                            // upstream expo/expo#46540: fixed pill, cap Dynamic
+                            // Type so it can't balloon beside the device name.
+                            dynamicTypeSize({ max: DynamicType.control }),
+                          ]}
+                        >
+                          This device
+                        </Text>
+                      ) : null}
+                    </HStack>
+                    <Text
+                      testID={`session-meta-${s.token}`}
+                      modifiers={[
+                        dfont({ size: 13 }),
+                        foregroundStyle(colors.mutedForeground as string),
+                        textSelection(true),
+                      ]}
+                    >
+                      {s.ipAddress ?? "Unknown IP"} · {formatRelative(s.createdAt)}
+                    </Text>
+                  </VStack>
+                  <Spacer />
+                  {isCurrent ? null : (
+                    <Alert
+                      title="Revoke this session?"
+                      isPresented={confirmToken === s.token}
+                      onIsPresentedChange={(v) => setConfirmToken(v ? s.token : null)}
+                    >
+                      <Alert.Trigger>
+                        <Button
+                          testID={`session-revoke-${s.token}`}
+                          modifiers={[
+                            buttonStyle("plain"),
+                            frame({ minHeight: TouchTarget.min }),
+                            contentShape(shapes.rectangle()),
+                          ]}
+                          onPress={() => {
+                            haptics.warning();
+                            setConfirmToken(s.token);
+                          }}
+                        >
+                          <Text
+                            modifiers={[
+                              dfont({ size: 14, weight: "medium" }),
+                              foregroundStyle(colors.destructive as string),
+                            ]}
+                          >
+                            Revoke
+                          </Text>
+                        </Button>
+                      </Alert.Trigger>
+                      <Alert.Actions>
+                        <Button
+                          testID={`session-revoke-confirm-${s.token}`}
+                          label="Revoke"
+                          role="destructive"
+                          onPress={() => {
+                            setConfirmToken(null);
+                            void revoke(s.token);
+                          }}
+                        />
+                        <Button
+                          testID={`session-revoke-cancel-${s.token}`}
+                          label="Cancel"
+                          role="cancel"
+                        />
+                      </Alert.Actions>
+                      <Alert.Message>
+                        <Text modifiers={[dfont({ size: 16 })]}>
+                          Signing out {deviceLabel(s.userAgent)} ends the session everywhere it is
+                          active.
+                        </Text>
+                      </Alert.Message>
+                    </Alert>
+                  )}
+                </HStack>
+              );
+            })}
+            {revoking ? (
+              <Text
+                testID="sessions-revoking"
+                modifiers={[
+                  dfont({ size: 13 }),
+                  foregroundStyle(colors.mutedForeground as string),
+                  multilineTextAlignment("center"),
+                  frame({ maxWidth: Infinity }),
+                ]}
+              >
+                Revoking session...
+              </Text>
+            ) : null}
+          </VStack>
+        </ScrollView>
+      )}
+    </Host>
+  );
+}

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

@@ -0,0 +1,194 @@
+import { useState, useCallback } from "react";
+import { Image as ExpoImage } from "expo-image";
+import { router } from "expo-router";
+import {
+  Host,
+  VStack,
+  Spacer,
+  Text,
+  Button,
+  Image,
+  ProgressView,
+  RNHostView,
+  TabView,
+} from "@expo/ui/swift-ui";
+import {
+  foregroundStyle,
+  buttonStyle,
+  multilineTextAlignment,
+  progressViewStyle,
+  frame,
+  padding,
+  kerning,
+  tint,
+  accessibilityHidden,
+  accessibilityLabel,
+  accessibilityValue,
+  tabViewStyle,
+} 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 { ProminentButton } from "@/components/ui/prominent-button";
+
+import { assets } from "@/lib/assets";
+import { haptics } from "@/lib/haptics";
+import { useColors, useThemedAsset } from "@/hooks/use-theme";
+import { useOnboarding } from "@/hooks/use-onboarding";
+
+type WelcomeStep =
+  | { id: string; brand: true; title: string; subtitle: string }
+  | {
+      id: string;
+      icon: "hammer.fill" | "checkmark.circle.fill";
+      title: string;
+      subtitle: string;
+    };
+
+const STEPS: readonly WelcomeStep[] = [
+  { id: "welcome", brand: true, title: "Welcome", subtitle: "Your new app starts here." },
+  {
+    id: "built",
+    icon: "hammer.fill",
+    title: "Built with Expo",
+    subtitle: "Universal, fast, native.",
+  },
+  {
+    id: "ready",
+    icon: "checkmark.circle.fill",
+    title: "Ready to Go",
+    subtitle: "Start building something great.",
+  },
+] as const;
+
+export default function WelcomeScreen() {
+  const dfont = useDynamicFont();
+  const symbolSize = useSymbolSize();
+  const colors = useColors();
+  const brandIcon = useThemedAsset(assets.brandIconLight, assets.brandIconDark);
+  const [step, setStep] = useState(0);
+  const { markSeen } = useOnboarding();
+
+  const handleContinue = useCallback(() => {
+    haptics.medium();
+    markSeen();
+    router.replace("/");
+  }, [markSeen]);
+
+  const handleNext = useCallback(() => {
+    haptics.light();
+    setStep((s) => Math.min(s + 1, STEPS.length - 1));
+  }, []);
+
+  // TabView page style drives selection by the step's id; a swipe reports the
+  // new id here and we mirror it back into `step` so the progress bar and the
+  // Next/Get Started button stay in sync.
+  const handlePageChange = useCallback((nextID: string) => {
+    const idx = STEPS.findIndex((s) => s.id === nextID);
+    if (idx < 0) return;
+    setStep((current) => {
+      if (current !== idx) haptics.selection();
+      return idx;
+    });
+  }, []);
+
+  const isLast = step === STEPS.length - 1;
+
+  return (
+    // upstream expo/expo#45872: Host modifiers now apply, so the accent tint
+    // cascades from the Host into the ProgressView and buttons below.
+    <Host testID="welcome-screen" style={{ flex: 1 }} modifiers={[tint(colors.primary as string)]}>
+      <VStack spacing={0}>
+        <VStack spacing={12} modifiers={[padding({ horizontal: 24, top: 24 })]}>
+          <ProgressView
+            testID="welcome-progress"
+            value={(step + 1) / STEPS.length}
+            modifiers={[
+              progressViewStyle("linear"),
+              accessibilityLabel("Onboarding progress"),
+              accessibilityValue(`Step ${step + 1} of ${STEPS.length}`),
+            ]}
+          />
+        </VStack>
+
+        <TabView
+          selection={STEPS[step].id}
+          onSelectionChange={handlePageChange}
+          modifiers={[
+            frame({ maxWidth: Infinity, maxHeight: Infinity }),
+            tabViewStyle({ type: "page", indexDisplayMode: "never" }),
+          ]}
+        >
+          {STEPS.map((s) => (
+            <TabView.Tab key={s.id} value={s.id}>
+              <VStack
+                spacing={20}
+                alignment="center"
+                modifiers={[
+                  frame({ maxWidth: Infinity, maxHeight: Infinity }),
+                  padding({ horizontal: 24 }),
+                ]}
+              >
+                <Spacer />
+                {"brand" in s ? (
+                  <RNHostView matchContents>
+                    <ExpoImage
+                      source={brandIcon}
+                      style={{ width: 96, height: 96 }}
+                      contentFit="contain"
+                      accessibilityLabel="App icon"
+                    />
+                  </RNHostView>
+                ) : (
+                  <Image
+                    systemName={s.icon}
+                    size={symbolSize(48)}
+                    color={colors.primary as string}
+                    modifiers={[frame({ width: 80, height: 80 }), accessibilityHidden(true)]}
+                  />
+                )}
+                <Text
+                  testID={`welcome-step-${s.id}-title`}
+                  modifiers={[dfont({ size: 34, weight: "bold" }), kerning(-0.5)]}
+                >
+                  {s.title}
+                </Text>
+                <Text
+                  testID={`welcome-step-${s.id}-subtitle`}
+                  modifiers={[
+                    dfont({ size: 17 }),
+                    foregroundStyle(colors.mutedForeground as string),
+                    multilineTextAlignment("center"),
+                  ]}
+                >
+                  {s.subtitle}
+                </Text>
+                <Spacer />
+              </VStack>
+            </TabView.Tab>
+          ))}
+        </TabView>
+
+        <VStack spacing={12} modifiers={[padding({ horizontal: 24, bottom: 24 })]}>
+          <ProminentButton
+            testID="welcome-continue"
+            label={isLast ? "Get Started" : "Next"}
+            onPress={isLast ? handleContinue : handleNext}
+          />
+          {!isLast && (
+            <Button
+              testID="welcome-skip"
+              label="Skip"
+              modifiers={[
+                buttonStyle("plain"),
+                dfont({ size: ButtonTokens.fontSize, weight: ButtonTokens.secondaryFontWeight }),
+                foregroundStyle(colors.mutedForeground as string),
+              ]}
+              onPress={handleContinue}
+            />
+          )}
+        </VStack>
+      </VStack>
+    </Host>
+  );
+}

package/dist/templates/default/src/app/+native-intent.tsx

@@ -0,0 +1,25 @@
+import type { NativeIntent } from "expo-router";
+import { resolveDeepLink } from "@/lib/deep-link";
+
+/**
+ * Validates and rewrites incoming system paths against the typed
+ * `DeepLinkRoutes` registry before the router matches. Unknown or malformed
+ * paths drop to `/`.
+ *
+ * This is the single entry point for deep-link navigation (expo-router runs
+ * `redirectSystemPath` and drives the navigator itself for both cold-start and
+ * warm links). The resolved query is reattached to the returned path so the
+ * router, which parses the returned string as a URL, delivers params to the
+ * destination's `useLocalSearchParams`. Returning the bare path here would
+ * strip the query and render the screen param-less.
+ */
+export const redirectSystemPath: NativeIntent["redirectSystemPath"] = ({ path }) => {
+  const { href, params } = resolveDeepLink(path);
+  if (!href) {
+    if (__DEV__) console.warn("[NativeIntent] Blocked:", path);
+    return "/";
+  }
+  const route = href as string;
+  const search = new URLSearchParams(params).toString();
+  return search ? `${route}?${search}` : route;
+};