Every route keeps an exit
Back, theme, matcher, tray, mobile index, page stepper and footer share safe areas, hierarchy and layer ownership.
Interactive shell anatomy
Switch route responsibility, viewport and local theme. The same exits, safe areas and persistent layers stay legible.
Find a pet
Footer command anatomy
Every destination is a complete tactile button: a semantic leading icon, an explicit label and one trailing direction cue. Color identifies the destination family but never carries the label alone.
| Destination | Leading icon | Accent | Trailing cue |
|---|---|---|---|
| Catalog | LayoutGrid | Blue | ArrowRight |
| Visual System | Palette | Lime | ArrowRight |
| Version history | History | Pink | ArrowRight |
Navigation owners
top-escape.tsxAlways exposes a deterministic exit.
theme-toggle.tsxSystem, Light and Dark with persisted preference.
catalog-explorer.tsxSearch, filters and sort form one command island.
companion-tray.tsxPersistent selected and saved state above safe area.
visual-system-shell.tsxDesktop sidebar becomes a bottom mobile dock.
visual-system-shell.tsxPrevious and next preserve documentation order.
(product)/layout.tsxOne shared footer after every product main.
320px Companion Tray stress
Long pet names and saved-list overflow stay inside the local tray. Task-critical names wrap; the saved list scrolls without moving the persistent close command.
Safe-area and layer contract
| Surface | Layer | Anchor | Collision rule |
|---|---|---|---|
| Back + Theme | 100 | Top safe area | Equal height and extrusion |
| Matcher popover | 200 / 210 | Top command island | Clears both side controls |
| Mobile index / Tray | 100 / 145 local | Persistent bottom offset | Only one route-owned dock |
| Dialog | 300 / 400 | Viewport | Owns focus and blocks background |
| Toast | 500 | Safe top or bottom | Above dialogs; never under a hard shadow |
| Skip link | 600+ | Top-left | Visible only on keyboard focus |