4e: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"] 4f: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"] 50:T1b50,'use client' import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cn } from '@/lib/utils' import { useComposedRefs } from '@/registry/lib/compose-refs' /* ------------------------------------------------------------------------------------------------- * Types * -----------------------------------------------------------------------------------------------*/ type MagneticContextValue = { rootRef: React.RefObject mousePos: React.RefObject<{ x: number; y: number }> strength: number ease: number } /* ------------------------------------------------------------------------------------------------- * Context * -----------------------------------------------------------------------------------------------*/ const MagneticContext = React.createContext(null) function useMagneticContext() { const context = React.useContext(MagneticContext) if (!context) { throw new Error('Magnetic.Inner must be used within a Magnetic.Root') } return context } /* ------------------------------------------------------------------------------------------------- * Root * -----------------------------------------------------------------------------------------------*/ interface RootProps extends React.ComponentPropsWithRef<'div'> { asChild?: boolean /** How strongly inner content follows the cursor (0–1) */ strength?: number /** Return-to-center transition duration in ms */ ease?: number } function Root({ asChild, ref: forwardedRef, strength = 0.35, ease = 350, children, ...props }: RootProps) { const rootRef = React.useRef(null) const mousePos = React.useRef({ x: 0, y: 0 }) const composedRef = useComposedRefs(forwardedRef, rootRef) const handleMouseMove = (e: React.MouseEvent) => { mousePos.current = { x: e.pageX, y: e.pageY } props.onMouseMove?.(e as React.MouseEvent) } const handleMouseEnter = (e: React.MouseEvent) => { props.onMouseEnter?.(e as React.MouseEvent) } const handleMouseLeave = (e: React.MouseEvent) => { props.onMouseLeave?.(e as React.MouseEvent) } const contextValue = React.useMemo( () => ({ rootRef, mousePos, strength, ease }), [strength, ease] ) const Comp = asChild ? Slot : 'div' return ( {children} ) } /* ------------------------------------------------------------------------------------------------- * Inner * -----------------------------------------------------------------------------------------------*/ interface InnerProps extends React.ComponentPropsWithRef<'div'> { asChild?: boolean } function Inner({ asChild, ref: forwardedRef, className, style, ...props }: InnerProps) { const { rootRef, mousePos, strength, ease } = useMagneticContext() const innerRef = React.useRef(null) const composedRef = useComposedRefs(forwardedRef, innerRef) const rafId = React.useRef(0) const current = React.useRef({ x: 0, y: 0 }) const isLooping = React.useRef(false) const prefersReducedMotion = React.useRef(false) const applyTick = React.useEffectEvent(() => { if (prefersReducedMotion.current) return false const el = innerRef.current const rootEl = rootRef.current if (!el || !rootEl) return false const rect = rootEl.getBoundingClientRect() const centerX = rect.left + window.scrollX + rect.width / 2 const centerY = rect.top + window.scrollY + rect.height / 2 const lerpFactor = 0.15 const settleThreshold = 0.1 const targetX = (mousePos.current.x - centerX) * strength const targetY = (mousePos.current.y - centerY) * strength current.current.x += (targetX - current.current.x) * lerpFactor current.current.y += (targetY - current.current.y) * lerpFactor const settled = Math.abs(targetX - current.current.x) < settleThreshold && Math.abs(targetY - current.current.y) < settleThreshold if (settled) { current.current.x = targetX current.current.y = targetY isLooping.current = false } el.style.transform = `translate3d(${current.current.x}px, ${current.current.y}px, 0)` return !settled }) const applyLeave = React.useEffectEvent(() => { cancelAnimationFrame(rafId.current) isLooping.current = false if (prefersReducedMotion.current) return const el = innerRef.current if (!el) return current.current = { x: 0, y: 0 } el.style.transition = `transform ${ease}ms cubic-bezier(0.25, 0.46, 0.45, 0.94)` el.style.transform = 'translate3d(0, 0, 0)' }) React.useEffect(() => { const mq = window.matchMedia('(prefers-reduced-motion: reduce)') prefersReducedMotion.current = mq.matches const onChange = (e: MediaQueryListEvent) => { prefersReducedMotion.current = e.matches if (e.matches) { cancelAnimationFrame(rafId.current) const el = innerRef.current if (el) { el.style.transform = 'translate3d(0, 0, 0)' el.style.transition = '' } } } mq.addEventListener('change', onChange) return () => mq.removeEventListener('change', onChange) }, []) React.useEffect(() => { const root = rootRef.current const inner = innerRef.current if (!root || !inner) return function tick() { if (applyTick()) { rafId.current = requestAnimationFrame(tick) } } function handleEnter() { if (prefersReducedMotion.current) return const el = innerRef.current if (!el) return el.style.transition = '' isLooping.current = true rafId.current = requestAnimationFrame(tick) } function handleMove() { if (isLooping.current) return const el = innerRef.current if (!el || prefersReducedMotion.current) return el.style.transition = '' isLooping.current = true rafId.current = requestAnimationFrame(tick) } root.addEventListener('mouseenter', handleEnter) root.addEventListener('mousemove', handleMove) root.addEventListener('mouseleave', applyLeave) return () => { cancelAnimationFrame(rafId.current) root.removeEventListener('mouseenter', handleEnter) root.removeEventListener('mousemove', handleMove) root.removeEventListener('mouseleave', applyLeave) } }, [rootRef]) const Comp = asChild ? Slot : 'div' return ( ) } export { Root, Inner } 51:T736,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 { // biome-ignore lint/correctness/useExhaustiveDependencies: we want to memoize by all values // eslint-disable-next-line react-hooks/use-memo return React.useCallback(composeRefs(...refs), refs); } export { composeRefs, useComposedRefs }; 4d:["$","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","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","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/react-slot"}]]}]}]]}],["$","$L4e",null,{"namespace":"@joyco","registryDependencies":["@joyco/utils"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/components/magnetic.tsx","content":"$50","type":"registry:component"},{"path":"registry/lib/compose-refs.ts","content":"$51","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]