4.6 KiB
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
formobject. - 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.