@flowsterix/react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,3851 @@
+import {
+  TanStackRouterSync,
+  getTanStackRouter,
+  getTourRouter,
+  setTanStackRouter,
+  setTourRouter
+} from "./chunk-U757YVZP.mjs";
+import {
+  useTanStackRouterTourAdapter
+} from "./chunk-RCASLQRS.mjs";
+import {
+  createPathString,
+  expandRect,
+  getClientRect,
+  getCurrentRoutePath,
+  getScrollParents,
+  getViewportRect,
+  isBrowser,
+  notifyRouteChange,
+  portalHost,
+  subscribeToRouteChanges,
+  supportsMasking
+} from "./chunk-RPA2S5UP.mjs";
+
+// src/context.tsx
+import {
+  createFlowStore,
+  createLocalStorageAdapter,
+  resolveMaybePromise,
+  serializeVersion
+} from "@flowsterix/core";
+import {
+  createContext as createContext3,
+  useCallback,
+  useContext as useContext3,
+  useEffect as useEffect2,
+  useMemo as useMemo2,
+  useRef,
+  useState as useState2
+} from "react";
+
+// src/labels.ts
+import { createContext, useContext } from "react";
+var defaultLabels = {
+  back: "Back",
+  next: "Next",
+  finish: "Finish",
+  skip: "Skip tour",
+  holdToConfirm: "Hold to confirm",
+  ariaStepProgress: ({ current, total }) => `Step ${current} of ${total}`,
+  ariaTimeRemaining: ({ ms }) => `${Math.ceil(ms / 1e3)} seconds remaining`,
+  ariaDelayProgress: "Auto-advance progress",
+  formatTimeRemaining: ({ ms }) => `${Math.ceil(ms / 1e3)}s remaining`
+};
+var LabelsContext = createContext(defaultLabels);
+var LabelsProvider = LabelsContext.Provider;
+function useTourLabels() {
+  return useContext(LabelsContext);
+}
+
+// src/motion/animationAdapter.tsx
+import { motion } from "motion/react";
+import { createContext as createContext2, useContext as useContext2, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var defaultAdapter = {
+  components: {
+    MotionDiv: motion.div,
+    MotionSection: motion.section,
+    MotionSvg: motion.svg,
+    MotionDefs: motion.defs,
+    MotionMask: motion.mask,
+    MotionRect: motion.rect,
+    MotionSpan: motion.span,
+    MotionButton: motion.button
+  },
+  transitions: {
+    overlayHighlight: {
+      duration: 0.35,
+      ease: "easeOut",
+      type: "spring",
+      damping: 25,
+      stiffness: 300,
+      mass: 0.7
+    },
+    overlayFade: {
+      duration: 0.35,
+      ease: "easeOut"
+    },
+    popoverEntrance: {
+      duration: 0.25,
+      ease: "easeOut"
+    },
+    popoverExit: {
+      duration: 0.2,
+      ease: "easeOut"
+    },
+    popoverContent: {
+      duration: 0.2,
+      ease: "easeOut"
+    },
+    delayIndicator: {
+      duration: 0.18,
+      ease: "easeOut"
+    }
+  }
+};
+var AnimationAdapterContext = createContext2(defaultAdapter);
+var AnimationAdapterProvider = ({
+  adapter,
+  children
+}) => {
+  const value = useMemo(() => adapter ?? defaultAdapter, [adapter]);
+  return /* @__PURE__ */ jsx(AnimationAdapterContext.Provider, { value, children });
+};
+var useAnimationAdapter = () => {
+  return useContext2(AnimationAdapterContext);
+};
+var defaultAnimationAdapter = defaultAdapter;
+var reducedMotionAnimationAdapter = {
+  components: defaultAdapter.components,
+  transitions: {
+    overlayHighlight: {
+      duration: 1e-3,
+      ease: "linear",
+      type: "tween"
+    },
+    overlayFade: {
+      duration: 1e-3,
+      ease: "linear"
+    },
+    popoverEntrance: {
+      duration: 1e-3,
+      ease: "linear"
+    },
+    popoverExit: {
+      duration: 1e-3,
+      ease: "linear"
+    },
+    popoverContent: {
+      duration: 1e-3,
+      ease: "linear"
+    },
+    delayIndicator: {
+      duration: 1e-3,
+      ease: "linear"
+    }
+  }
+};
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+var usePreferredAnimationAdapter = (options) => {
+  const {
+    defaultAdapter: defaultOption = defaultAnimationAdapter,
+    reducedMotionAdapter: reducedOption = reducedMotionAnimationAdapter,
+    enabled = true
+  } = options ?? {};
+  const [prefersReduced, setPrefersReduced] = useState(() => {
+    if (!enabled || typeof window === "undefined") return false;
+    return window.matchMedia(REDUCED_MOTION_QUERY).matches;
+  });
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia(REDUCED_MOTION_QUERY);
+    const handleChange = (event) => {
+      setPrefersReduced(event.matches);
+    };
+    setPrefersReduced(mediaQuery.matches);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [enabled]);
+  if (!enabled) {
+    return defaultOption;
+  }
+  return prefersReduced ? reducedOption : defaultOption;
+};
+
+// src/context.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TourContext = createContext3(void 0);
+var DEFAULT_STORAGE_PREFIX = "tour";
+var useFlowMap = (flows) => {
+  return useMemo2(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const flow of flows) {
+      map.set(flow.id, flow);
+    }
+    return map;
+  }, [flows]);
+};
+var TourProvider = ({
+  flows,
+  children,
+  storageAdapter,
+  storageNamespace,
+  persistOnChange = true,
+  defaultDebug = false,
+  animationAdapter: animationAdapterProp = defaultAnimationAdapter,
+  reducedMotionAdapter,
+  autoDetectReducedMotion = true,
+  analytics,
+  backdropInteraction: backdropInteractionProp = "passthrough",
+  lockBodyScroll: lockBodyScrollProp = false,
+  labels: labelsProp,
+  onVersionMismatch
+}) => {
+  const mergedLabels = useMemo2(
+    () => ({ ...defaultLabels, ...labelsProp }),
+    [labelsProp]
+  );
+  const flowMap = useFlowMap(flows);
+  const storeRef = useRef(null);
+  const unsubscribeRef = useRef(null);
+  const stepHooksUnsubscribeRef = useRef(null);
+  const fallbackStorageRef = useRef(void 0);
+  const pendingResumeRef = useRef(/* @__PURE__ */ new Set());
+  const autoStartRequestedRef = useRef(null);
+  const [activeFlowId, setActiveFlowId] = useState2(null);
+  const [state, setState] = useState2(null);
+  const [events, setEvents] = useState2(
+    null
+  );
+  const [debugEnabled, setDebugEnabled] = useState2(defaultDebug);
+  const [delayInfo, setDelayInfo] = useState2(null);
+  const autoStartFlow = useMemo2(() => {
+    return flows.find((flow) => flow.autoStart);
+  }, [flows]);
+  const teardownStore = useCallback(() => {
+    unsubscribeRef.current?.();
+    unsubscribeRef.current = null;
+    stepHooksUnsubscribeRef.current?.();
+    stepHooksUnsubscribeRef.current = null;
+    storeRef.current?.destroy();
+    storeRef.current = null;
+    setDelayInfo(null);
+    pendingResumeRef.current.clear();
+  }, []);
+  useEffect2(() => {
+    return () => {
+      teardownStore();
+      setState(null);
+      setEvents(null);
+      setActiveFlowId(null);
+    };
+  }, [teardownStore]);
+  useEffect2(() => {
+    if (!activeFlowId) return;
+    const definition = flowMap.get(activeFlowId);
+    if (!definition) {
+      teardownStore();
+      setState(null);
+      setEvents(null);
+      setActiveFlowId(null);
+    }
+  }, [activeFlowId, flowMap, teardownStore]);
+  const invokeStepHookSync = (hook, context, phase) => {
+    if (!hook) return;
+    try {
+      const result = hook(context);
+      if (typeof result === "object" && result !== null && typeof result.then === "function") {
+        ;
+        result.catch((error) => {
+          console.warn(`[tour][step] ${phase} hook rejected`, error);
+        });
+      }
+    } catch (error) {
+      console.warn(`[tour][step] ${phase} hook failed`, error);
+    }
+  };
+  const ensureStore = useCallback(
+    (flowId) => {
+      const existing = storeRef.current;
+      if (existing && existing.definition.id === flowId) {
+        return existing;
+      }
+      teardownStore();
+      const definition = flowMap.get(flowId);
+      if (!definition) {
+        throw new Error(`Flow with id "${flowId}" is not registered.`);
+      }
+      if (!storageAdapter && !fallbackStorageRef.current && isBrowser) {
+        fallbackStorageRef.current = createLocalStorageAdapter();
+      }
+      const resolvedStorageAdapter = storageAdapter ? storageAdapter : fallbackStorageRef.current;
+      const store = createFlowStore(definition, {
+        storageAdapter: resolvedStorageAdapter,
+        storageKey: storageNamespace ? `${storageNamespace}:${definition.id}` : void 0,
+        persistOnChange,
+        analytics,
+        onVersionMismatch
+      });
+      const unsubscribeEnter = store.events.on("stepEnter", (payload) => {
+        const step = payload.currentStep;
+        if (!step.onEnter) return;
+        invokeStepHookSync(
+          step.onEnter,
+          { flow: definition, state: payload.state, step },
+          "enter"
+        );
+      });
+      const unsubscribeExit = store.events.on("stepExit", (payload) => {
+        const step = payload.previousStep;
+        if (!step.onExit) return;
+        invokeStepHookSync(
+          step.onExit,
+          { flow: definition, state: payload.state, step },
+          "exit"
+        );
+      });
+      stepHooksUnsubscribeRef.current = () => {
+        unsubscribeEnter();
+        unsubscribeExit();
+      };
+      unsubscribeRef.current = store.subscribe(setState);
+      setEvents(store.events);
+      storeRef.current = store;
+      return store;
+    },
+    [
+      analytics,
+      flowMap,
+      onVersionMismatch,
+      persistOnChange,
+      storageAdapter,
+      storageNamespace,
+      teardownStore
+    ]
+  );
+  const getActiveStore = useCallback(() => {
+    const store = storeRef.current;
+    if (!store) {
+      throw new Error(
+        "No active flow. Call startFlow before controlling progression."
+      );
+    }
+    return store;
+  }, []);
+  const isPromiseLike2 = (value) => {
+    return typeof value === "object" && value !== null && typeof value.then === "function";
+  };
+  const invokeStepHook = useCallback(
+    async (hook, context, phase) => {
+      if (!hook) return;
+      try {
+        const result = hook(context);
+        if (isPromiseLike2(result)) {
+          await result;
+        }
+      } catch (error) {
+        console.warn(`[tour][step] ${phase} hook failed`, error);
+      }
+    },
+    []
+  );
+  const runResumeHooks = useCallback(
+    async (definition, flowState, strategy) => {
+      if (flowState.status !== "running") return;
+      if (strategy === "current") {
+        const index = flowState.stepIndex;
+        if (index < 0 || index >= definition.steps.length) return;
+        const step = definition.steps[index];
+        if (!step.onResume) return;
+        await invokeStepHook(
+          step.onResume,
+          {
+            flow: definition,
+            state: flowState,
+            step
+          },
+          "resume"
+        );
+        return;
+      }
+      const maxIndex = Math.min(
+        flowState.stepIndex,
+        definition.steps.length - 1
+      );
+      if (maxIndex < 0) return;
+      for (let index = 0; index <= maxIndex; index += 1) {
+        const step = definition.steps[index];
+        if (!step.onResume) continue;
+        await invokeStepHook(
+          step.onResume,
+          {
+            flow: definition,
+            state: flowState,
+            step
+          },
+          "resume"
+        );
+      }
+    },
+    [invokeStepHook]
+  );
+  const resolveResumeStrategy = useCallback(
+    (definition, options) => {
+      return options?.resumeStrategy ?? definition.resumeStrategy ?? "chain";
+    },
+    []
+  );
+  const startFlow = useCallback(
+    (flowId, options) => {
+      const store = ensureStore(flowId);
+      const previousState = store.getState();
+      setActiveFlowId(flowId);
+      if (options?.resume) {
+        pendingResumeRef.current.add(flowId);
+      } else {
+        pendingResumeRef.current.delete(flowId);
+      }
+      const nextState = store.start(options);
+      if (!options?.resume) {
+        return nextState;
+      }
+      if (previousState.stepIndex >= 0 && nextState.status === "running") {
+        pendingResumeRef.current.delete(flowId);
+        const resumeStrategy = resolveResumeStrategy(store.definition, options);
+        const shouldRunResumeHooks = resumeStrategy === "current" ? nextState.stepIndex >= 0 : nextState.stepIndex > 0;
+        if (shouldRunResumeHooks) {
+          void runResumeHooks(store.definition, nextState, resumeStrategy);
+        }
+      } else if (nextState.status !== "idle" && nextState.stepIndex <= 0) {
+        pendingResumeRef.current.delete(flowId);
+      }
+      return nextState;
+    },
+    [ensureStore, resolveResumeStrategy, runResumeHooks]
+  );
+  useEffect2(() => {
+    if (!autoStartFlow) {
+      autoStartRequestedRef.current = null;
+      return;
+    }
+    if (activeFlowId) return;
+    if (autoStartRequestedRef.current === autoStartFlow.id) return;
+    autoStartRequestedRef.current = autoStartFlow.id;
+    let cancelled = false;
+    const maybeAutoStart = async () => {
+      if (!storageAdapter && !fallbackStorageRef.current && isBrowser) {
+        fallbackStorageRef.current = createLocalStorageAdapter();
+      }
+      const resolvedStorageAdapter = storageAdapter ? storageAdapter : fallbackStorageRef.current;
+      if (!resolvedStorageAdapter) {
+        startFlow(autoStartFlow.id, { resume: true });
+        return;
+      }
+      const storageKey = storageNamespace ? `${storageNamespace}:${autoStartFlow.id}` : `${DEFAULT_STORAGE_PREFIX}:${autoStartFlow.id}`;
+      const snapshot = await resolveMaybePromise(
+        resolvedStorageAdapter.get(storageKey)
+      );
+      if (cancelled) return;
+      const currentVersionStr = serializeVersion(autoStartFlow.version);
+      const storedVersionStr = typeof snapshot?.version === "number" ? serializeVersion({ major: snapshot.version, minor: 0 }) : snapshot?.version;
+      if (snapshot && storedVersionStr === currentVersionStr) {
+        const storedState = snapshot.value;
+        const isFinished = storedState.status === "completed";
+        const isSkipped = storedState.status === "cancelled" && storedState.cancelReason === "skipped";
+        if (isFinished || isSkipped) {
+          return;
+        }
+      }
+      startFlow(autoStartFlow.id, { resume: true });
+    };
+    void maybeAutoStart();
+    return () => {
+      cancelled = true;
+      if (!activeFlowId) {
+        autoStartRequestedRef.current = null;
+      }
+    };
+  }, [activeFlowId, autoStartFlow, startFlow, storageAdapter, storageNamespace]);
+  const next = useCallback(() => getActiveStore().next(), [getActiveStore]);
+  const back = useCallback(() => getActiveStore().back(), [getActiveStore]);
+  const goToStep = useCallback(
+    (step) => getActiveStore().goToStep(step),
+    [getActiveStore]
+  );
+  const pause = useCallback(() => getActiveStore().pause(), [getActiveStore]);
+  const resume = useCallback(() => {
+    const store = getActiveStore();
+    const previousState = store.getState();
+    if (previousState.status === "paused") {
+      pendingResumeRef.current.add(store.definition.id);
+    }
+    const nextState = store.resume();
+    if (previousState.status === "paused" && nextState.status === "running" && nextState.stepIndex >= 0) {
+      pendingResumeRef.current.delete(store.definition.id);
+      const resumeStrategy = resolveResumeStrategy(store.definition);
+      const shouldRunResumeHooks = resumeStrategy === "current" ? true : nextState.stepIndex > 0;
+      if (shouldRunResumeHooks) {
+        void runResumeHooks(store.definition, nextState, resumeStrategy);
+      }
+    }
+    return nextState;
+  }, [getActiveStore, resolveResumeStrategy, runResumeHooks]);
+  const cancel = useCallback(
+    (reason) => getActiveStore().cancel(reason),
+    [getActiveStore]
+  );
+  const complete = useCallback(
+    () => getActiveStore().complete(),
+    [getActiveStore]
+  );
+  const toggleDebug = useCallback(() => {
+    setDebugEnabled((previous) => !previous);
+  }, []);
+  const activeStep = useMemo2(() => {
+    if (!state || !storeRef.current) return null;
+    if (state.stepIndex < 0) return null;
+    return storeRef.current.definition.steps[state.stepIndex] ?? null;
+  }, [state]);
+  useEffect2(() => {
+    if (!activeFlowId) return;
+    if (!pendingResumeRef.current.has(activeFlowId)) return;
+    if (!state || state.status !== "running") return;
+    const definition = flowMap.get(activeFlowId);
+    if (!definition) return;
+    const resumeStrategy = resolveResumeStrategy(definition);
+    const shouldRunResumeHooks = resumeStrategy === "current" ? state.stepIndex >= 0 : state.stepIndex > 0;
+    if (!shouldRunResumeHooks) {
+      pendingResumeRef.current.delete(activeFlowId);
+      return;
+    }
+    pendingResumeRef.current.delete(activeFlowId);
+    void runResumeHooks(definition, state, resumeStrategy);
+  }, [activeFlowId, flowMap, resolveResumeStrategy, runResumeHooks, state]);
+  const contextValue = useMemo2(
+    () => ({
+      flows: flowMap,
+      activeFlowId,
+      state,
+      activeStep,
+      startFlow,
+      next,
+      back,
+      goToStep,
+      pause,
+      resume,
+      cancel,
+      complete,
+      events,
+      debugEnabled,
+      setDebugEnabled,
+      toggleDebug,
+      delayInfo,
+      setDelayInfo,
+      backdropInteraction: backdropInteractionProp,
+      lockBodyScroll: lockBodyScrollProp
+    }),
+    [
+      activeFlowId,
+      activeStep,
+      back,
+      cancel,
+      complete,
+      debugEnabled,
+      events,
+      flowMap,
+      goToStep,
+      next,
+      pause,
+      resume,
+      delayInfo,
+      setDelayInfo,
+      setDebugEnabled,
+      startFlow,
+      state,
+      toggleDebug,
+      backdropInteractionProp,
+      lockBodyScrollProp
+    ]
+  );
+  const resolvedAnimationAdapter = usePreferredAnimationAdapter({
+    defaultAdapter: animationAdapterProp,
+    reducedMotionAdapter,
+    enabled: autoDetectReducedMotion
+  });
+  return /* @__PURE__ */ jsx2(AnimationAdapterProvider, { adapter: resolvedAnimationAdapter, children: /* @__PURE__ */ jsx2(LabelsProvider, { value: mergedLabels, children: /* @__PURE__ */ jsx2(TourContext.Provider, { value: contextValue, children }) }) });
+};
+var useTour = () => {
+  const context = useContext3(TourContext);
+  if (!context) {
+    throw new Error("useTour must be used within a TourProvider");
+  }
+  return context;
+};
+var useTourEvents = (event, handler) => {
+  const { events } = useTour();
+  useEffect2(() => {
+    if (!events) return;
+    return events.on(event, handler);
+  }, [event, events, handler]);
+};
+
+// src/hooks/useTourTarget.ts
+import { useEffect as useEffect3, useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
+
+// src/hooks/scrollMargin.ts
+var DEFAULT_SCROLL_MARGIN = 16;
+var sanitize = (value, fallback) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    return fallback;
+  }
+  return value < 0 ? 0 : value;
+};
+var resolveScrollMargin = (margin, fallback = DEFAULT_SCROLL_MARGIN) => {
+  if (typeof margin === "number") {
+    const safe = sanitize(margin, fallback);
+    return {
+      top: safe,
+      bottom: safe,
+      left: safe,
+      right: safe
+    };
+  }
+  return {
+    top: sanitize(margin?.top, fallback),
+    bottom: sanitize(margin?.bottom, fallback),
+    left: sanitize(margin?.left, fallback),
+    right: sanitize(margin?.right, fallback)
+  };
+};
+
+// src/hooks/waitForPredicate.ts
+var defaultWarn = (...args) => {
+  if (typeof console !== "undefined" && typeof console.warn === "function") {
+    console.warn(...args);
+  }
+};
+var isPromiseLike = (value) => {
+  return typeof value === "object" && value !== null && typeof value.then === "function";
+};
+var createWaitForPredicateController = ({
+  waitFor,
+  context,
+  onChange,
+  warn = defaultWarn
+}) => {
+  const hasPredicate = Boolean(waitFor?.predicate && context);
+  const hasSubscription = Boolean(waitFor?.subscribe && context);
+  let satisfied = !hasPredicate && !hasSubscription;
+  let destroyed = false;
+  let pollId = null;
+  let subscriptionCleanup = null;
+  let lastCheckId = 0;
+  const update = (nextValue) => {
+    const normalized = Boolean(nextValue);
+    if (satisfied === normalized) return;
+    satisfied = normalized;
+    onChange?.(satisfied);
+  };
+  const evaluate = () => {
+    if (!waitFor?.predicate || !context || destroyed) {
+      return;
+    }
+    const checkId = ++lastCheckId;
+    let result;
+    try {
+      result = waitFor.predicate(context);
+    } catch (error) {
+      warn("[tour][waitFor] predicate threw an error", error);
+      update(false);
+      return;
+    }
+    if (isPromiseLike(result)) {
+      result.then(
+        (value) => {
+          if (destroyed || checkId !== lastCheckId) return;
+          update(Boolean(value));
+        },
+        (error) => {
+          if (destroyed || checkId !== lastCheckId) return;
+          warn("[tour][waitFor] predicate rejected", error);
+          update(false);
+        }
+      );
+      return;
+    }
+    update(Boolean(result));
+  };
+  const attachSubscription = () => {
+    if (!waitFor?.subscribe || !context) return;
+    try {
+      const cleanup = waitFor.subscribe({
+        ...context,
+        notify: (nextValue) => {
+          if (destroyed) return;
+          if (typeof nextValue === "boolean") {
+            update(nextValue);
+            return;
+          }
+          evaluate();
+        }
+      });
+      if (typeof cleanup === "function") {
+        subscriptionCleanup = cleanup;
+      }
+    } catch (error) {
+      warn("[tour][waitFor] subscribe handler threw an error", error);
+    }
+  };
+  const start = () => {
+    destroyed = false;
+    satisfied = !hasPredicate && !hasSubscription;
+    lastCheckId = 0;
+    if (waitFor?.predicate && context) {
+      evaluate();
+      const pollMs = Math.max(0, waitFor.pollMs ?? 200);
+      if (pollMs > 0) {
+        pollId = window.setInterval(evaluate, pollMs);
+      }
+    }
+    attachSubscription();
+  };
+  const stop = () => {
+    destroyed = true;
+    if (pollId !== null) {
+      window.clearInterval(pollId);
+      pollId = null;
+    }
+    if (subscriptionCleanup) {
+      try {
+        subscriptionCleanup();
+      } catch (error) {
+        warn("[tour][waitFor] subscribe cleanup threw an error", error);
+      }
+      subscriptionCleanup = null;
+    }
+  };
+  const isSatisfied = () => {
+    if (!waitFor) return true;
+    if (!hasPredicate && !hasSubscription) return true;
+    return satisfied;
+  };
+  return {
+    start,
+    stop,
+    evaluate,
+    isSatisfied
+  };
+};
+
+// src/hooks/useTourTarget.ts
+var INITIAL_TARGET_INFO = {
+  element: null,
+  rect: null,
+  lastResolvedRect: null,
+  isScreen: false,
+  status: "idle",
+  stepId: null,
+  lastUpdated: 0,
+  visibility: "unknown",
+  rectSource: "none"
+};
+var DEFAULT_SCROLL_MODE = "center";
+var MAX_AUTO_SCROLL_CHECKS = 10;
+var STALLED_CHECKS_BEFORE_AUTO = 4;
+var RECT_PROGRESS_THRESHOLD = 0.5;
+var lastResolvedRectByStep = /* @__PURE__ */ new Map();
+var rectHasMeaningfulSize = (rect) => !!rect && rect.width > 0 && rect.height > 0 && Number.isFinite(rect.top) && Number.isFinite(rect.left);
+var computeRectSource = (rect, storedRect, isScreen) => {
+  if (isScreen) return "viewport";
+  if (rectHasMeaningfulSize(rect)) return "live";
+  if (storedRect) return "stored";
+  return "none";
+};
+var computeVisibilityState = (element, rect, isScreen) => {
+  if (!isBrowser) return "unknown";
+  if (isScreen) return "visible";
+  if (!element) return "missing";
+  if (!document.documentElement.contains(element)) return "detached";
+  const style = window.getComputedStyle(element);
+  const hiddenByStyle = style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse";
+  const transparent = Number.parseFloat(style.opacity || "1") === 0;
+  if (hiddenByStyle || transparent) {
+    return "hidden";
+  }
+  if (!rectHasMeaningfulSize(rect)) {
+    return "hidden";
+  }
+  return "visible";
+};
+var scrollContainerBy = (container, topDelta, leftDelta, behavior) => {
+  if (!isBrowser) return;
+  if (Math.abs(topDelta) < 0.5 && Math.abs(leftDelta) < 0.5) {
+    return;
+  }
+  const isRootContainer = container === document.body || container === document.documentElement || container === document.scrollingElement;
+  if (isRootContainer) {
+    window.scrollBy({
+      top: topDelta,
+      left: leftDelta,
+      behavior: behavior ?? "auto"
+    });
+    return;
+  }
+  const elementContainer = container;
+  if (typeof elementContainer.scrollBy === "function") {
+    elementContainer.scrollBy({
+      top: topDelta,
+      left: leftDelta,
+      behavior: behavior ?? "auto"
+    });
+    return;
+  }
+  elementContainer.scrollTop += topDelta;
+  elementContainer.scrollLeft += leftDelta;
+};
+var alignWithinViewport = (element, margin, behavior, mode) => {
+  if (mode === "preserve") return;
+  const viewportRect = getViewportRect();
+  const finalRect = getClientRect(element);
+  const availableHeight = viewportRect.height - (margin.top + margin.bottom);
+  if (availableHeight <= 0) return;
+  const desiredTop = mode === "center" ? margin.top + (availableHeight - finalRect.height) / 2 : margin.top;
+  const delta = finalRect.top - desiredTop;
+  if (Math.abs(delta) < 0.5) return;
+  window.scrollBy({
+    top: delta,
+    behavior: behavior ?? "auto"
+  });
+};
+var ensureElementInView = (element, margin, options) => {
+  const behavior = options?.behavior ?? "auto";
+  const mode = options?.mode ?? "preserve";
+  if (!isBrowser) return;
+  const scrollParents = getScrollParents(element);
+  const rootScroller = document.scrollingElement;
+  if (rootScroller && !scrollParents.includes(rootScroller)) {
+    scrollParents.push(rootScroller);
+  }
+  for (const container of scrollParents) {
+    const containerRect = container === rootScroller || container === document.body || container === document.documentElement ? getViewportRect() : getClientRect(container);
+    const targetRect = getClientRect(element);
+    let topDelta = 0;
+    if (targetRect.top < containerRect.top + margin.top) {
+      topDelta = targetRect.top - (containerRect.top + margin.top);
+    } else if (targetRect.bottom > containerRect.bottom - margin.bottom) {
+      topDelta = targetRect.bottom - (containerRect.bottom - margin.bottom);
+    }
+    let leftDelta = 0;
+    if (targetRect.left < containerRect.left + margin.left) {
+      leftDelta = targetRect.left - (containerRect.left + margin.left);
+    } else if (targetRect.right > containerRect.right - margin.right) {
+      leftDelta = targetRect.right - (containerRect.right - margin.right);
+    }
+    if (topDelta !== 0 || leftDelta !== 0) {
+      scrollContainerBy(container, topDelta, leftDelta, behavior);
+    }
+  }
+  const viewportRect = getViewportRect();
+  const finalRect = getClientRect(element);
+  let viewportTopDelta = 0;
+  if (finalRect.top < viewportRect.top + margin.top) {
+    viewportTopDelta = finalRect.top - (viewportRect.top + margin.top);
+  } else if (finalRect.bottom > viewportRect.bottom - margin.bottom) {
+    viewportTopDelta = finalRect.bottom - (viewportRect.bottom - margin.bottom);
+  }
+  let viewportLeftDelta = 0;
+  if (finalRect.left < viewportRect.left + margin.left) {
+    viewportLeftDelta = finalRect.left - (viewportRect.left + margin.left);
+  } else if (finalRect.right > viewportRect.right - margin.right) {
+    viewportLeftDelta = finalRect.right - (viewportRect.right - margin.right);
+  }
+  if (viewportTopDelta !== 0 || viewportLeftDelta !== 0) {
+    window.scrollBy({
+      top: viewportTopDelta,
+      left: viewportLeftDelta,
+      behavior
+    });
+  }
+  alignWithinViewport(element, margin, behavior, mode);
+};
+var resolveStepTarget = (target) => {
+  if (!isBrowser) return null;
+  if (target === "screen") {
+    return document.body;
+  }
+  if (target.getNode) {
+    try {
+      const node = target.getNode();
+      if (node) {
+        return node;
+      }
+    } catch {
+    }
+  }
+  if (target.selector) {
+    try {
+      return document.querySelector(target.selector);
+    } catch {
+      return null;
+    }
+  }
+  return null;
+};
+var useTourTarget = () => {
+  const { activeStep, state, activeFlowId, flows } = useTour();
+  const [targetInfo, setTargetInfo] = useState3(INITIAL_TARGET_INFO);
+  const autoScrollStateRef = useRef2({ stepId: null, checks: 0, stalledChecks: 0, done: false, lastRect: null });
+  const autoScrollRafRef = useRef2(null);
+  const autoScrollTimeoutRef = useRef2(null);
+  const lastRectRef = useRef2(null);
+  const initialScrollStepRef = useRef2(null);
+  const cancelAutoScrollLoop = () => {
+    if (!isBrowser) return;
+    if (autoScrollTimeoutRef.current !== null) {
+      globalThis.clearTimeout(autoScrollTimeoutRef.current);
+      autoScrollTimeoutRef.current = null;
+    }
+    if (autoScrollRafRef.current !== null) {
+      window.cancelAnimationFrame(autoScrollRafRef.current);
+      autoScrollRafRef.current = null;
+    }
+  };
+  useEffect3(() => {
+    if (!activeStep) {
+      initialScrollStepRef.current = null;
+    }
+    return () => {
+      initialScrollStepRef.current = null;
+    };
+  }, [activeStep?.id]);
+  useLayoutEffect(() => {
+    if (!isBrowser) return;
+    if (!activeStep) return;
+    if (targetInfo.status !== "ready") return;
+    if (targetInfo.isScreen) return;
+    if (!targetInfo.element) return;
+    if (initialScrollStepRef.current === activeStep.id) {
+      return;
+    }
+    initialScrollStepRef.current = activeStep.id;
+    const margin = resolveScrollMargin(
+      activeStep.targetBehavior?.scrollMargin,
+      DEFAULT_SCROLL_MARGIN
+    );
+    const scrollMode = activeStep.targetBehavior?.scrollMode ?? DEFAULT_SCROLL_MODE;
+    const hasLiveRect = targetInfo.rectSource === "live";
+    const scrollBehavior = hasLiveRect ? "smooth" : "auto";
+    ensureElementInView(targetInfo.element, margin, {
+      behavior: scrollBehavior,
+      mode: scrollMode
+    });
+  }, [
+    activeStep?.id,
+    activeStep?.targetBehavior?.scrollMargin,
+    activeStep?.targetBehavior?.scrollMode,
+    targetInfo.rect,
+    targetInfo.lastResolvedRect,
+    targetInfo.element,
+    targetInfo.isScreen,
+    targetInfo.status,
+    targetInfo.rectSource
+  ]);
+  useEffect3(() => {
+    if (!activeStep || !state || state.status !== "running") {
+      setTargetInfo(INITIAL_TARGET_INFO);
+      autoScrollStateRef.current = {
+        stepId: null,
+        checks: 0,
+        stalledChecks: 0,
+        done: false,
+        lastRect: null
+      };
+      cancelAutoScrollLoop();
+      return;
+    }
+    if (!isBrowser) {
+      const storedRect = lastResolvedRectByStep.get(activeStep.id) ?? null;
+      setTargetInfo({
+        element: null,
+        rect: null,
+        lastResolvedRect: storedRect ? { ...storedRect } : null,
+        isScreen: activeStep.target === "screen",
+        status: "resolving",
+        stepId: activeStep.id,
+        lastUpdated: Date.now(),
+        visibility: "unknown",
+        rectSource: storedRect ? "stored" : "none"
+      });
+      return;
+    }
+    const currentStep = activeStep;
+    const activeFlow = activeFlowId ? flows.get(activeFlowId) ?? null : null;
+    const isScreen = currentStep.target === "screen";
+    const waitForSelectorRaw = currentStep.waitFor?.selector;
+    const waitForSelector = typeof waitForSelectorRaw === "string" ? waitForSelectorRaw.trim() : void 0;
+    const hasWaitForSelector = Boolean(waitForSelector);
+    const waitForTimeout = Math.max(0, currentStep.waitFor?.timeout ?? 8e3);
+    const waitContext = activeFlow ? {
+      flow: activeFlow,
+      state,
+      step: currentStep
+    } : null;
+    let cancelled = false;
+    let resolvePollId = null;
+    let waitForPollId = null;
+    let resizeObserver = null;
+    let mutationObserver = null;
+    let scrollParents = [];
+    const cleanupFns = [];
+    let element = null;
+    let rafId = null;
+    let lastStatus = "idle";
+    let lastElement = null;
+    let hasEmitted = false;
+    let waitForStartedAt = null;
+    let waitForTimedOut = false;
+    let waitForSelectorWarned = false;
+    let waitForTimeoutWarned = false;
+    let waitForPredicateController = null;
+    lastRectRef.current = null;
+    function clearResolvePolling() {
+      if (resolvePollId !== null) {
+        window.clearInterval(resolvePollId);
+        resolvePollId = null;
+      }
+    }
+    function clearWaitForPoll() {
+      if (waitForPollId !== null) {
+        window.clearInterval(waitForPollId);
+        waitForPollId = null;
+      }
+    }
+    const rectChanged = (nextRect) => {
+      const previous = lastRectRef.current;
+      if (!previous || !nextRect) {
+        return previous !== nextRect;
+      }
+      const threshold = 0.25;
+      return Math.abs(previous.top - nextRect.top) > threshold || Math.abs(previous.left - nextRect.left) > threshold || Math.abs(previous.width - nextRect.width) > threshold || Math.abs(previous.height - nextRect.height) > threshold;
+    };
+    const isWaitForSelectorSatisfied = () => {
+      if (!hasWaitForSelector) return true;
+      try {
+        return document.querySelector(waitForSelector) !== null;
+      } catch (error) {
+        if (!waitForSelectorWarned && typeof console !== "undefined") {
+          console.warn(
+            "[tour][waitFor] selector lookup failed",
+            waitForSelector,
+            error
+          );
+          waitForSelectorWarned = true;
+        }
+        return false;
+      }
+    };
+    const isWaitForSatisfied = () => {
+      const selectorReady = !hasWaitForSelector || isWaitForSelectorSatisfied();
+      const predicateReady = waitForPredicateController?.isSatisfied() ?? true;
+      return selectorReady && predicateReady;
+    };
+    function updateTargetState(status, rectOverride) {
+      if (cancelled) return;
+      const rect = typeof rectOverride !== "undefined" ? rectOverride : isScreen ? getViewportRect() : element ? getClientRect(element) : null;
+      if (status === "ready" && hasWaitForSelector && waitForStartedAt === null) {
+        waitForStartedAt = Date.now();
+      }
+      if (!waitForTimedOut && waitForTimeout > 0 && waitForStartedAt !== null && Date.now() - waitForStartedAt >= waitForTimeout) {
+        waitForTimedOut = true;
+        if (!waitForTimeoutWarned && typeof console !== "undefined") {
+          console.warn(
+            "[tour][waitFor] timeout exceeded for step",
+            currentStep.id,
+            "selector:",
+            waitForSelector
+          );
+          waitForTimeoutWarned = true;
+        }
+      }
+      const hasRect = rectHasMeaningfulSize(rect);
+      const waitConditionMet = waitForTimedOut || isWaitForSatisfied();
+      const nextStatus = status === "ready" && (isScreen || hasRect) && waitConditionMet ? "ready" : "resolving";
+      if (waitConditionMet) {
+        clearWaitForPoll();
+      }
+      const storedRect = lastResolvedRectByStep.get(currentStep.id) ?? null;
+      const shouldUpdate = !hasEmitted || rectChanged(rect) || lastStatus !== nextStatus || element !== lastElement;
+      if (!shouldUpdate) {
+        return;
+      }
+      lastRectRef.current = rect ? { ...rect } : null;
+      lastStatus = nextStatus;
+      hasEmitted = true;
+      lastElement = element ?? null;
+      const shouldPersistRect = nextStatus === "ready" && !isScreen && rectHasMeaningfulSize(rect);
+      if (shouldPersistRect && rect) {
+        lastResolvedRectByStep.set(currentStep.id, { ...rect });
+      }
+      const lastResolvedRect = shouldPersistRect && rect ? { ...rect } : storedRect ? { ...storedRect } : null;
+      const visibility = computeVisibilityState(element ?? null, rect, isScreen);
+      const rectSource = computeRectSource(rect, lastResolvedRect, isScreen);
+      setTargetInfo({
+        element: element ?? null,
+        rect,
+        lastResolvedRect,
+        isScreen,
+        status: nextStatus,
+        stepId: currentStep.id,
+        lastUpdated: Date.now(),
+        visibility,
+        rectSource
+      });
+    }
+    const commitInfo = (status) => {
+      updateTargetState(status);
+    };
+    waitForPredicateController = createWaitForPredicateController({
+      waitFor: currentStep.waitFor,
+      context: waitContext,
+      onChange: () => {
+        updateTargetState(element ? "ready" : "resolving");
+      }
+    });
+    waitForPredicateController.start();
+    function stopRaf() {
+      if (rafId !== null) {
+        window.cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+    }
+    function startRafMonitor() {
+      if (isScreen || !isBrowser) return;
+      stopRaf();
+      const tick = () => {
+        if (cancelled) return;
+        if (!element) {
+          updateTargetState("resolving", null);
+        } else {
+          const rect = getClientRect(element);
+          if (rectChanged(rect)) {
+            updateTargetState("ready", rect);
+          }
+        }
+        rafId = window.requestAnimationFrame(tick);
+      };
+      rafId = window.requestAnimationFrame(tick);
+      cleanupFns.push(stopRaf);
+    }
+    function resetObservers() {
+      cleanupFns.forEach((dispose) => dispose());
+      cleanupFns.length = 0;
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+        resizeObserver = null;
+      }
+      if (mutationObserver) {
+        mutationObserver.disconnect();
+        mutationObserver = null;
+      }
+      scrollParents = [];
+      clearWaitForPoll();
+      stopRaf();
+    }
+    function startObservers() {
+      if (cancelled) return;
+      resetObservers();
+      clearResolvePolling();
+      if (isScreen) {
+        const onResize = () => commitInfo("ready");
+        window.addEventListener("resize", onResize);
+        window.addEventListener("scroll", onResize, true);
+        cleanupFns.push(() => {
+          window.removeEventListener("resize", onResize);
+          window.removeEventListener("scroll", onResize, true);
+        });
+        if (typeof window !== "undefined" && window.visualViewport) {
+          const onViewportChange = () => commitInfo("ready");
+          window.visualViewport.addEventListener("resize", onViewportChange);
+          window.visualViewport.addEventListener("scroll", onViewportChange);
+          cleanupFns.push(() => {
+            window.visualViewport?.removeEventListener(
+              "resize",
+              onViewportChange
+            );
+            window.visualViewport?.removeEventListener(
+              "scroll",
+              onViewportChange
+            );
+          });
+        }
+      } else if (element) {
+        if (typeof ResizeObserver === "function") {
+          resizeObserver = new ResizeObserver(() => updateTargetState("ready"));
+          resizeObserver.observe(element);
+        }
+        const onReposition = () => commitInfo("ready");
+        window.addEventListener("resize", onReposition);
+        window.addEventListener("scroll", onReposition, true);
+        cleanupFns.push(() => {
+          window.removeEventListener("resize", onReposition);
+          window.removeEventListener("scroll", onReposition, true);
+        });
+        const onAncestorScroll = () => commitInfo("ready");
+        scrollParents = getScrollParents(element);
+        if (scrollParents.length > 0) {
+          scrollParents.forEach(
+            (parent) => parent.addEventListener("scroll", onAncestorScroll, {
+              passive: true
+            })
+          );
+          cleanupFns.push(() => {
+            scrollParents.forEach(
+              (parent) => parent.removeEventListener("scroll", onAncestorScroll)
+            );
+            scrollParents = [];
+          });
+        }
+        startRafMonitor();
+        if (typeof MutationObserver === "function") {
+          mutationObserver = new MutationObserver(() => {
+            if (cancelled) return;
+            if (element && document.documentElement.contains(element)) {
+              return;
+            }
+            resetObservers();
+            element = null;
+            commitInfo("resolving");
+            startResolvePolling();
+          });
+          mutationObserver.observe(document.body, {
+            childList: true,
+            subtree: true
+          });
+          cleanupFns.push(() => {
+            mutationObserver?.disconnect();
+            mutationObserver = null;
+          });
+        }
+      }
+      if (hasWaitForSelector) {
+        const pollWaitFor = () => updateTargetState("ready");
+        pollWaitFor();
+        clearWaitForPoll();
+        waitForPollId = window.setInterval(pollWaitFor, 150);
+        cleanupFns.push(clearWaitForPoll);
+      }
+      commitInfo("ready");
+    }
+    function attemptAttach() {
+      const nextElement = resolveStepTarget(currentStep.target);
+      if (isScreen || nextElement) {
+        element = nextElement;
+        startObservers();
+        return true;
+      }
+      commitInfo("resolving");
+      return false;
+    }
+    function startResolvePolling() {
+      clearResolvePolling();
+      const pollInterval = 200;
+      const timeout = waitForTimeout;
+      const startedAt = Date.now();
+      resolvePollId = window.setInterval(() => {
+        if (attemptAttach()) {
+          clearResolvePolling();
+          return;
+        }
+        if (timeout > 0 && Date.now() - startedAt >= timeout) {
+          clearResolvePolling();
+        }
+      }, pollInterval);
+    }
+    if (!attemptAttach()) {
+      startResolvePolling();
+    }
+    return () => {
+      cancelled = true;
+      clearResolvePolling();
+      clearWaitForPoll();
+      resetObservers();
+      waitForPredicateController?.stop();
+      waitForPredicateController = null;
+    };
+  }, [activeStep, activeFlowId, flows, state]);
+  useEffect3(() => {
+    if (!isBrowser) return;
+    if (!activeStep) {
+      cancelAutoScrollLoop();
+      return;
+    }
+    if (targetInfo.status !== "ready") {
+      cancelAutoScrollLoop();
+      return;
+    }
+    if (targetInfo.isScreen) {
+      cancelAutoScrollLoop();
+      return;
+    }
+    if (!targetInfo.element) {
+      cancelAutoScrollLoop();
+      return;
+    }
+    const autoState = autoScrollStateRef.current;
+    if (autoState.stepId !== activeStep.id) {
+      autoState.stepId = activeStep.id;
+      autoState.checks = 0;
+      autoState.stalledChecks = 0;
+      autoState.done = false;
+      autoState.lastRect = null;
+      cancelAutoScrollLoop();
+    } else if (autoState.done) {
+      cancelAutoScrollLoop();
+      return;
+    }
+    const { element } = targetInfo;
+    const scrollMode = activeStep.targetBehavior?.scrollMode ?? "center";
+    const runCheck = () => {
+      autoScrollRafRef.current = null;
+      if (!isBrowser) return;
+      if (autoState.stepId !== activeStep.id) return;
+      if (!element.isConnected) return;
+      const rect = getClientRect(element);
+      const viewport = getViewportRect();
+      const margin = resolveScrollMargin(
+        activeStep.targetBehavior?.scrollMargin,
+        DEFAULT_SCROLL_MARGIN
+      );
+      const fitsHeight = rect.height <= viewport.height - (margin.top + margin.bottom);
+      const fitsWidth = rect.width <= viewport.width - (margin.left + margin.right);
+      const verticalSatisfied = fitsHeight ? rect.top >= margin.top && rect.bottom <= viewport.height - margin.bottom : rect.top <= margin.top && rect.bottom >= viewport.height - margin.bottom;
+      const horizontalSatisfied = fitsWidth ? rect.left >= margin.left && rect.right <= viewport.width - margin.right : rect.left <= margin.left && rect.right >= viewport.width - margin.right;
+      if (verticalSatisfied && horizontalSatisfied) {
+        autoState.done = true;
+        return;
+      }
+      autoState.checks += 1;
+      if (autoState.checks >= MAX_AUTO_SCROLL_CHECKS) {
+        autoState.done = true;
+        return;
+      }
+      const previousRect = autoState.lastRect;
+      const hasProgress = !previousRect || Math.abs(previousRect.top - rect.top) > RECT_PROGRESS_THRESHOLD || Math.abs(previousRect.left - rect.left) > RECT_PROGRESS_THRESHOLD || Math.abs(previousRect.bottom - rect.bottom) > RECT_PROGRESS_THRESHOLD || Math.abs(previousRect.right - rect.right) > RECT_PROGRESS_THRESHOLD;
+      autoState.lastRect = rect;
+      if (hasProgress) {
+        autoState.stalledChecks = 0;
+      } else {
+        autoState.stalledChecks += 1;
+      }
+      const behavior = autoState.stalledChecks >= STALLED_CHECKS_BEFORE_AUTO ? "auto" : "smooth";
+      ensureElementInView(element, margin, {
+        behavior,
+        mode: scrollMode
+      });
+      autoScrollTimeoutRef.current = globalThis.setTimeout(() => {
+        autoScrollRafRef.current = window.requestAnimationFrame(runCheck);
+      }, 120);
+    };
+    cancelAutoScrollLoop();
+    autoScrollRafRef.current = window.requestAnimationFrame(runCheck);
+    return cancelAutoScrollLoop;
+  }, [activeStep, activeStep?.targetBehavior?.scrollMode, targetInfo]);
+  return targetInfo;
+};
+
+// src/hooks/useHudState.ts
+import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo4, useState as useState6 } from "react";
+
+// src/hooks/useAdvanceRules.ts
+import { useEffect as useEffect4 } from "react";
+var DEFAULT_POLL_MS = 250;
+var isListenerTarget = (value) => {
+  return !!value && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function";
+};
+var resolveEventTarget = (rule, target) => {
+  if (!isBrowser) return null;
+  if (!rule.on || rule.on === "target") {
+    return target.element ?? null;
+  }
+  if (rule.on === "window") {
+    return window;
+  }
+  if (rule.on === "document") {
+    return document;
+  }
+  try {
+    return document.querySelector(rule.on);
+  } catch {
+    return null;
+  }
+};
+var matchesRouteRule = (rule, path) => {
+  if (!rule.to) return true;
+  if (typeof rule.to === "string") {
+    return path === rule.to;
+  }
+  return rule.to.test(path);
+};
+var useAdvanceRules = (target) => {
+  const {
+    activeFlowId,
+    flows,
+    activeStep,
+    state,
+    next,
+    complete,
+    setDelayInfo
+  } = useTour();
+  useEffect4(() => {
+    if (!isBrowser) return;
+    if (!state || state.status !== "running") return;
+    if (!activeStep) return;
+    const definition = activeFlowId ? flows.get(activeFlowId) : void 0;
+    if (!definition) return;
+    const rules = activeStep.advance;
+    if (!rules || rules.length === 0) return;
+    let resolved = false;
+    const hasResolved = () => resolved;
+    const cleanupFns = [];
+    const runCleanup = () => {
+      while (cleanupFns.length > 0) {
+        const dispose = cleanupFns.pop();
+        try {
+          dispose?.();
+        } catch (error) {
+          console.warn("[tour][advance] cleanup failed", error);
+        }
+      }
+    };
+    const addCleanup = (fn) => {
+      if (fn) {
+        cleanupFns.push(fn);
+      }
+    };
+    const clearDelayInfo = () => {
+      setDelayInfo((info) => {
+        if (!info) return null;
+        if (info.flowId !== definition.id) return info;
+        if (info.stepId !== activeStep.id) return info;
+        return null;
+      });
+    };
+    const finish = () => {
+      if (resolved) return;
+      resolved = true;
+      runCleanup();
+      clearDelayInfo();
+      const totalSteps = definition.steps.length;
+      if (totalSteps > 0 && state.stepIndex >= totalSteps - 1) {
+        complete();
+      } else {
+        next();
+      }
+    };
+    const predicateCtx = {
+      flow: definition,
+      state,
+      step: activeStep
+    };
+    for (const rule of rules) {
+      if (hasResolved()) break;
+      switch (rule.type) {
+        case "manual": {
+          break;
+        }
+        case "delay": {
+          const totalMs = Math.max(0, rule.ms);
+          const startedAt = typeof performance !== "undefined" ? performance.now() : Date.now();
+          const endsAt = startedAt + totalMs;
+          setDelayInfo({
+            flowId: definition.id,
+            stepId: activeStep.id,
+            totalMs,
+            startedAt,
+            endsAt
+          });
+          const timer = window.setTimeout(() => {
+            finish();
+          }, totalMs);
+          addCleanup(() => window.clearTimeout(timer));
+          break;
+        }
+        case "event": {
+          const eventTarget = resolveEventTarget(rule, target);
+          if (!isListenerTarget(eventTarget)) {
+            continue;
+          }
+          const handler = () => finish();
+          eventTarget.addEventListener(rule.event, handler);
+          addCleanup(() => {
+            eventTarget.removeEventListener(rule.event, handler);
+          });
+          if (rule.event === "click") {
+            const keyupHandler = (event) => {
+              if (!(event instanceof KeyboardEvent)) return;
+              if (event.repeat) return;
+              const key = event.key;
+              if (key === "Enter" || key === " " || key === "Spacebar") {
+                finish();
+              }
+            };
+            eventTarget.addEventListener("keyup", keyupHandler);
+            addCleanup(() => {
+              eventTarget.removeEventListener("keyup", keyupHandler);
+            });
+          }
+          break;
+        }
+        case "predicate": {
+          const pollMs = Math.max(50, rule.pollMs ?? DEFAULT_POLL_MS);
+          const timeoutMs = rule.timeoutMs;
+          const executeCheck = () => {
+            if (resolved) return;
+            try {
+              if (rule.check(predicateCtx)) {
+                finish();
+              }
+            } catch (error) {
+              console.warn("[tour][advance] predicate check failed", error);
+            }
+          };
+          executeCheck();
+          if (hasResolved()) {
+            break;
+          }
+          const intervalId = window.setInterval(executeCheck, pollMs);
+          addCleanup(() => window.clearInterval(intervalId));
+          if (typeof timeoutMs === "number" && timeoutMs > 0) {
+            const timeoutId = window.setTimeout(() => {
+              window.clearInterval(intervalId);
+            }, timeoutMs);
+            addCleanup(() => window.clearTimeout(timeoutId));
+          }
+          break;
+        }
+        case "route": {
+          const checkRoute = (path) => {
+            if (resolved) return;
+            if (matchesRouteRule(rule, path)) {
+              finish();
+            }
+          };
+          const initialPath = getCurrentRoutePath();
+          checkRoute(initialPath);
+          if (hasResolved()) {
+            break;
+          }
+          const unsubscribe = subscribeToRouteChanges((path) => {
+            checkRoute(path);
+          });
+          addCleanup(unsubscribe);
+          break;
+        }
+        default: {
+          const neverRule = rule;
+          console.warn("[tour][advance] unsupported advance rule", neverRule);
+        }
+      }
+    }
+    return () => {
+      resolved = true;
+      runCleanup();
+      clearDelayInfo();
+    };
+  }, [
+    activeFlowId,
+    activeStep,
+    complete,
+    flows,
+    next,
+    state,
+    target.element,
+    setDelayInfo,
+    target.lastUpdated,
+    target.status
+  ]);
+};
+
+// src/hooks/useHiddenTargetFallback.ts
+import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+var DEFAULT_DELAY_MS = 900;
+var HIDDEN_VISIBILITIES = [
+  "hidden",
+  "detached"
+];
+var useHiddenTargetFallback = ({
+  step,
+  target,
+  viewportRect,
+  onSkip
+}) => {
+  const [usingScreenFallback, setUsingScreenFallback] = useState4(false);
+  const timeoutRef = useRef3(null);
+  const skipTriggeredRef = useRef3(false);
+  const hiddenMode = step?.targetBehavior?.hidden ?? "screen";
+  const hiddenDelayMs = Math.max(
+    0,
+    step?.targetBehavior?.hiddenDelayMs ?? DEFAULT_DELAY_MS
+  );
+  const clearPendingTimeout = () => {
+    if (timeoutRef.current !== null) {
+      globalThis.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+  useEffect5(() => {
+    skipTriggeredRef.current = false;
+    setUsingScreenFallback(false);
+    clearPendingTimeout();
+    return clearPendingTimeout;
+  }, [step?.id]);
+  useEffect5(() => {
+    if (!isBrowser) return void 0;
+    if (!step) return void 0;
+    clearPendingTimeout();
+    const shouldHandleHiddenTarget = HIDDEN_VISIBILITIES.includes(target.visibility) && !target.isScreen && target.status === "ready";
+    if (!shouldHandleHiddenTarget) {
+      setUsingScreenFallback(false);
+      return void 0;
+    }
+    if (hiddenMode !== "screen") {
+      setUsingScreenFallback(false);
+    }
+    timeoutRef.current = globalThis.setTimeout(() => {
+      if (hiddenMode === "screen") {
+        setUsingScreenFallback(true);
+        return;
+      }
+      if (!skipTriggeredRef.current) {
+        skipTriggeredRef.current = true;
+        onSkip();
+      }
+    }, hiddenDelayMs);
+    return clearPendingTimeout;
+  }, [
+    step,
+    target.visibility,
+    target.isScreen,
+    target.status,
+    hiddenMode,
+    hiddenDelayMs,
+    onSkip
+  ]);
+  const resolvedTarget = useMemo3(() => {
+    if (!usingScreenFallback) {
+      return target;
+    }
+    return {
+      ...target,
+      element: null,
+      rect: viewportRect,
+      lastResolvedRect: viewportRect,
+      isScreen: true,
+      rectSource: "viewport",
+      visibility: "visible"
+    };
+  }, [target, usingScreenFallback, viewportRect]);
+  return {
+    target: resolvedTarget,
+    usingScreenFallback
+  };
+};
+
+// src/hooks/useViewportRect.ts
+import { useEffect as useEffect6, useRef as useRef4, useState as useState5 } from "react";
+var useViewportRect = () => {
+  const [viewport, setViewport] = useState5(
+    () => getViewportRect()
+  );
+  const rafRef = useRef4(null);
+  useEffect6(() => {
+    if (!isBrowser) return;
+    const updateViewport = () => {
+      rafRef.current = null;
+      setViewport(getViewportRect());
+    };
+    const scheduleUpdate = () => {
+      if (rafRef.current !== null) return;
+      rafRef.current = window.requestAnimationFrame(updateViewport);
+    };
+    const listeners = [];
+    const addListener = (target, type, handler) => {
+      if (!target) return;
+      target.addEventListener(type, handler);
+      listeners.push({ target, type, handler });
+    };
+    addListener(window, "resize", scheduleUpdate);
+    addListener(window, "orientationchange", scheduleUpdate);
+    addListener(window, "scroll", scheduleUpdate);
+    addListener(window.visualViewport ?? null, "resize", scheduleUpdate);
+    addListener(window.visualViewport ?? null, "scroll", scheduleUpdate);
+    return () => {
+      listeners.forEach(
+        ({ target, type, handler }) => target.removeEventListener(type, handler)
+      );
+      if (rafRef.current !== null) {
+        window.cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, []);
+  return viewport;
+};
+
+// src/hooks/useHudState.ts
+var EXIT_BUFFER_MS = 450;
+var normalizeFlowFilter = (value) => {
+  if (!value) return null;
+  return Array.isArray(value) ? value : [value];
+};
+var useHudState = (options = {}) => {
+  const { flowId } = options;
+  const flowFilter = useMemo4(() => normalizeFlowFilter(flowId), [flowId]);
+  const { state, activeStep, activeFlowId, flows, next, complete } = useTour();
+  const target = useTourTarget();
+  const viewportRect = useViewportRect();
+  useAdvanceRules(target);
+  const matchesFlowFilter = useMemo4(() => {
+    if (!flowFilter || flowFilter.length === 0) return true;
+    if (!activeFlowId) return false;
+    return flowFilter.includes(activeFlowId);
+  }, [activeFlowId, flowFilter]);
+  const isRunning = state?.status === "running";
+  const runningState = isRunning && matchesFlowFilter ? state : null;
+  const runningStep = runningState && activeStep ? activeStep : null;
+  const [shouldRender, setShouldRender] = useState6(
+    Boolean(runningStep)
+  );
+  useEffect7(() => {
+    if (runningStep) {
+      setShouldRender(true);
+    }
+  }, [runningStep?.id]);
+  useEffect7(() => {
+    if (!shouldRender) return;
+    if (runningStep) return;
+    if (target.status !== "idle") return;
+    const timeoutId = window.setTimeout(() => {
+      setShouldRender(false);
+    }, EXIT_BUFFER_MS);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [runningStep, shouldRender, target.status]);
+  const skipHiddenStep = useCallback2(() => {
+    if (!runningState || runningState.status !== "running") return;
+    if (!activeFlowId) return;
+    const flow = flows.get(activeFlowId);
+    if (!flow) return;
+    const isLastStep = runningState.stepIndex >= flow.steps.length - 1 && flow.steps.length > 0;
+    if (isLastStep) {
+      complete();
+    } else {
+      next();
+    }
+  }, [activeFlowId, complete, flows, next, runningState]);
+  const { target: hudTarget } = useHiddenTargetFallback({
+    step: runningStep,
+    target,
+    viewportRect,
+    onSkip: skipHiddenStep
+  });
+  const canRenderStep = Boolean(runningStep && runningState);
+  const focusTrapActive = canRenderStep;
+  const flowHudOptions = matchesFlowFilter && activeFlowId ? flows.get(activeFlowId)?.hud ?? null : null;
+  const hudRenderMode = flowHudOptions?.render ?? "default";
+  return {
+    state,
+    runningState,
+    runningStep,
+    shouldRender,
+    canRenderStep,
+    focusTrapActive,
+    target,
+    hudTarget,
+    flowHudOptions,
+    hudRenderMode,
+    matchesFlowFilter,
+    activeFlowId
+  };
+};
+
+// src/hooks/useHudDescription.ts
+import { useMemo as useMemo5 } from "react";
+var sanitizeForId = (value) => {
+  const normalized = value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return normalized.length > 0 ? normalized : "step";
+};
+var useHudDescription = (options) => {
+  const { step, fallbackAriaDescribedBy } = options;
+  const targetDescription = useMemo5(() => {
+    if (!step) return null;
+    if (typeof step.target !== "object") return null;
+    const description = step.target.description;
+    return typeof description === "string" ? description : null;
+  }, [step]);
+  const descriptionId = useMemo5(() => {
+    if (!step || !targetDescription) return void 0;
+    return `tour-step-${sanitizeForId(step.id)}-description`;
+  }, [step, targetDescription]);
+  const combinedAriaDescribedBy = useMemo5(() => {
+    const parts = [fallbackAriaDescribedBy, descriptionId].filter(Boolean);
+    return parts.length > 0 ? parts.join(" ") : void 0;
+  }, [descriptionId, fallbackAriaDescribedBy]);
+  return {
+    targetDescription,
+    descriptionId,
+    combinedAriaDescribedBy
+  };
+};
+
+// src/hooks/useHudShortcuts.ts
+import { useEffect as useEffect8 } from "react";
+
+// src/hooks/useTourControls.ts
+import { useCallback as useCallback3, useMemo as useMemo6 } from "react";
+var hasManualAdvance = (rules) => rules.some((rule) => rule.type === "manual");
+var didPreviousAdvanceViaRoute = (rules) => rules.some((rule) => rule.type === "route");
+var didPreviousAdvanceViaTargetEvent = (rules) => rules.some((rule) => rule.type === "event" && rule.on === "target");
+var useTourControls = () => {
+  const tour = useTour();
+  const {
+    back,
+    next,
+    cancel,
+    complete,
+    state,
+    activeFlowId,
+    flows,
+    activeStep
+  } = tour;
+  const computed = useMemo6(() => {
+    if (!state || state.status !== "running" || !activeStep) {
+      return {
+        isActive: false,
+        isFirst: true,
+        isLast: true,
+        showBackButton: false,
+        backDisabled: true,
+        showNextButton: false,
+        nextDisabled: true
+      };
+    }
+    const definition = activeFlowId ? flows.get(activeFlowId) : null;
+    const totalSteps = definition?.steps.length ?? 0;
+    const stepIndex = state.stepIndex;
+    const isFirst2 = stepIndex <= 0;
+    const isLast2 = totalSteps > 0 && stepIndex >= totalSteps - 1;
+    const previousStep = !definition || stepIndex <= 0 ? null : definition.steps[stepIndex - 1];
+    const advanceRules = activeStep.advance ?? [];
+    const hasAdvanceRules = advanceRules.length > 0;
+    const previousAdvanceRules = previousStep?.advance ?? [];
+    const backControlState = activeStep.controls?.back ?? "auto";
+    const nextControlState = activeStep.controls?.next ?? "auto";
+    const showBackButton2 = backControlState !== "hidden" && !isFirst2 && !didPreviousAdvanceViaRoute(previousAdvanceRules) && !didPreviousAdvanceViaTargetEvent(previousAdvanceRules);
+    const backDisabled2 = backControlState === "disabled";
+    const manualAdvancePresent = hasManualAdvance(advanceRules);
+    const showNextButton2 = nextControlState !== "hidden" && (isLast2 || !hasAdvanceRules || manualAdvancePresent);
+    const nextDisabled2 = nextControlState === "disabled";
+    return {
+      isActive: true,
+      isFirst: isFirst2,
+      isLast: isLast2,
+      showBackButton: showBackButton2,
+      backDisabled: backDisabled2,
+      showNextButton: showNextButton2,
+      nextDisabled: nextDisabled2
+    };
+  }, [activeFlowId, activeStep, flows, state]);
+  const {
+    isActive,
+    isFirst,
+    isLast,
+    showBackButton,
+    backDisabled,
+    showNextButton,
+    nextDisabled
+  } = computed;
+  const canGoBack = showBackButton && !backDisabled;
+  const canGoNext = showNextButton && !nextDisabled;
+  const goBack = useCallback3(() => {
+    if (!canGoBack) return;
+    back();
+  }, [back, canGoBack]);
+  const goNext = useCallback3(() => {
+    if (!canGoNext) return;
+    if (isLast) {
+      complete();
+    } else {
+      next();
+    }
+  }, [canGoNext, complete, isLast, next]);
+  return useMemo6(
+    () => ({
+      showBackButton,
+      backDisabled,
+      canGoBack,
+      showNextButton,
+      nextDisabled,
+      canGoNext,
+      isFirst,
+      isLast,
+      isActive,
+      goBack,
+      goNext,
+      cancel
+    }),
+    [
+      backDisabled,
+      canGoBack,
+      canGoNext,
+      cancel,
+      goBack,
+      goNext,
+      isFirst,
+      isLast,
+      isActive,
+      nextDisabled,
+      showBackButton,
+      showNextButton
+    ]
+  );
+};
+
+// src/hooks/useHudShortcuts.ts
+var isInteractiveElement = (node) => {
+  if (!node) return false;
+  if (node.getAttribute("role") === "button") return true;
+  if (node.hasAttribute("contenteditable")) return true;
+  const interactiveSelector = 'button, a[href], input, textarea, select, summary, [role="button"], [data-tour-prevent-shortcut="true"]';
+  return Boolean(node.closest(interactiveSelector));
+};
+var useHudShortcuts = (target, options) => {
+  const enabled = options?.enabled ?? true;
+  const escapeEnabled = options?.escape ?? true;
+  const { state } = useTour();
+  const { cancel, canGoBack, goBack, canGoNext, goNext, isActive } = useTourControls();
+  useEffect8(() => {
+    if (!isBrowser) return void 0;
+    if (!enabled) return void 0;
+    if (!target) return void 0;
+    if (!state || state.status !== "running") return void 0;
+    if (!isActive) return void 0;
+    const handler = (event) => {
+      if (event.defaultPrevented) return;
+      if (event.key === "Escape" && escapeEnabled) {
+        cancel("keyboard");
+        event.preventDefault();
+        return;
+      }
+      if (event.key === "ArrowLeft") {
+        if (canGoBack) {
+          goBack();
+          event.preventDefault();
+        }
+        return;
+      }
+      if (event.key === "ArrowRight") {
+        if (canGoNext) {
+          goNext();
+          event.preventDefault();
+        }
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        if (target.status !== "ready") return;
+        if (event.target instanceof Element) {
+          if (target.element && target.element.contains(event.target)) {
+            return;
+          }
+          if (event.target.closest("[data-tour-popover]")) {
+            return;
+          }
+          if (isInteractiveElement(event.target)) {
+            return;
+          }
+        }
+        if (canGoNext) {
+          goNext();
+          event.preventDefault();
+        }
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => {
+      window.removeEventListener("keydown", handler);
+    };
+  }, [
+    canGoBack,
+    canGoNext,
+    cancel,
+    enabled,
+    goBack,
+    goNext,
+    isActive,
+    state,
+    target
+  ]);
+};
+
+// src/hooks/useTourHud.ts
+import { useMemo as useMemo8, useState as useState8 } from "react";
+
+// src/hooks/useBodyScrollLock.ts
+import { useEffect as useEffect9 } from "react";
+var lockCount = 0;
+var previousOverflow = null;
+var acquireLock = () => {
+  if (!isBrowser) return;
+  if (lockCount === 0) {
+    previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  lockCount += 1;
+};
+var releaseLock = () => {
+  if (!isBrowser) return;
+  if (lockCount === 0) return;
+  lockCount -= 1;
+  if (lockCount === 0) {
+    document.body.style.overflow = previousOverflow ?? "";
+    previousOverflow = null;
+  }
+};
+var useBodyScrollLock = (enabled) => {
+  useEffect9(() => {
+    if (!enabled) return;
+    acquireLock();
+    return () => {
+      releaseLock();
+    };
+  }, [enabled]);
+};
+
+// src/hooks/useHudTargetIssue.ts
+import { useEffect as useEffect10, useMemo as useMemo7, useState as useState7 } from "react";
+var deriveTargetIssue = (target) => {
+  if (target.isScreen) return null;
+  if (target.status === "idle") return null;
+  switch (target.visibility) {
+    case "missing":
+      return {
+        type: "missing",
+        title: "Looking for the target",
+        body: "Flowsterix is still trying to find this element. Make sure the UI piece is mounted or adjust the selector.",
+        hint: target.rectSource === "stored" ? "Showing the last known position until the element returns." : void 0
+      };
+    case "hidden":
+      return {
+        type: "hidden",
+        title: "Target is hidden",
+        body: "The element exists but is currently hidden, collapsed, or zero-sized. Expand it so the highlight can lock on."
+      };
+    case "detached":
+      return {
+        type: "detached",
+        title: "Target left the page",
+        body: "Navigate back to the screen that contains this element or reopen it before continuing the tour."
+      };
+    default:
+      return null;
+  }
+};
+var useHudTargetIssue = (target, options) => {
+  const delayMs = Math.max(0, options?.delayMs ?? 500);
+  const [armed, setArmed] = useState7(false);
+  const rawIssue = useMemo7(
+    () => deriveTargetIssue(target),
+    [target.isScreen, target.rectSource, target.status, target.visibility]
+  );
+  useEffect10(() => {
+    if (!rawIssue) {
+      setArmed(false);
+      return;
+    }
+    if (!isBrowser) {
+      setArmed(true);
+      return;
+    }
+    const timeoutId = globalThis.setTimeout(() => setArmed(true), delayMs);
+    return () => {
+      setArmed(false);
+      globalThis.clearTimeout(timeoutId);
+    };
+  }, [delayMs, rawIssue?.type]);
+  return {
+    issue: armed ? rawIssue : null,
+    rawIssue
+  };
+};
+
+// src/hooks/useTourHud.ts
+var DEFAULT_SHORTCUTS = true;
+var DEFAULT_BODY_SCROLL_LOCK = true;
+var useTourHud = (options = {}) => {
+  const {
+    overlayPadding,
+    overlayRadius,
+    bodyScrollLock = DEFAULT_BODY_SCROLL_LOCK
+  } = options;
+  const shortcuts = options.shortcuts ?? DEFAULT_SHORTCUTS;
+  const { backdropInteraction, lockBodyScroll } = useTour();
+  const hudState = useHudState();
+  const disableDefaultHud = hudState.hudRenderMode === "none";
+  const [popoverNode, setPopoverNode] = useState8(null);
+  const popoverOptions = hudState.flowHudOptions?.popover;
+  const description = useHudDescription({
+    step: hudState.runningStep,
+    fallbackAriaDescribedBy: popoverOptions?.ariaDescribedBy
+  });
+  const targetIssue = useHudTargetIssue(hudState.hudTarget);
+  const shouldLockBodyScroll = Boolean(
+    bodyScrollLock && (hudState.flowHudOptions?.behavior?.lockBodyScroll ?? lockBodyScroll) && hudState.focusTrapActive
+  );
+  useBodyScrollLock(shouldLockBodyScroll);
+  const shortcutOptions = typeof shortcuts === "object" ? shortcuts : {};
+  const shortcutsEnabled = Boolean(
+    (typeof shortcuts === "boolean" ? shortcuts : shortcuts.enabled ?? true) && hudState.shouldRender
+  );
+  useHudShortcuts(shortcutsEnabled ? hudState.hudTarget : null, {
+    ...shortcutOptions,
+    enabled: shortcutsEnabled
+  });
+  const overlay = {
+    padding: overlayPadding,
+    radius: overlayRadius,
+    interactionMode: hudState.flowHudOptions?.backdrop?.interaction ?? backdropInteraction
+  };
+  const popover = useMemo8(() => {
+    return {
+      offset: popoverOptions?.offset ?? 16,
+      role: popoverOptions?.role ?? "dialog",
+      ariaLabel: popoverOptions?.ariaLabel,
+      ariaDescribedBy: popoverOptions?.ariaDescribedBy,
+      ariaModal: popoverOptions?.ariaModal ?? false,
+      width: popoverOptions?.width,
+      maxWidth: popoverOptions?.maxWidth,
+      placement: hudState.runningStep?.placement
+    };
+  }, [hudState.runningStep?.placement, popoverOptions]);
+  const descriptionResult = useMemo8(() => {
+    return {
+      ...description,
+      text: description.targetDescription
+    };
+  }, [description]);
+  const focusManager = useMemo8(
+    () => ({
+      active: hudState.focusTrapActive,
+      target: hudState.hudTarget,
+      popoverNode,
+      setPopoverNode
+    }),
+    [hudState.focusTrapActive, hudState.hudTarget, popoverNode, setPopoverNode]
+  );
+  return {
+    hudState,
+    disableDefaultHud,
+    overlay,
+    popover,
+    description: descriptionResult,
+    focusManager,
+    targetIssue,
+    shouldLockBodyScroll,
+    shortcutsEnabled
+  };
+};
+
+// src/hooks/useTourOverlay.ts
+import { useEffect as useEffect11, useMemo as useMemo9, useRef as useRef5 } from "react";
+var DEFAULT_PADDING = 12;
+var DEFAULT_RADIUS = 12;
+var DEFAULT_EDGE_BUFFER = 0;
+var useTourOverlay = (options) => {
+  const {
+    target,
+    padding = DEFAULT_PADDING,
+    radius = DEFAULT_RADIUS,
+    edgeBuffer = DEFAULT_EDGE_BUFFER,
+    interactionMode = "passthrough"
+  } = options;
+  const hasShownRef = useRef5(false);
+  const lastReadyTargetRef = useRef5(null);
+  useEffect11(() => {
+    if (!isBrowser) return;
+    if (target.status === "ready") {
+      hasShownRef.current = true;
+      lastReadyTargetRef.current = {
+        ...target,
+        rect: target.rect ? { ...target.rect } : null
+      };
+      return;
+    }
+    if (target.status === "idle") {
+      hasShownRef.current = false;
+      lastReadyTargetRef.current = null;
+    }
+  }, [target]);
+  const viewport = getViewportRect();
+  const cachedTarget = lastReadyTargetRef.current;
+  const highlightTarget = target.status === "ready" ? target : cachedTarget;
+  const resolvedRect = highlightTarget?.rect ?? target.rect;
+  const resolvedIsScreen = highlightTarget?.isScreen ?? target.isScreen;
+  const expandedRect = resolvedIsScreen || !resolvedRect ? viewport : expandRect(resolvedRect, padding);
+  const safeBuffer = Math.max(0, edgeBuffer);
+  const insetTop = expandedRect.top <= 0 ? Math.min(safeBuffer, Math.max(0, expandedRect.height) / 2) : 0;
+  const insetLeft = expandedRect.left <= 0 ? Math.min(safeBuffer, Math.max(0, expandedRect.width) / 2) : 0;
+  const insetBottom = expandedRect.top + expandedRect.height >= viewport.height ? Math.min(safeBuffer, Math.max(0, expandedRect.height) / 2) : 0;
+  const insetRight = expandedRect.left + expandedRect.width >= viewport.width ? Math.min(safeBuffer, Math.max(0, expandedRect.width) / 2) : 0;
+  const highlightTop = expandedRect.top + insetTop;
+  const highlightLeft = expandedRect.left + insetLeft;
+  const highlightWidth = Math.max(
+    0,
+    expandedRect.width - insetLeft - insetRight
+  );
+  const highlightHeight = Math.max(
+    0,
+    expandedRect.height - insetTop - insetBottom
+  );
+  const highlightRadius = Math.max(
+    0,
+    Math.min(radius, highlightWidth / 2, highlightHeight / 2)
+  );
+  const highlightCenterX = highlightLeft + highlightWidth / 2;
+  const highlightCenterY = highlightTop + highlightHeight / 2;
+  const hasHighlightBounds = !!highlightTarget && !resolvedIsScreen && highlightWidth > 0 && highlightHeight > 0;
+  const highlightRect = hasHighlightBounds ? {
+    top: highlightTop,
+    left: highlightLeft,
+    width: highlightWidth,
+    height: highlightHeight,
+    radius: highlightRadius
+  } : null;
+  const maskCapable = useMemo9(() => supportsMasking(), []);
+  const isActive = target.status === "ready" || target.status === "resolving" && cachedTarget !== null;
+  const shouldMask = maskCapable && isActive;
+  const maskId = useMemo9(
+    () => `tour-overlay-mask-${Math.random().toString(36).slice(2, 10)}`,
+    []
+  );
+  const maskUrl = shouldMask ? `url(#${maskId})` : void 0;
+  const fallbackSegments = useMemo9(() => {
+    if (!isActive || shouldMask || !hasHighlightBounds || !highlightRect) {
+      return null;
+    }
+    const topEdge = Math.max(0, Math.min(highlightRect.top, viewport.height));
+    const bottomEdge = Math.max(
+      topEdge,
+      Math.min(highlightRect.top + highlightRect.height, viewport.height)
+    );
+    const leftEdge = Math.max(0, Math.min(highlightRect.left, viewport.width));
+    const rightEdge = Math.max(
+      leftEdge,
+      Math.min(highlightRect.left + highlightRect.width, viewport.width)
+    );
+    const middleHeight = Math.max(0, bottomEdge - topEdge);
+    return [
+      {
+        key: "top",
+        top: 0,
+        left: 0,
+        width: viewport.width,
+        height: topEdge
+      },
+      {
+        key: "bottom",
+        top: bottomEdge,
+        left: 0,
+        width: viewport.width,
+        height: Math.max(0, viewport.height - bottomEdge)
+      },
+      {
+        key: "left",
+        top: topEdge,
+        left: 0,
+        width: leftEdge,
+        height: middleHeight
+      },
+      {
+        key: "right",
+        top: topEdge,
+        left: rightEdge,
+        width: Math.max(0, viewport.width - rightEdge),
+        height: middleHeight
+      }
+    ].filter((segment) => segment.width > 0 && segment.height > 0);
+  }, [
+    hasHighlightBounds,
+    highlightRect,
+    isActive,
+    shouldMask,
+    viewport.height,
+    viewport.width
+  ]);
+  const blockerSegments = useMemo9(() => {
+    if (interactionMode !== "block") {
+      return null;
+    }
+    if (!hasHighlightBounds || !highlightRect) {
+      return [
+        {
+          key: "blocker-full",
+          top: 0,
+          left: 0,
+          width: viewport.width,
+          height: viewport.height
+        }
+      ];
+    }
+    const topEdge = Math.max(0, Math.min(highlightRect.top, viewport.height));
+    const bottomEdge = Math.max(
+      topEdge,
+      Math.min(highlightRect.top + highlightRect.height, viewport.height)
+    );
+    const leftEdge = Math.max(0, Math.min(highlightRect.left, viewport.width));
+    const rightEdge = Math.max(
+      leftEdge,
+      Math.min(highlightRect.left + highlightRect.width, viewport.width)
+    );
+    const middleHeight = Math.max(0, bottomEdge - topEdge);
+    return [
+      {
+        key: "blocker-top",
+        top: 0,
+        left: 0,
+        width: viewport.width,
+        height: topEdge
+      },
+      {
+        key: "blocker-bottom",
+        top: bottomEdge,
+        left: 0,
+        width: viewport.width,
+        height: Math.max(0, viewport.height - bottomEdge)
+      },
+      {
+        key: "blocker-left",
+        top: topEdge,
+        left: 0,
+        width: leftEdge,
+        height: middleHeight
+      },
+      {
+        key: "blocker-right",
+        top: topEdge,
+        left: rightEdge,
+        width: Math.max(0, viewport.width - rightEdge),
+        height: middleHeight
+      }
+    ].filter((segment) => segment.width > 0 && segment.height > 0);
+  }, [
+    hasHighlightBounds,
+    highlightRect,
+    interactionMode,
+    viewport.height,
+    viewport.width
+  ]);
+  const showBaseOverlay = isActive && (shouldMask || !hasHighlightBounds);
+  return {
+    isActive,
+    highlight: {
+      rect: highlightRect,
+      centerX: highlightCenterX,
+      centerY: highlightCenterY,
+      target: highlightTarget ?? null,
+      isScreen: resolvedIsScreen
+    },
+    shouldMask,
+    maskId: shouldMask ? maskId : null,
+    maskUrl,
+    fallbackSegments,
+    blockerSegments,
+    showBaseOverlay,
+    viewport
+  };
+};
+
+// src/hooks/useTourFocusDominance.ts
+var DEFAULT_ENABLED = true;
+var useTourFocusDominance = (options = {}) => {
+  const { enabled = DEFAULT_ENABLED } = options;
+  const { state } = useTour();
+  const isRunning = state?.status === "running";
+  const active = Boolean(enabled && isRunning);
+  return {
+    active,
+    suspendExternalFocusTrap: active
+  };
+};
+
+// src/adapters/radixDialog.ts
+var useRadixDialogAdapter = (options = {}) => {
+  const { suspendExternalFocusTrap } = useTourFocusDominance(options);
+  const { disableEscapeClose = false } = options;
+  const preventDismiss = (event) => {
+    if (suspendExternalFocusTrap) {
+      event.preventDefault();
+    }
+  };
+  const preventEscape = (event) => {
+    if (suspendExternalFocusTrap && disableEscapeClose) {
+      event.preventDefault();
+    }
+  };
+  return {
+    dialogProps: {
+      modal: !suspendExternalFocusTrap
+    },
+    contentProps: {
+      trapFocus: !suspendExternalFocusTrap,
+      onInteractOutside: preventDismiss,
+      onFocusOutside: preventDismiss,
+      onEscapeKeyDown: preventEscape
+    },
+    suspendExternalFocusTrap
+  };
+};
+
+// src/hooks/useDelayAdvance.ts
+import { useEffect as useEffect12, useMemo as useMemo10, useState as useState9 } from "react";
+var getTimestamp = () => typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+var useDelayAdvance = () => {
+  const { delayInfo, activeStep, state } = useTour();
+  const [now, setNow] = useState9(() => getTimestamp());
+  useEffect12(() => {
+    if (!delayInfo) return;
+    if (!activeStep || activeStep.id !== delayInfo.stepId) return;
+    if (!state || state.status !== "running") return;
+    if (!isBrowser) return;
+    let frameId = null;
+    const tick = () => {
+      setNow(getTimestamp());
+      frameId = window.requestAnimationFrame(tick);
+    };
+    frameId = window.requestAnimationFrame(tick);
+    return () => {
+      if (frameId !== null) {
+        window.cancelAnimationFrame(frameId);
+      }
+    };
+  }, [delayInfo, activeStep, state]);
+  useEffect12(() => {
+    if (!delayInfo) {
+      setNow(getTimestamp());
+    }
+  }, [delayInfo]);
+  return useMemo10(() => {
+    const matchingStep = !!delayInfo && !!activeStep && activeStep.id === delayInfo.stepId;
+    const isRunning = matchingStep && state?.status === "running";
+    if (!delayInfo) {
+      return {
+        isActive: false,
+        flowId: null,
+        stepId: null,
+        totalMs: 0,
+        remainingMs: 0,
+        elapsedMs: 0,
+        fractionElapsed: 0,
+        fractionRemaining: 1,
+        startedAt: null,
+        endsAt: null
+      };
+    }
+    if (!isRunning) {
+      return {
+        isActive: false,
+        flowId: delayInfo.flowId,
+        stepId: delayInfo.stepId,
+        totalMs: delayInfo.totalMs,
+        remainingMs: delayInfo.totalMs,
+        elapsedMs: 0,
+        fractionElapsed: 0,
+        fractionRemaining: 1,
+        startedAt: delayInfo.startedAt,
+        endsAt: delayInfo.endsAt
+      };
+    }
+    const clampedNow = Math.min(now, delayInfo.endsAt);
+    const elapsedMs = Math.max(0, clampedNow - delayInfo.startedAt);
+    const remainingMs = Math.max(0, delayInfo.endsAt - now);
+    const totalMs = delayInfo.totalMs;
+    const fractionElapsed = totalMs > 0 ? Math.min(1, Math.max(0, elapsedMs / totalMs)) : 1;
+    const fractionRemaining = 1 - fractionElapsed;
+    return {
+      isActive: true,
+      flowId: delayInfo.flowId,
+      stepId: delayInfo.stepId,
+      totalMs,
+      remainingMs,
+      elapsedMs,
+      fractionElapsed,
+      fractionRemaining,
+      startedAt: delayInfo.startedAt,
+      endsAt: delayInfo.endsAt
+    };
+  }, [activeStep, delayInfo, now, state]);
+};
+
+// src/components/OverlayBackdrop.tsx
+import { useEffect as useEffect13, useRef as useRef6 } from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence } from "motion/react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var styles = {
+  root: {
+    position: "fixed",
+    inset: 0,
+    pointerEvents: "none"
+  },
+  svgMask: {
+    position: "absolute"
+  },
+  overlay: {
+    position: "absolute",
+    transformOrigin: "center",
+    inset: 0,
+    pointerEvents: "none"
+  },
+  segment: {
+    position: "absolute",
+    transformOrigin: "center",
+    pointerEvents: "none"
+  },
+  blockerContainer: {
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none"
+  },
+  blockerSegment: {
+    position: "absolute",
+    pointerEvents: "auto"
+  },
+  highlightRing: {
+    position: "absolute",
+    transformOrigin: "center",
+    pointerEvents: "none"
+  }
+};
+var DEFAULT_HIGHLIGHT_TRANSITION = {
+  duration: 0.35,
+  ease: "easeOut",
+  type: "spring",
+  damping: 25,
+  stiffness: 300,
+  mass: 0.7
+};
+var DEFAULT_HIGHLIGHT_COLLAPSE_TRANSITION = {
+  duration: 0.18,
+  ease: "easeOut",
+  type: "tween"
+};
+var DEFAULT_OVERLAY_TRANSITION = {
+  duration: 0.35,
+  ease: "easeOut"
+};
+var OverlayBackdrop = ({
+  overlay,
+  zIndex = 1e3,
+  color,
+  colorClassName: _colorClassName,
+  opacity = 1,
+  shadow,
+  blurAmount,
+  ariaHidden,
+  rootClassName,
+  overlayClassName,
+  segmentClassName,
+  ringClassName,
+  showHighlightRing = true,
+  showInteractionBlocker = true,
+  transitionsOverride
+}) => {
+  if (!isBrowser) return null;
+  const host = portalHost();
+  if (!host) return null;
+  const adapter = useAnimationAdapter();
+  const {
+    highlight,
+    shouldMask,
+    maskId,
+    maskUrl,
+    fallbackSegments,
+    blockerSegments,
+    showBaseOverlay,
+    isActive,
+    viewport
+  } = overlay;
+  const hasHighlightBounds = Boolean(highlight.rect);
+  const prevScreenTargetRef = useRef6(null);
+  const shouldSnapHighlight = prevScreenTargetRef.current === true && !highlight.isScreen && hasHighlightBounds;
+  useEffect13(() => {
+    prevScreenTargetRef.current = highlight.isScreen;
+  }, [highlight.isScreen]);
+  const resolvedBlur = typeof blurAmount === "number" ? `${blurAmount}px` : "0px";
+  const defaultInsetShadow = "inset 0 0 0 2px rgba(56,189,248,0.4), inset 0 0 0 8px rgba(15,23,42,0.3)";
+  const highlightAppearance = shadow ? { boxShadow: shadow } : { boxShadow: defaultInsetShadow };
+  const { MotionDiv, MotionSvg, MotionDefs, MotionMask, MotionRect } = adapter.components;
+  const highlightTransition = transitionsOverride?.overlayHighlight ?? adapter.transitions.overlayHighlight ?? DEFAULT_HIGHLIGHT_TRANSITION;
+  const snapTransition = { type: "tween", duration: 0 };
+  const resolvedHighlightTransition = shouldSnapHighlight ? snapTransition : highlightTransition;
+  const overlayTransition = transitionsOverride?.overlayFade ?? adapter.transitions.overlayFade ?? DEFAULT_OVERLAY_TRANSITION;
+  const highlightCollapseTransition = highlight.isScreen ? snapTransition : transitionsOverride?.overlayHighlightCollapse ?? DEFAULT_HIGHLIGHT_COLLAPSE_TRANSITION;
+  const highlightRectTransition = hasHighlightBounds ? resolvedHighlightTransition : highlightCollapseTransition;
+  const highlightRectAnimation = shouldMask ? {
+    x: highlight.rect?.left ?? highlight.centerX,
+    y: highlight.rect?.top ?? highlight.centerY,
+    width: highlight.rect?.width ?? 0,
+    height: highlight.rect?.height ?? 0,
+    rx: highlight.rect?.radius ?? 0,
+    ry: highlight.rect?.radius ?? 0
+  } : {
+    x: highlight.centerX,
+    y: highlight.centerY,
+    width: 0,
+    height: 0,
+    rx: 0,
+    ry: 0
+  };
+  const highlightRingAnimation = hasHighlightBounds ? {
+    top: highlight.centerY,
+    left: highlight.centerX,
+    width: highlight.rect?.width ?? 0,
+    height: highlight.rect?.height ?? 0,
+    borderRadius: highlight.rect?.radius ?? 0,
+    opacity: 1,
+    transform: "translate(-50%, -50%)"
+  } : {
+    top: highlight.centerY,
+    left: highlight.centerX,
+    width: 0,
+    height: 0,
+    borderRadius: 0,
+    opacity: 0,
+    transform: "translate(-50%, -50%)"
+  };
+  const overlayStyle = {};
+  if (shouldMask) {
+    overlayStyle.maskRepeat = "no-repeat";
+    overlayStyle.WebkitMaskRepeat = "no-repeat";
+    overlayStyle.maskSize = "100% 100%";
+    overlayStyle.WebkitMaskSize = "100% 100%";
+  }
+  if (maskUrl) {
+    overlayStyle.mask = maskUrl;
+    overlayStyle.WebkitMask = maskUrl;
+  }
+  if (color) {
+    overlayStyle.backgroundColor = color;
+  }
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      MotionDiv,
+      {
+        className: rootClassName,
+        style: { ...styles.root, zIndex },
+        "aria-hidden": ariaHidden,
+        "data-tour-overlay": "",
+        children: [
+          /* @__PURE__ */ jsx3(AnimatePresence, { mode: "popLayout", children: shouldMask ? /* @__PURE__ */ jsx3(
+            MotionSvg,
+            {
+              width: "0",
+              height: "0",
+              "aria-hidden": true,
+              focusable: "false",
+              style: styles.svgMask,
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition: overlayTransition,
+              children: /* @__PURE__ */ jsx3(MotionDefs, { children: /* @__PURE__ */ jsxs(
+                MotionMask,
+                {
+                  id: maskId ?? void 0,
+                  initial: false,
+                  maskUnits: "userSpaceOnUse",
+                  maskContentUnits: "userSpaceOnUse",
+                  x: "0",
+                  y: "0",
+                  animate: { width: viewport.width, height: viewport.height },
+                  transition: highlightTransition,
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      MotionRect,
+                      {
+                        x: "0",
+                        y: "0",
+                        initial: false,
+                        animate: {
+                          width: viewport.width,
+                          height: viewport.height,
+                          opacity: 1
+                        },
+                        fill: "white",
+                        transition: highlightTransition,
+                        exit: { opacity: 0 }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      MotionRect,
+                      {
+                        initial: false,
+                        animate: highlightRectAnimation,
+                        exit: {
+                          x: highlight.centerX,
+                          y: highlight.centerY
+                        },
+                        transition: highlightRectTransition,
+                        fill: "black"
+                      }
+                    )
+                  ]
+                }
+              ) })
+            },
+            "tour-mask"
+          ) : null }),
+          /* @__PURE__ */ jsx3(AnimatePresence, { mode: "popLayout", children: showBaseOverlay ? /* @__PURE__ */ jsx3(
+            MotionDiv,
+            {
+              className: overlayClassName,
+              "data-tour-overlay-layer": "backdrop",
+              style: {
+                ...styles.overlay,
+                ...overlayStyle,
+                zIndex,
+                backgroundColor: color ?? void 0
+              },
+              initial: {
+                opacity: 0,
+                transition: overlayTransition,
+                backdropFilter: `blur(0px)`
+              },
+              animate: {
+                opacity,
+                backdropFilter: `blur(${resolvedBlur})`
+              },
+              exit: {
+                opacity: 0,
+                backdropFilter: `blur(${resolvedBlur})`
+              },
+              transition: overlayTransition
+            },
+            "tour-overlay"
+          ) : null }),
+          /* @__PURE__ */ jsx3(AnimatePresence, { mode: "popLayout", children: fallbackSegments ? fallbackSegments.map((segment) => /* @__PURE__ */ jsx3(
+            MotionDiv,
+            {
+              className: segmentClassName,
+              "data-tour-overlay-layer": "segment",
+              style: {
+                ...styles.segment,
+                zIndex,
+                top: segment.top,
+                left: segment.left,
+                width: segment.width,
+                height: segment.height,
+                backgroundColor: color ?? void 0
+              },
+              initial: {
+                opacity: 0,
+                backdropFilter: `blur(0px)`
+              },
+              animate: {
+                opacity,
+                backdropFilter: `blur(${resolvedBlur})`
+              },
+              exit: {
+                opacity: 0,
+                backdropFilter: `blur(0px)`
+              },
+              transition: overlayTransition
+            },
+            `tour-overlay-fallback-${segment.key}`
+          )) : null }),
+          showInteractionBlocker && blockerSegments ? /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: { ...styles.blockerContainer, zIndex },
+              "data-tour-overlay-layer": "interaction-blocker",
+              "aria-hidden": true,
+              children: blockerSegments.map((segment) => /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  style: {
+                    ...styles.blockerSegment,
+                    top: segment.top,
+                    left: segment.left,
+                    width: segment.width,
+                    height: segment.height
+                  }
+                },
+                segment.key
+              ))
+            }
+          ) : null,
+          /* @__PURE__ */ jsx3(AnimatePresence, { mode: "popLayout", children: showHighlightRing && isActive && hasHighlightBounds ? /* @__PURE__ */ jsx3(
+            MotionDiv,
+            {
+              className: ringClassName,
+              style: {
+                ...styles.highlightRing,
+                zIndex: zIndex + 1,
+                ...highlightAppearance
+              },
+              "data-tour-overlay-layer": "highlight-ring",
+              initial: false,
+              animate: highlightRingAnimation,
+              exit: {
+                opacity: 0,
+                transition: {
+                  duration: 0.35,
+                  ease: "easeOut"
+                }
+              },
+              transition: resolvedHighlightTransition
+            },
+            "tour-ring"
+          ) : null })
+        ]
+      }
+    ),
+    host
+  );
+};
+
+// src/components/TourPopoverPortal.tsx
+import { useEffect as useEffect14, useLayoutEffect as useLayoutEffect2, useMemo as useMemo11, useRef as useRef7, useState as useState10 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import {
+  autoPlacement,
+  computePosition,
+  flip,
+  offset as floatingOffset,
+  shift
+} from "@floating-ui/dom";
+var FLOATING_OFFSET = 8;
+var DOCKED_MARGIN = 24;
+var MOBILE_BREAKPOINT = 640;
+var MOBILE_HEIGHT_BREAKPOINT = 560;
+var MOBILE_HORIZONTAL_GUTTER = 12;
+var DEFAULT_POPOVER_ENTRANCE_TRANSITION = {
+  duration: 0.25,
+  ease: "easeOut"
+};
+var DEFAULT_POPOVER_EXIT_TRANSITION = {
+  duration: 0.2,
+  ease: "easeOut"
+};
+var DEFAULT_POPOVER_CONTENT_TRANSITION = {
+  duration: 0.4,
+  ease: "easeOut"
+};
+var floatingPositionCache = /* @__PURE__ */ new Map();
+var getFloatingCacheKey = (target) => {
+  if (target.stepId) {
+    return `step:${target.stepId}`;
+  }
+  if (target.isScreen) {
+    return "screen";
+  }
+  return null;
+};
+var TourPopoverPortal = ({
+  target,
+  children,
+  offset = 16,
+  width,
+  maxWidth,
+  zIndex = 1001,
+  placement,
+  role,
+  ariaLabel,
+  ariaDescribedBy,
+  ariaModal,
+  descriptionId,
+  descriptionText,
+  onContainerChange,
+  layoutId,
+  containerComponent,
+  contentComponent,
+  transitionsOverride
+}) => {
+  if (!isBrowser) return null;
+  const host = portalHost();
+  if (!host) return null;
+  const adapter = useAnimationAdapter();
+  const Container = containerComponent ?? adapter.components.MotionDiv;
+  const Content = contentComponent ?? adapter.components.MotionDiv;
+  const popoverEntranceTransition = transitionsOverride?.popoverEntrance ?? adapter.transitions.popoverEntrance ?? DEFAULT_POPOVER_ENTRANCE_TRANSITION;
+  const popoverExitTransition = transitionsOverride?.popoverExit ?? adapter.transitions.popoverExit ?? DEFAULT_POPOVER_EXIT_TRANSITION;
+  const popoverContentTransition = transitionsOverride?.popoverContent ?? adapter.transitions.popoverContent ?? DEFAULT_POPOVER_CONTENT_TRANSITION;
+  const viewport = useViewportRect();
+  const prefersMobileLayout = viewport.width <= MOBILE_BREAKPOINT || viewport.height <= MOBILE_HEIGHT_BREAKPOINT;
+  const prefersMobileRef = useRef7(prefersMobileLayout);
+  useEffect14(() => {
+    prefersMobileRef.current = prefersMobileLayout;
+  }, [prefersMobileLayout]);
+  const lastReadyTargetRef = useRef7(null);
+  useEffect14(() => {
+    if (target.status === "ready" && target.rect) {
+      lastReadyTargetRef.current = {
+        rect: { ...target.rect },
+        isScreen: target.isScreen
+      };
+    } else if (target.status === "idle") {
+      lastReadyTargetRef.current = null;
+    }
+  }, [target.isScreen, target.rect, target.status]);
+  const cachedTarget = lastReadyTargetRef.current;
+  const resolvedRect = target.rect ?? target.lastResolvedRect ?? cachedTarget?.rect ?? null;
+  const resolvedIsScreen = target.status === "ready" ? target.isScreen : cachedTarget?.isScreen ?? target.isScreen;
+  const fallbackRect = resolvedRect ?? viewport;
+  const fallbackIsScreen = resolvedIsScreen;
+  const [floatingSize, setFloatingSize] = useState10(null);
+  const clampVertical = (value) => Math.min(viewport.height - 24, Math.max(24, value));
+  const clampHorizontal = (value) => Math.min(viewport.width - 24, Math.max(24, value));
+  const screenCenteredTop = viewport.height / 2 - (floatingSize?.height ?? 0) / 2;
+  const screenCenteredLeft = viewport.width / 2 - (floatingSize?.width ?? 0) / 2;
+  const floatingWidth = floatingSize?.width ?? 0;
+  const baseTop = fallbackIsScreen ? screenCenteredTop : fallbackRect.top + fallbackRect.height + offset;
+  const top = fallbackIsScreen ? clampVertical(screenCenteredTop) : clampVertical(baseTop);
+  const leftBase = fallbackIsScreen ? screenCenteredLeft : fallbackRect.left + fallbackRect.width / 2 - floatingWidth / 2;
+  const left = clampHorizontal(leftBase);
+  const fallbackTransform = "translate3d(0px, 0px, 0px)";
+  const fallbackPosition = useMemo11(
+    () => ({
+      top,
+      left,
+      transform: fallbackTransform
+    }),
+    [fallbackTransform, left, top]
+  );
+  const centerInitialPosition = useMemo11(
+    () => ({
+      top: viewport.height / 2,
+      left: viewport.width / 2,
+      transform: "translate3d(-50%, -50%, 0px)"
+    }),
+    [viewport.height, viewport.width]
+  );
+  const floatingRef = useRef7(null);
+  const cachedFloatingPositionRef = useRef7(null);
+  const appliedFloatingCacheRef = useRef7(null);
+  const deferredScreenSnapRef = useRef7(null);
+  const [layoutMode, setLayoutMode] = useState10(
+    () => prefersMobileLayout ? "mobile" : "floating"
+  );
+  const [floatingPosition, setFloatingPosition] = useState10(fallbackPosition);
+  const [dragPosition, setDragPosition] = useState10(null);
+  const [isDragging, setIsDragging] = useState10(false);
+  const dragStateRef = useRef7(null);
+  const overflowRetryRef = useRef7({
+    stepId: null,
+    attempts: 0
+  });
+  const overflowRetryTimeoutRef = useRef7(null);
+  useLayoutEffect2(() => {
+    if (!isBrowser) return;
+    const node = floatingRef.current;
+    if (!node) return;
+    const updateSize = () => {
+      const rect = node.getBoundingClientRect();
+      setFloatingSize({ width: rect.width, height: rect.height });
+    };
+    updateSize();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateSize);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [target.stepId]);
+  const resolvedPlacement = placement ?? "bottom";
+  const isAutoPlacement = resolvedPlacement.startsWith("auto");
+  const autoAlignment = resolvedPlacement.endsWith(
+    "-start"
+  ) ? "start" : resolvedPlacement.endsWith("-end") ? "end" : void 0;
+  useEffect14(() => {
+    setDragPosition(null);
+    setLayoutMode(prefersMobileRef.current ? "mobile" : "floating");
+    cachedFloatingPositionRef.current = null;
+    appliedFloatingCacheRef.current = null;
+  }, [target.stepId]);
+  useEffect14(() => {
+    if (layoutMode !== "manual") {
+      setDragPosition(null);
+    }
+  }, [layoutMode]);
+  useEffect14(() => {
+    cachedFloatingPositionRef.current = floatingPosition;
+    const cacheKey = getFloatingCacheKey(target);
+    if (cacheKey) {
+      floatingPositionCache.set(cacheKey, floatingPosition);
+    }
+  }, [floatingPosition, target.isScreen, target.stepId]);
+  const dockedPosition = useMemo11(
+    () => ({
+      top: viewport.height - DOCKED_MARGIN,
+      left: viewport.width - DOCKED_MARGIN,
+      transform: "translate3d(-100%, -100%, 0px)"
+    }),
+    [viewport.height, viewport.width]
+  );
+  const mobilePosition = useMemo11(
+    () => ({
+      top: viewport.height - MOBILE_HORIZONTAL_GUTTER,
+      left: viewport.width / 2,
+      transform: "translate3d(-50%, -100%, 0px)"
+    }),
+    [viewport.height, viewport.width]
+  );
+  useEffect14(() => {
+    if (layoutMode === "docked") {
+      setFloatingPosition(dockedPosition);
+    }
+  }, [dockedPosition, layoutMode]);
+  useEffect14(() => {
+    if (layoutMode === "mobile") {
+      setFloatingPosition(mobilePosition);
+    }
+  }, [layoutMode, mobilePosition]);
+  useEffect14(() => {
+    if (prefersMobileLayout) {
+      if (layoutMode !== "mobile") {
+        setLayoutMode("mobile");
+        setDragPosition(null);
+      }
+      return;
+    }
+    if (layoutMode === "mobile") {
+      setLayoutMode("floating");
+      setFloatingPosition(fallbackPosition);
+    }
+  }, [fallbackPosition, layoutMode, prefersMobileLayout]);
+  useEffect14(() => {
+    if (layoutMode !== "floating") return;
+    const stepId = target.stepId;
+    if (!stepId) return;
+    if (appliedFloatingCacheRef.current === stepId) return;
+    const cacheKey = getFloatingCacheKey(target);
+    const cached = cacheKey ? floatingPositionCache.get(cacheKey) ?? null : null;
+    if (cached) {
+      appliedFloatingCacheRef.current = stepId;
+      setFloatingPosition(cached);
+      return;
+    }
+    appliedFloatingCacheRef.current = stepId;
+    if (target.status !== "ready" || target.isScreen) {
+      setFloatingPosition(fallbackPosition);
+    }
+  }, [
+    fallbackPosition,
+    layoutMode,
+    target.isScreen,
+    target.status,
+    target.stepId
+  ]);
+  const shouldDeferScreenSnap = layoutMode === "floating" && target.isScreen && Boolean(layoutId);
+  useEffect14(() => {
+    return () => {
+      if (deferredScreenSnapRef.current !== null) {
+        cancelAnimationFrame(deferredScreenSnapRef.current);
+        deferredScreenSnapRef.current = null;
+      }
+    };
+  }, []);
+  useLayoutEffect2(() => {
+    if (layoutMode !== "floating") return;
+    if (target.status === "ready" && !target.isScreen) return;
+    if (shouldDeferScreenSnap) return;
+    setFloatingPosition(fallbackPosition);
+  }, [
+    fallbackPosition,
+    layoutMode,
+    shouldDeferScreenSnap,
+    target.isScreen,
+    target.status
+  ]);
+  useEffect14(() => {
+    if (!shouldDeferScreenSnap) return;
+    if (deferredScreenSnapRef.current !== null) {
+      cancelAnimationFrame(deferredScreenSnapRef.current);
+      deferredScreenSnapRef.current = null;
+    }
+    let nextFrame = null;
+    deferredScreenSnapRef.current = requestAnimationFrame(() => {
+      nextFrame = requestAnimationFrame(() => {
+        setFloatingPosition(fallbackPosition);
+        deferredScreenSnapRef.current = null;
+        if (nextFrame !== null) {
+          cancelAnimationFrame(nextFrame);
+        }
+      });
+    });
+    return () => {
+      if (deferredScreenSnapRef.current !== null) {
+        cancelAnimationFrame(deferredScreenSnapRef.current);
+        deferredScreenSnapRef.current = null;
+      }
+      if (nextFrame !== null) {
+        cancelAnimationFrame(nextFrame);
+        nextFrame = null;
+      }
+    };
+  }, [fallbackPosition, shouldDeferScreenSnap]);
+  useEffect14(() => {
+    return () => {
+      if (overflowRetryTimeoutRef.current !== null) {
+        window.clearTimeout(overflowRetryTimeoutRef.current);
+      }
+    };
+  }, []);
+  useLayoutEffect2(() => {
+    if (!isBrowser) return;
+    const floatingEl = floatingRef.current;
+    const rectInfo = target.rect;
+    if (!floatingEl) return;
+    if (target.status !== "ready") return;
+    if (!rectInfo || target.isScreen) return;
+    if (layoutMode === "mobile" || layoutMode === "manual") return;
+    const cancelState = { cancelled: false };
+    const retryState = overflowRetryRef.current;
+    const currentStepId = target.stepId ?? null;
+    if (retryState.stepId !== currentStepId) {
+      retryState.stepId = currentStepId;
+      retryState.attempts = 0;
+    }
+    const clearRetryTimeout = () => {
+      if (overflowRetryTimeoutRef.current !== null) {
+        window.clearTimeout(overflowRetryTimeoutRef.current);
+        overflowRetryTimeoutRef.current = null;
+      }
+    };
+    const virtualReference = {
+      contextElement: target.element ?? void 0,
+      getBoundingClientRect: () => DOMRectReadOnly.fromRect({
+        width: rectInfo.width,
+        height: rectInfo.height,
+        x: rectInfo.left,
+        y: rectInfo.top
+      })
+    };
+    const computePlacement = isAutoPlacement ? void 0 : resolvedPlacement;
+    const middleware = [
+      floatingOffset(offset),
+      ...isAutoPlacement ? [
+        autoPlacement({
+          padding: FLOATING_OFFSET,
+          alignment: autoAlignment
+        })
+      ] : [flip({ padding: FLOATING_OFFSET })],
+      shift({ padding: FLOATING_OFFSET })
+    ];
+    const updatePosition = async () => {
+      const { x, y } = await computePosition(virtualReference, floatingEl, {
+        placement: computePlacement,
+        strategy: "fixed",
+        middleware
+      });
+      if (cancelState.cancelled) return;
+      const floatingBox = floatingEl.getBoundingClientRect();
+      const viewportRect = getViewportRect();
+      const viewportTop = viewportRect.top;
+      const viewportBottom = viewportRect.top + viewportRect.height;
+      const viewportLeft = viewportRect.left;
+      const viewportRight = viewportRect.left + viewportRect.width;
+      const overflowLeft = Math.max(0, viewportRect.left + FLOATING_OFFSET - x);
+      const overflowRight = Math.max(
+        0,
+        x + floatingBox.width + FLOATING_OFFSET - (viewportRect.left + viewportRect.width)
+      );
+      const overflowTop = Math.max(0, viewportRect.top + FLOATING_OFFSET - y);
+      const overflowBottom = Math.max(
+        0,
+        y + floatingBox.height + FLOATING_OFFSET - (viewportRect.top + viewportRect.height)
+      );
+      const maxOverflow = Math.max(
+        overflowTop,
+        overflowRight,
+        overflowBottom,
+        overflowLeft
+      );
+      const viewportHeight = viewportRect.height;
+      const viewportWidth = viewportRect.width;
+      const overflowThreshold = Math.max(
+        FLOATING_OFFSET * 2,
+        viewportHeight * 0.05,
+        viewportWidth * 0.05
+      );
+      const targetRect = rectInfo;
+      const intersectsViewport = targetRect.bottom > viewportTop + FLOATING_OFFSET && targetRect.top < viewportBottom - FLOATING_OFFSET && targetRect.right > viewportLeft + FLOATING_OFFSET && targetRect.left < viewportRight - FLOATING_OFFSET;
+      const spaceAbove = targetRect.top - viewportTop;
+      const spaceBelow = viewportBottom - targetRect.bottom;
+      const spaceLeft = targetRect.left - viewportLeft;
+      const spaceRight = viewportRight - targetRect.right;
+      const minSpaceNeeded = floatingBox.height + FLOATING_OFFSET * 2;
+      const hasVerticalSpace = spaceAbove >= minSpaceNeeded || spaceBelow >= minSpaceNeeded;
+      const hasHorizontalSpace = spaceLeft >= minSpaceNeeded || spaceRight >= minSpaceNeeded;
+      const targetNearlyFillsViewport = !target.isScreen && !hasVerticalSpace && !hasHorizontalSpace;
+      const shouldDock = intersectsViewport && (targetNearlyFillsViewport || maxOverflow > overflowThreshold);
+      if (shouldDock) {
+        if (!targetNearlyFillsViewport && retryState.attempts < 2) {
+          retryState.attempts += 1;
+          clearRetryTimeout();
+          overflowRetryTimeoutRef.current = window.setTimeout(() => {
+            overflowRetryTimeoutRef.current = null;
+            if (cancelState.cancelled) return;
+            void updatePosition();
+          }, 120);
+          return;
+        }
+        retryState.attempts = 0;
+        if (layoutMode !== "docked") {
+          setLayoutMode("docked");
+          setFloatingPosition(dockedPosition);
+        }
+        return;
+      }
+      retryState.attempts = 0;
+      if (layoutMode !== "floating") {
+        setLayoutMode("floating");
+      }
+      setFloatingPosition({
+        top: y,
+        left: x,
+        transform: "translate3d(0px, 0px, 0px)"
+      });
+    };
+    void updatePosition();
+    return () => {
+      cancelState.cancelled = true;
+      clearRetryTimeout();
+    };
+  }, [
+    autoAlignment,
+    dockedPosition,
+    isAutoPlacement,
+    layoutMode,
+    offset,
+    resolvedPlacement,
+    target.element,
+    target.isScreen,
+    target.lastUpdated,
+    target.status,
+    target.stepId
+  ]);
+  useLayoutEffect2(() => {
+    if (layoutMode !== "manual" || !dragPosition) return;
+    setFloatingPosition({
+      top: dragPosition.top,
+      left: dragPosition.left,
+      transform: "translate3d(0px, 0px, 0px)"
+    });
+  }, [dragPosition, layoutMode]);
+  const clampToViewport = (rawLeft, rawTop) => {
+    const rect = getViewportRect();
+    const floatingEl = floatingRef.current;
+    const floatingElWidth = floatingEl?.offsetWidth ?? 0;
+    const floatingElHeight = floatingEl?.offsetHeight ?? 0;
+    const minLeft = rect.left + FLOATING_OFFSET;
+    const maxLeft = rect.left + rect.width - floatingElWidth - FLOATING_OFFSET;
+    const minTop = rect.top + FLOATING_OFFSET;
+    const maxTop = rect.top + rect.height - floatingElHeight - FLOATING_OFFSET;
+    return {
+      left: Math.min(Math.max(rawLeft, minLeft), Math.max(minLeft, maxLeft)),
+      top: Math.min(Math.max(rawTop, minTop), Math.max(minTop, maxTop))
+    };
+  };
+  const onPointerMove = (event) => {
+    const dragState = dragStateRef.current;
+    if (!dragState) return;
+    if (event.pointerId !== dragState.pointerId) return;
+    const rawLeft = event.clientX - dragState.offsetX;
+    const rawTop = event.clientY - dragState.offsetY;
+    const next = clampToViewport(rawLeft, rawTop);
+    setLayoutMode("manual");
+    setDragPosition(next);
+  };
+  const handlePointerEnd = (event) => {
+    const dragState = dragStateRef.current;
+    if (!dragState) return;
+    if (event.pointerId !== dragState.pointerId) return;
+    endDrag();
+  };
+  const endDrag = () => {
+    const dragState = dragStateRef.current;
+    if (!dragState) return;
+    const floatingEl = floatingRef.current;
+    if (floatingEl) {
+      const supportsRelease = typeof floatingEl.releasePointerCapture === "function";
+      const supportsHasCapture = typeof floatingEl.hasPointerCapture === "function";
+      const hasCapture = supportsHasCapture ? floatingEl.hasPointerCapture(dragState.pointerId) : false;
+      if (supportsRelease && hasCapture) {
+        try {
+          floatingEl.releasePointerCapture(dragState.pointerId);
+        } catch {
+        }
+      }
+    }
+    dragStateRef.current = null;
+    setIsDragging(false);
+    window.removeEventListener("pointermove", onPointerMove);
+    window.removeEventListener("pointerup", handlePointerEnd);
+    window.removeEventListener("pointercancel", handlePointerEnd);
+  };
+  const startDrag = (event) => {
+    if (event.button !== 0) return;
+    const floatingEl = floatingRef.current;
+    if (!floatingEl) return;
+    const rect = floatingEl.getBoundingClientRect();
+    dragStateRef.current = {
+      pointerId: event.pointerId,
+      offsetX: event.clientX - rect.left,
+      offsetY: event.clientY - rect.top
+    };
+    const next = clampToViewport(rect.left, rect.top);
+    setLayoutMode("manual");
+    setDragPosition(next);
+    setIsDragging(true);
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", handlePointerEnd);
+    window.addEventListener("pointercancel", handlePointerEnd);
+    const supportsPointerCapture = typeof floatingEl.setPointerCapture === "function";
+    if (supportsPointerCapture) {
+      try {
+        floatingEl.setPointerCapture(event.pointerId);
+      } catch {
+      }
+    }
+    event.preventDefault();
+  };
+  useEffect14(() => endDrag, []);
+  const shouldUseFallbackInitial = layoutMode !== "mobile" && (Boolean(target.lastResolvedRect) || Boolean(cachedTarget));
+  const floatingCacheKey = layoutMode === "mobile" ? null : getFloatingCacheKey(target);
+  const persistedFloatingInitial = floatingCacheKey && floatingPositionCache.has(floatingCacheKey) ? floatingPositionCache.get(floatingCacheKey) ?? null : null;
+  const cachedFloatingInitial = layoutMode === "mobile" ? null : cachedFloatingPositionRef.current ?? persistedFloatingInitial;
+  const hasCachedFloatingInitial = Boolean(cachedFloatingInitial);
+  const resolvedInitialPosition = layoutMode === "mobile" ? mobilePosition : hasCachedFloatingInitial && cachedFloatingInitial ? cachedFloatingInitial : shouldUseFallbackInitial ? fallbackPosition : centerInitialPosition;
+  const initialTop = resolvedInitialPosition.top;
+  const initialLeft = resolvedInitialPosition.left;
+  const initialTransform = resolvedInitialPosition.transform;
+  const containerStyle = {
+    position: "fixed",
+    pointerEvents: "auto",
+    zIndex,
+    maxWidth: layoutMode === "mobile" || typeof maxWidth === "undefined" ? void 0 : maxWidth,
+    width: layoutMode === "mobile" || typeof width === "undefined" ? void 0 : width,
+    cursor: isDragging ? "grabbing" : void 0
+  };
+  const setFloatingNode = (node) => {
+    floatingRef.current = node;
+    onContainerChange?.(node);
+  };
+  const containerProps = {
+    ref: setFloatingNode,
+    role: role ?? "dialog",
+    "aria-modal": ariaModal ?? false,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    tabIndex: -1,
+    "aria-live": "polite",
+    "data-tour-popover": "",
+    "data-layout": layoutMode,
+    "data-target-visibility": target.visibility,
+    "data-rect-source": target.rectSource,
+    style: containerStyle,
+    initial: {
+      filter: "blur(4px)",
+      opacity: 0,
+      top: initialTop,
+      left: initialLeft,
+      transform: initialTransform
+    },
+    animate: {
+      filter: "blur(0px)",
+      opacity: 1,
+      top: floatingPosition.top,
+      left: floatingPosition.left,
+      transform: floatingPosition.transform
+    },
+    exit: {
+      filter: "blur(4px)",
+      opacity: 0,
+      transition: popoverExitTransition
+    },
+    transition: popoverEntranceTransition,
+    ...layoutId ? { layoutId } : {}
+  };
+  const contentProps = {
+    key: target.stepId ?? void 0,
+    "data-tour-popover-content": "",
+    initial: { opacity: 0, translateX: 0, filter: "blur(4px)" },
+    animate: { opacity: 1, translateX: 0, filter: "blur(0px)" },
+    exit: { opacity: 0, translateX: 0, filter: "blur(4px)" },
+    transition: popoverContentTransition
+  };
+  const showDragHandle = layoutMode === "docked" || layoutMode === "manual";
+  const dragHandleProps = {
+    type: "button",
+    "aria-label": "Move tour popover",
+    style: { touchAction: "none" },
+    onPointerDown: startDrag
+  };
+  const descriptionProps = {
+    id: descriptionId,
+    text: descriptionText
+  };
+  const context = {
+    Container,
+    Content,
+    containerProps,
+    contentProps,
+    layoutMode,
+    isDragging,
+    showDragHandle,
+    dragHandleProps,
+    descriptionProps
+  };
+  return createPortal2(children(context), host);
+};
+
+// src/components/TourFocusManager.tsx
+import { useEffect as useEffect15, useLayoutEffect as useLayoutEffect3, useRef as useRef8, useState as useState11 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+
+// src/utils/focus.ts
+var FOCUSABLE_SELECTOR = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), summary, [contenteditable="true"], [tabindex]';
+var isElementVisible = (element) => {
+  if (element.offsetParent !== null) return true;
+  if (element.getClientRects().length > 0) return true;
+  return false;
+};
+var isFocusableElement = (element) => {
+  if (!(element instanceof HTMLElement)) return false;
+  if (element.hasAttribute("disabled")) return false;
+  if (element.getAttribute("aria-hidden") === "true") return false;
+  if (element.tabIndex >= 0) return true;
+  const tagName = element.tagName.toLowerCase();
+  if (tagName === "input") {
+    const type = element.getAttribute("type");
+    if (type === "hidden") return false;
+    return !element.hasAttribute("disabled");
+  }
+  if (tagName === "button" || tagName === "select" || tagName === "textarea") {
+    return !element.hasAttribute("disabled");
+  }
+  if (tagName === "a" || tagName === "area") {
+    return element.hasAttribute("href");
+  }
+  if (element.hasAttribute("contenteditable")) {
+    return element.getAttribute("contenteditable") !== "false";
+  }
+  if (!element.hasAttribute("tabindex")) return false;
+  return element.tabIndex >= 0;
+};
+var getFocusableIn = (root) => {
+  if (!root) return [];
+  const scope = root instanceof Document ? root.body : root;
+  const matched = Array.from(
+    scope.querySelectorAll(FOCUSABLE_SELECTOR)
+  );
+  const results = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const element of matched) {
+    if (element.tabIndex < 0 && !element.hasAttribute("tabindex")) continue;
+    if (!isElementVisible(element)) continue;
+    if (!isFocusableElement(element)) continue;
+    if (element.closest('[data-tour-focus-skip="true"]')) continue;
+    if (seen.has(element)) continue;
+    seen.add(element);
+    results.push(element);
+  }
+  return results;
+};
+var focusElement = (element, options) => {
+  if (!element) return;
+  try {
+    element.focus(options ?? { preventScroll: true });
+  } catch {
+  }
+};
+
+// src/components/TourFocusManager.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var runMicrotask = (callback) => {
+  if (typeof queueMicrotask === "function") {
+    queueMicrotask(callback);
+  } else {
+    setTimeout(callback, 0);
+  }
+};
+var TourFocusManager = ({
+  active,
+  target,
+  popoverNode,
+  highlightRect,
+  targetRingOffset = -2
+}) => {
+  const previousFocusRef = useRef8(null);
+  const guardNodesRef = useRef8({
+    "target-start": null,
+    "target-end": null,
+    "popover-start": null,
+    "popover-end": null
+  });
+  const lastTabDirectionRef = useRef8("forward");
+  const suppressGuardHopRef = useRef8(null);
+  const ringStylesRef = useRef8(
+    /* @__PURE__ */ new WeakMap()
+  );
+  const [targetRingActive, setTargetRingActive] = useState11(false);
+  const restoreFocus = () => {
+    const previous = previousFocusRef.current;
+    previousFocusRef.current = null;
+    if (previous && previous.isConnected) {
+      runMicrotask(() => {
+        focusElement(previous, { preventScroll: true });
+      });
+    }
+  };
+  useLayoutEffect3(() => {
+    if (!isBrowser) return;
+    if (!active) {
+      restoreFocus();
+      return;
+    }
+    if (previousFocusRef.current) return;
+    const doc = popoverNode?.ownerDocument ?? target.element?.ownerDocument;
+    const activeEl = (doc ?? document).activeElement;
+    if (activeEl instanceof HTMLElement) {
+      previousFocusRef.current = activeEl;
+    }
+    return () => {
+      restoreFocus();
+    };
+  }, [active, popoverNode, target.element]);
+  useEffect15(() => {
+    if (!isBrowser) return;
+    if (!active) return;
+    const doc = popoverNode?.ownerDocument ?? target.element?.ownerDocument ?? document;
+    const createGuard = (key) => {
+      const node = doc.createElement("div");
+      node.tabIndex = 0;
+      node.setAttribute("data-tour-focus-guard", key);
+      node.setAttribute("data-tour-prevent-shortcut", "true");
+      const label = key.startsWith("target") ? "Tour highlight boundary" : "Tour popover boundary";
+      node.setAttribute("aria-label", label);
+      Object.assign(node.style, {
+        position: "fixed",
+        top: "0",
+        left: "0",
+        width: "1px",
+        height: "1px",
+        opacity: "0",
+        outline: "none",
+        padding: "0",
+        margin: "0",
+        border: "0",
+        pointerEvents: "auto"
+      });
+      return node;
+    };
+    const applyRing = (element, activeRing) => {
+      if (!element) return;
+      const cache = ringStylesRef.current;
+      if (activeRing) {
+        if (!cache.has(element)) {
+          cache.set(element, {
+            outline: element.style.outline,
+            outlineOffset: element.style.outlineOffset
+          });
+        }
+        element.style.outline = "2px solid var(--tour-focus-ring-color, rgba(59, 130, 246, 0.8))";
+        element.style.outlineOffset = "3px";
+        return;
+      }
+      const previous = cache.get(element);
+      if (previous) {
+        element.style.outline = previous.outline;
+        element.style.outlineOffset = previous.outlineOffset;
+        cache.delete(element);
+      } else {
+        element.style.outline = "";
+        element.style.outlineOffset = "";
+      }
+    };
+    const clearRings = () => {
+      setTargetRingActive(false);
+      applyRing(popoverNode, false);
+    };
+    const removeGuards = () => {
+      for (const key of Object.keys(guardNodesRef.current)) {
+        const node = guardNodesRef.current[key];
+        if (node?.parentNode) {
+          node.parentNode.removeChild(node);
+        }
+        guardNodesRef.current[key] = null;
+      }
+      clearRings();
+    };
+    const ensureGuards = () => {
+      const targetElement = !target.isScreen && target.element instanceof HTMLElement ? target.element : null;
+      const popoverElement = popoverNode ?? null;
+      if (targetElement) {
+        if (!guardNodesRef.current["target-start"]) {
+          guardNodesRef.current["target-start"] = createGuard("target-start");
+        }
+        if (!guardNodesRef.current["target-end"]) {
+          guardNodesRef.current["target-end"] = createGuard("target-end");
+        }
+        const startGuard = guardNodesRef.current["target-start"];
+        const endGuard = guardNodesRef.current["target-end"];
+        if (startGuard.parentElement !== targetElement.parentElement) {
+          targetElement.insertAdjacentElement("beforebegin", startGuard);
+        }
+        if (endGuard.parentElement !== targetElement.parentElement) {
+          targetElement.insertAdjacentElement("afterend", endGuard);
+        }
+      } else {
+        for (const key of ["target-start", "target-end"]) {
+          const node = guardNodesRef.current[key];
+          if (node?.parentNode) {
+            node.parentNode.removeChild(node);
+          }
+          guardNodesRef.current[key] = null;
+        }
+      }
+      if (popoverElement) {
+        if (!guardNodesRef.current["popover-start"]) {
+          guardNodesRef.current["popover-start"] = createGuard("popover-start");
+        }
+        if (!guardNodesRef.current["popover-end"]) {
+          guardNodesRef.current["popover-end"] = createGuard("popover-end");
+        }
+        const startGuard = guardNodesRef.current["popover-start"];
+        const endGuard = guardNodesRef.current["popover-end"];
+        if (startGuard.parentElement !== popoverElement) {
+          popoverElement.prepend(startGuard);
+        }
+        if (endGuard.parentElement !== popoverElement) {
+          popoverElement.append(endGuard);
+        }
+      } else {
+        for (const key of ["popover-start", "popover-end"]) {
+          const node = guardNodesRef.current[key];
+          if (node?.parentNode) {
+            node.parentNode.removeChild(node);
+          }
+          guardNodesRef.current[key] = null;
+        }
+      }
+    };
+    const deriveFocusables = () => {
+      const nodes = [];
+      if (popoverNode) {
+        nodes.push(...getFocusableIn(popoverNode));
+      }
+      const targetIsFocusable = !target.isScreen && target.visibility === "visible" && target.element instanceof HTMLElement;
+      if (targetIsFocusable) {
+        const targetElement = target.element;
+        if (!targetElement.closest('[data-tour-focus-skip="true"]') && isFocusableElement(targetElement)) {
+          nodes.push(targetElement);
+        }
+        nodes.push(...getFocusableIn(targetElement));
+      }
+      if (nodes.length === 0 && popoverNode?.hasAttribute("tabindex")) {
+        nodes.push(popoverNode);
+      }
+      const unique = [];
+      const seen = /* @__PURE__ */ new Set();
+      for (const node of nodes) {
+        if (seen.has(node)) continue;
+        seen.add(node);
+        unique.push(node);
+      }
+      return unique;
+    };
+    const isWithinTrap = (element) => {
+      if (!(element instanceof HTMLElement)) return false;
+      if (popoverNode?.contains(element)) return true;
+      if (target.element instanceof HTMLElement && target.element.contains(element)) {
+        return true;
+      }
+      return Object.values(guardNodesRef.current).some(
+        (node) => node === element
+      );
+    };
+    const ensureFocus = () => {
+      const firstGuard = guardNodesRef.current["target-start"] ?? guardNodesRef.current["popover-start"];
+      if (firstGuard) {
+        focusElement(firstGuard);
+        return;
+      }
+      const focusables = deriveFocusables();
+      if (focusables.length === 0) return;
+      focusElement(focusables[0]);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key !== "Tab") return;
+      lastTabDirectionRef.current = event.shiftKey ? "backward" : "forward";
+    };
+    const handleFocusIn = (event) => {
+      const targetNode = event.target;
+      if (!(targetNode instanceof HTMLElement)) return;
+      if (targetNode.hasAttribute("data-tour-focus-guard")) {
+        if (suppressGuardHopRef.current === targetNode) {
+          suppressGuardHopRef.current = null;
+        } else {
+          const direction = lastTabDirectionRef.current;
+          const key2 = targetNode.getAttribute("data-tour-focus-guard");
+          const targetStart = guardNodesRef.current["target-start"];
+          const targetEnd = guardNodesRef.current["target-end"];
+          const popoverStart = guardNodesRef.current["popover-start"];
+          const popoverEnd = guardNodesRef.current["popover-end"];
+          const hasTargetGuards = Boolean(targetStart && targetEnd);
+          const nextGuard = direction === "forward" ? key2 === "target-end" ? popoverStart : key2 === "popover-end" ? hasTargetGuards ? targetStart : popoverStart : null : key2 === "popover-start" ? hasTargetGuards ? targetEnd : popoverEnd : key2 === "target-start" ? popoverEnd : null;
+          if (nextGuard) {
+            suppressGuardHopRef.current = nextGuard;
+            focusElement(nextGuard);
+            return;
+          }
+        }
+        const key = targetNode.getAttribute("data-tour-focus-guard");
+        if (key?.startsWith("target")) {
+          setTargetRingActive(true);
+          applyRing(popoverNode, false);
+        } else if (key?.startsWith("popover")) {
+          setTargetRingActive(false);
+          applyRing(popoverNode, true);
+        }
+        return;
+      }
+      clearRings();
+      if (isWithinTrap(targetNode)) return;
+      ensureFocus();
+    };
+    ensureGuards();
+    doc.addEventListener("keydown", handleKeyDown, true);
+    doc.addEventListener("focusin", handleFocusIn, true);
+    return () => {
+      doc.removeEventListener("keydown", handleKeyDown, true);
+      doc.removeEventListener("focusin", handleFocusIn, true);
+      removeGuards();
+    };
+  }, [
+    active,
+    popoverNode,
+    target.element,
+    target.isScreen,
+    target.lastUpdated,
+    target.status,
+    target.stepId,
+    target.visibility
+  ]);
+  if (!isBrowser) return null;
+  const host = portalHost();
+  if (!host || !highlightRect || !targetRingActive) return null;
+  const offset = Math.max(0, targetRingOffset);
+  const ringStyle = {
+    position: "fixed",
+    top: highlightRect.top - offset,
+    left: highlightRect.left - offset,
+    width: highlightRect.width + offset * 2,
+    height: highlightRect.height + offset * 2,
+    borderRadius: highlightRect.radius + offset,
+    boxShadow: [
+      "0 0 0 2px var(--tour-focus-ring-offset-color, transparent)",
+      "0 0 0 2px var(--tour-focus-ring-color, rgba(59, 130, 246, 0.8))"
+    ].join(", "),
+    pointerEvents: "none",
+    zIndex: 2001
+  };
+  return createPortal3(/* @__PURE__ */ jsx4("div", { style: ringStyle, "aria-hidden": true }), host);
+};
+
+// src/motion/useHudMotion.ts
+import { useMemo as useMemo12 } from "react";
+var DEFAULT_HIGHLIGHT_TRANSITION2 = {
+  duration: 0.35,
+  ease: "easeOut",
+  type: "spring",
+  damping: 25,
+  stiffness: 300,
+  mass: 0.7
+};
+var DEFAULT_OVERLAY_TRANSITION2 = {
+  duration: 0.35,
+  ease: "easeOut"
+};
+var DEFAULT_POPOVER_ENTRANCE_TRANSITION2 = {
+  duration: 0.25,
+  ease: "easeOut"
+};
+var DEFAULT_POPOVER_EXIT_TRANSITION2 = {
+  duration: 0.2,
+  ease: "easeOut"
+};
+var DEFAULT_POPOVER_CONTENT_TRANSITION2 = {
+  duration: 0.6,
+  ease: "easeOut"
+};
+var useHudMotion = () => {
+  const adapter = useAnimationAdapter();
+  return useMemo12(() => {
+    const components = {
+      ...adapter.components
+    };
+    return {
+      components,
+      transitions: {
+        highlight: adapter.transitions.overlayHighlight ?? DEFAULT_HIGHLIGHT_TRANSITION2,
+        overlayFade: adapter.transitions.overlayFade ?? DEFAULT_OVERLAY_TRANSITION2,
+        popoverEntrance: adapter.transitions.popoverEntrance ?? DEFAULT_POPOVER_ENTRANCE_TRANSITION2,
+        popoverExit: adapter.transitions.popoverExit ?? DEFAULT_POPOVER_EXIT_TRANSITION2,
+        popoverContent: adapter.transitions.popoverContent ?? DEFAULT_POPOVER_CONTENT_TRANSITION2
+      }
+    };
+  }, [adapter]);
+};
+export {
+  AnimationAdapterProvider,
+  OverlayBackdrop,
+  TanStackRouterSync,
+  TourFocusManager,
+  TourPopoverPortal,
+  TourProvider,
+  createPathString,
+  createWaitForPredicateController,
+  defaultAnimationAdapter,
+  defaultLabels,
+  getCurrentRoutePath,
+  getTanStackRouter,
+  getTourRouter,
+  notifyRouteChange,
+  reducedMotionAnimationAdapter,
+  setTanStackRouter,
+  setTourRouter,
+  subscribeToRouteChanges,
+  useAdvanceRules,
+  useAnimationAdapter,
+  useBodyScrollLock,
+  useDelayAdvance,
+  useHiddenTargetFallback,
+  useHudDescription,
+  useHudMotion,
+  useHudShortcuts,
+  useHudState,
+  useHudTargetIssue,
+  usePreferredAnimationAdapter,
+  useRadixDialogAdapter,
+  useTanStackRouterTourAdapter,
+  useTour,
+  useTourControls,
+  useTourEvents,
+  useTourFocusDominance,
+  useTourHud,
+  useTourLabels,
+  useTourOverlay,
+  useTourTarget,
+  useViewportRect
+};