@flowsterix/react 0.10.0 → 0.11.0

package/dist/index.cjs

@@ -64,10 +64,16 @@ module.exports = __toCommonJS(index_exports);
 
 // src/context.tsx
 var import_core = require("@flowsterix/core");
-var import_react6 = require("react");
 
-// src/labels.ts
+// src/devtools/DevToolsContext.tsx
 var import_react = require("react");
+var DevToolsContext = (0, import_react.createContext)(null);
+
+// src/context.tsx
+var import_react7 = require("react");
+
+// src/labels.ts
+var import_react2 = require("react");
 var defaultLabels = {
   back: "Back",
   next: "Next",
@@ -89,34 +95,34 @@ var defaultLabels = {
     detachedBody: "Navigate back to the screen that contains this element or reopen it before continuing the tour."
   }
 };
-var LabelsContext = (0, import_react.createContext)(defaultLabels);
+var LabelsContext = (0, import_react2.createContext)(defaultLabels);
 var LabelsProvider = LabelsContext.Provider;
 function useTourLabels() {
-  return (0, import_react.useContext)(LabelsContext);
+  return (0, import_react2.useContext)(LabelsContext);
 }
 
 // src/dialog/DialogRegistryContext.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var DialogRegistryContext = (0, import_react2.createContext)(void 0);
