Reference app #

A settings app for #713 that uses Luke UI through its public consumer API. The home page at / links to Settings, whose layout and controls follow Linear Settings.

• Preferences saves theme, text size, pointer cursor, and link underlines as they change.
• Profile edits full name, job title, and username inline, with validation and retry on failure. Email uses a dialog. Profile pictures accept PNG, JPEG, or WebP images up to 1 MB.
• Security & access clears the profile and preferences saved in this browser after confirmation.

React Router Data Mode owns navigation and route errors. React Aria's RouterProvider sends Luke UI Link navigation through React Router. The root route's loader fills the TanStack Query cache before anything renders, and each mutation writes its result back to that cache. Zod validates mutation inputs at the API boundary. Settings persist in localStorage. The fake API adds 280 ms of latency. Tests set latency and fail the next mutation through settingsApi.

Luke UI owns layout, typography, links, buttons, and text fields. React Aria Components supplies select, switch, menu, and dialog behaviour. Vanilla Extract owns the remaining product presentation, using public theme variables. FRICTION.md records the remaining consumer gaps.

The theme source is src/theme/input.ts. A small Vite plugin in vite.config.ts passes it to Luke UI's defineTheme and serves the result as virtual:reference-theme.css. Vite restarts the dev server when the theme source changes.

The app imports @luke-ui/react from its built dist. Turbo builds the package on a clean checkout. Run commands from the repository root:

pnpm run dev:reference-app
pnpm exec turbo run check:format check:lint check:types --filter=reference-app
TURBO_FORCE=true pnpm exec turbo run test --filter=reference-app
pnpm run check

Once @luke-ui/react is built, the package scripts also work directly:

pnpm --filter=reference-app run dev
pnpm --filter=reference-app run build
pnpm --filter=reference-app run test

The dev server runs at http://localhost:5174.

Cloudflare Pages deploys the app from the repository root, so it also picks up the docs site's functions/ middleware. public/_routes.json excludes every path, so that middleware never runs for the app and Pages serves dist as static assets.