Skip to content

docs(guide): Events, commands & keymaps page #151

Description

@blendsdk

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

  1. The event loop: createEventLoop routes keyboard + mouse to views and drives one render per tick;
    host-agnostic (you supply the input source).
  2. Event shapes: key events (name + modifiers), mouse events (button/drag/wheel), paste events
    (bracketed paste, capped at PASTE_CAP_BYTES).
  3. 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.
  4. Keymaps: createKeymap / buildKeymap, KEY_NAMES, and ClipboardKeys ('both'/'modern'/
    'classic'/'none'); a user keymap always wins over defaults on conflict.
  5. 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

  • Event shapes (key/mouse/paste), the loop, commands, and keymaps all covered with runnable code.
  • The silent-dropped-command footgun documented with how to detect it.
  • Clearly scoped against the sibling Keyboard & clipboard page (no duplication).
  • New example (if built) passes gates; build clean.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: docs-siteVitePress docs & showcase site (@jsvision/docs-site): guide, live examples, API pagesdocumentationImprovements or additions to documentationeffort: MMedium — one focused planpriority: mediumValuable; schedule after the high tier

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions