natalie 1b719e1fd7 chore(bootstrap): initial V4 commit

Clean successor to V3 (forge: lilith/atlilith). Seeded from local Mac
working tree at ~/Code/@projects/@cocottetech/. node_modules and build
artifacts excluded via .gitignore.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-18 08:11:41 -07:00

2.6 KiB

Raw Blame History

E — Cross-platform variants

Goal

Design a system that scales from iPhone (P0) to iPad and (later) macOS Catalyst — and to the web-fe secondary surfaces (brief G) — without re-design. Same tokens, same components, layout adapts.

Designer skim

Headline UX: iPhone canonical; iPad / macOS / web inherit tokens + components and re-layout. Dark mode default; light follows system. Stakes colors hit WCAG AA in both.
Variants (4): E1 iPhone (P0) · E2 iPad (P5) · E3 macOS Catalyst (deferred) · E4 web ai.cocotte.maison.
Blocking Qs: OPEN-DECISIONS.md → E-Q1 iPad drawer-replace-vs-stack, E-Q2 web IA same-vs-divergent.

Constraints

iPhone is the canonical P0 surface; everything else inherits.
SwiftUI on Apple platforms; React 19 + Vite on web — but the design system must produce both implementations without divergence.
Build target P0: iPhone only. Universal binary scaffolded; iPad layouts come in P5.

Variants to consider

E1 — iPhone (P0 canonical)

Single-column layout, full-bleed chat, edge-to-edge sheets.
Bottom safe-area awareness for swipe gesture handlers.

E2 — iPad (P5)

Two-column when in landscape: chat left, drawer right (drawer becomes a persistent inspector).
Compact width (split-view, portrait) collapses back to iPhone behavior.
Hover affordances for trackpad / cursor (cards animate on hover).

E3 — macOS Catalyst (deferred — design system needs to accept it)

Three-column potential: chat + open drawer + agent-actions ticker.
Keyboard shortcuts: ⌘↵ approve, ⌘⇧↵ reject, ⌘E edit.

E4 — Web (`ai.cocotte.maison`, secondary surface)

React + Vite. Same approval-card components as iOS conceptually, rendered as React.
Desktop-first because web is where Quinn does bulk / calendar work.
Responsive down to ~768px (tablet); mobile web stays available as a fallback when iOS is unavailable.

Dark vs light

Dark mode is default. Light mode follows system.
Stakes colors must hit WCAG AA contrast in both modes — see brief F.

In-the-wild copy

E4 · web companion handoff banner (hearth):

Picked up where you left off — last touched on phone 3 min ago.

E2 · iPad split-view first time (working):

The drawer stays open on iPad. Swipe-down to close, or pin it.

Out of scope

Apple Watch.
Android (no Android app planned).

Open questions

macOS Catalyst vs native AppKit + Mac-native SwiftUI? Catalyst is faster; native is nicer.
Do iPad drawers replace the iPhone full-screen pattern, or stack alongside it?
Web-fe: same routing structure as iOS or independent IA?

2.6 KiB Raw Blame History