@ramonclaudio/create-vexpo 0.1.0 → 0.1.2

package/dist/templates/default/scripts/clean.ts

@@ -1,14 +1,6 @@
 /**
  * vexpo clean script.
  *
- * Wipes every regenerable cache and build artifact:
- * - Project artifacts: node_modules, bun.lock, ios/, .expo/, dist/, convex/_generated/, tsconfig.tsbuildinfo, coverage/, .vitest-cache/, expo-env.d.ts, bun-error.*, *.log
- * - .eas/ per-project state (keeps .eas/workflows/)
- * - .DS_Store files repo-wide
- * - $TMPDIR caches: metro-*, haste-map-*, react-*, node-compile-cache, expo-*, RN*
- * - System caches: ~/Library/Caches/CocoaPods, ~/.expo
- * - Xcode build outputs: ~/Library/Developer/Xcode/DerivedData/<project>-*
- *
  * Never wiped (user data / secrets):
  * - .env / .env.* (auth values)
  * - .p8 / .p12 / AuthKey_* / SubscriptionKey_* (Apple keys)
@@ -16,16 +8,12 @@
  * - .vexpo-manual-setup/ / .rebrand-backup/
  * - .setup-state.json (opt-in via --state)
  *
- * Then reinstalls deps via the detected package manager.
+ * Kept by default so reinstall is deterministic (opt in via --all):
+ * - package-lock.json / bun.lock / yarn.lock (lockfile; `npm ci` or
+ *   `<pm> install --frozen-lockfile` when present)
+ * - convex/_generated/ (regenerated via `npx convex codegen` after --all)
  *
  * Uses macOS `trash` for every delete so anything wiped is recoverable.
- *
- * Usage:
- *   bun run clean                full wipe + install
- *   bun run clean --metro        just Metro/Haste/Babel caches (fast, no reinstall)
- *   bun run clean --state        also wipe .setup-state.json (next setup re-probes everything)
- *   bun run clean --no-install   wipe everything but skip the reinstall
- *   bun run clean --help
  */
 
 import { spawn as nodeSpawn } from "node:child_process";
@@ -107,13 +95,7 @@ async function fileExists(p: string): Promise<boolean> {
 
 type PM = "bun" | "pnpm" | "yarn" | "npm";
 
-/**
- * Capture which PM ran this script BEFORE any wipes. Two signals:
- * 1. `npm_execpath`. every modern PM (npm/bun/pnpm/yarn) sets this to its
- *    own binary path when running scripts. Most reliable.
- * 2. Lockfile presence. fallback when running outside `<pm> run` (e.g.
- *    direct `node scripts/clean.ts`). Read while the lockfile still exists.
- */
+// Capture which PM ran this script BEFORE any wipes: --all trashes the lockfile.
 async function detectPackageManager(): Promise<PM> {
   const execpath = (process.env.npm_execpath ?? "").toLowerCase();
   if (execpath.includes("bun")) return "bun";
@@ -126,15 +108,16 @@ async function detectPackageManager(): Promise<PM> {
   return "npm";
 }
 
-function installCmdFor(pm: PM): string {
-  return `${pm} install`;
+function installCmdFor(pm: PM, frozen: boolean): string {
+  if (!frozen) return `${pm} install`;
+  // npm uses `ci` for frozen installs, every other PM has `--frozen-lockfile`.
+  if (pm === "npm") return "npm ci";
+  return `${pm} install --frozen-lockfile`;
 }
 
 const REPO_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
 process.chdir(REPO_ROOT);
 
-// ─── Output ──────────────────────────────────────────────────────────────────
-
 const RESET = "\x1b[0m";
 const BOLD = "\x1b[1m";
 const DIM = "\x1b[2m";
@@ -164,27 +147,32 @@ function section(title: string): void {
   line(`\n${BOLD}${VIOLET}${title}${RESET} ${DIM}${fill}${RESET}`);
 }
 
-// ─── Args ────────────────────────────────────────────────────────────────────
-
 const HELP = `${BOLD}vexpo clean${RESET}
 
 ${BOLD}Usage:${RESET}
-  ${DIM}bun run clean${RESET}                full wipe + bun install
-  ${DIM}bun run clean --metro${RESET}        just Metro/Haste/Babel caches
-  ${DIM}bun run clean --state${RESET}        also wipe .setup-state.json
-  ${DIM}bun run clean --no-install${RESET}   wipe everything but skip reinstall
-  ${DIM}bun run clean --help${RESET}
-
-The full wipe removes node_modules, lockfile, ios/, .expo/, dist/,
-convex/_generated/, tsbuildinfo, coverage/, .vitest-cache/,
-expo-env.d.ts, bun-error.*, *.log, .eas/ (except workflows/),
-all .DS_Store files, $TMPDIR Metro/Haste/React/expo/RN caches,
-~/Library/Caches/CocoaPods, ~/.expo, and the Xcode DerivedData
-subfolder for this project. Never touches .env files, Apple keys,
-store.config.json, .vexpo-manual-setup/, or .rebrand-backup/.
+  ${DIM}npm run clean${RESET}                wipe caches, keep lockfile, frozen install
+  ${DIM}npm run clean --all${RESET}          also wipe lockfile + convex/_generated
+  ${DIM}npm run clean --metro${RESET}        just Metro/Haste/Babel caches
+  ${DIM}npm run clean --state${RESET}        also wipe .setup-state.json
+  ${DIM}npm run clean --no-install${RESET}   wipe everything but skip reinstall
+  ${DIM}npm run clean --help${RESET}
+
+The default wipe removes node_modules, ios/, .expo/, dist/,
+tsbuildinfo, coverage/, .vitest-cache/, expo-env.d.ts, bun-error.*,
+*.log, .eas/ (except workflows/), all .DS_Store files, $TMPDIR
+Metro/Haste/React/expo/RN caches, ~/Library/Caches/CocoaPods, ~/.expo,
+and the Xcode DerivedData subfolder for this project. The lockfile
+and convex/_generated/ are kept so reinstall is deterministic
+(${DIM}npm ci${RESET}). Never touches .env files,
+Apple keys, store.config.json, .vexpo-manual-setup/, or .rebrand-backup/.
+
+${BOLD}--all${RESET} additionally wipes the lockfile and convex/_generated/.
+Reinstall resolves transitives fresh and ${DIM}npx convex codegen${RESET} runs
+after install to rebuild the Convex bindings. Use when the lockfile
+is suspect or you want a true clean-slate reinstall.
 
 ${BOLD}--state${RESET} additionally wipes .setup-state.json so the next
-${DIM}bun run setup${RESET} re-probes every phase against external services
+${DIM}npm run setup${RESET} re-probes every phase against external services
 (slower, but the cure when state has drifted from reality).
 
 Bundlers (Metro, expo CLI, react-native start, Watchman) are stopped
@@ -193,13 +181,20 @@ held open. ${BOLD}convex dev${RESET} is left alone (it's your data layer, not a
 bundler); restart it manually if it misbehaves after a full wipe.
 `;
 
-let args: { metro?: boolean; state?: boolean; "no-install"?: boolean; help?: boolean };
+let args: {
+  metro?: boolean;
+  state?: boolean;
+  all?: boolean;
+  "no-install"?: boolean;
+  help?: boolean;
+};
 try {
   args = parseArgs({
     args: process.argv.slice(2),
     options: {
       metro: { type: "boolean", default: false },
       state: { type: "boolean", default: false },
+      all: { type: "boolean", default: false },
       "no-install": { type: "boolean", default: false },
       help: { type: "boolean", short: "h", default: false },
     },
@@ -215,8 +210,6 @@ if (args.help) {
   process.exit(0);
 }
 
-// ─── Helpers ─────────────────────────────────────────────────────────────────
-
 async function pathExists(p: string): Promise<boolean> {
   try {
     await stat(p);
@@ -246,7 +239,6 @@ async function trashPaths(paths: string[]): Promise<void> {
 
 async function expandGlob(dir: string, pattern: string): Promise<string[]> {
   if (!(await pathExists(dir))) return [];
-  // Convert simple glob (only * supported) to regex. Sufficient for our patterns.
   const re = new RegExp(
     "^" + pattern.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, ".*") + "$",
   );
@@ -254,8 +246,6 @@ async function expandGlob(dir: string, pattern: string): Promise<string[]> {
   return entries.filter((e) => re.test(e)).map((e) => `${dir}/${e}`);
 }
 
-// ─── Targets ─────────────────────────────────────────────────────────────────
-
 const REPO = REPO_ROOT;
 const TMPDIR = process.env.TMPDIR?.replace(/\/$/, "") ?? "/tmp";
 const HOME = homedir();
@@ -273,37 +263,32 @@ async function readPkgName(): Promise<string> {
 
 const PROJECT_TARGETS = [
   "node_modules",
-  "bun.lock",
   "ios",
   ".expo",
   "dist",
-  "convex/_generated",
   "tsconfig.tsbuildinfo",
   "coverage",
   ".vitest-cache",
   "expo-env.d.ts",
 ];
 
-// Globs evaluated at REPO root. bun-error.* and *.log are cheap to wipe and
-// almost never wanted across runs.
+// Wiped only with --all. Default leaves these alone: the lockfile stays the
+// source of truth (frozen install) and convex/_generated needs a deployment
+// round-trip via `npx convex codegen` to come back.
+const PROJECT_TARGETS_ALL = ["bun.lock", "package-lock.json", "convex/_generated"];
+
 const PROJECT_GLOBS = ["bun-error.*", "*.log"];
 
 const TMP_GLOBS = ["metro-*", "haste-map-*", "react-*", "node-compile-cache", "expo-*", "RN*"];
 
-// ─── Steps ───────────────────────────────────────────────────────────────────
-
 /**
  * Stop bundlers before wiping their caches. macOS `trash` silently skips
  * files held open by a running process, so caches survive the wipe and the
  * bundler restarts onto stale state. Killing first prevents that.
- *
- * Bundlers are killed automatically. `convex dev` is the user's data layer,
- * not a bundler. left alone, with a warning.
  */
 async function stepStopBundlers(): Promise<void> {
   section("Stop bundlers");
 
-  // Patterns are pgrep -f extended regex over the full command line.
   // Order: kill the parent CLI first so it can tear down its child Metro.
   const targets: { pattern: string; name: string }[] = [
     { pattern: "node .*\\.bin/expo (run:|start)", name: "expo CLI" },
@@ -321,7 +306,6 @@ async function stepStopBundlers(): Promise<void> {
     killed += pids.length;
   }
 
-  // Watchman has its own clean shutdown. No-op if not installed (exit 127).
   const wm = await spawn(["watchman", "shutdown-server"], {
     stdio: ["ignore", "ignore", "ignore"],
   }).exited;
@@ -361,9 +345,10 @@ async function stepMetroCachesOnly(): Promise<void> {
   ok(`trashed ${matches.length} cache director${matches.length === 1 ? "y" : "ies"}`);
 }
 
-async function stepProjectArtifacts(): Promise<void> {
+async function stepProjectArtifacts(all: boolean): Promise<void> {
   section("Project artifacts");
-  const targets = PROJECT_TARGETS.map((t) => `${REPO}/${t}`);
+  const names = all ? [...PROJECT_TARGETS, ...PROJECT_TARGETS_ALL] : PROJECT_TARGETS;
+  const targets = names.map((t) => `${REPO}/${t}`);
   for (const pattern of PROJECT_GLOBS) {
     targets.push(...(await expandGlob(REPO, pattern)));
   }
@@ -477,8 +462,6 @@ async function stepExpoCache(): Promise<void> {
     nop("~/.expo not present");
     return;
   }
-  // .expo holds the user-level Expo cache (devices.json, telemetry, sdk
-  // metadata). Safe to wipe; Expo regenerates on next CLI invocation.
   await trashPaths([path]);
   ok("trashed ~/.expo");
 }
@@ -491,19 +474,46 @@ async function stepSetupState(): Promise<void> {
     return;
   }
   await trashPaths([path]);
-  ok("trashed .setup-state.json (next `bun run setup` re-probes every phase)");
+  ok("trashed .setup-state.json (next `npm run setup` re-probes every phase)");
 }
 
 async function stepInstall(pm: PM): Promise<void> {
   section("Reinstall");
-  const cmd = installCmdFor(pm).split(" ");
+  // Frozen install when a lockfile is on disk: deterministic, no transitive drift.
+  // After --all the lockfile is gone and bun resolves fresh.
+  const frozen = await pathExists(`${REPO}/${lockfileFor(pm)}`);
+  const cmd = installCmdFor(pm, frozen).split(" ");
   const proc = spawn(cmd, { stdio: ["inherit", "inherit", "inherit"] });
   const code = await proc.exited;
   if (code !== 0) throw new Error(`${cmd.join(" ")} exited with code ${code}`);
   ok(cmd.join(" "));
 }
 
-// ─── Entry ───────────────────────────────────────────────────────────────────
+function lockfileFor(pm: PM): string {
+  if (pm === "bun") return "bun.lock";
+  if (pm === "pnpm") return "pnpm-lock.yaml";
+  if (pm === "yarn") return "yarn.lock";
+  return "package-lock.json";
+}
+
+async function stepConvexCodegen(): Promise<void> {
+  section("Convex codegen");
+  if (await pathExists(`${REPO}/convex/_generated`)) {
+    nop("convex/_generated/ present (skipped)");
+    return;
+  }
+  // No bun.lock or convex/_generated on disk after --all. `convex codegen`
+  // talks to the deployment to rebuild the TypeScript bindings; skip and warn
+  // if the env isn't wired so this never blocks a clean.
+  const cmd = ["npx", "convex", "codegen"];
+  const proc = spawn(cmd, { stdio: ["inherit", "inherit", "inherit"] });
+  const code = await proc.exited;
+  if (code !== 0) {
+    bad(`${cmd.join(" ")} exited with code ${code} (run it manually once Convex is reachable)`);
+    return;
+  }
+  ok(cmd.join(" "));
+}
 
 // Wrapped in an async IIFE so the file works under both ESM (top-level await
 // supported) and CJS-via-tsx (no top-level await).
@@ -514,11 +524,12 @@ void (async () => {
       await stepStopBundlers();
       await stepMetroCachesOnly();
     } else {
-      // Capture PM BEFORE any wipes; stepProjectArtifacts trashes the lockfile.
+      // Capture PM BEFORE any wipes; --all trashes the lockfile.
       const pm = await detectPackageManager();
       const pkgName = await readPkgName();
+      const all = args.all === true;
       await stepStopBundlers();
-      await stepProjectArtifacts();
+      await stepProjectArtifacts(all);
       await stepEasState();
       await stepDsStores();
       await stepTmpdirCaches();
@@ -528,6 +539,7 @@ void (async () => {
       if (args.state) await stepSetupState();
       if (!args["no-install"]) {
         await stepInstall(pm);
+        if (all) await stepConvexCodegen();
       } else {
         yep(`--no-install passed; skipping ${pm} install`);
       }

package/dist/templates/default/scripts/gen-update-cert.mjs

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+/**
+ * One-shot setup for OTA update code signing.
+ *
+ *   npm run updates:gen-cert -- --name "Acme Inc."
+ *
+ * Wraps `npx expo-updates codesigning:generate` with vexpo's conventions:
+ *   - cert goes to `./certs/certificate.pem` (committed; verified on-device)
+ *   - private key goes to `../keys/private-key.pem` (NOT committed; lives
+ *     as an EAS file-type env var in CI)
+ *   - validity duration: 10 years (long enough to outlive most apps)
+ *
+ * Once the cert exists, `app.config.ts` automatically wires the
+ * `codeSigningCertificate` / `codeSigningMetadata` block. No manual edits.
+ *
+ * Two more steps, printed at the end, finish CI wiring:
+ *   1. `eas env:create --environment production --visibility secret \
+ *        --type file --name EAS_UPDATE_PRIVATE_KEY \
+ *        --value <path-to-private-key.pem>`
+ *   2. Confirm `.eas/workflows/deploy-production.yml`'s `update_ios` job
+ *      passes `private_key_path: "$EAS_UPDATE_PRIVATE_KEY"` (ships wired).
+ *
+ * After that every OTA bundle is signed locally during `eas update` and
+ * verified on-device before install. A compromised EAS account or CDN
+ * cannot ship arbitrary JS.
+ *
+ * https://docs.expo.dev/eas-update/code-signing/
+ */
+
+import { existsSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { spawnSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { createInterface } from "node:readline/promises";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const PROJECT = resolve(HERE, "..");
+const CERT = resolve(PROJECT, "certs", "certificate.pem");
+const KEY = resolve(PROJECT, "..", "keys", "private-key.pem");
+
+const args = process.argv.slice(2);
+const flagIndex = args.indexOf("--name");
+const flagValue = flagIndex >= 0 ? args[flagIndex + 1] : undefined;
+
+if (existsSync(CERT)) {
+  console.error(`Certificate already exists at ${CERT}`);
+  console.error("Delete it (and the matching private key) before regenerating.");
+  process.exit(1);
+}
+
+const commonName = await resolveCommonName(flagValue);
+
+const result = spawnSync(
+  "npx",
+  [
+    "expo-updates",
+    "codesigning:generate",
+    "--certificate-output-directory",
+    "certs",
+    "--key-output-directory",
+    "../keys",
+    "--certificate-validity-duration-years",
+    "10",
+    "--certificate-common-name",
+    commonName,
+  ],
+  { cwd: PROJECT, stdio: "inherit" },
+);
+
+if (result.status !== 0) {
+  process.exit(result.status ?? 1);
+}
+
+console.log("\n--- Next steps ---");
+console.log(`1. Commit ${CERT.replace(`${PROJECT}/`, "")} (it's a public cert).`);
+console.log(`2. Upload the private key to EAS as a file-type secret:`);
+console.log(`   eas env:create --environment production --visibility secret \\`);
+console.log(`     --type file --name EAS_UPDATE_PRIVATE_KEY --value ${KEY}`);
+console.log(`3. Keep ${KEY} off committed surface. The .gitignore already covers it.`);
+console.log(
+  `4. The next \`expo prebuild\` picks up the cert automatically. Run \`npm run prebuild\`.`,
+);
+
+async function resolveCommonName(provided) {
+  if (provided && provided.trim().length > 0) return provided.trim();
+  if (!process.stdin.isTTY) {
+    console.error("Provide --name '<Organization Name>' when running non-interactively.");
+    process.exit(1);
+  }
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  const answer = (await rl.question("Certificate common name (organization): ")).trim();
+  rl.close();
+  if (answer.length === 0) {
+    console.error("Common name is required.");
+    process.exit(1);
+  }
+  return answer;
+}

package/dist/templates/default/{app → src/app}/(app)/(tabs)/(home)/index.tsx

@@ -1,6 +1,14 @@
-import { Host, ScrollView, VStack, Text, ContentUnavailableView } from "@expo/ui/swift-ui";
-import { foregroundStyle, kerning, padding, frame, tint } from "@expo/ui/swift-ui/modifiers";
+import { Host, ScrollView, VStack, Text } from "@expo/ui/swift-ui";
+import {
+  foregroundStyle,
+  kerning,
+  padding,
+  frame,
+  refreshable,
+  tint,
+} from "@expo/ui/swift-ui/modifiers";
 
+import { ContentUnavailable } from "@/components/ui/content-unavailable";
 import { authClient } from "@/lib/auth-client";
 import { useDynamicFont } from "@/lib/dynamic-font";
 import { useColors } from "@/hooks/use-theme";
@@ -8,14 +16,18 @@ import { useColors } from "@/hooks/use-theme";
 export default function HomeScreen() {
   const dfont = useDynamicFont();
   const colors = useColors();
-  const { data: session } = authClient.useSession();
+  const { data: session, refetch } = authClient.useSession();
 
   const name = session?.user?.name?.split(" ")[0] ?? "there";
   const now = new Date();
 
+  const onRefresh = async () => {
+    await refetch?.();
+  };
+
   return (
-    <Host style={{ flex: 1 }}>
-      <ScrollView modifiers={[tint(colors.primary as string)]}>
+    <Host testID="home-screen" style={{ flex: 1 }}>
+      <ScrollView modifiers={[tint(colors.primary as string), refreshable(onRefresh)]}>
         <VStack
           spacing={24}
           alignment="leading"
@@ -27,18 +39,21 @@ export default function HomeScreen() {
             modifiers={[frame({ maxWidth: Infinity, alignment: "leading" })]}
           >
             <Text
+              testID="home-date"
               modifiers={[dfont({ size: 14 }), foregroundStyle(colors.mutedForeground as string)]}
             >
               <Text date={now} dateStyle="date" />
             </Text>
             <Text
+              testID="home-greeting"
               modifiers={[dfont({ size: 32, weight: "bold", design: "rounded" }), kerning(-0.5)]}
             >
               Hey, {name}
             </Text>
           </VStack>
 
-          <ContentUnavailableView
+          <ContentUnavailable
+            testID="home-empty"
             title="Nothing here yet"
             systemImage="square.dashed"
             description="Home screen is ready to build."

package/dist/templates/default/{app → src/app}/(app)/(tabs)/(home,search)/_layout.tsx

@@ -1,7 +1,7 @@
-import { Stack, useSegments } from "expo-router";
+import { Stack } from "expo-router";
 
 import { useColors } from "@/hooks/use-theme";
-import { useReducedMotion } from "@/hooks/use-reduced-motion";
+import { useMotionScreenOptions } from "@/hooks/use-motion-screen-options";
 import { HeaderTint } from "@/constants/theme";
 import { FontFamily } from "@/constants/layout";
 
@@ -10,15 +10,18 @@ export const unstable_settings = {
   search: { anchor: "index" },
 };
 
-export default function SharedLayout() {
+// `segment` is the active group name in the comma-shared array, e.g.
+// `(home)` or `(search)`. Per the SDK 56 shared-routes docs, this is the
+// canonical entry point — no `useSegments()` cast, no magic index.
+export default function SharedLayout({ segment }: { segment: string }) {
   const colors = useColors();
-  const reduceMotion = useReducedMotion();
-  const segments = useSegments() as string[];
-  const isSearch = segments[2] === "(search)";
+  const motion = useMotionScreenOptions("default");
+  const isSearch = segment === "(search)";
 
   return (
     <Stack
       screenOptions={{
+        ...motion,
         headerTintColor: HeaderTint as string,
         headerBlurEffect: "none",
         headerShadowVisible: false,
@@ -26,8 +29,6 @@ export default function SharedLayout() {
         headerLargeStyle: { backgroundColor: "transparent" },
         headerTitleStyle: { fontFamily: FontFamily.semiBold },
         headerLargeTitleStyle: { fontFamily: FontFamily.bold },
-        animation: reduceMotion ? "fade" : "default",
-        animationDuration: reduceMotion ? 150 : undefined,
       }}
     >
       <Stack.Screen

package/dist/templates/default/{app → src/app}/(app)/(tabs)/(search)/index.tsx

@@ -1,17 +1,8 @@
 import { useMemo, useState } from "react";
 import { router, Stack } from "expo-router";
+import { Host, ScrollView, Button, Text, VStack, HStack, Spacer, Image } from "@expo/ui/swift-ui";
 import {
-  Host,
-  ScrollView,
-  Button,
-  Text,
-  VStack,
-  HStack,
-  Spacer,
-  Image,
-  ContentUnavailableView,
-} from "@expo/ui/swift-ui";
-import {
+  accessibilityHidden,
   background,
   buttonStyle,
   clipShape,
@@ -24,10 +15,12 @@ import {
 import type { SFSymbol } from "sf-symbols-typescript";
 
 import { useDynamicFont } from "@/lib/dynamic-font";
+import { useSymbolSize } from "@/lib/dynamic-symbol-size";
 import { useColors } from "@/hooks/use-theme";
 import { useDebounce } from "@/hooks/use-debounce";
 import { useDebugEnabled } from "@/lib/preferences";
 import { haptics } from "@/lib/haptics";
+import { ContentUnavailable } from "@/components/ui/content-unavailable";
 
 type Destination = {
   title: string;
@@ -114,12 +107,13 @@ function score(d: Destination, query: string): number {
   if (title.startsWith(q)) return 80;
   if (title.includes(q)) return 60;
   if (d.subtitle.toLowerCase().includes(q)) return 40;
-  if (d.keywords.includes(q)) return 20;
+  if (d.keywords.toLowerCase().includes(q)) return 20;
   return 0;
 }
 
 export default function SearchScreen() {
   const dfont = useDynamicFont();
+  const symbolSize = useSymbolSize();
   const colors = useColors();
   const [raw, setRaw] = useState("");
   const query = useDebounce(raw, DEBOUNCE_MS);
@@ -133,11 +127,11 @@ export default function SearchScreen() {
   const results = useMemo(() => {
     if (query.trim().length === 0) return destinations;
     const trimmed = query.trim();
-    return destinations
-      .map((d) => ({ d, s: score(d, trimmed) }))
-      .filter(({ s }) => s > 0)
-      .toSorted((a, b) => b.s - a.s)
-      .map(({ d }) => d);
+    const scored = destinations.map((d) => ({ d, s: score(d, trimmed) })).filter(({ s }) => s > 0);
+    // `.toSorted` is ES2023 and not in Hermes V1 (default in SDK 56); `.sort`
+    // mutates in place, and `.filter` above already returned a fresh array.
+    scored.sort((a, b) => b.s - a.s);
+    return scored.map(({ d }) => d);
   }, [query, destinations]);
 
   const open = (href: Destination["href"]) => {
@@ -155,10 +149,10 @@ export default function SearchScreen() {
     <>
       <Stack.SearchBar
         placement="automatic"
-        placeholder="Search the app"
+        placeholder="Search screens"
         onChangeText={(e) => setRaw(e.nativeEvent.text)}
       />
-      <Host style={{ flex: 1, backgroundColor: colors.background }}>
+      <Host testID="search-screen" style={{ flex: 1, backgroundColor: colors.background }}>
         <ScrollView
           modifiers={[scrollDismissesKeyboard("interactively"), tint(colors.primary as string)]}
         >
@@ -168,7 +162,8 @@ export default function SearchScreen() {
             modifiers={[padding({ horizontal: 24, top: 16, bottom: 40 })]}
           >
             {results.length === 0 ? (
-              <ContentUnavailableView
+              <ContentUnavailable
+                testID="search-empty"
                 title="No results"
                 systemImage="magnifyingglass"
                 description={`Nothing matches "${query.trim()}"`}
@@ -181,9 +176,10 @@ export default function SearchScreen() {
                 {results.map((d) => (
                   <Button
                     key={d.href as string}
+                    testID={`search-result-${d.title.toLowerCase().replace(/\s+/g, "-")}`}
                     modifiers={[
                       buttonStyle("plain"),
-                      frame({ maxWidth: 10000 }),
+                      frame({ maxWidth: Infinity }),
                       background(colors.muted as string),
                       clipShape("capsule"),
                     ]}
@@ -193,11 +189,16 @@ export default function SearchScreen() {
                       spacing={14}
                       alignment="center"
                       modifiers={[
-                        frame({ maxWidth: 10000 }),
+                        frame({ maxWidth: Infinity }),
                         padding({ horizontal: 16, vertical: 12 }),
                       ]}
                     >
-                      <Image systemName={d.icon} size={20} color={colors.foreground as string} />
+                      <Image
+                        systemName={d.icon}
+                        size={symbolSize(20)}
+                        color={colors.foreground as string}
+                        modifiers={[accessibilityHidden(true)]}
+                      />
                       <VStack alignment="leading" spacing={2}>
                         <Text
                           modifiers={[
@@ -219,8 +220,9 @@ export default function SearchScreen() {
                       <Spacer />
                       <Image
                         systemName="chevron.right"
-                        size={13}
+                        size={symbolSize(13)}
                         color={colors.mutedForeground as string}
+                        modifiers={[accessibilityHidden(true)]}
                       />
                     </HStack>
                   </Button>

package/dist/templates/default/{app → src/app}/(app)/(tabs)/_layout.tsx

@@ -6,7 +6,7 @@ import { haptics } from "@/lib/haptics";
 import { LoadingScreen } from "@/components/ui/loading-screen";
 
 export function SuspenseFallback() {
-  return <LoadingScreen />;
+  return <LoadingScreen testID="tabs-loading" />;
 }
 
 export default function TabLayout() {
@@ -47,12 +47,11 @@ export default function TabLayout() {
       >
         <NativeTabs.Trigger.Icon sf={{ default: "house", selected: "house.fill" }} />
         <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
-        <NativeTabs.Trigger.Badge hidden />
       </NativeTabs.Trigger>
 
       <NativeTabs.Trigger
         name="settings"
-        contentStyle={{ backgroundColor: colors.background as string }}
+        contentStyle={{ backgroundColor: colors.background }}
         listeners={{
           tabPress: () => haptics.light(),
         }}
@@ -64,7 +63,7 @@ export default function TabLayout() {
       <NativeTabs.Trigger
         name="(search)"
         role="search"
-        contentStyle={{ backgroundColor: colors.background as string }}
+        contentStyle={{ backgroundColor: colors.background }}
         listeners={{
           tabPress: () => haptics.light(),
         }}