52: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"] 53: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"] 54:T1b75,import * as React from 'react' import { cn } from '@/lib/utils' import { useScrollIndicator } from '@/hooks/use-scroll-indicator' export interface ScrollIndicatorProps { /** * The scroll container to track, or `null` to track the DOCUMENT scroller. * * In document mode the indicator pins to the viewport (`fixed`) rather than to * a `relative` parent, since the thing it describes is the page itself. */ scrollRef: React.RefObject | null /** * Pixels from the top of the positioned parent where the track starts. * Set it to the height of whatever floats over the scroller's top edge * (a frosted header) plus a small gap, so the thumb never runs behind it. */ topOffset?: number /** Pixels from the bottom of the positioned parent. */ bottomOffset?: number /** * Hide the indicator below the `md` breakpoint (default true) -- page-level * scrollers keep the platform's overlay scrollbars on mobile. Pass false * for surfaces that hide their native scrollbar at every size (drawers). */ hideBelowMd?: boolean /** * Let a pointer grab the thumb and scroll with it, thickening on hover. * * Off by default, and deliberately opt-in rather than the standard behaviour: * an interactive track has to accept pointer events, and a strip down the * inline edge of a small surface -- a drawer, a sidebar rail -- would sit on top * of content a click needs to reach. Turn it on for a page-sized scroller, * where the edge is empty and a native scrollbar is what a mouse expects. * * It stays `aria-hidden` and unfocusable even when interactive, which is * deliberate. It is a redundant affordance: the content it scrolls is already * reachable by wheel, touch, and keyboard, and a native overlay scrollbar is * likewise not exposed as a widget. Adding `role="scrollbar"` would promise a * keyboard model that the page's own scrolling already provides. */ interactive?: boolean className?: string } /** * Custom auto-hiding scroll indicator. Renders inside a `relative` parent * that wraps (or contains) the scroll container, replacing a native * scrollbar that would otherwise run behind floating/sticky chrome. Pair it * with `.scrollbar-hide` on the scroll container. Hidden from assistive tech, * and inert unless `interactive`. */ export const ScrollIndicator = React.forwardRef(function ScrollIndicator({ scrollRef, topOffset = 8, bottomOffset = 8, hideBelowMd = true, interactive = false, className, }, ref) { const { thumbHeightPct, thumbTopPct, visible, hasOverflow } = useScrollIndicator(scrollRef) const trackRef = React.useRef(null) const [hovered, setHovered] = React.useState(false) const [dragging, setDragging] = React.useState(false) const grabRef = React.useRef(0) const documentMode = scrollRef === null const scroller = () => (documentMode ? document.documentElement : scrollRef?.current ?? null) /** * Map a pointer position on the track to a scroll offset. * * The hook expresses the thumb as percentages of the TRACK, and its top% plus * its height% always sum to 100 -- so the thumb's travel is exactly * `trackHeight - thumbHeight`, and the mapping back is linear. */ const scrollToPointer = React.useCallback( (clientY: number, grab: number) => { const el = scroller() const track = trackRef.current if (!el || !track) return const rect = track.getBoundingClientRect() const thumbH = Math.max((thumbHeightPct / 100) * rect.height, 24) const travel = rect.height - thumbH if (travel <= 0) return const offset = Math.min(Math.max(clientY - rect.top - grab, 0), travel) el.scrollTop = (offset / travel) * (el.scrollHeight - el.clientHeight) }, // `scroller` reads a ref at call time, so only the thumb size matters here. // eslint-disable-next-line react-hooks/exhaustive-deps [thumbHeightPct, documentMode], ) const onPointerDown = (e: React.PointerEvent) => { if (!interactive || e.button !== 0) return const track = trackRef.current if (!track) return const rect = track.getBoundingClientRect() const thumbTop = rect.top + (thumbTopPct / 100) * rect.height const thumbH = Math.max((thumbHeightPct / 100) * rect.height, 24) const onThumb = e.clientY >= thumbTop && e.clientY <= thumbTop + thumbH // Grabbing the thumb keeps the point under the cursor; clicking bare track // centres it there, which is what a native scrollbar does on a jump. grabRef.current = onThumb ? e.clientY - thumbTop : thumbH / 2 setDragging(true) e.currentTarget.setPointerCapture(e.pointerId) scrollToPointer(e.clientY, grabRef.current) e.preventDefault() } const onPointerMove = (e: React.PointerEvent) => { if (!dragging) return scrollToPointer(e.clientY, grabRef.current) } const endDrag = (e: React.PointerEvent) => { if (!dragging) return setDragging(false) e.currentTarget.releasePointerCapture(e.pointerId) } if (!hasOverflow) return null // Held open while the pointer is on it or dragging, so it does not fade out // from under the cursor mid-drag. const shown = visible || (interactive && (hovered || dragging)) const thick = interactive && (hovered || dragging) return (

setHovered(true) : undefined} onPointerLeave={interactive ? () => setHovered(false) : undefined} onPointerDown={interactive ? onPointerDown : undefined} onPointerMove={interactive ? onPointerMove : undefined} onPointerUp={interactive ? endDrag : undefined} onPointerCancel={interactive ? endDrag : undefined} >

) }) ScrollIndicator.displayName = 'ScrollIndicator' 51:["$","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,["$","$L52",null,{"namespace":"@whiskeyjack","registryDependencies":["https://whiskeyjack.net/r/use-scroll-indicator.json","https://whiskeyjack.net/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/ui/scroll-indicator.tsx","content":"$54","type":"registry:ui","target":"components/ui/scroll-indicator.tsx"}],"className":"h-[70svh] min-h-80"}]]}]