20. User interface
The editor layout and every screen are specified in UI-001 (#6).
Esta página está em inglês; a tradução está a caminho.
The editor layout and every screen are specified in UI-001 (#6). The requirements below bind it.
| ID | Requirement | P | Type | Ver. | M |
|---|---|---|---|---|---|
| UI-1 | The layout shall follow Figma adapted to VS Code. Toolbar at the bottom centre of the canvas (as Figma UI3); left panel with Pages, Layers and Assets; right panel with Design, Prototype and Inspect tabs; canvas in the centre; zoom and mode controls top right. Panels collapse (Ctrl+\) and resize. | Must | functional | demonstration | 0.1 |
| UI-2 | Chrome colours and fonts shall come from the VS Code theme. themeColor(token) and themeFont(role); dark, light and high contrast themes work; the canvas background is a document property. |
Must | constraint | inspection | 0.1 |
| UI-3 | The webview shall follow the SoftForge page contract. Custom elements, no framework, no bundler, no stylesheets, codicons, checked by npm run check:webview. |
Must | constraint | inspection | 0.1 |
| UI-4 | Everything shall be operable from the keyboard and assistive technology. Accessible names, visible focus, every canvas node reachable through the Layers panel, shortcuts listed in a Keyboard Shortcuts panel (Ctrl+Shift+?). | Must | non-functional | test | 1.0 |
| UI-5 | Panel fields shall accept expressions and units. Numeric fields accept arithmetic (120/3, +8), units (px, %), scrubbing by dragging the label, Shift for ×10, and mixed values on multi-selection. |
Must | functional | test | 0.1 |
| UI-6 | Quick actions shall find any command. Ctrl+/ opens a searchable list of every registry command, component and style insertable by name. | Must | functional | test | 0.2 |
| UI-7 | The UI shall show what an agent is doing. When ud changes the live document, the changed nodes flash with the actor’s colour and name, and a status item shows the running agent with a Stop button that rejects its further commands. |
Must | functional | demonstration | 0.2 |