@stream-mdx/react 0.5.0 → 1.0.0

package/dist/components/bottom-stick-scroll-area.cjs

@@ -7,17 +7,14 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
     for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   return to;
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
 
 // src/components/bottom-stick-scroll-area.tsx
 var bottom_stick_scroll_area_exports = {};
@@ -25,19 +22,9 @@ __export(bottom_stick_scroll_area_exports, {
   BottomStickScrollArea: () => BottomStickScrollArea
 });
 module.exports = __toCommonJS(bottom_stick_scroll_area_exports);
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var EPS_BOTTOM_PX = 2;
-var EPS_OVERFLOW_PX = 1;
-var DETACH_SCROLL_DELTA_PX = 1;
-var RETURN_MIN_MS = 180;
-var RETURN_MAX_MS = 520;
-var RETURN_PX_PER_MS = 2.2;
-var RETURN_SETTLE_FRAMES = 2;
+var import_react = require("react"), import_jsx_runtime = require("react/jsx-runtime"), EPS_BOTTOM_PX = 2, EPS_OVERFLOW_PX = 1, DETACH_SCROLL_DELTA_PX = 1, RETURN_MIN_MS = 180, RETURN_MAX_MS = 520, RETURN_PX_PER_MS = 2.2, RETURN_SETTLE_FRAMES = 2;
 function clamp01(value) {
-  if (value < 0) return 0;
-  if (value > 1) return 1;
-  return value;
+  return value < 0 ? 0 : value > 1 ? 1 : value;
 }
 function easeOutCubic(value) {
   return 1 - (1 - value) ** 3;
@@ -46,14 +33,34 @@ function joinClasses(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function measure(viewport) {
-  const scrollTop = viewport.scrollTop;
-  const scrollHeight = viewport.scrollHeight;
-  const clientHeight = viewport.clientHeight;
-  const maxScrollTop = Math.max(0, scrollHeight - clientHeight);
-  const distanceToBottom = Math.max(0, maxScrollTop - scrollTop);
-  const isOverflowing = scrollHeight > clientHeight + EPS_OVERFLOW_PX;
+  let scrollTop = viewport.scrollTop, scrollHeight = viewport.scrollHeight, clientHeight = viewport.clientHeight, maxScrollTop = Math.max(0, scrollHeight - clientHeight), distanceToBottom = Math.max(0, maxScrollTop - scrollTop), isOverflowing = scrollHeight > clientHeight + EPS_OVERFLOW_PX;
   return { scrollTop, scrollHeight, clientHeight, maxScrollTop, distanceToBottom, isOverflowing };
 }
+function isEditableTarget(target) {
+  if (!(target instanceof Element)) return !1;
+  if (target.closest("input, textarea, select, [role='textbox']")) return !0;
+  let contentEditable = target.closest("[contenteditable]");
+  return contentEditable !== null && contentEditable.getAttribute("contenteditable")?.toLowerCase() !== "false";
+}
+function isScrollKeyIntent(event) {
+  if (event.defaultPrevented || isEditableTarget(event.target)) return !1;
+  switch (event.key) {
+    case "ArrowDown":
+    case "ArrowUp":
+    case "PageDown":
+    case "PageUp":
+    case "Home":
+    case "End":
+      return !0;
+    case " ":
+    case "Spacebar":
+      return event.target instanceof Element ? event.target.closest(
+        "button, input, summary, [role='button'], [role='checkbox'], [role='switch'], [role='radio'], [role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']"
+      ) === null : !0;
+    default:
+      return !1;
+  }
+}
 function DefaultJumpButton({ canJump, jumpToBottom }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
@@ -74,7 +81,7 @@ function DefaultJumpButton({ canJump, jumpToBottom }) {
         color: "var(--foreground, #111)",
         cursor: canJump ? "pointer" : "default"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, children: "\u2193" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": !0, children: "\u2193" })
     }
   );
 }
@@ -83,45 +90,23 @@ function BottomStickScrollArea({
   className,
   viewportClassName,
   contentClassName,
-  showJumpToBottom = true,
+  showJumpToBottom = !0,
   onDebugStateChange,
   onModeChange,
-  debugDomAttributes = false,
+  debugDomAttributes = !1,
   renderJumpToBottom,
   jumpContainerClassName
 }) {
-  const viewportRef = (0, import_react.useRef)(null);
-  const contentRef = (0, import_react.useRef)(null);
-  const modeRef = (0, import_react.useRef)("STICKY_INSTANT");
-  const [mode, setMode] = (0, import_react.useState)("STICKY_INSTANT");
-  const [isOverflowing, setIsOverflowing] = (0, import_react.useState)(false);
-  const [distanceToBottom, setDistanceToBottom] = (0, import_react.useState)(0);
-  const prevScrollTopRef = (0, import_react.useRef)(0);
-  const lastProgrammaticWriteRef = (0, import_react.useRef)(null);
-  const programmaticWriteCountRef = (0, import_react.useRef)(0);
-  const pendingStickRafRef = (0, import_react.useRef)(null);
-  const stickRequestedRef = (0, import_react.useRef)(false);
-  const returnRafRef = (0, import_react.useRef)(null);
-  const returnAnimRef = (0, import_react.useRef)(null);
-  const setModeBoth = (0, import_react.useCallback)(
+  let viewportRef = (0, import_react.useRef)(null), contentRef = (0, import_react.useRef)(null), modeRef = (0, import_react.useRef)("STICKY_INSTANT"), [mode, setMode] = (0, import_react.useState)("STICKY_INSTANT"), [isOverflowing, setIsOverflowing] = (0, import_react.useState)(!1), [distanceToBottom, setDistanceToBottom] = (0, import_react.useState)(0), [prefersReducedMotion, setPrefersReducedMotion] = (0, import_react.useState)(!1), prefersReducedMotionRef = (0, import_react.useRef)(!1), prevScrollTopRef = (0, import_react.useRef)(0), lastProgrammaticWriteRef = (0, import_react.useRef)(null), programmaticWriteCountRef = (0, import_react.useRef)(0), pendingStickRafRef = (0, import_react.useRef)(null), stickRequestedRef = (0, import_react.useRef)(!1), returnRafRef = (0, import_react.useRef)(null), returnAnimRef = (0, import_react.useRef)(null), setModeBoth = (0, import_react.useCallback)(
     (next) => {
-      modeRef.current = next;
-      setMode(next);
-      onModeChange?.(next);
+      modeRef.current = next, setMode(next), onModeChange?.(next);
     },
     [onModeChange]
-  );
-  const updateDebug = (0, import_react.useCallback)(() => {
-    const viewport = viewportRef.current;
+  ), updateDebug = (0, import_react.useCallback)(() => {
+    let viewport = viewportRef.current;
     if (!viewport) return;
-    const m = measure(viewport);
-    if (debugDomAttributes) {
-      viewport.dataset.stickyMode = modeRef.current;
-      viewport.dataset.distanceToBottom = String(m.distanceToBottom);
-      viewport.dataset.isOverflowing = m.isOverflowing ? "1" : "0";
-      viewport.dataset.programmaticWrites = String(programmaticWriteCountRef.current);
-    }
-    onDebugStateChange?.({
+    let m = measure(viewport);
+    debugDomAttributes && (viewport.dataset.stickyMode = modeRef.current, viewport.dataset.distanceToBottom = String(m.distanceToBottom), viewport.dataset.isOverflowing = m.isOverflowing ? "1" : "0", viewport.dataset.programmaticWrites = String(programmaticWriteCountRef.current)), onDebugStateChange?.({
       mode: modeRef.current,
       isOverflowing: m.isOverflowing,
       distanceToBottom: m.distanceToBottom,
@@ -130,60 +115,54 @@ function BottomStickScrollArea({
       scrollHeight: m.scrollHeight,
       clientHeight: m.clientHeight,
       programmaticWrites: programmaticWriteCountRef.current
-    });
-    setDistanceToBottom(
+    }), setDistanceToBottom(
       (previous) => Math.abs(previous - m.distanceToBottom) <= 0.1 ? previous : m.distanceToBottom
     );
-  }, [debugDomAttributes, onDebugStateChange]);
-  const writeScrollTop = (0, import_react.useCallback)((nextTop) => {
-    const viewport = viewportRef.current;
+  }, [debugDomAttributes, onDebugStateChange]), writeScrollTop = (0, import_react.useCallback)((nextTop) => {
+    let viewport = viewportRef.current;
+    viewport && (viewport.scrollTop = nextTop, programmaticWriteCountRef.current += 1, lastProgrammaticWriteRef.current = { at: performance.now(), top: nextTop });
+  }, []), cancelPendingStick = (0, import_react.useCallback)(() => {
+    pendingStickRafRef.current !== null && (cancelAnimationFrame(pendingStickRafRef.current), pendingStickRafRef.current = null), stickRequestedRef.current = !1;
+  }, []), cancelReturn = (0, import_react.useCallback)(() => {
+    returnRafRef.current !== null && (cancelAnimationFrame(returnRafRef.current), returnRafRef.current = null), returnAnimRef.current = null;
+  }, []), handleReducedMotionChange = (0, import_react.useCallback)(
+    (matches) => {
+      if (prefersReducedMotionRef.current !== matches && (prefersReducedMotionRef.current = matches, setPrefersReducedMotion(matches)), !matches || modeRef.current !== "RETURNING_SMOOTH") return;
+      cancelPendingStick(), cancelReturn(), setModeBoth("STICKY_INSTANT");
+      let viewport = viewportRef.current;
+      viewport && (writeScrollTop(measure(viewport).maxScrollTop), prevScrollTopRef.current = viewport.scrollTop), updateDebug();
+    },
+    [cancelPendingStick, cancelReturn, setModeBoth, updateDebug, writeScrollTop]
+  ), reducedMotionChangeHandlerRef = (0, import_react.useRef)(handleReducedMotionChange);
+  reducedMotionChangeHandlerRef.current = handleReducedMotionChange;
+  let interruptReturnForUserIntent = (0, import_react.useCallback)(() => {
+    modeRef.current === "RETURNING_SMOOTH" && (cancelPendingStick(), cancelReturn(), setModeBoth("DETACHED"), updateDebug());
+  }, [cancelPendingStick, cancelReturn, setModeBoth, updateDebug]), onViewportKeyDown = (0, import_react.useCallback)(
+    (event) => {
+      isScrollKeyIntent(event) && interruptReturnForUserIntent();
+    },
+    [interruptReturnForUserIntent]
+  ), stickToBottomInstant = (0, import_react.useCallback)(() => {
+    let viewport = viewportRef.current;
+    viewport && (stickRequestedRef.current = !0, pendingStickRafRef.current === null && (pendingStickRafRef.current = requestAnimationFrame(() => {
+      if (pendingStickRafRef.current = null, !stickRequestedRef.current || (stickRequestedRef.current = !1, modeRef.current !== "STICKY_INSTANT")) return;
+      let m = measure(viewport);
+      writeScrollTop(m.maxScrollTop), updateDebug();
+    })));
+  }, [updateDebug, writeScrollTop]), startReturnToBottomSmooth = (0, import_react.useCallback)(() => {
+    let viewport = viewportRef.current;
     if (!viewport) return;
-    viewport.scrollTop = nextTop;
-    programmaticWriteCountRef.current += 1;
-    lastProgrammaticWriteRef.current = { at: performance.now(), top: nextTop };
-  }, []);
-  const cancelPendingStick = (0, import_react.useCallback)(() => {
-    if (pendingStickRafRef.current !== null) {
-      cancelAnimationFrame(pendingStickRafRef.current);
-      pendingStickRafRef.current = null;
-    }
-    stickRequestedRef.current = false;
-  }, []);
-  const cancelReturn = (0, import_react.useCallback)(() => {
-    if (returnRafRef.current !== null) {
-      cancelAnimationFrame(returnRafRef.current);
-      returnRafRef.current = null;
+    if (prefersReducedMotionRef.current) {
+      cancelPendingStick(), cancelReturn(), setModeBoth("STICKY_INSTANT"), writeScrollTop(measure(viewport).maxScrollTop), prevScrollTopRef.current = viewport.scrollTop, updateDebug();
+      return;
     }
-    returnAnimRef.current = null;
-  }, []);
-  const stickToBottomInstant = (0, import_react.useCallback)(() => {
-    const viewport = viewportRef.current;
-    if (!viewport) return;
-    stickRequestedRef.current = true;
-    if (pendingStickRafRef.current !== null) return;
-    pendingStickRafRef.current = requestAnimationFrame(() => {
-      pendingStickRafRef.current = null;
-      if (!stickRequestedRef.current) return;
-      stickRequestedRef.current = false;
-      if (modeRef.current !== "STICKY_INSTANT") return;
-      const m = measure(viewport);
-      writeScrollTop(m.maxScrollTop);
-      updateDebug();
-    });
-  }, [updateDebug, writeScrollTop]);
-  const startReturnToBottomSmooth = (0, import_react.useCallback)(() => {
-    const viewport = viewportRef.current;
-    if (!viewport) return;
-    cancelPendingStick();
-    cancelReturn();
-    const initial = measure(viewport);
+    cancelPendingStick(), cancelReturn();
+    let initial = measure(viewport);
     if (initial.distanceToBottom <= EPS_BOTTOM_PX) {
-      setModeBoth("STICKY_INSTANT");
-      stickToBottomInstant();
-      updateDebug();
+      setModeBoth("STICKY_INSTANT"), stickToBottomInstant(), updateDebug();
       return;
     }
-    const durationMs = Math.max(
+    let durationMs = Math.max(
       RETURN_MIN_MS,
       Math.min(RETURN_MAX_MS, initial.distanceToBottom / RETURN_PX_PER_MS)
     );
@@ -192,118 +171,60 @@ function BottomStickScrollArea({
       startTop: initial.scrollTop,
       durationMs,
       settleFrames: 0
-    };
-    setModeBoth("RETURNING_SMOOTH");
-    const tick = (now) => {
-      const viewportCurrent = viewportRef.current;
-      const anim = returnAnimRef.current;
+    }, setModeBoth("RETURNING_SMOOTH");
+    let tick = (now) => {
+      let viewportCurrent = viewportRef.current, anim = returnAnimRef.current;
       if (!viewportCurrent || !anim || modeRef.current !== "RETURNING_SMOOTH") {
         cancelReturn();
         return;
       }
-      const before = measure(viewportCurrent);
-      const progress = clamp01((now - anim.startTime) / anim.durationMs);
-      const eased = easeOutCubic(progress);
-      const targetBottom = before.maxScrollTop;
-      let nextTop = anim.startTop + (targetBottom - anim.startTop) * eased;
-      if (nextTop < before.scrollTop) {
-        nextTop = before.scrollTop;
-      }
-      writeScrollTop(nextTop);
-      const after = measure(viewportCurrent);
-      if (after.distanceToBottom <= EPS_BOTTOM_PX) {
-        anim.settleFrames += 1;
-      } else {
-        anim.settleFrames = 0;
-      }
-      const doneByTime = progress >= 1;
-      const doneBySettle = anim.settleFrames >= RETURN_SETTLE_FRAMES && progress >= 0.6;
+      let before = measure(viewportCurrent), progress = clamp01((now - anim.startTime) / anim.durationMs), eased = easeOutCubic(progress), targetBottom = before.maxScrollTop, nextTop = anim.startTop + (targetBottom - anim.startTop) * eased;
+      nextTop < before.scrollTop && (nextTop = before.scrollTop), writeScrollTop(nextTop), measure(viewportCurrent).distanceToBottom <= EPS_BOTTOM_PX ? anim.settleFrames += 1 : anim.settleFrames = 0;
+      let doneByTime = progress >= 1, doneBySettle = anim.settleFrames >= RETURN_SETTLE_FRAMES && progress >= 0.6;
       if (doneByTime && doneBySettle) {
-        cancelReturn();
-        setModeBoth("STICKY_INSTANT");
-        stickToBottomInstant();
-        updateDebug();
+        cancelReturn(), setModeBoth("STICKY_INSTANT"), stickToBottomInstant(), updateDebug();
         return;
       }
-      updateDebug();
-      returnRafRef.current = requestAnimationFrame(tick);
+      updateDebug(), returnRafRef.current = requestAnimationFrame(tick);
     };
     returnRafRef.current = requestAnimationFrame(tick);
-  }, [cancelPendingStick, cancelReturn, setModeBoth, stickToBottomInstant, updateDebug, writeScrollTop]);
-  const onViewportScroll = (0, import_react.useCallback)(
+  }, [cancelPendingStick, cancelReturn, setModeBoth, stickToBottomInstant, updateDebug, writeScrollTop]), onViewportScroll = (0, import_react.useCallback)(
     (event) => {
-      const viewport = event.currentTarget;
-      const m = measure(viewport);
+      let viewport = event.currentTarget, m = measure(viewport);
       setIsOverflowing((previous) => previous === m.isOverflowing ? previous : m.isOverflowing);
-      const previousTop = prevScrollTopRef.current;
-      const delta = m.scrollTop - previousTop;
-      const lastWrite = lastProgrammaticWriteRef.current;
-      const wroteRecently = lastWrite !== null && performance.now() - lastWrite.at < 60;
-      const isLikelyOwnWrite = wroteRecently && lastWrite !== null && Math.abs(m.scrollTop - lastWrite.top) <= 2;
-      if (modeRef.current === "RETURNING_SMOOTH") {
-        if (!isLikelyOwnWrite && delta < -DETACH_SCROLL_DELTA_PX) {
-          cancelReturn();
-          setModeBoth("DETACHED");
-        }
-      } else if (modeRef.current === "STICKY_INSTANT") {
-        if (!isLikelyOwnWrite && delta < -DETACH_SCROLL_DELTA_PX && m.isOverflowing) {
-          cancelPendingStick();
-          setModeBoth("DETACHED");
-        }
-      } else if (modeRef.current === "DETACHED") {
-        if (m.distanceToBottom <= EPS_BOTTOM_PX) {
-          setModeBoth("STICKY_INSTANT");
-          stickToBottomInstant();
-        }
-      }
-      prevScrollTopRef.current = m.scrollTop;
-      updateDebug();
+      let previousTop = prevScrollTopRef.current, delta = m.scrollTop - previousTop, lastWrite = lastProgrammaticWriteRef.current, isLikelyOwnWrite = lastWrite !== null && performance.now() - lastWrite.at < 60 && lastWrite !== null && Math.abs(m.scrollTop - lastWrite.top) <= 2;
+      modeRef.current === "RETURNING_SMOOTH" ? !isLikelyOwnWrite && delta < -DETACH_SCROLL_DELTA_PX && (cancelReturn(), setModeBoth("DETACHED")) : modeRef.current === "STICKY_INSTANT" ? !isLikelyOwnWrite && delta < -DETACH_SCROLL_DELTA_PX && m.isOverflowing && (cancelPendingStick(), setModeBoth("DETACHED")) : modeRef.current === "DETACHED" && m.distanceToBottom <= EPS_BOTTOM_PX && (setModeBoth("STICKY_INSTANT"), stickToBottomInstant()), prevScrollTopRef.current = m.scrollTop, updateDebug();
     },
     [cancelPendingStick, cancelReturn, setModeBoth, stickToBottomInstant, updateDebug]
   );
   (0, import_react.useEffect)(() => {
-    const viewport = viewportRef.current;
-    const content = contentRef.current;
+    let viewport = viewportRef.current, content = contentRef.current;
     if (!viewport || !content) return;
-    const observer = new ResizeObserver(() => {
-      const m = measure(viewport);
-      setIsOverflowing((previous) => previous === m.isOverflowing ? previous : m.isOverflowing);
-      if (modeRef.current === "STICKY_INSTANT") {
-        stickToBottomInstant();
-      }
-      updateDebug();
+    let observer = new ResizeObserver(() => {
+      let m = measure(viewport);
+      setIsOverflowing((previous) => previous === m.isOverflowing ? previous : m.isOverflowing), modeRef.current === "STICKY_INSTANT" && stickToBottomInstant(), updateDebug();
     });
-    observer.observe(content);
-    observer.observe(viewport);
-    return () => observer.disconnect();
-  }, [stickToBottomInstant, updateDebug]);
-  (0, import_react.useLayoutEffect)(() => {
-    const viewport = viewportRef.current;
+    return observer.observe(content), observer.observe(viewport), () => observer.disconnect();
+  }, [stickToBottomInstant, updateDebug]), (0, import_react.useLayoutEffect)(() => {
+    let viewport = viewportRef.current;
     if (!viewport) return;
     setModeBoth("STICKY_INSTANT");
-    const initial = measure(viewport);
-    writeScrollTop(initial.maxScrollTop);
-    prevScrollTopRef.current = viewport.scrollTop;
-    setIsOverflowing(initial.isOverflowing);
-    setDistanceToBottom(initial.distanceToBottom);
-    updateDebug();
-  }, [setModeBoth, updateDebug, writeScrollTop]);
-  (0, import_react.useEffect)(() => {
-    return () => {
-      cancelPendingStick();
-      cancelReturn();
-    };
+    let initial = measure(viewport);
+    writeScrollTop(initial.maxScrollTop), prevScrollTopRef.current = viewport.scrollTop, setIsOverflowing(initial.isOverflowing), setDistanceToBottom(initial.distanceToBottom), updateDebug();
+  }, [setModeBoth, updateDebug, writeScrollTop]), (0, import_react.useLayoutEffect)(() => {
+    if (typeof window > "u" || typeof window.matchMedia != "function") return;
+    let mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)"), onChange = () => reducedMotionChangeHandlerRef.current(mediaQuery.matches);
+    return onChange(), typeof mediaQuery.addEventListener == "function" ? (mediaQuery.addEventListener("change", onChange), () => mediaQuery.removeEventListener("change", onChange)) : (mediaQuery.addListener(onChange), () => mediaQuery.removeListener(onChange));
+  }, []), (0, import_react.useEffect)(() => () => {
+    cancelPendingStick(), cancelReturn();
   }, [cancelPendingStick, cancelReturn]);
-  const canJump = isOverflowing && mode === "DETACHED";
-  const jumpButton = renderJumpToBottom?.({
+  let canJump = isOverflowing && mode === "DETACHED", jumpButton = renderJumpToBottom?.({
     mode,
     canJump,
     isOverflowing,
     distanceToBottom,
     jumpToBottom: startReturnToBottomSmooth
-  }) ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultJumpButton, { canJump, jumpToBottom: startReturnToBottomSmooth });
-  const jumpContainerClassNameBase = "pointer-events-none absolute z-20";
-  const jumpContainerStyle = {
+  }) ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultJumpButton, { canJump, jumpToBottom: startReturnToBottomSmooth }), jumpContainerClassNameBase = "pointer-events-none absolute z-20", jumpContainerStyle = {
     position: "absolute",
     zIndex: 20,
     left: 0,
@@ -312,8 +233,8 @@ function BottomStickScrollArea({
     display: "flex",
     justifyContent: "center",
     opacity: canJump ? 1 : 0,
-    transform: canJump ? "translateY(0px)" : "translateY(4px)",
-    transition: "opacity 150ms ease, transform 150ms ease",
+    transform: prefersReducedMotion ? "none" : canJump ? "translateY(0px)" : "translateY(4px)",
+    transition: prefersReducedMotion ? "none" : "opacity 150ms ease, transform 150ms ease",
     pointerEvents: "none"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: joinClasses("relative h-full w-full overflow-hidden", className), children: [
@@ -323,6 +244,9 @@ function BottomStickScrollArea({
         ref: viewportRef,
         className: joinClasses("h-full w-full overflow-auto", viewportClassName),
         onScroll: onViewportScroll,
+        onWheel: interruptReturnForUserIntent,
+        onTouchStart: interruptReturnForUserIntent,
+        onKeyDown: onViewportKeyDown,
         "data-testid": "sticky-scroll-viewport",
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: contentRef, className: joinClasses("flex min-h-full w-full flex-col", contentClassName), children })
       }