@ramonclaudio/create-vexpo 0.1.0 → 0.1.2

package/dist/templates/default/components/auth/segmented-toggle.tsx

@@ -1,47 +0,0 @@
-import { Picker, Text } from "@expo/ui/swift-ui";
-import { controlSize, frame, pickerStyle, tag } from "@expo/ui/swift-ui/modifiers";
-
-import { useDynamicFont } from "@/lib/dynamic-font";
-import { Button as ButtonTokens } from "@/constants/layout";
-import { haptics } from "@/lib/haptics";
-
-// Native iOS segmented control via @expo/ui's SwiftUI Picker. Mirrors the
-// affordance of tanvex's web SegmentedToggle (Sign in/Sign up, Email/Username
-// /Email OTP) but renders as the platform-native control on iOS.
-
-export type SegmentedOption<T extends string> = {
-  value: T;
-  label: string;
-};
-
-type Props<T extends string> = {
-  value: T;
-  options: SegmentedOption<T>[];
-  onChange: (value: T) => void;
-};
-
-export function SegmentedToggle<T extends string>({ value, options, onChange }: Props<T>) {
-  const dfont = useDynamicFont();
-  return (
-    <Picker
-      modifiers={[
-        pickerStyle("segmented"),
-        controlSize("large"),
-        frame({ maxWidth: 10000, height: ButtonTokens.height }),
-      ]}
-      selection={value}
-      onSelectionChange={(selection) => {
-        const next = selection as T;
-        if (next === value) return;
-        haptics.light();
-        onChange(next);
-      }}
-    >
-      {options.map((opt) => (
-        <Text key={opt.value} modifiers={[tag(opt.value), dfont({ size: 14, weight: "medium" })]}>
-          {opt.label}
-        </Text>
-      ))}
-    </Picker>
-  );
-}

package/dist/templates/default/components/ui/convex-error.tsx

@@ -1,32 +0,0 @@
-import { ConvexError } from "convex/values";
-
-import { ErrorText } from "./status-text";
-
-/**
- * Pull a human-readable message out of an unknown thrown value. Knows about
- * `ConvexError`'s structured `data` payload (`{ code, message, field? }` from
- * `convex/errors.ts`) so server-side validation errors and auth failures
- * surface their original message instead of a stringified object.
- */
-export function formatError(err: unknown): string {
-  if (err instanceof ConvexError) {
-    const data = err.data as unknown;
-    if (typeof data === "object" && data !== null && "message" in data) {
-      const msg = (data as { message?: unknown }).message;
-      if (typeof msg === "string" && msg.length > 0) return msg;
-    }
-    return err.message;
-  }
-  if (err instanceof Error) return err.message;
-  return "An unexpected error occurred";
-}
-
-/**
- * Render an unknown thrown value through `ErrorText`. Returns null when there
- * is no error so call sites can do `<ConvexErrorView error={state.error} />`
- * unconditionally.
- */
-export function ConvexErrorView({ error }: { error: unknown }) {
-  if (error === undefined || error === null) return null;
-  return <ErrorText>{formatError(error)}</ErrorText>;
-}

package/dist/templates/default/components/ui/error-boundary.tsx

@@ -1,57 +0,0 @@
-import { router, type ErrorBoundaryProps } from "expo-router";
-import { Host, VStack, Text, Button, Image, Spacer } from "@expo/ui/swift-ui";
-import {
-  foregroundStyle,
-  buttonStyle,
-  frame,
-  padding,
-  multilineTextAlignment,
-  tint,
-} from "@expo/ui/swift-ui/modifiers";
-import { useDynamicFont } from "@/lib/dynamic-font";
-import { ProminentButton } from "@/components/ui/prominent-button";
-import { useColors } from "@/hooks/use-theme";
-
-export function AppErrorBoundary({ error, retry }: ErrorBoundaryProps) {
-  const dfont = useDynamicFont();
-  const colors = useColors();
-  console.error("[ErrorBoundary]", error);
-
-  return (
-    <Host style={{ flex: 1 }}>
-      <VStack
-        spacing={20}
-        alignment="center"
-        modifiers={[padding({ horizontal: 24, vertical: 32 }), tint(colors.primary as string)]}
-      >
-        <Spacer />
-        <Image
-          systemName="exclamationmark.triangle"
-          size={72}
-          color={colors.destructive as string}
-        />
-        <Text modifiers={[dfont({ size: 28, weight: "bold" }), multilineTextAlignment("center")]}>
-          Something went wrong
-        </Text>
-        <Text
-          modifiers={[
-            dfont({ size: 16 }),
-            foregroundStyle(colors.mutedForeground as string),
-            multilineTextAlignment("center"),
-          ]}
-        >
-          Don&apos;t worry. Let&apos;s get you back on track.
-        </Text>
-        <VStack spacing={12} modifiers={[frame({ maxWidth: Infinity })]}>
-          <ProminentButton label="Try Again" onPress={retry} />
-          <Button
-            label="Go Home"
-            modifiers={[buttonStyle("plain"), foregroundStyle(colors.mutedForeground as string)]}
-            onPress={() => router.replace("/")}
-          />
-        </VStack>
-        <Spacer />
-      </VStack>
-    </Host>
-  );
-}

