# Next.js PWA Starter (Archetype F)

Production-ready mobile PWA template với:
- Next.js 15+ app router
- Tailwind v4
- Cowork UI Kit tokens + brand + mobile layer
- PWA manifest + service worker + iOS install meta
- Safe-area inset utilities

## Setup

```bash
npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app

# Copy starter files
cp -r 00-templates/ui-kit/mobile/starters/nextjs-pwa/* .

# Copy tokens
mkdir -p src/styles/tokens
cp 00-templates/ui-kit/tokens/{foundation,semantic}.css src/styles/tokens/
cp 00-templates/ui-kit/mobile/tokens-mobile.css src/styles/tokens/
cp 00-templates/ui-kit/brands/<your-brand>.brand.css src/styles/tokens/

pnpm install next-pwa
pnpm dev
```

## File structure

```
my-app/
├── app/
│   ├── layout.tsx           # PWA meta + safe-area body
│   ├── page.tsx             # Archetype F starter
│   ├── globals.css          # imports tokens
│   └── manifest.ts          # PWA manifest (typed)
├── public/
│   ├── icon-192.png         # PWA icon
│   ├── icon-512.png         # PWA icon
│   ├── apple-touch-icon.png # iOS 180×180
│   └── sw.js                # service worker (optional)
└── next.config.ts           # PWA wrapper
```

## Key configs

### `app/layout.tsx`
- `viewport-fit=cover` for safe-area
- `apple-mobile-web-app-capable=yes`
- `theme-color` matches brand
- Body class `aesthetic-warm` baked in (anti-bug)

### `app/globals.css`
```css
@import 'tw-styles/tokens/foundation.css';
@import 'tw-styles/tokens/semantic.css';
@import 'tw-styles/tokens/<brand>.brand.css';
@import 'tw-styles/tokens/tokens-mobile.css';

@import 'tailwindcss';
```

### `app/manifest.ts`
TypeScript manifest with brand colors.

## Mobile-first development

1. Dev with Chrome DevTools responsive 390×844
2. Test on real iPhone via `next dev --hostname=0.0.0.0` + local IP
3. Run `/kry-qc ui mobile` before commit
4. PWA install test: Chrome → Install / Safari → Add to Home Screen

## Anti-bug bake-ins

- ✓ Body has `aesthetic-warm` class (prevents `--bg` undefined fallback bug)
- ✓ Viewport meta includes `viewport-fit=cover`
- ✓ All buttons use `min-h-[--touch-min]` Tailwind class
- ✓ Inputs default `text-base` (16px iOS no-zoom)
- ✓ Sticky bottom CTA uses `var(--sa-bottom)` padding