spec - TutorialPlayerShell.module.css

Referenced by 2

Labels 1

Idea	Status	Tags	Summary
site			the / site folder contains a static Next. js App Router landing page for reqlan.
tutorial_location_crumb	done		Tutorial detail chrome shows a compact location trail: catalog → course → lesson → slide. Hierarchy must be obvious without a wide single-line title dump. Layout: each tier is a stacked chip — role ( and optional completion control ) on the top row; title / index value muted underneath. Titles colour up on hover, focus-within, or when the peer menu is open. * * Folder navigation: * * each tier acts like a path segment / folder. Hover or focus reveals a peer menu for that level of the tree so the user can jump without using the transport row: - catalog → courses ( enter first lesson of the chosen course, or the catalog index ) - course → peer courses - lesson → peer lessons in the active course - slide → peer slides in the active lesson ( updates the embedded player / `?slide=` ) Current peer is marked; menus stay keyboard-reachable via focus-within. * * Sizing: * * the crumb container grows to fit text; wrap before truncating. Ellipsis only as a last resort on very narrow viewports — do not cap chip width so aggressively that titles ellipsize while space remains. Course deep-links also exist at `/tutorials/#course-<series>`; catalog at `/tutorials/`. Slide shows `n/total` and updates live with the embedded player. Completion toggles stay on the role row. The crumb lesson tier always shows the * * current * * lesson only — it must not share hover / preview state with the transport lesson step dots. Step-dot hover may preview a title near the dots, never in the crumb.

Reference labels

../src/components/TutorialPlayerShell.module.css