Part of #143 — the Guide expansion. Group Core concepts. Sibling of the existing
Keyboard & clipboard page.
Purpose & audience
Teach the input model end to end: what a key/mouse event looks like, how the event loop routes it,
how commands decouple "what the user did" from "what happens", and how to rebind keys with a keymap.
The gap today
Keyboard & clipboard covers only the clipboard slice. Nothing explains the shape of an event, the
command indirection, custom keymaps, mouse events, or bracketed paste. A misspelled command: 'sve'
is silently dropped (issue #141, footgun 5) — the reader has no way to know why their button is dead.
Outline
- The event loop:
createEventLoop routes keyboard + mouse to views and drives one render per tick;
host-agnostic (you supply the input source).
- Event shapes: key events (name + modifiers), mouse events (button/drag/wheel), paste events
(bracketed paste, capped at PASTE_CAP_BYTES).
- Commands:
Commands registry + CommandEvent; a button emits a command, a handler consumes it;
an unregistered command name is dropped (the silent-'sve' footgun) — how to catch it.
- Keymaps:
createKeymap / buildKeymap, KEY_NAMES, and ClipboardKeys ('both'/'modern'/
'classic'/'none'); a user keymap always wins over defaults on conflict.
ESC_TIMEOUT_MS and why a lone ESC waits (distinguishing ESC from an escape sequence).
Code examples to write
- A custom keymap binding an app command to a chord.
- Emitting and handling a custom command (button → handler → visible effect).
- Freeing keys for your own bindings with
clipboardKeys: 'none'.
Live examples
- Reuse: the existing
apps/editor (Keyboard & clipboard page) demonstrates live key handling —
free to reference.
- Build new: optional
guide/keymap echoing the decoded name of whatever key you press; strong
teaching value for "what does an event look like", build if budget allows.
Source pointers
packages/core/src/engine/input/ — decoder.ts, events.ts, keys.ts, keymap.ts, mouse.ts,
paste.ts; ESC_TIMEOUT_MS / PASTE_CAP_BYTES / KEY_NAMES exported from input/index.ts.
packages/ui/src/event/ — createEventLoop, buildKeymap, CommandEvent, ClipboardKeys.
packages/ui/src/event/commands.ts:59-60 (unregistered command dropped).
- Memory
global-clipboard-work (default keymap + clipboardKeys design).
Constraints
- No
.layout = (snippet-drift). Reuse the existing clipboard prose; don't duplicate it — link.
Acceptance criteria
Part of #143 — the Guide expansion. Group Core concepts. Sibling of the existing
Keyboard & clipboardpage.Purpose & audience
Teach the input model end to end: what a key/mouse event looks like, how the event loop routes it,
how commands decouple "what the user did" from "what happens", and how to rebind keys with a keymap.
The gap today
Keyboard & clipboardcovers only the clipboard slice. Nothing explains the shape of an event, thecommand indirection, custom keymaps, mouse events, or bracketed paste. A misspelled
command: 'sve'is silently dropped (issue #141, footgun 5) — the reader has no way to know why their button is dead.
Outline
createEventLooproutes keyboard + mouse to views and drives one render per tick;host-agnostic (you supply the input source).
(bracketed paste, capped at
PASTE_CAP_BYTES).Commandsregistry +CommandEvent; a button emits a command, a handler consumes it;an unregistered command name is dropped (the silent-
'sve'footgun) — how to catch it.createKeymap/buildKeymap,KEY_NAMES, andClipboardKeys('both'/'modern'/'classic'/'none'); a user keymap always wins over defaults on conflict.ESC_TIMEOUT_MSand why a lone ESC waits (distinguishing ESC from an escape sequence).Code examples to write
clipboardKeys: 'none'.Live examples
apps/editor(Keyboard & clipboard page) demonstrates live key handling —free to reference.
guide/keymapechoing the decoded name of whatever key you press; strongteaching value for "what does an event look like", build if budget allows.
Source pointers
packages/core/src/engine/input/—decoder.ts,events.ts,keys.ts,keymap.ts,mouse.ts,paste.ts;ESC_TIMEOUT_MS/PASTE_CAP_BYTES/KEY_NAMESexported frominput/index.ts.packages/ui/src/event/—createEventLoop,buildKeymap,CommandEvent,ClipboardKeys.packages/ui/src/event/commands.ts:59-60(unregistered command dropped).global-clipboard-work(default keymap +clipboardKeysdesign).Constraints
.layout =(snippet-drift). Reuse the existing clipboard prose; don't duplicate it — link.Acceptance criteria