6. Interaction details

6.1 Selection#

Input	Result (CAN-2)
Click	Selects the top-level child of the current context
Double-click	Enters the group or frame, selects the child under the pointer; on text, starts editing
Ctrl/Cmd + click	Deep select
Shift + click	Adds or removes
Drag on empty canvas	Marquee: 1 px focus box, focus 10 % fill; selects nodes it touches within the context
Enter / Shift+Enter	Select children / parent
Tab / Shift+Tab	Next / previous sibling
Esc	Clears selection; exits text editing first
Click a layer row	Selects; Shift range; Ctrl toggle

6.2 Handles#

Handle	Hit area	Behaviour (CAN-3)
Corner	12 × 12 around an 8 × 8 handle	Resize two axes; Shift keeps ratio; Alt from centre
Edge	Full edge, 6 px band	Resize one axis
Rotation	16 px outside each corner	Rotate; Shift snaps 15°
Radius (Could, as Figma)	8 px dot inside the corner when the node is 40 px or larger on screen	Drag to set corner radius
Auto layout padding/gap	See §4.31	Drag sets values; Shift snaps to 8

6.3 Snapping, guides and nudging#

Rule	Value
Snap threshold	4 screen px (not document units)
Targets	Edges, centres, equal spacing, pixel grid, layout guides, ruler guides (CAN-4, CAN-5, CAN-8)
Disable temporarily	Hold Ctrl while dragging
Nudge	Arrow 1 px, Shift+arrow 10 px (ud.nudge.small, ud.nudge.big); repeated nudges within 500 ms merge into one undo step
Alt hover	Distances from the selection to the hovered node

6.4 Fields#

Rule	Value
Commit	Enter, Tab or blur; Esc reverts
Expressions	+ - * / and parentheses, relative +8, units px, %; % of parent for W/H (UI-5)
Scrub	1 unit per px, Shift ×10, Alt ×0.1, Esc cancels; pointer lock while dragging; one command on release
Multi-selection	Shared value or “Mixed”; typing sets all; relative expressions apply per node
Arrow keys in a field	±1, Shift ±10, value committed after 500 ms idle

6.5 Drag and drop#

Drag	Drop zones and feedback
Layer rows	Top 25 % of a row: before; bottom 25 %: after; middle 50% of a container: into (row drop + border); insertion line at the drop depth; hover a collapsed container 600 ms expands it; Alt+drag duplicates
Canvas node into frame	Target frame highlighted 1 px focus; inside auto layout an insertion line between items (LAY-7)
Asset tile to canvas	Ghost at the pointer; drops at the pointer, into the frame under it
File from OS or Explorer	Images and SVG import at the drop point (EXP-4); .design file shows “Insert as library?”
Paint rows, effects, export rows	Grip reorders within the section

6.6 Zoom and navigation#

The zoom control (ud-zoom-controls, §4.30) in the right tabs row opens the zoom menu: Zoom in, Zoom out, Zoom to fit (Shift+1), Zoom to selection (Shift+2), 50 %, 100 % (Shift+0), 200 %, then toggles: Pixel preview, Pixel grid (shown above 400 % zoom, CAN-5), Rulers (Shift+R), Outline mode (Ctrl+Y), Layout guides, Multiplayer cursors, Minimap. Space+drag or H pans. Ctrl+wheel and pinch zoom to the pointer (CAN-1).

6.7 Keyboard shortcuts#

Shortcuts are listed in SRS-001 Appendix B; the rules for how the editor binds them:

Rule	Value
Contribution	Every shortcut is a keybindings contribution with when: activeCustomEditorId == 'softforge.design' && !inputFocus. Outside the editor, and while a field, text area or canvas text edit has focus, VS Code’s own bindings apply unchanged.
Matching	Keys are matched by KeyboardEvent.code (physical key), so R is the Rectangle tool on every layout and Alt+letter does not depend on the typed character. Key caps (§4.20) show the platform label.
Conflicts	A conflict table (key, VS Code command, resolution) is produced by the 0.1 audit against VS Code 1.108 and kept in Appendix B; the editor never overrides a binding the table does not list.
Region cycling	F6 / Shift+F6 cycle the regions of §7.1 only while focus is already inside the editor; the first F6 from outside is VS Code’s Focus Next Part and lands on the canvas. Ctrl+F6 leaves the editor and returns focus to VS Code (Focus Next Part from the editor’s position).
Stop agent	Command “Stop agent” (softforge.design.stopAgent), default Ctrl+Shift+Escape, bound with the same when clause. It stops the running AI turn (S11b) and every agent editing through ud (S12), the same as the Stop buttons of §4.23; the agent badge tooltip shows it.
Discoverability	Tooltips show the shortcut (P5); Ctrl+Shift+? opens the Keyboard Shortcuts panel (§7.1), which reads the effective bindings from VS Code so user rebindings appear.