HCI Nerdz · MVP
Context Edge
You know the suite header that keeps growing — Mail, Drive, Admin, Cloud, Docs, all fighting for the same strip until you lose which product you are actually in. Context Edge keeps the page for the work you came to do, and puts cross-product travel on thin rails along the top and left edges of the shell.
Three ways to play it here: a Map Edge that slides the page aside to reveal a directory already underneath; a Modal Edge that pushes this sheet back over colored ancestor layers; and a Path Edge whose rails hold the hops you took. Pick a tile below, or use the matrix for framework implementations.
Variants × implementations
Map and Modal share the L-join. Path Edge is a single edge (Top or Side). Solid, React, Svelte, and vanilla each host Map, Modal, and Path.
| Variant | Vanilla | Solid | React | Svelte |
|---|---|---|---|---|
| Map Edge | Vanilla | Cloud | Suite | Community |
| Modal Edge | ||||
| Path Edge | Workshop | Solid | React | Svelte |
Framework impedance match (short)
- Solid / SolidStart — long-lived shell state; drop the Solid implementation into a SolidStart layout.
- React / Next.js — same shell as a
"use client"layout wrapper. - Svelte / SvelteKit — strong for edge motion; Kit layouts mirror the substrate.
- Astro implementations — this demo desk. Production SPAs should own the bar inside their shell.