@flowsterix/react 0.9.0 → 0.10.1

package/dist/index.mjs

@@ -25,12 +25,12 @@ import {
   serializeVersion
 } from "@flowsterix/core";
 import {
-  createContext as createContext3,
-  useCallback,
-  useContext as useContext3,
-  useEffect as useEffect2,
-  useMemo as useMemo2,
-  useRef,
+  createContext as createContext4,
+  useCallback as useCallback2,
+  useContext as useContext4,
+  useEffect as useEffect3,
+  useMemo as useMemo3,
+  useRef as useRef3,
   useState as useState2
 } from "react";
 
@@ -63,10 +63,162 @@ function useTourLabels() {
   return useContext(LabelsContext);
 }
 
+// src/dialog/DialogRegistryContext.tsx
+import {
+  createContext as createContext2,
+  useCallback,
+  useContext as useContext2,
+  useMemo,
+  useRef
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var DialogRegistryContext = createContext2(void 0);
+var DialogRegistryProvider = ({ children }) => {
+  const controllersRef = useRef(/* @__PURE__ */ new Map());
+  const register = useCallback(
+    (dialogId, controller) => {
+      controllersRef.current.set(dialogId, controller);
+    },
+    []
+  );
+  const unregister = useCallback((dialogId) => {
+    controllersRef.current.delete(dialogId);
+  }, []);
+  const getController = useCallback((dialogId) => {
+    return controllersRef.current.get(dialogId);
+  }, []);
+  const isRegistered = useCallback((dialogId) => {
+    return controllersRef.current.has(dialogId);
+  }, []);
+  const value = useMemo(
+    () => ({
+      register,
+      unregister,
+      getController,
+      isRegistered
+    }),
+    [register, unregister, getController, isRegistered]
+  );
+  return /* @__PURE__ */ jsx(DialogRegistryContext.Provider, { value, children });
+};
+var useDialogRegistry = () => {
+  const context = useContext2(DialogRegistryContext);
+  if (!context) {
+    throw new Error(
+      "useDialogRegistry must be used within a DialogRegistryProvider"
+    );
+  }
+  return context;
+};
+var useDialogRegistryOptional = () => {
+  return useContext2(DialogRegistryContext);
+};
+
+// src/hooks/useDialogAutomation.ts
+import { useEffect, useRef as useRef2 } from "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 = useRef2(void 0);
+  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]);
+  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
 import { motion } from "motion/react";
