@eocrm/design-system 0.0.0-stage → 0.6.18

package/src/components/Tour/Tour.tsx

@@ -0,0 +1,617 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type HTMLAttributes,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useFloating,
+  type Placement,
+} from '@floating-ui/react-dom';
+import clsx from 'clsx';
+import { Button } from '../Button';
+import { Cluster } from '../Cluster';
+import { CircularProgress } from '../CircularProgress';
+import { Stack } from '../Stack';
+import { useTranslation } from '../../i18n/useTranslation';
+import {
+  TOUR_CURRENT_TARGET,
+  overlayStack,
+  useFloatingSurface,
+  useFocusTrap,
+} from '../_internal/overlay';
+import { mergeRefs, sanitizeId } from '../_internal/refs';
+import { useControllableState } from '../_internal/useControllableState';
+import { Spotlight } from './Spotlight';
+import { useTourTarget } from './useTourTarget';
+import styles from './Tour.module.scss';
+
+/** Preferred side of the target for the card. Auto-flips on collision. */
+export type TourSide = 'top' | 'right' | 'bottom' | 'left';
+/** Which card edge aligns with the matching target edge. */
+export type TourAlign = 'start' | 'center' | 'end';
+/** Why a tour ended: `'completed'` = Done on the last step; `'skipped'` = Skip or Escape. */
+export type TourFinishReason = 'completed' | 'skipped';
+
+/** One step of a `<Tour>`. Plain data — keep tours in a config module. */
+export interface TourStep {
+  /**
+   * `data-tour` value of the element to spotlight (`<Button data-tour="bulk-edit">`
+   * ↔ `target: 'bulk-edit'`). Omit for a centered step with no spotlight
+   * (welcome / finish). If the target isn't mounted yet the Tour waits for it
+   * — see `targetTimeout`.
+   */
+  target?: string;
+  /** Card heading; also the dialog's accessible name. */
+  title: ReactNode;
+  /** Card text; also the dialog's accessible description. Links, `Kbd`, etc. are fine. */
+  body?: ReactNode;
+  /** Preferred side of the target. Default `'bottom'`. Auto-flips if it doesn't fit. */
+  side?: TourSide;
+  /** Edge alignment against the target. Default `'center'`. */
+  align?: TourAlign;
+  /** Px of spotlight around the target. Default `8`. */
+  spotlightPadding?: number;
+  /**
+   * Modal mode only. The target stays clickable through the spotlight and joins
+   * the focus trap — for "click X to continue" steps. Default `false`
+   * (look-only: the target is blocked like the rest of the page).
+   */
+  interactive?: boolean;
+  /**
+   * `'click'` advances to the next step after the target's own click handler
+   * runs. Needs a clickable target: `interactive: true` in modal mode, or any
+   * step with `modal={false}`. Ignored (dev warning) otherwise.
+   */
+  advanceOn?: 'click';
+  /**
+   * What the card's Next / Done / ArrowRight does on a click-to-continue step
+   * (`advanceOn: 'click'`). Ignored on any other step.
+   * - `'click'` (default) — activates the target (a full pointer sequence), so
+   *   the step's own action runs, then the tour advances.
+   * - `'skip'` — advances without touching the target. Choose it when the
+   *   target's action has side effects Next shouldn't trigger (a delete, a
+   *   save, a navigation). The hint, the secondary Next and the waves stay;
+   *   a real click on the target still advances.
+   */
+  next?: 'click' | 'skip';
+}
+
+export interface TourProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
+  /** The steps, in order. Must be non-empty. */
+  steps: TourStep[];
+  /**
+   * Controlled open state (required — like `Modal`, there is no uncontrolled
+   * mode: an uncontrolled tour could not be started or replayed).
+   */
+  open: boolean;
+  /** Called with `false` on Skip, Escape and Done. */
+  onOpenChange: (open: boolean) => void;
+  /**
+   * Fires once per Skip / Escape / Done. NOT called when the consumer closes
+   * the tour itself by setting `open={false}` — only the tour's own end
+   * gestures fire it. Use it to persist "seen" state.
+   */
+  onFinish?: (reason: TourFinishReason) => void;
+  /**
+   * Controlled step index. Control it when a step change must do something
+   * first — navigate to another page, open an accordion, switch a tab — then
+   * the Tour waits for the next target to mount.
+   */
+  step?: number;
+  /** Fires on every step change (Next, Back, arrow keys, `advanceOn`), controlled or not. */
+  onStepChange?: (index: number) => void;
+  /** Uncontrolled starting step. Default `0`. Every re-open starts here again. */
+  defaultStep?: number;
+  /**
+   * `true` (default): dims the page with a spotlight cutout, blocks clicks
+   * outside it and traps focus — onboarding. `false`: card only, page stays
+   * usable — feature announcements.
+   */
+  modal?: boolean;
+  /**
+   * Ms to wait for a step's target before falling back to a centered card.
+   * Default `5000` (room for a route change + data fetch). `Infinity` waits forever.
+   */
+  targetTimeout?: number;
+  /** Called when a step's target didn't appear within `targetTimeout`. Log it. */
+  onTargetMissing?: (step: TourStep, index: number) => void;
+  /**
+   * Contextual label for the last step's button, e.g. `'Got it'` for a
+   * one-step announcement. Defaults to the i18n `tour.done` (`'Done'`). An
+   * empty string counts as unset.
+   */
+  doneLabel?: string;
+}
+
+/**
+ * Activates a click-to-continue target. DropdownMenu's trigger toggles on
+ * pointerdown, so a bare click() wouldn't activate it; replay the full
+ * primary-pointer sequence a real click produces.
+ */
+function activate(el: HTMLElement) {
+  const init = { bubbles: true, cancelable: true, button: 0 };
+  const Ptr = typeof window.PointerEvent === 'function' ? window.PointerEvent : MouseEvent;
+  const ptr = { ...init, isPrimary: true, pointerType: 'mouse' };
+  el.dispatchEvent(new Ptr('pointerdown', ptr));
+  el.dispatchEvent(new MouseEvent('mousedown', init));
+  el.dispatchEvent(new Ptr('pointerup', ptr));
+  el.dispatchEvent(new MouseEvent('mouseup', init));
+  el.dispatchEvent(new MouseEvent('click', init));
+}
+
+/** Unmount fallback when `transitionend` never fires (reduced motion, jsdom). */
+export const EXIT_FALLBACK_MS = 300;
+/** Gap in px between target and card (room for the arrow). */
+const CARD_OFFSET = 12;
+/** Viewport edge padding for shift(); mirrored by `--tour-card-viewport-gap` in Tour.tokens.scss. */
+const CARD_VIEWPORT_PADDING = 8;
+/** Arrow keys inside these keep their native meaning (caret, option list). */
+const EDITABLE = 'input, textarea, select, [contenteditable]:not([contenteditable="false"])';
+
+/**
+ * Guided tour that spotlights each step's `data-tour` target and anchors a card with Skip / Back / Next to it.
+ * @see docs/components/Tour.md
+ */
+export const Tour = forwardRef<HTMLDivElement, TourProps>(function Tour(props, ref) {
+  const { open } = props;
+  const [present, setPresent] = useState(open);
+  const [session, setSession] = useState(0);
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) {
+      setPresent(true);
+      setSession((s) => s + 1);
+    }
+  }
+  const onExited = useCallback(() => setPresent(false), []);
+  if (!present) return null;
+  // A fresh session per open resets uncontrolled step state to defaultStep.
+  return <TourSession key={session} {...props} ref={ref} closing={!open} onExited={onExited} />;
+});
+
+interface TourSessionProps extends TourProps {
+  closing: boolean;
+  onExited: () => void;
+}
+
+const TourSession = forwardRef<HTMLDivElement, TourSessionProps>(function TourSession(
+  {
+    steps,
+    open: _open,
+    onOpenChange,
+    onFinish,
+    step: stepProp,
+    onStepChange,
+    defaultStep = 0,
+    modal = true,
+    targetTimeout = 5000,
+    onTargetMissing,
+    doneLabel,
+    closing,
+    onExited,
+    onKeyDown,
+    className,
+    style,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const t = useTranslation();
+  const [index, setIndex] = useControllableState<number>({
+    value: stepProp,
+    defaultValue: defaultStep,
+    onChange: onStepChange,
+  });
+  const current = steps[index];
+  const total = steps.length;
+  const isLast = index === total - 1;
+
+  const uid = sanitizeId(useId());
+  const titleId = `tour-title-${uid}`;
+  const bodyId = `tour-body-${uid}`;
+  const hintId = `tour-hint-${uid}`;
+  const cardRef = useRef<HTMLDivElement | null>(null);
+  const arrowRef = useRef<HTMLSpanElement | null>(null);
+
+  const { element, status } = useTourTarget(current?.target, targetTimeout, () => {
+    if (!current) return;
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        `[Tour] target "${current.target}" not found after ${targetTimeout}ms; showing step ${index + 1} centered.`,
+      );
+    }
+    onTargetMissing?.(current, index);
+  });
+  const found = status === 'found' ? element : null;
+  const waiting = status === 'waiting';
+  const centered = !found;
+
+  // One tick behind on purpose — see Switch's busyText for why. Mounting the
+  // region and its text together on the first `waiting` render would be
+  // silent for most screen readers; deferring to an effect makes the word
+  // always arrive as a change (Hard rule 10).
+  const [waitingText, setWaitingText] = useState('');
+  useEffect(() => {
+    setWaitingText(waiting && !closing ? t('tour.waiting') : '');
+  }, [waiting, closing, t]);
+
+  // Guards against a consumer whose onOpenChange ignores `false` (so `closing`
+  // never flips true) — Skip then Escape must still fire onFinish only once.
+  // Reset per session: finishedRef is fresh on every TourSession mount
+  // (key={session} in Tour).
+  const finishedRef = useRef(false);
+  const finish = (reason: TourFinishReason) => {
+    if (closing || finishedRef.current) return;
+    finishedRef.current = true;
+    onOpenChange(false);
+    onFinish?.(reason);
+  };
+  const goNext = () => (isLast ? finish('completed') : setIndex(index + 1));
+  const goBack = () => {
+    if (index > 0) setIndex(index - 1);
+  };
+  // Latest-callback ref for listeners registered in effects (advanceOn, keys).
+  const goNextRef = useRef(goNext);
+  goNextRef.current = goNext;
+
+  const finishRef = useRef(finish);
+  finishRef.current = finish;
+
+  // ---- Focus ----
+  // Captured before the card takes focus (effects run in declaration order).
+  const restoreRef = useRef<HTMLElement | null>(null);
+  useLayoutEffect(() => {
+    restoreRef.current = document.activeElement as HTMLElement | null;
+  }, []);
+
+  // Focus the card on open and on every step change so the new title is
+  // announced. preventScroll: the target scroll is ours to control.
+  useLayoutEffect(() => {
+    if (closing) return;
+    queueMicrotask(() => cardRef.current?.focus({ preventScroll: true }));
+  }, [index, closing]);
+
+  // Return focus on close — unless the user has already moved it elsewhere.
+  useEffect(() => {
+    if (!closing) return;
+    const active = document.activeElement;
+    if (active && active !== document.body && !cardRef.current?.contains(active)) return;
+    const el = restoreRef.current;
+    if (el?.isConnected) el.focus({ preventScroll: true });
+  }, [closing]);
+
+  useFocusTrap(cardRef, modal && !closing, modal && current?.interactive ? found : null);
+
+  // ---- Escape = skip ----
+  // Registered as a floating surface so a host Modal yields (#274), and gated
+  // on isTopFloating so a Select/Popover opened in the card closes first (#280).
+  // Gated on `current` too: an empty/out-of-range step renders nothing (see
+  // the early return below), so it must not register as a floating surface
+  // or handle Escape.
+  const floatingId = useFloatingSurface(!closing && !!current);
+  const hasCurrent = !!current;
+  useEffect(() => {
+    if (closing || !hasCurrent) return;
+    const onDocKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape' || !overlayStack.isTopFloating(floatingId)) return;
+      // modal={false} leaves the rest of the page usable, so Escape typed
+      // into an unrelated page control (a filter input, a form field) must
+      // not skip the tour out from under the user — only Escape while focus
+      // is actually in the card counts. Modal mode is unaffected: the page
+      // is blocked behind the scrim, so Escape always means "skip".
+      if (!modal && !cardRef.current?.contains(document.activeElement)) return;
+      e.preventDefault();
+      overlayStack.consumeEscape(e);
+      finishRef.current('skipped');
+    };
+    document.addEventListener('keydown', onDocKeyDown, true);
+    return () => document.removeEventListener('keydown', onDocKeyDown, true);
+  }, [closing, floatingId, hasCurrent, modal]);
+
+  // ---- Positioning ----
+  const side = current?.side ?? 'bottom';
+  const align = current?.align ?? 'center';
+  const placement = (align === 'center' ? side : `${side}-${align}`) as Placement;
+  const {
+    refs,
+    floatingStyles,
+    placement: resolvedPlacement,
+    middlewareData,
+    isPositioned,
+  } = useFloating({
+    open: !!found,
+    placement,
+    strategy: 'fixed',
+    // CSS `transform` stays free for the entrance scale (as in Popover).
+    transform: false,
+    middleware: [
+      offset(CARD_OFFSET),
+      flip(),
+      shift({ padding: CARD_VIEWPORT_PADDING }),
+      arrow({ element: arrowRef }),
+    ],
+    whileElementsMounted: autoUpdate,
+    elements: { reference: found },
+  });
+  const resolvedSide = resolvedPlacement.split('-')[0] as TourSide;
+  const staticSide = ({ top: 'bottom', bottom: 'top', left: 'right', right: 'left' } as const)[
+    resolvedSide
+  ];
+
+  // Glide (top/left/translate + spotlight geometry) only after the first
+  // placement, so nothing sweeps in from the viewport origin on open.
+  const [glide, setGlide] = useState(false);
+  useEffect(() => {
+    if (glide || !(centered || isPositioned)) return;
+    const id = requestAnimationFrame(() => setGlide(true));
+    return () => cancelAnimationFrame(id);
+  }, [glide, centered, isPositioned]);
+
+  // ---- Scroll the target into view ----
+  useEffect(() => {
+    if (!found) return;
+    const r = found.getBoundingClientRect();
+    const inView =
+      r.top >= 0 && r.left >= 0 && r.bottom <= window.innerHeight && r.right <= window.innerWidth;
+    if (inView) return;
+    const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
+    found.scrollIntoView?.({
+      block: 'center',
+      inline: 'nearest',
+      behavior: reduce ? 'auto' : 'smooth',
+    });
+  }, [found]);
+
+  // ---- advanceOn: 'click' ----
+  // Deps are the two primitives this effect actually reads, not the whole
+  // `current` object — a consumer passing `steps` as an inline array literal
+  // gives `current` a new identity every render even when its content is
+  // unchanged, which would re-attach the click listener on every unrelated
+  // re-render.
+  const advanceOn = current?.advanceOn;
+  const interactive = current?.interactive;
+  // Same condition the effect below uses to actually listen for the click —
+  // including `found`: no target (waiting / centered fallback), no listener.
+  const clickToContinue = advanceOn === 'click' && (!modal || !!interactive) && !!found;
+  // A synthetic click on a disabled control never fires, so skip activating it.
+  const advance = () =>
+    clickToContinue && current?.next !== 'skip' && found && !found.matches(':disabled')
+      ? activate(found)
+      : goNext();
+  useEffect(() => {
+    if (advanceOn !== 'click') return;
+    if (modal && !interactive) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn('[Tour] advanceOn="click" needs interactive: true in modal mode — ignored.');
+      }
+      return;
+    }
+    if (!found) return;
+    // setTimeout(0), not a microtask: React's root-delegated onClick runs
+    // after this native listener, and must finish first. The timer is NOT
+    // cleared on cleanup — the click itself commonly unmounts the target
+    // (navigation), which re-runs this effect before the timer fires.
+    const onClick = () => {
+      setTimeout(() => goNextRef.current(), 0);
+    };
+    found.addEventListener('click', onClick);
+    return () => found.removeEventListener('click', onClick);
+  }, [advanceOn, interactive, found, modal]);
+
+  // ---- Interactive-target elevation ----
+  // An interactive modal step's target stays clickable through the spotlight
+  // (see useFocusTrap above) — including opening its OWN floating surface
+  // (a DropdownMenu/Select/Popover trigger that is, or contains, the target).
+  // Mark it so useInOverlay's [data-tour-active-target] host elevates that
+  // surface above the tour instead of rendering it behind the card/scrim.
+  // Gated on !closing: once the tour starts closing the target is no longer
+  // being featured (mirrors the focus trap's own `!closing` gate).
+  useEffect(() => {
+    if (!(modal && interactive && found) || closing) return;
+    found.setAttribute('data-tour-active-target', '');
+    return () => found.removeAttribute('data-tour-active-target');
+  }, [modal, interactive, found, closing]);
+
+  // ---- Inert target (#697) ----
+  // A non-interactive modal step lights its target but must not let the
+  // pointer through to it (e.g. a lifted, open menu panel). Marker + global
+  // pointer-events rule instead of the `inert` attribute, which would also
+  // hide the panel from assistive tech. Keyboard is already contained: the
+  // focus trap only extends to the target on interactive steps.
+  useEffect(() => {
+    if (!(modal && !interactive && found) || closing) return;
+    found.setAttribute('data-tour-inert', '');
+    return () => found.removeAttribute('data-tour-inert');
+  }, [modal, interactive, found, closing]);
+
+  // ---- Current-target marker (#684) ----
+  // Every step's found target (modal or not, interactive or not) — floating
+  // surfaces read it via isTourHeld so the tour pointing into an open menu
+  // doesn't dismiss that menu when the user presses Next or the card takes
+  // focus. Separate from data-tour-active-target, which drives elevation.
+  useEffect(() => {
+    if (!found || closing) return;
+    found.setAttribute(TOUR_CURRENT_TARGET, '');
+    return () => found.removeAttribute(TOUR_CURRENT_TARGET);
+  }, [found, closing]);
+
+  // ---- Exit: unmount after the fade ----
+  useEffect(() => {
+    if (!closing) return;
+    const el = cardRef.current;
+    const onEnd = (e: TransitionEvent) => {
+      if (e.target === el) onExited();
+    };
+    el?.addEventListener('transitionend', onEnd);
+    const timer = setTimeout(onExited, EXIT_FALLBACK_MS);
+    return () => {
+      el?.removeEventListener('transitionend', onEnd);
+      clearTimeout(timer);
+    };
+  }, [closing, onExited]);
+
+  const onCardKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
+    if ((e.target as HTMLElement).closest(EDITABLE)) return;
+    e.preventDefault();
+    if (e.key === 'ArrowLeft') goBack();
+    else if (!isLast) advance();
+  };
+
+  // Dev-only: an empty `steps` array or an out-of-range `step`/`defaultStep`.
+  // In an effect (not inline during render) so it fires once per bad
+  // index/total pair, not on every re-render, and stays above the early
+  // return below so hook order is stable.
+  useEffect(() => {
+    if (current) return;
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(`[Tour] no step at index ${index} (steps: ${total}).`);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed on index/total only, per design; `current` is derived from both
+  }, [index, total]);
+
+  if (!current) {
+    return null;
+  }
+
+  const state = closing ? 'closed' : 'open';
+  // No isPositioned-gated visibility hiding — same as Popover.Content, whose
+  // floatingStyles apply directly with no flash-prevention gate.
+  const cardStyle: CSSProperties = centered
+    ? { position: 'fixed', top: '50%', left: '50%', translate: '-50% -50%' }
+    : { ...floatingStyles, translate: '0 0' };
+  const arrowXY = middlewareData.arrow;
+
+  return createPortal(
+    // Single body child for ALL of Tour's portaled layers (spotlight, 4
+    // blockers, card) — Modal/Drawer's Overlay inerts every body child
+    // except ones matching their PORTAL_EXEMPT_SELECTOR, and that selector
+    // exempts by matching a body-direct child, not by descendant search.
+    // Wrapping means one `[data-tour-portal-root]` entry there exempts the
+    // whole tour, instead of Modal/Drawer inerting the card that the tour
+    // is trying to keep interactive. No class/style: children are already
+    // `position: fixed` inline, and an unstyled div creates no containing
+    // block or stacking context of its own.
+    <div data-tour-portal-root="">
+      {modal && (
+        <Spotlight
+          target={found}
+          padding={current.spotlightPadding ?? 8}
+          interactive={!!current.interactive && !!found}
+          state={state}
+          glide={glide}
+        />
+      )}
+      {/* {...rest} first so role / aria-* / tabIndex / data-state always win. */}
+      <div
+        {...rest}
+        ref={mergeRefs<HTMLDivElement>(cardRef, refs.setFloating, forwardedRef)}
+        role="dialog"
+        aria-modal={modal}
+        aria-labelledby={titleId}
+        aria-describedby={
+          [current.body != null && bodyId, clickToContinue && hintId].filter(Boolean).join(' ') ||
+          undefined
+        }
+        tabIndex={-1}
+        data-state={state}
+        data-side={centered ? undefined : resolvedSide}
+        data-centered={centered ? '' : undefined}
+        data-waiting={waiting ? '' : undefined}
+        data-glide={glide ? '' : undefined}
+        className={clsx(styles.card, className)}
+        style={{ ...style, ...cardStyle }}
+        onKeyDown={onCardKeyDown}
+      >
+        {!centered && (
+          <span
+            ref={arrowRef}
+            aria-hidden="true"
+            className={styles.arrow}
+            style={{
+              left: typeof arrowXY?.x === 'number' ? `${arrowXY.x}px` : undefined,
+              top: typeof arrowXY?.y === 'number' ? `${arrowXY.y}px` : undefined,
+              [staticSide]: 'calc(var(--tour-arrow-size) / -2)',
+            }}
+          />
+        )}
+        <Stack gap="md">
+          <Stack key={index} gap="xs" className={styles.content}>
+            <span className={styles.progress}>
+              {t('tour.progress', { current: index + 1, total })}
+            </span>
+            <h2 id={titleId} className={styles.title}>
+              {current.title}
+            </h2>
+            {current.body != null && (
+              <div id={bodyId} className={styles.body}>
+                {current.body}
+              </div>
+            )}
+          </Stack>
+          {clickToContinue && (
+            <span id={hintId} className={styles.hint}>
+              {t('tour.clickHint')}
+            </span>
+          )}
+          {/* Visual only: the status region below is the single announcement. */}
+          {waiting && (
+            <Cluster gap="sm" align="center" aria-hidden="true">
+              <CircularProgress size="sm" />
+              <span className={styles.waiting}>{t('tour.waiting')}</span>
+            </Cluster>
+          )}
+          <Cluster justify={isLast ? 'end' : 'between'} gap="sm">
+            {!isLast && (
+              <Button variant="ghost" size="sm" onClick={() => finish('skipped')}>
+                {t('tour.skip')}
+              </Button>
+            )}
+            <Cluster gap="sm">
+              {index > 0 && (
+                <Button variant="secondary" size="sm" onClick={goBack}>
+                  {t('tour.back')}
+                </Button>
+              )}
+              {/* Secondary on click-to-continue steps: the target is the primary action. */}
+              <Button
+                variant={clickToContinue ? 'secondary' : undefined}
+                size="sm"
+                // The advanceOn listener on the target advances; Next only clicks it.
+                onClick={advance}
+              >
+                {isLast ? doneLabel || t('tour.done') : t('tour.next')}
+              </Button>
+            </Cluster>
+          </Cluster>
+        </Stack>
+        {/* INSIDE the dialog on purpose — VoiceOver prunes content outside an
+            aria-modal dialog, so a region outside this div is never reached.
+            The dialog's name comes from aria-labelledby, so a plain child
+            span can't join it. Rendered unconditionally so only its text
+            mutates; same recipe as Switch's srOnly span otherwise. */}
+        <span role="status" aria-live="polite" className={styles.srOnly}>
+          {waitingText}
+        </span>
+      </div>
+    </div>,
+    document.body,
+  );
+});

package/src/components/Tour/index.ts

@@ -0,0 +1,2 @@
+export { Tour } from './Tour';
+export type { TourProps, TourStep, TourSide, TourAlign, TourFinishReason } from './Tour';