50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T381f,import * as React from 'react' import { useReducedMotion } from '@/hooks/use-reduced-motion' import { isRTL } from '@/lib/direction' export interface UseSwipeNavigationOptions { /** Total number of tabs/items. */ count: number /** Index of the currently active item. */ activeIndex: number /** Called when the user has committed a swipe. */ onNavigate: (index: number) => void } export interface UseSwipeNavigationResult { /** Horizontal translate offset while dragging, in pixels. */ swipeOffset: number /** True while the snap-back or slide-in animation is running. */ isAnimating: boolean /** * Attach to the swipe wrapper (`ref={swipeRef}`). Required for the axis lock * to hold: React's touch listeners are passive, so only a listener this hook * attaches itself can stop the page scrolling through a horizontal swipe. * Also brings `touchcancel` handling, without which a gesture the platform * takes over leaves the pane stuck mid-drag. */ swipeRef: (node: HTMLElement | null) => void /** Attach to the wrapper's onTouchStart. */ handleTouchStart: (e: React.TouchEvent) => void /** Attach to the wrapper's onTouchMove. Inert once `swipeRef` is attached (the ref handles moves). */ handleTouchMove: (e: React.TouchEvent) => void /** Attach to the wrapper's onTouchEnd. */ handleTouchEnd: () => void /** Attach to the wrapper's onTouchCancel: the platform taking the gesture over. */ handleTouchCancel: () => void /** * Spread onto the sliding content's `style`. Carries the drag transform, the * settle transition and the drag opacity fade, so the motion's feel lives * here rather than being restated at each call site. * * `willChange` is set only while a gesture is in flight; a permanent * `will-change-transform` class alongside this would keep the compositing * layer promoted at rest. */ slideStyle: React.CSSProperties } /** * Swipe-to-switch-tabs touch logic. Extracted verbatim from the Chip Away and * Uradi Dashboard pages. Behavioural constants: * * - 5px direction lock threshold, measured as total travel * - 0.25 edge dampening factor (when already at the first or last item) * - 60px commit threshold * - 0.4 opacity floor during swipe * - 120px slide-in offset for incoming content * - 300ms animation duration; a committed swipe's slide-in settles on the * spring curve (a few percent of overshoot, no wind-up), an uncommitted * snap-back on ease-out * * The touch handlers ignore swipes that begin on a `[data-tab-bar]` element so * the tab strip can still scroll horizontally without triggering navigation. * * Usage: * * ```tsx * const { slideStyle, swipeRef } = * useSwipeNavigation({ count: items.length, activeIndex, onNavigate: setActiveIndex }) * *

= 2 ? swipeRef : undefined} * > * *

{content}

* ``` * * `swipeOffset` and `isAnimating` stay available for a consumer that needs to * react to the gesture rather than render it. Rendering a transform, transition * and opacity out of them by hand is what `slideStyle` replaces. */ export function useSwipeNavigation({ count, activeIndex, onNavigate, }: UseSwipeNavigationOptions): UseSwipeNavigationResult { const reduced = useReducedMotion() const touchStartX = React.useRef(null) const touchStartY = React.useRef(null) const [swipeOffset, setSwipeOffset] = React.useState(0) const [isAnimating, setIsAnimating] = React.useState(false) const swipeLocked = React.useRef<'horizontal' | 'vertical' | null>(null) // The live drag offset, so the commit decision can be made outside a state // updater -- updaters must be pure, and StrictMode double-invokes them. const offsetRef = React.useRef(0) const slideDirection = React.useRef<'left' | 'right' | null>(null) // Which settle the running animation is: a committed swipe's slide-in takes // the spring curve, an uncommitted snap-back the plain ease-out. const enterSettle = React.useRef(false) // The latest activeIndex, so the listeners read it without taking it as a dep // and re-registering on every navigation. // // Assigned during RENDER, not in an effect. React flushes pending passive // effects before a discrete SYNTHETIC handler, so an effect kept this current // for as long as the gesture arrived through React's props -- but the // listeners are native now, and nothing makes that promise to them. One stale // render here meant `onEnd` computed `currentIndex ± 1` from the PREVIOUS // index, committed a swipe to the wrong tab, and corrected a beat later: the // flash of the outgoing tab on the way to the new one. const activeIndexRef = React.useRef(activeIndex) activeIndexRef.current = activeIndex /** * The gesture, as plain numbers, so the ref path and the legacy prop path * share one implementation. * * `onMove` returns true once the gesture is locked horizontal, which is the * caller's cue to cancel the browser's scroll. Only the ref path can act on * it -- see `swipeRef`. */ const onStart = React.useCallback( (clientX: number, clientY: number, target: EventTarget | null) => { // Clear the previous gesture's origin BEFORE deciding whether to take // this one. Both bail-outs below used to return with the old coordinates // still set, so the next move measured against a stale origin and jumped. touchStartX.current = null touchStartY.current = null swipeLocked.current = null if (isAnimating) return // Don't capture swipes that start on the tab bar (let it scroll horizontally) if ((target as HTMLElement | null)?.closest?.('[data-tab-bar]')) return touchStartX.current = clientX touchStartY.current = clientY }, [isAnimating], ) const onMove = React.useCallback( (clientX: number, clientY: number): boolean => { if (touchStartX.current === null || touchStartY.current === null) return false const dx = clientX - touchStartX.current const dy = clientY - touchStartY.current // Lock on total travel, not per axis. A per-axis threshold of 8 leaves a // gap the engine can start a pan in: a diagonal drag at dx=7, dy=7 has // travelled 9.9px -- past the platform's own scroll slop, short of ours -- // and once the engine has committed, touchmove stops being cancelable. // 5px of travel engages before that. if (swipeLocked.current === null && Math.hypot(dx, dy) > 5) { swipeLocked.current = Math.abs(dx) > Math.abs(dy) ? 'horizontal' : 'vertical' } if (swipeLocked.current !== 'horizontal') return false // Reading-direction displacement: in RTL a rightward drag advances (next), // so flip the sign for the edge / commit decisions. The visual offset stays // physical (`dx`) so the content tracks the finger either way. const rd = isRTL() ? -dx : dx // Resist at edges (no prev / no next), in reading order. const atStart = activeIndexRef.current === 0 && rd > 0 const atEnd = activeIndexRef.current === count - 1 && rd < 0 const dampened = atStart || atEnd ? dx * 0.25 : dx offsetRef.current = dampened setSwipeOffset(dampened) return true }, [count], ) /** Abandon the gesture and settle back, committing nothing. */ const onCancel = React.useCallback(() => { touchStartX.current = null touchStartY.current = null swipeLocked.current = null offsetRef.current = 0 setSwipeOffset(0) }, []) const onEnd = React.useCallback(() => { if (touchStartX.current === null || swipeLocked.current !== 'horizontal') { touchStartX.current = null touchStartY.current = null swipeLocked.current = null setSwipeOffset(0) return } touchStartX.current = null touchStartY.current = null swipeLocked.current = null const threshold = 60 const currentIndex = activeIndexRef.current const rtl = isRTL() const prev = offsetRef.current // Reading-direction offset: RTL flips which physical drag means next/prev. const rd = rtl ? -prev : prev const didSwipe = (rd < -threshold && currentIndex < count - 1) || (rd > threshold && currentIndex > 0) if (didSwipe) { // The incoming content slides in following the PHYSICAL drag (so the // gesture reads continuously in either direction), hence `prev` here. slideDirection.current = prev < 0 ? 'left' : 'right' onNavigate(rd < 0 ? currentIndex + 1 : currentIndex - 1) } else { // Snap back -- animate only when the user has no reduced-motion preference if (!reduced) { enterSettle.current = false setIsAnimating(true) setTimeout(() => setIsAnimating(false), 300) } offsetRef.current = 0 setSwipeOffset(0) } }, [count, onNavigate, reduced]) /** * Attach to the swipe wrapper alongside the `onTouch*` props. * * It carries ONE listener, `touchmove`, because that is the only part that * has to be non-passive: React registers its touch listeners passively, so a * handler reached through `onTouchMove` cannot call `preventDefault`, and the * axis lock could only decide whether this hook reacted -- never whether the * page scrolled. The engines then disagreed: Chromium suppresses scrolling * for the rest of a gesture it judged horizontal, while WebKit filters per * axis and kept scrolling vertically through a horizontal swipe, which read * as dragging the pane in two dimensions at once. * * Everything else -- start, end, cancel -- stays on React's own event system, * where the commit decision has always behaved. Widening the native surface * past `touchmove` buys nothing and moves the tab switch out of React's * event handling for no reason. */ const [swipeNode, setSwipeNode] = React.useState(null) const swipeRef = React.useCallback((node: HTMLElement | null) => setSwipeNode(node), []) // The listeners are registered ONCE per node. The handlers below close over // `count`, `onNavigate` and `isAnimating`, and `onNavigate` is an inline arrow // at most call sites, so keying the effect on them would tear down and re-add // all four listeners on every frame of a drag -- re-registering a blocking // (`passive: false`) touchmove listener sixty times a second, on the one code // path that has to keep up with a finger. Refs instead, the shape // `usePullToRefresh` already uses. const latest = React.useRef({ onStart, onMove, onEnd, onCancel }) latest.current = { onStart, onMove, onEnd, onCancel } React.useEffect(() => { if (!swipeNode) return const move = (e: TouchEvent) => { if (!latest.current.onMove(e.touches[0].clientX, e.touches[0].clientY)) return if (e.cancelable) { // The gesture is ours: stop the page scrolling underneath the pane. e.preventDefault() return } // The engine committed this gesture to a pan before our lock engaged, so // the scroll can no longer be stopped. Dragging on regardless is what the // free two-dimensional drag looked like, so give the gesture up instead. latest.current.onCancel() } swipeNode.addEventListener('touchmove', move, { passive: false }) return () => swipeNode.removeEventListener('touchmove', move) }, [swipeNode]) const handleTouchStart = React.useCallback( (e: React.TouchEvent) => onStart(e.touches[0].clientX, e.touches[0].clientY, e.target), [onStart], ) const handleTouchMove = React.useCallback( (e: React.TouchEvent) => { if (swipeNode) return onMove(e.touches[0].clientX, e.touches[0].clientY) }, [swipeNode, onMove], ) const handleTouchEnd = onEnd const handleTouchCancel = onCancel // When activeIndex changes via swipe, slide new content in from the side it // was pulled from. This MUST be a layout effect: the commit that swaps in // the new tab content still carries the drag offset, and a plain useEffect // runs after paint -- the new content would flash for a frame at the old // drag position (the WRONG side) before being repositioned. With a // synchronous activeIndex source (e.g. useState-driven settings tabs) that // frame is reliably visible; useLayoutEffect repositions before paint. React.useLayoutEffect(() => { if (slideDirection.current) { const dir = slideDirection.current slideDirection.current = null if (reduced) { // Skip the slide-in animation -- jump straight to the final state. setSwipeOffset(0) setIsAnimating(false) } else { const entryFrom = dir === 'left' ? 120 : -120 setSwipeOffset(entryFrom) setIsAnimating(false) // Next frame: animate to 0 requestAnimationFrame(() => { enterSettle.current = true setIsAnimating(true) setSwipeOffset(0) setTimeout(() => setIsAnimating(false), 300) }) } } else { setSwipeOffset(0) } }, [activeIndex, reduced]) // Reads the duration and easing from tokens rather than a literal, so the // settle matches every other transition in the system. Reduced motion never // reaches here: the slide-in above jumps straight to the final offset. // Translate only: the spring's overshoot carries the settle on its own, and a // scale riding along with it reads as the pane changing size rather than // arriving. const slideStyle = React.useMemo( () => ({ transform: swipeOffset !== 0 ? `translateX(${swipeOffset}px)` : undefined, transition: isAnimating ? `transform var(--duration-300) var(--easing-${enterSettle.current ? 'spring' : 'out'})` : undefined, opacity: swipeOffset !== 0 ? Math.max(0.4, 1 - Math.abs(swipeOffset) / 400) : undefined, willChange: swipeOffset !== 0 || isAnimating ? 'transform' : undefined, }), [swipeOffset, isAnimating], ) return { swipeOffset, isAnimating, slideStyle, swipeRef, handleTouchStart, handleTouchMove, handleTouchEnd, handleTouchCancel, } } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@whiskeyjack","registryDependencies":["https://whiskeyjack.net/r/direction.json","https://whiskeyjack.net/r/use-reduced-motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"hooks/use-swipe-navigation.ts","content":"$52","type":"registry:hook","target":"hooks/use-swipe-navigation.ts"}],"className":"h-[70svh] min-h-80"}]]}]