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:T21ed,'use client'; import React, { useState, useCallback, useEffect, useRef, createContext, useContext, } from 'react'; import { motion, useMotionValue, animate, useInView } from 'motion/react'; import { cn } from '@/lib/utils'; const TimelineContext = createContext<{ textRef: React.RefObject; leftPos: number; rightPos: number; textHeight: number; handleWidth: number; handleLeftStart: (clientX: number) => void; handleRightStart: (clientX: number) => void; } | null>(null); const useTimelineContext = () => { const context = useContext(TimelineContext); if (!context) throw new Error('Timeline components must be used within a Timeline'); return context; }; interface TimelineProps { children: React.ReactNode; rotation?: number; initialLeft?: number; minWidth?: number; className?: string; containerClassName?: string; handleClassName?: string; handleIndicatorClassName?: string; } const Timeline: React.FC = ({ children, rotation = -2.76, initialLeft = 0, minWidth = 56, className, containerClassName, handleClassName, handleIndicatorClassName, }) => { const textRef = useRef(null); const containerRef = useRef(null); const rightMotion = useMotionValue(0); const isInView = useInView(containerRef, { amount: 0.3 }); const [textWidth, setTextWidth] = useState(0); const [textHeight, setTextHeight] = useState(0); const [leftPos, setLeftPos] = useState(initialLeft); const [rightPos, setRightPos] = useState(0); const handleWidth = 28; useEffect(() => { const unsubscribe = rightMotion.onChange((v) => setRightPos(v)); return unsubscribe; }, [rightMotion]); useEffect(() => { const measureText = () => { if (!textRef.current) return; const measuredWidth = textRef.current.offsetWidth; const measuredHeight = textRef.current.offsetHeight; setTextWidth(measuredWidth); setTextHeight(measuredHeight); const fullRight = measuredWidth + handleWidth * 2; setRightPos(fullRight); rightMotion.set(fullRight); }; measureText(); window.addEventListener('resize', measureText); return () => window.removeEventListener('resize', measureText); }, [children, rightMotion, handleWidth]); useEffect(() => { if (!textWidth) return; const fullRight = textWidth + handleWidth * 2; if (isInView) { animate(rightMotion, fullRight, { duration: 0.6, ease: [0.22, 1, 0.36, 1], }); } else { animate(rightMotion, leftPos + minWidth, { duration: 0.6, ease: 'easeInOut', }); } }, [isInView, textWidth, leftPos, minWidth, rightMotion, handleWidth]); const handleLeftStart = useCallback( (clientX: number) => { rightMotion.stop(); const startLeft = leftPos; const startX = clientX; const handleMove = (x: number) => { let newLeft = startLeft + (x - startX); newLeft = Math.max(0, Math.min(newLeft, rightPos - minWidth)); setLeftPos(newLeft); }; const mouseMove = (e: MouseEvent) => handleMove(e.clientX); const touchMove = (e: TouchEvent) => handleMove(e.touches[0].clientX); const end = () => { document.removeEventListener('mousemove', mouseMove); document.removeEventListener('mouseup', end); document.removeEventListener('touchmove', touchMove); document.removeEventListener('touchend', end); document.body.style.cursor = ''; document.body.style.userSelect = ''; }; document.addEventListener('mousemove', mouseMove); document.addEventListener('mouseup', end); document.addEventListener('touchmove', touchMove); document.addEventListener('touchend', end); document.body.style.cursor = 'ew-resize'; document.body.style.userSelect = 'none'; }, [leftPos, rightPos, minWidth, rightMotion], ); const handleRightStart = useCallback( (clientX: number) => { rightMotion.stop(); const startRight = rightPos; const startX = clientX; const maxRight = textWidth + handleWidth * 2; const handleMove = (x: number) => { let newRight = startRight + (x - startX); newRight = Math.max(leftPos + minWidth, Math.min(newRight, maxRight)); setRightPos(newRight); rightMotion.set(newRight); }; const mouseMove = (e: MouseEvent) => handleMove(e.clientX); const touchMove = (e: TouchEvent) => handleMove(e.touches[0].clientX); const end = () => { document.removeEventListener('mousemove', mouseMove); document.removeEventListener('mouseup', end); document.removeEventListener('touchmove', touchMove); document.removeEventListener('touchend', end); document.body.style.cursor = ''; document.body.style.userSelect = ''; }; document.addEventListener('mousemove', mouseMove); document.addEventListener('mouseup', end); document.addEventListener('touchmove', touchMove); document.addEventListener('touchend', end); document.body.style.cursor = 'ew-resize'; document.body.style.userSelect = 'none'; }, [leftPos, rightPos, minWidth, textWidth, rightMotion, handleWidth], ); const width = Math.max(0, rightPos - leftPos); return (

) => handleLeftStart(e.clientX) } onTouchStart={(e: React.TouchEvent) => handleLeftStart(e.touches[0].clientX) } style={{ height: `${textHeight}px` }} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} >

) => handleRightStart(e.clientX) } onTouchStart={(e: React.TouchEvent) => handleRightStart(e.touches[0].clientX) } style={{ height: `${textHeight}px` }} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} >

{children}

); }; interface TimelineTextProps { children: React.ReactNode; className?: string; } const TimelineText: React.FC = ({ children, className }) => { const { textRef } = useTimelineContext(); return (

{children}

); }; export { Timeline, TimelineText }; 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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"namespace":"@scrollxui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/timeline.tsx","content":"$52","type":"registry:ui"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]