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/1o6_421saitt-.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/1o6_421saitt-.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:T2c48,"use client"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "cn"; import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, } from "lucide-react"; import { Slot as SlotPrimitive } from "radix-ui"; import * as React from "react"; import { useComposedRefs } from "@/lib/compose-refs"; const DATA_TOP_SCROLL = "data-top-scroll"; const DATA_BOTTOM_SCROLL = "data-bottom-scroll"; const DATA_LEFT_SCROLL = "data-left-scroll"; const DATA_RIGHT_SCROLL = "data-right-scroll"; const DATA_TOP_BOTTOM_SCROLL = "data-top-bottom-scroll"; const DATA_LEFT_RIGHT_SCROLL = "data-left-right-scroll"; const scrollerVariants = cva("", { variants: { orientation: { vertical: [ "overflow-y-auto", "data-[top-scroll=true]:[mask-image:linear-gradient(0deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]", "data-[bottom-scroll=true]:[mask-image:linear-gradient(180deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]", "data-[top-bottom-scroll=true]:[mask-image:linear-gradient(#000,#000,transparent_0,#000_var(--scroll-shadow-size),#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]", ], horizontal: [ "overflow-x-auto", "data-[left-scroll=true]:[mask-image:linear-gradient(270deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]", "data-[right-scroll=true]:[mask-image:linear-gradient(90deg,#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]", "data-[left-right-scroll=true]:[mask-image:linear-gradient(to_right,#000,#000,transparent_0,#000_var(--scroll-shadow-size),#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]", ], }, hideScrollbar: { true: "[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", false: "", }, }, defaultVariants: { orientation: "vertical", hideScrollbar: false, }, }); type ScrollDirection = "up" | "down" | "left" | "right"; type ScrollVisibility = { [key in ScrollDirection]: boolean; }; interface ScrollerProps extends VariantProps, React.ComponentProps<"div"> { size?: number; offset?: number; asChild?: boolean; withNavigation?: boolean; scrollStep?: number; scrollTriggerMode?: "press" | "hover" | "click"; } function Scroller(props: ScrollerProps) { const { orientation = "vertical", hideScrollbar, className, size = 40, offset = 0, scrollStep = 40, style, asChild, withNavigation = false, scrollTriggerMode = "press", ref, ...scrollerProps } = props; const containerRef = React.useRef(null); const composedRef = useComposedRefs(ref, containerRef); const [scrollVisibility, setScrollVisibility] = React.useState({ up: false, down: false, left: false, right: false, }); const onScrollBy = React.useCallback( (direction: ScrollDirection) => { const container = containerRef.current; if (!container) return; const scrollMap: Record void> = { up: () => (container.scrollTop -= scrollStep), down: () => (container.scrollTop += scrollStep), left: () => (container.scrollLeft -= scrollStep), right: () => (container.scrollLeft += scrollStep), }; scrollMap[direction](); }, [scrollStep], ); const scrollHandlers = React.useMemo( () => ({ up: () => onScrollBy("up"), down: () => onScrollBy("down"), left: () => onScrollBy("left"), right: () => onScrollBy("right"), }), [onScrollBy], ); React.useLayoutEffect(() => { const container = containerRef.current; if (!container) return; function onScroll() { if (!container) return; const isVertical = orientation === "vertical"; if (isVertical) { const scrollTop = container.scrollTop; const clientHeight = container.clientHeight; const scrollHeight = container.scrollHeight; if (withNavigation) { setScrollVisibility((prev) => { const newUp = scrollTop > offset; const newDown = scrollTop + clientHeight < scrollHeight; if (prev.up !== newUp || prev.down !== newDown) { return { ...prev, up: newUp, down: newDown, }; } return prev; }); } const hasTopScroll = scrollTop > offset; const hasBottomScroll = scrollTop + clientHeight + offset < scrollHeight; const isVerticallyScrollable = scrollHeight > clientHeight; if (hasTopScroll && hasBottomScroll && isVerticallyScrollable) { container.setAttribute(DATA_TOP_BOTTOM_SCROLL, "true"); container.removeAttribute(DATA_TOP_SCROLL); container.removeAttribute(DATA_BOTTOM_SCROLL); } else { container.removeAttribute(DATA_TOP_BOTTOM_SCROLL); if (hasTopScroll) container.setAttribute(DATA_TOP_SCROLL, "true"); else container.removeAttribute(DATA_TOP_SCROLL); if (hasBottomScroll && isVerticallyScrollable) container.setAttribute(DATA_BOTTOM_SCROLL, "true"); else container.removeAttribute(DATA_BOTTOM_SCROLL); } } const scrollLeft = container.scrollLeft; const clientWidth = container.clientWidth; const scrollWidth = container.scrollWidth; if (withNavigation) { setScrollVisibility((prev) => { const newLeft = scrollLeft > offset; const newRight = scrollLeft + clientWidth < scrollWidth; if (prev.left !== newLeft || prev.right !== newRight) { return { ...prev, left: newLeft, right: newRight, }; } return prev; }); } const hasLeftScroll = scrollLeft > offset; const hasRightScroll = scrollLeft + clientWidth + offset < scrollWidth; const isHorizontallyScrollable = scrollWidth > clientWidth; if (hasLeftScroll && hasRightScroll && isHorizontallyScrollable) { container.setAttribute(DATA_LEFT_RIGHT_SCROLL, "true"); container.removeAttribute(DATA_LEFT_SCROLL); container.removeAttribute(DATA_RIGHT_SCROLL); } else { container.removeAttribute(DATA_LEFT_RIGHT_SCROLL); if (hasLeftScroll) container.setAttribute(DATA_LEFT_SCROLL, "true"); else container.removeAttribute(DATA_LEFT_SCROLL); if (hasRightScroll && isHorizontallyScrollable) container.setAttribute(DATA_RIGHT_SCROLL, "true"); else container.removeAttribute(DATA_RIGHT_SCROLL); } } onScroll(); container.addEventListener("scroll", onScroll); window.addEventListener("resize", onScroll); return () => { container.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, [orientation, offset, withNavigation]); const composedStyle = React.useMemo( () => ({ "--scroll-shadow-size": `${size}px`, ...style, }), [size, style], ); const activeDirections = React.useMemo(() => { if (!withNavigation) return []; return orientation === "vertical" ? ["up", "down"] : ["left", "right"]; }, [orientation, withNavigation]); const ScrollerPrimitive = asChild ? SlotPrimitive.Slot : "div"; const ScrollerImpl = ( ); const navigationButtons = React.useMemo(() => { if (!withNavigation) return null; return activeDirections .filter((direction) => scrollVisibility[direction]) .map((direction) => ( )); }, [ activeDirections, scrollVisibility, scrollHandlers, scrollTriggerMode, withNavigation, ]); if (withNavigation) { return (

{navigationButtons} {ScrollerImpl}

); } return ScrollerImpl; } const scrollButtonVariants = cva( "absolute z-10 transition-opacity [&>svg]:size-4 [&>svg]:opacity-80 hover:[&>svg]:opacity-100", { variants: { direction: { up: "top-2 left-1/2 -translate-x-1/2", down: "bottom-2 left-1/2 -translate-x-1/2", left: "top-1/2 left-2 -translate-y-1/2", right: "top-1/2 right-2 -translate-y-1/2", }, }, defaultVariants: { direction: "up", }, }, ); const directionToIcon: Record = { up: ChevronUp, down: ChevronDown, left: ChevronLeft, right: ChevronRight, } as const; interface ScrollButtonProps extends React.ComponentProps<"button"> { direction: ScrollDirection; triggerMode?: "press" | "hover" | "click"; } function ScrollButton(props: ScrollButtonProps) { const { direction, className, triggerMode = "press", onClick, ref, ...buttonProps } = props; const [autoScrollTimer, setAutoScrollTimer] = React.useState( null, ); const onAutoScrollStart = React.useCallback( (event?: React.MouseEvent) => { if (autoScrollTimer !== null) return; if (triggerMode === "press") { const timer = window.setInterval(onClick ?? (() => {}), 50); setAutoScrollTimer(timer); } else if (triggerMode === "hover") { const timer = window.setInterval(() => { if (event) onClick?.(event); }, 50); setAutoScrollTimer(timer); } }, [autoScrollTimer, onClick, triggerMode], ); const onAutoScrollStop = React.useCallback(() => { if (autoScrollTimer === null) return; window.clearInterval(autoScrollTimer); setAutoScrollTimer(null); }, [autoScrollTimer]); const eventHandlers = React.useMemo(() => { const triggerModeHandlers: Record< NonNullable, React.ComponentProps<"button"> > = { press: { onPointerDown: onAutoScrollStart, onPointerUp: onAutoScrollStop, onPointerLeave: onAutoScrollStop, onClick: () => {}, }, hover: { onPointerEnter: onAutoScrollStart, onPointerLeave: onAutoScrollStop, onClick: () => {}, }, click: { onClick, }, } as const; return triggerModeHandlers[triggerMode] ?? {}; }, [triggerMode, onAutoScrollStart, onAutoScrollStop, onClick]); React.useEffect(() => { return () => onAutoScrollStop(); }, [onAutoScrollStop]); const Icon = directionToIcon[direction]; return ( ); } export { Scroller }; 53:T76f,/** * @see https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx */ import * as React from "react"; type PossibleRef = React.Ref | undefined; /** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */ function setRef(ref: PossibleRef, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { ref.current = value; } } /** * A utility to compose multiple refs together * Accepts callback refs and RefObject(s) */ function composeRefs(...refs: PossibleRef[]): React.RefCallback { return (node) => { let hasCleanup = false; const cleanups = refs.map((ref) => { const cleanup = setRef(ref, node); if (!hasCleanup && typeof cleanup === "function") { hasCleanup = true; } return cleanup; }); // React <19 will log an error to the console if a callback ref returns a // value. We don't use ref cleanups internally so this will only happen if a // user's ref callback returns a value, which we only expect if they are // using the cleanup functionality added in React 19. if (hasCleanup) { return () => { for (let i = 0; i < cleanups.length; i++) { const cleanup = cleanups[i]; if (typeof cleanup === "function") { cleanup(); } else { setRef(refs[i], null); } } }; } }; } /** * A custom hook that composes multiple refs * Accepts callback refs and RefObject(s) */ function useComposedRefs(...refs: PossibleRef[]): React.RefCallback { // oxlint-disable-next-line react/exhaustive-deps -- we want to memoize by all values return React.useCallback(composeRefs(...refs), refs); } export { composeRefs, useComposedRefs }; 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"cn"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L50",null,{"namespace":"@catalogs","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/scroller.tsx","content":"$52","type":"registry:ui","target":""},{"path":"lib/compose-refs.ts","content":"$53","type":"registry:lib","target":""}],"className":"h-[70svh] min-h-80"}]]}]