@flowsterix/react 0.14.1 → 0.14.2

package/dist/index.cjs

@@ -1,6 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkFCOKCGV3cjs = require('./chunk-FCOKCGV3.cjs');
+
+var _chunkIMMALBJLcjs = require('./chunk-IMMALBJL.cjs');
 require('./chunk-HPVLOLCD.cjs');
 
 
@@ -276,6 +277,21 @@ var useAnimationAdapter = () => {
   return _react.useContext.call(void 0, AnimationAdapterContext);
 };
 var defaultAnimationAdapter = defaultAdapter;
+var tweenAnimationAdapter = {
+  components: defaultAdapter.components,
+  transitions: {
+    overlayHighlight: {
+      type: "tween",
+      duration: 0.35,
+      ease: [0.25, 1, 0.5, 1]
+    },
+    overlayFade: defaultAdapter.transitions.overlayFade,
+    popoverEntrance: defaultAdapter.transitions.popoverEntrance,
+    popoverExit: defaultAdapter.transitions.popoverExit,
+    popoverContent: defaultAdapter.transitions.popoverContent,
+    delayIndicator: defaultAdapter.transitions.delayIndicator
+  }
+};
 var reducedMotionAnimationAdapter = {
   components: defaultAdapter.components,
   transitions: {
@@ -361,6 +377,7 @@ var TourProvider = ({
   backdropInteraction: backdropInteractionProp = "passthrough",
   lockBodyScroll: lockBodyScrollProp = false,
   labels: labelsProp,
+  useSpringAnimations: useSpringAnimationsProp = true,
   onVersionMismatch
 }) => {
   const mergedLabels = _react.useMemo.call(void 0, 
@@ -848,8 +865,12 @@ var TourProvider = ({
       updateFlowStorage
     ]
   );
+  _react.useEffect.call(void 0, () => {
+    _chunkIMMALBJLcjs.setUseSpringAnimations.call(void 0, useSpringAnimationsProp);
+  }, [useSpringAnimationsProp]);
+  const effectiveDefaultAdapter = useSpringAnimationsProp ? animationAdapterProp : tweenAnimationAdapter;
   const resolvedAnimationAdapter = usePreferredAnimationAdapter({
-    defaultAdapter: animationAdapterProp,
+    defaultAdapter: effectiveDefaultAdapter,
     reducedMotionAdapter,
     enabled: autoDetectReducedMotion
   });
@@ -916,7 +937,7 @@ var TourProvider = ({
       }
     };
   }, []);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AnimationAdapterProvider, { adapter: resolvedAnimationAdapter, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LabelsProvider, { value: mergedLabels, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogRegistryProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TourContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkFCOKCGV3cjs.DevToolsContext.Provider, { value: devToolsContextValue, children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AnimationAdapterProvider, { adapter: resolvedAnimationAdapter, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LabelsProvider, { value: mergedLabels, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogRegistryProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TourContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkIMMALBJLcjs.DevToolsContext.Provider, { value: devToolsContextValue, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       DialogAutomationBridge,
       {
@@ -1152,13 +1173,69 @@ var computeVisibilityState = (element, rect, isScreen) => {
   }
   return "visible";
 };
-var scrollContainerBy = (container, topDelta, leftDelta, behavior) => {
+var clamp01 = (value) => Math.max(0, Math.min(1, value));
+var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+var windowScrollAnimationToken = 0;
+var getWindowScrollY = () => {
+  if (!_chunk7SAJNRGZcjs.isBrowser) return 0;
+  const scrollingElement = document.scrollingElement;
+  return _nullishCoalesce(_nullishCoalesce(_optionalChain([scrollingElement, 'optionalAccess', _37 => _37.scrollTop]), () => ( window.scrollY)), () => ( 0));
+};
+var setWindowScrollY = (value) => {
+  if (!_chunk7SAJNRGZcjs.isBrowser) return;
+  const scrollingElement = document.scrollingElement;
+  if (scrollingElement) {
+    scrollingElement.scrollTop = value;
+    return;
+  }
+  document.documentElement.scrollTop = value;
+  document.body.scrollTop = value;
+};
+var animateWindowScrollBy = (topDelta, durationMs) => {
+  if (!_chunk7SAJNRGZcjs.isBrowser) return;
+  if (!Number.isFinite(topDelta) || Math.abs(topDelta) < 0.5) return;
+  const startY = getWindowScrollY();
+  const targetY = startY + topDelta;
+  const scrollingElement = _nullishCoalesce(document.scrollingElement, () => ( document.documentElement));
+  const maxScrollY = Math.max(
+    0,
+    scrollingElement.scrollHeight - scrollingElement.clientHeight
+  );
+  const clampedTargetY = Math.max(0, Math.min(targetY, maxScrollY));
+  const distance = clampedTargetY - startY;
+  if (Math.abs(distance) < 0.5) return;
+  const duration = Math.max(0, durationMs);
+  const startTime = performance.now();
+  const token = windowScrollAnimationToken += 1;
+  const tick = (now) => {
+    if (token !== windowScrollAnimationToken) return;
+    const elapsed = now - startTime;
+    const progress = duration === 0 ? 1 : clamp01(elapsed / duration);
+    const eased = easeInOutCubic(progress);
+    const nextY = startY + distance * eased;
+    setWindowScrollY(nextY);
+    if (progress < 1) {
+      window.requestAnimationFrame(tick);
+    }
+  };
+  window.requestAnimationFrame(tick);
+};
+var scrollContainerBy = (container, topDelta, leftDelta, options) => {
   if (!_chunk7SAJNRGZcjs.isBrowser) return;
   if (Math.abs(topDelta) < 0.5 && Math.abs(leftDelta) < 0.5) {
     return;
   }
+  const behavior = _optionalChain([options, 'optionalAccess', _38 => _38.behavior]);
+  const durationMs = _optionalChain([options, 'optionalAccess', _39 => _39.durationMs]);
   const isRootContainer = container === document.body || container === document.documentElement || container === document.scrollingElement;
   if (isRootContainer) {
+    if (typeof durationMs === "number" && durationMs >= 0) {
+      animateWindowScrollBy(topDelta, durationMs);
+      if (Math.abs(leftDelta) >= 0.5) {
+        window.scrollBy({ left: leftDelta, behavior: _nullishCoalesce(behavior, () => ( "auto")) });
+      }
+      return;
+    }
     window.scrollBy({
       top: topDelta,
       left: leftDelta,
@@ -1178,7 +1255,7 @@ var scrollContainerBy = (container, topDelta, leftDelta, behavior) => {
   elementContainer.scrollTop += topDelta;
   elementContainer.scrollLeft += leftDelta;
 };
-var alignWithinViewport = (element, margin, behavior, mode) => {
+var alignWithinViewport = (element, margin, behavior, durationMs, mode) => {
   if (mode === "preserve") return;
   const viewportRect = _chunk7SAJNRGZcjs.getViewportRect.call(void 0, );
   const finalRect = _chunk7SAJNRGZcjs.getClientRect.call(void 0, element);
@@ -1187,14 +1264,19 @@ var alignWithinViewport = (element, margin, behavior, mode) => {
   const desiredTop = mode === "center" ? margin.top + (availableHeight - finalRect.height) / 2 : margin.top;
   const delta = finalRect.top - desiredTop;
   if (Math.abs(delta) < 0.5) return;
+  if (typeof durationMs === "number" && durationMs >= 0) {
+    animateWindowScrollBy(delta, durationMs);
+    return;
+  }
   window.scrollBy({
     top: delta,
     behavior: _nullishCoalesce(behavior, () => ( "auto"))
   });
 };
 var ensureElementInView = (element, margin, options) => {
-  const behavior = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _37 => _37.behavior]), () => ( "auto"));
-  const mode = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _38 => _38.mode]), () => ( "preserve"));
+  const behavior = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _40 => _40.behavior]), () => ( "auto"));
+  const durationMs = _optionalChain([options, 'optionalAccess', _41 => _41.durationMs]);
+  const mode = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _42 => _42.mode]), () => ( "preserve"));
   if (!_chunk7SAJNRGZcjs.isBrowser) return;
   const scrollParents = _chunk7SAJNRGZcjs.getScrollParents.call(void 0, element);
   const rootScroller = document.scrollingElement;
@@ -1217,7 +1299,10 @@ var ensureElementInView = (element, margin, options) => {
       leftDelta = targetRect.right - (containerRect.right - margin.right);
     }
     if (topDelta !== 0 || leftDelta !== 0) {
-      scrollContainerBy(container, topDelta, leftDelta, behavior);
+      scrollContainerBy(container, topDelta, leftDelta, {
+        behavior,
+        durationMs
+      });
     }
   }
   const viewportRect = _chunk7SAJNRGZcjs.getViewportRect.call(void 0, );
@@ -1235,13 +1320,20 @@ var ensureElementInView = (element, margin, options) => {
     viewportLeftDelta = finalRect.right - (viewportRect.right - margin.right);
   }
   if (viewportTopDelta !== 0 || viewportLeftDelta !== 0) {
-    window.scrollBy({
-      top: viewportTopDelta,
-      left: viewportLeftDelta,
-      behavior
-    });
+    if (typeof durationMs === "number" && durationMs >= 0) {
+      animateWindowScrollBy(viewportTopDelta, durationMs);
+      if (Math.abs(viewportLeftDelta) >= 0.5) {
+        window.scrollBy({ left: viewportLeftDelta, behavior: _nullishCoalesce(behavior, () => ( "auto")) });
+      }
+    } else {
+      window.scrollBy({
+        top: viewportTopDelta,
+        left: viewportLeftDelta,
+        behavior
+      });
+    }
   }
-  alignWithinViewport(element, margin, behavior, mode);
+  alignWithinViewport(element, margin, behavior, durationMs, mode);
 };
 var resolveStepTarget = (target) => {
   if (!_chunk7SAJNRGZcjs.isBrowser) return null;
@@ -1269,7 +1361,13 @@ var resolveStepTarget = (target) => {
 var useTourTarget = () => {
   const { activeStep, state, activeFlowId, flows } = useTour();
   const [targetInfo, setTargetInfo] = _react.useState.call(void 0, INITIAL_TARGET_INFO);
-  const autoScrollStateRef = _react.useRef.call(void 0, { stepId: null, checks: 0, stalledChecks: 0, done: false, lastRect: null });
+  const autoScrollStateRef = _react.useRef.call(void 0, {
+    stepId: null,
+    checks: 0,
+    stalledChecks: 0,
+    done: false,
+    lastRect: null
+  });
   const autoScrollRafRef = _react.useRef.call(void 0, null);
   const autoScrollTimeoutRef = _react.useRef.call(void 0, null);
   const lastRectRef = _react.useRef.call(void 0, null);
@@ -1292,7 +1390,22 @@ var useTourTarget = () => {
     return () => {
       initialScrollStepRef.current = null;
     };
-  }, [_optionalChain([activeStep, 'optionalAccess', _39 => _39.id])]);
+  }, [_optionalChain([activeStep, 'optionalAccess', _43 => _43.id])]);
+  _react.useEffect.call(void 0, () => {
+    if (!_chunk7SAJNRGZcjs.isBrowser) return;
+    if (!activeStep || !state || state.status !== "running") return;
+    if (typeof _optionalChain([activeStep, 'access', _44 => _44.targetBehavior, 'optionalAccess', _45 => _45.scrollDurationMs]) !== "number") return;
+    const html = document.documentElement;
+    const body = document.body;
+    const previousHtmlScrollBehavior = html.style.scrollBehavior;
+    const previousBodyScrollBehavior = body.style.scrollBehavior;
+    html.style.scrollBehavior = "auto";
+    body.style.scrollBehavior = "auto";
+    return () => {
+      html.style.scrollBehavior = previousHtmlScrollBehavior;
+      body.style.scrollBehavior = previousBodyScrollBehavior;
+    };
+  }, [_optionalChain([activeStep, 'optionalAccess', _46 => _46.id]), _optionalChain([activeStep, 'optionalAccess', _47 => _47.targetBehavior, 'optionalAccess', _48 => _48.scrollDurationMs]), _optionalChain([state, 'optionalAccess', _49 => _49.status])]);
   _react.useLayoutEffect.call(void 0, () => {
     if (!_chunk7SAJNRGZcjs.isBrowser) return;
     if (!activeStep) return;
@@ -1304,20 +1417,23 @@ var useTourTarget = () => {
     }
     initialScrollStepRef.current = activeStep.id;
     const margin = resolveScrollMargin(
-      _optionalChain([activeStep, 'access', _40 => _40.targetBehavior, 'optionalAccess', _41 => _41.scrollMargin]),
+      _optionalChain([activeStep, 'access', _50 => _50.targetBehavior, 'optionalAccess', _51 => _51.scrollMargin]),
       DEFAULT_SCROLL_MARGIN
     );
-    const scrollMode = _nullishCoalesce(_optionalChain([activeStep, 'access', _42 => _42.targetBehavior, 'optionalAccess', _43 => _43.scrollMode]), () => ( DEFAULT_SCROLL_MODE));
+    const scrollMode = _nullishCoalesce(_optionalChain([activeStep, 'access', _52 => _52.targetBehavior, 'optionalAccess', _53 => _53.scrollMode]), () => ( DEFAULT_SCROLL_MODE));
+    const scrollDurationMs = _optionalChain([activeStep, 'access', _54 => _54.targetBehavior, 'optionalAccess', _55 => _55.scrollDurationMs]);
     const hasLiveRect = targetInfo.rectSource === "live";
     const scrollBehavior = hasLiveRect ? "smooth" : "auto";
     ensureElementInView(targetInfo.element, margin, {
       behavior: scrollBehavior,
+      durationMs: scrollBehavior === "smooth" ? scrollDurationMs : void 0,
       mode: scrollMode
     });
   }, [
-    _optionalChain([activeStep, 'optionalAccess', _44 => _44.id]),
-    _optionalChain([activeStep, 'optionalAccess', _45 => _45.targetBehavior, 'optionalAccess', _46 => _46.scrollMargin]),
-    _optionalChain([activeStep, 'optionalAccess', _47 => _47.targetBehavior, 'optionalAccess', _48 => _48.scrollMode]),
+    _optionalChain([activeStep, 'optionalAccess', _56 => _56.id]),
+    _optionalChain([activeStep, 'optionalAccess', _57 => _57.targetBehavior, 'optionalAccess', _58 => _58.scrollMargin]),
+    _optionalChain([activeStep, 'optionalAccess', _59 => _59.targetBehavior, 'optionalAccess', _60 => _60.scrollMode]),
+    _optionalChain([activeStep, 'optionalAccess', _61 => _61.targetBehavior, 'optionalAccess', _62 => _62.scrollDurationMs]),
     targetInfo.rect,
     targetInfo.lastResolvedRect,
     targetInfo.element,
@@ -1356,10 +1472,10 @@ var useTourTarget = () => {
     const currentStep = activeStep;
     const activeFlow = activeFlowId ? _nullishCoalesce(flows.get(activeFlowId), () => ( null)) : null;
     const isScreen = currentStep.target === "screen";
-    const waitForSelectorRaw = _optionalChain([currentStep, 'access', _49 => _49.waitFor, 'optionalAccess', _50 => _50.selector]);
+    const waitForSelectorRaw = _optionalChain([currentStep, 'access', _63 => _63.waitFor, 'optionalAccess', _64 => _64.selector]);
     const waitForSelector = typeof waitForSelectorRaw === "string" ? waitForSelectorRaw.trim() : void 0;
     const hasWaitForSelector = Boolean(waitForSelector);
-    const waitForTimeout = Math.max(0, _nullishCoalesce(_optionalChain([currentStep, 'access', _51 => _51.waitFor, 'optionalAccess', _52 => _52.timeout]), () => ( 8e3)));
+    const waitForTimeout = Math.max(0, _nullishCoalesce(_optionalChain([currentStep, 'access', _65 => _65.waitFor, 'optionalAccess', _66 => _66.timeout]), () => ( 8e3)));
     const waitContext = activeFlow ? {
       flow: activeFlow,
       state,
@@ -1421,7 +1537,7 @@ var useTourTarget = () => {
     };
     const isWaitForSatisfied = () => {
       const selectorReady = !hasWaitForSelector || isWaitForSelectorSatisfied();
-      const predicateReady = _nullishCoalesce(_optionalChain([waitForPredicateController, 'optionalAccess', _53 => _53.isSatisfied, 'call', _54 => _54()]), () => ( true));
+      const predicateReady = _nullishCoalesce(_optionalChain([waitForPredicateController, 'optionalAccess', _67 => _67.isSatisfied, 'call', _68 => _68()]), () => ( true));
       return selectorReady && predicateReady;
     };
     function updateTargetState(status, rectOverride) {
@@ -1543,11 +1659,11 @@ var useTourTarget = () => {
           window.visualViewport.addEventListener("resize", onViewportChange);
           window.visualViewport.addEventListener("scroll", onViewportChange);
           cleanupFns.push(() => {
-            _optionalChain([window, 'access', _55 => _55.visualViewport, 'optionalAccess', _56 => _56.removeEventListener, 'call', _57 => _57(
+            _optionalChain([window, 'access', _69 => _69.visualViewport, 'optionalAccess', _70 => _70.removeEventListener, 'call', _71 => _71(
               "resize",
               onViewportChange
             )]);
-            _optionalChain([window, 'access', _58 => _58.visualViewport, 'optionalAccess', _59 => _59.removeEventListener, 'call', _60 => _60(
+            _optionalChain([window, 'access', _72 => _72.visualViewport, 'optionalAccess', _73 => _73.removeEventListener, 'call', _74 => _74(
               "scroll",
               onViewportChange
             )]);
@@ -1597,7 +1713,7 @@ var useTourTarget = () => {
             subtree: true
           });
           cleanupFns.push(() => {
-            _optionalChain([mutationObserver, 'optionalAccess', _61 => _61.disconnect, 'call', _62 => _62()]);
+            _optionalChain([mutationObserver, 'optionalAccess', _75 => _75.disconnect, 'call', _76 => _76()]);
             mutationObserver = null;
           });
         }
@@ -1644,7 +1760,7 @@ var useTourTarget = () => {
       clearResolvePolling();
       clearWaitForPoll();
       resetObservers();
-      _optionalChain([waitForPredicateController, 'optionalAccess', _63 => _63.stop, 'call', _64 => _64()]);
+      _optionalChain([waitForPredicateController, 'optionalAccess', _77 => _77.stop, 'call', _78 => _78()]);
       waitForPredicateController = null;
     };
   }, [activeStep, activeFlowId, flows, state]);
@@ -1679,7 +1795,8 @@ var useTourTarget = () => {
       return;
     }
     const { element } = targetInfo;
-    const scrollMode = _nullishCoalesce(_optionalChain([activeStep, 'access', _65 => _65.targetBehavior, 'optionalAccess', _66 => _66.scrollMode]), () => ( "center"));
+    const scrollMode = _nullishCoalesce(_optionalChain([activeStep, 'access', _79 => _79.targetBehavior, 'optionalAccess', _80 => _80.scrollMode]), () => ( "center"));
+    const scrollDurationMs = _optionalChain([activeStep, 'access', _81 => _81.targetBehavior, 'optionalAccess', _82 => _82.scrollDurationMs]);
     const runCheck = () => {
       autoScrollRafRef.current = null;
       if (!_chunk7SAJNRGZcjs.isBrowser) return;
@@ -1688,7 +1805,7 @@ var useTourTarget = () => {
       const rect = _chunk7SAJNRGZcjs.getClientRect.call(void 0, element);
       const viewport = _chunk7SAJNRGZcjs.getViewportRect.call(void 0, );
       const margin = resolveScrollMargin(
-        _optionalChain([activeStep, 'access', _67 => _67.targetBehavior, 'optionalAccess', _68 => _68.scrollMargin]),
+        _optionalChain([activeStep, 'access', _83 => _83.targetBehavior, 'optionalAccess', _84 => _84.scrollMargin]),
         DEFAULT_SCROLL_MARGIN
       );
       const fitsHeight = rect.height <= viewport.height - (margin.top + margin.bottom);
@@ -1713,10 +1830,14 @@ var useTourTarget = () => {
         autoState.stalledChecks += 1;
       }
       const behavior = autoState.stalledChecks >= STALLED_CHECKS_BEFORE_AUTO ? "auto" : "smooth";
-      ensureElementInView(element, margin, {
-        behavior,
-        mode: scrollMode
-      });
+      const shouldDispatchScroll = behavior === "auto" || !hasProgress || autoState.checks <= 1;
+      if (shouldDispatchScroll) {
+        ensureElementInView(element, margin, {
+          behavior,
+          durationMs: behavior === "smooth" ? scrollDurationMs : void 0,
+          mode: scrollMode
+        });
+      }
       autoScrollTimeoutRef.current = globalThis.setTimeout(() => {
         autoScrollRafRef.current = window.requestAnimationFrame(runCheck);
       }, 120);
@@ -1724,7 +1845,12 @@ var useTourTarget = () => {
     cancelAutoScrollLoop();
     autoScrollRafRef.current = window.requestAnimationFrame(runCheck);
     return cancelAutoScrollLoop;
-  }, [activeStep, _optionalChain([activeStep, 'optionalAccess', _69 => _69.targetBehavior, 'optionalAccess', _70 => _70.scrollMode]), targetInfo]);
+  }, [
+    activeStep,
+    _optionalChain([activeStep, 'optionalAccess', _85 => _85.targetBehavior, 'optionalAccess', _86 => _86.scrollMode]),
+    _optionalChain([activeStep, 'optionalAccess', _87 => _87.targetBehavior, 'optionalAccess', _88 => _88.scrollDurationMs]),
+    targetInfo
+  ]);
   return targetInfo;
 };
 
@@ -1786,7 +1912,7 @@ var useAdvanceRules = (target) => {
       while (cleanupFns.length > 0) {
         const dispose = cleanupFns.pop();
         try {
-          _optionalChain([dispose, 'optionalCall', _71 => _71()]);
+          _optionalChain([dispose, 'optionalCall', _89 => _89()]);
         } catch (error) {
           console.warn("[tour][advance] cleanup failed", error);
         }
@@ -1956,10 +2082,10 @@ var useHiddenTargetFallback = ({
   const timeoutRef = _react.useRef.call(void 0, null);
   const graceTimeoutRef = _react.useRef.call(void 0, null);
   const skipTriggeredRef = _react.useRef.call(void 0, false);
-  const hiddenMode = _nullishCoalesce(_optionalChain([step, 'optionalAccess', _72 => _72.targetBehavior, 'optionalAccess', _73 => _73.hidden]), () => ( "screen"));
+  const hiddenMode = _nullishCoalesce(_optionalChain([step, 'optionalAccess', _90 => _90.targetBehavior, 'optionalAccess', _91 => _91.hidden]), () => ( "screen"));
   const hiddenDelayMs = Math.max(
     0,
-    _nullishCoalesce(_optionalChain([step, 'optionalAccess', _74 => _74.targetBehavior, 'optionalAccess', _75 => _75.hiddenDelayMs]), () => ( DEFAULT_DELAY_MS))
+    _nullishCoalesce(_optionalChain([step, 'optionalAccess', _92 => _92.targetBehavior, 'optionalAccess', _93 => _93.hiddenDelayMs]), () => ( DEFAULT_DELAY_MS))
   );
   const clearPendingTimeout = () => {
     if (timeoutRef.current !== null) {
@@ -1985,7 +2111,7 @@ var useHiddenTargetFallback = ({
       clearPendingTimeout();
       clearGraceTimeout();
     };
-  }, [_optionalChain([step, 'optionalAccess', _76 => _76.id])]);
+  }, [_optionalChain([step, 'optionalAccess', _94 => _94.id])]);
   _react.useEffect.call(void 0, () => {
     if (!_chunk7SAJNRGZcjs.isBrowser) return void 0;
     if (!step) return void 0;
@@ -2073,7 +2199,7 @@ var useRouteMismatch = (step) => {
       setCurrentPath(path);
     });
   }, []);
-  const expectedRoute = _optionalChain([step, 'optionalAccess', _77 => _77.route]);
+  const expectedRoute = _optionalChain([step, 'optionalAccess', _95 => _95.route]);
   const isRouteMismatch = step !== null && expectedRoute !== void 0 && !_chunk7SAJNRGZcjs.matchRoute.call(void 0, { pattern: expectedRoute, path: currentPath });
   return {
     isRouteMismatch,
@@ -2141,7 +2267,7 @@ var useHudState = (options = {}) => {
     if (!activeFlowId) return false;
     return flowFilter.includes(activeFlowId);
   }, [activeFlowId, flowFilter]);
-  const isRunning = _optionalChain([state, 'optionalAccess', _78 => _78.status]) === "running";
+  const isRunning = _optionalChain([state, 'optionalAccess', _96 => _96.status]) === "running";
   const runningState = isRunning && matchesFlowFilter ? state : null;
   const runningStep = runningState && activeStep ? activeStep : null;
   const [shouldRender, setShouldRender] = _react.useState.call(void 0, 
@@ -2151,7 +2277,7 @@ var useHudState = (options = {}) => {
     if (runningStep) {
       setShouldRender(true);
     }
-  }, [_optionalChain([runningStep, 'optionalAccess', _79 => _79.id])]);
+  }, [_optionalChain([runningStep, 'optionalAccess', _97 => _97.id])]);
   _react.useEffect.call(void 0, () => {
     if (!shouldRender) return;
     if (runningStep) return;
@@ -2196,7 +2322,7 @@ var useHudState = (options = {}) => {
   });
   _react.useEffect.call(void 0, () => {
     if (isRouteMismatch) return;
-    if (_optionalChain([activeStep, 'optionalAccess', _80 => _80.route]) !== void 0) return;
+    if (_optionalChain([activeStep, 'optionalAccess', _98 => _98.route]) !== void 0) return;
     if (isInGracePeriod) return;
     if (target.visibility !== "missing") return;
     if (target.isScreen) return;
@@ -2205,7 +2331,7 @@ var useHudState = (options = {}) => {
     pause();
   }, [
     isRouteMismatch,
-    _optionalChain([activeStep, 'optionalAccess', _81 => _81.route]),
+    _optionalChain([activeStep, 'optionalAccess', _99 => _99.route]),
     isInGracePeriod,
     target.visibility,
     target.isScreen,
@@ -2222,11 +2348,11 @@ var useHudState = (options = {}) => {
   }, [currentPath, state, resume]);
   _react.useEffect.call(void 0, () => {
     pausedForMissingTargetRef.current = null;
-  }, [_optionalChain([activeStep, 'optionalAccess', _82 => _82.id])]);
+  }, [_optionalChain([activeStep, 'optionalAccess', _100 => _100.id])]);
   const canRenderStep = Boolean(runningStep && runningState);
   const focusTrapActive = canRenderStep;
-  const flowHudOptions = matchesFlowFilter && activeFlowId ? _nullishCoalesce(_optionalChain([flows, 'access', _83 => _83.get, 'call', _84 => _84(activeFlowId), 'optionalAccess', _85 => _85.hud]), () => ( null)) : null;
-  const hudRenderMode = _nullishCoalesce(_optionalChain([flowHudOptions, 'optionalAccess', _86 => _86.render]), () => ( "default"));
+  const flowHudOptions = matchesFlowFilter && activeFlowId ? _nullishCoalesce(_optionalChain([flows, 'access', _101 => _101.get, 'call', _102 => _102(activeFlowId), 'optionalAccess', _103 => _103.hud]), () => ( null)) : null;
+  const hudRenderMode = _nullishCoalesce(_optionalChain([flowHudOptions, 'optionalAccess', _104 => _104.render]), () => ( "default"));
   return {
     state,
     runningState,
@@ -2305,16 +2431,16 @@ var useTourControls = () => {
       };
     }
     const definition = activeFlowId ? flows.get(activeFlowId) : null;
-    const totalSteps = _nullishCoalesce(_optionalChain([definition, 'optionalAccess', _87 => _87.steps, 'access', _88 => _88.length]), () => ( 0));
+    const totalSteps = _nullishCoalesce(_optionalChain([definition, 'optionalAccess', _105 => _105.steps, 'access', _106 => _106.length]), () => ( 0));
     const stepIndex = state.stepIndex;
     const isFirst2 = stepIndex <= 0;
     const isLast2 = totalSteps > 0 && stepIndex >= totalSteps - 1;
     const previousStep = !definition || stepIndex <= 0 ? null : definition.steps[stepIndex - 1];
     const advanceRules = _nullishCoalesce(activeStep.advance, () => ( []));
     const hasAdvanceRules = advanceRules.length > 0;
-    const previousAdvanceRules = _nullishCoalesce(_optionalChain([previousStep, 'optionalAccess', _89 => _89.advance]), () => ( []));
-    const backControlState = _nullishCoalesce(_optionalChain([activeStep, 'access', _90 => _90.controls, 'optionalAccess', _91 => _91.back]), () => ( "auto"));
-    const nextControlState = _nullishCoalesce(_optionalChain([activeStep, 'access', _92 => _92.controls, 'optionalAccess', _93 => _93.next]), () => ( "auto"));
+    const previousAdvanceRules = _nullishCoalesce(_optionalChain([previousStep, 'optionalAccess', _107 => _107.advance]), () => ( []));
+    const backControlState = _nullishCoalesce(_optionalChain([activeStep, 'access', _108 => _108.controls, 'optionalAccess', _109 => _109.back]), () => ( "auto"));
+    const nextControlState = _nullishCoalesce(_optionalChain([activeStep, 'access', _110 => _110.controls, 'optionalAccess', _111 => _111.next]), () => ( "auto"));
     const showBackButton2 = backControlState !== "hidden" && !isFirst2 && !didPreviousAdvanceViaRoute(previousAdvanceRules);
     const backDisabled2 = backControlState === "disabled";
     const manualAdvancePresent = hasManualAdvance(advanceRules);
@@ -2394,8 +2520,8 @@ var isInteractiveElement = (node) => {
   return Boolean(node.closest(interactiveSelector));
 };
 var useHudShortcuts = (target, options) => {
-  const enabled = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _94 => _94.enabled]), () => ( true));
-  const escapeEnabled = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _95 => _95.escape]), () => ( true));
+  const enabled = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _112 => _112.enabled]), () => ( true));
+  const escapeEnabled = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _113 => _113.escape]), () => ( true));
   const { state } = useTour();
   const { cancel, canGoBack, goBack, canGoNext, goNext, isActive } = useTourControls();
   _react.useEffect.call(void 0, () => {
@@ -2571,7 +2697,7 @@ var deriveTargetIssue = (params) => {
 };
 var useHudTargetIssue = (target, options) => {
   const labels = useTourLabels();
-  const delayMs = Math.max(0, _nullishCoalesce(_optionalChain([options, 'optionalAccess', _96 => _96.delayMs]), () => ( 500)));
+  const delayMs = Math.max(0, _nullishCoalesce(_optionalChain([options, 'optionalAccess', _114 => _114.delayMs]), () => ( 500)));
   const [armed, setArmed] = _react.useState.call(void 0, false);
   const rawIssue = _react.useMemo.call(void 0, 
     () => deriveTargetIssue({ target, labels }),
@@ -2591,7 +2717,7 @@ var useHudTargetIssue = (target, options) => {
       setArmed(false);
       globalThis.clearTimeout(timeoutId);
     };
-  }, [delayMs, _optionalChain([rawIssue, 'optionalAccess', _97 => _97.type])]);
+  }, [delayMs, _optionalChain([rawIssue, 'optionalAccess', _115 => _115.type])]);
   return {
     issue: armed ? rawIssue : null,
     rawIssue
@@ -2613,15 +2739,15 @@ var useTourHud = (options = {}) => {
   const hudState = useHudState();
   const disableDefaultHud = hudState.hudRenderMode === "none";
   const [popoverNode, setPopoverNode] = _react.useState.call(void 0, null);
-  const popoverOptions = _optionalChain([hudState, 'access', _98 => _98.flowHudOptions, 'optionalAccess', _99 => _99.popover]);
+  const popoverOptions = _optionalChain([hudState, 'access', _116 => _116.flowHudOptions, 'optionalAccess', _117 => _117.popover]);
   const description = useHudDescription({
     step: hudState.runningStep,
-    fallbackAriaDescribedBy: _optionalChain([popoverOptions, 'optionalAccess', _100 => _100.ariaDescribedBy])
+    fallbackAriaDescribedBy: _optionalChain([popoverOptions, 'optionalAccess', _118 => _118.ariaDescribedBy])
   });
   const targetIssue = useHudTargetIssue(hudState.hudTarget);
   const viewport = useViewportRect();
   const shouldLockBodyScroll = Boolean(
-    bodyScrollLock && (_nullishCoalesce(_optionalChain([hudState, 'access', _101 => _101.flowHudOptions, 'optionalAccess', _102 => _102.behavior, 'optionalAccess', _103 => _103.lockBodyScroll]), () => ( lockBodyScroll))) && hudState.focusTrapActive
+    bodyScrollLock && (_nullishCoalesce(_optionalChain([hudState, 'access', _119 => _119.flowHudOptions, 'optionalAccess', _120 => _120.behavior, 'optionalAccess', _121 => _121.lockBodyScroll]), () => ( lockBodyScroll))) && hudState.focusTrapActive
   );
   const { isConstrainedMode: isConstrainedScrollActive } = useConstrainedScrollLock({
     enabled: shouldLockBodyScroll,
@@ -2641,20 +2767,20 @@ var useTourHud = (options = {}) => {
   const overlay = {
     padding: overlayPadding,
     radius: overlayRadius,
-    interactionMode: _nullishCoalesce(_optionalChain([hudState, 'access', _104 => _104.flowHudOptions, 'optionalAccess', _105 => _105.backdrop, 'optionalAccess', _106 => _106.interaction]), () => ( backdropInteraction))
+    interactionMode: _nullishCoalesce(_optionalChain([hudState, 'access', _122 => _122.flowHudOptions, 'optionalAccess', _123 => _123.backdrop, 'optionalAccess', _124 => _124.interaction]), () => ( backdropInteraction))
   };
   const popover = _react.useMemo.call(void 0, () => {
     return {
-      offset: _nullishCoalesce(_optionalChain([popoverOptions, 'optionalAccess', _107 => _107.offset]), () => ( 32)),
-      role: _nullishCoalesce(_optionalChain([popoverOptions, 'optionalAccess', _108 => _108.role]), () => ( "dialog")),
-      ariaLabel: _optionalChain([popoverOptions, 'optionalAccess', _109 => _109.ariaLabel]),
-      ariaDescribedBy: _optionalChain([popoverOptions, 'optionalAccess', _110 => _110.ariaDescribedBy]),
-      ariaModal: _nullishCoalesce(_optionalChain([popoverOptions, 'optionalAccess', _111 => _111.ariaModal]), () => ( false)),
-      width: _optionalChain([popoverOptions, 'optionalAccess', _112 => _112.width]),
-      maxWidth: _optionalChain([popoverOptions, 'optionalAccess', _113 => _113.maxWidth]),
-      placement: _optionalChain([hudState, 'access', _114 => _114.runningStep, 'optionalAccess', _115 => _115.placement])
+      offset: _nullishCoalesce(_optionalChain([popoverOptions, 'optionalAccess', _125 => _125.offset]), () => ( 32)),
+      role: _nullishCoalesce(_optionalChain([popoverOptions, 'optionalAccess', _126 => _126.role]), () => ( "dialog")),
+      ariaLabel: _optionalChain([popoverOptions, 'optionalAccess', _127 => _127.ariaLabel]),
+      ariaDescribedBy: _optionalChain([popoverOptions, 'optionalAccess', _128 => _128.ariaDescribedBy]),
+      ariaModal: _nullishCoalesce(_optionalChain([popoverOptions, 'optionalAccess', _129 => _129.ariaModal]), () => ( false)),
+      width: _optionalChain([popoverOptions, 'optionalAccess', _130 => _130.width]),
+      maxWidth: _optionalChain([popoverOptions, 'optionalAccess', _131 => _131.maxWidth]),
+      placement: _optionalChain([hudState, 'access', _132 => _132.runningStep, 'optionalAccess', _133 => _133.placement])
     };
-  }, [_optionalChain([hudState, 'access', _116 => _116.runningStep, 'optionalAccess', _117 => _117.placement]), popoverOptions]);
+  }, [_optionalChain([hudState, 'access', _134 => _134.runningStep, 'optionalAccess', _135 => _135.placement]), popoverOptions]);
   const descriptionResult = _react.useMemo.call(void 0, () => {
     return {
       ...description,
@@ -2667,14 +2793,14 @@ var useTourHud = (options = {}) => {
       target: hudState.hudTarget,
       popoverNode,
       setPopoverNode,
-      guardElementFocusRing: _optionalChain([hudState, 'access', _118 => _118.flowHudOptions, 'optionalAccess', _119 => _119.guardElementFocusRing])
+      guardElementFocusRing: _optionalChain([hudState, 'access', _136 => _136.flowHudOptions, 'optionalAccess', _137 => _137.guardElementFocusRing])
     }),
     [
       hudState.focusTrapActive,
       hudState.hudTarget,
       popoverNode,
       setPopoverNode,
-      _optionalChain([hudState, 'access', _120 => _120.flowHudOptions, 'optionalAccess', _121 => _121.guardElementFocusRing])
+      _optionalChain([hudState, 'access', _138 => _138.flowHudOptions, 'optionalAccess', _139 => _139.guardElementFocusRing])
     ]
   );
   return {
@@ -2696,6 +2822,7 @@ var useTourHud = (options = {}) => {
 var DEFAULT_PADDING = 12;
 var DEFAULT_RADIUS = 12;
 var DEFAULT_EDGE_BUFFER = 0;
+var rectIntersectsViewport = (rect, viewport) => rect.bottom > 0 && rect.right > 0 && rect.top < viewport.height && rect.left < viewport.width;
 var useTourOverlay = (options) => {
   const {
     target,
@@ -2707,9 +2834,13 @@ var useTourOverlay = (options) => {
   } = options;
   const hasShownRef = _react.useRef.call(void 0, false);
   const lastReadyTargetRef = _react.useRef.call(void 0, null);
+  const viewport = _chunk7SAJNRGZcjs.getViewportRect.call(void 0, );
+  const liveRectIsInViewport = Boolean(
+    target.isScreen || target.rect && rectIntersectsViewport(target.rect, viewport)
+  );
   _react.useEffect.call(void 0, () => {
     if (!_chunk7SAJNRGZcjs.isBrowser) return;
-    if (target.status === "ready") {
+    if (target.status === "ready" && liveRectIsInViewport) {
       hasShownRef.current = true;
       lastReadyTargetRef.current = {
         ...target,
@@ -2721,12 +2852,11 @@ var useTourOverlay = (options) => {
       hasShownRef.current = false;
       lastReadyTargetRef.current = null;
     }
-  }, [target, isInGracePeriod]);
-  const viewport = _chunk7SAJNRGZcjs.getViewportRect.call(void 0, );
+  }, [target, isInGracePeriod, liveRectIsInViewport]);
   const cachedTarget = lastReadyTargetRef.current;
-  const highlightTarget = target.status === "ready" ? target : cachedTarget;
-  const resolvedRect = _nullishCoalesce(_optionalChain([highlightTarget, 'optionalAccess', _122 => _122.rect]), () => ( target.rect));
-  const resolvedIsScreen = _nullishCoalesce(_optionalChain([highlightTarget, 'optionalAccess', _123 => _123.isScreen]), () => ( target.isScreen));
+  const highlightTarget = target.status === "ready" && liveRectIsInViewport ? target : cachedTarget;
+  const resolvedRect = _nullishCoalesce(_optionalChain([highlightTarget, 'optionalAccess', _140 => _140.rect]), () => ( (cachedTarget ? null : _nullishCoalesce(target.rect, () => ( null)))));
+  const resolvedIsScreen = _nullishCoalesce(_optionalChain([highlightTarget, 'optionalAccess', _141 => _141.isScreen]), () => ( target.isScreen));
   const expandedRect = resolvedIsScreen || !resolvedRect ? viewport : _chunk7SAJNRGZcjs.expandRect.call(void 0, resolvedRect, padding);
   const safeBuffer = Math.max(0, edgeBuffer);
   const insetTop = expandedRect.top <= 0 ? Math.min(safeBuffer, Math.max(0, expandedRect.height) / 2) : 0;
@@ -2906,7 +3036,7 @@ var DEFAULT_ENABLED = true;
 var useTourFocusDominance = (options = {}) => {
   const { enabled = DEFAULT_ENABLED } = options;
   const { state } = useTour();
-  const isRunning = _optionalChain([state, 'optionalAccess', _124 => _124.status]) === "running";
+  const isRunning = _optionalChain([state, 'optionalAccess', _142 => _142.status]) === "running";
   const active = Boolean(enabled && isRunning);
   return {
     active,
@@ -2970,11 +3100,11 @@ var useRadixTourDialog = (params) => {
   const lastStepIndexRef = _react.useRef.call(void 0, -1);
   const isResumeRef = _react.useRef.call(void 0, false);
   const flow = activeFlowId ? flows.get(activeFlowId) : void 0;
-  const dialogConfig = _optionalChain([flow, 'optionalAccess', _125 => _125.dialogs, 'optionalAccess', _126 => _126[dialogId]]);
+  const dialogConfig = _optionalChain([flow, 'optionalAccess', _143 => _143.dialogs, 'optionalAccess', _144 => _144[dialogId]]);
   const currentStep = flow && state && state.stepIndex >= 0 ? flow.steps[state.stepIndex] : void 0;
-  const isStepActive = _optionalChain([currentStep, 'optionalAccess', _127 => _127.dialogId]) === dialogId;
+  const isStepActive = _optionalChain([currentStep, 'optionalAccess', _145 => _145.dialogId]) === dialogId;
   const autoOpenConfig = resolveAutoOpen2(dialogConfig);
-  const autoClose = _nullishCoalesce(_optionalChain([dialogConfig, 'optionalAccess', _128 => _128.autoClose]), () => ( "differentDialog"));
+  const autoClose = _nullishCoalesce(_optionalChain([dialogConfig, 'optionalAccess', _146 => _146.autoClose]), () => ( "differentDialog"));
   const shouldBeOpen = _react.useMemo.call(void 0, () => {
     if (!isStepActive) return false;
     return true;
@@ -3006,7 +3136,7 @@ var useRadixTourDialog = (params) => {
     if (previousStepIndex === currentStepIndex) return;
     lastStepIndexRef.current = currentStepIndex;
     const previousStep = previousStepIndex >= 0 ? flow.steps[previousStepIndex] : void 0;
-    const wasActive = _optionalChain([previousStep, 'optionalAccess', _129 => _129.dialogId]) === dialogId;
+    const wasActive = _optionalChain([previousStep, 'optionalAccess', _147 => _147.dialogId]) === dialogId;
     if (isStepActive && !wasActive) {
       const shouldAutoOpen = wasResume ? autoOpenConfig.onResume : autoOpenConfig.onEnter;
       if (shouldAutoOpen) {
@@ -3044,7 +3174,7 @@ var useRadixTourDialog = (params) => {
       const step = payload.previousStep;
       if (step.dialogId !== dialogId) return;
       const nextStep = payload.currentStep;
-      if (_optionalChain([nextStep, 'optionalAccess', _130 => _130.dialogId]) === dialogId) {
+      if (_optionalChain([nextStep, 'optionalAccess', _148 => _148.dialogId]) === dialogId) {
         return;
       }
       if (autoClose === "always" || autoClose === "differentDialog") {
@@ -3165,7 +3295,7 @@ var useDelayAdvance = () => {
   }, [delayInfo]);
   return _react.useMemo.call(void 0, () => {
     const matchingStep = !!delayInfo && !!activeStep && activeStep.id === delayInfo.stepId;
-    const isRunning = matchingStep && _optionalChain([state, 'optionalAccess', _131 => _131.status]) === "running";
+    const isRunning = matchingStep && _optionalChain([state, 'optionalAccess', _149 => _149.status]) === "running";
     if (!delayInfo) {
       return {
         isActive: false,
@@ -3314,19 +3444,19 @@ var OverlayBackdrop = ({
   const defaultInsetShadow = "inset 0 0 0 2px rgba(56,189,248,0.4), inset 0 0 0 8px rgba(15,23,42,0.3)";
   const highlightAppearance = shadow ? { boxShadow: shadow } : { boxShadow: defaultInsetShadow };
   const { MotionDiv, MotionSvg, MotionDefs, MotionMask, MotionRect } = adapter.components;
-  const highlightTransition = _nullishCoalesce(_nullishCoalesce(_optionalChain([transitionsOverride, 'optionalAccess', _132 => _132.overlayHighlight]), () => ( adapter.transitions.overlayHighlight)), () => ( DEFAULT_HIGHLIGHT_TRANSITION));
+  const highlightTransition = _nullishCoalesce(_nullishCoalesce(_optionalChain([transitionsOverride, 'optionalAccess', _150 => _150.overlayHighlight]), () => ( adapter.transitions.overlayHighlight)), () => ( DEFAULT_HIGHLIGHT_TRANSITION));
   const snapTransition = { type: "tween", duration: 0 };
   const resolvedHighlightTransition = shouldSnapHighlight ? snapTransition : highlightTransition;
-  const overlayTransition = _nullishCoalesce(_nullishCoalesce(_optionalChain([transitionsOverride, 'optionalAccess', _133 => _133.overlayFade]), () => ( adapter.transitions.overlayFade)), () => ( DEFAULT_OVERLAY_TRANSITION));
-  const highlightCollapseTransition = highlight.isScreen ? snapTransition : _nullishCoalesce(_optionalChain([transitionsOverride, 'optionalAccess', _134 => _134.overlayHighlightCollapse]), () => ( DEFAULT_HIGHLIGHT_COLLAPSE_TRANSITION));
+  const overlayTransition = _nullishCoalesce(_nullishCoalesce(_optionalChain([transitionsOverride, 'optionalAccess', _151 => _151.overlayFade]), () => ( adapter.transitions.overlayFade)), () => ( DEFAULT_OVERLAY_TRANSITION));
+  const highlightCollapseTransition = highlight.isScreen ? snapTransition : _nullishCoalesce(_optionalChain([transitionsOverride, 'optionalAccess', _152 => _152.overlayHighlightCollapse]), () => ( DEFAULT_HIGHLIGHT_COLLAPSE_TRANSITION));
   const highlightRectTransition = hasHighlightBounds ? resolvedHighlightTransition : highlightCollapseTransition;
   const highlightRectAnimation = shouldMask ? {
-    x: _nullishCoalesce(_optionalChain([highlight, 'access', _135 => _135.rect, 'optionalAccess', _136 => _136.left]), () => ( highlight.centerX)),
-    y: _nullishCoalesce(_optionalChain([highlight, 'access', _137 => _137.rect, 'optionalAccess', _138 => _138.top]), () => ( highlight.centerY)),
-    width: _nullishCoalesce(_optionalChain([highlight, 'access', _139 => _139.rect, 'optionalAccess', _140 => _140.width]), () => ( 0)),
-    height: _nullishCoalesce(_optionalChain([highlight, 'access', _141 => _141.rect, 'optionalAccess', _142 => _142.height]), () => ( 0)),
-    rx: _nullishCoalesce(_optionalChain([highlight, 'access', _143 => _143.rect, 'optionalAccess', _144 => _144.radius]), () => ( 0)),
-    ry: _nullishCoalesce(_optionalChain([highlight, 'access', _145 => _145.rect, 'optionalAccess', _146 => _146.radius]), () => ( 0))
+    x: _nullishCoalesce(_optionalChain([highlight, 'access', _153 => _153.rect, 'optionalAccess', _154 => _154.left]), () => ( highlight.centerX)),
+    y: _nullishCoalesce(_optionalChain([highlight, 'access', _155 => _155.rect, 'optionalAccess', _156 => _156.top]), () => ( highlight.centerY)),
+    width: _nullishCoalesce(_optionalChain([highlight, 'access', _157 => _157.rect, 'optionalAccess', _158 => _158.width]), () => ( 0)),
+    height: _nullishCoalesce(_optionalChain([highlight, 'access', _159 => _159.rect, 'optionalAccess', _160 => _160.height]), () => ( 0)),
+    rx: _nullishCoalesce(_optionalChain([highlight, 'access', _161 => _161.rect, 'optionalAccess', _162 => _162.radius]), () => ( 0)),
+    ry: _nullishCoalesce(_optionalChain([highlight, 'access', _163 => _163.rect, 'optionalAccess', _164 => _164.radius]), () => ( 0))
   } : {
     x: highlight.centerX,
     y: highlight.centerY,
@@ -3338,9 +3468,9 @@ var OverlayBackdrop = ({
   const highlightRingAnimation = hasHighlightBounds ? {
     top: highlight.centerY,
     left: highlight.centerX,
-    width: _nullishCoalesce(_optionalChain([highlight, 'access', _147 => _147.rect, 'optionalAccess', _148 => _148.width]), () => ( 0)),
-    height: _nullishCoalesce(_optionalChain([highlight, 'access', _149 => _149.rect, 'optionalAccess', _150 => _150.height]), () => ( 0)),
-    borderRadius: _nullishCoalesce(_optionalChain([highlight, 'access', _151 => _151.rect, 'optionalAccess', _152 => _152.radius]), () => ( 0)),
+    width: _nullishCoalesce(_optionalChain([highlight, 'access', _165 => _165.rect, 'optionalAccess', _166 => _166.width]), () => ( 0)),
+    height: _nullishCoalesce(_optionalChain([highlight, 'access', _167 => _167.rect, 'optionalAccess', _168 => _168.height]), () => ( 0)),
+    borderRadius: _nullishCoalesce(_optionalChain([highlight, 'access', _169 => _169.rect, 'optionalAccess', _170 => _170.radius]), () => ( 0)),
     opacity: 1,
     transform: "translate(-50%, -50%)"
   } : {
@@ -3571,6 +3701,7 @@ var DEFAULT_POPOVER_CONTENT_TRANSITION = {
   ease: "easeOut"
 };
 var floatingPositionCache = /* @__PURE__ */ new Map();
+var rectIntersectsViewport2 = (rect, viewport) => rect.bottom > 0 && rect.right > 0 && rect.top < viewport.height && rect.left < viewport.width;
 var getFloatingCacheKey = (target) => {
   if (target.stepId) {
     return `step:${target.stepId}`;
@@ -3608,18 +3739,21 @@ var TourPopoverPortal = ({
   const adapter = useAnimationAdapter();
   const Container = _nullishCoalesce(containerComponent, () => ( adapter.components.MotionDiv));
   const Content = _nullishCoalesce(contentComponent, () => ( adapter.components.MotionDiv));
-  const popoverEntranceTransition = _nullishCoalesce(_nullishCoalesce(_optionalChain([transitionsOverride, 'optionalAccess', _153 => _153.popoverEntrance]), () => ( adapter.transitions.popoverEntrance)), () => ( DEFAULT_POPOVER_ENTRANCE_TRANSITION));
-  const popoverExitTransition = _nullishCoalesce(_nullishCoalesce(_optionalChain([transitionsOverride, 'optionalAccess', _154 => _154.popoverExit]), () => ( adapter.transitions.popoverExit)), () => ( DEFAULT_POPOVER_EXIT_TRANSITION));
-  const popoverContentTransition = _nullishCoalesce(_nullishCoalesce(_optionalChain([transitionsOverride, 'optionalAccess', _155 => _155.popoverContent]), () => ( adapter.transitions.popoverContent)), () => ( DEFAULT_POPOVER_CONTENT_TRANSITION));
+  const popoverEntranceTransition = _nullishCoalesce(_nullishCoalesce(_optionalChain([transitionsOverride, 'optionalAccess', _171 => _171.popoverEntrance]), () => ( adapter.transitions.popoverEntrance)), () => ( DEFAULT_POPOVER_ENTRANCE_TRANSITION));
+  const popoverExitTransition = _nullishCoalesce(_nullishCoalesce(_optionalChain([transitionsOverride, 'optionalAccess', _172 => _172.popoverExit]), () => ( adapter.transitions.popoverExit)), () => ( DEFAULT_POPOVER_EXIT_TRANSITION));
+  const popoverContentTransition = _nullishCoalesce(_nullishCoalesce(_optionalChain([transitionsOverride, 'optionalAccess', _173 => _173.popoverContent]), () => ( adapter.transitions.popoverContent)), () => ( DEFAULT_POPOVER_CONTENT_TRANSITION));
   const viewport = useViewportRect();
   const prefersMobileLayout = viewport.width <= MOBILE_BREAKPOINT || viewport.height <= MOBILE_HEIGHT_BREAKPOINT;
+  const liveTargetUsable = Boolean(
+    target.status === "ready" && (target.isScreen || target.rect && rectIntersectsViewport2(target.rect, viewport))
+  );
   const prefersMobileRef = _react.useRef.call(void 0, prefersMobileLayout);
   _react.useEffect.call(void 0, () => {
     prefersMobileRef.current = prefersMobileLayout;
   }, [prefersMobileLayout]);
   const lastReadyTargetRef = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
-    if (target.status === "ready" && target.rect) {
+    if (liveTargetUsable && target.rect) {
       lastReadyTargetRef.current = {
         rect: { ...target.rect },
         isScreen: target.isScreen
@@ -3627,19 +3761,19 @@ var TourPopoverPortal = ({
     } else if (target.status === "idle" && !isInGracePeriod) {
       lastReadyTargetRef.current = null;
     }
-  }, [target.isScreen, target.rect, target.status, isInGracePeriod]);
+  }, [target.isScreen, target.rect, target.status, isInGracePeriod, liveTargetUsable]);
   const cachedTarget = lastReadyTargetRef.current;
-  const resolvedRect = _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(target.rect, () => ( target.lastResolvedRect)), () => ( _optionalChain([cachedTarget, 'optionalAccess', _156 => _156.rect]))), () => ( null));
-  const resolvedIsScreen = target.status === "ready" ? target.isScreen : _nullishCoalesce(_optionalChain([cachedTarget, 'optionalAccess', _157 => _157.isScreen]), () => ( target.isScreen));
-  const shouldHidePopover = !resolvedRect && !target.isScreen;
+  const resolvedRect = liveTargetUsable ? _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(target.rect, () => ( target.lastResolvedRect)), () => ( _optionalChain([cachedTarget, 'optionalAccess', _174 => _174.rect]))), () => ( null)) : _nullishCoalesce(_optionalChain([cachedTarget, 'optionalAccess', _175 => _175.rect]), () => ( (cachedTarget ? null : _nullishCoalesce(_nullishCoalesce(target.rect, () => ( target.lastResolvedRect)), () => ( null)))));
+  const resolvedIsScreen = liveTargetUsable ? target.isScreen : _nullishCoalesce(_optionalChain([cachedTarget, 'optionalAccess', _176 => _176.isScreen]), () => ( target.isScreen));
+  const shouldHidePopover = !resolvedRect && !resolvedIsScreen;
   const fallbackRect = _nullishCoalesce(resolvedRect, () => ( viewport));
   const fallbackIsScreen = resolvedIsScreen;
   const [floatingSize, setFloatingSize] = _react.useState.call(void 0, 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 - (_nullishCoalesce(_optionalChain([floatingSize, 'optionalAccess', _158 => _158.height]), () => ( 0))) / 2;
-  const screenCenteredLeft = viewport.width / 2 - (_nullishCoalesce(_optionalChain([floatingSize, 'optionalAccess', _159 => _159.width]), () => ( 0))) / 2;
-  const floatingWidth = _nullishCoalesce(_optionalChain([floatingSize, 'optionalAccess', _160 => _160.width]), () => ( 0));
+  const screenCenteredTop = viewport.height / 2 - (_nullishCoalesce(_optionalChain([floatingSize, 'optionalAccess', _177 => _177.height]), () => ( 0))) / 2;
+  const screenCenteredLeft = viewport.width / 2 - (_nullishCoalesce(_optionalChain([floatingSize, 'optionalAccess', _178 => _178.width]), () => ( 0))) / 2;
+  const floatingWidth = _nullishCoalesce(_optionalChain([floatingSize, 'optionalAccess', _179 => _179.width]), () => ( 0));
   const baseTop = fallbackIsScreen ? screenCenteredTop : fallbackRect.top + fallbackRect.height + offset;
   const top = fallbackIsScreen ? clampVertical(screenCenteredTop) : clampVertical(baseTop);
   const leftBase = fallbackIsScreen ? screenCenteredLeft : fallbackRect.left + fallbackRect.width / 2 - floatingWidth / 2;
@@ -3844,10 +3978,11 @@ var TourPopoverPortal = ({
   _react.useLayoutEffect.call(void 0, () => {
     if (!_chunk7SAJNRGZcjs.isBrowser) return;
     const floatingEl = floatingRef.current;
-    const rectInfo = target.rect;
+    const rectInfo = liveTargetUsable ? _nullishCoalesce(_nullishCoalesce(target.rect, () => ( target.lastResolvedRect)), () => ( null)) : null;
     if (!floatingEl) return;
+    if (!liveTargetUsable) return;
     if (target.status !== "ready") return;
-    if (!rectInfo || target.isScreen) return;
+    if (!rectInfo || resolvedIsScreen) return;
     if (layoutMode === "mobile" || layoutMode === "manual") return;
     const cancelState = { cancelled: false };
     const retryState = overflowRetryRef.current;
@@ -3863,7 +3998,7 @@ var TourPopoverPortal = ({
       }
     };
     const virtualReference = {
-      contextElement: _nullishCoalesce(target.element, () => ( void 0)),
+      contextElement: liveTargetUsable ? _nullishCoalesce(target.element, () => ( void 0)) : void 0,
       getBoundingClientRect: () => DOMRectReadOnly.fromRect({
         width: rectInfo.width,
         height: rectInfo.height,
@@ -3975,10 +4110,13 @@ var TourPopoverPortal = ({
     dockedPosition,
     isAutoPlacement,
     layoutMode,
+    liveTargetUsable,
     offset,
+    resolvedIsScreen,
     resolvedPlacement,
     target.element,
     target.isScreen,
+    target.lastResolvedRect,
     target.lastUpdated,
     target.status,
     target.stepId
@@ -3994,8 +4132,8 @@ var TourPopoverPortal = ({
   const clampToViewport = (rawLeft, rawTop) => {
     const rect = _chunk7SAJNRGZcjs.getViewportRect.call(void 0, );
     const floatingEl = floatingRef.current;
-    const floatingElWidth = _nullishCoalesce(_optionalChain([floatingEl, 'optionalAccess', _161 => _161.offsetWidth]), () => ( 0));
-    const floatingElHeight = _nullishCoalesce(_optionalChain([floatingEl, 'optionalAccess', _162 => _162.offsetHeight]), () => ( 0));
+    const floatingElWidth = _nullishCoalesce(_optionalChain([floatingEl, 'optionalAccess', _180 => _180.offsetWidth]), () => ( 0));
+    const floatingElHeight = _nullishCoalesce(_optionalChain([floatingEl, 'optionalAccess', _181 => _181.offsetHeight]), () => ( 0));
     const minLeft = rect.left + FLOATING_OFFSET;
     const maxLeft = rect.left + rect.width - floatingElWidth - FLOATING_OFFSET;
     const minTop = rect.top + FLOATING_OFFSET;
@@ -4088,7 +4226,7 @@ var TourPopoverPortal = ({
   };
   const setFloatingNode = (node) => {
     floatingRef.current = node;
-    _optionalChain([onContainerChange, 'optionalCall', _163 => _163(node)]);
+    _optionalChain([onContainerChange, 'optionalCall', _182 => _182(node)]);
   };
   const containerProps = {
     ref: setFloatingNode,
@@ -4265,7 +4403,7 @@ var TourFocusManager = ({
       return;
     }
     if (previousFocusRef.current) return;
-    const doc = _nullishCoalesce(_optionalChain([popoverNode, 'optionalAccess', _164 => _164.ownerDocument]), () => ( _optionalChain([target, 'access', _165 => _165.element, 'optionalAccess', _166 => _166.ownerDocument])));
+    const doc = _nullishCoalesce(_optionalChain([popoverNode, 'optionalAccess', _183 => _183.ownerDocument]), () => ( _optionalChain([target, 'access', _184 => _184.element, 'optionalAccess', _185 => _185.ownerDocument])));
     const activeEl = (_nullishCoalesce(doc, () => ( document))).activeElement;
     if (activeEl instanceof HTMLElement) {
       previousFocusRef.current = activeEl;
@@ -4277,7 +4415,7 @@ var TourFocusManager = ({
   _react.useEffect.call(void 0, () => {
     if (!_chunk7SAJNRGZcjs.isBrowser) return;
     if (!active) return;
-    const doc = _nullishCoalesce(_nullishCoalesce(_optionalChain([popoverNode, 'optionalAccess', _167 => _167.ownerDocument]), () => ( _optionalChain([target, 'access', _168 => _168.element, 'optionalAccess', _169 => _169.ownerDocument]))), () => ( document));
+    const doc = _nullishCoalesce(_nullishCoalesce(_optionalChain([popoverNode, 'optionalAccess', _186 => _186.ownerDocument]), () => ( _optionalChain([target, 'access', _187 => _187.element, 'optionalAccess', _188 => _188.ownerDocument]))), () => ( document));
     const createGuard = (key) => {
       const node = doc.createElement("div");
       node.tabIndex = 0;
@@ -4307,7 +4445,7 @@ var TourFocusManager = ({
     const removeGuards = () => {
       for (const key of Object.keys(guardNodesRef.current)) {
         const node = guardNodesRef.current[key];
-        if (_optionalChain([node, 'optionalAccess', _170 => _170.parentNode])) {
+        if (_optionalChain([node, 'optionalAccess', _189 => _189.parentNode])) {
           node.parentNode.removeChild(node);
         }
         guardNodesRef.current[key] = null;
@@ -4335,7 +4473,7 @@ var TourFocusManager = ({
       } else {
         for (const key of ["target-start", "target-end"]) {
           const node = guardNodesRef.current[key];
-          if (_optionalChain([node, 'optionalAccess', _171 => _171.parentNode])) {
+          if (_optionalChain([node, 'optionalAccess', _190 => _190.parentNode])) {
             node.parentNode.removeChild(node);
           }
           guardNodesRef.current[key] = null;
@@ -4359,7 +4497,7 @@ var TourFocusManager = ({
       } else {
         for (const key of ["popover-start", "popover-end"]) {
           const node = guardNodesRef.current[key];
-          if (_optionalChain([node, 'optionalAccess', _172 => _172.parentNode])) {
+          if (_optionalChain([node, 'optionalAccess', _191 => _191.parentNode])) {
             node.parentNode.removeChild(node);
           }
           guardNodesRef.current[key] = null;
@@ -4379,7 +4517,7 @@ var TourFocusManager = ({
         }
         nodes.push(...getFocusableIn(targetElement));
       }
-      if (nodes.length === 0 && _optionalChain([popoverNode, 'optionalAccess', _173 => _173.hasAttribute, 'call', _174 => _174("tabindex")])) {
+      if (nodes.length === 0 && _optionalChain([popoverNode, 'optionalAccess', _192 => _192.hasAttribute, 'call', _193 => _193("tabindex")])) {
         nodes.push(popoverNode);
       }
       const unique = [];
@@ -4393,7 +4531,7 @@ var TourFocusManager = ({
     };
     const isWithinTrap = (element) => {
       if (!(element instanceof HTMLElement)) return false;
-      if (_optionalChain([popoverNode, 'optionalAccess', _175 => _175.contains, 'call', _176 => _176(element)])) return true;
+      if (_optionalChain([popoverNode, 'optionalAccess', _194 => _194.contains, 'call', _195 => _195(element)])) return true;
       if (target.element instanceof HTMLElement && target.element.contains(element)) {
         return true;
       }
@@ -4437,10 +4575,10 @@ var TourFocusManager = ({
           }
         }
         const key = targetNode.getAttribute("data-tour-focus-guard");
-        if (_optionalChain([key, 'optionalAccess', _177 => _177.startsWith, 'call', _178 => _178("target")])) {
+        if (_optionalChain([key, 'optionalAccess', _196 => _196.startsWith, 'call', _197 => _197("target")])) {
           setTargetRingActive(true);
           setPopoverRingActive(false);
-        } else if (_optionalChain([key, 'optionalAccess', _179 => _179.startsWith, 'call', _180 => _180("popover")])) {
+        } else if (_optionalChain([key, 'optionalAccess', _198 => _198.startsWith, 'call', _199 => _199("popover")])) {
           setTargetRingActive(false);
           setPopoverRingActive(true);
         }
@@ -4478,7 +4616,7 @@ var TourFocusManager = ({
   if (!_chunk7SAJNRGZcjs.isBrowser) return null;
   const host = _chunk7SAJNRGZcjs.portalHost.call(void 0, );
   if (!host) return null;
-  const boxShadow = _nullishCoalesce(_optionalChain([guardElementFocusRing, 'optionalAccess', _181 => _181.boxShadow]), () => ( DEFAULT_BOX_SHADOW));
+  const boxShadow = _nullishCoalesce(_optionalChain([guardElementFocusRing, 'optionalAccess', _200 => _200.boxShadow]), () => ( DEFAULT_BOX_SHADOW));
   const showTargetRing = targetRingActive && highlightRect;
   const showPopoverRing = popoverRingActive && popoverRect;
   if (!showTargetRing && !showPopoverRing) return null;
@@ -4639,4 +4777,5 @@ var useBodyScrollLock = (enabled) => {
 
 
 
-exports.AnimationAdapterProvider = AnimationAdapterProvider; exports.DialogRegistryProvider = DialogRegistryProvider; exports.OverlayBackdrop = OverlayBackdrop; exports.TourFocusManager = TourFocusManager; exports.TourPopoverPortal = TourPopoverPortal; exports.TourProvider = TourProvider; exports.createPathString = _chunk7SAJNRGZcjs.createPathString; exports.createWaitForPredicateController = createWaitForPredicateController; exports.defaultAnimationAdapter = defaultAnimationAdapter; exports.defaultLabels = defaultLabels; exports.getCurrentRoutePath = _chunk7SAJNRGZcjs.getCurrentRoutePath; exports.notifyRouteChange = _chunk7SAJNRGZcjs.notifyRouteChange; exports.reducedMotionAnimationAdapter = reducedMotionAnimationAdapter; exports.subscribeToRouteChanges = _chunk7SAJNRGZcjs.subscribeToRouteChanges; exports.useAdvanceRules = useAdvanceRules; exports.useAnimationAdapter = useAnimationAdapter; exports.useBodyScrollLock = useBodyScrollLock; exports.useConstrainedScrollLock = useConstrainedScrollLock; exports.useDelayAdvance = useDelayAdvance; exports.useDialogRegistry = useDialogRegistry; exports.useDialogRegistryOptional = useDialogRegistryOptional; exports.useHiddenTargetFallback = useHiddenTargetFallback; exports.useHudDescription = useHudDescription; exports.useHudMotion = useHudMotion; exports.useHudShortcuts = useHudShortcuts; exports.useHudState = useHudState; exports.useHudTargetIssue = useHudTargetIssue; exports.usePreferredAnimationAdapter = usePreferredAnimationAdapter; exports.useRadixDialogAdapter = useRadixDialogAdapter; exports.useRadixTourDialog = useRadixTourDialog; exports.useTour = useTour; exports.useTourControls = useTourControls; exports.useTourEvents = useTourEvents; exports.useTourFocusDominance = useTourFocusDominance; exports.useTourHud = useTourHud; exports.useTourLabels = useTourLabels; exports.useTourOverlay = useTourOverlay; exports.useTourTarget = useTourTarget; exports.useViewportRect = useViewportRect; exports.waitForDom = waitForDom;
+
+exports.AnimationAdapterProvider = AnimationAdapterProvider; exports.DialogRegistryProvider = DialogRegistryProvider; exports.OverlayBackdrop = OverlayBackdrop; exports.TourFocusManager = TourFocusManager; exports.TourPopoverPortal = TourPopoverPortal; exports.TourProvider = TourProvider; exports.createPathString = _chunk7SAJNRGZcjs.createPathString; exports.createWaitForPredicateController = createWaitForPredicateController; exports.defaultAnimationAdapter = defaultAnimationAdapter; exports.defaultLabels = defaultLabels; exports.getCurrentRoutePath = _chunk7SAJNRGZcjs.getCurrentRoutePath; exports.notifyRouteChange = _chunk7SAJNRGZcjs.notifyRouteChange; exports.reducedMotionAnimationAdapter = reducedMotionAnimationAdapter; exports.subscribeToRouteChanges = _chunk7SAJNRGZcjs.subscribeToRouteChanges; exports.tweenAnimationAdapter = tweenAnimationAdapter; exports.useAdvanceRules = useAdvanceRules; exports.useAnimationAdapter = useAnimationAdapter; exports.useBodyScrollLock = useBodyScrollLock; exports.useConstrainedScrollLock = useConstrainedScrollLock; exports.useDelayAdvance = useDelayAdvance; exports.useDialogRegistry = useDialogRegistry; exports.useDialogRegistryOptional = useDialogRegistryOptional; exports.useHiddenTargetFallback = useHiddenTargetFallback; exports.useHudDescription = useHudDescription; exports.useHudMotion = useHudMotion; exports.useHudShortcuts = useHudShortcuts; exports.useHudState = useHudState; exports.useHudTargetIssue = useHudTargetIssue; exports.usePreferredAnimationAdapter = usePreferredAnimationAdapter; exports.useRadixDialogAdapter = useRadixDialogAdapter; exports.useRadixTourDialog = useRadixTourDialog; exports.useTour = useTour; exports.useTourControls = useTourControls; exports.useTourEvents = useTourEvents; exports.useTourFocusDominance = useTourFocusDominance; exports.useTourHud = useTourHud; exports.useTourLabels = useTourLabels; exports.useTourOverlay = useTourOverlay; exports.useTourTarget = useTourTarget; exports.useViewportRect = useViewportRect; exports.waitForDom = waitForDom;