From 51f91b3f5d9ba3d97ef7e7618dd465876d49ed77 Mon Sep 17 00:00:00 2001 From: Miguel Palhas Date: Sun, 23 Aug 2026 22:36:51 +0100 Subject: [PATCH] docs(maestro): amend DESIGN.md for draft panes (#62) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The spawn modal is no longer one of the three surfaces: the Components section now describes the draft pane, and the stale ≥600px bottom-sheet→dialog breakpoint note is dropped. --- DESIGN.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index 282b754..7cb8220 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -79,16 +79,15 @@ no bounce. Tokens `--dur-fast`/`--dur`/`--dur-slow`. `connecting` state pill pulses. - Interaction: row hover/focus, button press (1px), input focus ring, chevron rotation, theme-toggle sun/moon swap. -- Modal: bottom-sheet slide-up on mobile, scale-pop on ≥600px. - Every animation has a `prefers-reduced-motion: reduce` path (pulses off, transitions near-instant). ## Layout & structure Mobile-first, structural responsiveness (not fluid type). Single `≤520px` -breakpoint stacks the header (full-width search, wrapped actions). `≥600px` -switches the spawn modal from bottom-sheet to centered dialog. A faint slate grid texture sits on `--bg` as -terminal atmosphere (very low contrast, not decoration). +breakpoint stacks the header (full-width search, wrapped actions). A faint +slate grid texture sits on `--bg` as terminal atmosphere (very low contrast, +not decoration). ## Components @@ -101,8 +100,10 @@ Three surfaces, all DOM built in TS, styled by class: no-sessions, no-search-match. - **Attach** — header (back, `session `, live/closed/error state pill) over a framed dark xterm with a green cursor. -- **Spawn modal** — bottom-sheet/dialog form; mono inputs with green focus - ring; grouped worktree fieldset. +- **Draft pane** — the spawn form mounted inline in an empty split pane, + focusable like any session pane; mono inputs with green focus ring; grouped + worktree fieldset. Spawn opens one (reusing an empty focused pane, else + splitting), and "Spawn similar" seeds one from a session's dir + command. Interactive elements ship default / hover / focus-visible / active / disabled states; the accent green is used only for action, selection, focus, and live @@ -111,5 +112,5 @@ status — never decoration. ## Dev review aids (DEV-only, stripped from production) `web/src/mock.ts` + query params seed a representative catalog without a running -daemon: `?mock` (seed sessions), `?mock&spawn` (open the spawn modal), +daemon: `?mock` (seed sessions), `?mock&spawn` (open a draft pane), `?theme=light|dark` (pin a theme). Guarded by `import.meta.env.DEV`.