@flowsterix/react 0.9.0 → 0.10.1

package/dist/index.cjs

@@ -21,12 +21,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AnimationAdapterProvider: () => AnimationAdapterProvider,
+  DialogRegistryProvider: () => DialogRegistryProvider,
   OverlayBackdrop: () => OverlayBackdrop,
   TourFocusManager: () => TourFocusManager,
   TourPopoverPortal: () => TourPopoverPortal,
   TourProvider: () => TourProvider,
   createPathString: () => createPathString,
-  createRadixDialogHelpers: () => createRadixDialogHelpers,
   createWaitForPredicateController: () => createWaitForPredicateController,
   defaultAnimationAdapter: () => defaultAnimationAdapter,
   defaultLabels: () => defaultLabels,
@@ -38,6 +38,8 @@ __export(index_exports, {
   useAnimationAdapter: () => useAnimationAdapter,
   useBodyScrollLock: () => useBodyScrollLock,
   useDelayAdvance: () => useDelayAdvance,
+  useDialogRegistry: () => useDialogRegistry,
+  useDialogRegistryOptional: () => useDialogRegistryOptional,
   useHiddenTargetFallback: () => useHiddenTargetFallback,
   useHudDescription: () => useHudDescription,
   useHudMotion: () => useHudMotion,
@@ -46,6 +48,7 @@ __export(index_exports, {
   useHudTargetIssue: () => useHudTargetIssue,
   usePreferredAnimationAdapter: () => usePreferredAnimationAdapter,
   useRadixDialogAdapter: () => useRadixDialogAdapter,
+  useRadixTourDialog: () => useRadixTourDialog,
   useTour: () => useTour,
   useTourControls: () => useTourControls,
   useTourEvents: () => useTourEvents,
@@ -61,7 +64,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/context.tsx
 var import_core = require("@flowsterix/core");
-var import_react4 = require("react");
+var import_react6 = require("react");
 
 // src/labels.ts
 var import_react = require("react");
@@ -92,20 +95,166 @@ function useTourLabels() {
   return (0, import_react.useContext)(LabelsContext);
 }
 
-// src/motion/animationAdapter.tsx
-var import_react2 = require("motion/react");
-var import_react3 = require("react");
+// src/dialog/DialogRegistryContext.tsx
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var DialogRegistryContext = (0, import_react2.createContext)(void 0);
+var DialogRegistryProvider = ({ children }) => {
+  const controllersRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  const register = (0, import_react2.useCallback)(
+    (dialogId, controller) => {
+      controllersRef.current.set(dialogId, controller);
+    },
+    []
+  );
+  const unregister = (0, import_react2.useCallback)((dialogId) => {
+    controllersRef.current.delete(dialogId);
+  }, []);
+  const getController = (0, import_react2.useCallback)((dialogId) => {
+    return controllersRef.current.get(dialogId);
+  }, []);
+  const isRegistered = (0, import_react2.useCallback)((dialogId) => {
+    return controllersRef.current.has(dialogId);
+  }, []);
+  const value = (0, import_react2.useMemo)(
+    () => ({
+      register,
+      unregister,
+      getController,
+      isRegistered
+    }),
+    [register, unregister, getController, isRegistered]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogRegistryContext.Provider, { value, children });
+};
+var useDialogRegistry = () => {
+  const context = (0, import_react2.useContext)(DialogRegistryContext);
+  if (!context) {
+    throw new Error(
+      "useDialogRegistry must be used within a DialogRegistryProvider"
+    );
+  }
+  return context;
+};
+var useDialogRegistryOptional = () => {
+  return (0, import_react2.useContext)(DialogRegistryContext);
+};
+
+// src/hooks/useDialogAutomation.ts
+var import_react3 = require("react");
+var resolveAutoOpen = (config) => {
+  if (!config) return { onEnter: true, onResume: true };
+  const { autoOpen } = config;
+  if (autoOpen === false) return { onEnter: false, onResume: false };
+  if (autoOpen === true || autoOpen === void 0) {
+    return { onEnter: true, onResume: true };
+  }
+  return {
+    onEnter: autoOpen.onEnter ?? true,
+    onResume: autoOpen.onResume ?? true
+  };
+};
+var useDialogAutomation = (params) => {
+  const { flow, state, events, registry, onDialogNotMounted } = params;
+  const previousDialogIdRef = (0, import_react3.useRef)(void 0);
+  (0, import_react3.useEffect)(() => {
+    if (!events || !flow || !registry) return;
+    const unsubscribeEnter = events.on("stepEnter", (payload) => {
+      const step = payload.currentStep;
+      const dialogId = step.dialogId;
+      const previousDialogId = previousDialogIdRef.current;
+      if (previousDialogId && previousDialogId !== dialogId && flow.dialogs?.[previousDialogId]) {
+        const config = flow.dialogs[previousDialogId];
+        const autoClose = config.autoClose ?? "differentDialog";
+        if (autoClose === "always" || autoClose === "differentDialog") {
+          const controller = registry.getController(previousDialogId);
+          if (controller) {
+            requestAnimationFrame(() => {
+              controller.close();
+            });
+          }
+        }
+      }
+      if (dialogId && flow.dialogs?.[dialogId]) {
+        const config = flow.dialogs[dialogId];
+        const autoOpenConfig = resolveAutoOpen(config);
+        const isResume = payload.reason === "resume";
+        const shouldAutoOpen = isResume ? autoOpenConfig.onResume : autoOpenConfig.onEnter;
+        if (shouldAutoOpen) {
+          const controller = registry.getController(dialogId);
+          if (controller) {
+            requestAnimationFrame(() => {
+              controller.open();
+            });
+          } else if (onDialogNotMounted) {
+            onDialogNotMounted(dialogId, step.id);
+          }
+        }
+      }
+      previousDialogIdRef.current = dialogId;
+    });
+    const unsubscribeExit = events.on("stepExit", (payload) => {
+      const step = payload.previousStep;
+      const dialogId = step.dialogId;
+      const nextStep = payload.currentStep;
+      if (nextStep?.dialogId === dialogId) return;
+      if (dialogId && flow.dialogs?.[dialogId]) {
+        const config = flow.dialogs[dialogId];
+        const autoClose = config.autoClose ?? "differentDialog";
+        if (autoClose === "never") return;
+        const controller = registry.getController(dialogId);
+        if (controller) {
+          requestAnimationFrame(() => {
+            controller.close();
+          });
+        }
+      }
+    });
+    const handleFlowEnd = () => {
+      const dialogId = previousDialogIdRef.current;
+      if (dialogId && flow.dialogs?.[dialogId]) {
+        const config = flow.dialogs[dialogId];
+        const autoClose = config.autoClose ?? "differentDialog";
+        if (autoClose !== "never") {
+          const controller = registry.getController(dialogId);
+          controller?.close();
+        }
+      }
+      previousDialogIdRef.current = void 0;
+    };
+    const unsubscribePause = events.on("flowPause", handleFlowEnd);
+    const unsubscribeCancel = events.on("flowCancel", handleFlowEnd);
+    const unsubscribeComplete = events.on("flowComplete", handleFlowEnd);
+    return () => {
+      unsubscribeEnter();
+      unsubscribeExit();
+      unsubscribePause();
+      unsubscribeCancel();
+      unsubscribeComplete();
+    };
+  }, [events, flow, registry, onDialogNotMounted]);
+  (0, import_react3.useEffect)(() => {
+    if (!flow || !state || state.status !== "running") return;
+    if (state.stepIndex < 0 || state.stepIndex >= flow.steps.length) return;
+    const currentStep = flow.steps[state.stepIndex];
+    previousDialogIdRef.current = currentStep.dialogId;
+  }, [flow, state]);
+};
+
+// src/motion/animationAdapter.tsx
+var import_react4 = require("motion/react");
+var import_react5 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var defaultAdapter = {
   components: {
-    MotionDiv: import_react2.motion.div,
-    MotionSection: import_react2.motion.section,
-    MotionSvg: import_react2.motion.svg,
-    MotionDefs: import_react2.motion.defs,
-    MotionMask: import_react2.motion.mask,
-    MotionRect: import_react2.motion.rect,
-    MotionSpan: import_react2.motion.span,
-    MotionButton: import_react2.motion.button
+    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
   },
   transitions: {
     overlayHighlight: {
@@ -138,16 +287,16 @@ var defaultAdapter = {
     }
   }
 };
-var AnimationAdapterContext = (0, import_react3.createContext)(defaultAdapter);
+var AnimationAdapterContext = (0, import_react5.createContext)(defaultAdapter);
 var AnimationAdapterProvider = ({
   adapter,
   children
 }) => {
-  const value = (0, import_react3.useMemo)(() => adapter ?? defaultAdapter, [adapter]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimationAdapterContext.Provider, { value, children });
+  const value = (0, import_react5.useMemo)(() => adapter ?? defaultAdapter, [adapter]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AnimationAdapterContext.Provider, { value, children });
 };
 var useAnimationAdapter = () => {
-  return (0, import_react3.useContext)(AnimationAdapterContext);
+  return (0, import_react5.useContext)(AnimationAdapterContext);
 };
 var defaultAnimationAdapter = defaultAdapter;
 var reducedMotionAnimationAdapter = {
@@ -187,11 +336,11 @@ var usePreferredAnimationAdapter = (options) => {
     reducedMotionAdapter: reducedOption = reducedMotionAnimationAdapter,
     enabled = true
   } = options ?? {};
-  const [prefersReduced, setPrefersReduced] = (0, import_react3.useState)(() => {
+  const [prefersReduced, setPrefersReduced] = (0, import_react5.useState)(() => {
     if (!enabled || typeof window === "undefined") return false;
     return window.matchMedia(REDUCED_MOTION_QUERY).matches;
   });
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!enabled || typeof window === "undefined") return;
     const mediaQuery = window.matchMedia(REDUCED_MOTION_QUERY);
     const handleChange = (event) => {
@@ -439,11 +588,11 @@ var matchRoute = (params) => {
 };
 
 // src/context.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var TourContext = (0, import_react4.createContext)(void 0);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var TourContext = (0, import_react6.createContext)(void 0);
 var DEFAULT_STORAGE_PREFIX = "tour";
 var useFlowMap = (flows) => {
-  return (0, import_react4.useMemo)(() => {
+  return (0, import_react6.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const flow of flows) {
       map.set(flow.id, flow);
@@ -467,25 +616,25 @@ var TourProvider = ({
   labels: labelsProp,
   onVersionMismatch
 }) => {
-  const mergedLabels = (0, import_react4.useMemo)(
+  const mergedLabels = (0, import_react6.useMemo)(
     () => ({ ...defaultLabels, ...labelsProp }),
     [labelsProp]
   );
   const flowMap = useFlowMap(flows);
-  const storeRef = (0, import_react4.useRef)(null);
-  const unsubscribeRef = (0, import_react4.useRef)(null);
-  const stepHooksUnsubscribeRef = (0, import_react4.useRef)(null);
-  const fallbackStorageRef = (0, import_react4.useRef)(void 0);
-  const pendingResumeRef = (0, import_react4.useRef)(/* @__PURE__ */ new Set());
-  const autoStartRequestedRef = (0, import_react4.useRef)(null);
-  const [activeFlowId, setActiveFlowId] = (0, import_react4.useState)(null);
-  const [state, setState] = (0, import_react4.useState)(null);
-  const [events, setEvents] = (0, import_react4.useState)(
+  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)(
     null
   );
-  const [debugEnabled, setDebugEnabled] = (0, import_react4.useState)(defaultDebug);
-  const [delayInfo, setDelayInfo] = (0, import_react4.useState)(null);
-  const teardownStore = (0, import_react4.useCallback)(() => {
+  const [debugEnabled, setDebugEnabled] = (0, import_react6.useState)(defaultDebug);
+  const [delayInfo, setDelayInfo] = (0, import_react6.useState)(null);
+  const teardownStore = (0, import_react6.useCallback)(() => {
     unsubscribeRef.current?.();
     unsubscribeRef.current = null;
     stepHooksUnsubscribeRef.current?.();
@@ -495,7 +644,7 @@ var TourProvider = ({
     setDelayInfo(null);
     pendingResumeRef.current.clear();
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     return () => {
       teardownStore();
       setState(null);
@@ -503,7 +652,7 @@ var TourProvider = ({
       setActiveFlowId(null);
     };
   }, [teardownStore]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!activeFlowId) return;
     const definition = flowMap.get(activeFlowId);
     if (!definition) {
@@ -526,7 +675,7 @@ var TourProvider = ({
       console.warn(`[tour][step] ${phase} hook failed`, error);
     }
   };
-  const ensureStore = (0, import_react4.useCallback)(
+  const ensureStore = (0, import_react6.useCallback)(
     (flowId) => {
       const existing = storeRef.current;
       if (existing && existing.definition.id === flowId) {
@@ -585,7 +734,7 @@ var TourProvider = ({
       teardownStore
     ]
   );
-  const getActiveStore = (0, import_react4.useCallback)(() => {
+  const getActiveStore = (0, import_react6.useCallback)(() => {
     const store = storeRef.current;
     if (!store) {
       throw new Error(
@@ -597,7 +746,7 @@ var TourProvider = ({
   const isPromiseLike2 = (value) => {
     return typeof value === "object" && value !== null && typeof value.then === "function";
   };
-  const invokeStepHook = (0, import_react4.useCallback)(
+  const invokeStepHook = (0, import_react6.useCallback)(
     async (hook, context, phase) => {
       if (!hook) return;
       try {
@@ -611,7 +760,7 @@ var TourProvider = ({
     },
     []
   );
-  const runResumeHooks = (0, import_react4.useCallback)(
+  const runResumeHooks = (0, import_react6.useCallback)(
     async (definition, flowState, strategy) => {
       if (flowState.status !== "running") return;
       if (strategy === "current") {
@@ -651,13 +800,13 @@ var TourProvider = ({
     },
     [invokeStepHook]
   );
-  const resolveResumeStrategy = (0, import_react4.useCallback)(
+  const resolveResumeStrategy = (0, import_react6.useCallback)(
     (definition, options) => {
       return options?.resumeStrategy ?? definition.resumeStrategy ?? "chain";
     },
     []
   );
-  const startFlow = (0, import_react4.useCallback)(
+  const startFlow = (0, import_react6.useCallback)(
     (flowId, options) => {
       const store = ensureStore(flowId);
       const previousState = store.getState();
@@ -686,8 +835,8 @@ var TourProvider = ({
     },
     [ensureStore, resolveResumeStrategy, runResumeHooks]
   );
-  const [eligibleFlows, setEligibleFlows] = (0, import_react4.useState)([]);
-  (0, import_react4.useEffect)(() => {
+  const [eligibleFlows, setEligibleFlows] = (0, import_react6.useState)([]);
+  (0, import_react6.useEffect)(() => {
     const autoStartFlows = flows.filter((f) => f.autoStart);
     if (autoStartFlows.length === 0) {
       setEligibleFlows([]);
@@ -751,7 +900,7 @@ var TourProvider = ({
       cancelled = true;
     };
   }, [flows, storageAdapter, storageNamespace]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (eligibleFlows.length === 0) {
       autoStartRequestedRef.current = null;
       return;
@@ -786,14 +935,14 @@ var TourProvider = ({
       }
     };
   }, [activeFlowId, eligibleFlows, startFlow]);
-  const next = (0, import_react4.useCallback)(() => getActiveStore().next(), [getActiveStore]);
-  const back = (0, import_react4.useCallback)(() => getActiveStore().back(), [getActiveStore]);
-  const goToStep = (0, import_react4.useCallback)(
+  const next = (0, import_react6.useCallback)(() => getActiveStore().next(), [getActiveStore]);
+  const back = (0, import_react6.useCallback)(() => getActiveStore().back(), [getActiveStore]);
+  const goToStep = (0, import_react6.useCallback)(
     (step) => getActiveStore().goToStep(step),
     [getActiveStore]
   );
-  const pause = (0, import_react4.useCallback)(() => getActiveStore().pause(), [getActiveStore]);
-  const resume = (0, import_react4.useCallback)(() => {
+  const pause = (0, import_react6.useCallback)(() => getActiveStore().pause(), [getActiveStore]);
+  const resume = (0, import_react6.useCallback)(() => {
     const store = getActiveStore();
     const previousState = store.getState();
     if (previousState.status === "paused") {
@@ -811,27 +960,31 @@ var TourProvider = ({
     }
     return result;
   }, [getActiveStore, resolveResumeStrategy, runResumeHooks]);
-  const cancel = (0, import_react4.useCallback)(
+  const cancel = (0, import_react6.useCallback)(
     (reason) => getActiveStore().cancel(reason),
     [getActiveStore]
   );
-  const complete = (0, import_react4.useCallback)(
+  const complete = (0, import_react6.useCallback)(
     () => getActiveStore().complete(),
     [getActiveStore]
   );
-  const advanceStep = (0, import_react4.useCallback)(
+  const advanceStep = (0, import_react6.useCallback)(
     (stepId) => getActiveStore().advanceStep(stepId),
     [getActiveStore]
   );
-  const toggleDebug = (0, import_react4.useCallback)(() => {
+  const toggleDebug = (0, import_react6.useCallback)(() => {
     setDebugEnabled((previous) => !previous);
   }, []);
-  const activeStep = (0, import_react4.useMemo)(() => {
+  const activeStep = (0, import_react6.useMemo)(() => {
     if (!state || !storeRef.current) return null;
     if (state.stepIndex < 0) return null;
     return storeRef.current.definition.steps[state.stepIndex] ?? null;
   }, [state]);
-  (0, import_react4.useEffect)(() => {
+  const activeDialogConfig = (0, import_react6.useMemo)(() => {
+    if (!activeStep?.dialogId || !storeRef.current) return void 0;
+    return storeRef.current.definition.dialogs?.[activeStep.dialogId];
+  }, [activeStep]);
+  (0, import_react6.useEffect)(() => {
     if (!activeFlowId) return;
     if (!pendingResumeRef.current.has(activeFlowId)) return;
     if (!state || state.status !== "running") return;
@@ -846,12 +999,13 @@ var TourProvider = ({
     pendingResumeRef.current.delete(activeFlowId);
     void runResumeHooks(definition, state, resumeStrategy);
   }, [activeFlowId, flowMap, resolveResumeStrategy, runResumeHooks, state]);
-  const contextValue = (0, import_react4.useMemo)(
+  const contextValue = (0, import_react6.useMemo)(
     () => ({
       flows: flowMap,
       activeFlowId,
       state,
       activeStep,
+      activeDialogConfig,
       startFlow,
       next,
       back,
@@ -873,6 +1027,7 @@ var TourProvider = ({
     [
       activeFlowId,
       activeStep,
+      activeDialogConfig,
       advanceStep,
       back,
       cancel,
@@ -899,10 +1054,41 @@ var TourProvider = ({
     reducedMotionAdapter,
     enabled: autoDetectReducedMotion
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AnimationAdapterProvider, { adapter: resolvedAnimationAdapter, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LabelsProvider, { value: mergedLabels, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TourContext.Provider, { value: contextValue, children }) }) });
+  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: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      DialogAutomationBridge,
+      {
+        flow: activeFlowId ? flowMap.get(activeFlowId) : void 0,
+        state,
+        events
+      }
+    ),
+    children
+  ] }) }) }) });
+};
+var DialogAutomationBridge = ({
+  flow,
+  state,
+  events
+}) => {
+  const registry = useDialogRegistryOptional();
+  useDialogAutomation({
+    flow,
+    state,
+    events,
+    registry,
+    onDialogNotMounted: (dialogId, stepId) => {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `[tour] Step "${stepId}" references dialogId "${dialogId}" but no dialog is mounted with that ID. Ensure your dialog uses useTourDialog({ dialogId: "${dialogId}" }).`
+        );
+      }
+    }
+  });
+  return null;
 };
 var useTour = () => {
-  const context = (0, import_react4.useContext)(TourContext);
+  const context = (0, import_react6.useContext)(TourContext);
   if (!context) {
     throw new Error("useTour must be used within a TourProvider");
   }
@@ -910,14 +1096,14 @@ var useTour = () => {
 };
 var useTourEvents = (event, handler) => {
   const { events } = useTour();
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!events) return;
     return events.on(event, handler);
   }, [event, events, handler]);
 };
 
 // src/hooks/useTourTarget.ts
-var import_react5 = require("react");
+var import_react7 = require("react");
 
 // src/hooks/scrollMargin.ts
 var DEFAULT_SCROLL_MARGIN = 16;
@@ -1220,12 +1406,12 @@ var resolveStepTarget = (target) => {
 };
 var useTourTarget = () => {
   const { activeStep, state, activeFlowId, flows } = useTour();
-  const [targetInfo, setTargetInfo] = (0, import_react5.useState)(INITIAL_TARGET_INFO);
-  const autoScrollStateRef = (0, import_react5.useRef)({ stepId: null, checks: 0, stalledChecks: 0, done: false, lastRect: null });
-  const autoScrollRafRef = (0, import_react5.useRef)(null);
-  const autoScrollTimeoutRef = (0, import_react5.useRef)(null);
-  const lastRectRef = (0, import_react5.useRef)(null);
-  const initialScrollStepRef = (0, import_react5.useRef)(null);
+  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 cancelAutoScrollLoop = () => {
     if (!isBrowser) return;
     if (autoScrollTimeoutRef.current !== null) {
@@ -1237,7 +1423,7 @@ var useTourTarget = () => {
       autoScrollRafRef.current = null;
     }
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!activeStep) {
       initialScrollStepRef.current = null;
     }
@@ -1245,7 +1431,7 @@ var useTourTarget = () => {
       initialScrollStepRef.current = null;
     };
   }, [activeStep?.id]);
-  (0, import_react5.useLayoutEffect)(() => {
+  (0, import_react7.useLayoutEffect)(() => {
     if (!isBrowser) return;
     if (!activeStep) return;
     if (targetInfo.status !== "ready") return;
@@ -1277,7 +1463,7 @@ var useTourTarget = () => {
     targetInfo.status,
     targetInfo.rectSource
   ]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!activeStep || !state || state.status !== "running") {
       setTargetInfo(INITIAL_TARGET_INFO);
       autoScrollStateRef.current = {
@@ -1600,7 +1786,7 @@ var useTourTarget = () => {
       waitForPredicateController = null;
     };
   }, [activeStep, activeFlowId, flows, state]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!isBrowser) return;
     if (!activeStep) {
       cancelAutoScrollLoop();
@@ -1681,10 +1867,10 @@ var useTourTarget = () => {
 };
 
 // src/hooks/useHudState.ts
-var import_react10 = require("react");
+var import_react12 = require("react");
 
 // src/hooks/useAdvanceRules.ts
-var import_react6 = require("react");
+var import_react8 = require("react");
 var DEFAULT_POLL_MS2 = 250;
 var isListenerTarget = (value) => {
   return !!value && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function";
@@ -1723,7 +1909,7 @@ var useAdvanceRules = (target) => {
     complete,
     setDelayInfo
   } = useTour();
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!isBrowser) return;
     if (!state || state.status !== "running") return;
     if (!activeStep) return;
@@ -1894,7 +2080,7 @@ var useAdvanceRules = (target) => {
 };
 
 // src/hooks/useHiddenTargetFallback.ts
-var import_react7 = require("react");
+var import_react9 = require("react");
 var DEFAULT_DELAY_MS = 900;
 var DEFAULT_GRACE_PERIOD_MS = 400;
 var useHiddenTargetFallback = ({
@@ -1903,11 +2089,11 @@ var useHiddenTargetFallback = ({
   viewportRect,
   onSkip
 }) => {
-  const [usingScreenFallback, setUsingScreenFallback] = (0, import_react7.useState)(false);
-  const [isInGracePeriod, setIsInGracePeriod] = (0, import_react7.useState)(false);
-  const timeoutRef = (0, import_react7.useRef)(null);
-  const graceTimeoutRef = (0, import_react7.useRef)(null);
-  const skipTriggeredRef = (0, import_react7.useRef)(false);
+  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 hiddenMode = step?.targetBehavior?.hidden ?? "screen";
   const hiddenDelayMs = Math.max(
     0,
@@ -1925,7 +2111,7 @@ var useHiddenTargetFallback = ({
       graceTimeoutRef.current = null;
     }
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     skipTriggeredRef.current = false;
     setUsingScreenFallback(false);
     setIsInGracePeriod(false);
@@ -1936,7 +2122,7 @@ var useHiddenTargetFallback = ({
       clearGraceTimeout();
     };
   }, [step?.id]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!isBrowser) return void 0;
     if (!step) return void 0;
     clearPendingTimeout();
@@ -1982,7 +2168,7 @@ var useHiddenTargetFallback = ({
     hiddenDelayMs,
     onSkip
   ]);
-  const resolvedTarget = (0, import_react7.useMemo)(() => {
+  const resolvedTarget = (0, import_react9.useMemo)(() => {
     if (!usingScreenFallback) {
       return target;
     }
@@ -2004,7 +2190,7 @@ var useHiddenTargetFallback = ({
 };
 
 // src/hooks/useRouteMismatch.ts
-var import_react8 = require("react");
+var import_react10 = require("react");
 
 // src/router/utils.ts
 var ensurePrefix = (value, prefix) => value.startsWith(prefix) ? value : `${prefix}${value}`;
@@ -2051,8 +2237,8 @@ var createPathString = (pathname, search, hash) => {
 
 // src/hooks/useRouteMismatch.ts
 var useRouteMismatch = (step) => {
-  const [currentPath, setCurrentPath] = (0, import_react8.useState)(() => getCurrentRoutePath());
-  (0, import_react8.useEffect)(() => {
+  const [currentPath, setCurrentPath] = (0, import_react10.useState)(() => getCurrentRoutePath());
+  (0, import_react10.useEffect)(() => {
     return subscribeToRouteChanges((path) => {
       setCurrentPath(path);
     });
@@ -2067,13 +2253,13 @@ var useRouteMismatch = (step) => {
 };
 
 // src/hooks/useViewportRect.ts
-var import_react9 = require("react");
+var import_react11 = require("react");
 var useViewportRect = () => {
-  const [viewport, setViewport] = (0, import_react9.useState)(
+  const [viewport, setViewport] = (0, import_react11.useState)(
     () => getViewportRect()
   );
-  const rafRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const rafRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     if (!isBrowser) return;
     const updateViewport = () => {
       rafRef.current = null;
@@ -2115,12 +2301,12 @@ var normalizeFlowFilter = (value) => {
 };
 var useHudState = (options = {}) => {
   const { flowId } = options;
-  const flowFilter = (0, import_react10.useMemo)(() => normalizeFlowFilter(flowId), [flowId]);
+  const flowFilter = (0, import_react12.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_react10.useMemo)(() => {
+  const matchesFlowFilter = (0, import_react12.useMemo)(() => {
     if (!flowFilter || flowFilter.length === 0) return true;
     if (!activeFlowId) return false;
     return flowFilter.includes(activeFlowId);
@@ -2128,15 +2314,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_react10.useState)(
+  const [shouldRender, setShouldRender] = (0, import_react12.useState)(
     Boolean(runningStep)
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (runningStep) {
       setShouldRender(true);
     }
   }, [runningStep?.id]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!shouldRender) return;
     if (runningStep) return;
     if (target.status !== "idle") return;
@@ -2148,19 +2334,19 @@ var useHudState = (options = {}) => {
     };
   }, [runningStep, shouldRender, target.status]);
   const { isRouteMismatch, currentPath } = useRouteMismatch(activeStep);
-  const pausedForMissingTargetRef = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => {
+  const pausedForMissingTargetRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     if (!isRouteMismatch) return;
     if (!runningState || runningState.status !== "running") return;
     pause();
   }, [isRouteMismatch, runningState, pause]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (isRouteMismatch) return;
     if (pausedForMissingTargetRef.current !== null) return;
     if (!state || state.status !== "paused") return;
     resume();
   }, [isRouteMismatch, state, resume]);
-  const skipHiddenStep = (0, import_react10.useCallback)(() => {
+  const skipHiddenStep = (0, import_react12.useCallback)(() => {
     if (!runningState || runningState.status !== "running") return;
     if (!activeFlowId) return;
     const flow = flows.get(activeFlowId);
@@ -2178,7 +2364,7 @@ var useHudState = (options = {}) => {
     viewportRect,
     onSkip: skipHiddenStep
   });
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (isRouteMismatch) return;
     if (activeStep?.route !== void 0) return;
     if (isInGracePeriod) return;
@@ -2197,14 +2383,14 @@ var useHudState = (options = {}) => {
     currentPath,
     pause
   ]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.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_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     pausedForMissingTargetRef.current = null;
   }, [activeStep?.id]);
   const canRenderStep = Boolean(runningStep && runningState);
@@ -2229,24 +2415,24 @@ var useHudState = (options = {}) => {
 };
 
 // src/hooks/useHudDescription.ts
-var import_react11 = require("react");
+var import_react13 = 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_react11.useMemo)(() => {
+  const targetDescription = (0, import_react13.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_react11.useMemo)(() => {
+  const descriptionId = (0, import_react13.useMemo)(() => {
     if (!step || !targetDescription) return void 0;
     return `tour-step-${sanitizeForId(step.id)}-description`;
   }, [step, targetDescription]);
-  const combinedAriaDescribedBy = (0, import_react11.useMemo)(() => {
+  const combinedAriaDescribedBy = (0, import_react13.useMemo)(() => {
     const parts = [fallbackAriaDescribedBy, descriptionId].filter(Boolean);
     return parts.length > 0 ? parts.join(" ") : void 0;
   }, [descriptionId, fallbackAriaDescribedBy]);
@@ -2258,10 +2444,10 @@ var useHudDescription = (options) => {
 };
 
 // src/hooks/useHudShortcuts.ts
-var import_react13 = require("react");
+var import_react15 = require("react");
 
 // src/hooks/useTourControls.ts
-var import_react12 = require("react");
+var import_react14 = require("react");
 var hasManualAdvance = (rules) => rules.some((rule) => rule.type === "manual");
 var didPreviousAdvanceViaRoute = (rules) => rules.some((rule) => rule.type === "route");
 var useTourControls = () => {
@@ -2276,7 +2462,7 @@ var useTourControls = () => {
     flows,
     activeStep
   } = tour;
-  const computed = (0, import_react12.useMemo)(() => {
+  const computed = (0, import_react14.useMemo)(() => {
     if (!state || state.status !== "running" || !activeStep) {
       return {
         isActive: false,
@@ -2325,11 +2511,11 @@ var useTourControls = () => {
   } = computed;
   const canGoBack = showBackButton && !backDisabled;
   const canGoNext = showNextButton && !nextDisabled;
-  const goBack = (0, import_react12.useCallback)(() => {
+  const goBack = (0, import_react14.useCallback)(() => {
     if (!canGoBack) return;
     back();
   }, [back, canGoBack]);
-  const goNext = (0, import_react12.useCallback)(() => {
+  const goNext = (0, import_react14.useCallback)(() => {
     if (!canGoNext) return;
     if (isLast) {
       complete();
@@ -2337,7 +2523,7 @@ var useTourControls = () => {
       next();
     }
   }, [canGoNext, complete, isLast, next]);
-  return (0, import_react12.useMemo)(
+  return (0, import_react14.useMemo)(
     () => ({
       showBackButton,
       backDisabled,
@@ -2382,7 +2568,7 @@ var useHudShortcuts = (target, options) => {
   const escapeEnabled = options?.escape ?? true;
   const { state } = useTour();
   const { cancel, canGoBack, goBack, canGoNext, goNext, isActive } = useTourControls();
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!isBrowser) return void 0;
     if (!enabled) return void 0;
     if (!target) return void 0;
@@ -2446,10 +2632,10 @@ var useHudShortcuts = (target, options) => {
 };
 
 // src/hooks/useTourHud.ts
-var import_react16 = require("react");
+var import_react18 = require("react");
 
 // src/hooks/useBodyScrollLock.ts
-var import_react14 = require("react");
+var import_react16 = require("react");
 var lockCount = 0;
 var previousOverflow = null;
 var acquireLock = () => {
@@ -2470,7 +2656,7 @@ var releaseLock = () => {
   }
 };
 var useBodyScrollLock = (enabled) => {
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!enabled) return;
     acquireLock();
     return () => {
@@ -2480,7 +2666,7 @@ var useBodyScrollLock = (enabled) => {
 };
 
 // src/hooks/useHudTargetIssue.ts
-var import_react15 = require("react");
+var import_react17 = require("react");
 var deriveTargetIssue = (params) => {
   const { target, labels } = params;
   if (target.isScreen) return null;
@@ -2513,12 +2699,12 @@ var deriveTargetIssue = (params) => {
 var useHudTargetIssue = (target, options) => {
   const labels = useTourLabels();
   const delayMs = Math.max(0, options?.delayMs ?? 500);
-  const [armed, setArmed] = (0, import_react15.useState)(false);
-  const rawIssue = (0, import_react15.useMemo)(
+  const [armed, setArmed] = (0, import_react17.useState)(false);
+  const rawIssue = (0, import_react17.useMemo)(
     () => deriveTargetIssue({ target, labels }),
     [target.isScreen, target.rectSource, target.status, target.visibility, labels]
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!rawIssue) {
       setArmed(false);
       return;
@@ -2552,7 +2738,7 @@ var useTourHud = (options = {}) => {
   const { backdropInteraction, lockBodyScroll } = useTour();
   const hudState = useHudState();
   const disableDefaultHud = hudState.hudRenderMode === "none";
-  const [popoverNode, setPopoverNode] = (0, import_react16.useState)(null);
+  const [popoverNode, setPopoverNode] = (0, import_react18.useState)(null);
   const popoverOptions = hudState.flowHudOptions?.popover;
   const description = useHudDescription({
     step: hudState.runningStep,
@@ -2576,7 +2762,7 @@ var useTourHud = (options = {}) => {
     radius: overlayRadius,
     interactionMode: hudState.flowHudOptions?.backdrop?.interaction ?? backdropInteraction
   };
-  const popover = (0, import_react16.useMemo)(() => {
+  const popover = (0, import_react18.useMemo)(() => {
     return {
       offset: popoverOptions?.offset ?? 32,
       role: popoverOptions?.role ?? "dialog",
@@ -2588,13 +2774,13 @@ var useTourHud = (options = {}) => {
       placement: hudState.runningStep?.placement
     };
   }, [hudState.runningStep?.placement, popoverOptions]);
-  const descriptionResult = (0, import_react16.useMemo)(() => {
+  const descriptionResult = (0, import_react18.useMemo)(() => {
     return {
       ...description,
       text: description.targetDescription
     };
   }, [description]);
-  const focusManager = (0, import_react16.useMemo)(
+  const focusManager = (0, import_react18.useMemo)(
     () => ({
       active: hudState.focusTrapActive,
       target: hudState.hudTarget,
@@ -2624,7 +2810,7 @@ var useTourHud = (options = {}) => {
 };
 
 // src/hooks/useTourOverlay.ts
-var import_react17 = require("react");
+var import_react19 = require("react");
 var DEFAULT_PADDING = 12;
 var DEFAULT_RADIUS = 12;
 var DEFAULT_EDGE_BUFFER = 0;
@@ -2637,9 +2823,9 @@ var useTourOverlay = (options) => {
     interactionMode = "passthrough",
     isInGracePeriod = false
   } = options;
-  const hasShownRef = (0, import_react17.useRef)(false);
-  const lastReadyTargetRef = (0, import_react17.useRef)(null);
-  (0, import_react17.useEffect)(() => {
+  const hasShownRef = (0, import_react19.useRef)(false);
+  const lastReadyTargetRef = (0, import_react19.useRef)(null);
+  (0, import_react19.useEffect)(() => {
     if (!isBrowser) return;
     if (target.status === "ready") {
       hasShownRef.current = true;
@@ -2689,15 +2875,15 @@ var useTourOverlay = (options) => {
     height: highlightHeight,
     radius: highlightRadius
   } : null;
-  const maskCapable = (0, import_react17.useMemo)(() => supportsMasking(), []);
+  const maskCapable = (0, import_react19.useMemo)(() => supportsMasking(), []);
   const isActive = target.status === "ready" || target.status === "resolving" && cachedTarget !== null || isInGracePeriod;
   const shouldMask = maskCapable && isActive;
-  const maskId = (0, import_react17.useMemo)(
+  const maskId = (0, import_react19.useMemo)(
     () => `tour-overlay-mask-${Math.random().toString(36).slice(2, 10)}`,
     []
   );
   const maskUrl = shouldMask ? `url(#${maskId})` : void 0;
-  const fallbackSegments = (0, import_react17.useMemo)(() => {
+  const fallbackSegments = (0, import_react19.useMemo)(() => {
     if (!isActive || shouldMask || !hasHighlightBounds || !highlightRect) {
       return null;
     }
@@ -2750,7 +2936,7 @@ var useTourOverlay = (options) => {
     viewport.height,
     viewport.width
   ]);
-  const blockerSegments = (0, import_react17.useMemo)(() => {
+  const blockerSegments = (0, import_react19.useMemo)(() => {
     if (interactionMode !== "block") {
       return null;
     }
@@ -2878,37 +3064,202 @@ var useRadixDialogAdapter = (options = {}) => {
 var waitForDom = () => new Promise(
   (resolve) => requestAnimationFrame(() => setTimeout(resolve, 0))
 );
-var createRadixDialogHelpers = (params) => {
-  const { contentSelector, triggerSelector } = params;
-  const isOpen = () => {
-    if (typeof document === "undefined") return false;
-    return document.querySelector(contentSelector) !== null;
-  };
-  const open = async () => {
-    if (typeof document === "undefined") return;
-    if (isOpen()) return;
-    await waitForDom();
-    if (isOpen()) return;
-    const trigger = document.querySelector(triggerSelector);
-    trigger?.click();
-    await waitForDom();
+
+// src/hooks/useRadixTourDialog.ts
+var import_react20 = require("react");
+var resolveAutoOpen2 = (config) => {
+  if (!config) return { onEnter: true, onResume: true };
+  const { autoOpen } = config;
+  if (autoOpen === false) return { onEnter: false, onResume: false };
+  if (autoOpen === true || autoOpen === void 0) {
+    return { onEnter: true, onResume: true };
+  }
+  return {
+    onEnter: autoOpen.onEnter ?? true,
+    onResume: autoOpen.onResume ?? true
   };
-  const close = async () => {
-    if (typeof document === "undefined") return;
-    if (!isOpen()) return;
-    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
-    await waitForDom();
+};
+var useRadixTourDialog = (params) => {
+  const { dialogId } = 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 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)(() => {
+    if (!isStepActive) return false;
+    return true;
+  }, [isStepActive]);
+  (0, import_react20.useEffect)(() => {
+    if (!events) return;
+    const unsubscribe = events.on("flowResume", () => {
+      isResumeRef.current = true;
+    });
+    return unsubscribe;
+  }, [events]);
+  (0, import_react20.useEffect)(() => {
+    if (!state || state.status !== "running") return;
+    if (!flow) return;
+    const currentStepIndex = state.stepIndex;
+    const previousStepIndex = lastStepIndexRef.current;
+    const wasResume = isResumeRef.current;
+    isResumeRef.current = false;
+    if (previousStepIndex === -1 && currentStepIndex >= 0) {
+      lastStepIndexRef.current = currentStepIndex;
+      if (isStepActive) {
+        const shouldAutoOpen = wasResume ? autoOpenConfig.onResume : autoOpenConfig.onEnter;
+        if (shouldAutoOpen) {
+          setInternalOpen(true);
+        }
+      }
+      return;
+    }
+    if (previousStepIndex === currentStepIndex) return;
+    lastStepIndexRef.current = currentStepIndex;
+    const previousStep = previousStepIndex >= 0 ? flow.steps[previousStepIndex] : void 0;
+    const wasActive = previousStep?.dialogId === dialogId;
+    if (isStepActive && !wasActive) {
+      const shouldAutoOpen = wasResume ? autoOpenConfig.onResume : autoOpenConfig.onEnter;
+      if (shouldAutoOpen) {
+        setInternalOpen(true);
+      }
+    }
+    if (wasActive && !isStepActive) {
+      if (autoClose === "always" || autoClose === "differentDialog") {
+        setInternalOpen(false);
+      }
+    }
+  }, [
+    state,
+    flow,
+    dialogId,
+    isStepActive,
+    autoOpenConfig.onEnter,
+    autoOpenConfig.onResume,
+    autoClose
+  ]);
+  (0, import_react20.useEffect)(() => {
+    if (!events) return;
+    const unsubscribeEnter = events.on("stepEnter", (payload) => {
+      const step = payload.currentStep;
+      if (step.dialogId !== dialogId) return;
+      const isResume = payload.reason === "resume";
+      const shouldAutoOpen = isResume ? autoOpenConfig.onResume : autoOpenConfig.onEnter;
+      if (shouldAutoOpen) {
+        requestAnimationFrame(() => {
+          setInternalOpen(true);
+        });
+      }
+    });
+    const unsubscribeExit = events.on("stepExit", (payload) => {
+      const step = payload.previousStep;
+      if (step.dialogId !== dialogId) return;
+      const nextStep = payload.currentStep;
+      if (nextStep?.dialogId === dialogId) {
+        return;
+      }
+      if (autoClose === "always" || autoClose === "differentDialog") {
+        requestAnimationFrame(() => {
+          setInternalOpen(false);
+        });
+      }
+    });
+    return () => {
+      unsubscribeEnter();
+      unsubscribeExit();
+    };
+  }, [events, dialogId, autoOpenConfig, autoClose]);
+  const handleDismiss = (0, import_react20.useCallback)(() => {
+    if (!dialogConfig) return;
+    setInternalOpen(false);
+    goToStep(dialogConfig.onDismissGoToStepId);
+  }, [dialogConfig, goToStep]);
+  const onOpenChange = (0, import_react20.useCallback)(
+    (open) => {
+      if (open) {
+        setInternalOpen(true);
+      } else {
+        if (isStepActive && dialogConfig) {
+          handleDismiss();
+        } else {
+          setInternalOpen(false);
+        }
+      }
+    },
+    [isStepActive, dialogConfig, handleDismiss]
+  );
+  (0, import_react20.useEffect)(() => {
+    if (!registry) return;
+    const controller = {
+      open: () => setInternalOpen(true),
+      close: () => setInternalOpen(false),
+      isOpen: () => internalOpen
+    };
+    registry.register(dialogId, controller);
+    return () => registry.unregister(dialogId);
+  }, [registry, dialogId, internalOpen]);
+  const preventDismiss = (0, import_react20.useCallback)(
+    (event) => {
+      if (suspendExternalFocusTrap) {
+        event.preventDefault();
+      }
+    },
+    [suspendExternalFocusTrap]
+  );
+  const handleEscapeKeyDown = (0, import_react20.useCallback)(
+    (event) => {
+      if (isStepActive && dialogConfig) {
+        event.preventDefault();
+        handleDismiss();
+      }
+    },
+    [isStepActive, dialogConfig, handleDismiss]
+  );
+  const handleInteractOutside = (0, import_react20.useCallback)(
+    (event) => {
+      if (suspendExternalFocusTrap) {
+        event.preventDefault();
+        return;
+      }
+      if (isStepActive && dialogConfig) {
+        event.preventDefault();
+        handleDismiss();
+      }
+    },
+    [suspendExternalFocusTrap, isStepActive, dialogConfig, handleDismiss]
+  );
+  return {
+    isStepActive,
+    shouldBeOpen,
+    onOpenChange,
+    dialogProps: {
+      open: internalOpen,
+      onOpenChange,
+      modal: !suspendExternalFocusTrap
+    },
+    contentProps: {
+      trapFocus: !suspendExternalFocusTrap,
+      onInteractOutside: handleInteractOutside,
+      onFocusOutside: preventDismiss,
+      onEscapeKeyDown: handleEscapeKeyDown
+    }
   };
-  return { isOpen, open, close };
 };
 
 // src/hooks/useDelayAdvance.ts
-var import_react18 = require("react");
+var import_react21 = 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_react18.useState)(() => getTimestamp());
-  (0, import_react18.useEffect)(() => {
+  const [now, setNow] = (0, import_react21.useState)(() => getTimestamp());
+  (0, import_react21.useEffect)(() => {
     if (!delayInfo) return;
     if (!activeStep || activeStep.id !== delayInfo.stepId) return;
     if (!state || state.status !== "running") return;
@@ -2925,12 +3276,12 @@ var useDelayAdvance = () => {
       }
     };
   }, [delayInfo, activeStep, state]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!delayInfo) {
       setNow(getTimestamp());
     }
   }, [delayInfo]);
-  return (0, import_react18.useMemo)(() => {
+  return (0, import_react21.useMemo)(() => {
     const matchingStep = !!delayInfo && !!activeStep && activeStep.id === delayInfo.stepId;
     const isRunning = matchingStep && state?.status === "running";
     if (!delayInfo) {
@@ -2983,10 +3334,10 @@ var useDelayAdvance = () => {
 };
 
 // src/components/OverlayBackdrop.tsx
-var import_react19 = require("react");
+var import_react22 = require("react");
 var import_react_dom = require("react-dom");
-var import_react20 = require("motion/react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react23 = require("motion/react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var styles = {
   root: {
     position: "fixed",
@@ -3072,9 +3423,9 @@ var OverlayBackdrop = ({
     viewport
   } = overlay;
   const hasHighlightBounds = Boolean(highlight.rect);
-  const prevScreenTargetRef = (0, import_react19.useRef)(null);
+  const prevScreenTargetRef = (0, import_react22.useRef)(null);
   const shouldSnapHighlight = prevScreenTargetRef.current === true && !highlight.isScreen && hasHighlightBounds;
-  (0, import_react19.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     prevScreenTargetRef.current = highlight.isScreen;
   }, [highlight.isScreen]);
   const resolvedBlur = typeof blurAmount === "number" ? `${blurAmount}px` : "0px";
@@ -3134,7 +3485,7 @@ var OverlayBackdrop = ({
     overlayStyle.backgroundColor = color;
   }
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       MotionDiv,
       {
         className: rootClassName,
@@ -3142,7 +3493,7 @@ var OverlayBackdrop = ({
         "aria-hidden": ariaHidden,
         "data-tour-overlay": "",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react20.AnimatePresence, { mode: "popLayout", children: shouldMask ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.AnimatePresence, { mode: "popLayout", children: shouldMask ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             MotionSvg,
             {
               width: "0",
@@ -3154,7 +3505,7 @@ var OverlayBackdrop = ({
               animate: { opacity: 1 },
               exit: { opacity: 0 },
               transition: overlayTransition,
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MotionDefs, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MotionDefs, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                 MotionMask,
                 {
                   id: maskId ?? void 0,
@@ -3166,7 +3517,7 @@ var OverlayBackdrop = ({
                   animate: { width: viewport.width, height: viewport.height },
                   transition: highlightTransition,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       MotionRect,
                       {
                         x: "0",
@@ -3182,7 +3533,7 @@ var OverlayBackdrop = ({
                         exit: { opacity: 0 }
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       MotionRect,
                       {
                         initial: false,
@@ -3201,7 +3552,7 @@ var OverlayBackdrop = ({
             },
             "tour-mask"
           ) : null }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react20.AnimatePresence, { mode: "popLayout", children: showBaseOverlay ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.AnimatePresence, { mode: "popLayout", children: showBaseOverlay ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             MotionDiv,
             {
               className: overlayClassName,
@@ -3229,7 +3580,7 @@ var OverlayBackdrop = ({
             },
             "tour-overlay"
           ) : null }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react20.AnimatePresence, { mode: "popLayout", children: fallbackSegments ? fallbackSegments.map((segment) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.AnimatePresence, { mode: "popLayout", children: fallbackSegments ? fallbackSegments.map((segment) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             MotionDiv,
             {
               className: segmentClassName,
@@ -3259,13 +3610,13 @@ var OverlayBackdrop = ({
             },
             `tour-overlay-fallback-${segment.key}`
           )) : null }),
-          showInteractionBlocker && blockerSegments ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          showInteractionBlocker && blockerSegments ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "div",
             {
               style: { ...styles.blockerContainer, zIndex },
               "data-tour-overlay-layer": "interaction-blocker",
               "aria-hidden": true,
-              children: blockerSegments.map((segment) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              children: blockerSegments.map((segment) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
                   style: {
@@ -3280,7 +3631,7 @@ var OverlayBackdrop = ({
               ))
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react20.AnimatePresence, { mode: "popLayout", children: showHighlightRing && isActive && hasHighlightBounds ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react23.AnimatePresence, { mode: "popLayout", children: showHighlightRing && isActive && hasHighlightBounds ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             MotionDiv,
             {
               className: ringClassName,
@@ -3311,7 +3662,7 @@ var OverlayBackdrop = ({
 };
 
 // src/components/TourPopoverPortal.tsx
-var import_react21 = require("react");
+var import_react24 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_dom13 = require("@floating-ui/dom");
 var FLOATING_OFFSET = 8;
@@ -3372,12 +3723,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_react21.useRef)(prefersMobileLayout);
-  (0, import_react21.useEffect)(() => {
+  const prefersMobileRef = (0, import_react24.useRef)(prefersMobileLayout);
+  (0, import_react24.useEffect)(() => {
     prefersMobileRef.current = prefersMobileLayout;
   }, [prefersMobileLayout]);
-  const lastReadyTargetRef = (0, import_react21.useRef)(null);
-  (0, import_react21.useEffect)(() => {
+  const lastReadyTargetRef = (0, import_react24.useRef)(null);
+  (0, import_react24.useEffect)(() => {
     if (target.status === "ready" && target.rect) {
       lastReadyTargetRef.current = {
         rect: { ...target.rect },
@@ -3393,7 +3744,7 @@ var TourPopoverPortal = ({
   const shouldHidePopover = !resolvedRect && !target.isScreen;
   const fallbackRect = resolvedRect ?? viewport;
   const fallbackIsScreen = resolvedIsScreen;
-  const [floatingSize, setFloatingSize] = (0, import_react21.useState)(null);
+  const [floatingSize, setFloatingSize] = (0, import_react24.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;
@@ -3404,7 +3755,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_react21.useMemo)(
+  const fallbackPosition = (0, import_react24.useMemo)(
     () => ({
       top,
       left,
@@ -3412,7 +3763,7 @@ var TourPopoverPortal = ({
     }),
     [fallbackTransform, left, top]
   );
-  const centerInitialPosition = (0, import_react21.useMemo)(
+  const centerInitialPosition = (0, import_react24.useMemo)(
     () => ({
       top: viewport.height / 2,
       left: viewport.width / 2,
@@ -3420,23 +3771,23 @@ var TourPopoverPortal = ({
     }),
     [viewport.height, viewport.width]
   );
-  const floatingRef = (0, import_react21.useRef)(null);
-  const cachedFloatingPositionRef = (0, import_react21.useRef)(null);
-  const appliedFloatingCacheRef = (0, import_react21.useRef)(null);
-  const deferredScreenSnapRef = (0, import_react21.useRef)(null);
-  const [layoutMode, setLayoutMode] = (0, import_react21.useState)(
+  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)(
     () => prefersMobileLayout ? "mobile" : "floating"
   );
-  const [floatingPosition, setFloatingPosition] = (0, import_react21.useState)(fallbackPosition);
-  const [dragPosition, setDragPosition] = (0, import_react21.useState)(null);
-  const [isDragging, setIsDragging] = (0, import_react21.useState)(false);
-  const dragStateRef = (0, import_react21.useRef)(null);
-  const overflowRetryRef = (0, import_react21.useRef)({
+  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)({
     stepId: null,
     attempts: 0
   });
-  const overflowRetryTimeoutRef = (0, import_react21.useRef)(null);
-  (0, import_react21.useLayoutEffect)(() => {
+  const overflowRetryTimeoutRef = (0, import_react24.useRef)(null);
+  (0, import_react24.useLayoutEffect)(() => {
     if (!isBrowser) return;
     const node = floatingRef.current;
     if (!node) return;
@@ -3455,25 +3806,25 @@ var TourPopoverPortal = ({
   const autoAlignment = resolvedPlacement.endsWith(
     "-start"
   ) ? "start" : resolvedPlacement.endsWith("-end") ? "end" : void 0;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     setDragPosition(null);
     setLayoutMode(prefersMobileRef.current ? "mobile" : "floating");
     cachedFloatingPositionRef.current = null;
     appliedFloatingCacheRef.current = null;
   }, [target.stepId]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (layoutMode !== "manual") {
       setDragPosition(null);
     }
   }, [layoutMode]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     cachedFloatingPositionRef.current = floatingPosition;
     const cacheKey = getFloatingCacheKey(target);
     if (cacheKey) {
       floatingPositionCache.set(cacheKey, floatingPosition);
     }
   }, [floatingPosition, target.isScreen, target.stepId]);
-  const dockedPosition = (0, import_react21.useMemo)(
+  const dockedPosition = (0, import_react24.useMemo)(
     () => ({
       top: viewport.height - DOCKED_MARGIN,
       left: viewport.width - DOCKED_MARGIN,
@@ -3481,7 +3832,7 @@ var TourPopoverPortal = ({
     }),
     [viewport.height, viewport.width]
   );
-  const mobilePosition = (0, import_react21.useMemo)(
+  const mobilePosition = (0, import_react24.useMemo)(
     () => ({
       top: viewport.height - MOBILE_HORIZONTAL_GUTTER,
       left: viewport.width / 2,
@@ -3489,17 +3840,17 @@ var TourPopoverPortal = ({
     }),
     [viewport.height, viewport.width]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (layoutMode === "docked") {
       setFloatingPosition(dockedPosition);
     }
   }, [dockedPosition, layoutMode]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (layoutMode === "mobile") {
       setFloatingPosition(mobilePosition);
     }
   }, [layoutMode, mobilePosition]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (prefersMobileLayout) {
       if (layoutMode !== "mobile") {
         setLayoutMode("mobile");
@@ -3512,7 +3863,7 @@ var TourPopoverPortal = ({
       setFloatingPosition(fallbackPosition);
     }
   }, [fallbackPosition, layoutMode, prefersMobileLayout]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (layoutMode !== "floating") return;
     const stepId = target.stepId;
     if (!stepId) return;
@@ -3536,7 +3887,7 @@ var TourPopoverPortal = ({
     target.stepId
   ]);
   const shouldDeferScreenSnap = layoutMode === "floating" && target.isScreen && Boolean(layoutId);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     return () => {
       if (deferredScreenSnapRef.current !== null) {
         cancelAnimationFrame(deferredScreenSnapRef.current);
@@ -3544,7 +3895,7 @@ var TourPopoverPortal = ({
       }
     };
   }, []);
-  (0, import_react21.useLayoutEffect)(() => {
+  (0, import_react24.useLayoutEffect)(() => {
     if (layoutMode !== "floating") return;
     if (target.status === "ready" && !target.isScreen) return;
     if (shouldDeferScreenSnap) return;
@@ -3556,7 +3907,7 @@ var TourPopoverPortal = ({
     target.isScreen,
     target.status
   ]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!shouldDeferScreenSnap) return;
     if (deferredScreenSnapRef.current !== null) {
       cancelAnimationFrame(deferredScreenSnapRef.current);
@@ -3583,14 +3934,14 @@ var TourPopoverPortal = ({
       }
     };
   }, [fallbackPosition, shouldDeferScreenSnap]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     return () => {
       if (overflowRetryTimeoutRef.current !== null) {
         window.clearTimeout(overflowRetryTimeoutRef.current);
       }
     };
   }, []);
-  (0, import_react21.useLayoutEffect)(() => {
+  (0, import_react24.useLayoutEffect)(() => {
     if (!isBrowser) return;
     const floatingEl = floatingRef.current;
     const rectInfo = target.rect;
@@ -3628,7 +3979,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 () => {
@@ -3673,9 +4031,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) {
@@ -3724,7 +4083,7 @@ var TourPopoverPortal = ({
     target.status,
     target.stepId
   ]);
-  (0, import_react21.useLayoutEffect)(() => {
+  (0, import_react24.useLayoutEffect)(() => {
     if (layoutMode !== "manual" || !dragPosition) return;
     setFloatingPosition({
       top: dragPosition.top,
@@ -3809,7 +4168,7 @@ var TourPopoverPortal = ({
     }
     event.preventDefault();
   };
-  (0, import_react21.useEffect)(() => endDrag, []);
+  (0, import_react24.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;
@@ -3901,7 +4260,7 @@ var TourPopoverPortal = ({
 };
 
 // src/components/TourFocusManager.tsx
-var import_react22 = require("react");
+var import_react25 = require("react");
 var import_react_dom3 = require("react-dom");
 
 // src/utils/focus.ts
@@ -3962,7 +4321,7 @@ var focusElement = (element, options) => {
 };
 
 // src/components/TourFocusManager.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var runMicrotask = (callback) => {
   if (typeof queueMicrotask === "function") {
     queueMicrotask(callback);
@@ -3978,18 +4337,18 @@ var TourFocusManager = ({
   highlightRect,
   guardElementFocusRing
 }) => {
-  const previousFocusRef = (0, import_react22.useRef)(null);
-  const guardNodesRef = (0, import_react22.useRef)({
+  const previousFocusRef = (0, import_react25.useRef)(null);
+  const guardNodesRef = (0, import_react25.useRef)({
     "target-start": null,
     "target-end": null,
     "popover-start": null,
     "popover-end": null
   });
-  const lastTabDirectionRef = (0, import_react22.useRef)("forward");
-  const suppressGuardHopRef = (0, import_react22.useRef)(null);
-  const [targetRingActive, setTargetRingActive] = (0, import_react22.useState)(false);
-  const [popoverRingActive, setPopoverRingActive] = (0, import_react22.useState)(false);
-  const [popoverRect, setPopoverRect] = (0, import_react22.useState)(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 restoreFocus = () => {
     const previous = previousFocusRef.current;
     previousFocusRef.current = null;
@@ -3999,7 +4358,7 @@ var TourFocusManager = ({
       });
     }
   };
-  (0, import_react22.useLayoutEffect)(() => {
+  (0, import_react25.useLayoutEffect)(() => {
     if (!isBrowser) return;
     if (!active) {
       restoreFocus();
@@ -4015,7 +4374,7 @@ var TourFocusManager = ({
       restoreFocus();
     };
   }, [active, popoverNode, target.element]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!isBrowser) return;
     if (!active) return;
     const doc = popoverNode?.ownerDocument ?? target.element?.ownerDocument ?? document;
@@ -4209,7 +4568,7 @@ var TourFocusManager = ({
     target.stepId,
     target.visibility
   ]);
-  (0, import_react22.useLayoutEffect)(() => {
+  (0, import_react25.useLayoutEffect)(() => {
     if (popoverRingActive && popoverNode) {
       setPopoverRect(popoverNode.getBoundingClientRect());
     } else {
@@ -4224,8 +4583,8 @@ var TourFocusManager = ({
   const showPopoverRing = popoverRingActive && popoverRect;
   if (!showTargetRing && !showPopoverRing) return null;
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-      showTargetRing && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      showTargetRing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "div",
         {
           style: {
@@ -4242,7 +4601,7 @@ var TourFocusManager = ({
           "aria-hidden": true
         }
       ),
-      showPopoverRing && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      showPopoverRing && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "div",
         {
           style: {
@@ -4265,7 +4624,7 @@ var TourFocusManager = ({
 };
 
 // src/motion/useHudMotion.ts
-var import_react23 = require("react");
+var import_react26 = require("react");
 var DEFAULT_HIGHLIGHT_TRANSITION2 = {
   duration: 0.35,
   ease: "easeOut",
@@ -4292,7 +4651,7 @@ var DEFAULT_POPOVER_CONTENT_TRANSITION2 = {
 };
 var useHudMotion = () => {
   const adapter = useAnimationAdapter();
-  return (0, import_react23.useMemo)(() => {
+  return (0, import_react26.useMemo)(() => {
     const components = {
       ...adapter.components
     };
@@ -4311,12 +4670,12 @@ var useHudMotion = () => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnimationAdapterProvider,
+  DialogRegistryProvider,
   OverlayBackdrop,
   TourFocusManager,
   TourPopoverPortal,
   TourProvider,
   createPathString,
-  createRadixDialogHelpers,
   createWaitForPredicateController,
   defaultAnimationAdapter,
   defaultLabels,
@@ -4328,6 +4687,8 @@ var useHudMotion = () => {
   useAnimationAdapter,
   useBodyScrollLock,
   useDelayAdvance,
+  useDialogRegistry,
+  useDialogRegistryOptional,
   useHiddenTargetFallback,
   useHudDescription,
   useHudMotion,
@@ -4336,6 +4697,7 @@ var useHudMotion = () => {
   useHudTargetIssue,
   usePreferredAnimationAdapter,
   useRadixDialogAdapter,
+  useRadixTourDialog,
   useTour,
   useTourControls,
   useTourEvents,