Design: the mockup register
Introduction
The terminal draws its own interface on every platform: the tab tree, pane headers, menus, confirmations and pages. Requirements fix what each surface does, but not how it is arranged, and an arrangement that reads well on a desktop can fail on a phone held upright or in landscape. Choosing a layout from prose alone tends to settle on the first idea written down.
Each surface's layout is therefore chosen by the repository owner from two or three HTML mockups, drawn at three sizes (phone portrait, phone landscape and desktop) and shown over dark, light and saturated terminal schemes (D10). A mockup decides arrangement, density, the shape of an affordance and motion; behaviour stays with the requirement pages, and apps/terminal implements the chosen variant.
This page registers every surface, its variants and the choice, and states the rules any variant must meet. A requirement whose layout waits on a choice has the status open, meaning undecided; once its mockup is chosen it becomes not started, meaning decided but not built, with a link to the chosen variant. Behaviour, and the design system's own tokens and rules, are out of scope here: the requirement pages and the design system own them.
Rules every variant must meet
From the design system and the theme, applied rather than restated:
- Slots, not colours (
THM1); each implemented component declares its slot set with a test (TOK6). - The chrome's colours derive from the terminal's (D17): every variant is shown over a dark and a light terminal scheme, and over one saturated Termux scheme, to prove it tracks.
- Interaction states (
TOK4/TOK5): rest, hover (desktop), focused, selected, pressed and disabled are drawn for every control. - Focus visible in monochrome (
ACC4), and never colour alone for status (ACC3). - Cells are the unit (
TOK7); touch targets are at least 48 dp; radius and shadow are pixel metrics with a cell projection. - Reduced motion (
ACC5) has a defined rendering for every animation. - The keyboard is the program's (
TKM2): no surface may assume a key the pane would lose. - Large screens take the desktop's arrangement (D47): on a screen at least 600 dp across, the rail stays in portrait, the selection menu is the anchored card (
TCF14), and pages and sheets are at most 100 columns wide (TPG19).
Surfaces
Three canvases hold the variants: workspace, overlays and pages. Each artboard has a dark and light switch, and some are interactive. A chosen variant is recorded here and in decisions. Once a surface is decided, the variants it rejected are removed from the canvas; the register keeps their names (S1, S3, E2, G1, G2, C2, LG2, N1, K1, K2).
| Surface | Rows it decides | Variants | Chosen |
|---|---|---|---|
| Workspace: tab strip, splits, headers | TSS11, TSS12, TSS13 | E | E, opener by ui.tabsOpener, chrome by ui.paneChrome (TCF12, TCF13, D42) |
| Extra-keys row (and its show/hide) | TCF7, TKM7 | E | E: the row under the terminal, above the keyboard |
| Selection handles and the selection menu | TSE3, TSE5 | S2, B1–B4, X1–X3 | all, chosen by ui.selectionMenu (TCF11); X1 on the desktop (D41) |
| Button labels | TCF9 | S2, E1, L3, D1 (Tweaks) | a setting (D35) |
| Confirmations: anchored card or sheet | TCF10 | CA1–CA4, CS1–CS4 | both, chosen by ui.overlayStyle (D41) |
| Link confirm | TPR5 | L1, L2 | both presentations (D41) |
| File link | TDV12 | L3 | both presentations (D41) |
| Paste guard | TPR19 | P1 | both presentations (D41) |
| OSC 52 read confirmation | TPR21 | P2 | P2 (D40) |
| Exit prompt | TSS2 | E1, E2 | E1, expanding status line (D39) |
| Autofill chip | TSE10 | A1 | A1 (D40) |
| Desktop context menu and link bar | TSE7, TPR7 | D1 | D1 (D40) |
| Settings page | TSP5–TSP8 | G1, G2, G3, G4 | G3, with the G4 capture editor (D36, D37) |
| About and credits pages | TPG1–TPG3, TPG15 | C1, C2 | C1 (D40) |
| Log page | TPG8 | LG1, LG2 | LG1 (D40) |
| Notification log, unseen marks | TPG9–TPG11, TPG18 | N1, N2 | N2, with a grouping control (D38) |
| Touch key guide | TKM6 | K1, K2, K3 | K3, search at the bottom (D40) |
| Viewer pane | TDV5, TDV6 | V1, V2 | both: tab and split (D40) |