Docs component gallery

Every component in CONTENT_GUIDE.md's table, rendered live. Import them from @components/*. (The rest of src/components/ is Starlight overrides and homepage furniture, not building blocks for a page.) The conventions live in CONTENT_GUIDE.md.

Inline

Keys: press Shift then ?123, or hold Space. Editions: . Versions: .

Settings location chip:

Typing / Gestures / Spacebar swipes

PhoneFrame

Left empty, it renders the screenshot-pending placeholder. Given an image (or a <video>), it renders a device frame:

LayoutExplorer

Renders any .wmlayout.json straight from app/src/main/assets/layouts/. Import the file, then pass it in. Keys with alternates show the first one as a corner hint; hover or tap that key for the full long-press set. A layout whose keys carry shift labels gets a ⇧ toggle:

ThemePreview

Renders real theme specs (the same format as .wmtheme.json exports) on a mock keyboard. The showcase set exercises gradients (linear, radial, sweep), translucent keys, pill/cut key shapes, borders, key sheens and the HUE_CYCLE animation:

Pass specs to render an actual export file:

FilterTable

Client-filterable, sortable table for big datasets. It's live on the language overview (843 rows) and dictionaries (333 rows) pages. The data is generated from the app's registries by docs/scripts/extract_data.py:

[l.id, l.name, l.script])} placeholder="Filter (first 40 languages shown here)…" />

GestureDemo

Stylised, looping gesture explainers. They illustrate concepts, so use a screen recording when you need the real behaviour. Four types:

All four freeze to a static end-state under prefers-reduced-motion.