create-techtiten-app 0.1.0 → 0.2.0

package/README.md

@@ -6,6 +6,8 @@ One command for a new app, with the same structure every time:
 npx create-techtiten-app my-app
 ```
 
+![What you get: the starter phone screens, website and admin panel](https://raw.githubusercontent.com/codewitharun/create-techtiten-app/main/docs/screens.png)
+
 ```
 my-app/
 ├─ apps/mobile        Expo (latest SDK), Expo Router, TypeScript
@@ -16,16 +18,54 @@ my-app/
 └─ AGENTS.md, STATUS.md, .gitignore (secrets blocked)
 ```
 
-## It asks
-| Question | Options |
+## Options
+Run `npx create-techtiten-app --help` any time to see them all. It asks these questions, or you pass them as flags:
+
+| Question | Flag | Choices |
+|---|---|---|
+| Display name | `--name="My App"` | anything |
+| Package id | `--package=com.techtiten.myapp` | permanent once on Play |
+| Web app | `--web` / `--no-web` | Next.js: website + `/admin` + `/api` |
+| Navigation | `--nav=stack` / `--nav=tabs` | stack, bottom tabs |
+| State | `--state=zustand` / `--state=redux` | both with TanStack Query |
+| Color theme | `--theme=<preset>` | `techtiten`, `ocean`, `sunset`, `royal`, `mono`, `retro` (green LCD) |
+| Brand color | `--brand=#FF3366` | optional, replaces the preset's brand color |
+| Font | `--font=<font>` | `system`, `inter`, `poppins`, `space-grotesk`, `pixel` (Press Start 2P) |
+| Ads | `--ads` / `--no-ads` | AdMob banner, test ads in development |
+
+Other flags: `--yes` (no questions), `--skip-install`, `--no-git`, `--help`, `--version`.
+
+### Defaults (what you get if you just press Enter, or pass `--yes`)
+| Option | Default |
 |---|---|