-import { createContext as createContext2, useContext as useContext2, useEffect, useMemo, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { createContext as createContext3, useContext as useContext3, useEffect as useEffect2, useMemo as useMemo2, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var defaultAdapter = {
   components: {
     MotionDiv: motion.div,
@@ -109,16 +261,16 @@ var defaultAdapter = {
     }
   }
 };
-var AnimationAdapterContext = createContext2(defaultAdapter);
+var AnimationAdapterContext = createContext3(defaultAdapter);
 var AnimationAdapterProvider = ({
   adapter,
   children
 }) => {
-  const value = useMemo(() => adapter ?? defaultAdapter, [adapter]);
-  return /* @__PURE__ */ jsx(AnimationAdapterContext.Provider, { value, children });
+  const value = useMemo2(() => adapter ?? defaultAdapter, [adapter]);
+  return /* @__PURE__ */ jsx2(AnimationAdapterContext.Provider, { value, children });
 };
 var useAnimationAdapter = () => {
-  return useContext2(AnimationAdapterContext);
+  return useContext3(AnimationAdapterContext);
 };
 var defaultAnimationAdapter = defaultAdapter;
 var reducedMotionAnimationAdapter = {
@@ -162,7 +314,7 @@ var usePreferredAnimationAdapter = (options) => {
     if (!enabled || typeof window === "undefined") return false;
     return window.matchMedia(REDUCED_MOTION_QUERY).matches;
   });
-  useEffect(() => {
+  useEffect2(() => {
     if (!enabled || typeof window === "undefined") return;
     const mediaQuery = window.matchMedia(REDUCED_MOTION_QUERY);
     const handleChange = (event) => {
@@ -179,11 +331,11 @@ var usePreferredAnimationAdapter = (options) => {
 };
 
 // src/context.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var TourContext = createContext3(void 0);
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var TourContext = createContext4(void 0);
 var DEFAULT_STORAGE_PREFIX = "tour";
 var useFlowMap = (flows) => {
-  return useMemo2(() => {
+  return useMemo3(() => {
     const map = /* @__PURE__ */ new Map();
     for (const flow of flows) {
       map.set(flow.id, flow);
@@ -207,17 +359,17 @@ var TourProvider = ({
   labels: labelsProp,
   onVersionMismatch
 }) => {
-  const mergedLabels = useMemo2(
+  const mergedLabels = useMemo3(
     () => ({ ...defaultLabels, ...labelsProp }),
     [labelsProp]
   );
   const flowMap = useFlowMap(flows);
-  const storeRef = useRef(null);
-  const unsubscribeRef = useRef(null);
-  const stepHooksUnsubscribeRef = useRef(null);
-  const fallbackStorageRef = useRef(void 0);
-  const pendingResumeRef = useRef(/* @__PURE__ */ new Set());
-  const autoStartRequestedRef = useRef(null);
+  const storeRef = useRef3(null);
+  const unsubscribeRef = useRef3(null);
+  const stepHooksUnsubscribeRef = useRef3(null);
+  const fallbackStorageRef = useRef3(void 0);
+  const pendingResumeRef = useRef3(/* @__PURE__ */ new Set());
+  const autoStartRequestedRef = useRef3(null);
   const [activeFlowId, setActiveFlowId] = useState2(null);
   const [state, setState] = useState2(null);
   const [events, setEvents] = useState2(
@@ -225,7 +377,7 @@ var TourProvider = ({
   );
   const [debugEnabled, setDebugEnabled] = useState2(defaultDebug);
   const [delayInfo, setDelayInfo] = useState2(null);
-  const teardownStore = useCallback(() => {
+  const teardownStore = useCallback2(() => {
     unsubscribeRef.current?.();
     unsubscribeRef.current = null;
     stepHooksUnsubscribeRef.current?.();
@@ -235,7 +387,7 @@ var TourProvider = ({
     setDelayInfo(null);
     pendingResumeRef.current.clear();
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => {
       teardownStore();
       setState(null);
@@ -243,7 +395,7 @@ var TourProvider = ({
       setActiveFlowId(null);
     };
   }, [teardownStore]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!activeFlowId) return;
     const definition = flowMap.get(activeFlowId);
     if (!definition) {
@@ -266,7 +418,7 @@ var TourProvider = ({
       console.warn(`[tour][step] ${phase} hook failed`, error);
     }
   };
-  const ensureStore = useCallback(
+  const ensureStore = useCallback2(
     (flowId) => {
       const existing = storeRef.current;
       if (existing && existing.definition.id === flowId) {
@@ -325,7 +477,7 @@ var TourProvider = ({
       teardownStore
     ]
   );
-  const getActiveStore = useCallback(() => {
+  const getActiveStore = useCallback2(() => {
     const store = storeRef.current;
     if (!store) {
       throw new Error(
@@ -337,7 +489,7 @@ var TourProvider = ({
   const isPromiseLike2 = (value) => {
     return typeof value === "object" && value !== null && typeof value.then === "function";
   };
-  const invokeStepHook = useCallback(
+  const invokeStepHook = useCallback2(
     async (hook, context, phase) => {
       if (!hook) return;
       try {
@@ -351,7 +503,7 @@ var TourProvider = ({
     },
     []
   );
-  const runResumeHooks = useCallback(
+  const runResumeHooks = useCallback2(
     async (definition, flowState, strategy) => {
       if (flowState.status !== "running") return;
       if (strategy === "current") {
@@ -391,13 +543,13 @@ var TourProvider = ({
     },
     [invokeStepHook]
   );
-  const resolveResumeStrategy = useCallback(
+  const resolveResumeStrategy = useCallback2(
     (definition, options) => {
       return options?.resumeStrategy ?? definition.resumeStrategy ?? "chain";
     },
     []
   );
-  const startFlow = useCallback(
+  const startFlow = useCallback2(
     (flowId, options) => {
       const store = ensureStore(flowId);
       const previousState = store.getState();
@@ -427,7 +579,7 @@ var TourProvider = ({
     [ensureStore, resolveResumeStrategy, runResumeHooks]
   );
   const [eligibleFlows, setEligibleFlows] = useState2([]);
-  useEffect2(() => {
+  useEffect3(() => {
     const autoStartFlows = flows.filter((f) => f.autoStart);
     if (autoStartFlows.length === 0) {
       setEligibleFlows([]);
@@ -491,7 +643,7 @@ var TourProvider = ({
       cancelled = true;
     };
   }, [flows, storageAdapter, storageNamespace]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (eligibleFlows.length === 0) {
       autoStartRequestedRef.current = null;
       return;
@@ -526,14 +678,14 @@ var TourProvider = ({
       }
     };
   }, [activeFlowId, eligibleFlows, startFlow]);
-  const next = useCallback(() => getActiveStore().next(), [getActiveStore]);
-  const back = useCallback(() => getActiveStore().back(), [getActiveStore]);
-  const goToStep = useCallback(
+  const next = useCallback2(() => getActiveStore().next(), [getActiveStore]);
+  const back = useCallback2(() => getActiveStore().back(), [getActiveStore]);
+  const goToStep = useCallback2(
     (step) => getActiveStore().goToStep(step),
     [getActiveStore]
   );
-  const pause = useCallback(() => getActiveStore().pause(), [getActiveStore]);
-  const resume = useCallback(() => {
+  const pause = useCallback2(() => getActiveStore().pause(), [getActiveStore]);
+  const resume = useCallback2(() => {
     const store = getActiveStore();
     const previousState = store.getState();
     if (previousState.status === "paused") {
@@ -551,27 +703,31 @@ var TourProvider = ({
     }
     return result;
   }, [getActiveStore, resolveResumeStrategy, runResumeHooks]);
-  const cancel = useCallback(
+  const cancel = useCallback2(
     (reason) => getActiveStore().cancel(reason),
     [getActiveStore]
   );
-  const complete = useCallback(
+  const complete = useCallback2(
     () => getActiveStore().complete(),
     [getActiveStore]
   );
-  const advanceStep = useCallback(
+  const advanceStep = useCallback2(
     (stepId) => getActiveStore().advanceStep(stepId),
     [getActiveStore]
   );
-  const toggleDebug = useCallback(() => {
+  const toggleDebug = useCallback2(() => {
     setDebugEnabled((previous) => !previous);
   }, []);
-  const activeStep = useMemo2(() => {
+  const activeStep = useMemo3(() => {
     if (!state || !storeRef.current) return null;
     if (state.stepIndex < 0) return null;
     return storeRef.current.definition.steps[state.stepIndex] ?? null;
   }, [state]);
-  useEffect2(() => {
+  const activeDialogConfig = useMemo3(() => {
+    if (!activeStep?.dialogId || !storeRef.current) return void 0;
+    return storeRef.current.definition.dialogs?.[activeStep.dialogId];
+  }, [activeStep]);
+  useEffect3(() => {
     if (!activeFlowId) return;
     if (!pendingResumeRef.current.has(activeFlowId)) return;
     if (!state || state.status !== "running") return;
@@ -586,12 +742,13 @@ var TourProvider = ({
     pendingResumeRef.current.delete(activeFlowId);
     void runResumeHooks(definition, state, resumeStrategy);
   }, [activeFlowId, flowMap, resolveResumeStrategy, runResumeHooks, state]);
-  const contextValue = useMemo2(
+  const contextValue = useMemo3(
     () => ({
       flows: flowMap,
       activeFlowId,
       state,
       activeStep,
+      activeDialogConfig,
       startFlow,
       next,
       back,
@@ -613,6 +770,7 @@ var TourProvider = ({
     [
       activeFlowId,
       activeStep,
+      activeDialogConfig,
       advanceStep,
       back,
       cancel,
@@ -639,10 +797,41 @@ var TourProvider = ({
     reducedMotionAdapter,
     enabled: autoDetectReducedMotion
   });
-  return /* @__PURE__ */ jsx2(AnimationAdapterProvider, { adapter: resolvedAnimationAdapter, children: /* @__PURE__ */ jsx2(LabelsProvider, { value: mergedLabels, children: /* @__PURE__ */ jsx2(TourContext.Provider, { value: contextValue, children }) }) });
+  return /* @__PURE__ */ jsx3(AnimationAdapterProvider, { adapter: resolvedAnimationAdapter, children: /* @__PURE__ */ jsx3(LabelsProvider, { value: mergedLabels, children: /* @__PURE__ */ jsx3(DialogRegistryProvider, { children: /* @__PURE__ */ jsxs(TourContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx3(
+      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 = useContext3(TourContext);
+  const context = useContext4(TourContext);
   if (!context) {
     throw new Error("useTour must be used within a TourProvider");
   }
@@ -650,14 +839,14 @@ var useTour = () => {
 };
 var useTourEvents = (event, handler) => {
   const { events } = useTour();
-  useEffect2(() => {
+  useEffect3(() => {
     if (!events) return;
     return events.on(event, handler);
   }, [event, events, handler]);
 };
 
 // src/hooks/useTourTarget.ts
-import { useEffect as useEffect3, useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect as useEffect4, useLayoutEffect, useRef as useRef4, useState as useState3 } from "react";
 
 // src/hooks/scrollMargin.ts
 var DEFAULT_SCROLL_MARGIN = 16;
@@ -961,11 +1150,11 @@ var resolveStepTarget = (target) => {
 var useTourTarget = () => {
   const { activeStep, state, activeFlowId, flows } = useTour();
   const [targetInfo, setTargetInfo] = useState3(INITIAL_TARGET_INFO);
-  const autoScrollStateRef = useRef2({ stepId: null, checks: 0, stalledChecks: 0, done: false, lastRect: null });
-  const autoScrollRafRef = useRef2(null);
-  const autoScrollTimeoutRef = useRef2(null);
-  const lastRectRef = useRef2(null);
-  const initialScrollStepRef = useRef2(null);
+  const autoScrollStateRef = useRef4({ stepId: null, checks: 0, stalledChecks: 0, done: false, lastRect: null });
+  const autoScrollRafRef = useRef4(null);
+  const autoScrollTimeoutRef = useRef4(null);
+  const lastRectRef = useRef4(null);
+  const initialScrollStepRef = useRef4(null);
   const cancelAutoScrollLoop = () => {
     if (!isBrowser) return;
     if (autoScrollTimeoutRef.current !== null) {
@@ -977,7 +1166,7 @@ var useTourTarget = () => {
       autoScrollRafRef.current = null;
     }
   };
-  useEffect3(() => {
+  useEffect4(() => {
     if (!activeStep) {
       initialScrollStepRef.current = null;
     }
@@ -1017,7 +1206,7 @@ var useTourTarget = () => {
     targetInfo.status,
     targetInfo.rectSource
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!activeStep || !state || state.status !== "running") {
       setTargetInfo(INITIAL_TARGET_INFO);
       autoScrollStateRef.current = {
@@ -1340,7 +1529,7 @@ var useTourTarget = () => {
       waitForPredicateController = null;
     };
   }, [activeStep, activeFlowId, flows, state]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isBrowser) return;
     if (!activeStep) {
       cancelAutoScrollLoop();
@@ -1421,10 +1610,10 @@ var useTourTarget = () => {
 };
 
 // src/hooks/useHudState.ts
-import { useCallback as useCallback2, useEffect as useEffect8, useMemo as useMemo4, useRef as useRef5, useState as useState7 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef7, useState as useState7 } from "react";
 
 // src/hooks/useAdvanceRules.ts
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 var DEFAULT_POLL_MS = 250;
 var isListenerTarget = (value) => {
   return !!value && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function";
@@ -1463,7 +1652,7 @@ var useAdvanceRules = (target) => {
     complete,
     setDelayInfo
   } = useTour();
-  useEffect4(() => {
+  useEffect5(() => {
     if (!isBrowser) return;
     if (!state || state.status !== "running") return;
     if (!activeStep) return;
@@ -1634,7 +1823,7 @@ var useAdvanceRules = (target) => {
 };
 
 // src/hooks/useHiddenTargetFallback.ts
-import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef5, useState as useState4 } from "react";
 var DEFAULT_DELAY_MS = 900;
 var DEFAULT_GRACE_PERIOD_MS = 400;
 var useHiddenTargetFallback = ({
@@ -1645,9 +1834,9 @@ var useHiddenTargetFallback = ({
 }) => {
   const [usingScreenFallback, setUsingScreenFallback] = useState4(false);
   const [isInGracePeriod, setIsInGracePeriod] = useState4(false);
-  const timeoutRef = useRef3(null);
-  const graceTimeoutRef = useRef3(null);
-  const skipTriggeredRef = useRef3(false);
+  const timeoutRef = useRef5(null);
+  const graceTimeoutRef = useRef5(null);
+  const skipTriggeredRef = useRef5(false);
   const hiddenMode = step?.targetBehavior?.hidden ?? "screen";
   const hiddenDelayMs = Math.max(
     0,
@@ -1665,7 +1854,7 @@ var useHiddenTargetFallback = ({
       graceTimeoutRef.current = null;
     }
   };
-  useEffect5(() => {
+  useEffect6(() => {
     skipTriggeredRef.current = false;
     setUsingScreenFallback(false);
     setIsInGracePeriod(false);
@@ -1676,7 +1865,7 @@ var useHiddenTargetFallback = ({
       clearGraceTimeout();
     };
   }, [step?.id]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isBrowser) return void 0;
     if (!step) return void 0;
     clearPendingTimeout();
@@ -1722,7 +1911,7 @@ var useHiddenTargetFallback = ({
     hiddenDelayMs,
     onSkip
   ]);
-  const resolvedTarget = useMemo3(() => {
+  const resolvedTarget = useMemo4(() => {
     if (!usingScreenFallback) {
       return target;
     }
@@ -1744,10 +1933,10 @@ var useHiddenTargetFallback = ({
 };
 
 // src/hooks/useRouteMismatch.ts
-import { useEffect as useEffect6, useState as useState5 } from "react";
+import { useEffect as useEffect7, useState as useState5 } from "react";
 var useRouteMismatch = (step) => {
   const [currentPath, setCurrentPath] = useState5(() => getCurrentRoutePath());
-  useEffect6(() => {
+  useEffect7(() => {
     return subscribeToRouteChanges((path) => {
       setCurrentPath(path);
     });
@@ -1762,13 +1951,13 @@ var useRouteMismatch = (step) => {
 };
 
 // src/hooks/useViewportRect.ts
-import { useEffect as useEffect7, useRef as useRef4, useState as useState6 } from "react";
+import { useEffect as useEffect8, useRef as useRef6, useState as useState6 } from "react";
 var useViewportRect = () => {
   const [viewport, setViewport] = useState6(
     () => getViewportRect()
   );
-  const rafRef = useRef4(null);
-  useEffect7(() => {
+  const rafRef = useRef6(null);
+  useEffect8(() => {
     if (!isBrowser) return;
     const updateViewport = () => {
       rafRef.current = null;
@@ -1810,12 +1999,12 @@ var normalizeFlowFilter = (value) => {
 };
 var useHudState = (options = {}) => {
   const { flowId } = options;
-  const flowFilter = useMemo4(() => normalizeFlowFilter(flowId), [flowId]);
+  const flowFilter = useMemo5(() => normalizeFlowFilter(flowId), [flowId]);
   const { state, activeStep, activeFlowId, flows, next, complete, pause, resume } = useTour();
   const target = useTourTarget();
   const viewportRect = useViewportRect();
   useAdvanceRules(target);
-  const matchesFlowFilter = useMemo4(() => {
+  const matchesFlowFilter = useMemo5(() => {
     if (!flowFilter || flowFilter.length === 0) return true;
     if (!activeFlowId) return false;
     return flowFilter.includes(activeFlowId);
@@ -1826,12 +2015,12 @@ var useHudState = (options = {}) => {
   const [shouldRender, setShouldRender] = useState7(
     Boolean(runningStep)
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (runningStep) {
       setShouldRender(true);
     }
   }, [runningStep?.id]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!shouldRender) return;
     if (runningStep) return;
     if (target.status !== "idle") return;
@@ -1843,19 +2032,19 @@ var useHudState = (options = {}) => {
     };
   }, [runningStep, shouldRender, target.status]);
   const { isRouteMismatch, currentPath } = useRouteMismatch(activeStep);
-  const pausedForMissingTargetRef = useRef5(null);
-  useEffect8(() => {
+  const pausedForMissingTargetRef = useRef7(null);
+  useEffect9(() => {
     if (!isRouteMismatch) return;
     if (!runningState || runningState.status !== "running") return;
     pause();
   }, [isRouteMismatch, runningState, pause]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (isRouteMismatch) return;
     if (pausedForMissingTargetRef.current !== null) return;
     if (!state || state.status !== "paused") return;
     resume();
   }, [isRouteMismatch, state, resume]);
-  const skipHiddenStep = useCallback2(() => {
+  const skipHiddenStep = useCallback3(() => {
     if (!runningState || runningState.status !== "running") return;
     if (!activeFlowId) return;
     const flow = flows.get(activeFlowId);
@@ -1873,7 +2062,7 @@ var useHudState = (options = {}) => {
     viewportRect,
     onSkip: skipHiddenStep
   });
-  useEffect8(() => {
+  useEffect9(() => {
     if (isRouteMismatch) return;
     if (activeStep?.route !== void 0) return;
     if (isInGracePeriod) return;
@@ -1892,14 +2081,14 @@ var useHudState = (options = {}) => {
     currentPath,
     pause
   ]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (pausedForMissingTargetRef.current === null) return;
     if (!state || state.status !== "paused") return;
     if (currentPath === pausedForMissingTargetRef.current) return;
     pausedForMissingTargetRef.current = null;
     resume();
   }, [currentPath, state, resume]);
-  useEffect8(() => {
+  useEffect9(() => {
     pausedForMissingTargetRef.current = null;
   }, [activeStep?.id]);
   const canRenderStep = Boolean(runningStep && runningState);
@@ -1924,24 +2113,24 @@ var useHudState = (options = {}) => {
 };
 
 // src/hooks/useHudDescription.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 var sanitizeForId = (value) => {
   const normalized = value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
   return normalized.length > 0 ? normalized : "step";
 };
 var useHudDescription = (options) => {
   const { step, fallbackAriaDescribedBy } = options;
-  const targetDescription = useMemo5(() => {
+  const targetDescription = useMemo6(() => {
     if (!step) return null;
     if (typeof step.target !== "object") return null;
     const description = step.target.description;
     return typeof description === "string" ? description : null;
   }, [step]);
-  const descriptionId = useMemo5(() => {
+  const descriptionId = useMemo6(() => {
     if (!step || !targetDescription) return void 0;
     return `tour-step-${sanitizeForId(step.id)}-description`;
   }, [step, targetDescription]);
-  const combinedAriaDescribedBy = useMemo5(() => {
+  const combinedAriaDescribedBy = useMemo6(() => {
     const parts = [fallbackAriaDescribedBy, descriptionId].filter(Boolean);
     return parts.length > 0 ? parts.join(" ") : void 0;
   }, [descriptionId, fallbackAriaDescribedBy]);
@@ -1953,10 +2142,10 @@ var useHudDescription = (options) => {
 };
 
 // src/hooks/useHudShortcuts.ts
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 
 // src/hooks/useTourControls.ts
-import { useCallback as useCallback3, useMemo as useMemo6 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo7 } from "react";
 var hasManualAdvance = (rules) => rules.some((rule) => rule.type === "manual");
 var didPreviousAdvanceViaRoute = (rules) => rules.some((rule) => rule.type === "route");
 var useTourControls = () => {
@@ -1971,7 +2160,7 @@ var useTourControls = () => {
     flows,
     activeStep
   } = tour;
-  const computed = useMemo6(() => {
+  const computed = useMemo7(() => {
     if (!state || state.status !== "running" || !activeStep) {
       return {
         isActive: false,
@@ -2020,11 +2209,11 @@ var useTourControls = () => {
   } = computed;
   const canGoBack = showBackButton && !backDisabled;
   const canGoNext = showNextButton && !nextDisabled;
-  const goBack = useCallback3(() => {
+  const goBack = useCallback4(() => {
     if (!canGoBack) return;
     back();
   }, [back, canGoBack]);
-  const goNext = useCallback3(() => {
+  const goNext = useCallback4(() => {
     if (!canGoNext) return;
     if (isLast) {
       complete();
@@ -2032,7 +2221,7 @@ var useTourControls = () => {
       next();
     }
   }, [canGoNext, complete, isLast, next]);
-  return useMemo6(
+  return useMemo7(
     () => ({
       showBackButton,
       backDisabled,
@@ -2077,7 +2266,7 @@ var useHudShortcuts = (target, options) => {
   const escapeEnabled = options?.escape ?? true;
   const { state } = useTour();
   const { cancel, canGoBack, goBack, canGoNext, goNext, isActive } = useTourControls();
-  useEffect9(() => {
+  useEffect10(() => {
     if (!isBrowser) return void 0;
     if (!enabled) return void 0;
     if (!target) return void 0;
@@ -2141,10 +2330,10 @@ var useHudShortcuts = (target, options) => {
 };
 
 // src/hooks/useTourHud.ts
-import { useMemo as useMemo8, useState as useState9 } from "react";
+import { useMemo as useMemo9, useState as useState9 } from "react";
 
 // src/hooks/useBodyScrollLock.ts
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 var lockCount = 0;
 var previousOverflow = null;
 var acquireLock = () => {
@@ -2165,7 +2354,7 @@ var releaseLock = () => {
   }
 };
 var useBodyScrollLock = (enabled) => {
-  useEffect10(() => {
+  useEffect11(() => {
     if (!enabled) return;
     acquireLock();
     return () => {
@@ -2175,7 +2364,7 @@ var useBodyScrollLock = (enabled) => {
 };
 
 // src/hooks/useHudTargetIssue.ts
-import { useEffect as useEffect11, useMemo as useMemo7, useState as useState8 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo8, useState as useState8 } from "react";
 var deriveTargetIssue = (params) => {
   const { target, labels } = params;
   if (target.isScreen) return null;
@@ -2209,11 +2398,11 @@ var useHudTargetIssue = (target, options) => {
   const labels = useTourLabels();
   const delayMs = Math.max(0, options?.delayMs ?? 500);
   const [armed, setArmed] = useState8(false);
-  const rawIssue = useMemo7(
+  const rawIssue = useMemo8(
     () => deriveTargetIssue({ target, labels }),
     [target.isScreen, target.rectSource, target.status, target.visibility, labels]
   );
-  useEffect11(() => {
+  useEffect12(() => {
     if (!rawIssue) {
       setArmed(false);
       return;
@@ -2271,7 +2460,7 @@ var useTourHud = (options = {}) => {
     radius: overlayRadius,
     interactionMode: hudState.flowHudOptions?.backdrop?.interaction ?? backdropInteraction
   };
-  const popover = useMemo8(() => {
+  const popover = useMemo9(() => {
     return {
       offset: popoverOptions?.offset ?? 32,
       role: popoverOptions?.role ?? "dialog",
@@ -2283,13 +2472,13 @@ var useTourHud = (options = {}) => {
       placement: hudState.runningStep?.placement
     };
   }, [hudState.runningStep?.placement, popoverOptions]);
-  const descriptionResult = useMemo8(() => {
+  const descriptionResult = useMemo9(() => {
     return {
       ...description,
       text: description.targetDescription
     };
   }, [description]);
-  const focusManager = useMemo8(
+  const focusManager = useMemo9(
     () => ({
       active: hudState.focusTrapActive,
       target: hudState.hudTarget,
@@ -2319,7 +2508,7 @@ var useTourHud = (options = {}) => {
 };
 
 // src/hooks/useTourOverlay.ts
-import { useEffect as useEffect12, useMemo as useMemo9, useRef as useRef6 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo10, useRef as useRef8 } from "react";
 var DEFAULT_PADDING = 12;
 var DEFAULT_RADIUS = 12;
 var DEFAULT_EDGE_BUFFER = 0;
@@ -2332,9 +2521,9 @@ var useTourOverlay = (options) => {
     interactionMode = "passthrough",
     isInGracePeriod = false
   } = options;
-  const hasShownRef = useRef6(false);
-  const lastReadyTargetRef = useRef6(null);
-  useEffect12(() => {
+  const hasShownRef = useRef8(false);
+  const lastReadyTargetRef = useRef8(null);
+  useEffect13(() => {
     if (!isBrowser) return;
     if (target.status === "ready") {
       hasShownRef.current = true;
@@ -2384,15 +2573,15 @@ var useTourOverlay = (options) => {
     height: highlightHeight,
     radius: highlightRadius
   } : null;
-  const maskCapable = useMemo9(() => supportsMasking(), []);
+  const maskCapable = useMemo10(() => supportsMasking(), []);
   const isActive = target.status === "ready" || target.status === "resolving" && cachedTarget !== null || isInGracePeriod;
   const shouldMask = maskCapable && isActive;
-  const maskId = useMemo9(
+  const maskId = useMemo10(
     () => `tour-overlay-mask-${Math.random().toString(36).slice(2, 10)}`,
     []
   );
   const maskUrl = shouldMask ? `url(#${maskId})` : void 0;
-  const fallbackSegments = useMemo9(() => {
+  const fallbackSegments = useMemo10(() => {
     if (!isActive || shouldMask || !hasHighlightBounds || !highlightRect) {
       return null;
     }
@@ -2445,7 +2634,7 @@ var useTourOverlay = (options) => {
     viewport.height,
     viewport.width
   ]);
-  const blockerSegments = useMemo9(() => {
+  const blockerSegments = useMemo10(() => {
     if (interactionMode !== "block") {
       return null;
     }
@@ -2573,37 +2762,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
+import { useCallback as useCallback5, useEffect as useEffect14, useMemo as useMemo11, useRef as useRef9, useState as useState10 } from "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] = useState10(false);
+  const lastStepIndexRef = useRef9(-1);
+  const isResumeRef = useRef9(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 = useMemo11(() => {
+    if (!isStepActive) return false;
+    return true;
+  }, [isStepActive]);
+  useEffect14(() => {
+    if (!events) return;
+    const unsubscribe = events.on("flowResume", () => {
+      isResumeRef.current = true;
+    });
+    return unsubscribe;
+  }, [events]);
+  useEffect14(() => {
+    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
+  ]);
+  useEffect14(() => {
+    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 = useCallback5(() => {
+    if (!dialogConfig) return;
+    setInternalOpen(false);
+    goToStep(dialogConfig.onDismissGoToStepId);
+  }, [dialogConfig, goToStep]);
+  const onOpenChange = useCallback5(
+    (open) => {
+      if (open) {
+        setInternalOpen(true);
+      } else {
+        if (isStepActive && dialogConfig) {
+          handleDismiss();
+        } else {
+          setInternalOpen(false);
+        }
+      }
+    },
+    [isStepActive, dialogConfig, handleDismiss]
+  );
+  useEffect14(() => {
+    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 = useCallback5(
+    (event) => {
+      if (suspendExternalFocusTrap) {
+        event.preventDefault();
+      }
+    },
+    [suspendExternalFocusTrap]
+  );
+  const handleEscapeKeyDown = useCallback5(
+    (event) => {
+      if (isStepActive && dialogConfig) {
+        event.preventDefault();
+        handleDismiss();
+      }
+    },
+    [isStepActive, dialogConfig, handleDismiss]
+  );
+  const handleInteractOutside = useCallback5(
+    (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
-import { useEffect as useEffect13, useMemo as useMemo10, useState as useState10 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo12, useState as useState11 } from "react";
 var getTimestamp = () => typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
 var useDelayAdvance = () => {
   const { delayInfo, activeStep, state } = useTour();
-  const [now, setNow] = useState10(() => getTimestamp());
-  useEffect13(() => {
+  const [now, setNow] = useState11(() => getTimestamp());
+  useEffect15(() => {
     if (!delayInfo) return;
     if (!activeStep || activeStep.id !== delayInfo.stepId) return;
     if (!state || state.status !== "running") return;
@@ -2620,12 +2974,12 @@ var useDelayAdvance = () => {
       }
     };
   }, [delayInfo, activeStep, state]);
-  useEffect13(() => {
+  useEffect15(() => {
     if (!delayInfo) {
       setNow(getTimestamp());
     }
   }, [delayInfo]);
-  return useMemo10(() => {
+  return useMemo12(() => {
     const matchingStep = !!delayInfo && !!activeStep && activeStep.id === delayInfo.stepId;
     const isRunning = matchingStep && state?.status === "running";
     if (!delayInfo) {
@@ -2678,10 +3032,10 @@ var useDelayAdvance = () => {
 };
 
 // src/components/OverlayBackdrop.tsx
-import { useEffect as useEffect14, useRef as useRef7 } from "react";
+import { useEffect as useEffect16, useRef as useRef10 } from "react";
 import { createPortal } from "react-dom";
 import { AnimatePresence } from "motion/react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var styles = {
   root: {
     position: "fixed",
@@ -2767,9 +3121,9 @@ var OverlayBackdrop = ({
     viewport
   } = overlay;
   const hasHighlightBounds = Boolean(highlight.rect);
-  const prevScreenTargetRef = useRef7(null);
+  const prevScreenTargetRef = useRef10(null);
   const shouldSnapHighlight = prevScreenTargetRef.current === true && !highlight.isScreen && hasHighlightBounds;
-  useEffect14(() => {
+  useEffect16(() => {
     prevScreenTargetRef.current = highlight.isScreen;
   }, [highlight.isScreen]);
   const resolvedBlur = typeof blurAmount === "number" ? `${blurAmount}px` : "0px";
@@ -2829,7 +3183,7 @@ var OverlayBackdrop = ({
     overlayStyle.backgroundColor = color;
   }
   return createPortal(
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs2(
       MotionDiv,
       {
         className: rootClassName,
@@ -2837,7 +3191,7 @@ var OverlayBackdrop = ({
         "aria-hidden": ariaHidden,
         "data-tour-overlay": "",
         children: [
-          /* @__PURE__ */ jsx3(AnimatePresence, { mode: "popLayout", children: shouldMask ? /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(AnimatePresence, { mode: "popLayout", children: shouldMask ? /* @__PURE__ */ jsx4(
             MotionSvg,
             {
               width: "0",
@@ -2849,7 +3203,7 @@ var OverlayBackdrop = ({
               animate: { opacity: 1 },
               exit: { opacity: 0 },
               transition: overlayTransition,
-              children: /* @__PURE__ */ jsx3(MotionDefs, { children: /* @__PURE__ */ jsxs(
+              children: /* @__PURE__ */ jsx4(MotionDefs, { children: /* @__PURE__ */ jsxs2(
                 MotionMask,
                 {
                   id: maskId ?? void 0,
@@ -2861,7 +3215,7 @@ var OverlayBackdrop = ({
                   animate: { width: viewport.width, height: viewport.height },
                   transition: highlightTransition,
                   children: [
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx4(
                       MotionRect,
                       {
                         x: "0",
@@ -2877,7 +3231,7 @@ var OverlayBackdrop = ({
                         exit: { opacity: 0 }
                       }
                     ),
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx4(
                       MotionRect,
                       {
                         initial: false,
@@ -2896,7 +3250,7 @@ var OverlayBackdrop = ({
             },
             "tour-mask"
           ) : null }),
-          /* @__PURE__ */ jsx3(AnimatePresence, { mode: "popLayout", children: showBaseOverlay ? /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(AnimatePresence, { mode: "popLayout", children: showBaseOverlay ? /* @__PURE__ */ jsx4(
             MotionDiv,
             {
               className: overlayClassName,
@@ -2924,7 +3278,7 @@ var OverlayBackdrop = ({
             },
             "tour-overlay"
           ) : null }),
-          /* @__PURE__ */ jsx3(AnimatePresence, { mode: "popLayout", children: fallbackSegments ? fallbackSegments.map((segment) => /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(AnimatePresence, { mode: "popLayout", children: fallbackSegments ? fallbackSegments.map((segment) => /* @__PURE__ */ jsx4(
             MotionDiv,
             {
               className: segmentClassName,
@@ -2954,13 +3308,13 @@ var OverlayBackdrop = ({
             },
             `tour-overlay-fallback-${segment.key}`
           )) : null }),
-          showInteractionBlocker && blockerSegments ? /* @__PURE__ */ jsx3(
+          showInteractionBlocker && blockerSegments ? /* @__PURE__ */ jsx4(
             "div",
             {
               style: { ...styles.blockerContainer, zIndex },
               "data-tour-overlay-layer": "interaction-blocker",
               "aria-hidden": true,
-              children: blockerSegments.map((segment) => /* @__PURE__ */ jsx3(
+              children: blockerSegments.map((segment) => /* @__PURE__ */ jsx4(
                 "div",
                 {
                   style: {
@@ -2975,7 +3329,7 @@ var OverlayBackdrop = ({
               ))
             }
           ) : null,
-          /* @__PURE__ */ jsx3(AnimatePresence, { mode: "popLayout", children: showHighlightRing && isActive && hasHighlightBounds ? /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(AnimatePresence, { mode: "popLayout", children: showHighlightRing && isActive && hasHighlightBounds ? /* @__PURE__ */ jsx4(
             MotionDiv,
             {
               className: ringClassName,
@@ -3006,7 +3360,7 @@ var OverlayBackdrop = ({
 };
 
 // src/components/TourPopoverPortal.tsx
-import { useEffect as useEffect15, useLayoutEffect as useLayoutEffect2, useMemo as useMemo11, useRef as useRef8, useState as useState11 } from "react";
+import { useEffect as useEffect17, useLayoutEffect as useLayoutEffect2, useMemo as useMemo13, useRef as useRef11, useState as useState12 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import {
   autoPlacement,
@@ -3073,12 +3427,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 = useRef8(prefersMobileLayout);
-  useEffect15(() => {
+  const prefersMobileRef = useRef11(prefersMobileLayout);
+  useEffect17(() => {
     prefersMobileRef.current = prefersMobileLayout;
   }, [prefersMobileLayout]);
-  const lastReadyTargetRef = useRef8(null);
-  useEffect15(() => {
+  const lastReadyTargetRef = useRef11(null);
+  useEffect17(() => {
     if (target.status === "ready" && target.rect) {
       lastReadyTargetRef.current = {
         rect: { ...target.rect },
@@ -3094,7 +3448,7 @@ var TourPopoverPortal = ({
   const shouldHidePopover = !resolvedRect && !target.isScreen;
   const fallbackRect = resolvedRect ?? viewport;
   const fallbackIsScreen = resolvedIsScreen;
-  const [floatingSize, setFloatingSize] = useState11(null);
+  const [floatingSize, setFloatingSize] = useState12(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;
@@ -3105,7 +3459,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 = useMemo11(
+  const fallbackPosition = useMemo13(
     () => ({
       top,
       left,
@@ -3113,7 +3467,7 @@ var TourPopoverPortal = ({
     }),
     [fallbackTransform, left, top]
   );
-  const centerInitialPosition = useMemo11(
+  const centerInitialPosition = useMemo13(
     () => ({
       top: viewport.height / 2,
       left: viewport.width / 2,
@@ -3121,22 +3475,22 @@ var TourPopoverPortal = ({
     }),
     [viewport.height, viewport.width]
   );
-  const floatingRef = useRef8(null);
-  const cachedFloatingPositionRef = useRef8(null);
-  const appliedFloatingCacheRef = useRef8(null);
-  const deferredScreenSnapRef = useRef8(null);
-  const [layoutMode, setLayoutMode] = useState11(
+  const floatingRef = useRef11(null);
+  const cachedFloatingPositionRef = useRef11(null);
+  const appliedFloatingCacheRef = useRef11(null);
+  const deferredScreenSnapRef = useRef11(null);
+  const [layoutMode, setLayoutMode] = useState12(
     () => prefersMobileLayout ? "mobile" : "floating"
   );
-  const [floatingPosition, setFloatingPosition] = useState11(fallbackPosition);
-  const [dragPosition, setDragPosition] = useState11(null);
-  const [isDragging, setIsDragging] = useState11(false);
-  const dragStateRef = useRef8(null);
-  const overflowRetryRef = useRef8({
+  const [floatingPosition, setFloatingPosition] = useState12(fallbackPosition);
+  const [dragPosition, setDragPosition] = useState12(null);
+  const [isDragging, setIsDragging] = useState12(false);
+  const dragStateRef = useRef11(null);
+  const overflowRetryRef = useRef11({
     stepId: null,
     attempts: 0
   });
-  const overflowRetryTimeoutRef = useRef8(null);
+  const overflowRetryTimeoutRef = useRef11(null);
   useLayoutEffect2(() => {
     if (!isBrowser) return;
     const node = floatingRef.current;
@@ -3156,25 +3510,25 @@ var TourPopoverPortal = ({
   const autoAlignment = resolvedPlacement.endsWith(
     "-start"
   ) ? "start" : resolvedPlacement.endsWith("-end") ? "end" : void 0;
-  useEffect15(() => {
+  useEffect17(() => {
     setDragPosition(null);
     setLayoutMode(prefersMobileRef.current ? "mobile" : "floating");
     cachedFloatingPositionRef.current = null;
     appliedFloatingCacheRef.current = null;
   }, [target.stepId]);
-  useEffect15(() => {
+  useEffect17(() => {
     if (layoutMode !== "manual") {
       setDragPosition(null);
     }
   }, [layoutMode]);
-  useEffect15(() => {
+  useEffect17(() => {
     cachedFloatingPositionRef.current = floatingPosition;
     const cacheKey = getFloatingCacheKey(target);
     if (cacheKey) {
       floatingPositionCache.set(cacheKey, floatingPosition);
     }
   }, [floatingPosition, target.isScreen, target.stepId]);
-  const dockedPosition = useMemo11(
+  const dockedPosition = useMemo13(
     () => ({
       top: viewport.height - DOCKED_MARGIN,
       left: viewport.width - DOCKED_MARGIN,
@@ -3182,7 +3536,7 @@ var TourPopoverPortal = ({
     }),
     [viewport.height, viewport.width]
   );
-  const mobilePosition = useMemo11(
+  const mobilePosition = useMemo13(
     () => ({
       top: viewport.height - MOBILE_HORIZONTAL_GUTTER,
       left: viewport.width / 2,
@@ -3190,17 +3544,17 @@ var TourPopoverPortal = ({
     }),
     [viewport.height, viewport.width]
   );
-  useEffect15(() => {
+  useEffect17(() => {
     if (layoutMode === "docked") {
       setFloatingPosition(dockedPosition);
     }
   }, [dockedPosition, layoutMode]);
-  useEffect15(() => {
+  useEffect17(() => {
     if (layoutMode === "mobile") {
       setFloatingPosition(mobilePosition);
     }
   }, [layoutMode, mobilePosition]);
-  useEffect15(() => {
+  useEffect17(() => {
     if (prefersMobileLayout) {
       if (layoutMode !== "mobile") {
         setLayoutMode("mobile");
@@ -3213,7 +3567,7 @@ var TourPopoverPortal = ({
       setFloatingPosition(fallbackPosition);
     }
   }, [fallbackPosition, layoutMode, prefersMobileLayout]);
-  useEffect15(() => {
+  useEffect17(() => {
     if (layoutMode !== "floating") return;
     const stepId = target.stepId;
     if (!stepId) return;
@@ -3237,7 +3591,7 @@ var TourPopoverPortal = ({
     target.stepId
   ]);
   const shouldDeferScreenSnap = layoutMode === "floating" && target.isScreen && Boolean(layoutId);
-  useEffect15(() => {
+  useEffect17(() => {
     return () => {
       if (deferredScreenSnapRef.current !== null) {
         cancelAnimationFrame(deferredScreenSnapRef.current);
@@ -3257,7 +3611,7 @@ var TourPopoverPortal = ({
     target.isScreen,
     target.status
   ]);
-  useEffect15(() => {
+  useEffect17(() => {
     if (!shouldDeferScreenSnap) return;
     if (deferredScreenSnapRef.current !== null) {
       cancelAnimationFrame(deferredScreenSnapRef.current);
@@ -3284,7 +3638,7 @@ var TourPopoverPortal = ({
       }
     };
   }, [fallbackPosition, shouldDeferScreenSnap]);
-  useEffect15(() => {
+  useEffect17(() => {
     return () => {
       if (overflowRetryTimeoutRef.current !== null) {
         window.clearTimeout(overflowRetryTimeoutRef.current);
@@ -3329,7 +3683,14 @@ var TourPopoverPortal = ({
           padding: FLOATING_OFFSET,
           alignment: autoAlignment
         })
-      ] : [flip({ padding: FLOATING_OFFSET, fallbackStrategy: "bestFit" })],
+      ] : [
+        flip({
+          padding: FLOATING_OFFSET,
+          fallbackStrategy: "bestFit",
+          crossAxis: true,
+          fallbackPlacements: ["bottom", "top", "right", "left"]
+        })
+      ],
       shift({ padding: FLOATING_OFFSET })
     ];
     const updatePosition = async () => {
@@ -3374,9 +3735,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) {
@@ -3510,7 +3872,7 @@ var TourPopoverPortal = ({
     }
     event.preventDefault();
   };
-  useEffect15(() => endDrag, []);
+  useEffect17(() => 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;
@@ -3602,7 +3964,7 @@ var TourPopoverPortal = ({
 };
 
 // src/components/TourFocusManager.tsx
-import { useEffect as useEffect16, useLayoutEffect as useLayoutEffect3, useRef as useRef9, useState as useState12 } from "react";
+import { useEffect as useEffect18, useLayoutEffect as useLayoutEffect3, useRef as useRef12, useState as useState13 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 
 // src/utils/focus.ts
@@ -3663,7 +4025,7 @@ var focusElement = (element, options) => {
 };
 
 // src/components/TourFocusManager.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var runMicrotask = (callback) => {
   if (typeof queueMicrotask === "function") {
     queueMicrotask(callback);
@@ -3679,18 +4041,18 @@ var TourFocusManager = ({
   highlightRect,
   guardElementFocusRing
 }) => {
-  const previousFocusRef = useRef9(null);
-  const guardNodesRef = useRef9({
+  const previousFocusRef = useRef12(null);
+  const guardNodesRef = useRef12({
     "target-start": null,
     "target-end": null,
     "popover-start": null,
     "popover-end": null
   });
-  const lastTabDirectionRef = useRef9("forward");
-  const suppressGuardHopRef = useRef9(null);
-  const [targetRingActive, setTargetRingActive] = useState12(false);
-  const [popoverRingActive, setPopoverRingActive] = useState12(false);
-  const [popoverRect, setPopoverRect] = useState12(null);
+  const lastTabDirectionRef = useRef12("forward");
+  const suppressGuardHopRef = useRef12(null);
+  const [targetRingActive, setTargetRingActive] = useState13(false);
+  const [popoverRingActive, setPopoverRingActive] = useState13(false);
+  const [popoverRect, setPopoverRect] = useState13(null);
   const restoreFocus = () => {
     const previous = previousFocusRef.current;
     previousFocusRef.current = null;
@@ -3716,7 +4078,7 @@ var TourFocusManager = ({
       restoreFocus();
     };
   }, [active, popoverNode, target.element]);
-  useEffect16(() => {
+  useEffect18(() => {
     if (!isBrowser) return;
     if (!active) return;
     const doc = popoverNode?.ownerDocument ?? target.element?.ownerDocument ?? document;
@@ -3925,8 +4287,8 @@ var TourFocusManager = ({
   const showPopoverRing = popoverRingActive && popoverRect;
   if (!showTargetRing && !showPopoverRing) return null;
   return createPortal3(
-    /* @__PURE__ */ jsxs2(Fragment, { children: [
-      showTargetRing && /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsxs3(Fragment, { children: [
+      showTargetRing && /* @__PURE__ */ jsx5(
         "div",
         {
           style: {
@@ -3943,7 +4305,7 @@ var TourFocusManager = ({
           "aria-hidden": true
         }
       ),
-      showPopoverRing && /* @__PURE__ */ jsx4(
+      showPopoverRing && /* @__PURE__ */ jsx5(
         "div",
         {
           style: {
@@ -3966,7 +4328,7 @@ var TourFocusManager = ({
 };
 
 // src/motion/useHudMotion.ts
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo14 } from "react";
 var DEFAULT_HIGHLIGHT_TRANSITION2 = {
   duration: 0.35,
   ease: "easeOut",
@@ -3993,7 +4355,7 @@ var DEFAULT_POPOVER_CONTENT_TRANSITION2 = {
 };
 var useHudMotion = () => {
   const adapter = useAnimationAdapter();
-  return useMemo12(() => {
+  return useMemo14(() => {
     const components = {
       ...adapter.components
     };
@@ -4011,12 +4373,12 @@ var useHudMotion = () => {
 };
 export {
   AnimationAdapterProvider,
+  DialogRegistryProvider,
   OverlayBackdrop,
   TourFocusManager,
   TourPopoverPortal,
   TourProvider,
   createPathString,
-  createRadixDialogHelpers,
   createWaitForPredicateController,
   defaultAnimationAdapter,
   defaultLabels,
@@ -4028,6 +4390,8 @@ export {
   useAnimationAdapter,
   useBodyScrollLock,
   useDelayAdvance,
+  useDialogRegistry,
+  useDialogRegistryOptional,
   useHiddenTargetFallback,
   useHudDescription,
   useHudMotion,
@@ -4036,6 +4400,7 @@ export {
   useHudTargetIssue,
   usePreferredAnimationAdapter,
   useRadixDialogAdapter,
+  useRadixTourDialog,
   useTour,
   useTourControls,
   useTourEvents,