Line Map

Written for the variant you picked above: Light

Build course navigation drawn as a schematic transit map ('Masar Academy'): three tracks (Foundations blue, Writing red, Research green) with lessons as stations. Research crosses the other two at the lessons they share (Citations and Interviews), which are interchanges. Data: stations { id, title }, lines { name, color, stops[] } and a hand-laid grid { id: [column, row, labelSide] }, since good transit maps are arranged by hand. Positions are 112 units per column and 72 per row. Drawing (SVG on warm paper, Hanken Grotesk): each line is an 8px round-capped stroke between consecutive stops, bent the schematic way: horizontal first, then a 45° diagonal (or vertical then diagonal when the rise is larger). The part of a line between two visited stations is full colour; the rest is a pale tint of it. Stations are white discs with a 3.5px ring in the line's colour (tinted when unvisited); interchanges are larger with a dark ring; the current station is filled with its line's colour, labelled 'YOU ARE HERE' in small heavy caps above, and sends out two soft rings on load. Labels sit on the side given in the grid with a paper-coloured halo; unvisited labels are muted. A header shows the legend as colour bars with progress per line ('Writing 2/6'). Pointing at or focusing a station opens a small card above it: title, the lines through it in their colours, and 'Visited' / 'Not visited yet' / 'You are here'. Below 36rem the map is replaced by one vertical strip per line (a thick rail, a disc per station, 'change for Research' at interchanges). Selected variant — Light (light): Palette for this theme (Light): --lmap-bg #fbfaf6; --lmap-focus #1c1d1f; --lmap-ink #1c1d1f; --lmap-line rgb(28 29 31 / 0.12); --lmap-muted #6b6c70; --lmap-station #ffffff. Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "light". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Stations are focusable buttons over the map with one tab stop: ←/→ move along the current line, ↑/↓ switch line, but only at an interchange, and Enter or a click calls onNavigate(id). The strip view's buttons do the same on small screens. Motion: The current station pulses twice (1.4s, after 300ms) and the station card fades up over 140ms. Reduced motion or motion={false} removes both. Accessibility: The SVG is decorative; each station's button is named with its title, the lines through it and its state ('Citations, interchange for Foundations and Research, visited'), and the current one has aria-current='location'. The keyboard model follows the lines themselves. The strip view is an ordinary set of labelled ordered lists. Responsive behavior: The map scales from its viewBox; under 36rem it switches to vertical strip maps. Touch: Tap a station to open it; the strip maps give phones large, plain targets. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Stations are focusable buttons over the map with one tab stop: ←/→ move along the current line, ↑/↓ switch line, but only at an interchange, and Enter or a click calls onNavigate(id). The strip view's buttons do the same on small screens.

Motion

The current station pulses twice (1.4s, after 300ms) and the station card fades up over 140ms. Reduced motion or motion={false} removes both.

Accessibility

The SVG is decorative; each station's button is named with its title, the lines through it and its state ('Citations, interchange for Foundations and Research, visited'), and the current one has aria-current='location'. The keyboard model follows the lines themselves. The strip view is an ordinary set of labelled ordered lists.

Responsive

The map scales from its viewBox; under 36rem it switches to vertical strip maps.

On touch

Tap a station to open it; the strip maps give phones large, plain targets.