-| Display name, package id | e.g. `Retro Games`, `com.techtiten.retrogames` |
-| Web | Next.js app for website + admin (basic auth) + API (health, cron jobs) |
-| State | Zustand + TanStack Query (default) or Redux Toolkit + TanStack Query |
-| Ads | AdMob banner (test ads in dev) |
+| Display name | folder name in Title Case (`my-app` → `My App`) |
+| Package id | `com.techtiten.` + folder name without dashes (`com.techtiten.myapp`) |
+| Web app | yes |
+| Navigation | stack |
+| State | Zustand + TanStack Query |
+| Theme | `techtiten` (light + dark, follows the phone's setting) |
+| Brand color | from the theme |
+| Font | system |
+| Ads | no |
+
+### Color themes
+![Color theme presets in light and dark](https://raw.githubusercontent.com/codewitharun/create-techtiten-app/main/docs/themes.png)
+
+Your colors end up in `packages/theme/src/colors.ts`: one file, used by the phone app and the website. Change any value there later.
+
+### Fonts
+![Font options](https://raw.githubusercontent.com/codewitharun/create-techtiten-app/main/docs/fonts.png)
+
+
+```
+npx create-techtiten-app retro-games --yes --no-web --ads --theme=retro --font=pixel --nav=tabs
+npx create-techtiten-app shop --yes --web --theme=sunset --brand=#FF3366 --font=poppins --state=redux
+```
+
+Every generated project also has `npm run format` (Prettier), `npm run upgrade:mobile` (latest Expo SDK) and `npm run upgrade:web` (latest Next.js).
 
-Skip the questions: `npx create-techtiten-app my-app --yes --web --state=zustand --ads --name="My App" --package=com.techtiten.myapp`
-Other flags: `--no-web`, `--no-ads`, `--skip-install`, `--no-git`.
+## Add an option to this CLI
+All options live in one list (`OPTIONS` in `bin/index.mjs`). Theme presets and fonts are in `bin/presets.mjs`. Add an entry and it appears in the questions, the flags and `--help`.
 
 ## Always the latest
 - The base apps come from `create-expo-app@latest` and `create-next-app@latest`, so a new project starts on the newest Expo SDK and Next.js.
@@ -35,7 +75,7 @@ Other flags: `--no-web`, `--no-ads`, `--skip-install`, `--no-git`.
 - One React version for the whole repo (web is pinned to the version Expo installed), so hooks never break.
 
 ## What you get
-**Mobile:** theme provider (system/light/dark, saved), UI primitives (Screen, Card, Text, Button with haptics), state demo, API client + TanStack Query hook, release signing plugin (CI secrets or `credentials/signing.properties`), optional AdMob banner.
+**Mobile:** Reanimated 4 + Worklets + Gesture Handler (SDK-matched, root view already wrapped), theme provider (system/light/dark, saved), UI primitives (Screen, Card, Text, Button with haptics), state demo, API client + TanStack Query hook, release signing plugin (CI secrets or `credentials/signing.properties`), optional AdMob banner.
 
 **Web:** landing page using the same theme colors, `/admin` dashboard behind `ADMIN_USER`/`ADMIN_PASSWORD` (`src/proxy.ts`), `GET /api/health` (shared zod schema), `POST /api/cron/[job]` protected by `CRON_API_KEY` for outside schedulers (Vercel functions are short-lived).
 

package/bin/index.mjs

@@ -1,30 +1,126 @@
 #!/usr/bin/env node
 // create-techtiten-app: scaffolds an npm-workspaces monorepo
-//   apps/mobile  Expo (latest SDK, Expo Router, typed)        always
-//   apps/web     Next.js (latest): website + /admin + /api   optional
-//   packages/theme   colors, spacing, radius, fonts          shared
-//   packages/shared  functions, types, zod schemas           shared
+//   apps/mobile      Expo (latest SDK, Expo Router, typed)        always
+//   apps/web         Next.js (latest): website + /admin + /api    optional
+//   packages/theme   colors (preset), spacing, radius, fonts      shared
+//   packages/shared  functions, types, zod schemas                shared
 // Latest versions every time: the base apps come from create-expo-app / create-next-app,
 // and native-aware packages are added with `npx expo install` (SDK-matched). Nothing native
 // is committed: android/ and ios/ are generated at build time (CNG).
+//
+// Every option lives in OPTIONS below: the prompts, the flags and --help are all built from it,
+// so a new feature only has to be added once.
 import * as p from '@clack/prompts';
 import pc from 'picocolors';
 import { spawnSync } from 'node:child_process';
 import { existsSync, mkdirSync, readdirSync, readFileSync, renameSync, rmSync, statSync, writeFileSync } from 'node:fs';
 import { dirname, join, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { FONTS, THEMES, buildColors, isHex } from './presets.mjs';
 
-const TPL = resolve(dirname(fileURLToPath(import.meta.url)), '../templates');
-const argv = process.argv.slice(2);
-const flag = (name) => argv.includes(`--${name}`);
-const opt = (name) => argv.find((a) => a.startsWith(`--${name}=`))?.split('=').slice(1).join('=');
-const positional = argv.find((a) => !a.startsWith('--'));
-const YES = flag('yes') || flag('y');
+const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const TPL = join(ROOT, 'templates');
+const VERSION = JSON.parse(readFileSync(join(ROOT, 'package.json'), 'utf8')).version;
 
 const slugify = (s) => s.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
 const titleCase = (s) => s.replace(/[-_]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
-const cancel = (v) => { if (p.isCancel(v)) { p.cancel('Cancelled.'); process.exit(0); } return v; };
+const choices = (obj) => Object.entries(obj).map(([value, o]) => ({ value, label: o.label, hint: o.hint }));
+
+// ---------------------------------------------------------------- options (single source of truth)
+const OPTIONS = [
+  { key: 'name', kind: 'text', flag: '--name=<text>', help: 'App display name (under the icon)', def: (a) => titleCase(a.slug), message: 'App display name' },
+  {
+    key: 'package', kind: 'text', flag: '--package=<id>', help: 'Android package / iOS bundle id (permanent once on Play)',
+    def: (a) => `com.techtiten.${a.slug.replace(/-/g, '')}`, message: 'Android package / iOS bundle id',
+    validate: (v) => (/^[a-z][a-z0-9_]*(\.[a-z][a-z0-9_]*)+$/.test(v ?? '') ? undefined : 'Like com.techtiten.myapp (lowercase, dots)'),
+  },
+  { key: 'web', kind: 'bool', flag: '--web / --no-web', help: 'Next.js app next to the phone app: website + /admin panel + /api backend', def: () => true, message: 'Add a Next.js app (website + admin panel + API)?' },
+  {
+    key: 'nav', kind: 'select', flag: '--nav=<stack|tabs>', help: 'Navigation layout', def: () => 'stack', message: 'Navigation',
+    options: [{ value: 'stack', label: 'Stack', hint: 'screens push on top of each other' }, { value: 'tabs', label: 'Bottom tabs', hint: 'Home + Settings tabs, add more in app/(tabs)' }],
+  },
+  {
+    key: 'state', kind: 'select', flag: '--state=<zustand|redux>', help: 'State management (both come with TanStack Query for API data)', def: () => 'zustand', message: 'State management',
+    options: [{ value: 'zustand', label: 'Zustand + TanStack Query', hint: 'recommended: tiny stores' }, { value: 'redux', label: 'Redux Toolkit + TanStack Query', hint: 'more structure, Redux DevTools' }],
+  },
+  { key: 'theme', kind: 'select', flag: '--theme=<preset>', help: 'Color theme preset (light + dark)', def: () => 'techtiten', message: 'Color theme', options: choices(THEMES) },
+  {
+    key: 'brand', kind: 'text', flag: '--brand=<#RRGGBB>', help: 'Optional: your own brand color instead of the preset\'s', def: () => '', message: 'Custom brand color? (#RRGGBB, empty = use the preset)',
+    validate: (v) => (!v || isHex(v) ? undefined : 'Like #00C389, or leave empty'),
+  },
+  { key: 'font', kind: 'select', flag: '--font=<font>', help: 'App font (phone app and website)', def: () => 'system', message: 'Font', options: choices(FONTS) },
+  { key: 'ads', kind: 'bool', flag: '--ads / --no-ads', help: 'Google AdMob banner (test ads in development)', def: () => false, message: 'Google AdMob ads?' },
+];
+
+const TOOL_FLAGS = [
+  ['--yes, -y', 'Skip the questions, use defaults (or the flags you pass)'],
+  ['--skip-install', 'Only write files, don\'t run npm install'],
+  ['--no-git', 'Don\'t run git init / first commit'],
+  ['--help, -h', 'Show this help'],
+  ['--version, -v', 'Show the version'],
+];
+
+function printHelp() {
+  const line = (a, b) => `  ${pc.cyan(a.padEnd(28))} ${b}`;
+  console.log(`
+${pc.bold('create-techtiten-app')} v${VERSION}
+Scaffold an Expo app (+ optional Next.js web/admin/API) with a shared theme and shared logic.
+Always uses the latest Expo SDK and Next.js.
+
+${pc.bold('Usage')}
+  npx create-techtiten-app ${pc.dim('<folder>')} ${pc.dim('[options]')}
+
+${pc.bold('Options')}
+${OPTIONS.map((o) => line(o.flag, `${o.help}${o.options ? '' : ''}`)).join('\n')}
+
+${pc.bold('Choices')}
+${line('themes', Object.entries(THEMES).map(([k, t]) => `${k} (${t.label})`).join(', '))}
+${line('fonts', Object.keys(FONTS).join(', '))}
+
+${pc.bold('Other')}
+${TOOL_FLAGS.map(([a, b]) => line(a, b)).join('\n')}
+
+${pc.bold('Examples')}
+  npx create-techtiten-app my-app
+  npx create-techtiten-app retro-games --yes --no-web --ads --theme=retro --font=pixel --nav=tabs
+  npx create-techtiten-app shop --yes --web --theme=sunset --brand=#FF3366 --font=poppins --state=redux
+`);
+}
+
+// ---------------------------------------------------------------- args
+const argv = process.argv.slice(2);
+const has = (...names) => names.some((n) => argv.includes(n));
+const val = (name) => argv.find((a) => a.startsWith(`--${name}=`))?.split('=').slice(1).join('=');
+const positional = argv.find((a) => !a.startsWith('-'));
+const YES = has('--yes', '-y');
+
+function fromFlags(o) {
+  if (o.kind === 'bool') return has(`--${o.key}`) ? true : has(`--no-${o.key}`) ? false : undefined;
+  return val(o.key);
+}
+
+function checkFlag(o, v) {
+  if (v === undefined) return;
+  if (o.kind === 'select' && !o.options.some((x) => x.value === v)) fail(`--${o.key}=${v} isn't valid. Choose: ${o.options.map((x) => x.value).join(', ')}`);
+  const err = o.validate?.(v);
+  if (err) fail(`--${o.key}: ${err}`);
+}
 
+function fail(msg) { p.cancel(msg); process.exit(1); }
+const cancel = (v) => { if (p.isCancel(v)) fail('Cancelled.'); return v; };
+
+async function ask(o, answers) {
+  const given = fromFlags(o);
+  checkFlag(o, given);
+  if (given !== undefined) return given;
+  const def = o.def(answers);
+  if (YES) return def;
+  if (o.kind === 'bool') return cancel(await p.confirm({ message: o.message, initialValue: def }));
+  if (o.kind === 'select') return cancel(await p.select({ message: o.message, options: o.options, initialValue: def }));
+  return cancel(await p.text({ message: o.message, initialValue: def, placeholder: def || undefined, validate: o.validate }));
+}
+
+// ---------------------------------------------------------------- helpers
 function run(cmd, args, cwd, { quiet = false, env = {} } = {}) {
   const r = spawnSync(cmd, args, { cwd, stdio: quiet ? 'pipe' : 'inherit', shell: process.platform === 'win32', env: { ...process.env, CI: '1', EXPO_NO_TELEMETRY: '1', NEXT_TELEMETRY_DISABLED: '1', ...env } });
   if (r.status !== 0) {
@@ -34,8 +130,8 @@ function run(cmd, args, cwd, { quiet = false, env = {} } = {}) {
   return String(r.stdout ?? '');
 }
 
-// Copy a template folder, replacing __TOKENS__ in text files. Files named *.tpl lose the suffix;
-// "_gitignore" becomes ".gitignore" (npm strips real .gitignore files from published packages).
+// Copy a template folder, replacing __TOKENS__ in text files. "_gitignore" -> ".gitignore",
+// "_github" -> ".github" (npm drops real dot-files like .gitignore from published packages).
 function copyTemplate(from, to, vars) {
   if (!existsSync(from)) return;
   for (const name of readdirSync(from)) {
@@ -55,33 +151,64 @@ function copyTemplate(from, to, vars) {
 const readJson = (f) => JSON.parse(readFileSync(f, 'utf8'));
 const writeJson = (f, o) => writeFileSync(f, JSON.stringify(o, null, 2) + '\n');
 
+// Generated files for the theme preset and the font (phone + web).
+function writeThemeAndFonts(target, a) {
+  const colors = buildColors(a.theme, a.brand);
+  writeFileSync(join(target, 'packages/theme/src/colors.ts'),
+    `// ${THEMES[a.theme].label} preset${a.brand ? `, brand ${a.brand}` : ''} (create-techtiten-app). Edit freely.\nexport const colors = ${JSON.stringify(colors, null, 2)} as const;\n`);
+
+  const f = FONTS[a.font];
+  const m = join(target, 'apps/mobile/src/theme/fonts.ts');
+  if (!f.pkg) {
+    writeFileSync(m, `// System font (San Francisco / Roboto): nothing to load.\nexport const fonts: Record<'regular' | 'medium' | 'bold' | 'black', string | undefined> = { regular: undefined, medium: undefined, bold: undefined, black: undefined };\nexport const useAppFonts = () => true;\n/** Multiplies every font size (wide fonts like pixel ones need smaller text). */\nexport const fontScale = 1;\n`);
+  } else {
+    const names = [...new Set(Object.values(f.weights))];
+    writeFileSync(m, `// ${f.label} from ${f.pkg}. Text/Button pick the family per weight.\nimport { useFonts, ${names.join(', ')} } from '${f.pkg}';\n\nexport const fonts: Record<'regular' | 'medium' | 'bold' | 'black', string | undefined> = ${JSON.stringify(f.weights)};\n\n/** true once the font files are loaded (the root layout waits for it). */\nexport function useAppFonts() {\n  const [loaded, error] = useFonts({ ${names.join(', ')} });\n  return loaded || !!error;\n}\n\n/** Multiplies every font size (wide fonts like pixel ones need smaller text). */\nexport const fontScale = ${f.scale ?? 1};\n`);
+  }
+  if (a.web) {
+    const w = join(target, 'apps/web/src/app/fonts.ts');
+    if (!f.next) writeFileSync(w, `// System font.\nexport const appFontClass = '';\n`);
+    else {
+      const opts = { subsets: ['latin'], variable: '--font-app', display: 'swap', ...(f.nextWeights ? { weight: f.nextWeights } : {}) };
+      // next/font reads these options at build time and needs a plain object literal (unquoted keys).
+      const literal = '{ ' + Object.entries(opts).map(([k, v]) => `${k}: ${JSON.stringify(v).replace(/"/g, "'")}`).join(', ') + ' }';
+      writeFileSync(w, `// ${f.label} via next/font (self-hosted at build time, no layout shift).\nimport { ${f.next} } from 'next/font/google';\n\nconst font = ${f.next}(${literal});\nexport const appFontClass = font.variable;\n`);
+    }
+  }
+}
+
+// ---------------------------------------------------------------- main
 async function main() {
+  if (has('--help', '-h')) return printHelp();
+  if (has('--version', '-v')) return console.log(VERSION);
+
   console.log();
-  p.intro(pc.bgGreen(pc.black(' create-techtiten-app ')));
+  p.intro(pc.bgGreen(pc.black(` create-techtiten-app v${VERSION} `)));
 
   const dirName = positional ?? (YES ? 'my-app' : cancel(await p.text({ message: 'Project folder name', placeholder: 'my-app', validate: (v) => (slugify(v || '') ? undefined : 'Required') })));
   const slug = slugify(dirName);
   const target = resolve(process.cwd(), dirName);
-  if (existsSync(target) && readdirSync(target).length) { p.cancel(`${dirName} already exists and isn't empty.`); process.exit(1); }
-
-  const displayName = opt('name') ?? (YES ? titleCase(slug) : cancel(await p.text({ message: 'App display name', initialValue: titleCase(slug) })));
-  const packageId = opt('package') ?? (YES ? `com.techtiten.${slug.replace(/-/g, '')}` : cancel(await p.text({
-    message: 'Android package / iOS bundle id', initialValue: `com.techtiten.${slug.replace(/-/g, '')}`,
-    validate: (v) => (/^[a-z][a-z0-9_]*(\.[a-z][a-z0-9_]*)+$/.test(v) ? undefined : 'Like com.techtiten.myapp (lowercase, dots)'),
-  })));
-  const web = flag('web') ? true : flag('no-web') ? false : YES ? true : cancel(await p.confirm({ message: 'Add a Next.js app (website + admin panel + API) next to the mobile app?', initialValue: true }));
-  const state = opt('state') ?? (YES ? 'zustand' : cancel(await p.select({
-    message: 'State management',
-    options: [
-      { value: 'zustand', label: 'Zustand + TanStack Query', hint: 'recommended: tiny stores, server data cached' },
-      { value: 'redux', label: 'Redux Toolkit + TanStack Query', hint: 'more structure, Redux DevTools' },
-    ],
-  })));
-  const ads = flag('ads') ? true : flag('no-ads') ? false : YES ? false : cancel(await p.confirm({ message: 'Google AdMob ads (banner component, test ads in dev)?', initialValue: false }));
-  const install = !flag('skip-install');
+  if (existsSync(target) && readdirSync(target).length) fail(`${dirName} already exists and isn't empty.`);
 
+  const a = { slug };
+  for (const o of OPTIONS) a[o.key] = await ask(o, a);
+  if (a.brand && !a.brand.startsWith('#')) a.brand = `#${a.brand}`;
+
+  if (!YES) {
+    p.note([
+      `Name       ${a.name}  (${a.package})`,
+      `Apps       mobile${a.web ? ' + web (site, admin, API)' : ''}`,
+      `Navigation ${a.nav}    State ${a.state}`,
+      `Theme      ${THEMES[a.theme].label}${a.brand ? ` with brand ${a.brand}` : ''}    Font ${FONTS[a.font].label}`,
+      `Ads        ${a.ads ? 'AdMob' : 'none'}`,
+    ].join('\n'), 'Summary');
+    if (!cancel(await p.confirm({ message: 'Create it?', initialValue: true }))) fail('Cancelled.');
+  }
+
+  const install = !has('--skip-install');
+  const { name: displayName, package: packageId, web, state, ads } = a;
   const scope = `@${slug}`;
-  const vars = { APP_SLUG: slug, APP_NAME: displayName, PACKAGE_ID: packageId, SCOPE: scope, STATE: state, YEAR: String(new Date().getFullYear()), WEB_ENABLED: web ? 'true' : 'false' };
+  const vars = { APP_SLUG: slug, APP_NAME: displayName, PACKAGE_ID: packageId, SCOPE: scope, STATE: state, YEAR: String(new Date().getFullYear()), WEB_ENABLED: web ? 'true' : 'false', THEME_LABEL: THEMES[a.theme].label };
   const s = p.spinner();
 
   // 1. Root + shared packages
@@ -90,7 +217,7 @@ async function main() {
   copyTemplate(join(TPL, 'packages'), join(target, 'packages'), vars);
   if (!web) rmSync(join(target, '.github/workflows/web-check.yml'), { force: true });
   const rootPkg = readJson(join(target, 'package.json'));
-  if (!web) { delete rootPkg.scripts.web; delete rootPkg.scripts['build:web']; }
+  if (!web) { delete rootPkg.scripts.web; delete rootPkg.scripts['build:web']; delete rootPkg.scripts['upgrade:web']; }
   writeJson(join(target, 'package.json'), rootPkg);
 
   // 2. Mobile: latest Expo blank TypeScript app, then our layer on top
@@ -105,6 +232,7 @@ async function main() {
   rmSync(join(m, '.git'), { recursive: true, force: true });
   copyTemplate(join(TPL, 'mobile/common'), m, vars);
   writeJson(join(m, 'config/base.json'), sdkBase);
+  copyTemplate(join(TPL, `mobile/nav-${a.nav}`), m, vars);
   copyTemplate(join(TPL, `mobile/${state}`), m, vars);
   copyTemplate(join(TPL, ads ? 'mobile/ads' : 'mobile/noads'), m, vars);
   const mp = readJson(join(m, 'package.json'));
@@ -129,7 +257,7 @@ async function main() {
     const nc = join(w, 'next.config.ts');
     const tp = `transpilePackages: ['${scope}/theme', '${scope}/shared'],`;
     if (existsSync(nc) && /const nextConfig: NextConfig = \{/.test(readFileSync(nc, 'utf8'))) {
-      writeFileSync(nc, readFileSync(nc, 'utf8').replace(/const nextConfig: NextConfig = \{/, (m) => `${m}\n  ${tp}`));
+      writeFileSync(nc, readFileSync(nc, 'utf8').replace(/const nextConfig: NextConfig = \{/, (x) => `${x}\n  ${tp}`));
     } else {
       writeFileSync(nc, `import type { NextConfig } from 'next';\n\nconst nextConfig: NextConfig = {\n  ${tp}\n};\n\nexport default nextConfig;\n`);
     }
@@ -141,13 +269,17 @@ async function main() {
     s.stop('Next.js app created');
   }
 
+  writeThemeAndFonts(target, a);
+  const pluginList = (added = []) => [...new Set(['expo-router', ...added, ...(ads ? ['react-native-google-mobile-ads'] : []), './plugins/withSigning.js'])];
+
   // 4. Install: one root install, then SDK-matched native packages via expo install
   if (install) {
     s.start('Installing (one install for all workspaces)');
     run('npm', ['install', '--no-audit', '--no-fund', '--loglevel=error'], target, { quiet: true });
     s.message('Adding Expo packages matched to this SDK');
-    const expoPkgs = ['expo-router', 'expo-linking', 'expo-constants', 'expo-status-bar', 'expo-haptics', 'expo-system-ui', 'react-native-safe-area-context', 'react-native-screens', '@react-native-async-storage/async-storage', 'react-dom', 'react-native-web'];
+    const expoPkgs = ['expo-router', 'expo-linking', 'expo-constants', 'expo-status-bar', 'expo-haptics', 'expo-system-ui', 'expo-font', '@expo/vector-icons', 'react-native-safe-area-context', 'react-native-screens', 'react-native-reanimated', 'react-native-worklets', 'react-native-gesture-handler', '@react-native-async-storage/async-storage', 'react-dom', 'react-native-web'];
     if (ads) expoPkgs.push('react-native-google-mobile-ads');
+    if (FONTS[a.font].pkg) expoPkgs.push(FONTS[a.font].pkg);
     const expoArgs = ['expo', 'install', ...expoPkgs, '--', '--no-audit', '--no-fund', '--loglevel=error'];
     // expo install adds config plugins itself, but can't edit app.config.ts. Give it a temporary
     // app.json, then copy the plugins it added into config/plugins.json (read by app.config.ts).
@@ -157,7 +289,7 @@ async function main() {
       run('npx', expoArgs, m, { quiet: true });
     } catch {
       // Expo's version API unreachable (proxy/offline): use the versions bundled with the installed SDK.
-      s.message('Expo API unreachable, using the SDK\'s bundled version list');
+      s.message("Expo API unreachable, using the SDK's bundled version list");
       run('npx', expoArgs, m, { quiet: true, env: { EXPO_OFFLINE: '1' } });
     }
     const added = (readJson(join(m, 'app.json')).expo.plugins ?? []).map((x) => (Array.isArray(x) ? x[0] : x));
@@ -166,8 +298,9 @@ async function main() {
     const statePkgs = state === 'redux' ? ['@reduxjs/toolkit', 'react-redux', '@tanstack/react-query'] : ['zustand', '@tanstack/react-query'];
     run('npm', ['install', ...statePkgs, '-w', `${scope}/mobile`, '--no-audit', '--no-fund', '--loglevel=error'], target, { quiet: true });
     run('npm', ['install', 'zod', '-w', `${scope}/shared`, '--no-audit', '--no-fund', '--loglevel=error'], target, { quiet: true });
+    run('npm', ['install', '-D', 'prettier', '--no-audit', '--no-fund', '--loglevel=error'], target, { quiet: true });
     // Now that the packages exist, turn their config plugins on.
-    writeJson(join(m, 'config/plugins.json'), [...new Set(['expo-router', ...added, ...(ads ? ['react-native-google-mobile-ads'] : []), './plugins/withSigning.js'])]);
+    writeJson(join(m, 'config/plugins.json'), pluginList(added));
     if (web) {
       // One React for the whole repo: pin web's react/react-dom to the version Expo installed,
       // otherwise npm can install two Reacts and hooks break ("Invalid hook call").
@@ -183,16 +316,17 @@ async function main() {
       run('npm', ['install', '--no-audit', '--no-fund', '--loglevel=error'], target, { quiet: true });
     }
     s.stop('Installed');
+  } else {
+    writeJson(join(m, 'config/plugins.json'), pluginList());
   }
 
-  if (!install) writeJson(join(m, 'config/plugins.json'), ['expo-router', './plugins/withSigning.js', ...(ads ? ['react-native-google-mobile-ads'] : [])]);
-
-  // 5. Git
-  if (!flag('no-git')) {
+  // 5. Git (uses your git name/email; falls back to a neutral author if none is set)
+  if (!has('--no-git')) {
     try {
       run('git', ['init', '-b', 'main'], target, { quiet: true });
       run('git', ['add', '-A'], target, { quiet: true });
-      run('git', ['-c', 'user.name=create-techtiten-app', '-c', 'user.email=noreply@techtiten.com', 'commit', '-m', 'Initial commit from create-techtiten-app', '--no-verify'], target, { quiet: true });
+      try { run('git', ['commit', '-m', 'Initial commit from create-techtiten-app', '--no-verify'], target, { quiet: true }); }
+      catch { run('git', ['-c', 'user.name=create-techtiten-app', '-c', 'user.email=noreply@techtiten.com', 'commit', '-m', 'Initial commit from create-techtiten-app', '--no-verify'], target, { quiet: true }); }
     } catch { p.log.warn('git init skipped (git missing or commit failed). Run git init yourself.'); }
   }
 
@@ -202,9 +336,10 @@ async function main() {
     'npm run mobile        # Expo dev server (press a for Android)',
     web ? 'npm run web           # Next.js on http://localhost:3000 (/admin, /api/health)' : null,
     'npm run typecheck     # all workspaces',
+    'npm run format        # prettier',
     ads ? 'Ads need a dev build (npm run android), not Expo Go.' : null,
   ].filter(Boolean).join('\n'), 'Next steps');
   p.outro(`${pc.green('Done.')} ${displayName} is ready in ${pc.cyan(rel)}`);
 }
 
-main().catch((e) => { p.cancel(e.message); process.exit(1); });
+main().catch((e) => fail(e.message));

package/bin/presets.mjs

@@ -0,0 +1,68 @@
+// Theme presets and fonts. Add one here and it shows up in the prompts and in --help.
+
+const neutrals = {
+  cool: {
+    light: { background: '#F7F8FA', surface: '#FFFFFF', surfaceAlt: '#EEF0F3', border: '#E2E5EA', text: '#0B0D12', textMuted: '#5B6270' },
+    dark: { background: '#0B0B12', surface: '#15151F', surfaceAlt: '#1D1D2A', border: '#2A2A38', text: '#ECEDF2', textMuted: '#9A9CAB' },
+  },
+  navy: {
+    light: { background: '#F5F8FC', surface: '#FFFFFF', surfaceAlt: '#EAF0F8', border: '#DCE4EF', text: '#0A1324', textMuted: '#55627A' },
+    dark: { background: '#0A1020', surface: '#121A2E', surfaceAlt: '#1A2440', border: '#26314F', text: '#E8EEF8', textMuted: '#93A0BA' },
+  },
+  warm: {
+    light: { background: '#FBF8F5', surface: '#FFFFFF', surfaceAlt: '#F4EEE8', border: '#EADFD5', text: '#1A120D', textMuted: '#6E6058' },
+    dark: { background: '#140F0C', surface: '#1E1713', surfaceAlt: '#2A201A', border: '#3A2D25', text: '#F3ECE6', textMuted: '#AE9F95' },
+  },
+  plum: {
+    light: { background: '#F8F7FC', surface: '#FFFFFF', surfaceAlt: '#EFECF9', border: '#E1DCF2', text: '#120E22', textMuted: '#5E5875' },
+    dark: { background: '#0E0B1A', surface: '#171328', surfaceAlt: '#211B37', border: '#2E2649', text: '#EEEAFB', textMuted: '#A29BBF' },
+  },
+  lcd: {
+    light: { background: '#C7D3A6', surface: '#BCC994', surfaceAlt: '#AFBD86', border: '#8F9D68', text: '#1E2A14', textMuted: '#4A5832' },
+    dark: { background: '#10160C', surface: '#182012', surfaceAlt: '#212B19', border: '#33402A', text: '#B8E07A', textMuted: '#7E9A57' },
+  },
+};
+
+const fixed = { danger: '#E5484D', warning: '#E9A049', success: '#2EAD5B' };
+
+// brand per mode: [brand, brandStrong, onBrand]
+export const THEMES = {
+  techtiten: { label: 'Techtiten', hint: 'mint green + purple (FitPrep / EzySplit feel)', neutral: 'cool', light: ['#00A372', '#008A60', '#FFFFFF'], dark: ['#00C389', '#00A372', '#04110C'], accent: '#7C5CFF' },
+  ocean: { label: 'Ocean', hint: 'calm blue, trusted (finance, productivity)', neutral: 'navy', light: ['#2F6FED', '#1F57C8', '#FFFFFF'], dark: ['#4D8DFF', '#2F6FED', '#06122A'], accent: '#00B8D9' },
+  sunset: { label: 'Sunset', hint: 'orange + pink, energetic (food, fitness)', neutral: 'warm', light: ['#F2552C', '#D4401B', '#FFFFFF'], dark: ['#FF6B4A', '#F2552C', '#1A0B06'], accent: '#FF4F8B' },
+  royal: { label: 'Royal', hint: 'violet, premium (education, lifestyle)', neutral: 'plum', light: ['#6A4CF0', '#5435D6', '#FFFFFF'], dark: ['#8B70FF', '#6A4CF0', '#0E0820'], accent: '#FF5CA8' },
+  mono: { label: 'Mono', hint: 'black & white, minimal (tools, portfolio)', neutral: 'cool', light: ['#111317', '#000000', '#FFFFFF'], dark: ['#F2F3F5', '#FFFFFF', '#0B0B12'], accent: '#7A808C' },
+  retro: { label: 'Retro LCD', hint: 'old-phone green screen (games, nostalgia)', neutral: 'lcd', light: ['#2F3B1E', '#1E2A14', '#C7D3A6'], dark: ['#9BD14A', '#B8E07A', '#10160C'], accent: '#5E7A2E' },
+};
+
+// Mobile: @expo-google-fonts/<pkg> exports; web: next/font/google import name + options.
+export const FONTS = {
+  system: { label: 'System', hint: 'San Francisco / Roboto, nothing to load' },
+  inter: { label: 'Inter', hint: 'clean UI font', pkg: '@expo-google-fonts/inter', weights: { regular: 'Inter_400Regular', medium: 'Inter_500Medium', bold: 'Inter_700Bold', black: 'Inter_800ExtraBold' }, next: 'Inter', nextWeights: null },
+  poppins: { label: 'Poppins', hint: 'round and friendly (consumer apps)', pkg: '@expo-google-fonts/poppins', weights: { regular: 'Poppins_400Regular', medium: 'Poppins_500Medium', bold: 'Poppins_700Bold', black: 'Poppins_800ExtraBold' }, next: 'Poppins', nextWeights: ['400', '500', '700', '800'] },
+  'space-grotesk': { label: 'Space Grotesk', hint: 'techy, modern', pkg: '@expo-google-fonts/space-grotesk', weights: { regular: 'SpaceGrotesk_400Regular', medium: 'SpaceGrotesk_500Medium', bold: 'SpaceGrotesk_700Bold', black: 'SpaceGrotesk_700Bold' }, next: 'Space_Grotesk', nextWeights: null },
+  pixel: { label: 'Press Start 2P', hint: 'pixel/8-bit (retro games)', scale: 0.72, pkg: '@expo-google-fonts/press-start-2p', weights: { regular: 'PressStart2P_400Regular', medium: 'PressStart2P_400Regular', bold: 'PressStart2P_400Regular', black: 'PressStart2P_400Regular' }, next: 'Press_Start_2P', nextWeights: ['400'] },
+};
+
+const hex = (h) => h.replace('#', '').padEnd(6, '0').slice(0, 6);
+const toRgb = (h) => [0, 2, 4].map((i) => parseInt(hex(h).slice(i, i + 2), 16));
+const toHex = (rgb) => '#' + rgb.map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('').toUpperCase();
+const shade = (h, f) => toHex(toRgb(h).map((v) => (f < 0 ? v * (1 + f) : v + (255 - v) * f)));
+const luminance = (h) => { const [r, g, b] = toRgb(h).map((v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }); return 0.2126 * r + 0.7152 * g + 0.0722 * b; };
+export const isHex = (v) => /^#?[0-9a-fA-F]{6}$/.test(v ?? '');
+
+/** { light: {...}, dark: {...} } colors for packages/theme. `brand` (#RRGGBB) overrides the preset's brand. */
+export function buildColors(themeKey, brand) {
+  const t = THEMES[themeKey];
+  const out = {};
+  for (const mode of ['light', 'dark']) {
+    let [b, strong, on] = t[mode];
+    if (brand) {
+      b = '#' + hex(brand).toUpperCase();
+      strong = shade(b, mode === 'light' ? -0.15 : 0.15);
+      on = luminance(b) > 0.45 ? '#0B0D12' : '#FFFFFF';
+    }
+    out[mode] = { ...neutrals[t.neutral][mode], brand: b, brandStrong: strong, onBrand: on, accent: t.accent, ...fixed };
+  }
+  return out;
+}

package/package.json

@@ -1,17 +1,40 @@
 {
   "name": "create-techtiten-app",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Scaffold a Techtiten app: Expo (Android/iOS) + optional Next.js (web, admin panel, API) with a shared theme and shared logic. Always on the latest Expo and Next.js.",
   "type": "module",
-  "bin": { "create-techtiten-app": "bin/index.mjs" },
-  "files": ["bin", "templates"],
-  "engines": { "node": ">=20.19" },
-  "keywords": ["expo", "react-native", "nextjs", "monorepo", "template", "create-app", "zustand", "redux"],
+  "bin": {
+    "create-techtiten-app": "bin/index.mjs"
+  },
+  "files": [
+    "bin",
+    "templates"
+  ],
+  "engines": {
+    "node": ">=20.19"
+  },
+  "keywords": [
+    "expo",
+    "react-native",
+    "nextjs",
+    "monorepo",
+    "template",
+    "create-app",
+    "zustand",
+    "redux"
+  ],
   "author": "Arun Kumar (Techtiten)",
   "license": "MIT",
-  "repository": { "type": "git", "url": "git+https://github.com/codewitharun/rnboilerplate.git" },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codewitharun/create-techtiten-app.git"
+  },
   "dependencies": {
     "@clack/prompts": "^1.8.1",
     "picocolors": "^1.1.1"
+  },
+  "homepage": "https://github.com/codewitharun/create-techtiten-app#readme",
+  "bugs": {
+    "url": "https://github.com/codewitharun/create-techtiten-app/issues"
   }
 }

package/templates/mobile/common/src/AppProviders.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { Providers } from '@/state/Providers';
+import { ThemeProvider } from '@/theme';
+import { useAppFonts } from '@/theme/fonts';
+
+/** Everything the app needs around it: gestures, safe area, state + query client, theme, fonts.
+ *  Reanimated/Worklets need no setup: babel-preset-expo adds their Babel plugin automatically. */
+export function AppProviders({ children }: { children: ReactNode }) {
+  const fontsLoaded = useAppFonts();
+  if (!fontsLoaded) return null; // the splash screen stays up until fonts are ready
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <SafeAreaProvider>
+        <Providers>
+          <ThemeProvider>{children}</ThemeProvider>
+        </Providers>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+}

package/templates/mobile/common/{app/index.tsx → src/screens/Home.tsx}

@@ -16,7 +16,7 @@ export default function Home() {
     <Screen>
       <Card>
         <Text size="xl" weight="black">Welcome to __APP_NAME__</Text>
-        <Text muted>Edit app/index.tsx to start. Colors come from packages/theme, helpers from packages/shared.</Text>
+        <Text muted>Edit src/screens/Home.tsx to start. Colors come from packages/theme, helpers from packages/shared.</Text>
       </Card>
 
       <Card>

package/templates/mobile/common/src/ui/index.tsx

@@ -1,6 +1,7 @@
 import { Pressable, Text as RNText, View, type PressableProps, type TextProps, type ViewProps } from 'react-native';
 import * as Haptics from 'expo-haptics';
 import { useTheme } from '@/theme';
+import { fontScale, fonts } from '@/theme/fonts';
 
 export function Screen({ style, ...rest }: ViewProps) {
   const t = useTheme();
@@ -14,7 +15,10 @@ export function Card({ style, ...rest }: ViewProps) {
 
 export function Text({ style, muted, size = 'md', weight = 'regular', ...rest }: TextProps & { muted?: boolean; size?: keyof ReturnType<typeof useTheme>['fontSize']; weight?: keyof ReturnType<typeof useTheme>['fontWeight'] }) {
   const t = useTheme();
-  return <RNText style={[{ color: muted ? t.colors.textMuted : t.colors.text, fontSize: t.fontSize[size], fontWeight: t.fontWeight[weight] }, style]} {...rest} />;
+  // Custom fonts carry their weight in the family name (fonts.bold…); the system font uses fontWeight.
+  const family = fonts[weight];
+  const fontSize = Math.round(t.fontSize[size] * fontScale);
+  return <RNText style={[{ color: muted ? t.colors.textMuted : t.colors.text, fontSize, lineHeight: Math.round(fontSize * (fontScale < 1 ? 1.6 : 1.35)) }, family ? { fontFamily: family } : { fontWeight: t.fontWeight[weight] }, style]} {...rest} />;
 }
 
 export function Button({ title, variant = 'primary', onPress, style, ...rest }: PressableProps & { title: string; variant?: 'primary' | 'ghost' }) {
@@ -31,7 +35,7 @@ export function Button({ title, variant = 'primary', onPress, style, ...rest }:
         alignItems: 'center', opacity: state.pressed ? 0.8 : 1,
       }, typeof style === 'function' ? style(state) : style]}
       {...rest}>
-      <RNText style={{ color: primary ? t.colors.onBrand : t.colors.text, fontWeight: t.fontWeight.bold, fontSize: t.fontSize.md }}>{title}</RNText>
+      <RNText style={[{ color: primary ? t.colors.onBrand : t.colors.text, fontSize: Math.round(t.fontSize.md * fontScale) }, fonts.bold ? { fontFamily: fonts.bold } : { fontWeight: t.fontWeight.bold }]}>{title}</RNText>
     </Pressable>
   );
 }

package/templates/mobile/{common → nav-stack}/app/_layout.tsx

@@ -1,8 +1,8 @@
 import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { Providers } from '@/state/Providers';
-import { ThemeProvider, useTheme } from '@/theme';
+import { AppProviders } from '@/AppProviders';
+import { useTheme } from '@/theme';
+import { fonts } from '@/theme/fonts';
 
 function ThemedStack() {
   const t = useTheme();
@@ -13,6 +13,7 @@ function ThemedStack() {
         screenOptions={{
           headerStyle: { backgroundColor: t.colors.background },
           headerTintColor: t.colors.text,
+          headerTitleStyle: { fontFamily: fonts.bold },
           headerShadowVisible: false,
           contentStyle: { backgroundColor: t.colors.background },
         }}>
@@ -25,12 +26,8 @@ function ThemedStack() {
 
 export default function RootLayout() {
   return (
-    <SafeAreaProvider>
-      <Providers>
-        <ThemeProvider>
-          <ThemedStack />
-        </ThemeProvider>
-      </Providers>
-    </SafeAreaProvider>
+    <AppProviders>
+      <ThemedStack />
+    </AppProviders>
   );
 }

package/templates/mobile/nav-stack/app/index.tsx

@@ -0,0 +1 @@
+export { default } from '@/screens/Home';

package/templates/mobile/nav-stack/app/settings.tsx

@@ -0,0 +1 @@
+export { default } from '@/screens/Settings';

package/templates/mobile/nav-tabs/app/(tabs)/_layout.tsx

@@ -0,0 +1,25 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Tabs } from 'expo-router';
+import { useTheme } from '@/theme';
+import { fonts } from '@/theme/fonts';
+
+export default function TabsLayout() {
+  const t = useTheme();
+  return (
+    <Tabs
+      screenOptions={{
+        headerStyle: { backgroundColor: t.colors.background },
+        headerTintColor: t.colors.text,
+        headerTitleStyle: { fontFamily: fonts.bold },
+        headerShadowVisible: false,
+        tabBarStyle: { backgroundColor: t.colors.surface, borderTopColor: t.colors.border },
+        tabBarActiveTintColor: t.colors.brand,
+        tabBarInactiveTintColor: t.colors.textMuted,
+        tabBarLabelStyle: { fontFamily: fonts.medium },
+        sceneStyle: { backgroundColor: t.colors.background },
+      }}>
+      <Tabs.Screen name="index" options={{ title: '__APP_NAME__', tabBarLabel: 'Home', tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color as string} size={size} /> }} />
+      <Tabs.Screen name="settings" options={{ title: 'Settings', tabBarIcon: ({ color, size }) => <Ionicons name="settings" color={color as string} size={size} /> }} />
+    </Tabs>
+  );
+}

package/templates/mobile/nav-tabs/app/(tabs)/index.tsx

@@ -0,0 +1 @@
+export { default } from '@/screens/Home';

package/templates/mobile/nav-tabs/app/(tabs)/settings.tsx

@@ -0,0 +1 @@
+export { default } from '@/screens/Settings';

package/templates/mobile/nav-tabs/app/_layout.tsx

@@ -0,0 +1,25 @@
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { AppProviders } from '@/AppProviders';
+import { useTheme } from '@/theme';
+
+function Root() {
+  const t = useTheme();
+  return (
+    <>
+      <StatusBar style={t.mode === 'dark' ? 'light' : 'dark'} />
+      {/* Tabs live in app/(tabs). Push full-screen pages (details, modals) on this stack. */}
+      <Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: t.colors.background } }}>
+        <Stack.Screen name="(tabs)" />
+      </Stack>
+    </>
+  );
+}
+
+export default function RootLayout() {
+  return (
+    <AppProviders>
+      <Root />
+    </AppProviders>
+  );
+}

package/templates/packages/theme/src/index.ts

@@ -1,37 +1,10 @@
 // One theme for the phone app and the website. Change a color here and both update.
 export type Mode = 'light' | 'dark';
 
-export const palette = {
-  brand: '#00C389',
-  brandStrong: '#00A372',
-  accent: '#7C5CFF',
-  danger: '#E5484D',
-  warning: '#E9A049',
-  success: '#2EAD5B',
-} as const;
-
-export const colors = {
-  light: {
-    background: '#F7F8FA',
-    surface: '#FFFFFF',
-    surfaceAlt: '#EEF0F3',
-    border: '#E2E5EA',
-    text: '#0B0D12',
-    textMuted: '#5B6270',
-    onBrand: '#FFFFFF',
-    ...palette,
-  },
-  dark: {
-    background: '#0B0B12',
-    surface: '#15151F',
-    surfaceAlt: '#1D1D2A',
-    border: '#2A2A38',
-    text: '#ECEDF2',
-    textMuted: '#9A9CAB',
-    onBrand: '#04110C',
-    ...palette,
-  },
-} as const;
+// colors.ts is written by create-techtiten-app from the theme preset you picked (__THEME_LABEL__).
+// Edit it freely: both the phone app and the website read it.
+import { colors } from './colors';
+export { colors };
 
 export type ColorName = keyof (typeof colors)['light'];
 export type Colors = Record<ColorName, string>;

package/templates/root/.prettierignore

@@ -0,0 +1,7 @@
+node_modules
+.expo
+.next
+dist
+package-lock.json
+apps/mobile/android
+apps/mobile/ios

package/templates/root/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "all"
+}

package/templates/root/README.md

@@ -20,3 +20,12 @@ npm run typecheck  # every workspace
 ## Add a package
 - Native/Expo package: `cd apps/mobile && npx expo install <pkg>` (picks the SDK-matched version)
 - Anything else: `npm install <pkg> -w __SCOPE__/mobile` (or `__SCOPE__/web`, `__SCOPE__/shared`)
+
+## Upgrade later
+New projects always start on the latest Expo / Next.js. To move this project to newer versions:
+```
+npm run upgrade:mobile   # latest Expo SDK + matching React Native and packages
+npm run upgrade:web      # latest Next.js
+npm run typecheck
+```
+Read the Expo SDK and Next.js release notes first: big versions can need small code changes.

package/templates/root/package.json

@@ -1,13 +1,21 @@
 {
   "name": "__APP_SLUG__",
   "private": true,
-  "workspaces": ["apps/*", "packages/*"],
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
   "scripts": {
     "mobile": "npm run start -w __SCOPE__/mobile",
     "android": "npm run android -w __SCOPE__/mobile",
     "web": "npm run dev -w __SCOPE__/web",
     "build:web": "npm run build -w __SCOPE__/web",
-    "typecheck": "npm run typecheck --workspaces --if-present"
+    "typecheck": "npm run typecheck --workspaces --if-present",
+    "format": "prettier --write .",
+    "upgrade:mobile": "cd apps/mobile && npx expo install expo@latest && npx expo install --fix",
+    "upgrade:web": "npm install next@latest eslint-config-next@latest -w __SCOPE__/web"
   },
-  "engines": { "node": ">=20.19" }
+  "engines": {
+    "node": ">=20.19"
+  }
 }

package/templates/web/src/app/globals.css

@@ -19,5 +19,5 @@
 body {
   background: var(--color-background);
   color: var(--color-text);
-  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-family: var(--font-app, ui-sans-serif), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 }

package/templates/web/src/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import { cssVariables } from '__SCOPE__/theme';
+import { appFontClass } from './fonts';
 import './globals.css';
 
 export const metadata: Metadata = {
@@ -13,7 +14,7 @@ const themeCss = `:root{${toCss(cssVariables('light'))}}@media (prefers-color-sc
 
 export default function RootLayout({ children }: LayoutProps<'/'>) {
   return (
-    <html lang="en" className="h-full antialiased">
+    <html lang="en" className={`h-full antialiased ${appFontClass}`}>
       <head>
         <style dangerouslySetInnerHTML={{ __html: themeCss }} />
       </head>