@flowsterix/react 0.12.1 → 0.13.0

package/dist/hooks/useConstrainedScrollLock.d.ts

@@ -0,0 +1,29 @@
+import type { ClientRectLike } from '../utils/dom';
+export interface ConstrainedScrollLockOptions {
+    /**
+     * Whether scroll lock is enabled.
+     */
+    enabled: boolean;
+    /**
+     * The target element's bounding rect.
+     * If target is larger than viewport, scrolling is allowed within target bounds.
+     */
+    targetRect: ClientRectLike | null;
+    /**
+     * Viewport height. Used to determine if target exceeds viewport.
+     */
+    viewportHeight: number;
+    /**
+     * Additional padding around the target bounds (for highlight padding).
+     * Default: 0
+     */
+    padding?: number;
+}
+/**
+ * Enhanced scroll lock that allows constrained scrolling when target is larger than viewport.
+ *
+ * - If target fits in viewport: normal scroll lock (overflow: hidden)
+ * - If target > viewport: allow scrolling within target bounds only
+ */
+export declare const useConstrainedScrollLock: ({ enabled, targetRect, viewportHeight, padding, }: ConstrainedScrollLockOptions) => void;
+//# sourceMappingURL=useConstrainedScrollLock.d.ts.map

package/dist/hooks/useConstrainedScrollLock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConstrainedScrollLock.d.ts","sourceRoot":"","sources":["../../src/hooks/useConstrainedScrollLock.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAGlD,MAAM,WAAW,4BAA4B;IAC3C;;OAEG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,UAAU,EAAE,cAAc,GAAG,IAAI,CAAA;IACjC;;OAEG;IACH,cAAc,EAAE,MAAM,CAAA;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAwBD;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,GAAI,mDAKtC,4BAA4B,SA6D9B,CAAA"}

