Add a viewer-first mobile shell that swaps in under 768px without restyling desktop Bench.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-19 08:19:36 -05:00
parent dccfafa08b
commit d733e80881
5 changed files with 730 additions and 1 deletions
@@ -0,0 +1,97 @@
+# Cursor prompt — unique mobile portrait shell (new file)
+
+Do not edit `STUDIO2-DISPLAY-CURSOR-PROMPT.md`, `STUDIO2-DISPLAY-LAYOUT-SPEC.md`, `STUDIO2-LORA-DIALS-PROMPT.md`, or `STUDIO2-VIEWER-FIT-PROMPT.md`.
+
+Branch: **`studio-2`**. Push `origin/studio-2` only. Chrome only. Same `form`, queue, generate, locks, LoRAs, library. No graph/runner/extend/YuE2 changes.
+
+Desktop 3-column bench is **done**. Do not restyle desktop to make mobile work. Do not stack the three columns in a tall scroll and call it mobile.
+
+Breakpoint: `(max-width: 767px)` **and** coarse pointer. Use a **separate mobile shell** (`Studio2Mobile.vue` or `Bench` template `v-if="isMobile"`) that binds the **same** state as desktop Bench.
+
+Reference mock: `studio2-display-ux/mobile-mock.html` (open on a 390×844 viewport).
+
+---
+
+## Why unique
+
+Portrait cannot show 260 | stage | 280. If you shrink that grid you lose Generate, LoRAs, and the still.
+
+Mobile is a **viewer-first phone app** with sheets for the inspector and the queue. Every desktop control still exists. It is just not on screen at once.
+
+---
+
+## Chrome map (portrait)
+
+```
+┌ status / 48px header ─────────────────────────────────────┐
+│ AIGen    Inbox ▾                         GPU   ☰ queue(n) │
+├ task chips (scroll-x)  Generate Edit … Music ─────────────┤
+├ model chips            Klein | Krea   or  H3 | LTX ───────┤
+├───────────────────────────────────────────────────────────┤
+│                                                           │
+│              STAGE  (contain, full remaining height)      │
+│                                                           │
+├ filmstrip scroll-x, tiles 72px ───────────────────────────┤
+├ [Slots] [Prompt] [Look] [Gen]     Generate (amber, 48px) ─┤
+└───────────────────────────────────────────────────────────┘
+```
+
+Bottom **dock** is 4 tabs that open sheets, plus Generate always visible:
+
+| Tab | Sheet contents (all desktop fields) |
+|---|---|
+| **Slots** | Hero, Start, End, Guides, Upload, Lock face, Lock outfit + Klein caption |
+| **Prompt** | Prompt textarea, negative chips, style/render/quality/lighting chips |
+| **Look** | LoRA stack (filename + Model/CLIP sliders + numbers), Seed + dice, Aspect, extra generation settings (steps/CFG only if that engine uses them) |
+| **Gen** | Engine-specific video/music extras: duration/target length, fps, turbo, camera beats, YuE2 hints. Not a second Generate button. |
+
+**Generate** is the rightmost dock control — 48×48 or a 120px amber pill. Never labeled Queue.
+
+Header **☰** or badge **Queue (n)** opens a **right/bottom sheet** of job cards (same cards as desktop right column).
+
+Library and Settings stay header links (or a `…` menu). Do not drop them.
+
+---
+
+## Stage
+
+- Same contain rule as desktop: `max-width/height 100%`, `object-fit: contain`, no inner max-width cap.
+- Still / video / audio switch on `selected.kind`. No waveform on a still.
+- Safe area: `padding-bottom: env(safe-area-inset-bottom)` on the dock.
+- Filmstrip under stage, 72×48 tiles, amber ring on selected, horizontal scroll. Trash on selected tile only.
+
+---
+
+## Sheets
+
+- One sheet at a time. Height `min(85vh, content)`. Drag handle + Done.
+- Fields keep desktop order and payload keys.
+- LoRA card = filename + two (or one) sliders + numeric `0.00–2.00`. No hashed meters.
+- Krea disabled-on-Edit with the same one-line reason.
+- LTX disabled on AIGen with `xAIGen only`.
+- xAIGen hide defaults: eye on stage + each tile. No global hide checkbox required on mobile.
+
+---
+
+## What you must not do
+
+- No desktop 3-column at `<768`.
+- No “rotate device” dead end.
+- No missing task (Iterate if desktop has it — add the chip).
+- No second `form` object.
+- Do not change Classic/Studio desktop tokens in this pass.
+
+`isMobile` from `window.matchMedia('(max-width: 767px)')` + resize listener. SSR: default desktop to avoid hydration flip, then switch on mount.
+
+---
+
+## Done when
+
+390×844 portrait:
+
+- Stage fills the phone; dock + chips visible without page-zoom.
+- Slots, Prompt, Look, Gen sheets each reachable; Generate queues a job.
+- Queue sheet lists jobs.
+- Rotate to ≥768: desktop 3-column returns, same job state.
+
+One or two present-tense commits. Screenshot 390 and 1440.