61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T46c9,'use client'; import * as React from 'react'; import { StarIcon } from 'lucide-react'; import { AnimatePresence,motion, type HTMLMotionProps, isMotionComponent, useInView, type UseInViewOptions, MotionValue, useMotionValue, useSpring, useTransform } from 'motion/react'; import { cn } from '@/lib/utils'; function percentageBetween(value: number, min: number, max: number): number { return ((value - min) / (max - min)) * 100; } type GitHubStarsWheelProps = { username?: string; repo?: string; direction?: 'btt' | 'ttb'; delay?: number; value?: number; step?: number; } & Omit< ScrollingNumberContainerProps, 'direction' | 'number' | 'step' >; function GitHubStarsWheel({ username, repo, direction = 'btt', itemsSize = 35, sideItemsCount = 2, delay = 0, step = 100, value, className, ...props }: GitHubStarsWheelProps) { const [stars, setStars] = React.useState(value ?? 0); const [currentStars, setCurrentStars] = React.useState(0); const [isLoading, setIsLoading] = React.useState(true); const roundedStars = React.useMemo( () => Math.round(stars / step) * step, [stars, step], ); const isCompleted = React.useMemo( () => currentStars === roundedStars, [currentStars, roundedStars], ); const fillPercentage = React.useMemo( () => percentageBetween(currentStars, 0, roundedStars), [currentStars, roundedStars], ); React.useEffect(() => { if (value !== undefined && username && repo) return; const timeout = setTimeout(() => { fetch(`https://api.github.com/repos/${username}/${repo}`) .then((response) => response.json()) .then((data) => { if (data && typeof data.stargazers_count === 'number') { setStars(data.stargazers_count); } }) .catch(console.error) .finally(() => setIsLoading(false)); }, delay); return () => clearTimeout(timeout); }, [username, repo, value, delay]); return ( !isLoading && (

) ); } export { GitHubStarsWheel, type GitHubStarsWheelProps }; type Side = 'top' | 'bottom' | 'left' | 'right'; type Align = 'start' | 'center' | 'end'; type ParticlesContextType = { animate: boolean; isInView: boolean; }; const [ParticlesProvider, useParticles] = getStrictContext('ParticlesContext'); type ParticlesProps = WithAsChild< Omit, 'children'> & { animate?: boolean; children: React.ReactNode; } & UseIsInViewOptions >; function Particles({ ref, animate = true, asChild = false, inView = false, inViewMargin = '0px', inViewOnce = true, children, style, ...props }: ParticlesProps) { const { ref: localRef, isInView } = useIsInView( ref as React.Ref, { inView, inViewOnce, inViewMargin }, ); const Component = asChild ? Slot : motion.div; return ( {children} ); } type ParticlesEffectProps = Omit, 'children'> & { side?: Side; align?: Align; count?: number; radius?: number; spread?: number; duration?: number; holdDelay?: number; sideOffset?: number; alignOffset?: number; delay?: number; }; function ParticlesEffect({ side = 'top', align = 'center', count = 6, radius = 30, spread = 360, duration = 0.8, holdDelay = 0.05, sideOffset = 0, alignOffset = 0, delay = 0, transition, style, ...props }: ParticlesEffectProps) { const { animate, isInView } = useParticles(); const isVertical = side === 'top' || side === 'bottom'; const alignPct = align === 'start' ? '0%' : align === 'end' ? '100%' : '50%'; const top = isVertical ? side === 'top' ? `calc(0% - ${sideOffset}px)` : `calc(100% + ${sideOffset}px)` : `calc(${alignPct} + ${alignOffset}px)`; const left = isVertical ? `calc(${alignPct} + ${alignOffset}px)` : side === 'left' ? `calc(0% - ${sideOffset}px)` : `calc(100% + ${sideOffset}px)`; const containerStyle: React.CSSProperties = { position: 'absolute', top, left, transform: 'translate(-50%, -50%)', }; const angleStep = (spread * (Math.PI / 180)) / Math.max(1, count - 1); return ( {animate && isInView && [...Array(count)].map((_, i) => { const angle = i * angleStep; const x = Math.cos(angle) * radius; const y = Math.sin(angle) * radius; return ( ); })} ); } export { Particles, ParticlesEffect, type ParticlesProps, type ParticlesEffectProps, }; type AnyProps = Record; type DOMMotionProps = Omit< HTMLMotionProps, 'ref' > & { ref?: React.Ref }; type WithAsChild = | (Base & { asChild: true; children: React.ReactElement }) | (Base & { asChild?: false | undefined }); type SlotProps = { // eslint-disable-next-line @typescript-eslint/no-explicit-any children?: any; } & DOMMotionProps; function mergeRefs( ...refs: (React.Ref | undefined)[] ): React.RefCallback { return (node) => { refs.forEach((ref) => { if (!ref) return; if (typeof ref === 'function') { ref(node); } else { (ref as React.RefObject).current = node; } }); }; } function mergeProps( childProps: AnyProps, slotProps: DOMMotionProps, ): AnyProps { const merged: AnyProps = { ...childProps, ...slotProps }; if (childProps.className || slotProps.className) { merged.className = cn( childProps.className as string, slotProps.className as string, ); } if (childProps.style || slotProps.style) { merged.style = { ...(childProps.style as React.CSSProperties), ...(slotProps.style as React.CSSProperties), }; } return merged; } function Slot({ children, ref, ...props }: SlotProps) { const isAlreadyMotion = typeof children.type === 'object' && children.type !== null && isMotionComponent(children.type); const Base = React.useMemo( () => isAlreadyMotion ? (children.type as React.ElementType) : motion.create(children.type as React.ElementType), [isAlreadyMotion, children.type], ); if (!React.isValidElement(children)) return null; const { ref: childRef, ...childProps } = children.props as AnyProps; const mergedProps = mergeProps(childProps, props); return ( // eslint-disable-next-line react-hooks/static-components , ref)} /> ); } export { Slot, type SlotProps, type WithAsChild, type DOMMotionProps, type AnyProps, }; interface UseIsInViewOptions { inView?: boolean; inViewOnce?: boolean; inViewMargin?: UseInViewOptions['margin']; } function useIsInView( ref: React.Ref, options: UseIsInViewOptions = {}, ) { const { inView, inViewOnce = false, inViewMargin = '0px' } = options; const localRef = React.useRef(null); React.useImperativeHandle(ref, () => localRef.current as T); const inViewResult = useInView(localRef, { once: inViewOnce, margin: inViewMargin, }); const isInView = !inView || inViewResult; return { ref: localRef, isInView }; } export { useIsInView, type UseIsInViewOptions }; function getStrictContext( name?: string, ): readonly [ ({ value, children, }: { value: T; children?: React.ReactNode; }) => React.JSX.Element, () => T, ] { const Context = React.createContext(undefined); const Provider = ({ value, children, }: { value: T; children?: React.ReactNode; }) => {children}; const useSafeContext = () => { const ctx = React.useContext(Context); if (ctx === undefined) { throw new Error(`useContext must be used within ${name ?? 'a Provider'}`); } return ctx; }; return [Provider, useSafeContext] as const; } export { getStrictContext }; const formatter = new Intl.NumberFormat('en-US'); function generateRange( max: number, step: number, sideItemsCount: number, ): number[] { const result: number[] = []; const end = max + sideItemsCount * step; for (let value = end; value >= 0; value -= step) { result.push(value); } return result; } type ScrollingNumberDirection = 'ltr' | 'rtl' | 'ttb' | 'btt'; type ScrollingNumberContextType = { number: number; step: number; itemsSize: number; sideItemsCount: number; displayedItemsCount: number; isInView: boolean; direction: ScrollingNumberDirection; isVertical: boolean; range: number[]; onNumberChange?: (value: number) => void; }; const [ScrollingNumberProvider, useScrollingNumber] = getStrictContext('ScrollingNumberContext'); type ScrollingNumberContainerProps = React.ComponentProps<'div'> & { number: number; step: number; itemsSize?: number; sideItemsCount?: number; direction?: ScrollingNumberDirection; onNumberChange?: (value: number) => void; } & UseIsInViewOptions; function ScrollingNumberContainer({ ref, number, step, itemsSize = 30, sideItemsCount = 2, direction = 'btt', inView = false, inViewMargin = '0px', inViewOnce = true, onNumberChange, style, ...props }: ScrollingNumberContainerProps) { const { ref: localRef, isInView } = useIsInView( ref as React.Ref, { inView, inViewOnce, inViewMargin, }, ); const displayedItemsCount = React.useMemo( () => 1 + sideItemsCount * 2, [sideItemsCount], ); const isVertical = React.useMemo( () => direction === 'btt' || direction === 'ttb', [direction], ); const range = React.useMemo( () => generateRange(number, step, sideItemsCount), [number, step, sideItemsCount], ); return (

); } type ScrollingNumberHighlightProps = React.ComponentProps<'div'>; function ScrollingNumberHighlight({ style, ...props }: ScrollingNumberHighlightProps) { const { itemsSize, isVertical, direction } = useScrollingNumber(); return (

); } type ScrollingNumberProps = HTMLMotionProps<'div'> & { delay?: number; onCompleted?: () => void; }; function ScrollingNumber({ transition = { stiffness: 90, damping: 30 }, delay = 0, onCompleted, style, ...props }: ScrollingNumberProps) { const { itemsSize, sideItemsCount, displayedItemsCount, isInView, direction, isVertical, range, step, number, onNumberChange, } = useScrollingNumber(); const motionKey: 'x' | 'y' = isVertical ? 'y' : 'x'; const initialOffset = itemsSize * sideItemsCount; const travel = itemsSize * (range.length - displayedItemsCount); let initialPosition: number; let finalPosition: number; switch (direction) { case 'btt': initialPosition = -initialOffset; finalPosition = travel; break; case 'ttb': initialPosition = initialOffset; finalPosition = -travel; break; case 'rtl': initialPosition = -initialOffset; finalPosition = travel; break; case 'ltr': initialPosition = initialOffset; finalPosition = -travel; break; default: initialPosition = -initialOffset; finalPosition = travel; } const posMotion: MotionValue = useMotionValue(initialPosition); const posSpring = useSpring(posMotion, transition); React.useEffect(() => { if (!isInView) return; const timer = setTimeout(() => { posMotion.set(finalPosition); }, delay); return () => clearTimeout(timer); }, [isInView, finalPosition, posMotion, delay]); const currentIndex = useTransform( posSpring, (p) => Math.abs(p) / itemsSize + sideItemsCount, ); const currentValue = useTransform(currentIndex, (idx) => idx * step); const snappedValue = useTransform( currentIndex, (idx) => Math.round(idx) * step, ); const completedTransform = useTransform( currentValue, (val) => val >= number * 0.99, ); React.useEffect(() => { const unsubscribe = completedTransform.on('change', (latest) => { if (latest) onCompleted?.(); }); return unsubscribe; }, [completedTransform, onCompleted]); React.useEffect(() => { const unsub = snappedValue.on('change', (val) => { const bounded = val < 0 ? 0 : val > number ? number : val; onNumberChange?.(bounded); }); return unsub; }, [snappedValue, onNumberChange, number]); const directionMap: Record< ScrollingNumberDirection, React.CSSProperties['flexDirection'] > = { btt: 'column', ttb: 'column-reverse', rtl: 'row', ltr: 'row-reverse', }; return ( ); } type ScrollingNumberItemsProps = Omit, 'children'>; function ScrollingNumberItems({ style, ...props }: ScrollingNumberItemsProps) { const { range, direction, itemsSize, isVertical } = useScrollingNumber(); return range.map((value) => (

{formatter.format(value)}

)); } export { ScrollingNumberContainer, ScrollingNumber, ScrollingNumberHighlight, ScrollingNumberItems, useScrollingNumber, type ScrollingNumberContainerProps, type ScrollingNumberProps, type ScrollingNumberHighlightProps, type ScrollingNumberItemsProps, type ScrollingNumberDirection, type ScrollingNumberContextType, }; 60:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L61",null,{"namespace":"@watermelon","registryDependencies":["utils"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/components/watermelon-ui/github-stars-wheel.tsx","content":"$63","type":"registry:ui","target":"components/ui/github-stars-wheel.tsx"}],"className":"h-[70svh] min-h-80"}]]}]