journey map nav

the dev-mode side nav that visualizes a form's journey structure. lives inside FormShell's journey slot — slides in from the left when the (hidden) dev-nav trigger is activated, or when ?devnav=1 / localStorage["klera.devnav"] = "1" is set.

renders a tree of steps + substeps with status-coded markers. hidden-by-visibility nodes appear at 35% opacity with their gating condition annotated underneath — useful for understanding why a node was skipped during testing.

import from @klera/ui/components/forms/JourneyMapNav

API: <JourneyMapNav journey cursor onJump showHidden? title? summary? />. the journey array is built by the form-engine from the active flow + state (PR 3 surfaces auseFormJourney hook).

variants

default — show hidden nodes (dev mode)

current cursor on identity_basics. reproductive_safety hidden via sex-assigned-at-birth rule. two weight-loss-history substeps hidden via prior-programs rule.

showHidden=false — production-style

hidden nodes filtered out entirely. cleaner read for end users; not the default for dev tooling.

cursor on a substep

active highlighting cascades from step to substep.