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["halwel.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 @halwel/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.