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:T234d,'use client'; import React, { useState, useEffect, useRef } from 'react'; import { motion, useMotionValue, useSpring, useTransform, AnimatePresence, } from 'motion/react'; type SpringOptions = { stiffness?: number; damping?: number; mass?: number; velocity?: number; restSpeed?: number; restDelta?: number; }; const cn = (...classes: (string | undefined | false | null)[]) => { return classes.filter(Boolean).join(' '); }; export type DockItemData = { id: number; icon: React.ReactNode; label: string; description?: string; image?: string; onClick: () => void; className?: string; }; export type MagicDockProps = { items: DockItemData[]; className?: string; distance?: number; panelHeight?: number; baseItemSize?: number; dockHeight?: number; magnification?: number; spring?: SpringOptions; variant?: 'default' | 'gradient' | 'tooltip'; }; type DockItemProps = { item: DockItemData; mouseX: React.RefObject; spring: SpringOptions; distance: number; baseItemSize: number; magnification: number; variant: 'default' | 'gradient' | 'tooltip'; setHoveredIndex: React.Dispatch>; hoveredIndex: number | null; isTouchDevice: boolean; }; function DockItem({ item, mouseX, spring, distance, magnification, baseItemSize, variant, setHoveredIndex, hoveredIndex, isTouchDevice, }: DockItemProps) { const ref = useRef(null); const mouseXMotion = useMotionValue(0); const isHovered = useMotionValue(0); const x = useMotionValue(0); const tooltipSpringConfig = { stiffness: 100, damping: 5 }; const rotate = useSpring( useTransform(x, [-100, 100], [-15, 15]), tooltipSpringConfig, ); const translateX = useSpring( useTransform(x, [-100, 100], [-20, 20]), tooltipSpringConfig, ); useEffect(() => { if (hoveredIndex === item.id) { isHovered.set(1); } else { isHovered.set(0); } }, [hoveredIndex, item.id, isHovered]); useEffect(() => { if (isTouchDevice) return; const handleMouseMove = (e: MouseEvent) => { if (!ref.current) return; const rect = ref.current.getBoundingClientRect(); const distance = e.clientX - (rect.x + rect.width / 2); mouseXMotion.set(distance); }; window.addEventListener('mousemove', handleMouseMove); return () => { window.removeEventListener('mousemove', handleMouseMove); }; }, [mouseXMotion, isTouchDevice]); const handleItemMouseMove = ( event: React.MouseEvent, ) => { if (isTouchDevice) return; const halfWidth = event.currentTarget.offsetWidth / 2; x.set(event.nativeEvent.offsetX - halfWidth); }; const targetSize = useTransform( mouseXMotion, [-distance, 0, distance], [baseItemSize, isTouchDevice ? baseItemSize : magnification, baseItemSize], ); const size = useSpring(targetSize, spring); const getBorderStyles = () => { switch (variant) { case 'gradient': return 'border-transparent group-hover:border-slate-700 dark:border-white/20'; case 'tooltip': return 'border-white/40 group-hover:border-white'; default: return 'border-neutral-700'; } }; return ( !isTouchDevice && setHoveredIndex(item.id)} onMouseLeave={() => !isTouchDevice && setHoveredIndex(null)} onMouseMove={handleItemMouseMove} onClick={item.onClick} tabIndex={0} role='button' aria-haspopup='true' > {item.image ? ( {item.label}

) : (

{item.icon}

)} {!isTouchDevice && ( {hoveredIndex === item.id && ( {variant === 'tooltip' && ( <>

)}

{item.label}

{item.description && (

{item.description}

)} )} )} ); } export default function MagicDock({ items, className = '', spring = { mass: 0.1, stiffness: 150, damping: 12 }, magnification = 70, distance = 150, panelHeight = 64, dockHeight = 256, baseItemSize = 50, variant = 'default', }: MagicDockProps) { const [hoveredIndex, setHoveredIndex] = useState(null); const [isTouchDevice, setIsTouchDevice] = useState(false); const mouseX = useRef(Infinity as number); const isHovered = useMotionValue(0); useEffect(() => { const mediaQuery = window.matchMedia('(pointer: coarse)'); const handleChange = (e: MediaQueryListEvent) => { setIsTouchDevice(e.matches); }; // initial value without triggering a render if (mediaQuery.matches !== isTouchDevice) { // we already have the correct value, no need to setState } mediaQuery.addEventListener('change', handleChange); return () => { mediaQuery.removeEventListener('change', handleChange); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { setIsTouchDevice(window.matchMedia('(pointer: coarse)').matches); }, []); const maxHeight = Math.max(dockHeight, magnification + magnification / 2 + 4); const heightRow = useTransform(isHovered, [0, 1], [panelHeight, maxHeight]); const height = useSpring(heightRow, spring); const getBgStyles = () => { switch (variant) { case 'gradient': return 'bg-black/85 backdrop-blur-md'; case 'tooltip': return 'bg-black/70 backdrop-blur-lg'; default: return 'bg-black/90'; } }; return ( ) => { if (!isTouchDevice) { isHovered.set(1); mouseX.current = e.pageX; } }} onMouseLeave={() => { if (!isTouchDevice) { isHovered.set(0); mouseX.current = Infinity; } }} className={cn( `absolute bottom-2 left-1/2 transform -translate-x-1/2 flex items-end w-fit gap-4 rounded-2xl border-neutral-700/50 border-2 pb-2 px-4 ${getBgStyles()}`, className, )} style={{ height: panelHeight }} role='toolbar' aria-label='Application dock' > {items.map((item) => ( ))} ); } 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","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@scrollxui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/magicdock.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]