Guide|beta

Mount one GuideProvider near your app root. It instantiates a GuideController and shares it with every Guide surface via context. Mark any UI element a topic with data-guide="<id>"; tours, hints, markers, and mentions all resolve through that one namespace.

A GuideHint waits at the right element instead of interrupting. Show it on mount, or drive it from your own route/condition with trigger="manual" and open. It persists "seen" so it appears once, and steps aside while a modal or tour is open.

The guided tour is the deliberately opt-in, intrusive surface: a spotlight that dims everything but the current step's target, plus an anchored bubble. A GuideBeacon is the gentle entry point — a waiting hotspot that starts the tour on click, the opposite of an auto-start.

The real value of a tour is its funnel and drop-off signal. A GuideTour carries three optional hooks fired from the engine, so they trigger no matter which surface drives the tour. They are invoked defensively — a throwing handler never corrupts tour state. See GuideStepEvent / GuideEndEvent in the API reference for the payloads.

Every guide target is identified by a string id. There are two ways to register one — both feed the same registry, so a tour step, a hint, a marker, and a mention can all point at the same id.

direction makes the bidirectional link a deliberate choice: 'to-ui' makes a GuideMarker inert (UI → guide off), 'to-guide' degrades a GuideMention to plain text (guide → UI off), and 'both' (the default) enables both. In DEV, a target id referenced but not found in the DOM logs a warning instead of failing silently.

Every surface supports unstyled, per-slot slotClasses, and named presets. Two tokens tune the tour's spotlight scrim and the additive highlight ring.