Modernize the template: Expo 57, React 19, Prisma 7, and design system tokens

[EliRobinson]

The template had drifted about two years behind — Expo 51, React 18.2, Prisma 5, pnpm 9 — and carried its own three-colour palette with no relationship to the design system every other project here uses. This brings both current.

Verified on an iPhone 17 Pro simulator (iOS 26.5), not just the web build. That caught three real bugs the web build cannot surface; see Found by device testing below.

1. Toolchain (3f3cb6f)

	Was	Now
Expo	51	57
React / React Native	18.2 / 0.74	19.2.3 / 0.86.3
Prisma	5	7
Zod	3	4
Fastify	4	5
TypeScript	5.5	6.0
ESLint	9	10
pnpm	9.7	11.25

Expo's own expo install --fix pinned the SDK-managed versions rather than my guessing them. package.json's Node engine now agrees with .nvmrc (24), which it did not before.

Prisma 7 is a migration, not a bump. The datasource block no longer accepts url; the CLI reads it from a new apps/api/prisma.config.ts and the runtime client gets it from a @prisma/adapter-pg driver adapter. The generator moved to prisma-client, which emits into the source tree (gitignored).

pnpm 11 stopped reading node-linker from .npmrc. That silently dropped the hoisted layout Metro depends on — type and test gates stayed green while expo start would have broken. It moves to pnpm-workspace.yaml as nodeLinker: hoisted, alongside the allowBuilds approvals pnpm 10+ now requires.

Breakages this surfaced and fixed:

• React Native Testing Library 14 made render and every fireEvent helper async; both suites now await them. extend-expect is gone — matchers self-register.
• packages/ui declared react-native as a * peer, so pnpm installed it a second copy. NativeWind's className type augmentation landed on the wrong module, giving Property 'className' does not exist on type ...PressableProps. It now pins react/react-native to the app's exact versions.
• TypeScript 6 stopped auto-discovering @types in this layout, so each tsconfig names its test types explicitly.

2. Design system tokens (264a318)

Styling now comes from @elirobinson/tokens: 109 colours plus spacing, radius, type, weight, line-height, tracking, z-index, duration, container and touch-target scales.

React Native cannot parse oklch() or follow var() chains, and a Tailwind config is synchronous CommonJS while the design system's parser is ESM. So packages/config/tailwind/sync-tokens.mjs converts ahead of time, using the design system's own parser and colour helpers rather than restating what a token means. Run pnpm tokens:sync after bumping the package.

Three details worth review:

• The mobile platform layer is the baseline, not an override. mobile.css recuts radii, the small end of the type ramp, gutters and container widths for a device at arm's length, so rounded-md is 12px here rather than the desktop 6px. It touches no colour by design, so the system's contrast assertions still hold.
• The neutral ramp writes chroma as calc(0.002 * var(--n-mult)), which the colour parser cannot read. The generator evaluates plain-number calc() only; anything else is left to fail loudly at toHex.
• The parser reports the winning value per token but not which selector won it, so the dark and mobile layers are lifted out of their blocks and re-fed as if they were :root. That is the only way to read more than one theme.

The generator exits non-zero if any colour fails to convert, so a new token shape breaks the sync instead of silently dropping a colour.

3. Lockfile (77060df)

Installs @elirobinson/tokens@0.15.0 from GitHub Packages. The generated theme is byte-identical to what a local checkout produced.

Found by device testing (f6134df, 407a5bd)

A dangling icon reference, unnoticed since the initial commit. app.json pointed at ./assets/icon.png; that file and the whole assets/ directory have never existed. Web builds never read it, so nothing caught it until expo prebuild, which dies with ENOENT before it can generate the iOS project.

Dark mode never applied on a device, while the web build honoured it. Two independent causes:

• The variables shipped as a .dark { … } block. NativeWind's CSS-to-RN compiler only recognises .dark:root, and only after it has read the @cssInterop set darkMode class dark at-rule that nativewind/preset emits. Order is strict.
• An @import can never satisfy that order — postcss-import inlines imports only at the top of the file, necessarily before that at-rule. Moving the import to the bottom is worse: postcss-import drops it silently and the tokens leave the build entirely.

Both failure modes are silent and both look correct on web. The variables now come from an addBase plugin in the preset, which puts them after nativewind's base layer. Separately, darkMode: 'class' means nothing follows the OS on its own, so _layout.tsx calls colorScheme.set('system').

The Button was under the touch target floor. Measured 40pt against the design system's --target: 44px for primary controls, which is also Apple's HIG minimum. --target is now a minHeight scale and Button carries min-h-target.

Deliberately held back

Each was attempted and blocked by the toolchain, not by preference:

• TypeScript 7 — ts-jest peers <7, typescript-eslint peers <6.1.0.
• Jest 30 — jest-expo@57 requires 29, and the hoisted layout means one jest major serves the workspace.
• Tailwind 4 — NativeWind 4 is built on react-native-css-interop, which targets Tailwind 3's JS config. Tailwind 4 needs NativeWind 5, which is preview-only.

AGENTS.md records all of these, plus the addBase ordering rule, in a Toolchain constraints section so the next reader does not re-derive them.

Verification

pnpm lint, pnpm typecheck, pnpm test and pnpm build all pass from a clean install.

On the simulator, measured by sampling pixels rather than eyeballing:

• Light background #ffffff, dark #000000, swapping live with the OS setting
• Accent #ef8a00 in both themes — the design system's signal-500
• Button height exactly 132px = 44.00pt
• Counter increments on tap

Not verified: Android. This machine has JDK 11 and Android platforms 29–32; Expo 57 needs JDK 17+ and a newer platform. Worth a run before anyone relies on the Android target.

🤖 Generated with Claude Code