package/dist/templates/default/components/ui/offline-banner.tsx

@@ -1,58 +0,0 @@
-import { Text, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-import { Material } from "@/components/ui/material";
-import { useNetwork } from "@/hooks/use-network";
-import { Spacing, FontSize, FontFamily } from "@/constants/layout";
-import { Radius } from "@/constants/theme";
-import { ZIndex } from "@/constants/ui";
-import { useColors } from "@/hooks/use-theme";
-
-// HIG: notification banners overlay the navigation layer with a translucent
-// material so context behind the alert remains visible.
-export function OfflineBanner() {
-  const { isOffline } = useNetwork();
-  const insets = useSafeAreaInsets();
-  const colors = useColors();
-
-  if (!isOffline) return null;
-
-  return (
-    <View
-      accessibilityLiveRegion="assertive"
-      accessibilityRole="alert"
-      style={{
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        zIndex: ZIndex.offlineBanner,
-        paddingTop: insets.top,
-      }}
-    >
-      <Material
-        variant="chrome"
-        tintColor={colors.destructive as string}
-        style={{
-          marginHorizontal: Spacing.md,
-          marginTop: Spacing.xs,
-          borderRadius: Radius.full,
-          overflow: "hidden",
-          paddingVertical: Spacing.sm,
-          paddingHorizontal: Spacing.lg,
-          alignItems: "center",
-        }}
-      >
-        <Text
-          style={{
-            fontSize: FontSize.md,
-            fontFamily: FontFamily.semiBold,
-            color: colors.destructiveForeground as string,
-          }}
-        >
-          You&apos;re offline
-        </Text>
-      </Material>
-    </View>
-  );
-}

package/dist/templates/default/components/ui/status-text.tsx

@@ -1,49 +0,0 @@
-import { useEffect } from "react";
-import { AccessibilityInfo } from "react-native";
-import { HStack, Image, Text } from "@expo/ui/swift-ui";
-import { foregroundStyle } from "@expo/ui/swift-ui/modifiers";
-
-import { useDynamicFont } from "@/lib/dynamic-font";
-import { Colors } from "@/constants/theme";
-
-type Props = { children: string; size?: number };
-
-function announce(prefix: string, message: string) {
-  AccessibilityInfo.announceForAccessibility(`${prefix}: ${message}`);
-}
-
-export function ErrorText({ children, size = 14 }: Props) {
-  const dfont = useDynamicFont();
-  useEffect(() => {
-    announce("Error", children);
-  }, [children]);
-
-  return (
-    <HStack spacing={6} alignment="center">
-      <Image
-        systemName="exclamationmark.triangle.fill"
-        size={size}
-        color={Colors.destructive as string}
-      />
-      <Text modifiers={[dfont({ size }), foregroundStyle(Colors.destructive as string)]}>
-        {children}
-      </Text>
-    </HStack>
-  );
-}
-
-export function SuccessText({ children, size = 14 }: Props) {
-  const dfont = useDynamicFont();
-  useEffect(() => {
-    announce("Success", children);
-  }, [children]);
-
-  return (
-    <HStack spacing={6} alignment="center">
-      <Image systemName="checkmark.circle.fill" size={size} color={Colors.success as string} />
-      <Text modifiers={[dfont({ size }), foregroundStyle(Colors.success as string)]}>
-        {children}
-      </Text>
-    </HStack>
-  );
-}

package/dist/templates/default/components/ui/update-banner.tsx

@@ -1,82 +0,0 @@
-import { Pressable, Text, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-import { Material } from "@/components/ui/material";
-import { useAppUpdates } from "@/hooks/use-updates";
-import { Spacing, FontSize, FontFamily } from "@/constants/layout";
-import { Radius } from "@/constants/theme";
-import { ZIndex } from "@/constants/ui";
-import { useColors } from "@/hooks/use-theme";
-
-// In-app surface for the EAS Update lifecycle. Mirrors the OfflineBanner
-// pattern (translucent material overlaying the nav layer per HIG) and is
-// only visible while the update state machine is doing something the user
-// would want to see:
-//
-//   - downloading      progress %, no tap target. auto-applies on finish
-//   - download failed  tap to retry
-//   - check failed     silent unless the user previously asked for an update
-//
-// `isUpdatePending` (downloaded, awaiting reload) is handled by the
-// `useAppUpdates` hook (auto-reload with reload screen), so we don't
-// surface it here. the splash-screen overlay does the visual work.
-export function UpdateBanner() {
-  const updates = useAppUpdates();
-  const insets = useSafeAreaInsets();
-  const colors = useColors();
-
-  const showProgress = updates.isDownloading;
-  const showError = !!updates.downloadError;
-  if (!showProgress && !showError) return null;
-
-  const tint = showError ? (colors.destructive as string) : (colors.primary as string);
-  const fg = showError
-    ? (colors.destructiveForeground as string)
-    : (colors.primaryForeground as string);
-  const pct =
-    showProgress && updates.downloadProgress != null
-      ? ` ${Math.round(updates.downloadProgress * 100)}%`
-      : "";
-  const label = showError ? "Update failed. Tap to retry." : `Updating${pct}`;
-
-  return (
-    <View
-      accessibilityLiveRegion="polite"
-      accessibilityRole="alert"
-      style={{
-        position: "absolute",
-        bottom: 0,
-        left: 0,
-        right: 0,
-        zIndex: ZIndex.updateBanner,
-        paddingBottom: insets.bottom,
-      }}
-    >
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={label}
-        accessibilityHint={showError ? "Re-attempts the update download" : undefined}
-        disabled={!showError}
-        onPress={showError ? () => updates.downloadAndApply() : undefined}
-      >
-        <Material
-          variant="chrome"
-          tintColor={tint}
-          style={{
-            marginHorizontal: Spacing.md,
-            marginBottom: Spacing.xs,
-            borderRadius: Radius.full,
-            overflow: "hidden",
-            paddingVertical: Spacing.sm,
-            paddingHorizontal: Spacing.lg,
-            alignItems: "center",
-          }}
-        >
-          <Text style={{ fontSize: FontSize.md, fontFamily: FontFamily.semiBold, color: fg }}>
-            {label}
-          </Text>
-        </Material>
-      </Pressable>
-    </View>
-  );
-}

package/dist/templates/default/fingerprint.config.js

@@ -1,9 +0,0 @@
-/** @type {import('expo/fingerprint').Config} */
-const config = {
-  sourceSkips: [
-    "ExpoConfigVersions",
-    "ExpoConfigRuntimeVersionIfString",
-    "PackageJsonAndroidAndIosScriptsIfNotContainRun",
-  ],
-};
-module.exports = config;

package/dist/templates/default/hooks/use-debounce.ts

@@ -1,20 +0,0 @@
-import { useEffect, useState } from "react";
-
-/**
- * Returns a value that lags the input by `delay` milliseconds. Useful for
- * coalescing rapid changes (typing, scroll, etc.) before kicking off a more
- * expensive operation downstream (filtering, fetching, rendering a big list).
- *
- * Each input change resets the timer, so the returned value only updates
- * after `delay` ms have passed without further changes.
- */
-export function useDebounce<T>(value: T, delay: number): T {
-  const [debounced, setDebounced] = useState(value);
-
-  useEffect(() => {
-    const id = setTimeout(() => setDebounced(value), delay);
-    return () => clearTimeout(id);
-  }, [value, delay]);
-
-  return debounced;
-}

package/dist/templates/default/hooks/use-deep-link.ts

@@ -1,43 +0,0 @@
-import { useEffect } from "react";
-import { useURL } from "expo-linking";
-import { router, type Href } from "expo-router";
-
-import { authClient } from "@/lib/auth-client";
-import { resolveDeepLink } from "@/lib/deep-link";
-
-const ROUTES: Record<string, Href> = {
-  "/linked": "/linked" as Href,
-};
-
-/**
- * Listens for deep link URLs and pushes to the matching route.
- *
- * Only runs once authenticated. Invalid or disallowed links are ignored.
- * Query params are forwarded as route params.
- */
-export function useDeepLinkHandler() {
-  // See note in app/_layout.tsx: Better Auth session is the canonical signal.
-  // `useConvexAuth` is unreliable due to the bridge's sessionId churn.
-  const { data: session } = authClient.useSession();
-  const isAuthenticated = !!session?.session;
-  const url = useURL();
-
-  useEffect(() => {
-    if (!isAuthenticated || !url) return;
-
-    let resolved;
-    try {
-      resolved = resolveDeepLink(url);
-    } catch (err) {
-      if (__DEV__) console.warn("[DeepLink] parse failed:", err);
-      return;
-    }
-
-    if (!resolved.path) return;
-
-    const target = ROUTES[resolved.path];
-    if (!target) return;
-
-    router.push({ pathname: target, params: resolved.params } as Href);
-  }, [isAuthenticated, url]);
-}

package/dist/templates/default/hooks/use-network.ts

@@ -1,11 +0,0 @@
-import { useNetworkState } from "expo-network";
-
-export function useNetwork() {
-  const { isConnected, isInternetReachable } = useNetworkState();
-
-  return {
-    isConnected,
-    isInternetReachable,
-    isOffline: isConnected === false || isInternetReachable === false,
-  };
-}

package/dist/templates/default/lib/assets.ts

@@ -1,17 +0,0 @@
-// Runtime asset registry. The five files referenced below live in ./assets/.
-// To rebrand, replace the PNGs in place with your own renders at the same
-// dimensions and file names. See DESIGN.md for the surface specs.
-//
-// Surfaces:
-//   icon           iOS bundle icon, 1024x1024 (iOS rounds the corners)
-//   brandIcon*     in-app chiclet (welcome, sign-in, sign-up, loading)
-//   splash*        expo-splash-screen image, sits on configured bg color
-export const assets = {
-  icon: require("@/assets/icon.png"),
-  brandIconLight: require("@/assets/brand-icon-light.png"),
-  brandIconDark: require("@/assets/brand-icon-dark.png"),
-  splashLight: require("@/assets/splash-image-light.png"),
-  splashDark: require("@/assets/splash-image-dark.png"),
-} as const;
-
-export const assetModules = Object.values(assets);

package/dist/templates/default/lib/deep-link.ts

@@ -1,71 +0,0 @@
-import { parse, createURL } from "expo-linking";
-
-export const ALLOWED_DEEP_LINK_PATHS = [
-  "/",
-  "/welcome",
-  "/settings",
-  "/about",
-  "/help",
-  "/privacy",
-  "/sign-in",
-  "/sign-up",
-  "/forgot-password",
-  "/reset-password",
-  "/linked",
-] as const;
-
-export function isValidDeepLink(url: string): boolean {
-  if (!url || typeof url !== "string") return false;
-  if (url.includes("..")) return false;
-
-  const { scheme, path } = parse(url);
-  const isRelativePath = url.startsWith("/") && !url.startsWith("//");
-  if (!isRelativePath && !scheme) return false;
-
-  const normalizedPath = "/" + (path ?? "").replace(/^\//, "");
-
-  return ALLOWED_DEEP_LINK_PATHS.some(
-    (allowed) => normalizedPath === allowed || normalizedPath.startsWith(allowed + "/"),
-  );
-}
-
-export type ResolvedDeepLink = {
-  path: string | null;
-  params: Record<string, string>;
-};
-
-/**
- * Pure helper that parses a deep link URL into `{ path, params }`.
- *
- * Returns `path: null` for invalid URLs, disallowed paths, or traversal attempts.
- * Array query values are joined with commas; nullish values are dropped.
- * Unit-testable: no React, no side effects.
- */
-export function resolveDeepLink(url: string): ResolvedDeepLink {
-  const empty: ResolvedDeepLink = { path: null, params: {} };
-  if (!url || typeof url !== "string") return empty;
-
-  let parsed;
-  try {
-    parsed = parse(url);
-  } catch {
-    return empty;
-  }
-
-  if (!isValidDeepLink(url)) return empty;
-
-  const normalizedPath = "/" + (parsed.path ?? "").replace(/^\//, "").replace(/\/+$/, "");
-  const path = normalizedPath === "/" ? "/" : normalizedPath;
-
-  const params: Record<string, string> = {};
-  if (parsed.queryParams) {
-    for (const [key, value] of Object.entries(parsed.queryParams)) {
-      if (value == null) continue;
-      params[key] = Array.isArray(value) ? value.join(",") : value;
-    }
-  }
-
-  return { path, params };
-}
-
-export { createURL };

package/dist/templates/default/patches/PR-368.patch

@@ -1,91 +0,0 @@
-From 53c46f0ac639231af3e8ac975d36851658f4e0b9 Mon Sep 17 00:00:00 2001
-From: Ray <hello@ramonclaudio.com>
-Date: Thu, 7 May 2026 19:07:36 -0400
-Subject: [PATCH] fix(react): wrap fetchAccessToken in new Promise to fix
- useConvexAuth on Hermes V1
-
-The /convex/token response triggers a session rotation (via Better
-Auth's Set-Cookie processing) plus a setCachedToken call inside the
-bridge's .then. The next render rebuilds fetchAccessToken's
-useCallback (keyed on [sessionId]) and fires
-ConvexAuthStateFirstEffect's client.setAuth a second time.
-
-On Hermes V1 native async (Expo SDK 56 canary 2026-05-05+ since
-expo/expo#45345 dropped @babel/plugin-transform-async-to-generator),
-that second setAuth lands inside the first setConfig's await window
-in authentication_manager.ts. fetchTokenAndGuardAgainstRace bumps
-configVersion on entry and the original await sees the stale value,
-returning isFromOutdatedConfig: true. setConfig bails without
-resumeSocket() and the chain repeats.
-
-Drop the async keyword and wrap the body in new Promise(executor)
-directly. The constructor's resolve(thenable) schedules a
-NewPromiseResolveThenableJob microtask, the same hop regenerator's
-_asyncToGenerator provides. With the hop in place the second setAuth
-lands after the first setConfig finishes rather than during its
-await window.
----
- src/react/index.tsx | 48 ++++++++++++++++++++++++---------------------
- 1 file changed, 26 insertions(+), 22 deletions(-)
-
-diff --git a/src/react/index.tsx b/src/react/index.tsx
-index dc10909a..2f906878 100644
---- a/src/react/index.tsx
-+++ b/src/react/index.tsx
-@@ -127,30 +127,34 @@ function useUseAuthFromBetterAuth(
-           }
-         }, [session, isSessionPending]);
-         const fetchAccessToken = useCallback(
--          async ({
-+          ({
-             forceRefreshToken = false,
-           }: { forceRefreshToken?: boolean } = {}) => {
--            if (cachedToken && !forceRefreshToken) {
--              return cachedToken;
--            }
--            if (!forceRefreshToken && pendingTokenRef.current) {
--              return pendingTokenRef.current;
--            }
--            pendingTokenRef.current = authClient.convex
--              .token({ fetchOptions: { throw: false } })
--              .then(({ data }) => {
--                const token = data?.token || null;
--                setCachedToken(token);
--                return token;
--              })
--              .catch(() => {
--                setCachedToken(null);
--                return null;
--              })
--              .finally(() => {
--                pendingTokenRef.current = null;
--              });
--            return pendingTokenRef.current;
-+            return new Promise<string | null>((resolve, reject) => {
-+              if (cachedToken && !forceRefreshToken) {
-+                resolve(cachedToken);
-+                return;
-+              }
-+              if (!forceRefreshToken && pendingTokenRef.current) {
-+                pendingTokenRef.current.then(resolve, reject);
-+                return;
-+              }
-+              pendingTokenRef.current = authClient.convex
-+                .token({ fetchOptions: { throw: false } })
-+                .then(({ data }) => {
-+                  const token = data?.token || null;
-+                  setCachedToken(token);
-+                  return token;
-+                })
-+                .catch(() => {
-+                  setCachedToken(null);
-+                  return null;
-+                })
-+                .finally(() => {
-+                  pendingTokenRef.current = null;
-+                });
-+              pendingTokenRef.current.then(resolve, reject);
-+            });
-           },
-           // Build a new fetchAccessToken to trigger setAuth() whenever the
-           // session changes.