Add mobile support with touch gestures

[espetro]

TL;DR

Optimize Calca for mobile devices with touch gestures, responsive design, and PWA support. Enable on-the-go design exploration without a desktop.

User Story

As a user, I want to use Calca on my phone or tablet, so I can iterate on designs while away from my computer.

Scope

• Touch gestures for canvas: pinch-zoom, two-finger pan, tap-select
• Responsive UI for smaller screens
• PWA manifest and service worker for installability
• Mobile-friendly prompt input (virtual keyboard handling)

Tradeoffs / Optionality

Canvas Library: React Flow vs CSS Transforms

React Flow (reconsider for mobile):

• Pros: Built-in touch support, minimap, connection lines, large community
• Cons: Heavier bundle, different paradigm from current CSS transforms

CSS Transforms + Custom Touch Layer:

• Pros: Lighter, matches current architecture
• Cons: Must implement touch gestures from scratch

Decision: Re-evaluate React Flow. If it significantly simplifies mobile support, the migration cost may be worth it. POC with React Flow on a branch first.

PWA vs Native App

PWA (recommended):

• Pros: Cross-platform, no app store, instant updates
• Cons: Limited native features, iOS restrictions

Native App (Capacitor/React Native):

• Pros: Full native access, better performance
• Cons: Separate codebase, app store friction

Decision: PWA for MVP. Native app only if PWA proves insufficient.

Technical Considerations

• Touch Gestures: Use @use-gesture/react (already in stack) or React Flow's built-in handlers
• Responsive Breakpoints: Tailwind CSS breakpoints (sm, md, lg)
• Virtual Keyboard: Ensure prompt input doesn't obscure canvas
• Performance: Mobile GPUs are weaker — test with 20+ frames minimum
• Dependencies: Canvas state refactor for gesture handling

References

• ADR: docs/decisions/0006-poc-react-flow-canvas.md
• Original spec: docs/prd-v2.md P1-7 (Mobile Optimization)