+var DialogRegistryContext = (0, import_react3.createContext)(void 0);
 var DialogRegistryProvider = ({ children }) => {
-  const controllersRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
-  const register = (0, import_react2.useCallback)(
+  const controllersRef = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
+  const register = (0, import_react3.useCallback)(
     (dialogId, controller) => {
       controllersRef.current.set(dialogId, controller);
     },
     []
   );
-  const unregister = (0, import_react2.useCallback)((dialogId) => {
+  const unregister = (0, import_react3.useCallback)((dialogId) => {
     controllersRef.current.delete(dialogId);
   }, []);
-  const getController = (0, import_react2.useCallback)((dialogId) => {
+  const getController = (0, import_react3.useCallback)((dialogId) => {
     return controllersRef.current.get(dialogId);
   }, []);
-  const isRegistered = (0, import_react2.useCallback)((dialogId) => {
+  const isRegistered = (0, import_react3.useCallback)((dialogId) => {
     return controllersRef.current.has(dialogId);
   }, []);
-  const value = (0, import_react2.useMemo)(
+  const value = (0, import_react3.useMemo)(
     () => ({
       register,
       unregister,
@@ -128,7 +134,7 @@ var DialogRegistryProvider = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogRegistryContext.Provider, { value, children });
 };
 var useDialogRegistry = () => {
-  const context = (0, import_react2.useContext)(DialogRegistryContext);
+  const context = (0, import_react3.useContext)(DialogRegistryContext);
   if (!context) {
     throw new Error(
       "useDialogRegistry must be used within a DialogRegistryProvider"
@@ -137,11 +143,11 @@ var useDialogRegistry = () => {
   return context;
 };
 var useDialogRegistryOptional = () => {
-  return (0, import_react2.useContext)(DialogRegistryContext);
+  return (0, import_react3.useContext)(DialogRegistryContext);
 };
 
 // src/hooks/useDialogAutomation.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 var resolveAutoOpen = (config) => {
   if (!config) return { onEnter: true, onResume: true };
   const { autoOpen } = config;
@@ -156,8 +162,8 @@ var resolveAutoOpen = (config) => {
 };
 var useDialogAutomation = (params) => {
   const { flow, state, events, registry, onDialogNotMounted } = params;
-  const previousDialogIdRef = (0, import_react3.useRef)(void 0);
-  (0, import_react3.useEffect)(() => {
+  const previousDialogIdRef = (0, import_react4.useRef)(void 0);
+  (0, import_react4.useEffect)(() => {
     if (!events || !flow || !registry) return;
     const unsubscribeEnter = events.on("stepEnter", (payload) => {
       const step = payload.currentStep;
@@ -233,7 +239,7 @@ var useDialogAutomation = (params) => {
       unsubscribeComplete();
     };
   }, [events, flow, registry, onDialogNotMounted]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!flow || !state || state.status !== "running") return;
     if (state.stepIndex < 0 || state.stepIndex >= flow.steps.length) return;
     const currentStep = flow.steps[state.stepIndex];
@@ -242,19 +248,19 @@ var useDialogAutomation = (params) => {
 };
 
 // src/motion/animationAdapter.tsx
-var import_react4 = require("motion/react");
-var import_react5 = require("react");
+var import_react5 = require("motion/react");
+var import_react6 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var defaultAdapter = {
   components: {
-    MotionDiv: import_react4.motion.div,
-    MotionSection: import_react4.motion.section,
-    MotionSvg: import_react4.motion.svg,
-    MotionDefs: import_react4.motion.defs,
-    MotionMask: import_react4.motion.mask,
-    MotionRect: import_react4.motion.rect,
-    MotionSpan: import_react4.motion.span,
-    MotionButton: import_react4.motion.button
+    MotionDiv: import_react5.motion.div,
+    MotionSection: import_react5.motion.section,
+    MotionSvg: import_react5.motion.svg,
+    MotionDefs: import_react5.motion.defs,
+    MotionMask: import_react5.motion.mask,
+    MotionRect: import_react5.motion.rect,
+    MotionSpan: import_react5.motion.span,
+    MotionButton: import_react5.motion.button
   },
   transitions: {
     overlayHighlight: {
@@ -287,16 +293,16 @@ var defaultAdapter = {
     }
   }
 };
-var AnimationAdapterContext = (0, import_react5.createContext)(defaultAdapter);
+var AnimationAdapterContext = (0, import_react6.createContext)(defaultAdapter);
 var AnimationAdapterProvider = ({
   adapter,
   children
 }) => {
-  const value = (0, import_react5.useMemo)(() => adapter ?? defaultAdapter, [adapter]);
+  const value = (0, import_react6.useMemo)(() => adapter ?? defaultAdapter, [adapter]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AnimationAdapterContext.Provider, { value, children });
 };
 var useAnimationAdapter = () => {
-  return (0, import_react5.useContext)(AnimationAdapterContext);
+  return (0, import_react6.useContext)(AnimationAdapterContext);
 };
 var defaultAnimationAdapter = defaultAdapter;
 var reducedMotionAnimationAdapter = {
@@ -336,11 +342,11 @@ var usePreferredAnimationAdapter = (options) => {
     reducedMotionAdapter: reducedOption = reducedMotionAnimationAdapter,
     enabled = true
   } = options ?? {};
-  const [prefersReduced, setPrefersReduced] = (0, import_react5.useState)(() => {
+  const [prefersReduced, setPrefersReduced] = (0, import_react6.useState)(() => {
     if (!enabled || typeof window === "undefined") return false;
     return window.matchMedia(REDUCED_MOTION_QUERY).matches;
   });
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!enabled || typeof window === "undefined") return;
     const mediaQuery = window.matchMedia(REDUCED_MOTION_QUERY);
     const handleChange = (event) => {
@@ -589,10 +595,10 @@ var matchRoute = (params) => {
 
 // src/context.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var TourContext = (0, import_react6.createContext)(void 0);
+var TourContext = (0, import_react7.createContext)(void 0);
 var DEFAULT_STORAGE_PREFIX = "tour";
 var useFlowMap = (flows) => {
-  return (0, import_react6.useMemo)(() => {
+  return (0, import_react7.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const flow of flows) {
       map.set(flow.id, flow);
@@ -616,25 +622,25 @@ var TourProvider = ({
   labels: labelsProp,
   onVersionMismatch
 }) => {
-  const mergedLabels = (0, import_react6.useMemo)(
+  const mergedLabels = (0, import_react7.useMemo)(
     () => ({ ...defaultLabels, ...labelsProp }),
     [labelsProp]
   );
   const flowMap = useFlowMap(flows);
-  const storeRef = (0, import_react6.useRef)(null);
-  const unsubscribeRef = (0, import_react6.useRef)(null);
-  const stepHooksUnsubscribeRef = (0, import_react6.useRef)(null);
-  const fallbackStorageRef = (0, import_react6.useRef)(void 0);
-  const pendingResumeRef = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
-  const autoStartRequestedRef = (0, import_react6.useRef)(null);
-  const [activeFlowId, setActiveFlowId] = (0, import_react6.useState)(null);
-  const [state, setState] = (0, import_react6.useState)(null);
-  const [events, setEvents] = (0, import_react6.useState)(
+  const storeRef = (0, import_react7.useRef)(null);
+  const unsubscribeRef = (0, import_react7.useRef)(null);
+  const stepHooksUnsubscribeRef = (0, import_react7.useRef)(null);
+  const fallbackStorageRef = (0, import_react7.useRef)(void 0);
+  const pendingResumeRef = (0, import_react7.useRef)(/* @__PURE__ */ new Set());
+  const autoStartRequestedRef = (0, import_react7.useRef)(null);
+  const [activeFlowId, setActiveFlowId] = (0, import_react7.useState)(null);
+  const [state, setState] = (0, import_react7.useState)(null);
+  const [events, setEvents] = (0, import_react7.useState)(
     null
   );
-  const [debugEnabled, setDebugEnabled] = (0, import_react6.useState)(defaultDebug);
-  const [delayInfo, setDelayInfo] = (0, import_react6.useState)(null);
-  const teardownStore = (0, import_react6.useCallback)(() => {
+  const [debugEnabled, setDebugEnabled] = (0, import_react7.useState)(defaultDebug);
+  const [delayInfo, setDelayInfo] = (0, import_react7.useState)(null);
+  const teardownStore = (0, import_react7.useCallback)(() => {
     unsubscribeRef.current?.();
     unsubscribeRef.current = null;
     stepHooksUnsubscribeRef.current?.();
@@ -644,7 +650,7 @@ var TourProvider = ({
     setDelayInfo(null);
     pendingResumeRef.current.clear();
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     return () => {
       teardownStore();
       setState(null);
@@ -652,7 +658,7 @@ var TourProvider = ({
       setActiveFlowId(null);
     };
   }, [teardownStore]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!activeFlowId) return;
     const definition = flowMap.get(activeFlowId);
     if (!definition) {
@@ -675,7 +681,7 @@ var TourProvider = ({
       console.warn(`[tour][step] ${phase} hook failed`, error);
     }
   };
-  const ensureStore = (0, import_react6.useCallback)(
+  const ensureStore = (0, import_react7.useCallback)(
     (flowId) => {
       const existing = storeRef.current;
       if (existing && existing.definition.id === flowId) {
@@ -689,9 +695,9 @@ var TourProvider = ({
       if (!storageAdapter && !fallbackStorageRef.current && isBrowser) {
         fallbackStorageRef.current = (0, import_core.createLocalStorageAdapter)();
       }
-      const resolvedStorageAdapter = storageAdapter ? storageAdapter : fallbackStorageRef.current;
+      const resolvedStorageAdapter2 = storageAdapter ? storageAdapter : fallbackStorageRef.current;
       const store = (0, import_core.createFlowStore)(definition, {
-        storageAdapter: resolvedStorageAdapter,
+        storageAdapter: resolvedStorageAdapter2,
         storageKey: storageNamespace ? `${storageNamespace}:${definition.id}` : void 0,
         persistOnChange,
         analytics,
@@ -734,7 +740,7 @@ var TourProvider = ({
       teardownStore
     ]
   );
-  const getActiveStore = (0, import_react6.useCallback)(() => {
+  const getActiveStore = (0, import_react7.useCallback)(() => {
     const store = storeRef.current;
     if (!store) {
       throw new Error(
@@ -746,7 +752,7 @@ var TourProvider = ({
   const isPromiseLike2 = (value) => {
     return typeof value === "object" && value !== null && typeof value.then === "function";
   };
-  const invokeStepHook = (0, import_react6.useCallback)(
+  const invokeStepHook = (0, import_react7.useCallback)(
     async (hook, context, phase) => {
       if (!hook) return;
       try {
@@ -760,7 +766,7 @@ var TourProvider = ({
     },
     []
   );
-  const runResumeHooks = (0, import_react6.useCallback)(
+  const runResumeHooks = (0, import_react7.useCallback)(
     async (definition, flowState, strategy) => {
       if (flowState.status !== "running") return;
       if (strategy === "current") {
@@ -800,13 +806,13 @@ var TourProvider = ({
     },
     [invokeStepHook]
   );
-  const resolveResumeStrategy = (0, import_react6.useCallback)(
+  const resolveResumeStrategy = (0, import_react7.useCallback)(
     (definition, options) => {
       return options?.resumeStrategy ?? definition.resumeStrategy ?? "chain";
     },
     []
   );
-  const startFlow = (0, import_react6.useCallback)(
+  const startFlow = (0, import_react7.useCallback)(
     (flowId, options) => {
       const store = ensureStore(flowId);
       const previousState = store.getState();
@@ -835,8 +841,8 @@ var TourProvider = ({
     },
     [ensureStore, resolveResumeStrategy, runResumeHooks]
   );
-  const [eligibleFlows, setEligibleFlows] = (0, import_react6.useState)([]);
-  (0, import_react6.useEffect)(() => {
+  const [eligibleFlows, setEligibleFlows] = (0, import_react7.useState)([]);
+  (0, import_react7.useEffect)(() => {
     const autoStartFlows = flows.filter((f) => f.autoStart);
     if (autoStartFlows.length === 0) {
       setEligibleFlows([]);
@@ -845,8 +851,8 @@ var TourProvider = ({
     if (!storageAdapter && !fallbackStorageRef.current && isBrowser) {
       fallbackStorageRef.current = (0, import_core.createLocalStorageAdapter)();
     }
-    const resolvedStorageAdapter = storageAdapter ?? fallbackStorageRef.current;
-    if (!resolvedStorageAdapter) {
+    const resolvedStorageAdapter2 = storageAdapter ?? fallbackStorageRef.current;
+    if (!resolvedStorageAdapter2) {
       setEligibleFlows(
         autoStartFlows.map((flow) => ({
           flow,
@@ -863,7 +869,7 @@ var TourProvider = ({
       );
       const snapshots = await Promise.all(
         storageKeys.map(
-          (key) => (0, import_core.resolveMaybePromise)(resolvedStorageAdapter.get(key))
+          (key) => (0, import_core.resolveMaybePromise)(resolvedStorageAdapter2.get(key))
         )
       );
       if (cancelled) return;
@@ -900,7 +906,7 @@ var TourProvider = ({
       cancelled = true;
     };
   }, [flows, storageAdapter, storageNamespace]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (eligibleFlows.length === 0) {
       autoStartRequestedRef.current = null;
       return;
@@ -935,14 +941,14 @@ var TourProvider = ({
       }
     };
   }, [activeFlowId, eligibleFlows, startFlow]);
-  const next = (0, import_react6.useCallback)(() => getActiveStore().next(), [getActiveStore]);
-  const back = (0, import_react6.useCallback)(() => getActiveStore().back(), [getActiveStore]);
-  const goToStep = (0, import_react6.useCallback)(
+  const next = (0, import_react7.useCallback)(() => getActiveStore().next(), [getActiveStore]);
+  const back = (0, import_react7.useCallback)(() => getActiveStore().back(), [getActiveStore]);
+  const goToStep = (0, import_react7.useCallback)(
     (step) => getActiveStore().goToStep(step),
     [getActiveStore]
   );
-  const pause = (0, import_react6.useCallback)(() => getActiveStore().pause(), [getActiveStore]);
-  const resume = (0, import_react6.useCallback)(() => {
+  const pause = (0, import_react7.useCallback)(() => getActiveStore().pause(), [getActiveStore]);
+  const resume = (0, import_react7.useCallback)(() => {
     const store = getActiveStore();
     const previousState = store.getState();
     if (previousState.status === "paused") {
@@ -960,31 +966,31 @@ var TourProvider = ({
     }
     return result;
   }, [getActiveStore, resolveResumeStrategy, runResumeHooks]);
-  const cancel = (0, import_react6.useCallback)(
+  const cancel = (0, import_react7.useCallback)(
     (reason) => getActiveStore().cancel(reason),
     [getActiveStore]
   );
-  const complete = (0, import_react6.useCallback)(
+  const complete = (0, import_react7.useCallback)(
     () => getActiveStore().complete(),
     [getActiveStore]
   );
-  const advanceStep = (0, import_react6.useCallback)(
+  const advanceStep = (0, import_react7.useCallback)(
     (stepId) => getActiveStore().advanceStep(stepId),
     [getActiveStore]
   );
-  const toggleDebug = (0, import_react6.useCallback)(() => {
+  const toggleDebug = (0, import_react7.useCallback)(() => {
     setDebugEnabled((previous) => !previous);
   }, []);
-  const activeStep = (0, import_react6.useMemo)(() => {
+  const activeStep = (0, import_react7.useMemo)(() => {
     if (!state || !storeRef.current) return null;
     if (state.stepIndex < 0) return null;
     return storeRef.current.definition.steps[state.stepIndex] ?? null;
   }, [state]);
-  const activeDialogConfig = (0, import_react6.useMemo)(() => {
+  const activeDialogConfig = (0, import_react7.useMemo)(() => {
     if (!activeStep?.dialogId || !storeRef.current) return void 0;
     return storeRef.current.definition.dialogs?.[activeStep.dialogId];
   }, [activeStep]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!activeFlowId) return;
     if (!pendingResumeRef.current.has(activeFlowId)) return;
     if (!state || state.status !== "running") return;
@@ -999,7 +1005,7 @@ var TourProvider = ({
     pendingResumeRef.current.delete(activeFlowId);
     void runResumeHooks(definition, state, resumeStrategy);
   }, [activeFlowId, flowMap, resolveResumeStrategy, runResumeHooks, state]);
-  const contextValue = (0, import_react6.useMemo)(
+  const contextValue = (0, import_react7.useMemo)(
     () => ({
       flows: flowMap,
       activeFlowId,
@@ -1054,7 +1060,59 @@ var TourProvider = ({
     reducedMotionAdapter,
     enabled: autoDetectReducedMotion
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AnimationAdapterProvider, { adapter: resolvedAnimationAdapter, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LabelsProvider, { value: mergedLabels, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DialogRegistryProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(TourContext.Provider, { value: contextValue, children: [
+  const resolvedStorageAdapter = (0, import_react7.useMemo)(() => {
+    if (storageAdapter) return storageAdapter;
+    return fallbackStorageRef.current ?? null;
+  }, [storageAdapter]);
+  const devToolsContextValue = (0, import_react7.useMemo)(() => {
+    const getStorageKey = (flowId) => storageNamespace ? `${storageNamespace}:${flowId}` : `${DEFAULT_STORAGE_PREFIX}:${flowId}`;
+    return {
+      flows: flowMap,
+      activeFlowId,
+      state,
+      storageAdapter: resolvedStorageAdapter,
+      storageNamespace: storageNamespace ?? DEFAULT_STORAGE_PREFIX,
+      cancelFlow: (flowId) => {
+        if (activeFlowId === flowId && storeRef.current) {
+          storeRef.current.cancel();
+        }
+      },
+      deleteFlowStorage: async (flowId) => {
+        if (!resolvedStorageAdapter) return;
+        const key = getStorageKey(flowId);
+        await (0, import_core.resolveMaybePromise)(resolvedStorageAdapter.remove(key));
+      },
+      updateFlowStorage: async (flowId, newState) => {
+        if (!resolvedStorageAdapter) return;
+        const key = getStorageKey(flowId);
+        const definition = flowMap.get(flowId);
+        if (!definition) return;
+        await (0, import_core.resolveMaybePromise)(
+          resolvedStorageAdapter.set(key, {
+            version: newState.version,
+            value: newState,
+            updatedAt: Date.now()
+          })
+        );
+      },
+      getFlowState: async (flowId) => {
+        if (!resolvedStorageAdapter) return null;
+        const key = getStorageKey(flowId);
+        const snapshot = await (0, import_core.resolveMaybePromise)(
+          resolvedStorageAdapter.get(key)
+        );
+        if (!snapshot) return null;
+        return snapshot.value;
+      }
+    };
+  }, [
+    flowMap,
+    activeFlowId,
+    state,
+    resolvedStorageAdapter,
+    storageNamespace
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AnimationAdapterProvider, { adapter: resolvedAnimationAdapter, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LabelsProvider, { value: mergedLabels, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DialogRegistryProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TourContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(DevToolsContext.Provider, { value: devToolsContextValue, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       DialogAutomationBridge,
       {
@@ -1064,7 +1122,7 @@ var TourProvider = ({
       }
     ),
     children
-  ] }) }) }) });
+  ] }) }) }) }) });
 };
 var DialogAutomationBridge = ({
   flow,
@@ -1088,7 +1146,7 @@ var DialogAutomationBridge = ({
   return null;
 };
 var useTour = () => {
-  const context = (0, import_react6.useContext)(TourContext);
+  const context = (0, import_react7.useContext)(TourContext);
   if (!context) {
     throw new Error("useTour must be used within a TourProvider");
   }
@@ -1096,14 +1154,14 @@ var useTour = () => {
 };
 var useTourEvents = (event, handler) => {
   const { events } = useTour();
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!events) return;
     return events.on(event, handler);
   }, [event, events, handler]);
 };
 
 // src/hooks/useTourTarget.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/hooks/scrollMargin.ts
 var DEFAULT_SCROLL_MARGIN = 16;
@@ -1406,12 +1464,12 @@ var resolveStepTarget = (target) => {
 };
 var useTourTarget = () => {
   const { activeStep, state, activeFlowId, flows } = useTour();
-  const [targetInfo, setTargetInfo] = (0, import_react7.useState)(INITIAL_TARGET_INFO);
-  const autoScrollStateRef = (0, import_react7.useRef)({ stepId: null, checks: 0, stalledChecks: 0, done: false, lastRect: null });
-  const autoScrollRafRef = (0, import_react7.useRef)(null);
-  const autoScrollTimeoutRef = (0, import_react7.useRef)(null);
-  const lastRectRef = (0, import_react7.useRef)(null);
-  const initialScrollStepRef = (0, import_react7.useRef)(null);
+  const [targetInfo, setTargetInfo] = (0, import_react8.useState)(INITIAL_TARGET_INFO);
+  const autoScrollStateRef = (0, import_react8.useRef)({ stepId: null, checks: 0, stalledChecks: 0, done: false, lastRect: null });
+  const autoScrollRafRef = (0, import_react8.useRef)(null);
+  const autoScrollTimeoutRef = (0, import_react8.useRef)(null);
+  const lastRectRef = (0, import_react8.useRef)(null);
+  const initialScrollStepRef = (0, import_react8.useRef)(null);
   const cancelAutoScrollLoop = () => {
     if (!isBrowser) return;
     if (autoScrollTimeoutRef.current !== null) {
@@ -1423,7 +1481,7 @@ var useTourTarget = () => {
       autoScrollRafRef.current = null;
     }
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!activeStep) {
       initialScrollStepRef.current = null;
     }
@@ -1431,7 +1489,7 @@ var useTourTarget = () => {
       initialScrollStepRef.current = null;
     };
   }, [activeStep?.id]);
-  (0, import_react7.useLayoutEffect)(() => {
+  (0, import_react8.useLayoutEffect)(() => {
     if (!isBrowser) return;
     if (!activeStep) return;
     if (targetInfo.status !== "ready") return;
@@ -1463,7 +1521,7 @@ var useTourTarget = () => {
     targetInfo.status,
     targetInfo.rectSource
   ]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!activeStep || !state || state.status !== "running") {
       setTargetInfo(INITIAL_TARGET_INFO);
       autoScrollStateRef.current = {
@@ -1786,7 +1844,7 @@ var useTourTarget = () => {
       waitForPredicateController = null;
     };
   }, [activeStep, activeFlowId, flows, state]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!isBrowser) return;
     if (!activeStep) {
       cancelAutoScrollLoop();
@@ -1867,10 +1925,10 @@ var useTourTarget = () => {
 };
 
 // src/hooks/useHudState.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/hooks/useAdvanceRules.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var DEFAULT_POLL_MS2 = 250;
 var isListenerTarget = (value) => {
   return !!value && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function";
@@ -1909,7 +1967,7 @@ var useAdvanceRules = (target) => {
     complete,
     setDelayInfo
   } = useTour();
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!isBrowser) return;
     if (!state || state.status !== "running") return;
     if (!activeStep) return;
@@ -2080,7 +2138,7 @@ var useAdvanceRules = (target) => {
 };
 
 // src/hooks/useHiddenTargetFallback.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var DEFAULT_DELAY_MS = 900;
 var DEFAULT_GRACE_PERIOD_MS = 400;
 var useHiddenTargetFallback = ({
@@ -2089,11 +2147,11 @@ var useHiddenTargetFallback = ({
   viewportRect,
   onSkip
 }) => {
-  const [usingScreenFallback, setUsingScreenFallback] = (0, import_react9.useState)(false);
-  const [isInGracePeriod, setIsInGracePeriod] = (0, import_react9.useState)(false);
-  const timeoutRef = (0, import_react9.useRef)(null);
-  const graceTimeoutRef = (0, import_react9.useRef)(null);
-  const skipTriggeredRef = (0, import_react9.useRef)(false);
+  const [usingScreenFallback, setUsingScreenFallback] = (0, import_react10.useState)(false);
+  const [isInGracePeriod, setIsInGracePeriod] = (0, import_react10.useState)(false);
+  const timeoutRef = (0, import_react10.useRef)(null);
+  const graceTimeoutRef = (0, import_react10.useRef)(null);
+  const skipTriggeredRef = (0, import_react10.useRef)(false);
   const hiddenMode = step?.targetBehavior?.hidden ?? "screen";
   const hiddenDelayMs = Math.max(
     0,
@@ -2111,7 +2169,7 @@ var useHiddenTargetFallback = ({
       graceTimeoutRef.current = null;
     }
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     skipTriggeredRef.current = false;
     setUsingScreenFallback(false);
     setIsInGracePeriod(false);
@@ -2122,7 +2180,7 @@ var useHiddenTargetFallback = ({
       clearGraceTimeout();
     };
   }, [step?.id]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!isBrowser) return void 0;
     if (!step) return void 0;
     clearPendingTimeout();
@@ -2168,7 +2226,7 @@ var useHiddenTargetFallback = ({
     hiddenDelayMs,
     onSkip
   ]);
-  const resolvedTarget = (0, import_react9.useMemo)(() => {
+  const resolvedTarget = (0, import_react10.useMemo)(() => {
     if (!usingScreenFallback) {
       return target;
     }
@@ -2190,7 +2248,7 @@ var useHiddenTargetFallback = ({
 };
 
 // src/hooks/useRouteMismatch.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/router/utils.ts
 var ensurePrefix = (value, prefix) => value.startsWith(prefix) ? value : `${prefix}${value}`;
@@ -2237,8 +2295,8 @@ var createPathString = (pathname, search, hash) => {
 
 // src/hooks/useRouteMismatch.ts
 var useRouteMismatch = (step) => {
-  const [currentPath, setCurrentPath] = (0, import_react10.useState)(() => getCurrentRoutePath());
-  (0, import_react10.useEffect)(() => {
+  const [currentPath, setCurrentPath] = (0, import_react11.useState)(() => getCurrentRoutePath());
+  (0, import_react11.useEffect)(() => {
     return subscribeToRouteChanges((path) => {
       setCurrentPath(path);
     });
@@ -2253,13 +2311,13 @@ var useRouteMismatch = (step) => {
 };
 
 // src/hooks/useViewportRect.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 var useViewportRect = () => {
-  const [viewport, setViewport] = (0, import_react11.useState)(
+  const [viewport, setViewport] = (0, import_react12.useState)(
     () => getViewportRect()
   );
-  const rafRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const rafRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     if (!isBrowser) return;
     const updateViewport = () => {
       rafRef.current = null;
@@ -2301,12 +2359,12 @@ var normalizeFlowFilter = (value) => {
 };
 var useHudState = (options = {}) => {
   const { flowId } = options;
-  const flowFilter = (0, import_react12.useMemo)(() => normalizeFlowFilter(flowId), [flowId]);
+  const flowFilter = (0, import_react13.useMemo)(() => normalizeFlowFilter(flowId), [flowId]);
   const { state, activeStep, activeFlowId, flows, next, complete, pause, resume } = useTour();
   const target = useTourTarget();
   const viewportRect = useViewportRect();
   useAdvanceRules(target);
-  const matchesFlowFilter = (0, import_react12.useMemo)(() => {
+  const matchesFlowFilter = (0, import_react13.useMemo)(() => {
     if (!flowFilter || flowFilter.length === 0) return true;
     if (!activeFlowId) return false;
     return flowFilter.includes(activeFlowId);
@@ -2314,15 +2372,15 @@ var useHudState = (options = {}) => {
   const isRunning = state?.status === "running";
   const runningState = isRunning && matchesFlowFilter ? state : null;
   const runningStep = runningState && activeStep ? activeStep : null;
-  const [shouldRender, setShouldRender] = (0, import_react12.useState)(
+  const [shouldRender, setShouldRender] = (0, import_react13.useState)(
     Boolean(runningStep)
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (runningStep) {
       setShouldRender(true);
     }
   }, [runningStep?.id]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!shouldRender) return;
     if (runningStep) return;
     if (target.status !== "idle") return;
@@ -2334,19 +2392,19 @@ var useHudState = (options = {}) => {
     };
   }, [runningStep, shouldRender, target.status]);
   const { isRouteMismatch, currentPath } = useRouteMismatch(activeStep);
-  const pausedForMissingTargetRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const pausedForMissingTargetRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     if (!isRouteMismatch) return;
     if (!runningState || runningState.status !== "running") return;
     pause();
   }, [isRouteMismatch, runningState, pause]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (isRouteMismatch) return;
     if (pausedForMissingTargetRef.current !== null) return;
     if (!state || state.status !== "paused") return;
     resume();
   }, [isRouteMismatch, state, resume]);
-  const skipHiddenStep = (0, import_react12.useCallback)(() => {
+  const skipHiddenStep = (0, import_react13.useCallback)(() => {
     if (!runningState || runningState.status !== "running") return;
     if (!activeFlowId) return;
     const flow = flows.get(activeFlowId);
@@ -2364,7 +2422,7 @@ var useHudState = (options = {}) => {
     viewportRect,
     onSkip: skipHiddenStep
   });
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (isRouteMismatch) return;
     if (activeStep?.route !== void 0) return;
     if (isInGracePeriod) return;
@@ -2383,14 +2441,14 @@ var useHudState = (options = {}) => {
     currentPath,
     pause
   ]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (pausedForMissingTargetRef.current === null) return;
     if (!state || state.status !== "paused") return;
     if (currentPath === pausedForMissingTargetRef.current) return;
     pausedForMissingTargetRef.current = null;
     resume();
   }, [currentPath, state, resume]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     pausedForMissingTargetRef.current = null;
   }, [activeStep?.id]);
   const canRenderStep = Boolean(runningStep && runningState);
@@ -2415,24 +2473,24 @@ var useHudState = (options = {}) => {
 };
 
 // src/hooks/useHudDescription.ts
-var import_react13 = require("react");
+var import_react14 = require("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 = (0, import_react13.useMemo)(() => {
+  const targetDescription = (0, import_react14.useMemo)(() => {
     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 = (0, import_react13.useMemo)(() => {
+  const descriptionId = (0, import_react14.useMemo)(() => {
     if (!step || !targetDescription) return void 0;
     return `tour-step-${sanitizeForId(step.id)}-description`;
   }, [step, targetDescription]);
-  const combinedAriaDescribedBy = (0, import_react13.useMemo)(() => {
+  const combinedAriaDescribedBy = (0, import_react14.useMemo)(() => {
     const parts = [fallbackAriaDescribedBy, descriptionId].filter(Boolean);
     return parts.length > 0 ? parts.join(" ") : void 0;
   }, [descriptionId, fallbackAriaDescribedBy]);
@@ -2444,10 +2502,10 @@ var useHudDescription = (options) => {
 };
 
 // src/hooks/useHudShortcuts.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/hooks/useTourControls.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 var hasManualAdvance = (rules) => rules.some((rule) => rule.type === "manual");
 var didPreviousAdvanceViaRoute = (rules) => rules.some((rule) => rule.type === "route");
 var useTourControls = () => {
@@ -2462,7 +2520,7 @@ var useTourControls = () => {
     flows,
     activeStep
   } = tour;
-  const computed = (0, import_react14.useMemo)(() => {
+  const computed = (0, import_react15.useMemo)(() => {
     if (!state || state.status !== "running" || !activeStep) {
       return {
         isActive: false,
@@ -2511,11 +2569,11 @@ var useTourControls = () => {
   } = computed;
   const canGoBack = showBackButton && !backDisabled;
   const canGoNext = showNextButton && !nextDisabled;
-  const goBack = (0, import_react14.useCallback)(() => {
+  const goBack = (0, import_react15.useCallback)(() => {
     if (!canGoBack) return;
     back();
   }, [back, canGoBack]);
-  const goNext = (0, import_react14.useCallback)(() => {
+  const goNext = (0, import_react15.useCallback)(() => {
     if (!canGoNext) return;
     if (isLast) {
       complete();
@@ -2523,7 +2581,7 @@ var useTourControls = () => {
       next();
     }
   }, [canGoNext, complete, isLast, next]);
-  return (0, import_react14.useMemo)(
+  return (0, import_react15.useMemo)(
     () => ({
       showBackButton,
       backDisabled,
@@ -2568,7 +2626,7 @@ var useHudShortcuts = (target, options) => {
   const escapeEnabled = options?.escape ?? true;
   const { state } = useTour();
   const { cancel, canGoBack, goBack, canGoNext, goNext, isActive } = useTourControls();
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!isBrowser) return void 0;
     if (!enabled) return void 0;
     if (!target) return void 0;
@@ -2632,10 +2690,10 @@ var useHudShortcuts = (target, options) => {
 };
 
 // src/hooks/useTourHud.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/hooks/useBodyScrollLock.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var lockCount = 0;
 var previousOverflow = null;
 var acquireLock = () => {
@@ -2656,7 +2714,7 @@ var releaseLock = () => {
   }
 };
 var useBodyScrollLock = (enabled) => {
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!enabled) return;
     acquireLock();
     return () => {
@@ -2666,7 +2724,7 @@ var useBodyScrollLock = (enabled) => {
 };
 
 // src/hooks/useHudTargetIssue.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 var deriveTargetIssue = (params) => {
   const { target, labels } = params;
   if (target.isScreen) return null;
@@ -2699,12 +2757,12 @@ var deriveTargetIssue = (params) => {
 var useHudTargetIssue = (target, options) => {
   const labels = useTourLabels();
   const delayMs = Math.max(0, options?.delayMs ?? 500);
-  const [armed, setArmed] = (0, import_react17.useState)(false);
-  const rawIssue = (0, import_react17.useMemo)(
+  const [armed, setArmed] = (0, import_react18.useState)(false);
+  const rawIssue = (0, import_react18.useMemo)(
     () => deriveTargetIssue({ target, labels }),
     [target.isScreen, target.rectSource, target.status, target.visibility, labels]
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!rawIssue) {
       setArmed(false);
       return;
@@ -2738,7 +2796,7 @@ var useTourHud = (options = {}) => {
   const { backdropInteraction, lockBodyScroll } = useTour();
   const hudState = useHudState();
   const disableDefaultHud = hudState.hudRenderMode === "none";
-  const [popoverNode, setPopoverNode] = (0, import_react18.useState)(null);
+  const [popoverNode, setPopoverNode] = (0, import_react19.useState)(null);
   const popoverOptions = hudState.flowHudOptions?.popover;
   const description = useHudDescription({
     step: hudState.runningStep,
@@ -2762,7 +2820,7 @@ var useTourHud = (options = {}) => {
     radius: overlayRadius,
     interactionMode: hudState.flowHudOptions?.backdrop?.interaction ?? backdropInteraction
   };
-  const popover = (0, import_react18.useMemo)(() => {
+  const popover = (0, import_react19.useMemo)(() => {
     return {
       offset: popoverOptions?.offset ?? 32,
       role: popoverOptions?.role ?? "dialog",
@@ -2774,13 +2832,13 @@ var useTourHud = (options = {}) => {
       placement: hudState.runningStep?.placement
     };
   }, [hudState.runningStep?.placement, popoverOptions]);
-  const descriptionResult = (0, import_react18.useMemo)(() => {
+  const descriptionResult = (0, import_react19.useMemo)(() => {
     return {
       ...description,
       text: description.targetDescription
     };
   }, [description]);
-  const focusManager = (0, import_react18.useMemo)(
+  const focusManager = (0, import_react19.useMemo)(
     () => ({
       active: hudState.focusTrapActive,
       target: hudState.hudTarget,
@@ -2810,7 +2868,7 @@ var useTourHud = (options = {}) => {
 };
 
 // src/hooks/useTourOverlay.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 var DEFAULT_PADDING = 12;
 var DEFAULT_RADIUS = 12;
 var DEFAULT_EDGE_BUFFER = 0;
@@ -2823,9 +2881,9 @@ var useTourOverlay = (options) => {
     interactionMode = "passthrough",
     isInGracePeriod = false
   } = options;
-  const hasShownRef = (0, import_react19.useRef)(false);
-  const lastReadyTargetRef = (0, import_react19.useRef)(null);
-  (0, import_react19.useEffect)(() => {
+  const hasShownRef = (0, import_react20.useRef)(false);
+  const lastReadyTargetRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useEffect)(() => {
     if (!isBrowser) return;
     if (target.status === "ready") {
       hasShownRef.current = true;
@@ -2875,15 +2933,15 @@ var useTourOverlay = (options) => {
     height: highlightHeight,
     radius: highlightRadius
   } : null;
-  const maskCapable = (0, import_react19.useMemo)(() => supportsMasking(), []);
+  const maskCapable = (0, import_react20.useMemo)(() => supportsMasking(), []);
   const isActive = target.status === "ready" || target.status === "resolving" && cachedTarget !== null || isInGracePeriod;
   const shouldMask = maskCapable && isActive;
-  const maskId = (0, import_react19.useMemo)(
+  const maskId = (0, import_react20.useMemo)(
     () => `tour-overlay-mask-${Math.random().toString(36).slice(2, 10)}`,
     []
   );
   const maskUrl = shouldMask ? `url(#${maskId})` : void 0;
-  const fallbackSegments = (0, import_react19.useMemo)(() => {
+  const fallbackSegments = (0, import_react20.useMemo)(() => {
     if (!isActive || shouldMask || !hasHighlightBounds || !highlightRect) {
       return null;
     }
@@ -2936,7 +2994,7 @@ var useTourOverlay = (options) => {
     viewport.height,
     viewport.width
   ]);
-  const blockerSegments = (0, import_react19.useMemo)(() => {
+  const blockerSegments = (0, import_react20.useMemo)(() => {
     if (interactionMode !== "block") {
       return null;
     }
@@ -3066,7 +3124,7 @@ var waitForDom = () => new Promise(
 );
 
 // src/hooks/useRadixTourDialog.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 var resolveAutoOpen2 = (config) => {
   if (!config) return { onEnter: true, onResume: true };
   const { autoOpen } = config;
@@ -3084,27 +3142,27 @@ var useRadixTourDialog = (params) => {
   const { activeFlowId, state, flows, goToStep, events } = useTour();
   const registry = useDialogRegistryOptional();
   const { suspendExternalFocusTrap } = useTourFocusDominance();
-  const [internalOpen, setInternalOpen] = (0, import_react20.useState)(false);
-  const lastStepIndexRef = (0, import_react20.useRef)(-1);
-  const isResumeRef = (0, import_react20.useRef)(false);
+  const [internalOpen, setInternalOpen] = (0, import_react21.useState)(false);
+  const lastStepIndexRef = (0, import_react21.useRef)(-1);
+  const isResumeRef = (0, import_react21.useRef)(false);
   const flow = activeFlowId ? flows.get(activeFlowId) : void 0;
   const dialogConfig = flow?.dialogs?.[dialogId];
   const currentStep = flow && state && state.stepIndex >= 0 ? flow.steps[state.stepIndex] : void 0;
   const isStepActive = currentStep?.dialogId === dialogId;
   const autoOpenConfig = resolveAutoOpen2(dialogConfig);
   const autoClose = dialogConfig?.autoClose ?? "differentDialog";
-  const shouldBeOpen = (0, import_react20.useMemo)(() => {
+  const shouldBeOpen = (0, import_react21.useMemo)(() => {
     if (!isStepActive) return false;
     return true;
   }, [isStepActive]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!events) return;
     const unsubscribe = events.on("flowResume", () => {
       isResumeRef.current = true;
     });
     return unsubscribe;
   }, [events]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!state || state.status !== "running") return;
     if (!flow) return;
     const currentStepIndex = state.stepIndex;
@@ -3145,7 +3203,7 @@ var useRadixTourDialog = (params) => {
     autoOpenConfig.onResume,
     autoClose
   ]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!events) return;
     const unsubscribeEnter = events.on("stepEnter", (payload) => {
       const step = payload.currentStep;
@@ -3176,12 +3234,12 @@ var useRadixTourDialog = (params) => {
       unsubscribeExit();
     };
   }, [events, dialogId, autoOpenConfig, autoClose]);
-  const handleDismiss = (0, import_react20.useCallback)(() => {
+  const handleDismiss = (0, import_react21.useCallback)(() => {
     if (!dialogConfig) return;
     setInternalOpen(false);
     goToStep(dialogConfig.onDismissGoToStepId);
   }, [dialogConfig, goToStep]);
-  const onOpenChange = (0, import_react20.useCallback)(
+  const onOpenChange = (0, import_react21.useCallback)(
     (open) => {
       if (open) {
         setInternalOpen(true);
@@ -3195,7 +3253,7 @@ var useRadixTourDialog = (params) => {
     },
     [isStepActive, dialogConfig, handleDismiss]
   );
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!registry) return;
     const controller = {
       open: () => setInternalOpen(true),
@@ -3205,7 +3263,7 @@ var useRadixTourDialog = (params) => {
     registry.register(dialogId, controller);
     return () => registry.unregister(dialogId);
   }, [registry, dialogId, internalOpen]);
-  const preventDismiss = (0, import_react20.useCallback)(
+  const preventDismiss = (0, import_react21.useCallback)(
     (event) => {
       if (suspendExternalFocusTrap) {
         event.preventDefault();
@@ -3213,7 +3271,7 @@ var useRadixTourDialog = (params) => {
     },
     [suspendExternalFocusTrap]
   );
-  const handleEscapeKeyDown = (0, import_react20.useCallback)(
+  const handleEscapeKeyDown = (0, import_react21.useCallback)(
     (event) => {
       if (isStepActive && dialogConfig) {
         event.preventDefault();
@@ -3222,7 +3280,7 @@ var useRadixTourDialog = (params) => {
     },
     [isStepActive, dialogConfig, handleDismiss]
   );
-  const handleInteractOutside = (0, import_react20.useCallback)(
+  const handleInteractOutside = (0, import_react21.useCallback)(
     (event) => {
       if (suspendExternalFocusTrap) {
         event.preventDefault();
@@ -3254,12 +3312,12 @@ var useRadixTourDialog = (params) => {
 };
 
 // src/hooks/useDelayAdvance.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 var getTimestamp = () => typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
 var useDelayAdvance = () => {
   const { delayInfo, activeStep, state } = useTour();
-  const [now, setNow] = (0, import_react21.useState)(() => getTimestamp());
-  (0, import_react21.useEffect)(() => {
+  const [now, setNow] = (0, import_react22.useState)(() => getTimestamp());
+  (0, import_react22.useEffect)(() => {
     if (!delayInfo) return;
     if (!activeStep || activeStep.id !== delayInfo.stepId) return;
     if (!state || state.status !== "running") return;
@@ -3276,12 +3334,12 @@ var useDelayAdvance = () => {
       }
     };
   }, [delayInfo, activeStep, state]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!delayInfo) {
       setNow(getTimestamp());
     }
   }, [delayInfo]);
-  return (0, import_react21.useMemo)(() => {
+  return (0, import_react22.useMemo)(() => {
     const matchingStep = !!delayInfo && !!activeStep && activeStep.id === delayInfo.stepId;
     const isRunning = matchingStep && state?.status === "running";
     if (!delayInfo) {
@@ -3334,9 +3392,9 @@ var useDelayAdvance = () => {
 };
 
 // src/components/OverlayBackdrop.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_react_dom = require("react-dom");
-var import_react23 = require("motion/react");
+var import_react24 = require("motion/react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var styles = {
   root: {
@@ -3423,9 +3481,9 @@ var OverlayBackdrop = ({
     viewport
   } = overlay;
   const hasHighlightBounds = Boolean(highlight.rect);
-  const prevScreenTargetRef = (0, import_react22.useRef)(null);
+  const prevScreenTargetRef = (0, import_react23.useRef)(null);
   const shouldSnapHighlight = prevScreenTargetRef.current === true && !highlight.isScreen && hasHighlightBounds;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     prevScreenTargetRef.current = highlight.isScreen;
   }, [highlight.isScreen]);
   const resolvedBlur = typeof blurAmount === "number" ? `${blurAmount}px` : "0px";
@@ -3493,7 +3551,7 @@ var OverlayBackdrop = ({
         "aria-hidden": ariaHidden,
         "data-tour-overlay": "",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.AnimatePresence, { mode: "popLayout", children: shouldMask ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react24.AnimatePresence, { mode: "popLayout", children: shouldMask ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             MotionSvg,
             {
               width: "0",
@@ -3552,7 +3610,7 @@ var OverlayBackdrop = ({
             },
             "tour-mask"
           ) : null }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.AnimatePresence, { mode: "popLayout", children: showBaseOverlay ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react24.AnimatePresence, { mode: "popLayout", children: showBaseOverlay ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             MotionDiv,
             {
               className: overlayClassName,
@@ -3580,7 +3638,7 @@ var OverlayBackdrop = ({
             },
             "tour-overlay"
           ) : null }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.AnimatePresence, { mode: "popLayout", children: fallbackSegments ? fallbackSegments.map((segment) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react24.AnimatePresence, { mode: "popLayout", children: fallbackSegments ? fallbackSegments.map((segment) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             MotionDiv,
             {
               className: segmentClassName,
@@ -3631,7 +3689,7 @@ var OverlayBackdrop = ({
               ))
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.AnimatePresence, { mode: "popLayout", children: showHighlightRing && isActive && hasHighlightBounds ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react24.AnimatePresence, { mode: "popLayout", children: showHighlightRing && isActive && hasHighlightBounds ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             MotionDiv,
             {
               className: ringClassName,
@@ -3662,7 +3720,7 @@ var OverlayBackdrop = ({
 };
 
 // src/components/TourPopoverPortal.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_dom13 = require("@floating-ui/dom");
 var FLOATING_OFFSET = 8;
@@ -3723,12 +3781,12 @@ var TourPopoverPortal = ({
   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 = (0, import_react24.useRef)(prefersMobileLayout);
-  (0, import_react24.useEffect)(() => {
+  const prefersMobileRef = (0, import_react25.useRef)(prefersMobileLayout);
+  (0, import_react25.useEffect)(() => {
     prefersMobileRef.current = prefersMobileLayout;
   }, [prefersMobileLayout]);
-  const lastReadyTargetRef = (0, import_react24.useRef)(null);
-  (0, import_react24.useEffect)(() => {
+  const lastReadyTargetRef = (0, import_react25.useRef)(null);
+  (0, import_react25.useEffect)(() => {
     if (target.status === "ready" && target.rect) {
       lastReadyTargetRef.current = {
         rect: { ...target.rect },
@@ -3744,7 +3802,7 @@ var TourPopoverPortal = ({
   const shouldHidePopover = !resolvedRect && !target.isScreen;
   const fallbackRect = resolvedRect ?? viewport;
   const fallbackIsScreen = resolvedIsScreen;
-  const [floatingSize, setFloatingSize] = (0, import_react24.useState)(null);
+  const [floatingSize, setFloatingSize] = (0, import_react25.useState)(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;
@@ -3755,7 +3813,7 @@ var TourPopoverPortal = ({
   const leftBase = fallbackIsScreen ? screenCenteredLeft : fallbackRect.left + fallbackRect.width / 2 - floatingWidth / 2;
   const left = clampHorizontal(leftBase);
   const fallbackTransform = "translate3d(0px, 0px, 0px)";
-  const fallbackPosition = (0, import_react24.useMemo)(
+  const fallbackPosition = (0, import_react25.useMemo)(
     () => ({
       top,
       left,
@@ -3763,7 +3821,7 @@ var TourPopoverPortal = ({
     }),
     [fallbackTransform, left, top]
   );
-  const centerInitialPosition = (0, import_react24.useMemo)(
+  const centerInitialPosition = (0, import_react25.useMemo)(
     () => ({
       top: viewport.height / 2,
       left: viewport.width / 2,
@@ -3771,23 +3829,23 @@ var TourPopoverPortal = ({
     }),
     [viewport.height, viewport.width]
   );
-  const floatingRef = (0, import_react24.useRef)(null);
-  const cachedFloatingPositionRef = (0, import_react24.useRef)(null);
-  const appliedFloatingCacheRef = (0, import_react24.useRef)(null);
-  const deferredScreenSnapRef = (0, import_react24.useRef)(null);
-  const [layoutMode, setLayoutMode] = (0, import_react24.useState)(
+  const floatingRef = (0, import_react25.useRef)(null);
+  const cachedFloatingPositionRef = (0, import_react25.useRef)(null);
+  const appliedFloatingCacheRef = (0, import_react25.useRef)(null);
+  const deferredScreenSnapRef = (0, import_react25.useRef)(null);
+  const [layoutMode, setLayoutMode] = (0, import_react25.useState)(
     () => prefersMobileLayout ? "mobile" : "floating"
   );
-  const [floatingPosition, setFloatingPosition] = (0, import_react24.useState)(fallbackPosition);
-  const [dragPosition, setDragPosition] = (0, import_react24.useState)(null);
-  const [isDragging, setIsDragging] = (0, import_react24.useState)(false);
-  const dragStateRef = (0, import_react24.useRef)(null);
-  const overflowRetryRef = (0, import_react24.useRef)({
+  const [floatingPosition, setFloatingPosition] = (0, import_react25.useState)(fallbackPosition);
+  const [dragPosition, setDragPosition] = (0, import_react25.useState)(null);
+  const [isDragging, setIsDragging] = (0, import_react25.useState)(false);
+  const dragStateRef = (0, import_react25.useRef)(null);
+  const overflowRetryRef = (0, import_react25.useRef)({
     stepId: null,
     attempts: 0
   });
-  const overflowRetryTimeoutRef = (0, import_react24.useRef)(null);
-  (0, import_react24.useLayoutEffect)(() => {
+  const overflowRetryTimeoutRef = (0, import_react25.useRef)(null);
+  (0, import_react25.useLayoutEffect)(() => {
     if (!isBrowser) return;
     const node = floatingRef.current;
     if (!node) return;
@@ -3806,25 +3864,25 @@ var TourPopoverPortal = ({
   const autoAlignment = resolvedPlacement.endsWith(
     "-start"
   ) ? "start" : resolvedPlacement.endsWith("-end") ? "end" : void 0;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     setDragPosition(null);
     setLayoutMode(prefersMobileRef.current ? "mobile" : "floating");
     cachedFloatingPositionRef.current = null;
     appliedFloatingCacheRef.current = null;
   }, [target.stepId]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (layoutMode !== "manual") {
       setDragPosition(null);
     }
   }, [layoutMode]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     cachedFloatingPositionRef.current = floatingPosition;
     const cacheKey = getFloatingCacheKey(target);
     if (cacheKey) {
       floatingPositionCache.set(cacheKey, floatingPosition);
     }
   }, [floatingPosition, target.isScreen, target.stepId]);
-  const dockedPosition = (0, import_react24.useMemo)(
+  const dockedPosition = (0, import_react25.useMemo)(
     () => ({
       top: viewport.height - DOCKED_MARGIN,
       left: viewport.width - DOCKED_MARGIN,
@@ -3832,7 +3890,7 @@ var TourPopoverPortal = ({
     }),
     [viewport.height, viewport.width]
   );
-  const mobilePosition = (0, import_react24.useMemo)(
+  const mobilePosition = (0, import_react25.useMemo)(
     () => ({
       top: viewport.height - MOBILE_HORIZONTAL_GUTTER,
       left: viewport.width / 2,
@@ -3840,17 +3898,17 @@ var TourPopoverPortal = ({
     }),
     [viewport.height, viewport.width]
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (layoutMode === "docked") {
       setFloatingPosition(dockedPosition);
     }
   }, [dockedPosition, layoutMode]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (layoutMode === "mobile") {
       setFloatingPosition(mobilePosition);
     }
   }, [layoutMode, mobilePosition]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (prefersMobileLayout) {
       if (layoutMode !== "mobile") {
         setLayoutMode("mobile");
@@ -3863,7 +3921,7 @@ var TourPopoverPortal = ({
       setFloatingPosition(fallbackPosition);
     }
   }, [fallbackPosition, layoutMode, prefersMobileLayout]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (layoutMode !== "floating") return;
     const stepId = target.stepId;
     if (!stepId) return;
@@ -3887,7 +3945,7 @@ var TourPopoverPortal = ({
     target.stepId
   ]);
   const shouldDeferScreenSnap = layoutMode === "floating" && target.isScreen && Boolean(layoutId);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     return () => {
       if (deferredScreenSnapRef.current !== null) {
         cancelAnimationFrame(deferredScreenSnapRef.current);
@@ -3895,7 +3953,7 @@ var TourPopoverPortal = ({
       }
     };
   }, []);
-  (0, import_react24.useLayoutEffect)(() => {
+  (0, import_react25.useLayoutEffect)(() => {
     if (layoutMode !== "floating") return;
     if (target.status === "ready" && !target.isScreen) return;
     if (shouldDeferScreenSnap) return;
@@ -3907,7 +3965,7 @@ var TourPopoverPortal = ({
     target.isScreen,
     target.status
   ]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!shouldDeferScreenSnap) return;
     if (deferredScreenSnapRef.current !== null) {
       cancelAnimationFrame(deferredScreenSnapRef.current);
@@ -3934,14 +3992,14 @@ var TourPopoverPortal = ({
       }
     };
   }, [fallbackPosition, shouldDeferScreenSnap]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     return () => {
       if (overflowRetryTimeoutRef.current !== null) {
         window.clearTimeout(overflowRetryTimeoutRef.current);
       }
     };
   }, []);
-  (0, import_react24.useLayoutEffect)(() => {
+  (0, import_react25.useLayoutEffect)(() => {
     if (!isBrowser) return;
     const floatingEl = floatingRef.current;
     const rectInfo = target.rect;
@@ -3979,7 +4037,14 @@ var TourPopoverPortal = ({
           padding: FLOATING_OFFSET,
           alignment: autoAlignment
         })
-      ] : [(0, import_dom13.flip)({ padding: FLOATING_OFFSET, fallbackStrategy: "bestFit" })],
+      ] : [
+        (0, import_dom13.flip)({
+          padding: FLOATING_OFFSET,
+          fallbackStrategy: "bestFit",
+          crossAxis: true,
+          fallbackPlacements: ["bottom", "top", "right", "left"]
+        })
+      ],
       (0, import_dom13.shift)({ padding: FLOATING_OFFSET })
     ];
     const updatePosition = async () => {
@@ -4024,9 +4089,10 @@ var TourPopoverPortal = ({
       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 minVerticalSpaceNeeded = floatingBox.height + FLOATING_OFFSET * 2;
+      const minHorizontalSpaceNeeded = floatingBox.width + FLOATING_OFFSET * 2;
+      const hasVerticalSpace = spaceAbove >= minVerticalSpaceNeeded || spaceBelow >= minVerticalSpaceNeeded;
+      const hasHorizontalSpace = spaceLeft >= minHorizontalSpaceNeeded || spaceRight >= minHorizontalSpaceNeeded;
       const targetNearlyFillsViewport = !target.isScreen && !hasVerticalSpace && !hasHorizontalSpace;
       const shouldDock = intersectsViewport && (targetNearlyFillsViewport || maxOverflow > overflowThreshold);
       if (shouldDock) {
@@ -4075,7 +4141,7 @@ var TourPopoverPortal = ({
     target.status,
     target.stepId
   ]);
-  (0, import_react24.useLayoutEffect)(() => {
+  (0, import_react25.useLayoutEffect)(() => {
     if (layoutMode !== "manual" || !dragPosition) return;
     setFloatingPosition({
       top: dragPosition.top,
@@ -4160,7 +4226,7 @@ var TourPopoverPortal = ({
     }
     event.preventDefault();
   };
-  (0, import_react24.useEffect)(() => endDrag, []);
+  (0, import_react25.useEffect)(() => 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;
@@ -4252,7 +4318,7 @@ var TourPopoverPortal = ({
 };
 
 // src/components/TourFocusManager.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_react_dom3 = require("react-dom");
 
 // src/utils/focus.ts
@@ -4329,18 +4395,18 @@ var TourFocusManager = ({
   highlightRect,
   guardElementFocusRing
 }) => {
-  const previousFocusRef = (0, import_react25.useRef)(null);
-  const guardNodesRef = (0, import_react25.useRef)({
+  const previousFocusRef = (0, import_react26.useRef)(null);
+  const guardNodesRef = (0, import_react26.useRef)({
     "target-start": null,
     "target-end": null,
     "popover-start": null,
     "popover-end": null
   });
-  const lastTabDirectionRef = (0, import_react25.useRef)("forward");
-  const suppressGuardHopRef = (0, import_react25.useRef)(null);
-  const [targetRingActive, setTargetRingActive] = (0, import_react25.useState)(false);
-  const [popoverRingActive, setPopoverRingActive] = (0, import_react25.useState)(false);
-  const [popoverRect, setPopoverRect] = (0, import_react25.useState)(null);
+  const lastTabDirectionRef = (0, import_react26.useRef)("forward");
+  const suppressGuardHopRef = (0, import_react26.useRef)(null);
+  const [targetRingActive, setTargetRingActive] = (0, import_react26.useState)(false);
+  const [popoverRingActive, setPopoverRingActive] = (0, import_react26.useState)(false);
+  const [popoverRect, setPopoverRect] = (0, import_react26.useState)(null);
   const restoreFocus = () => {
     const previous = previousFocusRef.current;
     previousFocusRef.current = null;
@@ -4350,7 +4416,7 @@ var TourFocusManager = ({
       });
     }
   };
-  (0, import_react25.useLayoutEffect)(() => {
+  (0, import_react26.useLayoutEffect)(() => {
     if (!isBrowser) return;
     if (!active) {
       restoreFocus();
@@ -4366,7 +4432,7 @@ var TourFocusManager = ({
       restoreFocus();
     };
   }, [active, popoverNode, target.element]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!isBrowser) return;
     if (!active) return;
     const doc = popoverNode?.ownerDocument ?? target.element?.ownerDocument ?? document;
@@ -4560,7 +4626,7 @@ var TourFocusManager = ({
     target.stepId,
     target.visibility
   ]);
-  (0, import_react25.useLayoutEffect)(() => {
+  (0, import_react26.useLayoutEffect)(() => {
     if (popoverRingActive && popoverNode) {
       setPopoverRect(popoverNode.getBoundingClientRect());
     } else {
@@ -4616,7 +4682,7 @@ var TourFocusManager = ({
 };
 
 // src/motion/useHudMotion.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 var DEFAULT_HIGHLIGHT_TRANSITION2 = {
   duration: 0.35,
   ease: "easeOut",
@@ -4643,7 +4709,7 @@ var DEFAULT_POPOVER_CONTENT_TRANSITION2 = {
 };
 var useHudMotion = () => {
   const adapter = useAnimationAdapter();
-  return (0, import_react26.useMemo)(() => {
+  return (0, import_react27.useMemo)(() => {
     const components = {
       ...adapter.components
     };