package/dist/hooks/useTourHud.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTourHud.d.ts","sourceRoot":"","sources":["../../src/hooks/useTourHud.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAA;AAElE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAA;AAE/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEtD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAA;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,iBAAiB;IAChC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,sBAAsB,CAAA;IAC5C;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,EAAE,uBAAuB,CAAA;CACzC;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAA;CACzC;AAED,MAAM,WAAW,kBAAmB,SAAQ,uBAAuB;IACjE;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,cAAc,CAAA;IACtB,WAAW,EAAE,WAAW,GAAG,IAAI,CAAA;IAC/B,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAClD,qBAAqB,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAA;CAC9C;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,OAAO,EAAE,oBAAoB,CAAA;IAC7B,OAAO,EAAE,oBAAoB,CAAA;IAC7B,WAAW,EAAE,kBAAkB,CAAA;IAC/B,YAAY,EAAE,wBAAwB,CAAA;IACtC,WAAW,EAAE,uBAAuB,CAAA;IACpC,oBAAoB,EAAE,OAAO,CAAA;IAC7B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;AAKD,eAAO,MAAM,UAAU,GACrB,UAAS,iBAAsB,KAC9B,gBA+FF,CAAA"}
+{"version":3,"file":"useTourHud.d.ts","sourceRoot":"","sources":["../../src/hooks/useTourHud.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAA;AAElE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAA;AAE/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEtD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAA;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,MAAM,WAAW,iBAAiB;IAChC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,sBAAsB,CAAA;IAC5C;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,EAAE,uBAAuB,CAAA;CACzC;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAA;CACzC;AAED,MAAM,WAAW,kBAAmB,SAAQ,uBAAuB;IACjE;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,cAAc,CAAA;IACtB,WAAW,EAAE,WAAW,GAAG,IAAI,CAAA;IAC/B,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAClD,qBAAqB,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAA;CAC9C;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,OAAO,EAAE,oBAAoB,CAAA;IAC7B,OAAO,EAAE,oBAAoB,CAAA;IAC7B,WAAW,EAAE,kBAAkB,CAAA;IAC/B,YAAY,EAAE,wBAAwB,CAAA;IACtC,WAAW,EAAE,uBAAuB,CAAA;IACpC,oBAAoB,EAAE,OAAO,CAAA;IAC7B,gBAAgB,EAAE,OAAO,CAAA;CAC1B;AAKD,eAAO,MAAM,UAAU,GACrB,UAAS,iBAAsB,KAC9B,gBAqGF,CAAA"}

package/dist/index.cjs

@@ -2460,11 +2460,11 @@ var useHudShortcuts = (target, options) => {
 // src/hooks/useTourHud.ts
 
 
-// src/hooks/useBodyScrollLock.ts
+// src/hooks/useConstrainedScrollLock.ts
 
 var lockCount = 0;
 var previousOverflow = null;
-var acquireLock = () => {
+var acquireHardLock = () => {
   if (!_chunkD5LQLRSUcjs.isBrowser) return;
   if (lockCount === 0) {
     previousOverflow = document.body.style.overflow;
@@ -2472,7 +2472,7 @@ var acquireLock = () => {
   }
   lockCount += 1;
 };
-var releaseLock = () => {
+var releaseHardLock = () => {
   if (!_chunkD5LQLRSUcjs.isBrowser) return;
   if (lockCount === 0) return;
   lockCount -= 1;
@@ -2481,14 +2481,51 @@ var releaseLock = () => {
     previousOverflow = null;
   }
 };
-var useBodyScrollLock = (enabled) => {
+var useConstrainedScrollLock = ({
+  enabled,
+  targetRect,
+  viewportHeight,
+  padding = 0
+}) => {
+  const isConstrainedModeRef = _react.useRef.call(void 0, false);
+  const boundsRef = _react.useRef.call(void 0, { minY: 0, maxY: 0 });
   _react.useEffect.call(void 0, () => {
-    if (!enabled) return;
-    acquireLock();
+    if (!enabled || !_chunkD5LQLRSUcjs.isBrowser) return;
+    const targetHeight = targetRect ? targetRect.height + padding * 2 : 0;
+    const targetExceedsViewport = targetRect && targetHeight > viewportHeight;
+    if (!targetExceedsViewport) {
+      acquireHardLock();
+      isConstrainedModeRef.current = false;
+      return () => {
+        releaseHardLock();
+      };
+    }
+    isConstrainedModeRef.current = true;
+    const targetTop = targetRect.top - padding;
+    const targetBottom = targetRect.bottom + padding;
+    const currentScroll = window.scrollY;
+    const minY = currentScroll + targetTop;
+    const maxY = currentScroll + targetBottom - viewportHeight;
+    boundsRef.current = {
+      minY: Math.max(0, minY),
+      maxY: Math.max(0, maxY)
+    };
+    const handleScroll = () => {
+      const { minY: minY2, maxY: maxY2 } = boundsRef.current;
+      const currentY = window.scrollY;
+      if (currentY < minY2) {
+        window.scrollTo({ top: minY2, behavior: "auto" });
+      } else if (currentY > maxY2) {
+        window.scrollTo({ top: maxY2, behavior: "auto" });
+      }
+    };
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: false });
     return () => {
-      releaseLock();
+      window.removeEventListener("scroll", handleScroll);
+      isConstrainedModeRef.current = false;
     };
-  }, [enabled]);
+  }, [enabled, targetRect, viewportHeight, padding]);
 };
 
 // src/hooks/useHudTargetIssue.ts
@@ -2571,10 +2608,16 @@ var useTourHud = (options = {}) => {
     fallbackAriaDescribedBy: _optionalChain([popoverOptions, 'optionalAccess', _100 => _100.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
   );
-  useBodyScrollLock(shouldLockBodyScroll);
+  useConstrainedScrollLock({
+    enabled: shouldLockBodyScroll,
+    targetRect: hudState.hudTarget.rect,
+    viewportHeight: viewport.height,
+    padding: _nullishCoalesce(overlayPadding, () => ( 12))
+  });
   const shortcutOptions = typeof shortcuts === "object" ? shortcuts : {};
   const shortcutsEnabled = Boolean(
     (typeof shortcuts === "boolean" ? shortcuts : _nullishCoalesce(shortcuts.enabled, () => ( true))) && hudState.shouldRender
@@ -4501,6 +4544,38 @@ var useHudMotion = () => {
   }, [adapter]);
 };
 
+// src/hooks/useBodyScrollLock.ts
+
+var lockCount2 = 0;
+var previousOverflow2 = null;
+var acquireLock = () => {
+  if (!_chunkD5LQLRSUcjs.isBrowser) return;
+  if (lockCount2 === 0) {
+    previousOverflow2 = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  lockCount2 += 1;
+};
+var releaseLock = () => {
+  if (!_chunkD5LQLRSUcjs.isBrowser) return;
+  if (lockCount2 === 0) return;
+  lockCount2 -= 1;
+  if (lockCount2 === 0) {
+    document.body.style.overflow = _nullishCoalesce(previousOverflow2, () => ( ""));
+    previousOverflow2 = null;
+  }
+};
+var useBodyScrollLock = (enabled) => {
+  _react.useEffect.call(void 0, () => {
+    if (!enabled) return;
+    acquireLock();
+    return () => {
+      releaseLock();
+    };
+  }, [enabled]);
+};
+
+
 
 
 
@@ -4540,4 +4615,4 @@ var useHudMotion = () => {
 
 
 
-exports.AnimationAdapterProvider = AnimationAdapterProvider; exports.DialogRegistryProvider = DialogRegistryProvider; exports.OverlayBackdrop = OverlayBackdrop; exports.TourFocusManager = TourFocusManager; exports.TourPopoverPortal = TourPopoverPortal; exports.TourProvider = TourProvider; exports.createPathString = _chunkD5LQLRSUcjs.createPathString; exports.createWaitForPredicateController = createWaitForPredicateController; exports.defaultAnimationAdapter = defaultAnimationAdapter; exports.defaultLabels = defaultLabels; exports.getCurrentRoutePath = _chunkD5LQLRSUcjs.getCurrentRoutePath; exports.notifyRouteChange = _chunkD5LQLRSUcjs.notifyRouteChange; exports.reducedMotionAnimationAdapter = reducedMotionAnimationAdapter; exports.subscribeToRouteChanges = _chunkD5LQLRSUcjs.subscribeToRouteChanges; exports.useAdvanceRules = useAdvanceRules; exports.useAnimationAdapter = useAnimationAdapter; exports.useBodyScrollLock = useBodyScrollLock; 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 = _chunkD5LQLRSUcjs.createPathString; exports.createWaitForPredicateController = createWaitForPredicateController; exports.defaultAnimationAdapter = defaultAnimationAdapter; exports.defaultLabels = defaultLabels; exports.getCurrentRoutePath = _chunkD5LQLRSUcjs.getCurrentRoutePath; exports.notifyRouteChange = _chunkD5LQLRSUcjs.notifyRouteChange; exports.reducedMotionAnimationAdapter = reducedMotionAnimationAdapter; exports.subscribeToRouteChanges = _chunkD5LQLRSUcjs.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;

package/dist/index.d.ts

@@ -41,6 +41,8 @@ export { useHudMotion } from './motion/useHudMotion';
 export type { UseHudMotionResult } from './motion/useHudMotion';
 export { useAdvanceRules } from './hooks/useAdvanceRules';
 export { useBodyScrollLock } from './hooks/useBodyScrollLock';
+export { useConstrainedScrollLock } from './hooks/useConstrainedScrollLock';
+export type { ConstrainedScrollLockOptions } from './hooks/useConstrainedScrollLock';
 export { useHiddenTargetFallback } from './hooks/useHiddenTargetFallback';
 export type { UseHiddenTargetFallbackConfig, UseHiddenTargetFallbackResult, } from './hooks/useHiddenTargetFallback';
 export { useViewportRect } from './hooks/useViewportRect';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/dist/index.mjs

@@ -2460,11 +2460,11 @@ var useHudShortcuts = (target, options) => {
 // src/hooks/useTourHud.ts
 import { useMemo as useMemo9, useState as useState9 } from "react";
 
-// src/hooks/useBodyScrollLock.ts
-import { useEffect as useEffect11 } from "react";
+// src/hooks/useConstrainedScrollLock.ts
+import { useEffect as useEffect11, useRef as useRef8 } from "react";
 var lockCount = 0;
 var previousOverflow = null;
-var acquireLock = () => {
+var acquireHardLock = () => {
   if (!isBrowser) return;
   if (lockCount === 0) {
     previousOverflow = document.body.style.overflow;
@@ -2472,7 +2472,7 @@ var acquireLock = () => {
   }
   lockCount += 1;
 };
-var releaseLock = () => {
+var releaseHardLock = () => {
   if (!isBrowser) return;
   if (lockCount === 0) return;
   lockCount -= 1;
@@ -2481,14 +2481,51 @@ var releaseLock = () => {
     previousOverflow = null;
   }
 };
-var useBodyScrollLock = (enabled) => {
+var useConstrainedScrollLock = ({
+  enabled,
+  targetRect,
+  viewportHeight,
+  padding = 0
+}) => {
+  const isConstrainedModeRef = useRef8(false);
+  const boundsRef = useRef8({ minY: 0, maxY: 0 });
   useEffect11(() => {
-    if (!enabled) return;
-    acquireLock();
+    if (!enabled || !isBrowser) return;
+    const targetHeight = targetRect ? targetRect.height + padding * 2 : 0;
+    const targetExceedsViewport = targetRect && targetHeight > viewportHeight;
+    if (!targetExceedsViewport) {
+      acquireHardLock();
+      isConstrainedModeRef.current = false;
+      return () => {
+        releaseHardLock();
+      };
+    }
+    isConstrainedModeRef.current = true;
+    const targetTop = targetRect.top - padding;
+    const targetBottom = targetRect.bottom + padding;
+    const currentScroll = window.scrollY;
+    const minY = currentScroll + targetTop;
+    const maxY = currentScroll + targetBottom - viewportHeight;
+    boundsRef.current = {
+      minY: Math.max(0, minY),
+      maxY: Math.max(0, maxY)
+    };
+    const handleScroll = () => {
+      const { minY: minY2, maxY: maxY2 } = boundsRef.current;
+      const currentY = window.scrollY;
+      if (currentY < minY2) {
+        window.scrollTo({ top: minY2, behavior: "auto" });
+      } else if (currentY > maxY2) {
+        window.scrollTo({ top: maxY2, behavior: "auto" });
+      }
+    };
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: false });
     return () => {
-      releaseLock();
+      window.removeEventListener("scroll", handleScroll);
+      isConstrainedModeRef.current = false;
     };
-  }, [enabled]);
+  }, [enabled, targetRect, viewportHeight, padding]);
 };
 
 // src/hooks/useHudTargetIssue.ts
@@ -2571,10 +2608,16 @@ var useTourHud = (options = {}) => {
     fallbackAriaDescribedBy: popoverOptions?.ariaDescribedBy
   });
   const targetIssue = useHudTargetIssue(hudState.hudTarget);
+  const viewport = useViewportRect();
   const shouldLockBodyScroll = Boolean(
     bodyScrollLock && (hudState.flowHudOptions?.behavior?.lockBodyScroll ?? lockBodyScroll) && hudState.focusTrapActive
   );
-  useBodyScrollLock(shouldLockBodyScroll);
+  useConstrainedScrollLock({
+    enabled: shouldLockBodyScroll,
+    targetRect: hudState.hudTarget.rect,
+    viewportHeight: viewport.height,
+    padding: overlayPadding ?? 12
+  });
   const shortcutOptions = typeof shortcuts === "object" ? shortcuts : {};
   const shortcutsEnabled = Boolean(
     (typeof shortcuts === "boolean" ? shortcuts : shortcuts.enabled ?? true) && hudState.shouldRender
@@ -2636,7 +2679,7 @@ var useTourHud = (options = {}) => {
 };
 
 // src/hooks/useTourOverlay.ts
-import { useEffect as useEffect13, useMemo as useMemo10, useRef as useRef8 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo10, useRef as useRef9 } from "react";
 var DEFAULT_PADDING = 12;
 var DEFAULT_RADIUS = 12;
 var DEFAULT_EDGE_BUFFER = 0;
@@ -2649,8 +2692,8 @@ var useTourOverlay = (options) => {
     interactionMode = "passthrough",
     isInGracePeriod = false
   } = options;
-  const hasShownRef = useRef8(false);
-  const lastReadyTargetRef = useRef8(null);
+  const hasShownRef = useRef9(false);
+  const lastReadyTargetRef = useRef9(null);
   useEffect13(() => {
     if (!isBrowser) return;
     if (target.status === "ready") {
@@ -2892,7 +2935,7 @@ var waitForDom = () => new Promise(
 );
 
 // src/hooks/useRadixTourDialog.ts
-import { useCallback as useCallback5, useEffect as useEffect14, useMemo as useMemo11, useRef as useRef9, useState as useState10 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect14, useMemo as useMemo11, useRef as useRef10, useState as useState10 } from "react";
 var resolveAutoOpen2 = (config) => {
   if (!config) return { onEnter: true, onResume: true };
   const { autoOpen } = config;
@@ -2911,8 +2954,8 @@ var useRadixTourDialog = (params) => {
   const registry = useDialogRegistryOptional();
   const { suspendExternalFocusTrap } = useTourFocusDominance();
   const [internalOpen, setInternalOpen] = useState10(false);
-  const lastStepIndexRef = useRef9(-1);
-  const isResumeRef = useRef9(false);
+  const lastStepIndexRef = useRef10(-1);
+  const isResumeRef = useRef10(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;
@@ -3160,7 +3203,7 @@ var useDelayAdvance = () => {
 };
 
 // src/components/OverlayBackdrop.tsx
-import { useEffect as useEffect16, useRef as useRef10 } from "react";
+import { useEffect as useEffect16, useRef as useRef11 } from "react";
 import { createPortal } from "react-dom";
 import { AnimatePresence } from "motion/react";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -3249,7 +3292,7 @@ var OverlayBackdrop = ({
     viewport
   } = overlay;
   const hasHighlightBounds = Boolean(highlight.rect);
-  const prevScreenTargetRef = useRef10(null);
+  const prevScreenTargetRef = useRef11(null);
   const shouldSnapHighlight = prevScreenTargetRef.current === true && !highlight.isScreen && hasHighlightBounds;
   useEffect16(() => {
     prevScreenTargetRef.current = highlight.isScreen;
@@ -3488,7 +3531,7 @@ var OverlayBackdrop = ({
 };
 
 // src/components/TourPopoverPortal.tsx
-import { useEffect as useEffect17, useLayoutEffect as useLayoutEffect2, useMemo as useMemo13, useRef as useRef11, useState as useState12 } from "react";
+import { useEffect as useEffect17, useLayoutEffect as useLayoutEffect2, useMemo as useMemo13, useRef as useRef12, useState as useState12 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import {
   autoPlacement,
@@ -3556,11 +3599,11 @@ 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 = useRef11(prefersMobileLayout);
+  const prefersMobileRef = useRef12(prefersMobileLayout);
   useEffect17(() => {
     prefersMobileRef.current = prefersMobileLayout;
   }, [prefersMobileLayout]);
-  const lastReadyTargetRef = useRef11(null);
+  const lastReadyTargetRef = useRef12(null);
   useEffect17(() => {
     if (target.status === "ready" && target.rect) {
       lastReadyTargetRef.current = {
@@ -3604,22 +3647,22 @@ var TourPopoverPortal = ({
     }),
     [viewport.height, viewport.width]
   );
-  const floatingRef = useRef11(null);
-  const cachedFloatingPositionRef = useRef11(null);
-  const appliedFloatingCacheRef = useRef11(null);
-  const deferredScreenSnapRef = useRef11(null);
+  const floatingRef = useRef12(null);
+  const cachedFloatingPositionRef = useRef12(null);
+  const appliedFloatingCacheRef = useRef12(null);
+  const deferredScreenSnapRef = useRef12(null);
   const [layoutMode, setLayoutMode] = useState12(
     () => prefersMobileLayout ? "mobile" : "floating"
   );
   const [floatingPosition, setFloatingPosition] = useState12(fallbackPosition);
   const [dragPosition, setDragPosition] = useState12(null);
   const [isDragging, setIsDragging] = useState12(false);
-  const dragStateRef = useRef11(null);
-  const overflowRetryRef = useRef11({
+  const dragStateRef = useRef12(null);
+  const overflowRetryRef = useRef12({
     stepId: null,
     attempts: 0
   });
-  const overflowRetryTimeoutRef = useRef11(null);
+  const overflowRetryTimeoutRef = useRef12(null);
   useLayoutEffect2(() => {
     if (!isBrowser) return;
     const node = floatingRef.current;
@@ -4093,7 +4136,7 @@ var TourPopoverPortal = ({
 };
 
 // src/components/TourFocusManager.tsx
-import { useEffect as useEffect18, useLayoutEffect as useLayoutEffect3, useRef as useRef12, useState as useState13 } from "react";
+import { useEffect as useEffect18, useLayoutEffect as useLayoutEffect3, useRef as useRef13, useState as useState13 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 
 // src/utils/focus.ts
@@ -4170,15 +4213,15 @@ var TourFocusManager = ({
   highlightRect,
   guardElementFocusRing
 }) => {
-  const previousFocusRef = useRef12(null);
-  const guardNodesRef = useRef12({
+  const previousFocusRef = useRef13(null);
+  const guardNodesRef = useRef13({
     "target-start": null,
     "target-end": null,
     "popover-start": null,
     "popover-end": null
   });
-  const lastTabDirectionRef = useRef12("forward");
-  const suppressGuardHopRef = useRef12(null);
+  const lastTabDirectionRef = useRef13("forward");
+  const suppressGuardHopRef = useRef13(null);
   const [targetRingActive, setTargetRingActive] = useState13(false);
   const [popoverRingActive, setPopoverRingActive] = useState13(false);
   const [popoverRect, setPopoverRect] = useState13(null);
@@ -4500,6 +4543,37 @@ var useHudMotion = () => {
     };
   }, [adapter]);
 };
+
+// src/hooks/useBodyScrollLock.ts
+import { useEffect as useEffect19 } from "react";
+var lockCount2 = 0;
+var previousOverflow2 = null;
+var acquireLock = () => {
+  if (!isBrowser) return;
+  if (lockCount2 === 0) {
+    previousOverflow2 = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  lockCount2 += 1;
+};
+var releaseLock = () => {
+  if (!isBrowser) return;
+  if (lockCount2 === 0) return;
+  lockCount2 -= 1;
+  if (lockCount2 === 0) {
+    document.body.style.overflow = previousOverflow2 ?? "";
+    previousOverflow2 = null;
+  }
+};
+var useBodyScrollLock = (enabled) => {
+  useEffect19(() => {
+    if (!enabled) return;
+    acquireLock();
+    return () => {
+      releaseLock();
+    };
+  }, [enabled]);
+};
 export {
   AnimationAdapterProvider,
   DialogRegistryProvider,
@@ -4518,6 +4592,7 @@ export {
   useAdvanceRules,
   useAnimationAdapter,
   useBodyScrollLock,
+  useConstrainedScrollLock,
   useDelayAdvance,
   useDialogRegistry,
   useDialogRegistryOptional,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowsterix/react",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "React bindings for Flowsterix - guided tours and onboarding flows",
   "license": "MIT",
   "repository": {